Abstract SettingsContext out

src/App.jsx

@@ -4,39 +4,85 @@ import Survey from "./pages/Survey";
 import BugReport from "./pages/BugReport";
 import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect } from "react";
 import LandingPage from "./pages/LandingPage";
-import LayoutContextProvider from "./context/LayoutContext";
+import SettingsContextProvider from "./context/SettingsContext";
+import useSettings from "./hooks/useSettings";
 
-const Wrapper = ({ children }) => {
+function ThemedPage({ children }) {
+  const { setSettings } = useSettings();
+
+  useLayoutEffect(() => {
+    const theme = localStorage.getItem("theme");
+    if (theme === "dark") {
+      setSettings((prev) => ({ ...prev, mode: "dark" }));
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "dark");
+      }
+    } else {
+      setSettings((prev) => ({ ...prev, mode: "light" }));
+      const body = document.body;
+      if (body.hasAttribute("theme-mode")) {
+        body.setAttribute("theme-mode", "light");
+      }
+    }
+  }, [setSettings]);
+
+  return children;
+}
+
+function RestoreScroll() {
   const location = useLocation();
   useEffect(() => {
     window.scroll(0, 0);
   }, [location.pathname]);
-  return children;
+  return null;
-};
+}
 
 function App() {
   return (
-    <BrowserRouter>
+    <SettingsContextProvider>
-      <Wrapper>
+      <BrowserRouter>
+        <RestoreScroll />
         <Routes>
           <Route path="/" element={<LandingPage />} />
           <Route
             path="/editor"
             element={
-              <LayoutContextProvider>
+              <ThemedPage>
                 <Editor />
-              </LayoutContextProvider>
+              </ThemedPage>
+            }
+          />
+          <Route
+            path="/survey"
+            element={
+              <ThemedPage>
+                <Survey />
+              </ThemedPage>
+            }
+          />
+          <Route
+            path="/shortcuts"
+            element={
+              <ThemedPage>
+                <Shortcuts />
+              </ThemedPage>
+            }
+          />
+          <Route
+            path="/bug_report"
+            element={
+              <ThemedPage>
+                <BugReport />
+              </ThemedPage>
             }
           />
-          <Route path="/survey" element={<Survey />} />
-          <Route path="/shortcuts" element={<Shortcuts />} />
-          <Route path="/bug_report" element={<BugReport />} />
           <Route path="/templates" element={<Templates />} />
         </Routes>
-      </Wrapper>
+      </BrowserRouter>
-    </BrowserRouter>
+    </SettingsContextProvider>
   );
 }
 

src/components/Area.jsx

