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)
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(

View file

@ -133,6 +133,8 @@ const Playhead: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
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 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 = (
enabled: boolean,
className: string,