From c34d4750297604e5ddc0d2113103a134e2537c9a Mon Sep 17 00:00:00 2001 From: Tei Yuan Wei Date: Mon, 21 Oct 2024 16:22:35 +0800 Subject: [PATCH] update ui and fix ddb files loading logic --- src/App.jsx | 4 +- src/components/EditorHeader/ControlPanel.jsx | 39 ++---- .../EditorHeader/LayoutDropdown.jsx | 8 -- src/components/Workspace.jsx | 119 +----------------- src/context/LayoutContext.jsx | 2 +- src/data/db.js | 19 +-- src/data/usercode.js | 2 +- src/main.jsx | 2 - 8 files changed, 27 insertions(+), 168 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 65aebc6..3121b9a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,7 +5,6 @@ import Survey from "./pages/Survey"; import BugReport from "./pages/BugReport"; import Shortcuts from "./pages/Shortcuts"; import Templates from "./pages/Templates"; -import LandingPage from "./pages/LandingPage"; import SettingsContextProvider from "./context/SettingsContext"; import { useSettings } from "./hooks"; import NotFound from "./pages/NotFound"; @@ -16,9 +15,8 @@ export default function App() { - } /> diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx index 593e69d..2c881a0 100644 --- a/src/components/EditorHeader/ControlPanel.jsx +++ b/src/components/EditorHeader/ControlPanel.jsx @@ -3,8 +3,6 @@ import { IconCaretdown, IconChevronRight, IconChevronLeft, - IconChevronUp, - IconChevronDown, IconSaveStroked, IconUndo, IconRedo, @@ -118,8 +116,6 @@ export default function ControlPanel({ const { setGistId } = useContext(IdContext); const navigate = useNavigate(); - const invertLayout = (component) => - setLayout((prev) => ({ ...prev, [component]: !prev[component] })); const undo = () => { if (undoStack.length === 0) return; @@ -776,7 +772,7 @@ export default function ControlPanel({ .delete(diagramId) .then(() => { setDiagramId(0); - setTitle("Untitled diagram"); + setTitle("user-diagram"); setTables([]); setRelationships([]); setAreas([]); @@ -1563,31 +1559,18 @@ export default function ControlPanel({ - - - - - + {getState()} + ); } diff --git a/src/components/EditorHeader/LayoutDropdown.jsx b/src/components/EditorHeader/LayoutDropdown.jsx index 367c49c..e6f7b4e 100644 --- a/src/components/EditorHeader/LayoutDropdown.jsx +++ b/src/components/EditorHeader/LayoutDropdown.jsx @@ -27,14 +27,6 @@ export default function LayoutDropdown() { }} render={ - :
- } - onClick={() => invertLayout("header")} - > - {t("header")} - :
diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index ce9a4f6..94bb5b4 100644 --- a/src/components/Workspace.jsx +++ b/src/components/Workspace.jsx @@ -32,7 +32,7 @@ export default function WorkSpace() { const [id, setId] = useState(0); const [gistId, setGistId] = useState(""); const [loadedFromGistId, setLoadedFromGistId] = useState(""); - const [title, setTitle] = useState("Untitled Diagram"); + const [title, setTitle] = useState("user-diagram"); const [resize, setResize] = useState(false); const [width, setWidth] = useState(340); const [lastSaved, setLastSaved] = useState(""); @@ -203,121 +203,8 @@ export default function WorkSpace() { }); }; - const loadDiagram = async (id) => { - await db.diagrams - .get(id) - .then((diagram) => { - if (diagram) { - if (diagram.database) { - setDatabase(diagram.database); - } else { - setDatabase(DB.GENERIC); - } - setId(diagram.id); - setGistId(diagram.gistId); - setLoadedFromGistId(diagram.loadedFromGistId); - setTitle(diagram.name); - setTables(diagram.tables); - setRelationships(diagram.references); - setAreas(diagram.areas); - setNotes(diagram.notes); - setTasks(diagram.todos ?? []); - setTransform({ - pan: diagram.pan, - zoom: diagram.zoom, - }); - setUndoStack([]); - setRedoStack([]); - if (databases[database].hasTypes) { - setTypes(diagram.types ?? []); - } - if (databases[database].hasEnums) { - setEnums(diagram.enums ?? []); - } - window.name = `d ${diagram.id}`; - } else { - window.name = ""; - } - }) - .catch((error) => { - console.log(error); - }); - }; - - const loadTemplate = async (id) => { - await db.templates - .get(id) - .then((diagram) => { - if (diagram) { - if (diagram.database) { - setDatabase(diagram.database); - } else { - setDatabase(DB.GENERIC); - } - setId(diagram.id); - setTitle(diagram.title); - setTables(diagram.tables); - setRelationships(diagram.relationships); - setAreas(diagram.subjectAreas); - setTasks(diagram.todos ?? []); - setNotes(diagram.notes); - setTransform({ - zoom: 1, - pan: { x: 0, y: 0 }, - }); - setUndoStack([]); - setRedoStack([]); - if (databases[database].hasTypes) { - setTypes(diagram.types ?? []); - } - if (databases[database].hasEnums) { - setEnums(diagram.enums ?? []); - } - } else { - if (selectedDb === "") setShowSelectDbModal(true); - } - }) - .catch((error) => { - console.log(error); - if (selectedDb === "") setShowSelectDbModal(true); - }); - }; - - if (window.name === "") { - loadLatestDiagram(); - } else { - const name = window.name.split(" "); - const op = name[0]; - const id = parseInt(name[1]); - switch (op) { - case "d": { - loadDiagram(id); - break; - } - case "t": - case "lt": { - loadTemplate(id); - break; - } - default: - break; - } - } - }, [ - setTransform, - setRedoStack, - setUndoStack, - setRelationships, - setTables, - setAreas, - setNotes, - setTypes, - setTasks, - setDatabase, - database, - setEnums, - selectedDb, - ]); + loadLatestDiagram(); + }, [setTransform, setRelationships, setTables, setAreas, setNotes, setTypes, setTasks, setDatabase, database, setEnums, selectedDb]); const loadFromGist = useCallback( async (shareId) => { diff --git a/src/context/LayoutContext.jsx b/src/context/LayoutContext.jsx index cfb4836..66c7807 100644 --- a/src/context/LayoutContext.jsx +++ b/src/context/LayoutContext.jsx @@ -4,7 +4,7 @@ export const LayoutContext = createContext(null); export default function LayoutContextProvider({ children }) { const [layout, setLayout] = useState({ - header: true, + header: false, sidebar: true, issues: true, toolbar: true, diff --git a/src/data/db.js b/src/data/db.js index f0cf143..fa6a7cd 100644 --- a/src/data/db.js +++ b/src/data/db.js @@ -47,31 +47,32 @@ const debouncedChangesHandler = debounce(async (changes) => { handleDiagramChanges(changes.filter(c => c.table === "diagrams")) }, 1500); -const handleDiagramChanges = (diagramChanges) => { - diagramChanges.forEach(({ type, obj, oldObj }) => { - const ddbFile = diagramToDdbFile(obj); +const handleDiagramChanges = async (diagramChanges) => { + for (let index = 0; index < diagramChanges.length; index++) { + const { type, obj, oldObj } = diagramChanges[index]; + const ddbFile = obj ? diagramToDdbFile(obj) : null; + const oldDdbFile = oldObj ? diagramToDdbFile(oldObj) : null; switch (type) { case 1: - writeDdbFiles([ddbFile]); + await writeDdbFiles([ddbFile]); break; case 2: if (oldObj && obj.id === oldObj.id && obj.name !== oldObj.name) { - const oldDdbFile = diagramToDdbFile(oldObj); - deleteDdbFiles([oldDdbFile]); + await deleteDdbFiles([oldDdbFile]); } - writeDdbFiles([ddbFile]); + await writeDdbFiles([ddbFile]); break; case 3: - deleteDdbFiles([ddbFile]); + await deleteDdbFiles([oldDdbFile]); break; default: break; } - }) + } } db.on('changes', debouncedChangesHandler) diff --git a/src/data/usercode.js b/src/data/usercode.js index 706bb0f..c542fee 100644 --- a/src/data/usercode.js +++ b/src/data/usercode.js @@ -36,7 +36,7 @@ export function diagramToDdbFile(diagram) { export function ddbFileToDiagram(ddb) { const { database = DB.GENERIC, - title = "Untitled Diagram", + title = "user-diagram", tables, date, relationships, diff --git a/src/main.jsx b/src/main.jsx index 1e8888d..f5e198a 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,6 +1,5 @@ import ReactDOM from "react-dom/client"; import { LocaleProvider } from "@douyinfe/semi-ui"; -import { Analytics } from "@vercel/analytics/react"; import App from "./App.jsx"; import en_US from "@douyinfe/semi-ui/lib/es/locale/source/en_US"; import "./index.css"; @@ -10,6 +9,5 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - , );