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

src/pages/editor/components/ZoomControls.tsx

@@ -0,0 +1,99 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { Add, Minus, Grid8 } from "iconsax-react";
+import { useEditorStore } from "../store/editorStore";
+
+const ZoomControls = () => {
+  const { zoom, setZoom, zoomIn, zoomOut } = useEditorStore();
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const MIN_ZOOM = 0.5;
+  const MAX_ZOOM = 2;
+  const SLIDER_WIDTH = 80;
+
+  const sliderPosition = ((zoom - MIN_ZOOM) / (MAX_ZOOM - MIN_ZOOM)) * SLIDER_WIDTH;
+
+  const updateZoomFromPosition = useCallback((clientX: number) => {
+    if (!sliderRef.current) return;
+
+    const trackElement = sliderRef.current.querySelector('.slider-track') as HTMLElement;
+    if (!trackElement) return;
+
+    const rect = trackElement.getBoundingClientRect();
+    const x = clientX - rect.left;
+    const clampedX = Math.max(0, Math.min(SLIDER_WIDTH, x));
+    const newZoom = MIN_ZOOM + (clampedX / SLIDER_WIDTH) * (MAX_ZOOM - MIN_ZOOM);
+    setZoom(newZoom);
+  }, [setZoom]);
+
+  const handleSliderMouseDown = (e: React.MouseEvent) => {
+    setIsDragging(true);
+    updateZoomFromPosition(e.clientX);
+  };
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      updateZoomFromPosition(e.clientX);
+    }
+  }, [isDragging, updateZoomFromPosition]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  return (
+    <div className="fixed left-8 bottom-0 -translate-y-1/2 bg-white/30 rounded-full px-4 py-2.5 shadow-lg flex items-center gap-3 z-50">
+      <button
+        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
+        title="نمایش گرید"
+      >
+        <Grid8 size={18} color="black" variant="Outline" />
+      </button>
+
+      <button
+        onClick={zoomOut}
+        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
+        title="کوچک‌نمایی"
+      >
+        <Minus size={18} color="black" />
+      </button>
+
+      <div
+        ref={sliderRef}
+        className="relative flex items-center cursor-pointer"
+        onMouseDown={handleSliderMouseDown}
+      >
+        <div className="slider-track w-20 h-0.5 bg-gray-300 relative">
+          <div
+            className={`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-black cursor-pointer ${!isDragging ? 'transition-all' : ''}`}
+            style={{ left: `${sliderPosition}px` }}
+          />
+        </div>
+      </div>
+
+      <button
+        onClick={zoomIn}
+        className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
+        title="بزرگ‌نمایی"
+      >
+        <Add size={18} color="black" />
+      </button>
+
+      <div className="text-sm font-medium text-black">1/1</div>
+    </div>
+  );
+};
+
+export default ZoomControls;
+

src/pages/editor/store/editorStore.ts

@@ -88,6 +88,10 @@ type EditorStoreType = {
   setStageRef: (ref: React.RefObject<Konva.Stage | null>) => void;
   layerRef: React.RefObject<Konva.Layer | null> | null;
   setLayerRef: (ref: React.RefObject<Konva.Layer | null>) => void;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
 };
 
 const createTableCellId = (row: number, col: number) => `cell-${row}-${col}`;
@@ -350,4 +354,16 @@ export const useEditorStore = create<EditorStoreType>((set, get) => ({
   setStageRef: (ref) => set({ stageRef: ref }),
   layerRef: null,
   setLayerRef: (ref) => set({ layerRef: ref }),
+  zoom: 1,
+  setZoom: (zoom) => set({ zoom }),
+  zoomIn: () => {
+    const state = get();
+    const newZoom = Math.min(state.zoom + 0.1, 2);
+    set({ zoom: newZoom });
+  },
+  zoomOut: () => {
+    const state = get();
+    const newZoom = Math.max(state.zoom - 0.1, 0.5);
+    set({ zoom: newZoom });
+  },
 }));