mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-08-29 02:25:26 +00:00
update stuff idek
This commit is contained in:
@@ -6,7 +6,11 @@ import { IconCopy } from "@douyinfe/semi-icons";
|
||||
import { setUpDBML } from "./setUpDBML";
|
||||
import "./styles.css";
|
||||
|
||||
export default function CodeEditor({ showCopyButton, ...props }) {
|
||||
export default function CodeEditor({
|
||||
showCopyButton,
|
||||
extraControls,
|
||||
...props
|
||||
}) {
|
||||
const { settings } = useSettings();
|
||||
const { database } = useDiagram();
|
||||
const { t } = useTranslation();
|
||||
@@ -36,11 +40,14 @@ export default function CodeEditor({ showCopyButton, ...props }) {
|
||||
onMount={handleEditorMount}
|
||||
/>
|
||||
{showCopyButton && (
|
||||
<Button
|
||||
className="absolute right-6 bottom-2 z-10"
|
||||
icon={<IconCopy />}
|
||||
onClick={copyCode}
|
||||
/>
|
||||
<div className="absolute right-6 bottom-2 z-10 space-y-2">
|
||||
<div>{extraControls}</div>
|
||||
<Button
|
||||
icon={<IconCopy />}
|
||||
onClick={copyCode}
|
||||
className="inline-block"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
@@ -1221,7 +1221,7 @@ export default function ControlPanel({
|
||||
function: () =>
|
||||
setLayout((prev) => ({ ...prev, issues: !prev.issues })),
|
||||
},
|
||||
dbml_editor: {
|
||||
dbml_view: {
|
||||
state: layout.dbmlEditor ? (
|
||||
<i className="bi bi-toggle-off" />
|
||||
) : (
|
||||
|
43
src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx
Normal file
43
src/components/EditorSidePanel/DBMLEditor/DBMLEditor.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDiagram, useEnums, useLayout } from "../../../hooks";
|
||||
import { toDBML } from "../../../utils/exportAs/dbml";
|
||||
import CodeEditor from "../../CodeEditor";
|
||||
import { Button, Tooltip } from "@douyinfe/semi-ui";
|
||||
import { IconTemplate } from "@douyinfe/semi-icons";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function DBMLEditor() {
|
||||
const { tables: currentTables, relationships } = useDiagram();
|
||||
const diagram = useDiagram();
|
||||
const { enums } = useEnums();
|
||||
const [value, setValue] = useState(() => toDBML({ ...diagram, enums }));
|
||||
const { setLayout } = useLayout();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const toggleDBMLEditor = () => {
|
||||
setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setValue(toDBML({ tables: currentTables, enums, relationships }));
|
||||
}, [currentTables, enums, relationships]);
|
||||
|
||||
return (
|
||||
<CodeEditor
|
||||
showCopyButton
|
||||
value={value}
|
||||
language="dbml"
|
||||
onChange={setValue}
|
||||
height="100%"
|
||||
options={{
|
||||
readOnly: true,
|
||||
minimap: { enabled: false },
|
||||
}}
|
||||
extraControls={
|
||||
<Tooltip content={t("tab_view")}>
|
||||
<Button icon={<IconTemplate />} onClick={toggleDBMLEditor} />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
@@ -1,72 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useDiagram, useEnums, useTransform } from "../../../hooks";
|
||||
import { useDebounceValue } from "usehooks-ts";
|
||||
import { fromDBML } from "../../../utils/importFrom/dbml";
|
||||
import { toDBML } from "../../../utils/exportAs/dbml";
|
||||
import CodeEditor from "../../CodeEditor";
|
||||
|
||||
export default function DBMLEditor({ setIssues }) {
|
||||
const { tables: currentTables, setTables } = useDiagram();
|
||||
const diagram = useDiagram();
|
||||
const { enums } = useEnums();
|
||||
const { transform } = useTransform();
|
||||
const [value, setValue] = useState(() => toDBML({ ...diagram, enums }));
|
||||
const [debouncedValue] = useDebounceValue(value, 2000);
|
||||
|
||||
useEffect(() => {
|
||||
const updateDiagram = () => {
|
||||
try {
|
||||
const currentDBML = toDBML({ ...diagram, enums });
|
||||
|
||||
if (debouncedValue && debouncedValue !== currentDBML) {
|
||||
const { tables: newTables } = fromDBML(debouncedValue);
|
||||
|
||||
const mergedTables = newTables
|
||||
.map((newTable) => {
|
||||
const existingTable = currentTables.find(
|
||||
(t) => t.id === newTable.id || t.name === newTable.name,
|
||||
);
|
||||
|
||||
return {
|
||||
...newTable,
|
||||
...(existingTable
|
||||
? {
|
||||
x: existingTable.x,
|
||||
y: existingTable.y,
|
||||
color: existingTable.color,
|
||||
id: existingTable.id,
|
||||
}
|
||||
: {
|
||||
x: transform.pan.x,
|
||||
y: transform.pan.y,
|
||||
}),
|
||||
};
|
||||
})
|
||||
.map((x, i) => ({ ...x, id: i }));
|
||||
|
||||
setTables(mergedTables);
|
||||
}
|
||||
} catch (e) {
|
||||
setIssues((prev) => ({
|
||||
...prev,
|
||||
dbml: e.diags?.map((x) => x.message) || [e.message],
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
updateDiagram();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [debouncedValue]);
|
||||
|
||||
return (
|
||||
<CodeEditor
|
||||
value={value}
|
||||
language="dbml"
|
||||
onChange={setValue}
|
||||
height="100%"
|
||||
options={{
|
||||
minimap: { enabled: false },
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
@@ -1,5 +1,6 @@
|
||||
import { Tabs, TabPane } from "@douyinfe/semi-ui";
|
||||
import { Tabs, TabPane, Button, Divider, Tooltip } from "@douyinfe/semi-ui";
|
||||
import { Tab } from "../../data/constants";
|
||||
import { IconCode } from "@douyinfe/semi-icons";
|
||||
import {
|
||||
useLayout,
|
||||
useSelect,
|
||||
@@ -21,10 +22,10 @@ import { databases } from "../../data/databases";
|
||||
import EnumsTab from "./EnumsTab/EnumsTab";
|
||||
import { isRtl } from "../../i18n/utils/rtl";
|
||||
import i18n from "../../i18n/i18n";
|
||||
import DBMLEditor from "./DBMLEditor";
|
||||
import DBMLEditor from "./DBMLEditor/DBMLEditor";
|
||||
|
||||
export default function SidePanel({ width, resize, setResize }) {
|
||||
const { layout } = useLayout();
|
||||
const { layout, setLayout } = useLayout();
|
||||
const { selectedElement, setSelectedElement } = useSelect();
|
||||
const { database, tablesCount, relationshipsCount } = useDiagram();
|
||||
const { areasCount } = useAreas();
|
||||
@@ -86,6 +87,10 @@ export default function SidePanel({ width, resize, setResize }) {
|
||||
notesCount,
|
||||
]);
|
||||
|
||||
const toggleDBMLEditor = () => {
|
||||
setLayout((prev) => ({ ...prev, dbmlEditor: !prev.dbmlEditor }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div
|
||||
@@ -106,6 +111,18 @@ export default function SidePanel({ width, resize, setResize }) {
|
||||
}
|
||||
collapsible
|
||||
tabBarStyle={{ direction: "ltr" }}
|
||||
tabBarExtraContent={
|
||||
<>
|
||||
<Divider layout="vertical" />
|
||||
<Tooltip content={t("dbml_view")} position="bottom">
|
||||
<Button
|
||||
onClick={toggleDBMLEditor}
|
||||
icon={<IconCode />}
|
||||
theme="borderless"
|
||||
/>
|
||||
</Tooltip>
|
||||
</>
|
||||
}
|
||||
>
|
||||
{tabList.length &&
|
||||
tabList.map((tab) => (
|
||||
|
@@ -251,7 +251,8 @@ const en = {
|
||||
bulk_update: "Bulk update",
|
||||
multiselect: "Multiselect",
|
||||
export_saved_data: "Export saved data",
|
||||
dbml_editor: "DBML editor",
|
||||
dbml_view: "DBML view",
|
||||
tab_view: "Tab view",
|
||||
},
|
||||
};
|
||||
|
||||
|
Reference in New Issue
Block a user