Abstract LayoutContext

src/App.jsx

@@ -6,6 +6,7 @@ import Shortcuts from "./pages/Shortcuts";
 import Templates from "./pages/Templates";
 import { useEffect } from "react";
 import LandingPage from "./pages/LandingPage";
+import LayoutContextProvider from "./context/LayoutContext";
 
 const Wrapper = ({ children }) => {
   const location = useLocation();
@@ -21,7 +22,14 @@ function App() {
       <Wrapper>
         <Routes>
           <Route path="/" element={<LandingPage />} />
-          <Route path="/editor" element={<Editor />} />
+          <Route
+            path="/editor"
+            element={
+              <LayoutContextProvider>
+                <Editor />
+              </LayoutContextProvider>
+            }
+          />
           <Route path="/survey" element={<Survey />} />
           <Route path="/shortcuts" element={<Shortcuts />} />
           <Route path="/bug_report" element={<BugReport />} />

src/components/Area.jsx

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

src/components/AreaOverview.jsx

@@ -26,10 +26,10 @@ import {
   ObjectType,
   State,
 } from "../data/data";
-import { AreaContext, LayoutContext, UndoRedoContext } from "../pages/Editor";
+import { AreaContext, StateContext, UndoRedoContext } from "../pages/Editor";
 
 export default function AreaOverview() {
-  const { setState } = useContext(LayoutContext);
+  const { setState } = useContext(StateContext);
   const { areas, addArea, deleteArea, updateArea } = useContext(AreaContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [editField, setEditField] = useState({});

src/components/ControlPanel.jsx

@@ -50,10 +50,10 @@ import {
 } from "../utils";
 import {
   AreaContext,
-  LayoutContext,
   NoteContext,
   SelectContext,
   SettingsContext,
+  StateContext,
   TabContext,
   TableContext,
   TypeContext,
@@ -71,6 +71,7 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { Parser } from "node-sql-parser";
 import Todo from "./Todo";
 import { Thumbnail } from "./Thumbnail";
+import useLayout from "../hooks/useLayout";
 
 export default function ControlPanel({
   diagramId,
@@ -120,7 +121,8 @@ export default function ControlPanel({
     message: "",
   });
   const [data, setData] = useState(null);
-  const { layout, setLayout, state, setState } = useContext(LayoutContext);
+  const { state, setState } = useContext(StateContext);
+  const {layout, setLayout} = useLayout();
   const { settings, setSettings } = useContext(SettingsContext);
   const {
     relationships,

src/components/Note.jsx

@@ -1,10 +1,10 @@
 import { useContext, useState } from "react";
 import {
-  LayoutContext,
   NoteContext,
   UndoRedoContext,
   TabContext,
   SelectContext,
+  StateContext,
 } from "../pages/Editor";
 import { Action, ObjectType, noteThemes, Tab, State } from "../data/data";
 import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
@@ -13,6 +13,7 @@ import {
   IconDeleteStroked,
   IconCheckboxTick,
 } from "@douyinfe/semi-icons";
+import useLayout from "../hooks/useLayout";
 
 export default function Note(props) {
   const [editField, setEditField] = useState({});
@@ -22,7 +23,8 @@ export default function Note(props) {
   const fold = 24;
   const { updateNote, deleteNote } = useContext(NoteContext);
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
-  const { layout, setState } = useContext(LayoutContext);
+  const { setState } = useContext(StateContext);
+  const { layout } = useLayout();
   const { tab, setTab } = useContext(TabContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
 

src/components/SidePanel.jsx

@@ -4,14 +4,15 @@ import TableOverview from "./TableOverview";
 import ReferenceOverview from "./ReferenceOverview";
 import AreaOverview from "./AreaOverview";
 import { Tab } from "../data/data";
-import { LayoutContext, TabContext } from "../pages/Editor";
+import { TabContext } from "../pages/Editor";
 import NotesOverview from "./NotesOverview";
 import Issues from "./Issues";
 import TypesOverview from "./TypesOverview";
+import useLayout from "../hooks/useLayout";
 
 const SidePanel = (props) => {
   const { tab, setTab } = useContext(TabContext);
-  const { layout } = useContext(LayoutContext);
+  const { layout } = useLayout();
 
   const tabList = [
     { tab: "Tables", itemKey: Tab.tables },

src/components/Table.jsx

@@ -32,7 +32,6 @@ import {
   Toast,
 } from "@douyinfe/semi-ui";
 import {
-  LayoutContext,
   SelectContext,
   SettingsContext,
   TabContext,
@@ -41,12 +40,13 @@ import {
   UndoRedoContext,
 } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
+import useLayout from "../hooks/useLayout";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
   const [editField, setEditField] = useState({});
-  const { layout } = useContext(LayoutContext);
+  const { layout } = useLayout();
   const { deleteTable, updateTable, updateField, setRelationships } =
     useContext(TableContext);
   const { tab, setTab } = useContext(TabContext);

src/components/Todo.jsx

@@ -19,7 +19,7 @@ import {
   IconDeleteStroked,
   IconCaretdown,
 } from "@douyinfe/semi-icons";
-import { LayoutContext, TaskContext } from "../pages/Editor";
+import { StateContext, TaskContext } from "../pages/Editor";
 import { State } from "../data/data";
 export default function Todo() {
   const Priority = {
@@ -37,7 +37,7 @@ export default function Todo() {
   const [activeTask, setActiveTask] = useState(-1);
   const [, setSortOrder] = useState(SortOrder.ORIGINAL);
   const { tasks, setTasks, updateTask } = useContext(TaskContext);
-  const { setState } = useContext(LayoutContext);
+  const { setState } = useContext(StateContext);
 
   const priorityLabel = (p) => {
     switch (p) {

src/context/LayoutContext.jsx

@@ -0,0 +1,19 @@
+import { createContext, useState } from "react";
+
+export const LayoutContext = createContext();
+
+export default function LayoutContextProvider({ children }) {
+  const [layout, setLayout] = useState({
+    header: true,
+    sidebar: true,
+    issues: true,
+    toolbar: true,
+    fullscreen: false,
+  });
+
+  return (
+    <LayoutContext.Provider value={{ layout, setLayout }}>
+      {children}
+    </LayoutContext.Provider>
+  );
+}

src/hooks/useLayout.js

@@ -0,0 +1,13 @@
+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/pages/BugReport.jsx

@@ -72,7 +72,7 @@ function Form({ theme }) {
           })
           .then(() => {
             Toast.success("Bug reported!");
-            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
+            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, null);
             resetForm();
           })
           .catch(() => {

src/pages/Editor.jsx

@@ -13,8 +13,10 @@ import {
 import { db } from "../data/db";
 import { Divider, Tooltip } from "@douyinfe/semi-ui";
 import { exitFullscreen } from "../utils";
+import useLayout from "../hooks/useLayout";
+import LayoutContextProvider from "../context/LayoutContext";
 
-export const LayoutContext = createContext();
+export const StateContext = createContext();
 export const TableContext = createContext();
 export const AreaContext = createContext();
 export const TabContext = createContext();
@@ -28,6 +30,14 @@ export const BotMessageContext = createContext();
 export const TypeContext = createContext();
 
 export default function Editor() {
+  return (
+    <LayoutContextProvider>
+      <WorkSpace />
+    </LayoutContextProvider>
+  );
+}
+
+function WorkSpace() {
   const [id, setId] = useState(0);
   const [title, setTitle] = useState("Untitled Diagram");
   const [state, setState] = useState(State.NONE);
@@ -40,14 +50,7 @@ export default function Editor() {
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [tab, setTab] = useState(Tab.tables);
-  const [layout, setLayout] = useState({
+  const { layout, setLayout } = useLayout();
-    header: true,
-    sidebar: true,
-    services: true,
-    issues: true,
-    toolbar: true,
-    fullscreen: false,
-  });
   const [settings, setSettings] = useState({
     strictMode: false,
     showFieldSummary: true,
@@ -704,7 +707,7 @@ export default function Editor() {
   }, []);
 
   return (
-    <LayoutContext.Provider value={{ layout, setLayout, state, setState }}>
+    <StateContext.Provider value={{ state, setState }}>
       <TableContext.Provider
         value={{
           tables,
@@ -833,6 +836,6 @@ export default function Editor() {
           </NoteContext.Provider>
         </AreaContext.Provider>
       </TableContext.Provider>
-    </LayoutContext.Provider>
+    </StateContext.Provider>
   );
 }