feat: export the layout methods. add: subgraph layout demo on site.

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
         '@typescript-eslint/explicit-function-return-type': 'off',
         '@typescript-eslint/no-explicit-any': 'error',
         'react/display-name': 'off',
-        'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
+        'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx', '.js', '.ts'] }],
         'react/jsx-props-no-spreading': 0,
         'operator-assignment': 0,
         'react/no-did-update-set-state': 0,

packages/graphin-site/examples/layout/sublayout/demo/Sublayout.jsx

@@ -0,0 +1,173 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-undef */
+import React from 'react';
+import ReactDOM from 'react-dom';
+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 { nodes, edges } = data;
+
+    const subNodes1 = [];
+    const subEdges1 = [];
+    const subNodes2 = [];
+    const subEdges2 = [];
+
+    // split the nodes into two parts
+    nodes.forEach((node, i) => {
+        if (i < 10) {
+            subNodes1.push(node);
+        } else {
+            subNodes2.push(node);
+        }
+    });
+
+    // find the edges for these two parts
+    edges.forEach(edge => {
+        let findSource = false;
+        let findTarget = false;
+        subNodes1.forEach(sn => {
+            if (edge.source === sn.id) {
+                findSource = true;
+            }
+            else if (edge.target === sn.id) {
+                findTarget = true;
+            }
+        });
+        if (findSource && findTarget) {
+            subEdges1.push(edge);
+            return;
+        }
+        findSource = false;
+        findTarget = false;
+        subNodes2.forEach(sn => {
+            if (edge.source === sn.id) {
+                findSource = true;
+            }
+            else if (edge.target === sn.id) {
+                findTarget = true;
+            }
+        });
+        if (findSource && findTarget) {
+            subEdges2.push(edge);
+        }
+    });
+
+    // layout the part1
+    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});
+
+    // combine the two parts
+    const newNodes = [...node1.nodes, ...node2.nodes];
+
+    return {
+        data: {
+            nodes: newNodes,
+            edges: data.edges,
+        },
+        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" }
+        ], 
+        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" },
+        ]
+    }
+    const nodes = [];
+    const edges = [];
+    testData.nodes.forEach(tnode => {
+        tnode.label = tnode.id;
+        tnode.type = 'company';
+        tnode.shape = 'CircleNode';
+        tnode.style = {};
+        const node = {
+            id: tnode.id,
+            data: tnode,
+            shape: 'CircleNode',
+            style: {}
+        }
+        nodes.push(node);
+    });
+    testData.edges.forEach(tedge => {
+        const edge = {
+            source: tedge.source,
+            target: tedge.target,
+            data: tedge
+        }
+        edges.push(edge);
+    });
+    const [state, setState] = React.useState({
+        data: { nodes, edges },
+        layout: {
+            name: 'force',
+        },
+    });
+
+    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);
+                    setState({
+                        ...result,
+                    });
+                }}
+            >
+                sub layout
+            </Button>
+            <Graphin data={data} layout={layout} ref={graphRef} />
+        </div>
+    );
+};
+
+ReactDOM.render(<App />, document.getElementById('container'));

packages/graphin-site/examples/layout/sublayout/demo/meta.json

@@ -0,0 +1,13 @@
+{
+    "title": {
+        "zh": "中文分类",
+        "en": "Category"
+    },
+    "demos": [
+        {
+            "filename": "Sublayout.jsx",
+            "title": "子图布局",
+            "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*qpVWRbWiPpIAAAAAAAAAAABkARQnAQ"
+        }
+    ]
+}

packages/graphin-site/examples/layout/sublayout/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 子图布局
+order: 1
+---

packages/graphin-site/package.json

@@ -21,6 +21,7 @@
 	"devDependencies": {
 		"@antv/gatsby-theme-antv": "^0.10.17",
 		"gatsby": "^2.17.7",
+		"@antv/graphin": "^1.0.2",
 		"gh-pages": "^2.1.1"
 	},
 	"dependencies": {

packages/graphin/src/index.ts

@@ -1,9 +1,10 @@
 import G6 from '@antv/g6';
 import Graphin from './Graphin';
 import Utils from './utils';
+import Layout from './layout';
 
 export default Graphin;
-export { Utils };
+export { Utils, Layout };
 
 export * from './types';
 

packages/graphin/src/layout/index.ts

@@ -0,0 +1,10 @@
+import Dagre from './g6/dagre';
+import Radial from './g6/radial';
+import Force from './force';
+import Concentric from './basic/concentric';
+import Circle from './basic/circle';
+import Grid from './basic/grid';
+import Random from './basic/random';
+import Tweak from './basic/tweak';
+
+export default { Dagre, Radial, Force, Concentric, Circle, Grid, Random, Tweak };