feat: better ui, graph moveable, pk with emoji

commit f331e83 Author: Jingchao Di <[email protected]> Date: Sat May 4 11:00:01 2024 +0800 feat: nn commit 1cfe24f Author: Jingchao Di <[email protected]> Date: Sat May 4 10:54:55 2024 +0800 feat: graph moveable, pk with emoji commit 3df86a8 Author: Jingchao Di <[email protected]> Date: Sat May 4 10:34:32 2024 +0800 feat: better layout
alswl · May 4, 2024 · 9db66a7 · 9db66a7
1 parent f4cffb2
commit 9db66a7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,4 +1,4 @@
-import { GridLayout } from '@antv/layout';
+import { DagreLayout, GridLayout } from '@antv/layout';
 import { Graph, Model } from '@antv/x6';
 import { Parser } from '@dbml/core';
 import { Col, Row, theme } from 'antd';
@@ -43,13 +43,22 @@ Ref: posts.user_id > users.id // many-to-one
   const [models, setModels] = useState<Model.FromJSONData>({});
   const containerRef = useRef(null);
   const parser = new Parser();
-  const layout = new GridLayout({
+  new GridLayout({
     type: 'grid',
     width: 600,
     height: 400,
     rows: 6,
     cols: 4,
   });
+  const dagreLayout = new DagreLayout({
+    type: 'dagre',
+    rankdir: 'LR',
+    align: 'UL',
+    ranksep: 80,
+    nodesep: 60,
+    controlPoints: true,
+  });
+  const layout = dagreLayout;
 
   useEffect(() => {
     if (containerRef.current) {
@@ -78,6 +87,8 @@ Ref: posts.user_id > users.id // many-to-one
           vertexAddable: false,
           vertexDeletable: false,
         },
+        panning: true,
+        mousewheel: true,
       });
       graph.use(
         new Snapline({

diff --git a/src/parser/parser.ts b/src/parser/parser.ts
@@ -8,12 +8,19 @@ function parseFieldToPort(
   schemaName: string,
   tableName: string,
 ): any {
+  let label = field.name;
+  if (field.pk) {
+    label += ' 🔑';
+  }
+  if (field.not_null) {
+    label += ' 🚫';
+  }
   return {
     id: `${schemaName}-${tableName}-${field.name}`,
     group: 'list',
     attrs: {
       portNameLabel: {
-        text: field.name,
+        text: label,
       },
       portTypeLabel: {
         text: field.type.type_name || 'unknown',
@@ -68,7 +75,7 @@ function parseRef(ref: Ref): any {
         attrs: {
           label: {
             text: source.relation,
-            stroke: '#aaa',
+            fontFamily: 'monospace',
           },
         },
         position: 0.2,
@@ -77,7 +84,7 @@ function parseRef(ref: Ref): any {
         attrs: {
           label: {
             text: target.relation,
-            stroke: '#aaa',
+            fontFamily: 'monospace',
           },
         },
         position: 0.8,