Abstract TransformContext

src/components/Canvas.jsx

@@ -9,11 +9,11 @@ import {
   TableContext,
   UndoRedoContext,
   SelectContext,
-  TransformContext,
 } from "../pages/Editor";
 import Note from "./Note";
 import { Toast } from "@douyinfe/semi-ui";
 import useSettings from "../hooks/useSettings";
+import useTransform from "../hooks/useTransform";
 
 export default function Canvas() {
   const { tables, updateTable, relationships, addRelationship } =
@@ -22,7 +22,7 @@ export default function Canvas() {
   const { notes, updateNote } = useContext(NoteContext);
   const { settings } = useSettings();
   const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
-  const { transform, setTransform } = useContext(TransformContext);
+  const { transform, setTransform } = useTransform();
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
   const [dragging, setDragging] = useState({
     element: ObjectType.NONE,

src/components/ControlPanel.jsx

@@ -51,7 +51,6 @@ import {
 import {
   AreaContext,
   NoteContext,
-  TransformContext,
   SelectContext,
   StateContext,
   TabContext,
@@ -73,6 +72,7 @@ import Todo from "./Todo";
 import { Thumbnail } from "./Thumbnail";
 import useLayout from "../hooks/useLayout";
 import useSettings from "../hooks/useSettings";
+import useTransform from "../hooks/useTransform";
 
 export default function ControlPanel({
   diagramId,
@@ -147,7 +147,7 @@ export default function ControlPanel({
     useContext(UndoRedoContext);
   const { selectedElement, setSelectedElement } = useContext(SelectContext);
   const { tab, setTab } = useContext(TabContext);
-  const { transform, setTransform } = useContext(TransformContext);
+  const { transform, setTransform } = useTransform();
 
   const invertLayout = (component) =>
     setLayout((prev) => ({ ...prev, [component]: !prev[component] }));

src/context/TransformContext.jsx

@@ -0,0 +1,16 @@
+import { createContext, useState } from "react";
+
+export const TransformContext = createContext(null);
+
+export default function TransformContextProvider({ children }) {
+  const [transform, setTransform] = useState({
+    zoom: 1,
+    pan: { x: 0, y: 0 },
+  });
+
+  return (
+    <TransformContext.Provider value={{ transform, setTransform }}>
+      {children}
+    </TransformContext.Provider>
+  );
+}

src/hooks/useTransform.js

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

src/pages/Editor.jsx

@@ -16,6 +16,8 @@ import { exitFullscreen } from "../utils";
 import useLayout from "../hooks/useLayout";
 import LayoutContextProvider from "../context/LayoutContext";
 import useSettings from "../hooks/useSettings";
+import TransformContextProvider from "../context/TransformContext";
+import useTransform from "../hooks/useTransform";
 
 export const StateContext = createContext();
 export const TableContext = createContext();
@@ -28,12 +30,14 @@ export const TaskContext = createContext();
 export const MessageContext = createContext();
 export const BotMessageContext = createContext();
 export const TypeContext = createContext();
-export const TransformContext = createContext();
+// export const TransformContext = createContext();
 
 export default function Editor() {
   return (
     <LayoutContextProvider>
+      <TransformContextProvider>
         <WorkSpace />
+      </TransformContextProvider>
     </LayoutContextProvider>
   );
 }
@@ -53,10 +57,7 @@ function WorkSpace() {
   const [tab, setTab] = useState(Tab.tables);
   const { layout, setLayout } = useLayout();
   const { settings, setSettings } = useSettings();
-  const [transform, setTransform] = useState({
-    zoom: 1,
-    pan: { x: 0, y: 0 },
-  });
+  const { transform, setTransform } = useTransform();
   const [tasks, setTasks] = useState([]);
   const [undoStack, setUndoStack] = useState([]);
   const [redoStack, setRedoStack] = useState([]);
@@ -682,11 +683,10 @@ function WorkSpace() {
           break;
       }
     }
-  }, [setSettings]);
+  }, [setSettings, setTransform]);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
-      <TransformContext.Provider value={{ transform, setTransform }}>
       <TableContext.Provider
         value={{
           tables,
@@ -714,9 +714,7 @@ function WorkSpace() {
                 <SelectContext.Provider
                   value={{ selectedElement, setSelectedElement }}
                 >
-                    <TaskContext.Provider
-                      value={{ tasks, setTasks, updateTask }}
-                    >
+                  <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
                     <TypeContext.Provider
                       value={{
                         types,
@@ -813,7 +811,6 @@ function WorkSpace() {
           </NoteContext.Provider>
         </AreaContext.Provider>
       </TableContext.Provider>
-      </TransformContext.Provider>
     </StateContext.Provider>
   );
 }