From 9db66a756dde94fa7369c30855cc52bde10fdabc Mon Sep 17 00:00:00 2001
From: Jingchao Di <alswlx@gmail.com>
Date: Sat, 4 May 2024 11:00:27 +0800
Subject: [PATCH] feat: better ui, graph moveable, pk with emoji

commit f331e83e819fb40fdbcc32cb3f2f9237ad236a01
Author: Jingchao Di <alswlx@gmail.com>
Date:   Sat May 4 11:00:01 2024 +0800

    feat: nn

commit 1cfe24ffe00388e984303bd909975cc19c7886b5
Author: Jingchao Di <alswlx@gmail.com>
Date:   Sat May 4 10:54:55 2024 +0800

    feat: graph moveable, pk with emoji

commit 3df86a82c394faaadd3879ff4a5d72f0a85e7b8d
Author: Jingchao Di <alswlx@gmail.com>
Date:   Sat May 4 10:34:32 2024 +0800

    feat: better layout
---
 src/pages/index.tsx  | 15 +++++++++++++--
 src/parser/parser.ts | 13 ++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 540c87d..e6550ac 100644
--- 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
index 7e39c8d..fc1dad1 100644
--- 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,