feat: collapse and expand combo with show and hide items.

src/graph/controller/item.ts

@@ -261,6 +261,45 @@ export default class ItemController {
     });
   }
 
+  /**
+   * 收起 combo
+   */
+  public collapseCombo(combo: ICombo | string) {
+    const graph = this.graph;
+    if (isString(combo)) {
+      combo = graph.findById(combo) as ICombo;
+    }
+    const children = (combo as ICombo).getChildren();
+    children.nodes.forEach(node => {
+      graph.hideItem(node);
+    });
+    children.combos.forEach(combo => {
+      graph.hideItem(combo);
+    });
+  }
+
+  /**
+   * 展开 combo
+   */
+  public expandCombo(combo: ICombo | string) {
+    const graph = this.graph;
+    if (isString(combo)) {
+      combo = graph.findById(combo) as ICombo;
+    }
+    const children = (combo as ICombo).getChildren();
+    children.nodes.forEach(node => {
+      graph.showItem(node);
+    });
+    children.combos.forEach(combo => {
+      if (combo.getModel().collapsed) {
+        combo.show();
+      } else {
+        graph.showItem(combo);
+      }
+    });
+  }
+
+
   /**
    * 删除指定的节点或边
    *

src/graph/graph.ts

@@ -1858,10 +1858,14 @@ export default class Graph extends EventEmitter implements IGraph {
     if (isString(combo)) {
       combo = this.findById(combo) as ICombo;
     }
-    (combo as ICombo).collapse();
+    const comboModel = combo.getModel();
+    const itemController: ItemController = this.get('itemController');
+    itemController.collapseCombo(combo);
+    // update combo size
+    itemController.updateCombo(combo, []);
+    comboModel.collapsed = true;
   }
 
-  // TODO 待实现 expand 方法
   /**
    * 展开指定的 combo
    * @param comboId Combo ID
@@ -1870,7 +1874,25 @@ export default class Graph extends EventEmitter implements IGraph {
     if (isString(combo)) {
       combo = this.findById(combo) as ICombo;
     }
-    (combo as ICombo).expand();
+    const itemController: ItemController = this.get('itemController');
+    itemController.expandCombo(combo);
+
+    const comboModel = combo.getModel();
+    // find the children from comboTrees
+    const comboTrees = this.get('comboTrees');
+    let children = [];
+    comboTrees.forEach((ctree: ComboTree) => {
+      let found = false;
+      traverseTreeUp<ComboTree>(ctree, child => {
+        if (comboModel.id === child.id) {
+          children = child.children;
+        }
+        return true;
+      });
+    });
+    // update combo size
+    itemController.updateCombo(combo, children);
+    comboModel.collapsed = false;
   }
 
   public collapseExpandCombo(combo: string | ICombo) {
@@ -1885,7 +1907,6 @@ export default class Graph extends EventEmitter implements IGraph {
     } else {
       this.collapseCombo(combo);
     }
-    comboModel.collapsed = !collapsed;
   }
 
   /**

src/interface/item.ts

@@ -350,15 +350,4 @@ export interface ICombo extends INode {
    * @return boolean 移除成功返回 true，否则返回 false
    */
   removeNode: (node: string | INode) => boolean;
-
-
-   /**
-   * 收缩该 combo
-   */
-  collapse();
-
-   /**
-   * 展开该 combo
-   */
-  expand();
 }

src/item/combo.ts

@@ -159,27 +159,6 @@ export default class Combo extends Node implements ICombo {
     return false;
   }
 
-  collapse() {
-    console.log('collapse in combo item');
-    const children = this.getChildren();
-    children.nodes.forEach(node => {
-      node.hide()
-    });
-    children.combos.forEach(combo => {
-      combo.hide();
-    });
-  }
-  expand() {
-    console.log('expand in combo item');
-    const children = this.getChildren();
-    children.nodes.forEach(node => {
-      node.show()
-    });
-    children.combos.forEach(combo => {
-      combo.show();
-    });
-  }
-
   public isOnlyMove(cfg?: ComboConfig): boolean {
     return false;
   }

src/item/item.ts

@@ -525,6 +525,8 @@ export default class ItemBase implements IItemBase {
   public update(cfg: ModelConfig) {
     const model: ModelConfig = this.get('model');
     const originPosition: IPoint = { x: model.x!, y: model.y! };
+    cfg.x = isNaN(cfg.x) ? model.x : cfg.x;
+    cfg.y = isNaN(cfg.y) ? model.y : cfg.y;
 
     const styles = this.get('styles')
     if (cfg.stateStyles) {
@@ -541,11 +543,11 @@ export default class ItemBase implements IItemBase {
     const onlyMove = this.isOnlyMove(cfg);
     // 仅仅移动位置时，既不更新，也不重绘
     if (onlyMove) {
-      this.updatePosition(model);
+      this.updatePosition(cfg);
     } else {
       // 如果 x,y 有变化，先重置位置
-      if (originPosition.x !== model.x || originPosition.y !== model.y) {
-        this.updatePosition(model);
+      if (originPosition.x !== cfg.x || originPosition.y !== cfg.y) {
+        this.updatePosition(cfg);
       }
       this.updateShape();
     }

stories/Combo/component/collapse-expand-combo.tsx

@@ -46,7 +46,7 @@ const data = {
     id: 'A',
     parentId: 'B',
     label: 'gorup A',
-    padding: [50, 10, 10, 10]
+    padding: [10, 10, 10, 10]
     // type: 'rect'
   }, {
     id: 'B',