feat:add sub layout demos (WIP)

packages/graphin/docs/layout/index.md

@@ -4,7 +4,7 @@ order: 0
 group:
   path: /layout
   title: 布局方案
-  order: 0
+  order: 2
 nav:
   title: Graphin
   path: /graphin

packages/graphin/docs/layout/sub-layout/demos/AntdMenu.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { GraphinContext, Utils } from '@antv/graphin';
+
+import { SwapOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Menu } from 'antd';
+
+const { layouts } = Utils;
+
+const { SubMenu } = Menu;
+console.log('layouts(***********', layouts);
+const AntdMenu = () => {
+  // const { handleChange } = props;
+  const { graph, contextmenu } = React.useContext(GraphinContext);
+  const { canvas } = contextmenu;
+
+  const handleClick = e => {
+    const nodes = graph.findAllByState('node', 'selected').map(c => c.getModel());
+    const edges = graph.findAllByState('edge', 'selected').map(c => c.getModel());
+    console.log('nodes******', nodes, edges);
+    // const newData = Utils.subLayout().add(
+    //   {
+    //     nodes,
+    //     edges,
+    //   },
+    //   {
+    //     type: e,
+    //   },
+    // );
+
+    // handleChange(newData);
+    canvas.handleClose();
+  };
+
+  return (
+    <div
+      style={{
+        boxShadow: `0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%)`,
+      }}
+    >
+      <Menu onClick={handleClick} style={{ width: 140 }} mode="vertical">
+        <SubMenu key="sublayout" title="子图布局" icon={<SwapOutlined />} style={{ maxHeight: '400px' }}>
+          <Menu.Item>选择子图</Menu.Item>
+
+          {layouts.map(item => {
+            const { title, type } = item;
+            return (
+              <Menu.Item
+                key={type}
+                onClick={() => {
+                  handleClick(item);
+                }}
+              >
+                {title}
+              </Menu.Item>
+            );
+          })}
+        </SubMenu>
+
+        <Menu.Item key="delete">
+          <DeleteOutlined />
+          清空画布
+        </Menu.Item>
+      </Menu>
+    </div>
+  );
+};
+export default AntdMenu;

packages/graphin/docs/layout/sub-layout/demos/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Graphin, { Utils, GraphinContext, Behaviors } from '@antv/graphin';
+import { ContextMenu } from '@antv/graphin-components';
+import AntdMenu from './AntdMenu';
+
+const Demo = () => {
+  const [state, setState] = React.useState({
+    data: Utils.mock(10).circle().graphin(),
+    layout: {
+      type: 'grid',
+    },
+    selected: [],
+  });
+
+  const { data, layout } = state;
+
+  const handleChange = item => {
+    console.log(item);
+  };
+  return (
+    <div>
+      <Graphin data={data} layout={layout}>
+        <ContextMenu bindType="canvas">
+          <AntdMenu handleChange={handleChange} />
+        </ContextMenu>
+      </Graphin>
+    </div>
+  );
+};
+export default Demo;

packages/graphin/docs/layout/sub-layout/index.md

@@ -3,8 +3,15 @@ title: 子图布局
 group:
   path: /layout
   title: 布局方案
+  order: 9
 nav:
   title: Graphin
   path: /graphin
   order: 1
 ---
+
+## 子图布局
+
+> 注意 ⚠️ ：该功能还在开发中。具体操作路径：按住`shift`圈选一批节点，然后在画布上右键菜单，选择需要布局的类型即可。
+
+<code src='./demos/index.tsx'>