Fix onZoomChange reference error - use ref to avoid closure issues

This commit is contained in:
Claude
2026-01-26 05:14:11 +00:00
parent 2c9211355d
commit b185cd549c
+10 -2
View File
@@ -19,6 +19,12 @@ const ImageCanvas = ({
const [isTransformMode, setIsTransformMode] = useState(false); const [isTransformMode, setIsTransformMode] = useState(false);
const [currentZoom, setCurrentZoom] = useState(zoom); const [currentZoom, setCurrentZoom] = useState(zoom);
const lassoPoints = useRef([]); const lassoPoints = useRef([]);
const onZoomChangeRef = useRef(onZoomChange);
// Keep ref updated
useEffect(() => {
onZoomChangeRef.current = onZoomChange;
}, [onZoomChange]);
useEffect(() => { useEffect(() => {
if (!canvasRef.current) return; if (!canvasRef.current) return;
@@ -82,7 +88,9 @@ const ImageCanvas = ({
canvas.zoomToPoint({ x: pointer.x, y: pointer.y }, newZoom); canvas.zoomToPoint({ x: pointer.x, y: pointer.y }, newZoom);
setCurrentZoom(newZoom); setCurrentZoom(newZoom);
onZoomChange?.(newZoom); if (onZoomChangeRef.current) {
onZoomChangeRef.current(newZoom);
}
}; };
canvas.on('mouse:wheel', handleWheel); canvas.on('mouse:wheel', handleWheel);
@@ -92,7 +100,7 @@ const ImageCanvas = ({
canvas.off('mouse:wheel', handleWheel); canvas.off('mouse:wheel', handleWheel);
canvas.dispose(); canvas.dispose();
}; };
}, [onZoomChange]); }, []); // Empty dependency array - only run once on mount
// Load image when URL changes // Load image when URL changes
useEffect(() => { useEffect(() => {