From 23bc6278a2ac8b3a2367862e0775ec96c3dc5375 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Sun, 10 Mar 2024 19:24:19 +0200
Subject: [PATCH] Abstract TransformContext

---
 src/components/Canvas.jsx        |   4 +-
 src/components/ControlPanel.jsx  |   4 +-
 src/context/TransformContext.jsx |  16 ++
 src/hooks/useTransform.js        |   6 +
 src/pages/Editor.jsx             | 251 +++++++++++++++----------------
 5 files changed, 150 insertions(+), 131 deletions(-)
 create mode 100644 src/context/TransformContext.jsx
 create mode 100644 src/hooks/useTransform.js

diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
index 45540d1..81c1d64 100644
--- a/src/components/Canvas.jsx
+++ b/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,
diff --git a/src/components/ControlPanel.jsx b/src/components/ControlPanel.jsx
index f1232fb..5be75dc 100644
--- a/src/components/ControlPanel.jsx
+++ b/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] }));
diff --git a/src/context/TransformContext.jsx b/src/context/TransformContext.jsx
new file mode 100644
index 0000000..df67bd7
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/hooks/useTransform.js b/src/hooks/useTransform.js
new file mode 100644
index 0000000..a1a83c3
--- /dev/null
+++ b/src/hooks/useTransform.js
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { TransformContext } from "../context/TransformContext";
+
+export default function useTransform() {
+  return useContext(TransformContext);
+}
diff --git a/src/pages/Editor.jsx b/src/pages/Editor.jsx
index 946292a..a939083 100644
--- a/src/pages/Editor.jsx
+++ b/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>
-      <WorkSpace />
+      <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,138 +683,134 @@ function WorkSpace() {
           break;
       }
     }
