@hyperframes/studio 0.6.72 → 0.6.74

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 /**
  * Gesture handling for DomEditOverlay.
  * Owns: onPointerMove, onPointerUp, clearPointerState.
@@ -23,7 +24,12 @@ import {
   restoreStudioPathOffset,
   restoreStudioRotation,
 } from "./manualEdits";
-import { type GroupOverlayItem, type OverlayRect, toOverlayRect } from "./domEditOverlayGeometry";
+import {
+  type GroupOverlayItem,
+  type OverlayRect,
+  resolveDomEditGroupOverlayRect,
+  toOverlayRect,
+} from "./domEditOverlayGeometry";
 import {
   BLOCKED_MOVE_THRESHOLD_PX,
   type BlockedMoveState,
@@ -39,6 +45,13 @@ import {
   startGesture as _startGesture,
   startGroupDrag as _startGroupDrag,
 } from "./domEditOverlayStartGesture";
+import {
+  resolveSnapAdjustment,
+  resolveResizeSnapAdjustment,
+  resolveEquidistanceGuides,
+  SNAP_THRESHOLD_PX,
+} from "./snapEngine";
+import type { SnapGuidesState } from "./SnapGuideOverlay";
 
 // Refs are stable across renders; values are read via .current.
 export type UseDomEditOverlayGesturesOptions = {
@@ -79,6 +92,7 @@ export type UseDomEditOverlayGesturesOptions = {
     e: React.MouseEvent<HTMLDivElement>,
     o?: { preferClipAncestor?: boolean },
   ) => void;
+  snapGuidesRef: RefObject<SnapGuidesState | null>;
 };
 
 export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGesturesOptions) {
@@ -111,6 +125,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     options?: { selection?: DomEditSelection; rect?: OverlayRect | null },
   ) => _startGesture(kind, e, opts, options);
 
+  // fallow-ignore-next-line complexity
   const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
     const g = opts.gestureRef.current;
     const groupG = opts.groupGestureRef.current;
@@ -133,8 +148,48 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
 
     if (groupG) {
-      const dx = e.clientX - groupG.startX;
-      const dy = e.clientY - groupG.startY;
+      let dx = e.clientX - groupG.startX;
+      let dy = e.clientY - groupG.startY;
+
+      const sc = groupG.snapContext;
+      if (sc?.snapEnabled && sc.targets.length > 0) {
+        const groupBounds = resolveDomEditGroupOverlayRect(
+          groupG.originItems.map((item) => item.rect),
+        );
+        if (groupBounds) {
+          const allTargets = sc.compositionTarget
+            ? [...sc.targets, sc.compositionTarget]
+            : sc.targets;
+          const snap = resolveSnapAdjustment({
+            movingRect: groupBounds,
+            proposedDx: dx,
+            proposedDy: dy,
+            targets: allTargets,
+            gridEdges: sc.gridEdges ?? undefined,
+            threshold: SNAP_THRESHOLD_PX,
+            disabled: e.altKey,
+          });
+          dx = snap.dx;
+          dy = snap.dy;
+          const movedRect = {
+            left: groupBounds.left + dx,
+            top: groupBounds.top + dy,
+            width: groupBounds.width,
+            height: groupBounds.height,
+          };
+          const spacingGuides = e.altKey
+            ? []
+            : resolveEquidistanceGuides({
+                movingRect: movedRect,
+                targets: allTargets,
+                threshold: SNAP_THRESHOLD_PX,
+              });
+          opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides };
+        }
+      }
+      groupG.lastSnappedDx = dx;
+      groupG.lastSnappedDy = dy;
+
       setDraftGroupOverlayItems(
         groupG.originItems.map((item) => ({
           ...item,
@@ -146,8 +201,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
 
     if (!g || !sel) return;
-    const dx = e.clientX - g.startX;
-    const dy = e.clientY - g.startY;
+    let dx = e.clientX - g.startX;
+    let dy = e.clientY - g.startY;
 
     if (g.kind === "rotate") {
       applyStudioRotationDraft(
@@ -167,6 +222,46 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
 
     if (g.kind === "drag") {
+      const sc = g.snapContext;
+      if (sc?.snapEnabled && sc.targets.length > 0) {
+        const movingRect = {
+          left: g.originLeft,
+          top: g.originTop,
+          width: g.originWidth,
+          height: g.originHeight,
+        };
+        const allTargets = sc.compositionTarget
+          ? [...sc.targets, sc.compositionTarget]
+          : sc.targets;
+        const snap = resolveSnapAdjustment({
+          movingRect,
+          proposedDx: dx,
+          proposedDy: dy,
+          targets: allTargets,
+          gridEdges: sc.gridEdges ?? undefined,
+          threshold: SNAP_THRESHOLD_PX,
+          disabled: e.altKey,
+        });
+        dx = snap.dx;
+        dy = snap.dy;
+        const movedRect = {
+          left: movingRect.left + dx,
+          top: movingRect.top + dy,
+          width: movingRect.width,
+          height: movingRect.height,
+        };
+        const spacingGuides = e.altKey
+          ? []
+          : resolveEquidistanceGuides({
+              movingRect: movedRect,
+              targets: allTargets,
+              threshold: SNAP_THRESHOLD_PX,
+            });
+        opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides };
+      }
+      g.lastSnappedDx = dx;
+      g.lastSnappedDy = dy;
+
       const nextBoxLeft = g.originLeft + dx;
       const nextBoxTop = g.originTop + dy;
       setDraftOverlayRect({
@@ -184,6 +279,32 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
       if (!box) return;
+
+      const sc = g.snapContext;
+      if (sc?.snapEnabled && sc.targets.length > 0) {
+        const movingRect = {
+          left: g.originLeft,
+          top: g.originTop,
+          width: g.originWidth,
+          height: g.originHeight,
+        };
+        const allTargets = sc.compositionTarget
+          ? [...sc.targets, sc.compositionTarget]
+          : sc.targets;
+        const snap = resolveResizeSnapAdjustment({
+          movingRect,
+          proposedDx: dx,
+          proposedDy: dy,
+          targets: allTargets,
+          gridEdges: sc.gridEdges ?? undefined,
+          threshold: SNAP_THRESHOLD_PX,
+          disabled: e.altKey,
+        });
+        dx = snap.dx;
+        dy = snap.dy;
+        opts.snapGuidesRef.current = { guides: snap.guides, spacingGuides: [] };
+      }
+
       const nextSize = resolveDomEditResizeGesture({
         originWidth: g.originWidth,
         originHeight: g.originHeight,
@@ -223,7 +344,9 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
   };
 
+  // fallow-ignore-next-line complexity
   const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    opts.snapGuidesRef.current = null;
     const g = opts.gestureRef.current;
     const groupG = opts.groupGestureRef.current;
     const sel = g?.selection ?? opts.selectionRef.current;
@@ -233,13 +356,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     if (groupG) {
       opts.groupGestureRef.current = null;
       opts.rafPausedRef.current = false;
-      const dx = e.clientX - groupG.startX;
-      const dy = e.clientY - groupG.startY;
-      if (Math.hypot(dx, dy) < BLOCKED_MOVE_THRESHOLD_PX) {
+      const rawDx = e.clientX - groupG.startX;
+      const rawDy = e.clientY - groupG.startY;
+      if (Math.hypot(rawDx, rawDy) < BLOCKED_MOVE_THRESHOLD_PX) {
         restoreGroupPathOffsets(groupG);
         opts.suppressNextBoxClickRef.current = true;
         return;
       }
+      const dx = groupG.lastSnappedDx ?? rawDx;
+      const dy = groupG.lastSnappedDy ?? rawDy;
       setDraftGroupOverlayItems(
         groupG.originItems.map((item) => ({
           ...item,
@@ -327,8 +452,8 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         })
         .finally(() => endStudioManualEditGesture(sel.element, g.manualEditDragToken));
     } else if (g.kind === "drag") {
-      const dx = e.clientX - g.startX;
-      const dy = e.clientY - g.startY;
+      const dx = g.lastSnappedDx ?? e.clientX - g.startX;
+      const dy = g.lastSnappedDy ?? e.clientY - g.startY;
       if (!g.pathOffsetMember) return;
       const finalOffset = applyManualOffsetDragCommit(g.pathOffsetMember, dx, dy);
       const nextBoxLeft = g.originLeft + dx;
@@ -372,7 +497,9 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     }
   };
 
+  // fallow-ignore-next-line complexity
   const clearPointerState = (selectionRef: RefObject<DomEditSelection | null>) => {
+    opts.snapGuidesRef.current = null;
     const groupG = opts.groupGestureRef.current;
     if (groupG) restoreGroupPathOffsets(groupG);
     const g = opts.gestureRef.current;

package/src/components/nle/NLELayout.tsx

@@ -69,7 +69,13 @@ interface NLELayoutProps {
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
+  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
+  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -117,7 +123,13 @@ export const NLELayout = memo(function NLELayout({
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
+  onSplitElement,
   onSelectTimelineElement,
+  onDeleteKeyframe,
+  onDeleteAllKeyframes,
+  onChangeKeyframeEase,
+  onMoveKeyframe,
+  onToggleKeyframeAtPlayhead,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -447,7 +459,13 @@ export const NLELayout = memo(function NLELayout({
                 onMoveElement={onMoveElement}
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}
+                onSplitElement={onSplitElement}
                 onSelectElement={onSelectTimelineElement}
+                onDeleteKeyframe={onDeleteKeyframe}
+                onDeleteAllKeyframes={onDeleteAllKeyframes}
+                onChangeKeyframeEase={onChangeKeyframeEase}
+                onMoveKeyframe={onMoveKeyframe}
+                onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

package/src/contexts/DomEditContext.tsx

@@ -65,6 +65,14 @@ export function DomEditProvider({
     handleGsapUpdateFromProperty,
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
+    handleGsapAddKeyframe,
+    handleGsapRemoveKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    handleResetSelectedElementKeyframes,
+    commitAnimatedProperty,
+    invalidateGsapCache,
+    previewIframeRef,
   },
   children,
 }: {
@@ -125,6 +133,14 @@ export function DomEditProvider({
       handleGsapUpdateFromProperty,
       handleGsapAddFromProperty,
       handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      commitAnimatedProperty,
+      invalidateGsapCache,
+      previewIframeRef,
     }),
     [
       domEditSelection,
@@ -179,6 +195,14 @@ export function DomEditProvider({
       handleGsapUpdateFromProperty,
       handleGsapAddFromProperty,
       handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      commitAnimatedProperty,
+      invalidateGsapCache,
+      previewIframeRef,
     ],
   );
   return <DomEditContext value={stable}>{children}</DomEditContext>;