hamid zarghami
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
import { useState, useRef, useEffect, useCallback } from "react";
|
|
import { AddCircle, MinusCirlce } 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));
|
|
// وقتی به راست میکشیم (clampedX بیشتر)، zoom باید بیشتر شود
|
|
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 right-[390px] mx-auto w-fit bottom-1 bg-white/20 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={zoomIn}
|
|
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
|
|
title="بزرگنمایی"
|
|
>
|
|
<AddCircle 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={zoomOut}
|
|
className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
|
|
title="کوچکنمایی"
|
|
>
|
|
<MinusCirlce size={18} color="black" />
|
|
</button>
|
|
|
|
|
|
|
|
<div className="text-sm font-medium text-black">1/1</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ZoomControls;
|
|
|