Snapping now works in selections too

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Connector.tsx

@@ -172,20 +172,23 @@ function useDragKeyframe(node: HTMLDivElement | null, props: IProps) {
     return {
       lockCursorTo: 'ew-resize',
       onDragStart(event) {
-        if (propsRef.current.selection) {
+        const props = propsRef.current
-          const {selection, leaf} = propsRef.current
+        if (props.selection) {
+          const {selection, leaf} = props
           const {sheetObject} = leaf
           selectionDragHandlers = selection.getDragHandlers({
             ...sheetObject.address,
             pathToProp: leaf.pathToProp,
             trackId: leaf.trackId,
-            keyframeId: propsRef.current.keyframe.id,
+            keyframeId: props.keyframe.id,
+            positionAtStartOfDrag:
+              props.trackData.keyframes[props.index].position,
           })
           selectionDragHandlers.onDragStart?.(event)
           return
         }
 
-        propsAtStartOfDrag = propsRef.current
+        propsAtStartOfDrag = props
         sequence = val(propsAtStartOfDrag.layoutP.sheet).getSequence()
 
         toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace)

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/Dot.tsx

@@ -155,20 +155,23 @@ function useDragKeyframe(
     return {
       onDragStart(event) {
         setIsDragging(true)
-        if (propsRef.current.selection) {
+        const props = propsRef.current
-          const {selection, leaf} = propsRef.current
+        if (props.selection) {
+          const {selection, leaf} = props
           const {sheetObject} = leaf
           selectionDragHandlers = selection.getDragHandlers({
             ...sheetObject.address,
             pathToProp: leaf.pathToProp,
             trackId: leaf.trackId,
-            keyframeId: propsRef.current.keyframe.id,
+            keyframeId: props.keyframe.id,
+            positionAtStartOfDrag:
+              props.trackData.keyframes[props.index].position,
           })
           selectionDragHandlers.onDragStart?.(event)
           return
         }
 
-        propsAtStartOfDrag = propsRef.current
+        propsAtStartOfDrag = props
         toUnitSpace = val(propsAtStartOfDrag.layoutP.scaledSpace.toUnitSpace)
       },
       onDrag(dx, dy, event) {

theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetSelectionView.tsx

@@ -205,12 +205,27 @@ namespace utils {
           onDragStart() {
             toUnitSpace = val(layoutP.scaledSpace.toUnitSpace)
           },
-          onDrag(dx) {
+          onDrag(dx, _, event) {
-            const delta = toUnitSpace(dx)
+            let delta = toUnitSpace(dx)
             if (tempTransaction) {
               tempTransaction.discard()
               tempTransaction = undefined
             }
+
+            const snapTarget = event.composedPath().find(
+              (el): el is Element =>
+                el instanceof Element &&
+                // el !== node &&
+                el.hasAttribute('data-pos'),
+            )
+
+            if (snapTarget) {
+              const snapPos = parseFloat(snapTarget.getAttribute('data-pos')!)
+              if (isFinite(snapPos)) {
+                delta = snapPos - origin.positionAtStartOfDrag
+              }
+            }
+
             tempTransaction = getStudio()!.tempTransaction(({stateEditors}) => {
               const transformKeyframes =
                 stateEditors.coreByProject.historic.sheetsById.sequence

theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/BasicKeyframedTrack/KeyframeEditor/Dot.tsx

@@ -150,13 +150,6 @@ function useDragKeyframe(
             propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index - 1]
 
           if (prev && Math.abs(original.value - prev.value) > 0) {
-            // cur.handles[1] = preserveLeftHandle(
-            //   cur.handles[1],
-            //   original.value,
-            //   cur.value,
-            //   prev.value,
-            //   prev.value,
-            // )
             const newPrev: Keyframe = {...prev, handles: [...prev.handles]}
             updatedKeyframes.push(newPrev)
             newPrev.handles[3] = preserveRightHandle(
@@ -171,14 +164,6 @@ function useDragKeyframe(
             propsAtStartOfDrag.trackData.keyframes[propsAtStartOfDrag.index + 1]
 
           if (next && Math.abs(original.value - next.value) > 0) {
-            // cur.handles[3] = preserveRightHandle(
-            //   cur.handles[3],
-            //   original.value,
-            //   cur.value,
-            //   next.value,
-            //   next.value,
-            // )
-
             const newNext: Keyframe = {...next, handles: [...next.handles]}
             updatedKeyframes.push(newNext)
             newNext.handles[1] = preserveLeftHandle(

theatre/studio/src/panels/SequenceEditorPanel/layout/layout.ts

@@ -52,7 +52,11 @@ export type DopeSheetSelection = {
     }
   >
   getDragHandlers(
-    origin: PropAddress & {trackId: string; keyframeId: string},
+    origin: PropAddress & {
+      trackId: string
+      keyframeId: string
+      positionAtStartOfDrag: number
+    },
   ): Parameters<typeof useDrag>[1]
   delete(): void
 }

theatre/studio/src/store/stateEditors.ts

@@ -547,7 +547,6 @@ namespace stateEditors {
             const track = _getTrack(p)
             if (!track) return
             const initialKeyframes = current(track.keyframes)
-            // debugger
 
             const selectedKeyframes = initialKeyframes.filter(
               (kf) => p.keyframeIds.indexOf(kf.id) !== -1,