diff --git a/package.json b/package.json index d9a1798..3172814 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,16 @@ "dependencies": { "@antv/x6": "^2.18.1", "@antv/x6-react-shape": "^2.2.3", + "@dbml/core": "^3.4.3", "antd": "^5.16.5", "axios": "^1.6.8", + "lodash-es": "^4.17.21", "monaco-editor": "^0.48.0", "react-monaco-editor": "^0.55.0", "umi": "^4.1.10" }, "devDependencies": { + "@types/lodash-es": "^4.17.12", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", "@umijs/plugins": "^4.1.10", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 438c48a..6785397 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,12 +13,18 @@ importers: '@antv/x6-react-shape': specifier: ^2.2.3 version: 2.2.3(@antv/x6@2.18.1)(react-dom@18.1.0(react@18.1.0))(react@18.1.0) + '@dbml/core': + specifier: ^3.4.3 + version: 3.4.3 antd: specifier: ^5.16.5 version: 5.16.5(moment@2.30.1)(react-dom@18.1.0(react@18.1.0))(react@18.1.0) axios: specifier: ^1.6.8 version: 1.6.8 + lodash-es: + specifier: ^4.17.21 + version: 4.17.21 monaco-editor: specifier: ^0.48.0 version: 0.48.0 @@ -29,6 +35,9 @@ importers: specifier: ^4.1.10 version: 4.1.10(@babel/core@7.23.6)(@types/node@20.12.7)(@types/react@18.3.1)(eslint@8.57.0)(lightningcss@1.22.1)(prettier@2.8.8)(react-dom@18.1.0(react@18.1.0))(react@18.1.0)(rollup@3.29.4)(stylelint@14.16.1)(terser@5.31.0)(type-fest@0.20.2)(typescript@5.4.5)(webpack@5.91.0) devDependencies: + '@types/lodash-es': + specifier: ^4.17.12 + version: 4.17.12 '@types/react': specifier: ^18.0.33 version: 18.3.1 @@ -735,6 +744,20 @@ packages: } engines: { node: '>=10' } + '@dbml/core@3.4.3': + resolution: + { + integrity: sha512-bvjp3BSjBWo6JuFAIe8zd1for09XTha4Sy0F73+Ca+7Yu6HbFxSGSTz/Sh/YecjcBMniTbKZPRNWBTyLJD18bw==, + } + + '@dbml/parse@3.4.3': + resolution: + { + integrity: sha512-U6jZxMaxT2IA/qPjVDjvip0BXg7GK/53ytpzjXPyu+tVCPSiwWnqMnoH9xfNz1pbLIF4xKW219Fpt0dTXguXhQ==, + } + peerDependencies: + lodash: ^4.17.21 + '@dnd-kit/accessibility@3.1.0': resolution: { @@ -1822,6 +1845,18 @@ packages: integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==, } + '@types/lodash-es@4.17.12': + resolution: + { + integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==, + } + + '@types/lodash@4.17.0': + resolution: + { + integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==, + } + '@types/minimist@1.2.5': resolution: { @@ -2486,6 +2521,13 @@ packages: react: '>=16.9.0' react-dom: '>=16.9.0' + antlr4@4.13.1: + resolution: + { + integrity: sha512-kiXTspaRYvnIArgE97z5YVVf/cDVQABr3abFRR6mE7yesLMkgu4ujuyV/sgxafQ8wgve0DJQUJ38Z8tkgA2izA==, + } + engines: { node: '>=16' } + anymatch@3.1.3: resolution: { @@ -5962,6 +6004,12 @@ packages: } engines: { node: '>= 0.10' } + parsimmon@1.18.1: + resolution: + { + integrity: sha512-u7p959wLfGAhJpSDJVYXoyMCXWYwHia78HhRBWqk7AIbxdmlrfdp5wX0l3xv/iTSH5HvhN9K7o26hwwpgS5Nmw==, + } + pascal-case@3.1.2: resolution: { @@ -6080,6 +6128,13 @@ packages: } engines: { node: '>= 6' } + pluralize@8.0.0: + resolution: + { + integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==, + } + engines: { node: '>=4' } + point-in-polygon@1.1.0: resolution: { @@ -9209,6 +9264,18 @@ snapshots: '@ctrl/tinycolor@3.6.1': {} + '@dbml/core@3.4.3': + dependencies: + '@dbml/parse': 3.4.3(lodash@4.17.21) + antlr4: 4.13.1 + lodash: 4.17.21 + parsimmon: 1.18.1 + pluralize: 8.0.0 + + '@dbml/parse@3.4.3(lodash@4.17.21)': + dependencies: + lodash: 4.17.21 + '@dnd-kit/accessibility@3.1.0(react@18.1.0)': dependencies: react: 18.1.0 @@ -9833,6 +9900,12 @@ snapshots: '@types/json-schema@7.0.15': {} + '@types/lodash-es@4.17.12': + dependencies: + '@types/lodash': 4.17.0 + + '@types/lodash@4.17.0': {} + '@types/minimist@1.2.5': {} '@types/node@20.12.7': @@ -10532,6 +10605,8 @@ snapshots: - luxon - moment + antlr4@4.13.1: {} + anymatch@3.1.3: dependencies: normalize-path: 3.0.0 @@ -12846,6 +12921,8 @@ snapshots: parse-node-version@1.0.1: {} + parsimmon@1.18.1: {} + pascal-case@3.1.2: dependencies: no-case: 3.0.4 @@ -12909,6 +12986,8 @@ snapshots: pirates@4.0.6: {} + pluralize@8.0.0: {} + point-in-polygon@1.1.0: {} possible-typed-array-names@1.0.0: {} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4b681e2..036a14b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,12 @@ import registerER from '@/nodes/er'; import { Graph, Node } from '@antv/x6'; import { register } from '@antv/x6-react-shape'; +import { Parser } from '@dbml/core'; import { Col, Dropdown, Row, theme } from 'antd'; +import { debounce } from 'lodash-es'; import { useEffect, useRef, useState } from 'react'; import MonacoEditor from 'react-monaco-editor'; + import './index.less'; const CustomComponent = ({ node }: { node: Node }) => { @@ -276,6 +279,7 @@ export default () => { }`; const [code, setCode] = useState(initCode); const containerRef = useRef(null); + const parser = new Parser(); useEffect(() => { registerER(); @@ -299,8 +303,10 @@ export default () => { // onchange const onChange = (newValue: any, e: any) => { - console.log('onChange', newValue, e); + const database = parser.parse(newValue, 'dbmlv2'); + console.log(database); }; + const debouncedOnChange = debounce(onChange, 500); return ( @@ -314,8 +320,11 @@ export default () => { value={code} options={{ selectOnLineNumbers: true, + minimap: { + enabled: false, + }, }} - onChange={onChange} + onChange={debouncedOnChange} editorDidMount={editorDidMount} />