From 9a7e72f97734579fc5b87066f34e4d6997abc801 Mon Sep 17 00:00:00 2001 From: antv Date: Fri, 1 Nov 2024 16:38:08 +0800 Subject: [PATCH] perf: optimize behaviors perf --- .../demos/case-unicorns-investors.ts | 4 +- .../behaviors/auto-adapt-label/padding-60.svg | 300 +++++++++--------- .../behaviors/auto-adapt-label/zoom-3.svg | 300 +++++++++--------- packages/g6/src/behaviors/auto-adapt-label.ts | 55 +++- packages/g6/src/behaviors/fix-element-size.ts | 17 +- 5 files changed, 361 insertions(+), 315 deletions(-) diff --git a/packages/g6/__tests__/demos/case-unicorns-investors.ts b/packages/g6/__tests__/demos/case-unicorns-investors.ts index d7f16490fe..217cd3a838 100644 --- a/packages/g6/__tests__/demos/case-unicorns-investors.ts +++ b/packages/g6/__tests__/demos/case-unicorns-investors.ts @@ -7,7 +7,8 @@ import { Graph } from '@/src'; * 1086 nodes, 1247 edges * * 10 VC firms in Silicon Valley funded 82% of all unicorns, 98% of all exited unicorns. Data from CB Insights, updated March 2020. - * @param context + * @param context - context + * @returns - graph */ export const caseUnicornsInvestors: TestCase = async (context) => { const data = await fetch('https://assets.antv.antgroup.com/g6/unicorns-investors.json').then((res) => res.json()); @@ -55,6 +56,7 @@ export const caseUnicornsInvestors: TestCase = async (context) => { collide: { radius: (node: NodeData) => size(node) }, manyBody: { strength: (node: NodeData) => -4 * size(node) }, animation: false, + iterations: 20, }, transforms: [ { diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg index 258b75ed0f..89a7d25b62 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/padding-60.svg @@ -1579,10 +1579,10 @@ - + - + Sanskrit @@ -1609,10 +1609,10 @@ - + - + Middle Dutch @@ -1624,10 +1624,10 @@ - + - + West Germanic @@ -1639,10 +1639,10 @@ - + - + Iranian @@ -1654,10 +1654,10 @@ - + - + South Slavic @@ -1669,10 +1669,10 @@ - + - + Brythonic @@ -1699,10 +1699,10 @@ - + - + Baltic @@ -1714,10 +1714,10 @@ - + - + Goidelic @@ -1729,10 +1729,10 @@ - + - + Middle High German @@ -1744,10 +1744,10 @@ - + - + Celtic @@ -1774,10 +1774,10 @@ - + - + Old Persian @@ -1804,10 +1804,10 @@ - + - + Middle Swedish @@ -1819,10 +1819,10 @@ - + - + Old English @@ -1834,10 +1834,10 @@ - + - + Middle English @@ -1849,10 +1849,10 @@ - + - + Old Frisian @@ -1864,10 +1864,10 @@ - + - + Old Dutch @@ -1879,10 +1879,10 @@ - + - + Old Low German @@ -1894,10 +1894,10 @@ - + - + Middle Low German @@ -1909,10 +1909,10 @@ - + - + Old High German @@ -1924,10 +1924,10 @@ - + - + Middle Persian @@ -1939,10 +1939,10 @@ - + - + Old Prussian @@ -1954,10 +1954,10 @@ - + - + Lithuanian @@ -1969,10 +1969,10 @@ - + - + Latvian @@ -2014,10 +2014,10 @@ - + - + Macedonian @@ -2089,10 +2089,10 @@ - + - + Russian @@ -2104,10 +2104,10 @@ - + - + Ukrainian @@ -2119,10 +2119,10 @@ - + - + Belarusian @@ -2134,10 +2134,10 @@ - + - + Rusyn @@ -2149,10 +2149,10 @@ - + - + Swedish @@ -2179,10 +2179,10 @@ - + - + English @@ -2194,10 +2194,10 @@ - + - + Frisian @@ -2209,10 +2209,10 @@ - + - + Hollandic @@ -2224,10 +2224,10 @@ - + - + Flemish @@ -2239,10 +2239,10 @@ - + - + Dutch @@ -2254,10 +2254,10 @@ - + - + Limburgish @@ -2269,10 +2269,10 @@ - + - + Brabantian @@ -2284,10 +2284,10 @@ - + - + Rhinelandic @@ -2299,10 +2299,10 @@ - + - + Low German @@ -2314,10 +2314,10 @@ - + - + (High) German @@ -2329,10 +2329,10 @@ - + - + Yiddish @@ -2359,10 +2359,10 @@ - + - + Welsh @@ -2374,10 +2374,10 @@ - + - + Breton @@ -2389,10 +2389,10 @@ - + - + Cornish @@ -2404,10 +2404,10 @@ - + - + Cuymbric @@ -2419,10 +2419,10 @@ - + - + Modern Irish @@ -2434,10 +2434,10 @@ - + - + Scottish Gaelic @@ -2449,10 +2449,10 @@ - + - + Manx @@ -2494,10 +2494,10 @@ - + - + Portugese @@ -2509,10 +2509,10 @@ - + - + Spanish @@ -2524,10 +2524,10 @@ - + - + French @@ -2539,10 +2539,10 @@ - + - + Romanian @@ -2554,10 +2554,10 @@ - + - + Italian @@ -2569,10 +2569,10 @@ - + - + Catalan @@ -2599,10 +2599,10 @@ - + - + Rhaeto-Romance @@ -2629,10 +2629,10 @@ - + - + Hittite @@ -2644,10 +2644,10 @@ - + - + Palaic @@ -2659,10 +2659,10 @@ - + - + Luwic @@ -2674,10 +2674,10 @@ - + - + Lydian @@ -2704,10 +2704,10 @@ - + - + Sindhi @@ -2719,10 +2719,10 @@ - + - + Romani @@ -2734,10 +2734,10 @@ - + - + Urdu @@ -2749,10 +2749,10 @@ - + - + Hindi @@ -2764,10 +2764,10 @@ - + - + Bihari @@ -2779,10 +2779,10 @@ - + - + Assamese @@ -2794,10 +2794,10 @@ - + - + Bengali @@ -2809,10 +2809,10 @@ - + - + Marathi @@ -2824,10 +2824,10 @@ - + - + Gujarati @@ -2839,10 +2839,10 @@ - + - + Punjabi @@ -2854,10 +2854,10 @@ - + - + Sinhalese @@ -2869,10 +2869,10 @@ - + - + Persian @@ -2884,10 +2884,10 @@ - + - + Pahlavi @@ -2899,10 +2899,10 @@ - + - + Balochi @@ -2914,10 +2914,10 @@ - + - + Kurdish @@ -2929,10 +2929,10 @@ - + - + Pashto @@ -2944,10 +2944,10 @@ - + - + Sogdian diff --git a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg index 46c3ee16e8..96e10cfd5a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg +++ b/packages/g6/__tests__/snapshots/behaviors/auto-adapt-label/zoom-3.svg @@ -1264,10 +1264,10 @@ - + - + Sanskrit @@ -1294,10 +1294,10 @@ - + - + Middle Dutch @@ -1309,10 +1309,10 @@ - + - + West Germanic @@ -1324,10 +1324,10 @@ - + - + Iranian @@ -1339,10 +1339,10 @@ - + - + South Slavic @@ -1354,10 +1354,10 @@ - + - + Brythonic @@ -1384,10 +1384,10 @@ - + - + Baltic @@ -1399,10 +1399,10 @@ - + - + Goidelic @@ -1414,10 +1414,10 @@ - + - + Middle High German @@ -1429,10 +1429,10 @@ - + - + Celtic @@ -1459,10 +1459,10 @@ - + - + Old Persian @@ -1489,10 +1489,10 @@ - + - + Middle Swedish @@ -1504,10 +1504,10 @@ - + - + Old English @@ -1519,10 +1519,10 @@ - + - + Middle English @@ -1534,10 +1534,10 @@ - + - + Old Frisian @@ -1549,10 +1549,10 @@ - + - + Old Dutch @@ -1564,10 +1564,10 @@ - + - + Old Low German @@ -1579,10 +1579,10 @@ - + - + Middle Low German @@ -1594,10 +1594,10 @@ - + - + Old High German @@ -1609,10 +1609,10 @@ - + - + Middle Persian @@ -1624,10 +1624,10 @@ - + - + Old Prussian @@ -1639,10 +1639,10 @@ - + - + Lithuanian @@ -1654,10 +1654,10 @@ - + - + Latvian @@ -1699,10 +1699,10 @@ - + - + Macedonian @@ -1774,10 +1774,10 @@ - + - + Russian @@ -1789,10 +1789,10 @@ - + - + Ukrainian @@ -1804,10 +1804,10 @@ - + - + Belarusian @@ -1819,10 +1819,10 @@ - + - + Rusyn @@ -1834,10 +1834,10 @@ - + - + Swedish @@ -1864,10 +1864,10 @@ - + - + English @@ -1879,10 +1879,10 @@ - + - + Frisian @@ -1894,10 +1894,10 @@ - + - + Hollandic @@ -1909,10 +1909,10 @@ - + - + Flemish @@ -1924,10 +1924,10 @@ - + - + Dutch @@ -1939,10 +1939,10 @@ - + - + Limburgish @@ -1954,10 +1954,10 @@ - + - + Brabantian @@ -1969,10 +1969,10 @@ - + - + Rhinelandic @@ -1984,10 +1984,10 @@ - + - + Low German @@ -1999,10 +1999,10 @@ - + - + (High) German @@ -2014,10 +2014,10 @@ - + - + Yiddish @@ -2044,10 +2044,10 @@ - + - + Welsh @@ -2059,10 +2059,10 @@ - + - + Breton @@ -2074,10 +2074,10 @@ - + - + Cornish @@ -2089,10 +2089,10 @@ - + - + Cuymbric @@ -2104,10 +2104,10 @@ - + - + Modern Irish @@ -2119,10 +2119,10 @@ - + - + Scottish Gaelic @@ -2134,10 +2134,10 @@ - + - + Manx @@ -2179,10 +2179,10 @@ - + - + Portugese @@ -2194,10 +2194,10 @@ - + - + Spanish @@ -2209,10 +2209,10 @@ - + - + French @@ -2224,10 +2224,10 @@ - + - + Romanian @@ -2239,10 +2239,10 @@ - + - + Italian @@ -2254,10 +2254,10 @@ - + - + Catalan @@ -2284,10 +2284,10 @@ - + - + Rhaeto-Romance @@ -2314,10 +2314,10 @@ - + - + Hittite @@ -2329,10 +2329,10 @@ - + - + Palaic @@ -2344,10 +2344,10 @@ - + - + Luwic @@ -2359,10 +2359,10 @@ - + - + Lydian @@ -2389,10 +2389,10 @@ - + - + Sindhi @@ -2404,10 +2404,10 @@ - + - + Romani @@ -2419,10 +2419,10 @@ - + - + Urdu @@ -2434,10 +2434,10 @@ - + - + Hindi @@ -2449,10 +2449,10 @@ - + - + Bihari @@ -2464,10 +2464,10 @@ - + - + Assamese @@ -2479,10 +2479,10 @@ - + - + Bengali @@ -2494,10 +2494,10 @@ - + - + Marathi @@ -2509,10 +2509,10 @@ - + - + Gujarati @@ -2524,10 +2524,10 @@ - + - + Punjabi @@ -2539,10 +2539,10 @@ - + - + Sinhalese @@ -2554,10 +2554,10 @@ - + - + Persian @@ -2569,10 +2569,10 @@ - + - + Pahlavi @@ -2584,10 +2584,10 @@ - + - + Balochi @@ -2599,10 +2599,10 @@ - + - + Kurdish @@ -2614,10 +2614,10 @@ - + - + Pashto @@ -2629,10 +2629,10 @@ - + - + Sogdian diff --git a/packages/g6/src/behaviors/auto-adapt-label.ts b/packages/g6/src/behaviors/auto-adapt-label.ts index bb4d72391e..300a3e5c1a 100644 --- a/packages/g6/src/behaviors/auto-adapt-label.ts +++ b/packages/g6/src/behaviors/auto-adapt-label.ts @@ -125,18 +125,24 @@ export class AutoAdaptLabel extends BaseBehavior { return res; }; - private get labelElements(): Record { + private getLabelElements(): Element[] { // @ts-expect-error access private property - const elements = Object.values(this.context.element.elementMap); - const labelElements = elements.filter((el: Element) => el.isVisible() && el.getShape('label')); - return Object.fromEntries(labelElements.map((el) => [el.id, el])); + const { elementMap } = this.context.element; + const elements: Element[] = []; + + for (const key in elementMap) { + const element = elementMap[key]; + if (element.isVisible() && element.getShape('label')) { + elements.push(element); + } + } + + return elements; } private getLabelElementsInView(): Element[] { const viewport = this.context.viewport!; - return Object.values(this.labelElements).filter((node) => - viewport.isInViewport(node.getShape('key').getRenderBounds()), - ); + return this.getLabelElements().filter((node) => viewport.isInViewport(node.getShape('key').getRenderBounds())); } private hideLabelIfExceedViewport = (prevElementsInView: Element[], currentElementsInView: Element[]) => { @@ -186,7 +192,12 @@ export class AutoAdaptLabel extends BaseBehavior { private labelElementsInView: Element[] = []; + private isFirstRender = true; + protected onToggleVisibility = (event: IEvent) => { + // @ts-expect-error missing type + if (event.data?.stage === 'zIndex') return; + if (!this.validate(event)) { if (this.hiddenElements.size > 0) { this.hiddenElements.forEach(this.showLabel); @@ -195,7 +206,7 @@ export class AutoAdaptLabel extends BaseBehavior { return; } - const labelElementsInView = this.getLabelElementsInView(); + const labelElementsInView = this.isFirstRender ? this.getLabelElements() : this.getLabelElementsInView(); this.hideLabelIfExceedViewport(this.labelElementsInView, labelElementsInView); this.labelElementsInView = labelElementsInView; @@ -227,17 +238,37 @@ export class AutoAdaptLabel extends BaseBehavior { protected onTransform = throttle(this.onToggleVisibility, this.options.throttle, { leading: true }) as () => void; + private enableToggle = true; + + private toggle = (event: IEvent) => { + if (!this.enableToggle) return; + this.onToggleVisibility(event); + }; + + private onBeforeRender = () => { + this.enableToggle = false; + }; + + private onAfterRender = (event: IEvent) => { + this.onToggleVisibility(event); + this.enableToggle = true; + }; + private bindEvents() { const { graph } = this.context; - graph.on(GraphEvent.AFTER_DRAW, this.onToggleVisibility); - graph.on(GraphEvent.AFTER_LAYOUT, this.onToggleVisibility); + graph.on(GraphEvent.BEFORE_RENDER, this.onBeforeRender); + graph.on(GraphEvent.AFTER_RENDER, this.onAfterRender); + graph.on(GraphEvent.AFTER_DRAW, this.toggle); + graph.on(GraphEvent.AFTER_LAYOUT, this.toggle); graph.on(GraphEvent.AFTER_TRANSFORM, this.onTransform); } private unbindEvents() { const { graph } = this.context; - graph.off(GraphEvent.AFTER_DRAW, this.onToggleVisibility); - graph.off(GraphEvent.AFTER_LAYOUT, this.onToggleVisibility); + graph.off(GraphEvent.BEFORE_RENDER, this.onBeforeRender); + graph.off(GraphEvent.AFTER_RENDER, this.onAfterRender); + graph.off(GraphEvent.AFTER_DRAW, this.toggle); + graph.off(GraphEvent.AFTER_LAYOUT, this.toggle); graph.off(GraphEvent.AFTER_TRANSFORM, this.onTransform); } diff --git a/packages/g6/src/behaviors/fix-element-size.ts b/packages/g6/src/behaviors/fix-element-size.ts index 40778885c2..9b596bc844 100644 --- a/packages/g6/src/behaviors/fix-element-size.ts +++ b/packages/g6/src/behaviors/fix-element-size.ts @@ -3,7 +3,17 @@ import { isEmpty, isFunction, isNumber } from '@antv/util'; import { GraphEvent } from '../constants'; import type { RuntimeContext } from '../runtime/types'; import type { ComboData, EdgeData, NodeData } from '../spec'; -import type { Combo, Edge, Element, ID, IViewportEvent, Node, NodeLikeData, State } from '../types'; +import type { + Combo, + Edge, + Element, + ID, + IGraphLifeCycleEvent, + IViewportEvent, + Node, + NodeLikeData, + State, +} from '../types'; import { idOf } from '../utils/id'; import { getDescendantShapes } from '../utils/shape'; import type { BaseBehaviorOptions } from './base-behavior'; @@ -286,7 +296,10 @@ export class FixElementSize extends BaseBehavior { // this.cachedStyles.clear(); } - private resetTransform = async () => { + private resetTransform = async (event: IGraphLifeCycleEvent) => { + // 首屏渲染时跳过 | Skip when rendering the first screen + if (event.data?.firstRender) return; + if (this.options.reset) { this.restoreCachedStyles(); } else {