📝 将forceSimulation的处理内置在graphin，业务端不需要感知

antvis · Dec 27, 2019 · cfb06a8 · cfb06a8
1 parent 466e67f
commit cfb06a8
Showing 1 changed file with 45 additions and 58 deletions.
diff --git a/packages/graphin-site/examples/layout/sublayout/demo/Sublayout.jsx b/packages/graphin-site/examples/layout/sublayout/demo/Sublayout.jsx
@@ -6,13 +6,7 @@ import Graphin, { Layout } from '@antv/graphin';
 import { Button } from 'antd';
 import '@antv/graphin/dist/index.css'; // 引入Graphin CSS
 
-const getSub = (data, refCurrent) => {
-    //  stop the simulation if the previous layout is force layout
-    const { forceSimulation } = refCurrent;
-    if (forceSimulation) {
-        forceSimulation.stop();
-    }
-
+const getSub = data => {
     const { nodes, edges } = data;
 
     const subNodes1 = [];
@@ -36,8 +30,7 @@ const getSub = (data, refCurrent) => {
         subNodes1.forEach(sn => {
             if (edge.source === sn.id) {
                 findSource = true;
-            }
-            else if (edge.target === sn.id) {
+            } else if (edge.target === sn.id) {
                 findTarget = true;
             }
         });
@@ -50,8 +43,7 @@ const getSub = (data, refCurrent) => {
         subNodes2.forEach(sn => {
             if (edge.source === sn.id) {
                 findSource = true;
-            }
-            else if (edge.target === sn.id) {
+            } else if (edge.target === sn.id) {
                 findTarget = true;
             }
         });
@@ -61,10 +53,10 @@ const getSub = (data, refCurrent) => {
     });
 
     // layout the part1
-    const node1 = Layout.Circle({nodes: subNodes1, edges: subEdges1}, { x: 100, y: 100, r: 80});
+    const node1 = Layout.Circle({ nodes: subNodes1, edges: subEdges1 }, { x: 100, y: 100, r: 80 });
 
     // layout the part2
-    const node2 = Layout.Radial({nodes: subNodes2, edges: subEdges2}, { center: [220, 220], unitRadius: 100});
+    const node2 = Layout.Radial({ nodes: subNodes2, edges: subEdges2 }, { center: [220, 220], unitRadius: 100 });
 
     // combine the two parts
     const newNodes = [...node1.nodes, ...node2.nodes];
@@ -74,46 +66,47 @@ const getSub = (data, refCurrent) => {
             nodes: newNodes,
             edges: data.edges,
         },
+        //  stop the simulation if the previous layout is force layout
         layout: null,
     };
 };
 const App = () => {
     const testData = {
         nodes: [
-            { id: "node-0" },
-            { id: "node-1" },
-            { id: "node-2" },
-            { id: "node-3" },
-            { id: "node-4" },
-            { id: "node-5" },
-            { id: "node-6" },
-            { id: "node-7" },
-            { id: "node-8" },
-            { id: "node-9" },
-            { id: "node-10" },
-            { id: "node-11" },
-            { id: "node-12" },
-            { id: "node-13" },
-            { id: "node-14" },
-            { id: "node-15" },
-            { id: "node-16" },
-            { id: "node-17" },
-            { id: "node-18" },
-            { id: "node-19" }
-        ], 
+            { id: 'node-0' },
+            { id: 'node-1' },
+            { id: 'node-2' },
+            { id: 'node-3' },
+            { id: 'node-4' },
+            { id: 'node-5' },
+            { id: 'node-6' },
+            { id: 'node-7' },
+            { id: 'node-8' },
+            { id: 'node-9' },
+            { id: 'node-10' },
+            { id: 'node-11' },
+            { id: 'node-12' },
+            { id: 'node-13' },
+            { id: 'node-14' },
+            { id: 'node-15' },
+            { id: 'node-16' },
+            { id: 'node-17' },
+            { id: 'node-18' },
+            { id: 'node-19' },
+        ],
         edges: [
-            { source: "node-10", target: "node-11" },
-            { source: "node-10", target: "node-12" },
-            { source: "node-10", target: "node-13" },
-            { source: "node-10", target: "node-14" },
-            { source: "node-10", target: "node-15" },
-            { source: "node-11", target: "node-12" },
-            { source: "node-11", target: "node-16" },
-            { source: "node-11", target: "node-17" },
-            { source: "node-11", target: "node-18" },
-            { source: "node-18", target: "node-19" },
-        ]
-    }
+            { source: 'node-10', target: 'node-11' },
+            { source: 'node-10', target: 'node-12' },
+            { source: 'node-10', target: 'node-13' },
+            { source: 'node-10', target: 'node-14' },
+            { source: 'node-10', target: 'node-15' },
+            { source: 'node-11', target: 'node-12' },
+            { source: 'node-11', target: 'node-16' },
+            { source: 'node-11', target: 'node-17' },
+            { source: 'node-11', target: 'node-18' },
+            { source: 'node-18', target: 'node-19' },
+        ],
+    };
     const nodes = [];
     const edges = [];
     testData.nodes.forEach(tnode => {
@@ -125,16 +118,16 @@ const App = () => {
             id: tnode.id,
             data: tnode,
             shape: 'CircleNode',
-            style: {}
-        }
+            style: {},
+        };
         nodes.push(node);
     });
     testData.edges.forEach(tedge => {
         const edge = {
             source: tedge.source,
             target: tedge.target,
-            data: tedge
-        }
+            data: tedge,
+        };
         edges.push(edge);
     });
     const [state, setState] = React.useState({
@@ -146,26 +139,20 @@ const App = () => {
 
     const { data, layout } = state;
 
-    const graphRef = React.createRef(null);
-    let refCurrent;
-    React.useEffect(() => {
-        refCurrent = graphRef.current;
-    }, [state]);
-
     return (
         <div>
             <Button
                 type="primary"
                 onClick={() => {
-                    const result = getSub(data, refCurrent);
+                    const result = getSub(data);
                     setState({
                         ...result,
                     });
                 }}
             >
                 sub layout
             </Button>
-            <Graphin data={data} layout={layout} ref={graphRef} />
+            <Graphin data={data} layout={layout} />
         </div>
     );
 };