feat: x6 with er works

alswl · May 1, 2024 · de4ffff · de4ffff
1 parent 6c67750
commit de4ffff
Show file tree

Hide file tree

Showing 3 changed files with 320 additions and 30 deletions.
diff --git a/src/nodes/er.ts b/src/nodes/er.ts
@@ -0,0 +1,97 @@
+import { Graph } from '@antv/x6';
+
+const LINE_HEIGHT = 24;
+const NODE_WIDTH = 150;
+
+function registerER() {
+  Graph.registerPortLayout(
+    'erPortPosition',
+    (portsPositionArgs) => {
+      return portsPositionArgs.map((_, index) => {
+        return {
+          position: {
+            x: 0,
+            y: (index + 1) * LINE_HEIGHT,
+          },
+          angle: 0,
+        };
+      });
+    },
+    true,
+  );
+
+  Graph.registerNode(
+    'er-rect',
+    {
+      inherit: 'rect',
+      markup: [
+        {
+          tagName: 'rect',
+          selector: 'body',
+        },
+        {
+          tagName: 'text',
+          selector: 'label',
+        },
+      ],
+      attrs: {
+        rect: {
+          strokeWidth: 1,
+          stroke: '#5F95FF',
+          fill: '#5F95FF',
+        },
+        label: {
+          fontWeight: 'bold',
+          fill: '#ffffff',
+          fontSize: 12,
+        },
+      },
+      ports: {
+        groups: {
+          list: {
+            markup: [
+              {
+                tagName: 'rect',
+                selector: 'portBody',
+              },
+              {
+                tagName: 'text',
+                selector: 'portNameLabel',
+              },
+              {
+                tagName: 'text',
+                selector: 'portTypeLabel',
+              },
+            ],
+            attrs: {
+              portBody: {
+                width: NODE_WIDTH,
+                height: LINE_HEIGHT,
+                strokeWidth: 1,
+                stroke: '#5F95FF',
+                fill: '#EFF4FF',
+                magnet: true,
+              },
+              portNameLabel: {
+                ref: 'portBody',
+                refX: 6,
+                refY: 6,
+                fontSize: 10,
+              },
+              portTypeLabel: {
+                ref: 'portBody',
+                refX: 95,
+                refY: 6,
+                fontSize: 10,
+              },
+            },
+            position: 'erPortPosition',
+          },
+        },
+      },
+    },
+    true,
+  );
+}
+
+export default registerER;
diff --git a/src/pages/index.less b/src/pages/index.less
@@ -6,7 +6,7 @@
 
   .app-content {
     flex: 1;
-    height: 280px;
+    height: 600px;
     margin-right: 8px;
     margin-left: 8px;
     border-radius: 5px;

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import registerER from '@/nodes/er';
 import { Graph, Node } from '@antv/x6';
 import { register } from '@antv/x6-react-shape';
 import { Col, Dropdown, Row, theme } from 'antd';
@@ -34,43 +35,234 @@ const CustomComponent = ({ node }: { node: Node }) => {
 
 register({
   shape: 'custom-react-node',
-  width: 100,
-  height: 40,
+  width: 800,
+  height: 600,
   component: CustomComponent,
 });
 
-const data = {
-  nodes: [
-    {
-      id: 'node1',
-      shape: 'custom-react-node',
-      x: 40,
-      y: 40,
-      label: 'hello',
+const data = [
+  {
+    id: '1',
+    shape: 'er-rect',
+    label: '学生',
+    width: 150,
+    height: 24,
+    position: {
+      x: 24,
+      y: 150,
     },
-    {
-      id: 'node2',
-      shape: 'custom-react-node',
-      x: 160,
-      y: 180,
-      label: 'world',
+    ports: [
+      {
+        id: '1-1',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'ID',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '1-2',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Name',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '1-3',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Class',
+          },
+          portTypeLabel: {
+            text: 'NUMBER',
+          },
+        },
+      },
+      {
+        id: '1-4',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Gender',
+          },
+          portTypeLabel: {
+            text: 'BOOLEAN',
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: '2',
+    shape: 'er-rect',
+    label: '课程',
+    width: 150,
+    height: 24,
+    position: {
+      x: 250,
+      y: 210,
     },
-  ],
-  edges: [
-    {
-      shape: 'edge',
-      source: 'node1',
-      target: 'node2',
-      label: 'x6',
-      attrs: {
-        line: {
-          stroke: '#8f8f8f',
-          strokeWidth: 1,
+    ports: [
+      {
+        id: '2-1',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'ID',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '2-2',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Name',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
         },
       },
+      {
+        id: '2-3',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'StudentID',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '2-4',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'TeacherID',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '2-5',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Description',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: '3',
+    shape: 'er-rect',
+    label: '老师',
+    width: 150,
+    height: 24,
+    position: {
+      x: 480,
+      y: 350,
     },
-  ],
-};
+    ports: [
+      {
+        id: '3-1',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'ID',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '3-2',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Name',
+          },
+          portTypeLabel: {
+            text: 'STRING',
+          },
+        },
+      },
+      {
+        id: '3-3',
+        group: 'list',
+        attrs: {
+          portNameLabel: {
+            text: 'Age',
+          },
+          portTypeLabel: {
+            text: 'NUMBER',
+          },
+        },
+      },
+    ],
+  },
+  {
+    id: '4',
+    shape: 'edge',
+    source: {
+      cell: '1',
+      port: '1-1',
+    },
+    target: {
+      cell: '2',
+      port: '2-3',
+    },
+    attrs: {
+      line: {
+        stroke: '#A2B1C3',
+        strokeWidth: 2,
+      },
+    },
+    zIndex: 0,
+  },
+  {
+    id: '5',
+    shape: 'edge',
+    source: {
+      cell: '3',
+      port: '3-1',
+    },
+    target: {
+      cell: '2',
+      port: '2-4',
+    },
+    attrs: {
+      line: {
+        stroke: '#A2B1C3',
+        strokeWidth: 2,
+      },
+    },
+    zIndex: 0,
+  },
+];
 export default () => {
   // constructor
   const {
@@ -86,6 +278,7 @@ export default () => {
   const containerRef = useRef(null);
 
   useEffect(() => {
+    registerER();
     if (containerRef.current) {
       const graph = new Graph({
         container: containerRef.current,