@hyperframes/studio 0.6.73 → 0.6.75

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/editor/useLayerDrag.ts

@@ -0,0 +1,213 @@
+import { useRef, useState, useCallback } from "react";
+import type { DomEditLayerItem } from "./domEditingTypes";
+
+const DRAG_THRESHOLD_PX = 4;
+
+interface DragState {
+  pointerId: number;
+  startY: number;
+  dragLayerIndex: number;
+  siblingIndices: number[];
+  fromSiblingPos: number;
+  insertSiblingPos: number;
+  siblingRects: DOMRect[];
+  activated: boolean;
+}
+
+export interface LayerReorderEvent {
+  siblingLayers: DomEditLayerItem[];
+  fromIndex: number;
+  toIndex: number;
+}
+
+export interface UseLayerDragOptions {
+  visibleLayers: DomEditLayerItem[];
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+  onReorder: (event: LayerReorderEvent) => void;
+  onSingleSibling?: () => void;
+}
+
+export interface UseLayerDragReturn {
+  dragKey: string | null;
+  insertionLineY: number | null;
+  handleRowPointerDown: (layerIndex: number, e: React.PointerEvent) => void;
+  handleContainerPointerMove: (e: React.PointerEvent) => void;
+  handleContainerPointerUp: () => void;
+}
+
+export function isLayerDraggable(layer: DomEditLayerItem): boolean {
+  if (!(layer.selector || layer.id)) return false;
+  let el: HTMLElement | null = layer.element;
+  while (el) {
+    if (el.hasAttribute("data-timeline-locked")) return false;
+    el = el.parentElement;
+  }
+  return true;
+}
+
+function findSiblingIndices(visibleLayers: DomEditLayerItem[], layerIndex: number): number[] {
+  const depth = visibleLayers[layerIndex].depth;
+  const indices: number[] = [];
+
+  let start = layerIndex;
+  while (start > 0) {
+    start--;
+    if (visibleLayers[start].depth < depth) {
+      start++;
+      break;
+    }
+  }
+
+  for (let i = start; i < visibleLayers.length; i++) {
+    const d = visibleLayers[i].depth;
+    if (d < depth) break;
+    if (d === depth) indices.push(i);
+  }
+
+  return indices;
+}
+
+function measureSiblingRects(container: HTMLDivElement, siblingIndices: number[]): DOMRect[] {
+  const rows = container.querySelectorAll<HTMLElement>("[data-layer-index]");
+  const rects: DOMRect[] = [];
+  for (const idx of siblingIndices) {
+    for (const row of rows) {
+      if (row.dataset.layerIndex === String(idx)) {
+        rects.push(row.getBoundingClientRect());
+        break;
+      }
+    }
+  }
+  return rects;
+}
+
+function computeInsertionPos(clientY: number, siblingRects: DOMRect[]): number {
+  if (siblingRects.length === 0) return 0;
+
+  if (clientY <= siblingRects[0].top + siblingRects[0].height / 2) return 0;
+
+  for (let i = 0; i < siblingRects.length - 1; i++) {
+    const midpoint = (siblingRects[i].bottom + siblingRects[i + 1].top) / 2;
+    if (clientY <= midpoint) return i + 1;
+  }
+
+  const last = siblingRects[siblingRects.length - 1];
+  if (clientY <= last.top + last.height / 2) return siblingRects.length - 1;
+
+  return siblingRects.length;
+}
+
+function computeInsertionLineY(
+  insertPos: number,
+  siblingRects: DOMRect[],
+  containerRect: DOMRect,
+): number | null {
+  if (siblingRects.length === 0) return null;
+  if (insertPos <= 0) return siblingRects[0].top - containerRect.top;
+  if (insertPos >= siblingRects.length) {
+    return siblingRects[siblingRects.length - 1].bottom - containerRect.top;
+  }
+  return siblingRects[insertPos].top - containerRect.top;
+}
+
+export function useLayerDrag({
+  visibleLayers,
+  scrollContainerRef,
+  onReorder,
+  onSingleSibling,
+}: UseLayerDragOptions): UseLayerDragReturn {
+  const dragRef = useRef<DragState | null>(null);
+  const [dragKey, setDragKey] = useState<string | null>(null);
+  const [insertionLineY, setInsertionLineY] = useState<number | null>(null);
+
+  const handleRowPointerDown = useCallback(
+    (layerIndex: number, e: React.PointerEvent) => {
+      if (e.button !== 0) return;
+      const layer = visibleLayers[layerIndex];
+      if (!layer || !isLayerDraggable(layer)) return;
+
+      const siblingIndices = findSiblingIndices(visibleLayers, layerIndex);
+      if (siblingIndices.length <= 1) {
+        onSingleSibling?.();
+        return;
+      }
+
+      const fromSiblingPos = siblingIndices.indexOf(layerIndex);
+      if (fromSiblingPos === -1) return;
+
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      e.preventDefault();
+      container.setPointerCapture(e.pointerId);
+
+      dragRef.current = {
+        pointerId: e.pointerId,
+        startY: e.clientY,
+        dragLayerIndex: layerIndex,
+        siblingIndices,
+        fromSiblingPos,
+        insertSiblingPos: fromSiblingPos,
+        siblingRects: measureSiblingRects(container, siblingIndices),
+        activated: false,
+      };
+    },
+    [visibleLayers, scrollContainerRef, onSingleSibling],
+  );
+
+  const handleContainerPointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+
+      if (!drag.activated) {
+        if (Math.abs(e.clientY - drag.startY) < DRAG_THRESHOLD_PX) return;
+        drag.activated = true;
+        setDragKey(visibleLayers[drag.dragLayerIndex]?.key ?? null);
+      }
+
+      const insertPos = computeInsertionPos(e.clientY, drag.siblingRects);
+      drag.insertSiblingPos = insertPos;
+
+      const container = scrollContainerRef.current;
+      if (container) {
+        const containerRect = container.getBoundingClientRect();
+        setInsertionLineY(computeInsertionLineY(insertPos, drag.siblingRects, containerRect));
+      }
+    },
+    [visibleLayers, scrollContainerRef],
+  );
+
+  const handleContainerPointerUp = useCallback(() => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    setDragKey(null);
+    setInsertionLineY(null);
+
+    if (!drag || !drag.activated) return;
+
+    const container = scrollContainerRef.current;
+    if (container) {
+      try {
+        container.releasePointerCapture(drag.pointerId);
+      } catch {
+        // already released
+      }
+    }
+
+    let toPos = drag.insertSiblingPos;
+    if (toPos > drag.fromSiblingPos) toPos--;
+    if (toPos === drag.fromSiblingPos) return;
+
+    const siblingLayers = drag.siblingIndices.map((i) => visibleLayers[i]);
+    onReorder({ siblingLayers, fromIndex: drag.fromSiblingPos, toIndex: toPos });
+  }, [visibleLayers, scrollContainerRef, onReorder]);
+
+  return {
+    dragKey,
+    insertionLineY,
+    handleRowPointerDown,
+    handleContainerPointerMove,
+    handleContainerPointerUp,
+  };
+}

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

