Abstract areas

src/components/Area.jsx

@@ -13,11 +13,12 @@ import {
   defaultTableTheme,
   State,
 } from "../data/data";
-import { AreaContext, StateContext, TabContext } from "../pages/Editor";
+import { StateContext, TabContext } from "../pages/Editor";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
+import useAreas from "../hooks/useAreas";
 
 export default function Area(props) {
   const [hovered, setHovered] = useState(false);
@@ -26,7 +27,7 @@ export default function Area(props) {
   const { layout } = useLayout();
   const { settings } = useSettings();
   const { tab, setTab } = useContext(TabContext);
-  const { updateArea, deleteArea } = useContext(AreaContext);
+  const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
 

src/components/AreaOverview.jsx

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

src/components/Canvas.jsx

@@ -3,7 +3,7 @@ import Table from "./Table";
 import { Action, Cardinality, Constraint, ObjectType } from "../data/data";
 import Area from "./Area";
 import Relationship from "./Relationship";
-import { AreaContext, NoteContext } from "../pages/Editor";
+import { NoteContext } from "../pages/Editor";
 import Note from "./Note";
 import { Toast } from "@douyinfe/semi-ui";
 import useSettings from "../hooks/useSettings";
@@ -11,10 +11,11 @@ import useTransform from "../hooks/useTransform";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
+import useAreas from "../hooks/useAreas";
 
 export default function Canvas() {
   const { tables, updateTable, relationships, addRelationship } = useTables();
-  const { areas, updateArea } = useContext(AreaContext);
+  const { areas, updateArea } = useAreas();
   const { notes, updateNote } = useContext(NoteContext);
   const { settings } = useSettings();
   const { setUndoStack, setRedoStack } = useUndoRedo();

src/components/ControlPanel.jsx

@@ -44,7 +44,6 @@ import {
   jsonToSQLServer,
 } from "../utils/toSQL";
 import {
-  AreaContext,
   NoteContext,
   StateContext,
   TabContext,
@@ -71,6 +70,7 @@ import useSelect from "../hooks/useSelect";
 import { enterFullscreen, exitFullscreen } from "../utils/fullscreen";
 import { ddbDiagramIsValid, jsonDiagramIsValid } from "../utils/validateSchema";
 import { dataURItoBlob } from "../utils/utils";
+import useAreas from "../hooks/useAreas";
 
 export default function ControlPanel({
   diagramId,
@@ -139,8 +139,7 @@ export default function ControlPanel({
     useContext(TypeContext);
   const { notes, setNotes, updateNote, addNote, deleteNote } =
     useContext(NoteContext);
-  const { areas, setAreas, updateArea, addArea, deleteArea } =
+  const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas();
-    useContext(AreaContext);
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
   const { tab, setTab } = useContext(TabContext);

src/context/AreasContext.jsx

@@ -0,0 +1,96 @@
+import { createContext, useState } from "react";
+import { Action, ObjectType, defaultTableTheme } from "../data/data";
+import useUndoRedo from "../hooks/useUndoRedo";
+import useTransform from "../hooks/useTransform";
+import useSelect from "../hooks/useSelect";
+
+export const AreasContext = createContext(null);
+
+export default function AreasContextProvider({ children }) {
+  const [areas, setAreas] = useState([]);
+  const { transform } = useTransform();
+  const { selectedElement, setSelectedElement } = useSelect();
+  const { setUndoStack, setRedoStack } = useUndoRedo();
+
+  const addArea = (addToHistory = true, data) => {
+    if (data) {
+      setAreas((prev) => {
+        const temp = prev.slice();
+        temp.splice(data.id, 0, data);
+        return temp.map((t, i) => ({ ...t, id: i }));
+      });
+    } else {
+      setAreas((prev) => [
+        ...prev,
+        {
+          id: prev.length,
+          name: `area_${prev.length}`,
+          x: -transform.pan.x,
+          y: -transform.pan.y,
+          width: 200,
+          height: 200,
+          color: defaultTableTheme,
+        },
+      ]);
+    }
+    if (addToHistory) {
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.ADD,
+          element: ObjectType.AREA,
+          message: `Add new subject area`,
+        },
+      ]);
+      setRedoStack([]);
+    }
+  };
+
+  const deleteArea = (id, addToHistory = true) => {
+    if (addToHistory) {
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.DELETE,
+          element: ObjectType.AREA,
+          data: areas[id],
+          message: `Delete subject area`,
+        },
+      ]);
+      setRedoStack([]);
+    }
+    setAreas((prev) =>
+      prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i }))
+    );
+    if (id === selectedElement.id) {
+      setSelectedElement({
+        element: ObjectType.NONE,
+        id: -1,
+        openDialogue: false,
+        openCollapse: false,
+      });
+    }
+  };
+
+  const updateArea = (id, values) => {
+    setAreas((prev) =>
+      prev.map((t) => {
+        if (t.id === id) {
+          return {
+            ...t,
+            ...values,
+          };
+        }
+        return t;
+      })
+    );
+  };
+
+  return (
+    <AreasContext.Provider
+      value={{ areas, setAreas, updateArea, addArea, deleteArea }}
+    >
+      {children}
+    </AreasContext.Provider>
+  );
+}

