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] }));