fix preview snapping threshold

2 files changed, 24 insertions, 3 deletions

diff --git a/apps/web/src/hooks/use-preview-interaction.ts b/apps/web/src/hooks/use-preview-interaction.ts
index 2bb33f21..d29f2a4b 100644
--- a/apps/web/src/hooks/use-preview-interaction.ts
+++ b/apps/web/src/hooks/use-preview-interaction.ts
@@ -4,9 +4,16 @@ import { useShiftKey } from "@/hooks/use-shift-key";
 import type { TextElement, Transform } from "@/types/timeline";
 import { getVisibleElementsWithBounds } from "@/lib/preview/element-bounds";
 import { hitTest } from "@/lib/preview/hit-test";
-import { screenToCanvas } from "@/lib/preview/preview-coords";
+import {
+	screenPixelsToLogicalThreshold,
+	screenToCanvas,
+} from "@/lib/preview/preview-coords";
 import { isVisualElement } from "@/lib/timeline/element-utils";
-import { snapPosition, type SnapLine } from "@/lib/preview/preview-snap";
+import {
+	SNAP_THRESHOLD_SCREEN_PIXELS,
+	snapPosition,
+	type SnapLine,
+} from "@/lib/preview/preview-snap";
 
 const MIN_DRAG_DISTANCE = 0.5;
 
@@ -230,11 +237,16 @@ export function usePreviewInteraction({
 			};
 
 			const shouldSnap = !isShiftHeldRef.current;
+			const snapThreshold = screenPixelsToLogicalThreshold({
+				canvas: canvasRef.current,
+				screenPixels: SNAP_THRESHOLD_SCREEN_PIXELS,
+			});
 			const { snappedPosition, activeLines } = shouldSnap
 				? snapPosition({
 						proposedPosition,
 						canvasSize,
 						elementSize: dragStateRef.current.bounds,
+						snapThreshold,
 					})
 				: {
 						snappedPosition: proposedPosition,
diff --git a/apps/web/src/hooks/use-transform-handles.ts b/apps/web/src/hooks/use-transform-handles.ts
index 37ef6d5f..8be6420c 100644
--- a/apps/web/src/hooks/use-transform-handles.ts
+++ b/apps/web/src/hooks/use-transform-handles.ts
@@ -6,9 +6,13 @@ import {
 	getVisibleElementsWithBounds,
 	type ElementWithBounds,
 } from "@/lib/preview/element-bounds";
-import { screenToCanvas } from "@/lib/preview/preview-coords";
+import {
+	screenPixelsToLogicalThreshold,
+	screenToCanvas,
+} from "@/lib/preview/preview-coords";
 import {
 	MIN_SCALE,
+	SNAP_THRESHOLD_SCREEN_PIXELS,
 	snapRotation,
 	snapScale,
 	type SnapLine,
@@ -228,6 +232,10 @@ export function useTransformHandles({
 				);
 
 				const canvasSize = editor.project.getActive().settings.canvasSize;
+				const snapThreshold = screenPixelsToLogicalThreshold({
+					canvas: canvasRef.current,
+					screenPixels: SNAP_THRESHOLD_SCREEN_PIXELS,
+				});
 				const shouldSnap = !isShiftHeldRef.current;
 				const { snappedScale, activeLines } = shouldSnap
 					? snapScale({
@@ -236,6 +244,7 @@ export function useTransformHandles({
 							baseWidth,
 							baseHeight,
 							canvasSize,
+							snapThreshold,
 						})
 					: { snappedScale: proposedScale, activeLines: [] as SnapLine[] };