src/context/TablesContext.jsx

@@ -1,6 +1,6 @@
 import { createContext, useState } from "react";
-import useTransform from "../hooks/useTransform";
 import { Action, ObjectType, defaultTableTheme } from "../data/data";
+import useTransform from "../hooks/useTransform";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
 

src/hooks/useAreas.js

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

src/main.jsx

@@ -1,17 +1,14 @@
 import ReactDOM from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
 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";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  // <React.StrictMode>
   <LocaleProvider locale={en_US}>
     <App />
     <Analytics />
   </LocaleProvider>
-  // </React.StrictMode>
 );

src/pages/Editor.jsx

@@ -2,14 +2,7 @@ import { useState, createContext, useEffect, useCallback } from "react";
 import ControlPanel from "../components/ControlPanel";
 import Canvas from "../components/Canvas";
 import SidePanel from "../components/SidePanel";
-import {
+import { Tab, defaultNoteTheme, Action, ObjectType, State } from "../data/data";
-  Tab,
-  defaultTableTheme,
-  defaultNoteTheme,
-  Action,
-  ObjectType,
-  State,
-} from "../data/data";
 import { db } from "../data/db";
 import useLayout from "../hooks/useLayout";
 import LayoutContextProvider from "../context/LayoutContext";
@@ -21,11 +14,12 @@ import TablesContextProvider from "../context/TablesContext";
 import useUndoRedo from "../hooks/useUndoRedo";
 import UndoRedoContextProvider from "../context/UndoRedoContext";
 import SelectContextProvider from "../context/SelectContext";
+import AreasContextProvider from "../context/AreasContext";
 import useSelect from "../hooks/useSelect";
 import Controls from "../components/Controls";
+import useAreas from "../hooks/useAreas";
 
 export const StateContext = createContext();
-export const AreaContext = createContext();
 export const TabContext = createContext();
 export const NoteContext = createContext();
 export const TaskContext = createContext();
@@ -37,9 +31,11 @@ export default function Editor() {
       <TransformContextProvider>
         <UndoRedoContextProvider>
           <SelectContextProvider>
-            <TablesContextProvider>
+            <AreasContextProvider>
-              <WorkSpace />
+              <TablesContextProvider>
-            </TablesContextProvider>
+                <WorkSpace />
+              </TablesContextProvider>
+            </AreasContextProvider>
           </SelectContextProvider>
         </UndoRedoContextProvider>
       </TransformContextProvider>
@@ -53,7 +49,6 @@ function WorkSpace() {
   const [state, setState] = useState(State.NONE);
   const [lastSaved, setLastSaved] = useState("");
   const { tables, relationships, setTables, setRelationships } = useTables();
-  const [areas, setAreas] = useState([]);
   const [notes, setNotes] = useState([]);
   const [types, setTypes] = useState([]);
   const [resize, setResize] = useState(false);
@@ -63,6 +58,7 @@ function WorkSpace() {
   const { settings, setSettings } = useSettings();
   const { transform, setTransform } = useTransform();
   const { selectedElement, setSelectedElement } = useSelect();
+  const { areas, setAreas } = useAreas();
   const [tasks, setTasks] = useState([]);
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
 
@@ -125,40 +121,6 @@ function WorkSpace() {
     );
   };
 
-  const addArea = (addToHistory = true, data) => {
-    if (data) {
-      setAreas((prev) => {
-        const temp = prev.slice();
-        temp.splice(data.id, 0, data);
-        return temp.map((t, i) => ({ ...t, id: i }));
-      });
-    } else {
-      setAreas((prev) => [
-        ...prev,
-        {
-          id: prev.length,
-          name: `area_${prev.length}`,
-          x: -transform.pan.x,
-          y: -transform.pan.y,
-          width: 200,
-          height: 200,
-          color: defaultTableTheme,
-        },
-      ]);
-    }
-    if (addToHistory) {
-      setUndoStack((prev) => [
-        ...prev,
-        {
-          action: Action.ADD,
-          element: ObjectType.AREA,
-          message: `Add new subject area`,
-        },
-      ]);
-      setRedoStack([]);
-    }
-  };
-
   const addNote = (addToHistory = true, data) => {
     if (data) {
       setNotes((prev) => {
@@ -193,32 +155,6 @@ function WorkSpace() {
     }
   };
 
-  const deleteArea = (id, addToHistory = true) => {
-    if (addToHistory) {
-      setUndoStack((prev) => [
-        ...prev,
-        {
-          action: Action.DELETE,
-          element: ObjectType.AREA,
-          data: areas[id],
-          message: `Delete subject area`,
-        },
-      ]);
-      setRedoStack([]);
-    }
-    setAreas((prev) =>
-      prev.filter((e) => e.id !== id).map((e, i) => ({ ...e, id: i }))
-    );
-    if (id === selectedElement.id) {
-      setSelectedElement({
-        element: ObjectType.NONE,
-        id: -1,
-        openDialogue: false,
-        openCollapse: false,
-      });
-    }
-  };
-
   const deleteNote = (id, addToHistory = true) => {
     if (addToHistory) {
       setUndoStack((prev) => [
@@ -245,20 +181,6 @@ function WorkSpace() {
     }
   };
 
-  const updateArea = (id, values) => {
-    setAreas((prev) =>
-      prev.map((t) => {
-        if (t.id === id) {
-          return {
-            ...t,
-            ...values,
-          };
-        }
-        return t;
-      })
-    );
-  };
-
   const updateNote = (id, values) => {
     setNotes((prev) =>
       prev.map((t) => {
@@ -510,63 +432,60 @@ function WorkSpace() {
     setUndoStack,
     setRelationships,
     setTables,
+    setAreas,
   ]);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
-      <AreaContext.Provider
+      <NoteContext.Provider
-        value={{ areas, setAreas, updateArea, addArea, deleteArea }}
+        value={{ notes, setNotes, updateNote, addNote, deleteNote }}
       >
-        <NoteContext.Provider
+        <TabContext.Provider value={{ tab, setTab }}>
-          value={{ notes, setNotes, updateNote, addNote, deleteNote }}
+          <TypeContext.Provider
-        >
+            value={{
-          <TabContext.Provider value={{ tab, setTab }}>
+              types,
-            <TypeContext.Provider
+              setTypes,
-              value={{
+              addType,
-                types,
+              updateType,
-                setTypes,
+              deleteType,
-                addType,
+            }}
-                updateType,
+          >
-                deleteType,
+            <div className="h-[100vh] flex flex-col overflow-hidden theme">
-              }}
+              <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
-            >
+                <ControlPanel
-              <div className="h-[100vh] flex flex-col overflow-hidden theme">
+                  diagramId={id}
-                <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
+                  setDiagramId={setId}
-                  <ControlPanel
+                  title={title}
-                    diagramId={id}
+                  setTitle={setTitle}
-                    setDiagramId={setId}
+                  lastSaved={lastSaved}
-                    title={title}
+                  setLastSaved={setLastSaved}
-                    setTitle={setTitle}
+                />
-                    lastSaved={lastSaved}
+              </TaskContext.Provider>
-                    setLastSaved={setLastSaved}
+              <div
+                className="flex h-full overflow-y-auto"
+                onMouseUp={() => setResize(false)}
+                onMouseMove={dragHandler}
+              >
+                {layout.sidebar && (
+                  <SidePanel
+                    resize={resize}
+                    setResize={setResize}
+                    width={width}
                   />
-                </TaskContext.Provider>
+                )}
-                <div
+                <div className="relative w-full h-full overflow-hidden">
-                  className="flex h-full overflow-y-auto"
+                  <Canvas state={state} setState={setState} />
-                  onMouseUp={() => setResize(false)}
+                  {!(layout.sidebar || layout.toolbar || layout.header) && (
-                  onMouseMove={dragHandler}
+                    <div className="fixed right-5 bottom-4">
-                >
+                      <Controls />
-                  {layout.sidebar && (
+                    </div>
-                    <SidePanel
-                      resize={resize}
-                      setResize={setResize}
-                      width={width}
-                    />
                   )}
-                  <div className="relative w-full h-full overflow-hidden">
-                    <Canvas state={state} setState={setState} />
-                    {!(layout.sidebar || layout.toolbar || layout.header) && (
-                      <div className="fixed right-5 bottom-4">
-                        <Controls />
-                      </div>
-                    )}
-                  </div>
                 </div>
               </div>
-            </TypeContext.Provider>
+            </div>
-          </TabContext.Provider>
+          </TypeContext.Provider>
-        </NoteContext.Provider>
+        </TabContext.Provider>
-      </AreaContext.Provider>
+      </NoteContext.Provider>
     </StateContext.Provider>
   );
 }