perf: optimize the performance of combo graph; (#3769)

* perf: optimize the performance of combo graph; * chore: upgrade license for g6-react-node * chore: upgrade version nums * docs: new demo for viewport animation
antvis · Jul 4, 2022 · 5a7681c · 5a7681c
1 parent 27d980e
commit 5a7681c
Show file tree

Hide file tree

Showing 52 changed files with 356 additions and 112 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # ChangeLog
 
+#### 4.6.15
+
+- fix: fitView does not zoom the graph with animate true;
+
+#### 4.6.14
+
+- perf: optimize the performance of combo graph;
+
 #### 4.6.12
 
 - perf: optimize the performance of combo graph first rendering;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.6.12",
+  "version": "0.6.15",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

diff --git a/packages/core/src/global.ts b/packages/core/src/global.ts
@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.6.12',
+  version: '0.6.15',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/core/src/graph/controller/view.ts b/packages/core/src/graph/controller/view.ts
@@ -62,14 +62,28 @@ export default class ViewController {
       y: bbox.y + bbox.height / 2,
     };
 
-    graph.translate(viewCenter.x - groupCenter.x, viewCenter.y - groupCenter.y, animate, animateCfg);
+    let animateConfig = animateCfg;
+    if (animate) {
+      animateConfig = {
+        ...(animateCfg || {
+          duration: 500,
+          easing: 'easeCubic'
+        }),
+        callback: () => {
+          graph.zoom(ratio, viewCenter, true, animateCfg);
+          animateCfg?.callback?.();
+        }
+      }
+    }
+
     const w = (width - padding[1] - padding[3]) / bbox.width;
     const h = (height - padding[0] - padding[2]) / bbox.height;
     let ratio = w;
     if (w > h) {
       ratio = h;
     }
-    if (!graph.zoom(ratio, viewCenter)) {
+    graph.translate(viewCenter.x - groupCenter.x, viewCenter.y - groupCenter.y, animate, animateConfig);
+    if (!animate && !graph.zoom(ratio, viewCenter)) {
       console.warn('zoom failed, ratio out of range, ratio: %f', ratio);
     }
   }

diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
@@ -1,7 +1,7 @@
 import EventEmitter from '@antv/event-emitter';
 import { ICanvas, IGroup, Point } from '@antv/g-base';
 import { ext } from '@antv/matrix-util';
-import { clone, deepMix, each, isPlainObject, isString } from '@antv/util';
+import { clone, deepMix, each, isPlainObject, isString, debounce } from '@antv/util';
 import {
   getDegree,
   getAdjMatrix as getAdjacentMatrix,
@@ -1277,9 +1277,11 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       }
     }
 
