fix: multiple animate update shape for combo; fix: removeItem from a …

…combo.

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+#### 3.5.9
+- fix: multiple animate update shape for combo;
+- fix: removeItem from a combo.
+
 #### 3.5.8
 - fix: combo edge problem, issues #1722;
 - feat: adjacency matrix algorithm;

package.json

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

src/global.ts

@@ -1,5 +1,5 @@
 export default {
-  version: '3.5.8',
+  version: '3.5.9',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/graph/controller/item.ts

@@ -353,6 +353,7 @@ export default class ItemController {
     const comboTrees = graph.get('comboTrees');
     const id = item.get('id');
     if (type === NODE) {
+      const comboId = item.getModel().comboId as string;
       if (comboTrees) {
         let brothers = comboTrees;
         let found = false; // the flag to terminate the forEach circulation
@@ -376,8 +377,9 @@ export default class ItemController {
       for (let i = edges.length; i >= 0; i--) {
         graph.removeItem(edges[i], false);
       }
-    }
-    else if (type === COMBO) {
+      if (comboId) graph.updateCombo(comboId);
+    } else if (type === COMBO) {
+      const parentId = item.getModel().parentId as string;
       let comboInTree;
       // find the subtree rooted at the item to be removed
       let found = false; // the flag to terminate the forEach circulation
@@ -403,6 +405,7 @@ export default class ItemController {
       for (let i = edges.length; i >= 0; i--) {
         graph.removeItem(edges[i], false);
       }
+      if (parentId) graph.updateCombo(parentId);
     }
 
     item.destroy();

src/graph/graph.ts

@@ -1408,33 +1408,30 @@ export default class Graph extends EventEmitter implements IGraph {
     // step 1: 创建新的 Combo
     let comboId = ''
     let currentCombo: ICombo;
+    let comboConfig: ComboConfig;
+    if (!combo) return;
     if (isString(combo)) {
       comboId = combo
-      currentCombo = this.addItem('combo', {
+      comboConfig = {
         id: combo
-      }, false)
+      };
     } else {
       comboId = combo.id
       if (!comboId) {
         console.warn('Create combo failed. Please assign a unique string id for the adding combo.');
         return;
       }
-      currentCombo = this.addItem('combo', combo, false)
+      comboConfig = combo;
     }
-    const comboModel = currentCombo.getModel();
 
-    const trees = children.map(elementId => {
+    const trees: ComboTree[] = children.map(elementId => {
       const item = this.findById(elementId)
 
-      // step 2: 将元素添加到 Combo 中
-      currentCombo.addChild(item as INode | ICombo)
-
       let type = '';
       if (item.getType) type = item.getType();
-      const cItem = {
+      const cItem: ComboTree = {
         id: item.getID(),
-        depth: (comboModel.depth as number) + 2,
-        itemType: type
+        itemType: type as "node" | "combo"
       }
 
       if (type === 'combo') {
@@ -1446,6 +1443,18 @@ export default class Graph extends EventEmitter implements IGraph {
       return cItem
     })
 
+    comboConfig.children = trees;
+
+    currentCombo = this.addItem('combo', comboConfig, false)
+    const comboModel = currentCombo.getModel();
+
+    trees.forEach(child => {
+      const item = this.findById(child.id)
+      // step 2: 将元素添加到 Combo 中
+      currentCombo.addChild(item as INode | ICombo)
+      child.depth = (comboModel.depth as number) + 2;
+    });
+
     // step3: 更新 comboTrees 结构
     const comboTrees = this.get('comboTrees')
     comboTrees && comboTrees.forEach(ctree => {
@@ -1458,8 +1467,7 @@ export default class Graph extends EventEmitter implements IGraph {
         return true;
       });
     })
-
-    this.updateCombos()
+    this.sortCombos();
   }
 
   /**

src/plugins/toolBar/index.ts

@@ -54,7 +54,6 @@ export default class ToolBar extends Base {
       handleClick: undefined,
       // 指定菜单内容，function(e) {...}
       getContent: (e) => {
-        console.log(e)
         return `
           <ul class='g6-component-toolbar'>
             <li code='redo'>
@@ -101,12 +100,12 @@ export default class ToolBar extends Base {
     if (isString(toolBar)) {
       toolBarDOM = createDOM(toolBar)
     }
-    
+
     let container: HTMLDivElement | null = this.get('container');
     if (!container) {
       container = this.get('graph').get('container');
     }
-    
+
     container!.appendChild(toolBarDOM);
     this.set('toolBar', toolBarDOM)
 
@@ -135,7 +134,7 @@ export default class ToolBar extends Base {
 
     if (pos) {
       modifyCSS(toolBarDOM, {
-        top: `${pos.y}px`, 
+        top: `${pos.y}px`,
         left: `${pos.x}px`
       });
     }
@@ -149,15 +148,13 @@ export default class ToolBar extends Base {
     const undoDomIcon = document.querySelector('.g6-component-toolbar li[code="undo"] svg')
     const redoDom = document.querySelector('.g6-component-toolbar li[code="redo"]')
     const redoDomIcon = document.querySelector('.g6-component-toolbar li[code="redo"] svg')
-    
+
     if (!undoDom || !undoDomIcon || !redoDom || !redoDomIcon) {
       return;
     }
 
     graph.on('stackchange', evt => {
       const { undoStack, redoStack } = evt
-      console.log(undoStack, redoStack)
-      debugger
       const undoStackLen = undoStack.length
       const redoStackLen = redoStack.length
       // undo 不可用
@@ -231,7 +228,7 @@ export default class ToolBar extends Base {
   public redo() {
     const graph: IGraph = this.get('graph')
     const redoStack = graph.getRedoStack()
-    
+
     if (!redoStack || redoStack.length === 0) {
       return
     }
@@ -277,7 +274,7 @@ export default class ToolBar extends Base {
    */
   private handleDefaultOperator(code: string, graph: IGraph) {
     const currentZoom = graph.getZoom()
-    switch(code) {
+    switch (code) {
       case 'redo':
         this.redo();
         break;

src/util/graphic.ts

@@ -660,7 +660,7 @@ export const getComboBBox = (children: ComboTree[], graph: IGraph): BBox => {
 
   children.forEach(child => {
     const childItem = graph.findById(child.id);
-    if (!childItem.isVisible()) return; // ignore hidden children
+    if (!childItem || !childItem.isVisible()) return; // ignore hidden children
     childItem.set('bboxCanvasCache', undefined);
     const childBBox = childItem.getCanvasBBox();
     if (childBBox.x && comboBBox.minX > childBBox.minX) comboBBox.minX = childBBox.minX;

stories/Combo/combo.stories.tsx

@@ -15,6 +15,7 @@ import Edges from './component/edges';
 import DagreCombo from './component/dagre-combo';
 import Edges2 from './component/edges2';
 import CreateCombo from './component/create-combo';
+import RemoveItem from './component/remove-item';
 
 export default { title: 'Combo' };
 
@@ -54,4 +55,6 @@ storiesOf('Combo', module)
     <Edges2 />
   )).add('create combo ', () => (
     <CreateCombo />
+  )).add('remove item ', () => (
+    <RemoveItem />
   ));