fix: position animations; (#4457)

* fix: position animations; * chore: update version nums * fix: spiky donuts #3849 (#4452) * docs: 修复文档表格展示错误问题 (#4454) Co-authored-by: chenkun <[email protected]> * fix: remove label if no longer present (#4441) * fix: remove label if no longer present * fix: remove label background from shapeMap * Update edge.ts (#4486) 自定义quadratic类型曲线是如传进去curvePosition，curveOffset，isArray判断应该为cfg * fix: fix issue if set timebar in independent container on destroy (#4497) * feat: timebar 新增putInGraphContainer属性决定是否将timebar置于graph container 中 (#4492) * fix: fix issue if set timebar in independent container on destroy * feat: timebar 新增putInGraphContainer属性决定是否将timebar置于graph container 中 (#4492) --------- Co-authored-by: ensconced <[email protected]> Co-authored-by: OctKun <[email protected]> Co-authored-by: chenkun <[email protected]> Co-authored-by: H丶MF <[email protected]> Co-authored-by: Aaron <[email protected]>
antvis · May 12, 2023 · a5cf686 · a5cf686
1 parent bcb4a68
commit a5cf686
Show file tree

Hide file tree

Showing 24 changed files with 199 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # ChangeLog
 
+### 4.8.12
+
+- feat: timebar supports individual container DOM;
+
+### 4.8.11-beta.0
+
+- fix: position animations;
+
 ### 4.8.10
 
 - fix: update layout from animate false to true;

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

diff --git a/packages/core/src/element/edge.ts b/packages/core/src/element/edge.ts
@@ -474,8 +474,8 @@ Shape.registerEdge(
         const { startPoint, endPoint } = cfg;
         if (cfg.curveOffset === undefined) cfg.curveOffset = this.curveOffset;
         if (cfg.curvePosition === undefined) cfg.curvePosition = this.curvePosition;
-        if (isArray(this.curveOffset)) cfg.curveOffset = cfg.curveOffset[0];
-        if (isArray(this.curvePosition)) cfg.curvePosition = cfg.curveOffset[0];
+        if (isArray(cfg.curveOffset)) cfg.curveOffset = cfg.curveOffset[0];
+        if (isArray(cfg.curvePosition)) cfg.curvePosition = cfg.curveOffset[0];
         const innerPoint = getControlPoint(
           startPoint as Point,
           endPoint as Point,

diff --git a/packages/core/src/element/shapeBase.ts b/packages/core/src/element/shapeBase.ts
@@ -251,14 +251,24 @@ export const shapeBase: ShapeOptions = {
   },
 
   updateLabel(cfg: ModelConfig, item: Item, updateType?: UpdateType) {
+    const group = item.getContainer();
+    let { labelCfg = {} } = this.mergeStyle || this.getOptions({}, updateType) as ModelConfig || {};
+    const labelClassName = this.itemType + CLS_LABEL_SUFFIX;
+    const label = group['shapeMap'][labelClassName] || group.find(ele => ele.get('className') === labelClassName);
+    const labelBgClassname = this.itemType + CLS_LABEL_BG_SUFFIX;
+    let labelBg = group['shapeMap'][labelBgClassname] || group.find(ele => ele.get('className') === labelBgClassname);
+
+    if (label && cfg.label === undefined) {
+      group.removeChild(label);
+      delete group['shapeMap'][labelClassName];
+      if (labelBg) {
+        group.removeChild(labelBg);
+        delete group['shapeMap'][labelBgClassname];
+      }
+    }
+
     // 防止 cfg.label = "" 的情况
     if (cfg.label || cfg.label === '') {
-      const group = item.getContainer();
-      let { labelCfg = {} } = this.mergeStyle || this.getOptions({}, updateType) as ModelConfig || {};
-      const labelClassName = this.itemType + CLS_LABEL_SUFFIX;
-      const label = group['shapeMap'][labelClassName] || group.find(ele => ele.get('className') === labelClassName);
-      const labelBgClassname = this.itemType + CLS_LABEL_BG_SUFFIX;
-      let labelBg = group['shapeMap'][labelBgClassname] || group.find(ele => ele.get('className') === labelBgClassname);
       // 若传入的新配置中有 label，（用户没传入但原先有 label，label 也会有值）
       if (!label) {
         // 若原先不存在 label，则绘制一个新的 label

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

diff --git a/packages/core/src/graph/graph.ts b/packages/core/src/graph/graph.ts
@@ -2375,64 +2375,66 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     const canvas: ICanvas = self.get('canvas');
 
     self.animating = true;
-    canvas.animate(
-      (ratio: number) => {
-        each(toNodes, data => {
-          const node: Item = self.findById(data.id);
+    setTimeout(() => {
+      canvas.animate(
+        (ratio: number) => {
+          each(toNodes, data => {
+            const node: Item = self.findById(data.id);
 
-          if (!node || node.destroyed) {
-            return;
-          }
+            if (!node || node.destroyed) {
+              return;
+            }
 
-          let originAttrs: Point = node.get('originAttrs');
+            let originAttrs: Point = node.get('originAttrs');
 
-          const model: NodeConfig = node.get('model');
+            const model: NodeConfig = node.get('model');
 
-          const containerMatrix = node.getContainer().getMatrix();
+            const containerMatrix = node.getContainer().getMatrix();
 
-          if (originAttrs === undefined || originAttrs === null) {
-            // 变换前存在位置，设置到 originAttrs 上。否则标记 0 表示变换前不存在位置，不需要计算动画
-            if (containerMatrix) {
-              originAttrs = {
-                x: containerMatrix[6],
-                y: containerMatrix[7],
+            if (originAttrs === undefined || originAttrs === null) {
+              // 变换前存在位置，设置到 originAttrs 上。否则标记 0 表示变换前不存在位置，不需要计算动画
+              if (containerMatrix) {
+                originAttrs = {
+                  x: containerMatrix[6],
+                  y: containerMatrix[7],
+                }
               }
+              node.set('originAttrs', originAttrs || 0);
             }
-            node.set('originAttrs', originAttrs || 0);
-          }
-
-          if (onFrame) {
-            const attrs = onFrame(node, ratio, data, originAttrs || { x: 0, y: 0 });
-            node.set('model', Object.assign(model, attrs));
-          } else if (originAttrs) {
-            // 变换前存在位置，进行动画
-            model.x = originAttrs.x + (data.x - originAttrs.x) * ratio;
-            model.y = originAttrs.y + (data.y - originAttrs.y) * ratio;
-          } else {
-            // 若在变换前不存在位置信息，则直接放到最终位置上
-            model.x = data.x;
-            model.y = data.y;
-          }
-        });
 
-        self.refreshPositions(referComboModel);
-      },
-      {
-        duration: animateCfg.duration,
-        easing: animateCfg.easing,
-        callback: () => {
-          each(nodes, (node: INode) => {
-            node.set('originAttrs', null);
+            if (onFrame) {
+              const attrs = onFrame(node, ratio, data, originAttrs || { x: 0, y: 0 });
+              node.set('model', Object.assign(model, attrs));
+            } else if (originAttrs) {
+              // 变换前存在位置，进行动画
+              model.x = originAttrs.x + (data.x - originAttrs.x) * ratio;
+              model.y = originAttrs.y + (data.y - originAttrs.y) * ratio;
+            } else {
+              // 若在变换前不存在位置信息，则直接放到最终位置上
+              model.x = data.x;
+              model.y = data.y;
+            }
           });
 
-          if (animateCfg.callback) {
-            animateCfg.callback();
-          }
-          self.emit('afteranimate');
-          self.animating = false;
+          self.refreshPositions(referComboModel);
         },
-      },
-    );
+        {
+          duration: animateCfg.duration,
+          easing: animateCfg.easing,
+          callback: () => {
+            each(nodes, (node: INode) => {
+              node.set('originAttrs', null);
+            });
+
+            if (animateCfg.callback) {
+              animateCfg.callback();
+            }
+            self.emit('afteranimate');
+            self.animating = false;
+          },
+        },
+      );
+    }, 0);
   }
 
   /**
@@ -2503,8 +2505,10 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
   }
 
   public stopAnimate(): void {
-    if (this.isAnimating()) {
-      this.get('canvas').stopAnimate();
+    const canvas = this.get('canvas');
+    const timeline = canvas.cfg.timeline;
+    if (timeline) {
+      timeline.stopAllAnimations();
     }
   }
 

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

diff --git a/packages/element/src/nodes/donut.ts b/packages/element/src/nodes/donut.ts
@@ -255,8 +255,7 @@ const drawFan = (group: IGroup, fanConfig: FanConfig): {
   const style = {
     path: [
       ['M', arcBegin[0], arcBegin[1]],
-      ['A', arcR, arcR, 0, isBig, 0, arcEnd[0], arcEnd[1]],
-      ['L', arcEnd[0], arcEnd[1]],
+      ['A', arcR, arcR, 0, isBig, 0, arcEnd[0], arcEnd[1]]
     ],
     stroke: config.color || updateShape?.attr('stroke') || defaultSubjectColors[fanIndex % defaultSubjectColors.length],
     lineWidth,

diff --git a/packages/g6/package.json b/packages/g6/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.8.10",
+  "version": "4.8.12",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.8.10"
+    "@antv/g6-pc": "0.8.12"
   },
   "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.8.10';
+G6.version = '4.8.12';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.8.10';
+export const version = '4.8.12';
diff --git a/packages/pc/package.json b/packages/pc/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-pc",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "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.8.10",
-    "@antv/g6-element": "0.8.10",
-    "@antv/g6-plugin": "^0.8.7",
+    "@antv/g6-core": "0.8.12",
+    "@antv/g6-element": "0.8.12",
+    "@antv/g6-plugin": "0.8.12",
     "@antv/hierarchy": "^0.6.10",
     "@antv/layout": "^0.3.0",
     "@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.8.10',
+  version: '0.8.12',
   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.8.11",
+  "version": "0.8.12",
   "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.8.10",
-    "@antv/g6-element": "0.8.10",
+    "@antv/g6-core": "0.8.12",
+    "@antv/g6-element": "0.8.12",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",