zoom control

src/pages/editor/components/EditorCanvas.tsx

@@ -6,6 +6,7 @@ import { useDrawingHandlers } from "./canvas/useDrawingHandlers";
 import { useStageSize } from "./canvas/useStageSize";
 import ObjectRenderer from "./canvas/ObjectRenderer";
 import CellEditor from "@/components/CellEditor";
+import ZoomControls from "./ZoomControls";
 
 const EditorCanvas = () => {
   const stageRef = useRef<Konva.Stage>(null);
@@ -26,6 +27,7 @@ const EditorCanvas = () => {
     applyTableResize,
     setStageRef,
     setLayerRef,
+    zoom,
   } = useEditorStore();
 
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
@@ -150,15 +152,17 @@ const EditorCanvas = () => {
     };
   }, [selectedObjectId, objects, transformerRef, applyTableResize, updateObject]);
 
+  const finalScale = stageSize.scale * zoom;
+
   return (
-    <div className="flex-1 flex items-center justify-center bg-gray-100 pb-8 overflow-auto">
+    <div className="flex-1 flex items-center justify-center pb-8 overflow-auto relative">
       <div className="shadow-lg mt-8">
         <Stage
           ref={stageRef}
-          width={stageSize.width * stageSize.scale}
-          height={stageSize.height * stageSize.scale}
-          scaleX={stageSize.scale}
-          scaleY={stageSize.scale}
+          width={stageSize.width * finalScale}
+          height={stageSize.height * finalScale}
+          scaleX={finalScale}
+          scaleY={finalScale}
           onMouseDown={handleStageMouseDown}
           onMouseMove={handleStageMouseMove}
           onMouseUp={handleStageMouseUp}
@@ -241,6 +245,7 @@ const EditorCanvas = () => {
           />
         );
       })()}
+      <ZoomControls />
     </div>
   );
 };