zoom control

2025-12-31 10:13:55 +03:30
parent 7dddac490d
commit efcb9cf6d2
3 changed files with 125 additions and 5 deletions
@@ -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;
+