diff --git a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx index 916a010..402ad2b 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/HorizontallyScrollableArea.tsx @@ -80,7 +80,7 @@ function useDragHandlers( const setIsSeeking = val(layoutP.seeker.setIsSeeking) return { - onDrag(dx: number, _, event) { + onDrag(dx, _, event) { const deltaPos = scaledSpaceToUnitSpace(dx) const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length) @@ -104,8 +104,12 @@ function useDragHandlers( sequence.position = newPosition }, onDragStart(event) { - if (event.target instanceof HTMLInputElement) return false + if (event.target instanceof HTMLInputElement) { + // editing some value + return false + } if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) { + // e.g. marquee selection has shiftKey return false } if ( @@ -113,6 +117,9 @@ function useDragHandlers( .composedPath() .some((el) => el instanceof HTMLElement && el.draggable === true) ) { + // Question: I think to check if we want another descendent element + // to be able to take control of this drag event. + // Question: e.g. for `useDragKeyframe`? return false } @@ -139,9 +146,9 @@ function useDragHandlers( } }, [layoutP, containerEl]) - const [isDragigng] = useDrag(containerEl, handlers) + const [isDragging] = useDrag(containerEl, handlers) - useCursorLock(isDragigng, 'draggingPositionInSequenceEditor', 'ew-resize') + useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize') } function useHandlePanAndZoom( diff --git a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx index fc70d07..848ae20 100644 --- a/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx +++ b/theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx @@ -133,6 +133,8 @@ const Playhead: React.FC<{layoutP: Pointer}> = ({ const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace) + // This may not currently snap correctly like it does when grabbing the "Rod". + // See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5 const gestureHandlers = useMemo((): Parameters[1] => { const setIsSeeking = val(layoutP.seeker.setIsSeeking) diff --git a/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts b/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts deleted file mode 100644 index 00988ef..0000000 --- a/theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts +++ /dev/null @@ -1,2 +0,0 @@ -// export const -export {} diff --git a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx index dbd97e4..011c25c 100644 --- a/theatre/studio/src/uiComponents/PointerEventsHandler.tsx +++ b/theatre/studio/src/uiComponents/PointerEventsHandler.tsx @@ -68,6 +68,10 @@ const PointerEventsHandler: React.FC<{ ) } +/** + * Question: Is this referring to the user's pointer input device? + * Or is this locking related to the playhead "cursor"? + */ export const useCursorLock = ( enabled: boolean, className: string,