From defe0679208f74027db09120ff6794d56bfe23bb Mon Sep 17 00:00:00 2001 From: XC <603550500@qq.com> Date: Wed, 4 Dec 2024 15:40:18 +0800 Subject: [PATCH 1/4] Detach SelectDbModal components to avoid useless rendering - add locales zh: pick_db generic generic_description --- src/components/Modal/SelectDbModal.jsx | 58 ++++++++++++++++++ src/components/Workspace.jsx | 81 +++++++------------------- src/context/DiagramContext.jsx | 2 +- src/i18n/locales/zh.js | 3 + 4 files changed, 83 insertions(+), 61 deletions(-) create mode 100644 src/components/Modal/SelectDbModal.jsx diff --git a/src/components/Modal/SelectDbModal.jsx b/src/components/Modal/SelectDbModal.jsx new file mode 100644 index 00000000..9972e41d --- /dev/null +++ b/src/components/Modal/SelectDbModal.jsx @@ -0,0 +1,58 @@ +import { memo, useState } from "react"; +import { Modal } from "@douyinfe/semi-ui"; +import { useTranslation } from "react-i18next"; +import { useSettings } from "../../hooks"; +import { databases } from "../../data/databases"; + +const SelectDbModal = (props) => { + const { showSelectDbModal, onOk } = props; + const { t } = useTranslation(); + const { settings } = useSettings(); + const [selectedDb, setSelectedDb] = useState(""); + if (!showSelectDbModal) return null; + return ( + { + setSelectedDb(selectedDb); + onOk(selectedDb); + }} + okButtonProps={{ disabled: selectedDb === "" }} + > +
+ {Object.values(databases).map((x) => ( +
setSelectedDb(x.label)} + className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${ + settings.mode === "dark" + ? "bg-zinc-700 hover:bg-zinc-600" + : "bg-zinc-100 hover:bg-zinc-200" + } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`} + > +
{x.name}
+ {x.image && ( + + )} +
{x.description}
+
+ ))} +
+ + ); +}; + +export default memo(SelectDbModal); diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index 1797851b..0e32d298 100644 --- a/src/components/Workspace.jsx +++ b/src/components/Workspace.jsx @@ -19,7 +19,7 @@ import { useEnums, } from "../hooks"; import FloatingControls from "./FloatingControls"; -import { Modal } from "@douyinfe/semi-ui"; +import SelectDbModal from "./Modal/SelectDbModal"; import { useTranslation } from "react-i18next"; import { databases } from "../data/databases"; import { isRtl } from "../i18n/utils/rtl"; @@ -37,7 +37,6 @@ export default function WorkSpace() { const [width, setWidth] = useState(340); const [lastSaved, setLastSaved] = useState(""); const [showSelectDbModal, setShowSelectDbModal] = useState(false); - const [selectedDb, setSelectedDb] = useState(""); const { layout } = useLayout(); const { settings } = useSettings(); const { types, setTypes } = useTypes(); @@ -56,7 +55,7 @@ export default function WorkSpace() { setDatabase, } = useDiagram(); const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo(); - const { t, i18n } = useTranslation(); + const { i18n } = useTranslation(); let [searchParams, setSearchParams] = useSearchParams(); const handleResize = (e) => { if (!resize) return; @@ -163,8 +162,8 @@ export default function WorkSpace() { loadedFromGistId, saveState ]); - const load = useCallback(async () => { + let initDatabase = database; const loadLatestDiagram = async () => { await db.diagrams .orderBy("lastModified") @@ -195,24 +194,20 @@ export default function WorkSpace() { window.name = `d ${d.id}`; } else { window.name = ""; - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); } }) .catch((error) => { console.log(error); }); }; - const loadDiagram = async (id) => { await db.diagrams .get(id) .then((diagram) => { if (diagram) { - if (diagram.database) { - setDatabase(diagram.database); - } else { - setDatabase(DB.GENERIC); - } + initDatabase = diagram.database || DB.GENERIC; + setDatabase(initDatabase); setId(diagram.id); setGistId(diagram.gistId); setLoadedFromGistId(diagram.loadedFromGistId); @@ -228,10 +223,10 @@ export default function WorkSpace() { }); setUndoStack([]); setRedoStack([]); - if (databases[database].hasTypes) { + if (databases[initDatabase].hasTypes) { setTypes(diagram.types ?? []); } - if (databases[database].hasEnums) { + if (databases[initDatabase].hasEnums) { setEnums(diagram.enums ?? []); } window.name = `d ${diagram.id}`; @@ -267,19 +262,19 @@ export default function WorkSpace() { }); setUndoStack([]); setRedoStack([]); - if (databases[database].hasTypes) { + if (databases[initDatabase].hasTypes) { setTypes(diagram.types ?? []); } - if (databases[database].hasEnums) { + if (databases[initDatabase].hasEnums) { setEnums(diagram.enums ?? []); } } else { - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); } }) .catch((error) => { console.log(error); - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); }); }; @@ -365,7 +360,6 @@ export default function WorkSpace() { setDatabase, database, setEnums, - selectedDb, setSaveState, searchParams, ]); @@ -409,6 +403,11 @@ export default function WorkSpace() { load(); }, [load]); + const handleSelectedDb = useCallback((selectedDb) => { + if (selectedDb === "") return; + setDatabase(selectedDb); + setShowSelectDbModal(false); + }, []); return (
@@ -447,48 +446,10 @@ export default function WorkSpace() { )}
- { - if (selectedDb === "") return; - setDatabase(selectedDb); - setShowSelectDbModal(false); - }} - okButtonProps={{ disabled: selectedDb === "" }} - > -
- {Object.values(databases).map((x) => ( -
setSelectedDb(x.label)} - className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${ - settings.mode === "dark" - ? "bg-zinc-700 hover:bg-zinc-600" - : "bg-zinc-100 hover:bg-zinc-200" - } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`} - > -
{x.name}
- {x.image && ( - - )} -
{x.description}
-
- ))} -
- + ); } diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx index ffa49970..d37702c5 100644 --- a/src/context/DiagramContext.jsx +++ b/src/context/DiagramContext.jsx @@ -8,7 +8,7 @@ export const DiagramContext = createContext(null); export default function DiagramContextProvider({ children }) { const { t } = useTranslation(); - const [database, setDatabase] = useState(DB.GENERIC); + const [database, setDatabase] = useState(""); const [tables, setTables] = useState([]); const [relationships, setRelationships] = useState([]); const { transform } = useTransform(); diff --git a/src/i18n/locales/zh.js b/src/i18n/locales/zh.js index 9c8fb810..2e4a5c99 100644 --- a/src/i18n/locales/zh.js +++ b/src/i18n/locales/zh.js @@ -207,6 +207,9 @@ const zh = { edit_relationship: "{{extra}} 编辑关系 {{refName}}", delete_relationship: "删除关系 {{refName}}", not_found: "未找到", + pick_db: "选择数据库", + generic: "通用的", + generic_description: "通用的图表可以导出为任何SQL风格，但支持的数据类型较少。", }, }; From 66264a44363af030ed869cc7bcbca3d884e363f6 Mon Sep 17 00:00:00 2001 From: XC <603550500@qq.com> Date: Wed, 4 Dec 2024 15:59:28 +0800 Subject: [PATCH 2/4] Fix eslint warnings --- src/components/Modal/SelectDbModal.jsx | 6 ++---- src/components/Workspace.jsx | 15 +++++++++------ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Modal/SelectDbModal.jsx b/src/components/Modal/SelectDbModal.jsx index 9972e41d..6d6b1610 100644 --- a/src/components/Modal/SelectDbModal.jsx +++ b/src/components/Modal/SelectDbModal.jsx @@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"; import { useSettings } from "../../hooks"; import { databases } from "../../data/databases"; -const SelectDbModal = (props) => { +export default memo(function SelectDbModal(props) { const { showSelectDbModal, onOk } = props; const { t } = useTranslation(); const { settings } = useSettings(); @@ -53,6 +53,4 @@ const SelectDbModal = (props) => { ); -}; - -export default memo(SelectDbModal); +}); diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index 0e32d298..bc4711f8 100644 --- a/src/components/Workspace.jsx +++ b/src/components/Workspace.jsx @@ -160,7 +160,7 @@ export default function WorkSpace() { enums, gistId, loadedFromGistId, - saveState + saveState, ]); const load = useCallback(async () => { let initDatabase = database; @@ -403,11 +403,14 @@ export default function WorkSpace() { load(); }, [load]); - const handleSelectedDb = useCallback((selectedDb) => { - if (selectedDb === "") return; - setDatabase(selectedDb); - setShowSelectDbModal(false); - }, []); + const handleSelectedDb = useCallback( + (selectedDb) => { + if (selectedDb === "") return; + setDatabase(selectedDb); + setShowSelectDbModal(false); + }, + [setDatabase, setShowSelectDbModal], + ); return (
From 4f601416046b601d4f5f207b8baf304bb5997821 Mon Sep 17 00:00:00 2001 From: XC <603550500@qq.com> Date: Fri, 13 Dec 2024 17:09:58 +0800 Subject: [PATCH 3/4] Fix didPan() avoid automatic saving when clicked --- src/components/EditorCanvas/Canvas.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/EditorCanvas/Canvas.jsx b/src/components/EditorCanvas/Canvas.jsx index 2a675167..78433e1f 100644 --- a/src/components/EditorCanvas/Canvas.jsx +++ b/src/components/EditorCanvas/Canvas.jsx @@ -284,7 +284,7 @@ export default function Canvas() { }; const didPan = () => - !(transform.pan.x === panning.x && transform.pan.y === panning.y); + !(transform.pan.x === panning.panStart.x && transform.pan.y === panning.panStart.y); const getMovedElementDetails = () => { switch (dragging.element) { @@ -345,7 +345,7 @@ export default function Canvas() { ...prev, { action: Action.PAN, - undo: { x: panning.x, y: panning.y }, + undo: { x: panning.panStart.x, y: panning.panStart.y }, redo: transform.pan, message: t("move_element", { coords: `(${transform?.pan.x}, ${transform?.pan.y})`, From 180bd2ad5b135c9c0ef867b0781f2c161a2864e0 Mon Sep 17 00:00:00 2001 From: XC <603550500@qq.com> Date: Wed, 18 Dec 2024 16:47:34 +0800 Subject: [PATCH 4/4] Fix "unsigned" capitalization - add local zh zh-tw: unsigned --- src/components/EditorSidePanel/TablesTab/FieldDetails.jsx | 2 +- src/i18n/locales/zh-tw.js | 1 + src/i18n/locales/zh.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx index f8445136..ef332f73 100644 --- a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx +++ b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx @@ -302,7 +302,7 @@ export default function FieldDetails({ data, tid, index }) { {databases[database].hasUnsignedTypes && dbToTypes[database][data.type].signed && (
-
{t("Unsigned")}
+
{t("unsigned")}