Fix onZoomChange reference error - use ref to avoid closure issues
This commit is contained in:
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user