feat: update

.umirc.ts

@@ -7,30 +7,31 @@ export default defineConfig({
   initialState: {},
   request: {},
   layout: {
-    title: '@umijs/max',
+    title: 'dbml-editor',
+    locale: false,
   },
   routes: [
     {
       path: '/',
-      redirect: '/home',
+      component: './Home',
     },
     {
-      name: '首页',
-      path: '/home',
-      component: './Home',
+      name: 'Source',
+      path: 'https://github.com/alswl/dbml-editor',
+      external: true,
     },
     {
-      name: '权限演示',
-      path: '/access',
-      component: './Access',
+      name: 'How to use DBML',
+      path: 'https://dbml.dbdiagram.io/home',
+      external: true,
     },
     {
-      name: ' CRUD 示例',
-      path: '/table',
-      component: './Table',
+      name: '@alswl',
+      path: 'https://twitter.com/alswl',
+      external: true,
     },
+
   ],
   npmClient: 'pnpm',
-  title: 'dbml-editor by @alswl',
   esbuildMinifyIIFE: true,
 });

src/app.ts

@@ -3,14 +3,17 @@
 // 全局初始化数据配置，用于 Layout 用户信息和权限初始化
 // 更多信息见文档：https://umijs.org/docs/api/runtime-config#getinitialstate
 export async function getInitialState(): Promise<{ name: string }> {
-  return { name: '@umijs/max' };
+  return { name: '' };
 }
 
 export const layout = () => {
   return {
-    logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
+    logo: false,
     menu: {
       locale: false,
     },
+    logout: false,
+    rightRender: false,
+    layout: 'top',
   };
 };

src/pages/Home/index.less

@@ -1,3 +1,32 @@
-.container {
-  padding-top: 80px;
+.react-shape-app {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  font-family: sans-serif;
+
+  .app-content {
+    flex: 1;
+    height: 800px;
+    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/Home/index.tsx

@@ -1,18 +1,154 @@
-import Guide from '@/components/Guide';
-import { trim } from '@/utils/format';
+import { DagreLayout, GridLayout } from '@antv/layout';
+import { Graph, Model } from '@antv/x6';
+import { Parser } from '@dbml/core';
+import { Col, Row, theme } from 'antd';
+import { debounce } from 'lodash-es';
+import { useEffect, useRef, useState } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+
+import parseDatabaseToER from '@/parser/parser';
+import { Snapline } from '@antv/x6-plugin-snapline';
+import './index.less';
 import { PageContainer } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
-import styles from './index.less';
 
-const HomePage: React.FC = () => {
+export default () => {
+  // constructor
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+  const initCode = `Table users {
+  id integer
+  username varchar
+  role varchar
+  created_at timestamp
+
+  Note: 'User Table'
+}
+
+Table posts {
+  id integer [primary key]
+  title varchar
+  body text [note: 'Content of the post']
+  user_id integer
+  status post_status
+  created_at timestamp
+}
+
+Enum post_status {
+  draft
+  published
+  private [note: 'visible via URL only']
+}
+
+Ref: posts.user_id > users.id // many-to-one
+`;
+  const [code, setCode] = useState(initCode);
+  const [models, setModels] = useState<Model.FromJSONData>({});
+  const containerRef = useRef(null);
+  const parser = new Parser();
+  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) {
+      const graph = new Graph({
+        container: containerRef.current,
+        connecting: {
+          anchor: {
+            name: 'midSide',
+            args: {
+              direction: 'H',
+            },
+          },
+          allowBlank: false,
+          allowEdge: false,
+          allowNode: false,
+        },
+        background: {
+          color: '#F2F7FA',
+        },
+        interacting: {
+          nodeMovable: true,
+          edgeMovable: false,
+          edgeLabelMovable: false,
+          arrowheadMovable: false,
+          vertexMovable: false,
+          vertexAddable: false,
+          vertexDeletable: false,
+        },
+        panning: true,
+        mousewheel: false,
+      });
+      graph.use(
+        new Snapline({
+          enabled: true,
+        }),
+      );
+
+      graph.fromJSON(models);
+      graph.centerContent();
+    }
+  }, [models]);
+
+  // editorDidMount
+  const editorDidMount = (editor: any, monaco: any) => {
+    const database = parser.parse(code, 'dbmlv2');
+    let models = parseDatabaseToER(database);
+    setModels(layout.layout(models));
+  };
+
+  // onchange
+  const onChange = (newValue: any, e: any) => {
+    const database = parser.parse(newValue, 'dbmlv2');
+    console.log(database);
+    let models = parseDatabaseToER(database);
+    console.log(models);
+    setModels(layout.layout(models));
+  };
+  const debouncedOnChange = debounce(onChange, 500);
+
   const { name } = useModel('global');
+
   return (
-    <PageContainer ghost>
-      <div className={styles.container}>
-        <Guide name={trim(name)} />
-      </div>
+    <PageContainer ghost header={{ title: '' }}>
+      <Row>
+        <Col span={12}>
+          <MonacoEditor
+            // dbml not works
+            language="dbml"
+            theme="vs-dark"
+            value={code}
+            options={{
+              selectOnLineNumbers: true,
+              minimap: {
+                enabled: false,
+              },
+            }}
+            onChange={debouncedOnChange}
+            editorDidMount={editorDidMount}
+          />
+        </Col>
+        <Col span={12}>
+          <div className="react-shape-app">
+            <div className="app-content" ref={containerRef} />
+          </div>
+        </Col>
+      </Row>
     </PageContainer>
   );
 };
-
-export default HomePage;