-    const combos = this.get('combos');
-    if (combos && combos.length > 0) {
-      this.sortCombos();
+    if (sortCombo) {
+      const combos = this.get('combos');
+      if (combos && combos.length > 0) {
+        this.sortCombos();
+      }
     }
 
     this.autoPaint();
@@ -2832,38 +2834,42 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
    * 根据 comboTree 结构整理 Combo 相关的图形绘制层级，包括 Combo 本身、节点、边
    * @param {GraphData} data 数据
    */
-  protected sortCombos() {
-    const comboSorted = this.get('comboSorted');
-    if (comboSorted) return;
-    this.set('comboSorted', true);
-    const depthMap = [];
-    const dataDepthMap = {};
-    const comboTrees = this.get('comboTrees');
-    (comboTrees || []).forEach(cTree => {
-      traverseTree(cTree, child => {
-        if (depthMap[child.depth]) depthMap[child.depth].push(child.id);
-        else depthMap[child.depth] = [child.id];
-        dataDepthMap[child.id] = child.depth;
-        return true;
+  protected sortCombos = debounce(
+    () => {
+      const comboSorted = this.get('comboSorted');
+      if (!this || this.destroyed || comboSorted) return;
+      this.set('comboSorted', true);
+      const depthMap = [];
+      const dataDepthMap = {};
+      const comboTrees = this.get('comboTrees');
+      (comboTrees || []).forEach(cTree => {
+        traverseTree(cTree, child => {
+          if (depthMap[child.depth]) depthMap[child.depth].push(child.id);
+          else depthMap[child.depth] = [child.id];
+          dataDepthMap[child.id] = child.depth;
+          return true;
+        });
       });
-    });
-    const edges = this.getEdges().concat(this.get('vedges'));
-    (edges || []).forEach(edgeItem => {
-      const edge = edgeItem.getModel();
-      const sourceDepth: number = dataDepthMap[edge.source as string] || 0;
-      const targetDepth: number = dataDepthMap[edge.target as string] || 0;
-      const depth = Math.max(sourceDepth, targetDepth);
-      if (depthMap[depth]) depthMap[depth].push(edge.id);
-      else depthMap[depth] = [edge.id];
-    });
-    depthMap.forEach(array => {
-      if (!array || !array.length) return;
-      for (let i = array.length - 1; i >= 0; i--) {
-        const item = this.findById(array[i]);
-        if (item) item.toFront();
-      }
-    });
-  }
+      const edges = this.getEdges().concat(this.get('vedges'));
+      (edges || []).forEach(edgeItem => {
+        const edge = edgeItem.getModel();
+        const sourceDepth: number = dataDepthMap[edge.source as string] || 0;
+        const targetDepth: number = dataDepthMap[edge.target as string] || 0;
+        const depth = Math.max(sourceDepth, targetDepth);
+        if (depthMap[depth]) depthMap[depth].push(edge.id);
+        else depthMap[depth] = [edge.id];
+      });
+      depthMap.forEach(array => {
+        if (!array || !array.length) return;
+        for (let i = array.length - 1; i >= 0; i--) {
+          const item = this.findById(array[i]);
+          if (item) item.toFront();
+        }
+      });
+    },
+    500,
+    false
+  )
 
   /**
    * 获取节点所有的邻居节点

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.6.12",
+  "version": "0.6.15",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.6.12",
+    "@antv/g6-core": "0.6.15",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.6.12",
+  "version": "4.6.15",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.6.12"
+    "@antv/g6-pc": "0.6.15"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

diff --git a/packages/g6/src/index.ts b/packages/g6/src/index.ts
@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.6.12';
+G6.version = '4.6.15';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.6.12';
+export const version = '4.6.15';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.6.12",
+  "version": "0.6.15",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -75,9 +75,9 @@
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-math": "^0.1.1",
     "@antv/g-svg": "^0.5.1",
-    "@antv/g6-core": "0.6.12",
-    "@antv/g6-element": "0.6.12",
-    "@antv/g6-plugin": "0.6.12",
+    "@antv/g6-core": "0.6.15",
+    "@antv/g6-element": "0.6.15",
+    "@antv/g6-plugin": "0.6.15",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.2.5",
     "@antv/matrix-util": "^3.1.0-beta.3",

diff --git a/packages/pc/src/global.ts b/packages/pc/src/global.ts
@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.6.12',
+  version: '0.6.15',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

diff --git a/packages/plugin/package.json b/packages/plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.6.12",
+  "version": "0.6.15",
   "description": "G6 Plugin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,8 +22,8 @@
     "@antv/g-base": "^0.5.1",
     "@antv/g-canvas": "^0.5.2",
     "@antv/g-svg": "^0.5.2",
-    "@antv/g6-core": "0.6.12",
-    "@antv/g6-element": "0.6.12",
+    "@antv/g6-core": "0.6.15",
+    "@antv/g6-element": "0.6.15",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",

diff --git a/packages/react-node/package.json b/packages/react-node/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@antv/g6-react-node",
   "description": "Using React Component to Define Your G6 Graph Node",
-  "version": "1.3.0",
+  "version": "1.4.5",
   "scripts": {
     "start": "dumi dev",
     "build": "father-build",
@@ -13,6 +13,7 @@
     "test": "umi-test",
     "test:coverage": "umi-test --coverage"
   },
+  "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",

diff --git a/packages/react-node/src/Example/card.md b/packages/react-node/src/Example/card.md
@@ -69,10 +69,9 @@ const Card = () => {
           }}
         />
         <Rect style={{ width: 'auto', flexDirection: 'row', padding: [4, 12] }}>
-          <Tag color="#66ccff" text="我是" />
-          <Tag color="#66ccff" text="很多个" />
-          <Tag color="#66ccff" text="很多个的" />
-          <Tag color="#66ccff" text="标签" />
+          {
+            ["我是", "很多个", "很多个的", "标签"].map(e => <Tag color="#66ccff" text={e} />)
+          }
         </Rect>
         <Circle
           style={{

diff --git a/packages/react-node/src/Layout/getPositionsUsingYoga.ts b/packages/react-node/src/Layout/getPositionsUsingYoga.ts
@@ -159,7 +159,7 @@ const constructNodes = (
   basicContainer: YogaNode,
 ): ContainerNode | null => {
   const childrenArr = [[root]];
-  const parentArr = [];
+  const parentArr: ContainerNode[] = [];
   let resultNode: ContainerNode | null = null;
 
   while (childrenArr[0]) {

diff --git a/packages/react-node/src/Loading/index.tsx b/packages/react-node/src/Loading/index.tsx
@@ -12,7 +12,10 @@ export default function Loading() {
       }}
     >
       <div>
-        <img src="https://gw.alipayobjects.com/zos/antfincdn/cfg5jFqgVt/DiceGraph.png" />
+        <img
+          style={{ width: 120, height: 'auto' }}
+          src="https://gw.alipayobjects.com/zos/antfincdn/cfg5jFqgVt/DiceGraph.png"
+        />
         <h3>L o a d i n g . . . </h3>
       </div>
     </div>

diff --git a/packages/react-node/src/ReactNode/Group.tsx b/packages/react-node/src/ReactNode/Group.tsx
@@ -43,6 +43,7 @@ interface GroupProps {
 export type CommonProps = GroupProps & EventAttrs;
 
 const Group: React.FC<GroupProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
   return (
     <div

diff --git a/packages/react-node/src/ReactNode/Shape/Circle.tsx b/packages/react-node/src/ReactNode/Shape/Circle.tsx
@@ -18,6 +18,7 @@ interface CircleProps extends CommonProps {
 }
 
 const Circle: React.FC<CircleProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Ellipse.tsx b/packages/react-node/src/ReactNode/Shape/Ellipse.tsx
@@ -23,6 +23,7 @@ interface EllipseProps extends CommonProps {
 }
 
 const Ellipse: React.FC<EllipseProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Image.tsx b/packages/react-node/src/ReactNode/Shape/Image.tsx
@@ -28,6 +28,7 @@ interface ImageProps extends CommonProps {
 }
 
 const Image: React.FC<ImageProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Marker.tsx b/packages/react-node/src/ReactNode/Shape/Marker.tsx
@@ -13,12 +13,12 @@ export interface MarkerStyle extends CommonShapeProps {
    * @description.zh-CN 内建标记 或者 生成标记路径的函数
    */
   symbol:
-    | 'circle'
-    | 'square'
-    | 'diamond'
-    | 'triangle'
-    | 'triangle-down'
-    | ((x: number, y: number, r: number) => GPath[]);
+  | 'circle'
+  | 'square'
+  | 'diamond'
+  | 'triangle'
+  | 'triangle-down'
+  | ((x: number, y: number, r: number) => GPath[]);
 }
 
 interface MarkerProps extends CommonProps {
@@ -29,6 +29,7 @@ interface MarkerProps extends CommonProps {
 }
 
 const Marker: React.FC<MarkerProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Path.tsx b/packages/react-node/src/ReactNode/Shape/Path.tsx
@@ -50,6 +50,7 @@ interface PathProps extends CommonProps {
 }
 
 const Path: React.FC<PathProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Polygon.tsx b/packages/react-node/src/ReactNode/Shape/Polygon.tsx
@@ -18,6 +18,7 @@ interface PolygonProps extends CommonProps {
 }
 
 const Polygon: React.FC<PolygonProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Rect.tsx b/packages/react-node/src/ReactNode/Shape/Rect.tsx
@@ -28,6 +28,7 @@ interface RectProps extends CommonProps {
 }
 
 const Rect: React.FC<RectProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (

diff --git a/packages/react-node/src/ReactNode/Shape/Text.tsx b/packages/react-node/src/ReactNode/Shape/Text.tsx
@@ -52,6 +52,7 @@ interface TextProps extends CommonProps {
 }
 
 const Text: React.FC<TextProps> = (props) => {
+  // @ts-ignore
   const { children, ...rest } = props;
 
   return (