diff options
Diffstat (limited to 'apps/web/src/hooks/timeline/element')
3 files changed, 25 insertions, 19 deletions
diff --git a/apps/web/src/hooks/timeline/element/use-element-interaction.ts b/apps/web/src/hooks/timeline/element/use-element-interaction.ts index 3e0a6997..193379ed 100644 --- a/apps/web/src/hooks/timeline/element/use-element-interaction.ts +++ b/apps/web/src/hooks/timeline/element/use-element-interaction.ts @@ -10,12 +10,10 @@ import { useEditor } from "@/hooks/use-editor"; import { useShiftKey } from "@/hooks/use-shift-key"; import { useTimelineStore } from "@/stores/timeline-store"; import { useElementSelection } from "@/hooks/timeline/element/use-element-selection"; -import { - DRAG_THRESHOLD_PX, - TIMELINE_CONSTANTS, -} from "@/constants/timeline-constants"; +import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale"; +import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction"; import { snapTimeToFrame } from "opencut-wasm"; -import { computeDropTarget } from "@/lib/timeline/drop-utils"; +import { computeDropTarget } from "@/components/editor/panels/timeline/drop-target"; import { getMouseTimeFromClientX } from "@/lib/timeline/drag-utils"; import { generateUUID } from "@/utils/id"; import { snapElementEdge, type SnapPoint } from "@/lib/timeline/snap-utils"; @@ -70,7 +68,7 @@ function getClickOffsetTime({ zoomLevel: number; }): number { const clickOffsetX = clientX - elementRect.left; - return clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel); + return clickOffsetX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel); } function getVerticalDragDirection({ @@ -136,7 +134,7 @@ function getDragDropTarget({ playheadTime: snappedTime, isExternalDrop: false, elementDuration, - pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND, + pixelsPerSecond: BASE_TIMELINE_PIXELS_PER_SECOND, zoomLevel, startTimeOverride: snappedTime, excludeElementId: movingElement.id, @@ -288,7 +286,10 @@ export function useElementInteraction({ if (isPendingDrag && pendingDragRef.current) { const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX); const deltaY = Math.abs(clientY - pendingDragRef.current.startMouseY); - if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) { + if ( + deltaX > TIMELINE_DRAG_THRESHOLD_PX || + deltaY > TIMELINE_DRAG_THRESHOLD_PX + ) { const activeProject = editor.project.getActive(); if (!activeProject) return; const scrollLeft = scrollContainer.scrollLeft; @@ -416,7 +417,10 @@ export function useElementInteraction({ if (mouseDownLocationRef.current) { const deltaX = Math.abs(clientX - mouseDownLocationRef.current.x); const deltaY = Math.abs(clientY - mouseDownLocationRef.current.y); - if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) { + if ( + deltaX <= TIMELINE_DRAG_THRESHOLD_PX && + deltaY <= TIMELINE_DRAG_THRESHOLD_PX + ) { mouseDownLocationRef.current = null; endDrag(); onSnapPointChange?.(null); @@ -596,7 +600,10 @@ export function useElementInteraction({ if (mouseDownLocationRef.current) { const deltaX = Math.abs(event.clientX - mouseDownLocationRef.current.x); const deltaY = Math.abs(event.clientY - mouseDownLocationRef.current.y); - if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) { + if ( + deltaX > TIMELINE_DRAG_THRESHOLD_PX || + deltaY > TIMELINE_DRAG_THRESHOLD_PX + ) { mouseDownLocationRef.current = null; return; } diff --git a/apps/web/src/hooks/timeline/element/use-element-resize.ts b/apps/web/src/hooks/timeline/element/use-element-resize.ts index 26bd8ef9..890820d7 100644 --- a/apps/web/src/hooks/timeline/element/use-element-resize.ts +++ b/apps/web/src/hooks/timeline/element/use-element-resize.ts @@ -1,5 +1,5 @@ import { useState, useEffect, useRef, useCallback } from "react"; -import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; +import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale"; import { snapTimeToFrame } from "opencut-wasm"; import type { TimelineElement, TimelineTrack } from "@/lib/timeline"; import { useEditor } from "@/hooks/use-editor"; @@ -190,7 +190,7 @@ export function useTimelineElementResize({ const deltaX = clientX - resizing.startX; let deltaTime = - deltaX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel); + deltaX / (BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel); let resizeSnapPoint: SnapPoint | null = null; const projectFps = editor.project.getActive().settings.fps; 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 e0bf8084..bbe843f2 100644 --- a/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts +++ b/apps/web/src/hooks/timeline/element/use-keyframe-drag.ts @@ -9,10 +9,8 @@ import { useEditor } from "@/hooks/use-editor"; import { useKeyframeSelection } from "./use-keyframe-selection"; import { snapTimeToFrame, getSnappedSeekTime } from "opencut-wasm"; import { timelineTimeToSnappedPixels } from "@/lib/timeline"; -import { - DRAG_THRESHOLD_PX, - TIMELINE_CONSTANTS, -} from "@/constants/timeline-constants"; +import { BASE_TIMELINE_PIXELS_PER_SECOND } from "@/lib/timeline/scale"; +import { TIMELINE_DRAG_THRESHOLD_PX } from "@/components/editor/panels/timeline/interaction"; import { RetimeKeyframeCommand } from "@/lib/commands/timeline/element/keyframes/retime-keyframe"; import { BatchCommand } from "@/lib/commands"; import type { SelectedKeyframeRef } from "@/lib/animation/types"; @@ -64,7 +62,7 @@ export function useKeyframeDrag({ const activeProject = editor.project.getActive(); const fps = activeProject.settings.fps; - const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel; + const pixelsPerSecond = BASE_TIMELINE_PIXELS_PER_SECOND * zoomLevel; const endDrag = useCallback(() => { setDragState(initialDragState); @@ -127,7 +125,7 @@ export function useKeyframeDrag({ const handleMouseMove = ({ clientX }: MouseEvent) => { if (isPendingDrag && pendingDragRef.current) { const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX); - if (deltaX <= DRAG_THRESHOLD_PX) return; + if (deltaX <= TIMELINE_DRAG_THRESHOLD_PX) return; const pending = pendingDragRef.current; pendingDragRef.current = null; @@ -248,7 +246,8 @@ export function useKeyframeDrag({ const wasDrag = mouseDownXRef.current !== null && - Math.abs(event.clientX - mouseDownXRef.current) > DRAG_THRESHOLD_PX; + Math.abs(event.clientX - mouseDownXRef.current) > + TIMELINE_DRAG_THRESHOLD_PX; mouseDownXRef.current = null; if (wasDrag) return; |