feat: x6 enable

package.json

@@ -9,6 +9,8 @@
     "start": "npm run dev"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-react-shape": "^2.2.3",
     "antd": "^5.16.5",
     "axios": "^1.6.8",
     "monaco-editor": "^0.48.0",

src/pages/index.less

@@ -0,0 +1,32 @@
+.react-shape-app {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  font-family: sans-serif;
+
+  .app-content {
+    flex: 1;
+    height: 280px;
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 5px;
+    box-shadow: 0 12px 5px -10px rgb(0 0 0 / 10%), 0 0 4px 0 rgb(0 0 0 / 10%);
+  }
+
+  .custom-react-node {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border: 1px solid #8f8f8f;
+    border-radius: 6px;
+  }
+
+  .custom-react-node span {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+}

src/pages/index.tsx

@@ -1,17 +1,103 @@
-import { Col, Row, theme } from 'antd';
+import { Graph, Node } from '@antv/x6';
+import { register } from '@antv/x6-react-shape';
+import { Col, Dropdown, Row, theme } from 'antd';
+import { useEffect, useRef, useState } from 'react';
 import MonacoEditor from 'react-monaco-editor';
+import './index.less';
 
+const CustomComponent = ({ node }: { node: Node }) => {
+  const label = node.prop('label');
+  return (
+    <Dropdown
+      menu={{
+        items: [
+          {
+            key: 'copy',
+            label: '复制',
+          },
+          {
+            key: 'paste',
+            label: '粘贴',
+          },
+          {
+            key: 'delete',
+            label: '删除',
+          },
+        ],
+      }}
+      trigger={['contextMenu']}
+    >
+      <div className="custom-react-node">{label}</div>
+    </Dropdown>
+  );
+};
+
+register({
+  shape: 'custom-react-node',
+  width: 100,
+  height: 40,
+  component: CustomComponent,
+});
+
+const data = {
+  nodes: [
+    {
+      id: 'node1',
+      shape: 'custom-react-node',
+      x: 40,
+      y: 40,
+      label: 'hello',
+    },
+    {
+      id: 'node2',
+      shape: 'custom-react-node',
+      x: 160,
+      y: 180,
+      label: 'world',
+    },
+  ],
+  edges: [
+    {
+      shape: 'edge',
+      source: 'node1',
+      target: 'node2',
+      label: 'x6',
+      attrs: {
+        line: {
+          stroke: '#8f8f8f',
+          strokeWidth: 1,
+        },
+      },
+    },
+  ],
+};
 export default () => {
   // constructor
   const {
     token: { colorBgContainer, borderRadiusLG },
   } = theme.useToken();
-  const code = `Table staff {
+  const initCode = `Table staff {
   id int [pk]
   name varchar
   age int
   email varchar
 }`;
+  const [code, setCode] = useState(initCode);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      const graph = new Graph({
+        container: containerRef.current,
+        background: {
+          color: '#F2F7FA',
+        },
+      });
+
+      graph.fromJSON(data);
+      graph.centerContent();
+    }
+  }, []);
 
   // editorDidMount
   const editorDidMount = (editor: any, monaco: any) => {
@@ -40,7 +126,11 @@ export default () => {
           editorDidMount={editorDidMount}
         />
       </Col>
-      <Col span={12}></Col>
+      <Col span={12}>
+        <div className="react-shape-app">
+          <div className="app-content" ref={containerRef} />
+        </div>
+      </Col>
     </Row>
   );
 };