-  }, [setSettings]);
+  }, [setSettings, setTransform]);
 
   return (
     <StateContext.Provider value={{ state, setState }}>
-      <TransformContext.Provider value={{ transform, setTransform }}>
-        <TableContext.Provider
-          value={{
-            tables,
-            setTables,
-            addTable,
-            updateTable,
-            updateField,
-            deleteTable,
-            relationships,
-            setRelationships,
-            addRelationship,
-            deleteRelationship,
-          }}
+      <TableContext.Provider
+        value={{
+          tables,
+          setTables,
+          addTable,
+          updateTable,
+          updateField,
+          deleteTable,
+          relationships,
+          setRelationships,
+          addRelationship,
+          deleteRelationship,
+        }}
+      >
+        <AreaContext.Provider
+          value={{ areas, setAreas, updateArea, addArea, deleteArea }}
         >
-          <AreaContext.Provider
-            value={{ areas, setAreas, updateArea, addArea, deleteArea }}
+          <NoteContext.Provider
+            value={{ notes, setNotes, updateNote, addNote, deleteNote }}
           >
-            <NoteContext.Provider
-              value={{ notes, setNotes, updateNote, addNote, deleteNote }}
-            >
-              <TabContext.Provider value={{ tab, setTab }}>
-                <UndoRedoContext.Provider
-                  value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
+            <TabContext.Provider value={{ tab, setTab }}>
+              <UndoRedoContext.Provider
+                value={{ undoStack, redoStack, setUndoStack, setRedoStack }}
+              >
+                <SelectContext.Provider
+                  value={{ selectedElement, setSelectedElement }}
                 >
-                  <SelectContext.Provider
-                    value={{ selectedElement, setSelectedElement }}
-                  >
-                    <TaskContext.Provider
-                      value={{ tasks, setTasks, updateTask }}
+                  <TaskContext.Provider value={{ tasks, setTasks, updateTask }}>
+                    <TypeContext.Provider
+                      value={{
+                        types,
+                        setTypes,
+                        addType,
+                        updateType,
+                        deleteType,
+                      }}
                     >
-                      <TypeContext.Provider
-                        value={{
-                          types,
-                          setTypes,
-                          addType,
-                          updateType,
-                          deleteType,
-                        }}
-                      >
-                        <div className="h-[100vh] flex flex-col overflow-hidden theme">
-                          <ControlPanel
-                            diagramId={id}
-                            setDiagramId={setId}
-                            title={title}
-                            setTitle={setTitle}
-                            lastSaved={lastSaved}
-                            setLastSaved={setLastSaved}
-                          />
-                          <div
-                            className="flex h-full overflow-y-auto"
-                            onMouseUp={() => setResize(false)}
-                            onMouseMove={dragHandler}
-                          >
-                            {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 flex gap-2">
-                                  <div className="popover-theme flex rounded-lg items-center">
-                                    <button
-                                      className="px-3 py-2"
-                                      onClick={() =>
-                                        setTransform((prev) => ({
-                                          ...prev,
-                                          zoom: prev.zoom / 1.2,
-                                        }))
-                                      }
-                                    >
-                                      <i className="bi bi-dash-lg"></i>
-                                    </button>
-                                    <Divider align="center" layout="vertical" />
-                                    <div className="px-3 py-2">
-                                      {parseInt(transform.zoom * 100)}%
-                                    </div>
-                                    <Divider align="center" layout="vertical" />
-                                    <button
-                                      className="px-3 py-2"
-                                      onClick={() =>
-                                        setTransform((prev) => ({
-                                          ...prev,
-                                          zoom: prev.zoom * 1.2,
-                                        }))
-                                      }
-                                    >
-                                      <i className="bi bi-plus-lg"></i>
-                                    </button>
+                      <div className="h-[100vh] flex flex-col overflow-hidden theme">
+                        <ControlPanel
+                          diagramId={id}
+                          setDiagramId={setId}
+                          title={title}
+                          setTitle={setTitle}
+                          lastSaved={lastSaved}
+                          setLastSaved={setLastSaved}
+                        />
+                        <div
+                          className="flex h-full overflow-y-auto"
+                          onMouseUp={() => setResize(false)}
+                          onMouseMove={dragHandler}
+                        >
+                          {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 flex gap-2">
+                                <div className="popover-theme flex rounded-lg items-center">
+                                  <button
+                                    className="px-3 py-2"
+                                    onClick={() =>
+                                      setTransform((prev) => ({
+                                        ...prev,
+                                        zoom: prev.zoom / 1.2,
+                                      }))
+                                    }
+                                  >
+                                    <i className="bi bi-dash-lg"></i>
+                                  </button>
+                                  <Divider align="center" layout="vertical" />
+                                  <div className="px-3 py-2">
+                                    {parseInt(transform.zoom * 100)}%
                                   </div>
-                                  <Tooltip content="Exit">
-                                    <button
-                                      className="px-3 py-2 rounded-lg popover-theme"
-                                      onClick={() => {
-                                        setLayout((prev) => ({
-                                          ...prev,
-                                          sidebar: true,
-                                          toolbar: true,
-                                          header: true,
-                                        }));
-                                        exitFullscreen();
-                                      }}
-                                    >
-                                      <i className="bi bi-fullscreen-exit"></i>
-                                    </button>
-                                  </Tooltip>
+                                  <Divider align="center" layout="vertical" />
+                                  <button
+                                    className="px-3 py-2"
+                                    onClick={() =>
+                                      setTransform((prev) => ({
+                                        ...prev,
+                                        zoom: prev.zoom * 1.2,
+                                      }))
+                                    }
+                                  >
+                                    <i className="bi bi-plus-lg"></i>
+                                  </button>
                                 </div>
-                              )}
-                            </div>
+                                <Tooltip content="Exit">
+                                  <button
+                                    className="px-3 py-2 rounded-lg popover-theme"
+                                    onClick={() => {
+                                      setLayout((prev) => ({
+                                        ...prev,
+                                        sidebar: true,
+                                        toolbar: true,
+                                        header: true,
+                                      }));
+                                      exitFullscreen();
+                                    }}
+                                  >
+                                    <i className="bi bi-fullscreen-exit"></i>
+                                  </button>
+                                </Tooltip>
+                              </div>
+                            )}
                           </div>
                         </div>
-                      </TypeContext.Provider>
-                    </TaskContext.Provider>
-                  </SelectContext.Provider>
-                </UndoRedoContext.Provider>
-              </TabContext.Provider>
-            </NoteContext.Provider>
-          </AreaContext.Provider>
-        </TableContext.Provider>
-      </TransformContext.Provider>
+                      </div>
+                    </TypeContext.Provider>
+                  </TaskContext.Provider>
+                </SelectContext.Provider>
+              </UndoRedoContext.Provider>
+            </TabContext.Provider>
+          </NoteContext.Provider>
+        </AreaContext.Provider>
+      </TableContext.Provider>
     </StateContext.Provider>
   );
 }