@@ -32,6 +32,7 @@ export function DomEditProvider({
     handleDomHtmlAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
+    handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
@@ -65,6 +66,14 @@ export function DomEditProvider({
     handleGsapUpdateFromProperty,
     handleGsapAddFromProperty,
     handleGsapRemoveFromProperty,
+    handleGsapAddKeyframe,
+    handleGsapRemoveKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    handleResetSelectedElementKeyframes,
+    commitAnimatedProperty,
+    invalidateGsapCache,
+    previewIframeRef,
   },
   children,
 }: {
@@ -92,6 +101,7 @@ export function DomEditProvider({
       handleDomHtmlAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
       handleDomManualEditsReset,
@@ -125,6 +135,14 @@ export function DomEditProvider({
       handleGsapUpdateFromProperty,
       handleGsapAddFromProperty,
       handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      commitAnimatedProperty,
+      invalidateGsapCache,
+      previewIframeRef,
     }),
     [
       domEditSelection,
@@ -146,6 +164,7 @@ export function DomEditProvider({
       handleDomHtmlAttributeCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
       handleDomManualEditsReset,
@@ -179,6 +198,14 @@ export function DomEditProvider({
       handleGsapUpdateFromProperty,
       handleGsapAddFromProperty,
       handleGsapRemoveFromProperty,
+      handleGsapAddKeyframe,
+      handleGsapRemoveKeyframe,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveAllKeyframes,
+      handleResetSelectedElementKeyframes,
+      commitAnimatedProperty,
+      invalidateGsapCache,
+      previewIframeRef,
     ],
   );
   return <DomEditContext value={stable}>{children}</DomEditContext>;