feat: masks, properties refactor, shaders, storage migrations, and more

1 files changed, 16 insertions, 2 deletions

diff --git a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
index b18db6eb..4f961a0a 100644
--- a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
+++ b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts
@@ -15,9 +15,10 @@ import {
 } from "@/constants/timeline-constants";
 import { RetimeKeyframeCommand } from "@/lib/commands/timeline/element/keyframes/retime-keyframe";
 import { BatchCommand } from "@/lib/commands";
-import type { SelectedKeyframeRef } from "@/types/animation";
-import type { TimelineElement } from "@/types/timeline";
+import type { SelectedKeyframeRef } from "@/lib/animation/types";
+import type { TimelineElement } from "@/lib/timeline";
 import type { Command } from "@/lib/commands/base-command";
+import { registerCanceller } from "@/lib/cancel-interaction";
 export interface KeyframeDragState {
 	isDragging: boolean;
 	draggingKeyframeIds: Set<string>;
@@ -69,6 +70,13 @@ export function useKeyframeDrag({
 		setDragState(initialDragState);
 	}, []);
 
+	const cancelDrag = useCallback(() => {
+		pendingDragRef.current = null;
+		mouseDownXRef.current = null;
+		setIsPendingDrag(false);
+		endDrag();
+	}, [endDrag]);
+
 	const commitDrag = useCallback(
 		({
 			keyframeRefs,
@@ -110,6 +118,12 @@ export function useKeyframeDrag({
 	useEffect(() => {
 		if (!dragState.isDragging && !isPendingDrag) return;
 
+		return registerCanceller({ fn: cancelDrag });
+	}, [dragState.isDragging, isPendingDrag, cancelDrag]);
+
+	useEffect(() => {
+		if (!dragState.isDragging && !isPendingDrag) return;
+
 		const handleMouseMove = ({ clientX }: MouseEvent) => {
 			if (isPendingDrag && pendingDragRef.current) {
 				const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX);