From 8554c7b78c99ea180e8494b1d2a80449226cc611 Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Mon, 18 Apr 2022 12:20:08 -0400
Subject: [PATCH] docs: Add some questions surrounding playhead snapping

 * See https://www.notion.so/theatrejs/dragging-from-playhead-does-not-snap-dadac4fa755149cebbcb70a655c3a0d5
---
 .../Right/HorizontallyScrollableArea.tsx          | 15 +++++++++++----
 .../SequenceEditorPanel/RightOverlay/Playhead.tsx |  2 ++
 .../SequenceEditorPanel/positionSnapping.ts       |  2 --
 .../src/uiComponents/PointerEventsHandler.tsx     |  4 ++++
 4 files changed, 17 insertions(+), 6 deletions(-)
 delete mode 100644 theatre/studio/src/panels/SequenceEditorPanel/positionSnapping.ts

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