Skip to content

Commit

Permalink
feat: fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@alswl
alswl committed May 2, 2024
1 parent b3e7e0b commit 40f2962
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 264 deletions.
268 changes: 6 additions & 262 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,272 +1,14 @@
import registerER from '@/nodes/er';
import { Graph, Node } from '@antv/x6';
import { register } from '@antv/x6-react-shape';
import { Graph } from '@antv/x6';
import { Parser } from '@dbml/core';
import { Col, Dropdown, Row, theme } from 'antd';
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 './index.less';

const CustomComponent = ({ node }: { node: Node }) => {
const label = node.prop('label');
return (
<Dropdown
menu={{
items: [
{
key: 'copy',
label: '复制',
},
{
key: 'paste',
label: '粘贴',
},
{
key: 'delete',
label: '删除',
},
],
}}
trigger={['contextMenu']}
>
<div className="custom-react-node">{label}</div>
</Dropdown>
);
};

register({
shape: 'custom-react-node',
width: 800,
height: 600,
component: CustomComponent,
});

const data = [
{
id: '1',
shape: 'er-rect',
label: '学生',
width: 150,
height: 24,
position: {
x: 24,
y: 150,
},
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,
},
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 {
Expand All @@ -279,7 +21,7 @@ export default () => {
email varchar
}`;
const [code, setCode] = useState(initCode);
const [models, setModels] = useState(data);
const [models, setModels] = useState([]);
const containerRef = useRef(null);
const parser = new Parser();

Expand All @@ -300,7 +42,9 @@ export default () => {

// editorDidMount
const editorDidMount = (editor: any, monaco: any) => {
console.log('editorDidMount', editor);
const database = parser.parse(code, 'dbmlv2');
let models = parseDatabaseToER(database);
setModels(models);
};

// onchange
Expand Down
22 changes: 20 additions & 2 deletions src/parser/parser.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,13 +63,31 @@ function parseDatabaseToER(database: Database): any {
for (let i = 0; i < database.schemas.length; i++) {
for (let j = 0; j < database.schemas[i].tables.length; j++) {
const table = database.schemas[i].tables[j];
// handle fields
let fields: any[] = [];
for (let k = 0; k < table.fields.length; k++) {
const f = table.fields[k];
const field = {
id: `${i}-${j}-${k}`,
group: 'list',
attrs: {
portNameLabel: {
text: f.name,
},
portTypeLabel: {
text: f.type.type_name || 'unknown',
},
},
};
fields.push(field);
}
const model = {
id: '1',
id: `${i}-${j}`,
shape: 'er-rect',
label: table.name,
width: 150,
height: 24,
ports: [],
ports: fields,
};
models.push(model);
}
Expand Down

0 comments on commit 40f2962

Please sign in to comment.