Abstract LayoutContext

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) {