diff options
Diffstat (limited to 'apps/web/src/hooks/timeline/element/use-keyframe-drag.ts')
| -rw-r--r-- | apps/web/src/hooks/timeline/element/use-keyframe-drag.ts | 18 |
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); |