Abstract types from editor

src/components/ControlPanel.jsx

@@ -43,11 +43,7 @@ import {
   jsonToMariaDB,
   jsonToSQLServer,
 } from "../utils/toSQL";
-import {
-  StateContext,
-  TabContext,
-  TypeContext,
-} from "../pages/Editor";
+import { StateContext, TabContext } from "../pages/Editor";
 import { IconAddTable, IconAddArea, IconAddNote } from "./CustomIcons";
 import { ObjectType, Action, Tab, State, Cardinality } from "../data/data";
 import jsPDF from "jspdf";
@@ -71,6 +67,7 @@ import { ddbDiagramIsValid, jsonDiagramIsValid } from "../utils/validateSchema";
 import { dataURItoBlob } from "../utils/utils";
 import useAreas from "../hooks/useAreas";
 import useNotes from "../hooks/useNotes";
+import useTypes from "../hooks/useTypes";
 
 export default function ControlPanel({
   diagramId,
@@ -135,10 +132,8 @@ export default function ControlPanel({
     addRelationship,
     deleteRelationship,
   } = useTables();
-  const { types, addType, deleteType, updateType, setTypes } =
-    useContext(TypeContext);
-  const { notes, setNotes, updateNote, addNote, deleteNote } =
-    useNotes();
+  const { types, addType, deleteType, updateType, setTypes } = useTypes();
+  const { notes, setNotes, updateNote, addNote, deleteNote } = useNotes();
   const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas();
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();

src/components/Issues.jsx

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

src/components/Table.jsx

@@ -31,13 +31,14 @@ import {
   SideSheet,
   Toast,
 } from "@douyinfe/semi-ui";
-import { TabContext, TypeContext } from "../pages/Editor";
+import { TabContext } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useTables from "../hooks/useTables";
 import useSelect from "../hooks/useSelect";
+import useTypes from "../hooks/useTypes";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
@@ -48,7 +49,7 @@ export default function Table(props) {
     useTables();
   const { tab, setTab } = useContext(TabContext);
   const { settings } = useSettings();
-  const { types } = useContext(TypeContext);
+  const { types } = useTypes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
 

src/components/TableOverview.jsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import {
   Action,
   ObjectType,
@@ -35,11 +35,11 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { TypeContext } from "../pages/Editor";
 import { getSize, hasCheck, hasPrecision, isSized } from "../utils/toSQL";
 import useTables from "../hooks/useTables";
 import useUndoRedo from "../hooks/useUndoRedo";
 import useSelect from "../hooks/useSelect";
+import useTypes from "../hooks/useTypes";
 
 export default function TableOverview() {
   const [indexActiveKey, setIndexActiveKey] = useState("");
@@ -52,7 +52,7 @@ export default function TableOverview() {
     updateTable,
     setRelationships,
   } = useTables();
-  const { types } = useContext(TypeContext);
+  const { types } = useTypes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { selectedElement, setSelectedElement } = useSelect();
   const [editField, setEditField] = useState({});

src/components/TypesOverview.jsx

@@ -1,4 +1,4 @@
-import { useContext, useState } from "react";
+import { useState } from "react";
 import { Action, ObjectType, sqlDataTypes } from "../data/data";
 import {
   Collapse,
@@ -27,13 +27,13 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { TypeContext } from "../pages/Editor";
 import { isSized, hasPrecision, getSize } from "../utils/toSQL";
 import useUndoRedo from "../hooks/useUndoRedo";
+import useTypes from "../hooks/useTypes";
 
 export default function TableOverview() {
   const [value, setValue] = useState("");
-  const { types, addType, deleteType, updateType } = useContext(TypeContext);
+  const { types, addType, deleteType, updateType } = useTypes();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
   const [filteredResult, setFilteredResult] = useState(

src/context/TypesContext.jsx

@@ -0,0 +1,77 @@
+import { createContext, useState } from "react";
+import { Action, ObjectType } from "../data/data";
+import useUndoRedo from "../hooks/useUndoRedo";
+
+export const TypesContext = createContext(null);
+
+export default function TypesContextProvider({ children }) {
+  const [types, setTypes] = useState([]);
+  const { setUndoStack, setRedoStack } = useUndoRedo();
+
+  const addType = (addToHistory = true, data) => {
+    if (data) {
+      setTypes((prev) => {
+        const temp = prev.slice();
+        temp.splice(data.id, 0, data);
+        return temp;
+      });
+    } else {
+      setTypes((prev) => [
+        ...prev,
+        {
+          name: `type_${prev.length}`,
+          fields: [],
+          comment: "",
+        },
+      ]);
+    }
+    if (addToHistory) {
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.ADD,
+          element: ObjectType.TYPE,
+          message: `Add new type`,
+        },
+      ]);
+      setRedoStack([]);
+    }
+  };
+
+  const deleteType = (id, addToHistory = true) => {
+    if (addToHistory) {
+      setUndoStack((prev) => [
+        ...prev,
+        {
+          action: Action.DELETE,
+          element: ObjectType.TYPE,
+          id: id,
+          data: types[id],
+          message: `Delete type`,
+        },
+      ]);
+      setRedoStack([]);
+    }
+    setTypes((prev) => prev.filter((e, i) => i !== id));
+  };
+
+  const updateType = (id, values) => {
+    setTypes((prev) =>
+      prev.map((e, i) => (i === id ? { ...e, ...values } : e))
+    );
+  };
+
+  return (
+    <TypesContext.Provider
+      value={{
+        types,
+        setTypes,
+        addType,
+        updateType,
+        deleteType,
+      }}
+    >
+      {children}
+    </TypesContext.Provider>
+  );
+}

src/hooks/useTypes.js

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

src/pages/Editor.jsx

@@ -2,7 +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 { Tab, Action, ObjectType, State } from "../data/data";
+import { Tab, State } from "../data/data";
 import { db } from "../data/db";
 import useLayout from "../hooks/useLayout";
 import LayoutContextProvider from "../context/LayoutContext";
@@ -19,11 +19,12 @@ import Controls from "../components/Controls";
 import useAreas from "../hooks/useAreas";
 import useNotes from "../hooks/useNotes";
 import NotesContextProvider from "../context/NotesContext";
+import useTypes from "../hooks/useTypes";
+import TypesContextProvider from "../context/TypesContext";
 
 export const StateContext = createContext();
 export const TabContext = createContext();
 export const TaskContext = createContext();
-export const TypeContext = createContext();
 
 export default function Editor() {
   return (
@@ -33,9 +34,11 @@ export default function Editor() {
           <SelectContextProvider>
             <AreasContextProvider>
               <NotesContextProvider>
-                <TablesContextProvider>
-                  <WorkSpace />
-                </TablesContextProvider>
+                <TypesContextProvider>
+                  <TablesContextProvider>
+                    <WorkSpace />
+                  </TablesContextProvider>
+                </TypesContextProvider>
               </NotesContextProvider>
             </AreasContextProvider>
           </SelectContextProvider>
@@ -50,7 +53,7 @@ function WorkSpace() {
   const [title, setTitle] = useState("Untitled Diagram");
   const [state, setState] = useState(State.NONE);
   const [lastSaved, setLastSaved] = useState("");
-  const [types, setTypes] = useState([]);
+  const { types, setTypes } = useTypes();
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [tab, setTab] = useState(Tab.tables);
@@ -69,59 +72,6 @@ function WorkSpace() {
     if (w > 340) setWidth(w);
   };
 
-  const addType = (addToHistory = true, data) => {
-    if (data) {
-      setTypes((prev) => {
-        const temp = prev.slice();
-        temp.splice(data.id, 0, data);
-        return temp;
-      });
-    } else {
-      setTypes((prev) => [
-        ...prev,
-        {
-          name: `type_${prev.length}`,
-          fields: [],
-          comment: "",
-        },
-      ]);
-    }
-    if (addToHistory) {
-      setUndoStack((prev) => [
-        ...prev,
-        {
-          action: Action.ADD,
-          element: ObjectType.TYPE,
-          message: `Add new type`,
-        },
-      ]);
-      setRedoStack([]);
-    }
-  };
-
-  const deleteType = (id, addToHistory = true) => {
-    if (addToHistory) {
-      setUndoStack((prev) => [
-        ...prev,
-        {
-          action: Action.DELETE,
-          element: ObjectType.TYPE,
-          id: id,
-          data: types[id],
-          message: `Delete type`,
-        },
-      ]);
-      setRedoStack([]);
-    }
-    setTypes((prev) => prev.filter((e, i) => i !== id));
-  };
-
-  const updateType = (id, values) => {
-    setTypes((prev) =>
-      prev.map((e, i) => (i === id ? { ...e, ...values } : e))
-    );
-  };
-
   const updateTask = (id, values) =>
     setTasks((prev) =>
       prev.map((task, i) => (id === i ? { ...task, ...values } : task))
@@ -361,55 +311,42 @@ function WorkSpace() {
     setTables,
     setAreas,
     setNotes,
+    setTypes,
   ]);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
       <TabContext.Provider value={{ tab, setTab }}>
-        <TypeContext.Provider
-          value={{
-            types,
-            setTypes,
-            addType,
-            updateType,
-            deleteType,
-          }}
-        >
-          <div className="h-[100vh] flex flex-col overflow-hidden theme">
-            <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
-              <ControlPanel
-                diagramId={id}
-                setDiagramId={setId}
-                title={title}
-                setTitle={setTitle}
-                lastSaved={lastSaved}
-                setLastSaved={setLastSaved}
-              />
-            </TaskContext.Provider>
-            <div
-              className="flex h-full overflow-y-auto"
-              onMouseUp={() => setResize(false)}
-              onMouseLeave={() => setResize(false)}
-              onMouseMove={handleResize}
-            >
-              {layout.sidebar && (
-                <SidePanel
-                  resize={resize}
-                  setResize={setResize}
-                  width={width}
-                />
+        <div className="h-[100vh] flex flex-col overflow-hidden theme">
+          <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
+            <ControlPanel
+              diagramId={id}
+              setDiagramId={setId}
+              title={title}
+              setTitle={setTitle}
+              lastSaved={lastSaved}
+              setLastSaved={setLastSaved}
+            />
+          </TaskContext.Provider>
+          <div
+            className="flex h-full overflow-y-auto"
+            onMouseUp={() => setResize(false)}
+            onMouseLeave={() => setResize(false)}
+            onMouseMove={handleResize}
+          >
+            {layout.sidebar && (
+              <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 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>
     </StateContext.Provider>
   );