From d76a9e9ff8935bcfb64cbfebe9a1ced70447e1c4 Mon Sep 17 00:00:00 2001 From: 1ilit <1ilit@proton.me> Date: Tue, 28 Jan 2025 18:45:51 +0400 Subject: [PATCH] Import tables from dbml --- src/components/EditorHeader/ControlPanel.jsx | 2 +- .../EditorSidePanel/DBMLEditor/DBMLEditor.jsx | 16 ++-- .../EditorSidePanel/DBMLEditor/styles.css | 12 +++ src/components/EditorSidePanel/SidePanel.jsx | 22 +----- src/i18n/locales/en.js | 3 - src/index.css | 2 +- src/utils/arrangeTables.js | 27 +++++++ src/utils/dbml/fromDBML.js | 78 +++++++++++++++++++ src/utils/importSQL/index.js | 28 +------ 9 files changed, 131 insertions(+), 59 deletions(-) create mode 100644 src/utils/arrangeTables.js create mode 100644 src/utils/dbml/fromDBML.js diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index be12647..7c6b7c4 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -1444,7 +1444,7 @@ export default function ControlPanel({ function toolbar() { return (
diff --git a/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx b/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx index 42ddf0d..0f7f986 100644 --- a/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx +++ b/src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx @@ -2,28 +2,28 @@ import { useEffect, useState } from "react"; import CodeMirror from "@uiw/react-codemirror"; import { vscodeDark, vscodeLight } from "@uiw/codemirror-theme-vscode"; import { languageExtension } from "../../../data/editorExtensions"; -import { useSettings } from "../../../hooks"; +import { useDiagram, useSettings } from "../../../hooks"; import { useDebounceValue } from "usehooks-ts"; -import { Parser } from "@dbml/core"; import "./styles.css"; - -const parser = new Parser(); +import { fromDBML } from "../../../utils/dbml/fromDBML"; export default function DBMLEditor() { const { settings } = useSettings(); + const { setTables } = useDiagram(); const [value, setValue] = useState(""); const [debouncedValue] = useDebounceValue(value, 1000); useEffect(() => { if (debouncedValue) { try { - const database = parser.parse(debouncedValue, "dbml"); - console.log(database); + const { tables } = fromDBML(debouncedValue); + console.log(tables); + setTables(tables); } catch (e) { - console.log(e); + console.log("error: ", e); } } - }, [debouncedValue]); + }, [debouncedValue, setTables]); return (
diff --git a/src/components/EditorSidePanel/DBMLEditor/styles.css b/src/components/EditorSidePanel/DBMLEditor/styles.css index 521ade3..50dc37b 100644 --- a/src/components/EditorSidePanel/DBMLEditor/styles.css +++ b/src/components/EditorSidePanel/DBMLEditor/styles.css @@ -9,3 +9,15 @@ .ͼ1o .cm-gutters { background-color: var(--semi-color-bg-0); } + +.ͼ1.cm-focused { + outline: none; +} + +.ͼ16 { + background-color: #1e1e1e00; +} + +.ͼ16 .cm-gutters { + background-color: rgba(var(--semi-grey-1), 0.3); +} \ No newline at end of file diff --git a/src/components/EditorSidePanel/SidePanel.jsx b/src/components/EditorSidePanel/SidePanel.jsx index 77cb04f..65d5c52 100644 --- a/src/components/EditorSidePanel/SidePanel.jsx +++ b/src/components/EditorSidePanel/SidePanel.jsx @@ -92,31 +92,12 @@ export default function SidePanel({ width, resize, setResize }) { style={{ width: `${width}px` }} >
-<<<<<<< HEAD - - setSelectedElement((prev) => ({ ...prev, currentTab: key })) - } - collapsible - tabBarStyle={{ direction: "ltr" }} - > - {tabList.length && - tabList.map((tab) => ( - -
{tab.component}
- - ))} - -======= {layout.dbmlEditor ? ( setSelectedElement((prev) => ({ ...prev, currentTab: key })) } @@ -137,7 +118,6 @@ export default function SidePanel({ width, resize, setResize }) { ) : ( )} ->>>>>>> feb41e8 (Add dbml editor to sidepanel)
{layout.issues && (
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js index 215fc13..397fbbd 100644 --- a/src/i18n/locales/en.js +++ b/src/i18n/locales/en.js @@ -243,11 +243,8 @@ const en = { failed_to_load: "Failed to load. Make sure the link is correct.", share_info: "* Sharing this link will not create a live real-time collaboration session.", -<<<<<<< HEAD show_relationship_labels: "Show relationship labels", -======= dbml_editor: "DBML editor", ->>>>>>> feb41e8 (Add dbml editor to sidepanel) }, }; diff --git a/src/index.css b/src/index.css index 5bbd290..af935c8 100644 --- a/src/index.css +++ b/src/index.css @@ -105,7 +105,7 @@ } .toolbar-theme { - background-color: rgba(var(--semi-grey-1), 1); + background-color: rgba(var(--semi-grey-1), 0.7); } .hover-1:hover { diff --git a/src/utils/arrangeTables.js b/src/utils/arrangeTables.js new file mode 100644 index 0000000..a509907 --- /dev/null +++ b/src/utils/arrangeTables.js @@ -0,0 +1,27 @@ +import { + tableColorStripHeight, + tableFieldHeight, + tableHeaderHeight, +} from "../data/constants"; + +export function arrangeTables(diagram) { + let maxHeight = -1; + const tableWidth = 200; + const gapX = 54; + const gapY = 40; + diagram.tables.forEach((table, i) => { + if (i < diagram.tables.length / 2) { + table.x = i * tableWidth + (i + 1) * gapX; + table.y = gapY; + const height = + table.fields.length * tableFieldHeight + + tableHeaderHeight + + tableColorStripHeight; + maxHeight = Math.max(height, maxHeight); + } else { + const index = diagram.tables.length - i - 1; + table.x = index * tableWidth + (index + 1) * gapX; + table.y = maxHeight + 2 * gapY; + } + }); +} diff --git a/src/utils/dbml/fromDBML.js b/src/utils/dbml/fromDBML.js new file mode 100644 index 0000000..49c11d3 --- /dev/null +++ b/src/utils/dbml/fromDBML.js @@ -0,0 +1,78 @@ +import { Parser } from "@dbml/core"; +import { arrangeTables } from "../arrangeTables"; + +const parser = new Parser(); + +/** + +{ + "id": 0, + "name": "some_table", + "x": 812.9083754222163, + "y": 400.3451698134321, + "fields": [ + { + "name": "id", + "type": "INT", + "default": "", + "check": "", + "primary": true, + "unique": true, + "notNull": true, + "increment": true, + "comment": "", + "id": 0 + } + ], + "comment": "", + "indices": [], + "color": "#175e7a", + "key": 1737222753837 + } + */ + +export function fromDBML(src) { + const ast = parser.parse(src, "dbml"); + + const tables = []; + + for (const schema of ast.schemas) { + for (const table of schema.tables) { + let parsedTable = {}; + parsedTable.id = tables.length; + parsedTable.name = table.name; + parsedTable.comment = ""; + parsedTable.color = "#175e7a"; + parsedTable.fields = []; + parsedTable.indices = []; + + for (const column of table.fields) { + const field = {}; + field.id = parsedTable.fields.length; + field.name = column.name; + field.type = column.type.type_name.toUpperCase(); + field.default = column.dbdefault ?? ""; + field.check = ""; + field.primary = !!column.pk; + field.unique = true; + field.notNull = !!column.not_null; + field.increment = !!column.increment; + field.comment = column.note ?? ""; + + parsedTable.fields.push(field); + } + + console.log(table); + + tables.push(parsedTable); + } + } + + console.log(ast); + + const diagram = { tables }; + + arrangeTables(diagram); + + return diagram; +} diff --git a/src/utils/importSQL/index.js b/src/utils/importSQL/index.js index 30974ec..fb849e4 100644 --- a/src/utils/importSQL/index.js +++ b/src/utils/importSQL/index.js @@ -1,9 +1,5 @@ -import { - DB, - tableColorStripHeight, - tableFieldHeight, - tableHeaderHeight, -} from "../../data/constants"; +import { DB } from "../../data/constants"; +import { arrangeTables } from "../arrangeTables"; import { fromMariaDB } from "./mariadb"; import { fromMSSQL } from "./mssql"; import { fromMySQL } from "./mysql"; @@ -33,25 +29,7 @@ export function importSQL(ast, toDb = DB.MYSQL, diagramDb = DB.GENERIC) { break; } - let maxHeight = -1; - const tableWidth = 200; - const gapX = 54; - const gapY = 40; - diagram.tables.forEach((table, i) => { - if (i < diagram.tables.length / 2) { - table.x = i * tableWidth + (i + 1) * gapX; - table.y = gapY; - const height = - table.fields.length * tableFieldHeight + - tableHeaderHeight + - tableColorStripHeight; - maxHeight = Math.max(height, maxHeight); - } else { - const index = diagram.tables.length - i - 1; - table.x = index * tableWidth + (index + 1) * gapX; - table.y = maxHeight + 2 * gapY; - } - }); + arrangeTables(diagram); return diagram; }