@@ -16,19 +16,19 @@ import {
 import {
   AreaContext,
   SelectContext,
-  SettingsContext,
   StateContext,
   TabContext,
   UndoRedoContext,
 } from "../pages/Editor";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function Area(props) {
   const [hovered, setHovered] = useState(false);
   const [editField, setEditField] = useState({});
   const { setState } = useContext(StateContext);
-  const {layout} = useLayout();
+  const { layout } = useLayout();
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { tab, setTab } = useContext(TabContext);
   const { updateArea, deleteArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);

src/components/Canvas.jsx

@@ -6,7 +6,6 @@ import Relationship from "./Relationship";
 import {
   AreaContext,
   NoteContext,
-  SettingsContext,
   TableContext,
   UndoRedoContext,
   SelectContext,
@@ -14,13 +13,14 @@ import {
 } from "../pages/Editor";
 import Note from "./Note";
 import { Toast } from "@douyinfe/semi-ui";
+import useSettings from "../hooks/useSettings";
 
 export default function Canvas() {
   const { tables, updateTable, relationships, addRelationship } =
     useContext(TableContext);
   const { areas, updateArea } = useContext(AreaContext);
   const { notes, updateNote } = useContext(NoteContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { transform, setTransform } = useContext(TransformContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);

src/components/ControlPanel.jsx

@@ -53,7 +53,6 @@ import {
   NoteContext,
   TransformContext,
   SelectContext,
-  SettingsContext,
   StateContext,
   TabContext,
   TableContext,
@@ -73,6 +72,7 @@ import { Parser } from "node-sql-parser";
 import Todo from "./Todo";
 import { Thumbnail } from "./Thumbnail";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function ControlPanel({
   diagramId,
@@ -124,7 +124,7 @@ export default function ControlPanel({
   const [data, setData] = useState(null);
   const { state, setState } = useContext(StateContext);
   const { layout, setLayout } = useLayout();
-  const { settings, setSettings } = useContext(SettingsContext);
+  const { settings, setSettings } = useSettings();
   const {
     relationships,
     tables,

src/components/Issues.jsx

@@ -1,10 +1,11 @@
 import { useContext, useState, useEffect } from "react";
 import { Collapse, Badge } from "@douyinfe/semi-ui";
-import { SettingsContext, TableContext, TypeContext } from "../pages/Editor";
+import { TableContext, TypeContext } from "../pages/Editor";
 import { validateDiagram, arrayIsEqual } from "../utils";
+import useSettings from "../hooks/useSettings";
 
 export default function Issues() {
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { types } = useContext(TypeContext);
   const { tables, relationships } = useContext(TableContext);
   const [issues, setIssues] = useState([]);

src/components/Relationship.jsx

@@ -1,11 +1,11 @@
-import { useContext, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { calcPath } from "../utils";
 import { Cardinality } from "../data/data";
-import { SettingsContext } from "../pages/Editor";
+import useSettings from "../hooks/useSettings";
 
 export default function Relationship(props) {
   const [hovered, setHovered] = useState(false);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const pathRef = useRef();
 
   let cardinalityStart = "1";

src/components/Sidebar.jsx

@@ -9,12 +9,12 @@ import { Tooltip, SideSheet, List, Badge } from "@douyinfe/semi-ui";
 import {
   BotMessageContext,
   MessageContext,
-  SettingsContext,
   UndoRedoContext,
 } from "../pages/Editor";
 import Todo from "./Todo";
 import Chat from "./Chat";
 import DrawBot from "./DrawBot";
+import useSettings from "../hooks/useSettings";
 
 export default function Sidebar() {
   const SidesheetType = {
@@ -27,7 +27,7 @@ export default function Sidebar() {
   };
   const { undoStack } = useContext(UndoRedoContext);
   const { messages } = useContext(MessageContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { botMessages } = useContext(BotMessageContext);
   const [sidesheet, setSidesheet] = useState(SidesheetType.NONE);
   const [seen, setSeen] = useState(0);

src/components/Table.jsx

@@ -33,7 +33,6 @@ import {
 } from "@douyinfe/semi-ui";
 import {
   SelectContext,
-  SettingsContext,
   TabContext,
   TableContext,
   TypeContext,
@@ -41,6 +40,7 @@ import {
 } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
 import useLayout from "../hooks/useLayout";
+import useSettings from "../hooks/useSettings";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
@@ -50,7 +50,7 @@ export default function Table(props) {
   const { deleteTable, updateTable, updateField, setRelationships } =
     useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);
-  const { settings } = useContext(SettingsContext);
+  const { settings } = useSettings();
   const { types } = useContext(TypeContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);

src/context/SettingsContext.jsx

@@ -0,0 +1,21 @@
+import { createContext, useState } from "react";
+
+export const SettingsContext = createContext(null);
+
+export default function SettingsContextProvider({ children }) {
+  const [settings, setSettings] = useState({
+    strictMode: false,
+    showFieldSummary: true,
+    showGrid: true,
+    mode: "light",
+    autosave: true,
+    panning: true,
+    showCardinality: true,
+  });
+
+  return (
+    <SettingsContext.Provider value={{ settings, setSettings }}>
+      {children}
+    </SettingsContext.Provider>
+  );
+}

src/hooks/useLayout.js

@@ -1,13 +1,6 @@
 import { useContext } from "react";
 import { LayoutContext } from "../context/LayoutContext";
 
-/**
- * Access layout state
- * 
- * Layout includes: header, sidebar, toolbar, issues, fullscreen
- * 
- * @returns `{ layout, setLayout }`
- */
 export default function useLayout() {
   return useContext(LayoutContext);
 }

src/hooks/useSettings.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { SettingsContext } from "../context/SettingsContext";
+
+export default function useSettings() {
+  return useContext(SettingsContext);
+}

src/pages/BugReport.jsx

@@ -136,19 +136,7 @@ export default function BugReport() {
   const [theme, setTheme] = useState("");
 
   useEffect(() => {
-    const t = localStorage.getItem("theme");
+    setTheme(localStorage.getItem("theme"));
-    setTheme(t);
-    if (t === "dark") {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "dark");
-      }
-    } else {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "light");
-      }
-    }
     document.title = "Report a bug | drawDB";
     document.body.setAttribute("class", "theme");
   }, [setTheme]);

src/pages/Editor.jsx

@@ -15,13 +15,13 @@ import { Divider, Tooltip } from "@douyinfe/semi-ui";
 import { exitFullscreen } from "../utils";
 import useLayout from "../hooks/useLayout";
 import LayoutContextProvider from "../context/LayoutContext";
+import useSettings from "../hooks/useSettings";
 
 export const StateContext = createContext();
 export const TableContext = createContext();
 export const AreaContext = createContext();
 export const TabContext = createContext();
 export const NoteContext = createContext();
-export const SettingsContext = createContext();
 export const UndoRedoContext = createContext();
 export const SelectContext = createContext();
 export const TaskContext = createContext();
@@ -52,15 +52,7 @@ function WorkSpace() {
   const [width, setWidth] = useState(340);
   const [tab, setTab] = useState(Tab.tables);
   const { layout, setLayout } = useLayout();
-  const [settings, setSettings] = useState({
+  const { settings, setSettings } = useSettings();
-    strictMode: false,
-    showFieldSummary: true,
-    showGrid: true,
-    mode: "light",
-    autosave: true,
-    panning: true,
-    showCardinality: true,
-  });
   const [transform, setTransform] = useState({
     zoom: 1,
     pan: { x: 0, y: 0 },
@@ -94,8 +86,8 @@ function WorkSpace() {
         {
           id: prev.length,
           name: `table_${prev.length}`,
-          x: -settings.pan.x,
+          x: -transform.pan.x,
-          y: -settings.pan.y,
+          y: -transform.pan.y,
           fields: [
             {
               name: "id",
@@ -211,8 +203,8 @@ function WorkSpace() {
         {
           id: prev.length,
           name: `area_${prev.length}`,
-          x: -settings.pan.x,
+          x: -transform.pan.x,
-          y: -settings.pan.y,
+          y: -transform.pan.y,
           width: 200,
           height: 200,
           color: defaultTableTheme,
@@ -244,8 +236,8 @@ function WorkSpace() {
         ...prev,
         {
           id: prev.length,
-          x: -settings.pan.x,
+          x: -transform.pan.x,
-          y: -settings.pan.y,
+          y: -transform.pan.y,
           title: `note_${prev.length}`,
           content: "",
           color: defaultNoteTheme,
@@ -690,22 +682,7 @@ function WorkSpace() {
           break;
       }
     }
-
+  }, [setSettings]);
-    const theme = localStorage.getItem("theme");
-    if (theme === "dark") {
-      setSettings((prev) => ({ ...prev, mode: "dark" }));
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "dark");
-      }
-    } else {
-      setSettings((prev) => ({ ...prev, mode: "light" }));
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "light");
-      }
-    }
-  }, []);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
@@ -731,115 +708,107 @@ function WorkSpace() {
               value={{ notes, setNotes, updateNote, addNote, deleteNote }}
             >
               <TabContext.Provider value={{ tab, setTab }}>
-                <SettingsContext.Provider value={{ settings, setSettings }}>
+                <UndoRedoContext.Provider
-                  <UndoRedoContext.Provider
+                  value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
-                    value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
+                >
+                  <SelectContext.Provider
+                    value={{ selectedElement, setSelectedElement }}
                   >
-                    <SelectContext.Provider
+                    <TaskContext.Provider
-                      value={{ selectedElement, setSelectedElement }}
+                      value={{ tasks, setTasks, updateTask }}
                     >
-                      <TaskContext.Provider
+                      <TypeContext.Provider
-                        value={{ tasks, setTasks, updateTask }}
+                        value={{
+                          types,
+                          setTypes,
+                          addType,
+                          updateType,
+                          deleteType,
+                        }}
                       >
-                        <TypeContext.Provider
+                        <div className="h-[100vh] flex flex-col overflow-hidden theme">
-                          value={{
+                          <ControlPanel
-                            types,
+                            diagramId={id}
-                            setTypes,
+                            setDiagramId={setId}
-                            addType,
+                            title={title}
-                            updateType,
+                            setTitle={setTitle}
-                            deleteType,
+                            lastSaved={lastSaved}
-                          }}
+                            setLastSaved={setLastSaved}
-                        >
+                          />
-                          <div className="h-[100vh] flex flex-col overflow-hidden theme">
+                          <div
-                            <ControlPanel
+                            className="flex h-full overflow-y-auto"
-                              diagramId={id}
+                            onMouseUp={() => setResize(false)}
-                              setDiagramId={setId}
+                            onMouseMove={dragHandler}
-                              title={title}
+                          >
-                              setTitle={setTitle}
+                            {layout.sidebar && (
-                              lastSaved={lastSaved}
+                              <SidePanel
-                              setLastSaved={setLastSaved}
+                                resize={resize}
-                            />
+                                setResize={setResize}
-                            <div
+                                width={width}
-                              className="flex h-full overflow-y-auto"
+                              />
-                              onMouseUp={() => setResize(false)}
+                            )}
-                              onMouseMove={dragHandler}
+                            <div className="relative w-full h-full overflow-hidden">
-                            >
+                              <Canvas state={state} setState={setState} />
-                              {layout.sidebar && (
+                              {!(
-                                <SidePanel
+                                layout.sidebar ||
-                                  resize={resize}
+                                layout.toolbar ||
-                                  setResize={setResize}
+                                layout.header
-                                  width={width}
+                              ) && (
-                                />
+                                <div className="fixed right-5 bottom-4 flex gap-2">
-                              )}
+                                  <div className="popover-theme flex rounded-lg items-center">
-                              <div className="relative w-full h-full overflow-hidden">
+                                    <button
-                                <Canvas state={state} setState={setState} />
+                                      className="px-3 py-2"
-                                {!(
+                                      onClick={() =>
-                                  layout.sidebar ||
+                                        setTransform((prev) => ({
-                                  layout.toolbar ||
+                                          ...prev,
-                                  layout.header
+                                          zoom: prev.zoom / 1.2,
-                                ) && (
+                                        }))
-                                  <div className="fixed right-5 bottom-4 flex gap-2">
+                                      }
-                                    <div className="popover-theme flex rounded-lg items-center">
+                                    >
-                                      <button
+                                      <i className="bi bi-dash-lg"></i>
-                                        className="px-3 py-2"
+                                    </button>
-                                        onClick={() =>
+                                    <Divider align="center" layout="vertical" />
-                                          setTransform((prev) => ({
+                                    <div className="px-3 py-2">
-                                            ...prev,
+                                      {parseInt(transform.zoom * 100)}%
-                                            zoom: prev.zoom / 1.2,
-                                          }))
-                                        }
-                                      >
-                                        <i className="bi bi-dash-lg"></i>
-                                      </button>
-                                      <Divider
-                                        align="center"
-                                        layout="vertical"
-                                      />
-                                      <div className="px-3 py-2">
-                                        {parseInt(transform.zoom * 100)}%
-                                      </div>
-                                      <Divider
-                                        align="center"
-                                        layout="vertical"
-                                      />
-                                      <button
-                                        className="px-3 py-2"
-                                        onClick={() =>
-                                          setTransform((prev) => ({
-                                            ...prev,
-                                            zoom: prev.zoom * 1.2,
-                                          }))
-                                        }
-                                      >
-                                        <i className="bi bi-plus-lg"></i>
-                                      </button>
                                     </div>
-                                    <Tooltip content="Exit">
+                                    <Divider align="center" layout="vertical" />
-                                      <button
+                                    <button
-                                        className="px-3 py-2 rounded-lg popover-theme"
+                                      className="px-3 py-2"
-                                        onClick={() => {
+                                      onClick={() =>
-                                          setLayout((prev) => ({
+                                        setTransform((prev) => ({
-                                            ...prev,
+                                          ...prev,
-                                            sidebar: true,
+                                          zoom: prev.zoom * 1.2,
-                                            toolbar: true,
+                                        }))
-                                            header: true,
+                                      }
-                                          }));
+                                    >
-                                          exitFullscreen();
+                                      <i className="bi bi-plus-lg"></i>
-                                        }}
+                                    </button>
-                                      >
-                                        <i className="bi bi-fullscreen-exit"></i>
-                                      </button>
-                                    </Tooltip>
                                   </div>
-                                )}
+                                  <Tooltip content="Exit">
-                              </div>
+                                    <button
+                                      className="px-3 py-2 rounded-lg popover-theme"
+                                      onClick={() => {
+                                        setLayout((prev) => ({
+                                          ...prev,
+                                          sidebar: true,
+                                          toolbar: true,
+                                          header: true,
+                                        }));
+                                        exitFullscreen();
+                                      }}
+                                    >
+                                      <i className="bi bi-fullscreen-exit"></i>
+                                    </button>
+                                  </Tooltip>
+                                </div>
+                              )}
                             </div>
                           </div>
-                        </TypeContext.Provider>
+                        </div>
-                      </TaskContext.Provider>
+                      </TypeContext.Provider>
-                    </SelectContext.Provider>
+                    </TaskContext.Provider>
-                  </UndoRedoContext.Provider>
+                  </SelectContext.Provider>
-                </SettingsContext.Provider>
+                </UndoRedoContext.Provider>
               </TabContext.Provider>
             </NoteContext.Provider>
           </AreaContext.Provider>

src/pages/Shortcuts.jsx

@@ -76,19 +76,7 @@ export default function Shortcuts() {
   };
 
   useEffect(() => {
-    const t = localStorage.getItem("theme");
+    setTheme(localStorage.getItem("theme"));
-    setTheme(t);
-    if (t === "dark") {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "dark");
-      }
-    } else {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "light");
-      }
-    }
     document.title = "Shortcuts | drawDB";
     document.body.setAttribute("class", "theme");
   }, [setTheme]);

src/pages/Survey.jsx

@@ -239,19 +239,7 @@ export default function Survey() {
   useEffect(() => window.scroll(0, 0));
 
   useEffect(() => {
-    const t = localStorage.getItem("theme");
+    setTheme(localStorage.getItem("theme"));
-    setTheme(t);
-    if (t === "dark") {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "dark");
-      }
-    } else {
-      const body = document.body;
-      if (body.hasAttribute("theme-mode")) {
-        body.setAttribute("theme-mode", "light");
-      }
-    }
     document.title = "Share you feedback | drawDB";
     document.body.setAttribute("class", "theme");
   }, [setTheme]);