feat: support hiding non-keyshape elements when scaling canvas

src/item/item.ts

@@ -83,6 +83,7 @@ export default class ItemBase implements IItemBase {
     
     if (!id) {
       id = uniqueId(this.get('type'));
+      this.get('model').id = id
     }
     
     this.set('id', id);

stories/Issues/changeData/data.js

@@ -0,0 +1,90 @@
+export const data = {
+  nodes: [
+    {
+      id: "9RQmLGueOikkikLvHVO",
+      label: "Mysql连接账户"
+    },
+    {
+      id: "k79zNA0TkCwQPQWw4yn",
+      label: "ETL数据流"
+    },
+    {
+      id: "GWMF0chbHRKDkENg1hS",
+      label: "ETL数据流2"
+    },
+    {
+      id: "xCzXirgILRm9fF7gjeb",
+      label: "报告"
+    },
+    {
+      id: "I2Msu7qhDMQPmGLOduP",
+      label: "Mysql数据源"
+    },
+    {
+      id: "QUCo43VpL9LaPT4QVx0",
+      label: "Excel数据源"
+    },
+    {
+      id: "GxZeEGkky88xKxq1r22",
+      label: "工厂输出表"
+    },
+    {
+      id: "AoJc4qPcWeOL7NJwOh6",
+      label: "加工输出表"
+    },
+    {
+      id: "cd_638e7750847a4cc78f3cd",
+      label: "图表1"
+    },
+    {
+      id: "cd_8119cb085435454180558",
+      label: "图表2"
+    },
+    {
+      id: "AKl8iaVQamqiMaMCF7E",
+      label: "csv数据源"
+    }
+  ],
+  edges: [
+    {
+      source: "9RQmLGueOikkikLvHVO",
+      target: "I2Msu7qhDMQPmGLOduP"
+    },
+    {
+      source: "k79zNA0TkCwQPQWw4yn",
+      target: "GxZeEGkky88xKxq1r22"
+    },
+    {
+      source: "I2Msu7qhDMQPmGLOduP",
+      target: "k79zNA0TkCwQPQWw4yn"
+    },
+    {
+      source: "QUCo43VpL9LaPT4QVx0",
+      target: "k79zNA0TkCwQPQWw4yn"
+    },
+    {
+      source: "GxZeEGkky88xKxq1r22",
+      target: "xCzXirgILRm9fF7gjeb"
+    },
+    {
+      source: "xCzXirgILRm9fF7gjeb",
+      target: "cd_638e7750847a4cc78f3cd"
+    },
+    {
+      source: "xCzXirgILRm9fF7gjeb",
+      target: "cd_8119cb085435454180558"
+    },
+    {
+      source: "AKl8iaVQamqiMaMCF7E",
+      target: "xCzXirgILRm9fF7gjeb"
+    },
+    {
+      source: "GxZeEGkky88xKxq1r22",
+      target: "GWMF0chbHRKDkENg1hS"
+    },
+    {
+      source: "GWMF0chbHRKDkENg1hS",
+      target: "AoJc4qPcWeOL7NJwOh6"
+    }
+  ]
+};

stories/Issues/changeData/index.tsx

@@ -0,0 +1,123 @@
+import React, { useRef, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { mergeWith } from "lodash";
+import G6 from '../../../src';
+import isArray from "@antv/util/lib/is-array";
+import { data } from "./data";
+// import "./styles.css";
+
+/**
+ * 【问题】！！！
+ * 当我点击“隐藏节点”后，节点正常隐藏
+ * 但是点击“改变数据”调用changeData方法后，节点能隐藏，但是边又显示出来了。
+ */
+export default () => {
+  const graphContainer = useRef(null);
+  let graph = useRef(null);
+
+  // 图初始化
+  useEffect(() => {
+    if (!graph.current) {
+      graph.current = new G6.Graph({
+        container: graphContainer.current,
+        width: 1580,
+        height: 1080,
+        defaultNode: {
+          type: "circle",
+          size: 50,
+          anchorPoints: [[0, 0.5], [1, 0.5]]
+        },
+        defaultEdge: {
+          type: "cubic-horizontal"
+        },
+        layout: {
+          type: "dagre",
+          rankdir: "LR",
+          controlPoints: true
+        },
+        modes: {
+          default: [
+            "drag-canvas",
+            {
+              type: "zoom-canvas",
+              minZoom: 0.5,
+              maxZoom: 2
+            }
+          ]
+        },
+        animate: true
+      });
+    }
+
+    graph.current && graph.current.data(data);
+    graph.current && graph.current.render();
+  }, []);
+
+  /**
+   * 手动合并数据，达到异步加载的效果
+   * @param {*} data  后端返回的新数据
+   */
+  const handleChangeData = data => {
+    const prevData = graph.current && graph.current.save();
+    const newData = mergeWith(prevData, data, (objValue, srcValue) => {
+      if (isArray(objValue)) {
+        return objValue.concat(srcValue);
+      }
+    });
+    
+    graph.current && graph.current.changeData(newData);
+  };
+
+  /**
+   * 模拟点击加载数据
+   * 模拟点击AoJc4qPcWeOL7NJwOh6[加工输出表]节点后，后端返回异步加载的数据
+   */
+  const handleLoadData = () => {
+    const mockData = {
+      nodes: [
+        {
+          id: "vm1234",
+          label: "新增报告"
+        }
+      ],
+      edges: [
+        {
+          source: "AoJc4qPcWeOL7NJwOh6",
+          target: "vm1234"
+        }
+      ]
+    };
+    handleChangeData(mockData);
+  };
+
+  /**
+   * 递归隐藏节点和边
+   */
+  const collapsePrev = node => {
+    const edges = node.getInEdges();
+    edges.forEach(edge => {
+      edge.hide();
+      const sourceNode = edge.getSource();
+      if (sourceNode.getOutEdges().length === 1) {
+        sourceNode.hide();
+        collapsePrev(sourceNode);
+      }
+    });
+  };
+
+  /**
+   * 模拟折叠GxZeEGkky88xKxq1r22[工厂输出表]节点
+   */
+  const handleHideNode = () => {
+    const node = graph.current.findById("GxZeEGkky88xKxq1r22");
+    collapsePrev(node);
+  };
+
+  return (
+    <div>
+      <button onClick={handleHideNode}>隐藏节点</button>
+      <button onClick={handleLoadData}>改变数据</button>
+      <div ref={graphContainer} className={"graph-container"} />
+    </div>
+  );
+};

stories/Issues/issues.stories.tsx

@@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react';
 import React from 'react';
 import DragCanvas from './component/drag-canvas';
 import DagreArrow from './component/dagre-arrow';
+import ChageData from './changeData'
 
 export default { title: 'Issues' };
 
@@ -11,4 +12,7 @@ storiesOf('Issues', module)
 ))
 .add('dagre polyline arrow', () => (
   <DagreArrow />
-));
+))
+.add('change data', () => (
+  <ChageData />
+))

tests/unit/behavior/zoom-spec.ts

@@ -125,7 +125,7 @@ describe('zoom-canvas', () => {
     expect(matrix[7]).toEqual(10);
   });
 
-  it.only('zoom with optimize', () => {
+  it('zoom with optimize', () => {
     const graph = new Graph({
       container: div,
       width: 500,

tests/unit/graph/graph-spec.ts

@@ -837,7 +837,7 @@ describe('all node link center', () => {
     expect(graph.findAllByState('node', 'b').length).toBe(0);
   });
 
-  it.only('default node & edge style', () => {
+  it('default node & edge style', () => {
     const defaultGraph = new Graph({
       container: div,
       width: 500,