fix: Annotation readData with inexistent item; (#3985)

* chore: refine

* feat: performance tweaks (#3969)

* Don't set beforeDragNodes if stack ops are off

* Prevent clone if stack ops are off

* Reduce lookups

* Simplify condition

* chore: refine

* chore: refine

* doc: update CHANGELOG

Co-authored-by: Fabio Tacchelli <[email protected]>

Author: Yanyan-Wang

CHANGELOG.md

@@ -1,5 +1,10 @@
 # ChangeLog
 
+### 4.7.6
+
+- fix: Annotation readData with inexistent item;
+- perf: improve the performance for updating;
+
 ### 4.7.5
 
 - perf: Annotation support updating positions for outside cards by calling updateOutsideCards;

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-core",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "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.5',
+  version: '0.7.6',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/core/src/graph/controller/item.ts

@@ -271,7 +271,6 @@ export default class ItemController {
     } else if (type === NODE) {
       item.update(cfg, updateType);
       const edges: IEdge[] = (item as INode).getEdges();
-      const refreshEdge = updateType?.includes('bbox') || updateType === 'move';
       if (updateType === 'move') {
         each(edges, (edge: IEdge) => {
           this.edgeToBeUpdateMap[edge.getID()] = {
@@ -280,7 +279,7 @@ export default class ItemController {
           };
           this.throttleRefresh();
         });
-      } else if (refreshEdge) {
+      } else if (updateType?.includes('bbox')) {
         each(edges, (edge: IEdge) => {
           edge.refresh(updateType);
         });
@@ -329,14 +328,16 @@ export default class ItemController {
       const { graph } = this;
       if (!graph || graph.get('destroyed')) return;
       const edgeToBeUpdateMap = this.edgeToBeUpdateMap;
-      if (!edgeToBeUpdateMap || !Object.keys(edgeToBeUpdateMap)?.length) return;
-      Object.keys(edgeToBeUpdateMap).forEach(eid => {
-        const edge = edgeToBeUpdateMap[eid].edge;
+      if (!edgeToBeUpdateMap) return;
+      const edgeValues = Object.values(edgeToBeUpdateMap);
+      if (!edgeValues.length) return;
+      edgeValues.forEach(obj => {
+        const edge = obj.edge;
         if (!edge || edge.destroyed) return;
         const source = edge.getSource();
         const target = edge.getTarget();
         if (!source || source.destroyed || !target || target.destroyed) return;
-        edge.refresh(edgeToBeUpdateMap[eid].updateType);
+        edge.refresh(obj.updateType);
       });
       this.edgeToBeUpdateMap = {};
     },

packages/core/src/graph/graph.ts

@@ -9,7 +9,7 @@ import {
   floydWarshall,
 } from '@antv/algorithm';
 import { IAbstractGraph } from '../interface/graph';
-import { IEdge, INode, ICombo } from '../interface/item';
+import { IEdge, INode, ICombo, IItemBaseConfig } from '../interface/item';
 import {
   GraphAnimateConfig,
   GraphOptions,
@@ -1337,14 +1337,18 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     stack: boolean = true,
   ): void {
     const itemController: ItemController = this.get('itemController');
-    let currentItem;
+    let currentItem: Item;
     if (isString(item)) {
       currentItem = this.findById(item as string);
     } else {
       currentItem = item;
     }
 
-    const UnupdateModel = clone(currentItem.getModel());
+    const stackEnabled = stack && this.get('enabledStack');
+    let unupdatedModel;
+    if (stackEnabled) {
+      unupdatedModel = clone(currentItem.getModel());
+    }
 
     let type = '';
     if (currentItem.getType) type = currentItem.getType();
@@ -1358,32 +1362,29 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
       each(states, state => this.setItemState(currentItem, state, true));
     }
 
-    if (stack && this.get('enabledStack')) {
+    if (stackEnabled) {
       const before = { nodes: [], edges: [], combos: [] };
       const after = { nodes: [], edges: [], combos: [] };
       const afterModel = {
-        id: UnupdateModel.id,
+        id: unupdatedModel.id,
         ...cfg,
       };
       switch (type) {
         case 'node':
-          before.nodes.push(UnupdateModel);
+          before.nodes.push(unupdatedModel);
           after.nodes.push(afterModel);
           break;
         case 'edge':
-          before.edges.push(UnupdateModel);
+          before.edges.push(unupdatedModel);
           after.edges.push(afterModel);
           break;
         case 'combo':
-          before.combos.push(UnupdateModel);
+          before.combos.push(unupdatedModel);
           after.combos.push(afterModel);
           break;
         default:
           break;
       }
-      if (type === 'node') {
-        before.nodes.push(UnupdateModel);
-      }
       this.pushStack('update', { before, after });
     }
   }

packages/element/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-element",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "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.5",
+    "@antv/g6-core": "0.7.6",
     "@antv/util": "~2.0.5"
   },
   "devDependencies": {

packages/g6/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -66,7 +66,7 @@
     ]
   },
   "dependencies": {
-    "@antv/g6-pc": "0.7.5"
+    "@antv/g6-pc": "0.7.6"
   },
   "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.5';
+G6.version = '4.7.6';
 
 export * from '@antv/g6-pc';
 export default G6;
-export const version = '4.7.5';
+export const version = '4.7.6';

packages/pc/package.json

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

packages/pc/src/behavior/drag-node.ts

@@ -108,7 +108,7 @@ export default {
     // 拖动时，设置拖动元素的 capture 为false，则不拾取拖动的元素
     const group = item.getContainer();
     group.set('capture', false);
-    if (!this.cachedCaptureItems) this.cachedCaptureItems = []
+    if (!this.cachedCaptureItems) this.cachedCaptureItems = [];
     this.cachedCaptureItems.push(item);
 
     // 如果拖动的target 是linkPoints / anchorPoints 则不允许拖动
@@ -152,12 +152,15 @@ export default {
     } else {
       this.targets.push(item);
     }
-    const beforeDragNodes = [];
-    this.targets.forEach(t => {
-      const { x, y, id } = t.getModel();
-      beforeDragNodes.push({ x, y, id });
-    });
-    this.set('beforeDragNodes', beforeDragNodes);
+
+    if (this.graph.get('enabledStack') && this.enableStack) {
+      const beforeDragNodes = [];
+      this.targets.forEach((t) => {
+        const { x, y, id } = t.getModel();
+        beforeDragNodes.push({ x, y, id });
+      });
+      this.set('beforeDragNodes', beforeDragNodes);
+    }
 
     this.hidenEdge = {};
     if (this.get('updateEdge') && this.enableOptimize && !this.enableDelegate) {

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.5',
+  version: '0.7.6',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

packages/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6-plugin",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "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.5",
-    "@antv/g6-element": "0.7.5",
+    "@antv/g6-core": "0.7.6",
+    "@antv/g6-element": "0.7.6",
     "@antv/matrix-util": "^3.1.0-beta.3",
     "@antv/scale": "^0.3.4",
     "@antv/util": "^2.0.9",
@@ -61,4 +61,4 @@
     "ts-jest": "^26.4.4",
     "@antv/g6": "4.5.1"
   }
-}
+}

packages/plugin/src/annotation/index.ts

@@ -119,6 +119,8 @@ interface CardInfoMap {
   }
 }
 
+const CANVAS_ANNOTATION_ID = 'canvas-annotation';
+
 export default class Annotation extends Base {
   constructor(config?: AnnotationConfig) {
     super(config);
@@ -413,7 +415,7 @@ export default class Annotation extends Base {
 
     const isCanvas = item.isCanvas?.();
 
-    const itemId = isCanvas ? 'canvas-annotation' : item.getID();
+    const itemId = isCanvas ? CANVAS_ANNOTATION_ID : item.getID();
     let { card, link, x, y, title, content } = cardInfoMap[itemId] || {};
 
     const getTitle = this.get('getTitle');
@@ -588,7 +590,7 @@ export default class Annotation extends Base {
   public hideCard(id) {
     if (this.destroyed) return;
     const cardInfoMap = this.get('cardInfoMap');
-    if (!cardInfoMap) return;
+    if (!cardInfoMap || !cardInfoMap[id]) return;
     const { card, link } = cardInfoMap[id];
     modifyCSS(card, { display: 'none' });
     link?.hide();
@@ -876,7 +878,7 @@ export default class Annotation extends Base {
     const graph = this.get('graph');
     Object.values(cardInfoMap).forEach(info => {
       const { id, card, isCanvas } = info;
-      if (isCanvas || card.style.display === 'none') return;
+      if (!card || isCanvas || card.style.display === 'none') return;
       const item = graph.findById(id);
       if (item && item.isVisible()) {
         this.toggleAnnotation(item);
@@ -904,7 +906,7 @@ export default class Annotation extends Base {
     const data = [];
     Object.values(cardInfoMap).forEach(info => {
       const { title, content, x, y, id, collapsed, card } = info;
-      if (card.style.display === 'none' && !saveClosed) return;
+      if (card && card.style.display === 'none' && !saveClosed) return;
       const item = graph.findById(id) || graph.get('canvas');
       data.push({
         id,
@@ -913,7 +915,7 @@ export default class Annotation extends Base {
         collapsed,
         title: title || getTitle?.(item),
         content: content || getContent?.(item),
-        visible: card.style.display !== 'none'
+        visible: card && card.style.display !== 'none'
       })
     });
     return data;
@@ -923,10 +925,19 @@ export default class Annotation extends Base {
     const graph = this.get('graph');
     data.forEach(info => {
       const { id, x, y, title, content, collapsed, visible } = info;
-      const item = graph.findById(id) || graph.get('canvas');
+      let item = graph.findById(id);
+      if (!item && id === CANVAS_ANNOTATION_ID) {
+        item = graph.get('canvas');
+      }
+      if (!item) {
+        const cardInfoMap = this.get('cardInfoMap') || {};
+        cardInfoMap[id] = info;
+        this.set('cardInfoMap', cardInfoMap);
+        return;
+      }
       this.toggleAnnotation(item, { x, y, title, content, collapsed });
       if (!visible) this.hideCard(id);
-    })
+    });
   }
 
   /**

packages/site/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@antv/g6-site",
-  "version": "4.7.5",
+  "version": "4.7.6",
   "description": "G6 sites deployed on gh-pages",
   "keywords": [
     "antv",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.0.6",
     "@antv/chart-node-g6": "^0.0.3",
-    "@antv/g6": "4.7.5",
+    "@antv/g6": "4.7.6",
     "@antv/gatsby-theme-antv": "1.1.15",
     "@antv/util": "^2.0.9",
     "@antv/vis-predict-engine": "^0.1.1",