feat: Annotation plugin supports configuring behaviors for collapse a… (#3921)

* feat: Annotation plugin supports configuring behaviors for collapse and close icon; feat: Annotation plugin supports canvas annotation; fix: gForce layout has animation by default;

* fix: createCombo creates vedges asynchronously, closes: #3912; fix: strange polyline path edge related to combo, closes: #3913;

* chore: refine

* chore: refine

Author: Yanyan-Wang

CHANGELOG.md

@@ -1,5 +1,13 @@
 # ChangeLog
 
+### 4.7.2
+
+- feat: Annotation plugin supports configuring behaviors for collapse and close icon;
+- feat: Annotation plugin supports canvas annotation;
+- fix: gForce layout has animation by default;
+- fix: createCombo creates vedges asynchronously, closes: #3912;
+- fix: strange polyline path edge related to combo, closes: #3913;
+
 #### 4.7.1
 
 - feat: Annotation plugin;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

packages/core/src/global.ts

@@ -64,7 +64,7 @@ const colorSet = {
 };
 
 export default {
-  version: '0.7.1',
+  version: '0.7.2',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/core/src/graph/graph.ts

@@ -1119,12 +1119,8 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       this.set('comboTrees', comboTrees);
 
       if (model.collapsed) {
-        setTimeout(() => {
-          if (item && !item.destroyed) {
-            this.collapseCombo(item as ICombo, false);
-            this.updateCombo(item as ICombo);
-          }
-        }, 0);
+        this.collapseCombo(item as ICombo, false);
+        this.updateCombo(item as ICombo);
       }
 
     } else if (type === 'node' && isString(model.comboId) && comboTrees) {

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@antv/g-base": "^0.5.1",
-    "@antv/g6-core": "0.7.1",
+    "@antv/g6-core": "0.7.2",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

packages/element/src/edges/polyline-util.ts

@@ -480,18 +480,31 @@ export const getPolylinePoints = (
   if (!sNode || !sNode.getType()) {
     sBBox = getBBoxFromPoint(start);
   } else if (sNode.getType() === 'combo') {
-    const sNodeKeyShape = sNode.getKeyShape();
-    sBBox = sNodeKeyShape.getCanvasBBox() || (getBBoxFromPoint(start) as PBBox);
-    sBBox.centerX = (sBBox.minX + sBBox.maxX) / 2;
-    sBBox.centerY = (sBBox.minY + sBBox.maxY) / 2;
+    const sKeyShapeBBox = sNode.getKeyShape().getBBox();
+    if (sKeyShapeBBox) {
+      const { x: sx, y: sy } = sNode.getModel();
+      sBBox = {
+        x: sx,
+        y: sy,
+        width: sKeyShapeBBox.width,
+        height: sKeyShapeBBox.height,
+        minX: sKeyShapeBBox.minX + sx,
+        maxX: sKeyShapeBBox.maxX + sx,
+        minY: sKeyShapeBBox.minY + sy,
+        maxY: sKeyShapeBBox.maxY + sy,
+      }
+      sBBox.centerX = (sBBox.minX + sBBox.maxX) / 2;
+      sBBox.centerY = (sBBox.minY + sBBox.maxY) / 2;
+    } else {
+      sBBox = getBBoxFromPoint(start) as PBBox
+    }
   } else {
-    sBBox = sNode.getBBox();
+    sBBox = sNode && sNode.getBBox();
   }
 
   if (!tNode || !tNode.getType()) {
     tBBox = getBBoxFromPoint(end);
-  }
-  else if (tNode.getType() === 'combo') {
+  } else if (tNode.getType() === 'combo') {
     const tKeyShapeBBox = tNode.getKeyShape().getBBox();
     if (tKeyShapeBBox) {
       const { x: tx, y: ty } = tNode.getModel();
@@ -510,8 +523,7 @@ export const getPolylinePoints = (
     } else {
       tBBox = getBBoxFromPoint(end) as PBBox
     }
-  }
-  else {
+  } else {
     tBBox = tNode && tNode.getBBox();
   }
 

packages/element/src/edges/polyline.ts

@@ -194,7 +194,7 @@ registerEdge(
       const polylinePoints = simple
         ? getPolylinePoints(points[points.length - 1], points[0], target, source, offset)
         : pathFinder(points[0], points[points.length - 1], source, target, routeCfg);
-      
+
       if (!polylinePoints || !polylinePoints.length) return 'M0 0, L0 0';
 
       if (radius) {

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.7.1",
+  "version": "4.7.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.7.1"
+    "@antv/g6-pc": "0.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.7.7",

packages/g6/src/index.ts

@@ -1,7 +1,7 @@
 import G6 from '@antv/g6-pc';
 
-G6.version = '4.7.1';
+G6.version = '4.7.2';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.7.1';
+export const version = '4.7.2';

packages/pc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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.7.1",
-    "@antv/g6-element": "0.7.1",
-    "@antv/g6-plugin": "0.7.1",
+    "@antv/g6-core": "0.7.2",
+    "@antv/g6-element": "0.7.2",
+    "@antv/g6-plugin": "0.7.2",
     "@antv/hierarchy": "^0.6.7",
     "@antv/layout": "^0.3.0",
     "@antv/matrix-util": "^3.1.0-beta.3",

packages/pc/src/global.ts

@@ -7,7 +7,7 @@ const textColor = 'rgb(0, 0, 0)';
 const colorSet = getColorsWithSubjectColor(subjectColor, backColor);
 
 export default {
-  version: '0.7.1',
+  version: '0.7.2',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/pc/src/graph/controller/layout.ts

@@ -132,12 +132,12 @@ export default class LayoutController extends AbstractLayout {
       const isForce = layoutType === 'force' || layoutType === 'g6force' || layoutType === 'gForce' || layoutType === 'force2';
       if (isForce) {
         const { onTick, animate } = layoutCfg;
-        const d3ForceAnimate = animate === undefined && layoutType === 'force'
+        const isDefaultAnimateLayout = animate === undefined && (layoutType === 'force' || layoutType === 'force2');
         const tick = () => {
           if (onTick) {
             onTick();
           }
-          if (animate || d3ForceAnimate) graph.refreshPositions();
+          if (animate || isDefaultAnimateLayout) graph.refreshPositions();
         };
         layoutCfg.tick = tick;
       } else if (layoutType === 'comboForce' || layoutType === 'comboCombined') {

packages/pc/tests/unit/layout/circular-web-worker-spec.ts

@@ -21,9 +21,6 @@ describe('circular layout(web worker)', () => {
       height: 500,
       defaultNode: { size: 10 },
     });
-    graph.data(data);
-    graph.render();
-
     graph.on('afterlayout', () => {
       const width = graph.get('width');
       const height = graph.get('height');
@@ -35,6 +32,8 @@ describe('circular layout(web worker)', () => {
       graph.destroy();
       done();
     });
+    graph.data(data);
+    graph.render();
   });
 
   it('circular(web worker) counterclockwise, and fixed radius, start angle, end angle', done => {

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "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.7.1",
-    "@antv/g6-element": "0.7.1",
+    "@antv/g6-core": "0.7.2",
+    "@antv/g6-element": "0.7.2",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",