diff --git a/src/pages/LearningMapsPage.tsx b/src/pages/LearningMapsPage.tsx index 39fcbb6..2a9648a 100644 --- a/src/pages/LearningMapsPage.tsx +++ b/src/pages/LearningMapsPage.tsx @@ -60,6 +60,7 @@ function getMidpoint(a: Point, b: Point) { } function clampScale(value: number) { + if (!Number.isFinite(value)) return 1 return Math.min(5, Math.max(1, value)) } @@ -246,12 +247,20 @@ export function LearningMapsPage() { const [first, second] = Array.from(pointersRef.current.values()) const distance = getDistance(first, second) const midpoint = getMidpoint(first, second) - const nextScale = clampScale(pinchRef.current.scale * (distance / pinchRef.current.distance)) + const pinch = pinchRef.current + + if (!Number.isFinite(distance) || distance <= 0 || pinch.distance <= 0) { + return + } + + const nextScale = clampScale(pinch.scale * (distance / pinch.distance)) + const deltaX = midpoint.x - pinch.midpoint.x + const deltaY = midpoint.y - pinch.midpoint.y setScale(nextScale) setOffset((current) => ({ - x: current.x + (midpoint.x - pinchRef.current!.midpoint.x) * 0.8, - y: current.y + (midpoint.y - pinchRef.current!.midpoint.y) * 0.8, + x: current.x + deltaX * 0.8, + y: current.y + deltaY * 0.8, })) pinchRef.current.midpoint = midpoint return