docs: Add some questions surrounding playhead snapping

* See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5
This commit is contained in:
Cole Lawrence 2022-04-18 12:20:08 -04:00
parent 48d0d18e10
commit 8554c7b78c
4 changed files with 17 additions and 6 deletions

View file

@ -80,7 +80,7 @@ function useDragHandlers(
const setIsSeeking = val(layoutP.seeker.setIsSeeking) const setIsSeeking = val(layoutP.seeker.setIsSeeking)
return { return {
onDrag(dx: number, _, event) { onDrag(dx, _, event) {
const deltaPos = scaledSpaceToUnitSpace(dx) const deltaPos = scaledSpaceToUnitSpace(dx)
const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length) const unsnappedPos = clamp(posBeforeSeek + deltaPos, 0, sequence.length)
@ -104,8 +104,12 @@ function useDragHandlers(
sequence.position = newPosition sequence.position = newPosition
}, },
onDragStart(event) { 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) { if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
// e.g. marquee selection has shiftKey
return false return false
} }
if ( if (
@ -113,6 +117,9 @@ function useDragHandlers(
.composedPath() .composedPath()
.some((el) => el instanceof HTMLElement && el.draggable === true) .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 return false
} }
@ -139,9 +146,9 @@ function useDragHandlers(
} }
}, [layoutP, containerEl]) }, [layoutP, containerEl])
const [isDragigng] = useDrag(containerEl, handlers) const [isDragging] = useDrag(containerEl, handlers)
useCursorLock(isDragigng, 'draggingPositionInSequenceEditor', 'ew-resize') useCursorLock(isDragging, 'draggingPositionInSequenceEditor', 'ew-resize')
} }
function useHandlePanAndZoom( function useHandlePanAndZoom(

View file

@ -133,6 +133,8 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
const scaledSpaceToUnitSpace = val(layoutP.scaledSpace.toUnitSpace) 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<typeof useDrag>[1] => { const gestureHandlers = useMemo((): Parameters<typeof useDrag>[1] => {
const setIsSeeking = val(layoutP.seeker.setIsSeeking) const setIsSeeking = val(layoutP.seeker.setIsSeeking)

View file

@ -1,2 +0,0 @@
// export const
export {}

View file

@ -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 = ( export const useCursorLock = (
enabled: boolean, enabled: boolean,
className: string, className: string,