@hyperframes/studio 0.7.45 → 0.7.47

package/src/player/components/timelineTrackOrder.ts

@@ -0,0 +1,173 @@
+import { type TimelineElement } from "../store/playerStore";
+import { resolveContextOrder, resolveStackingContextKey } from "../lib/layerOrdering";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import { toStackingOrderItem, type TimelineStackingOrderItem } from "./timelineStacking";
+
+export type TimelineLayerId = string;
+
+export interface StackingTimelineLayer {
+  id: TimelineLayerId;
+  kind: "visual" | "audio";
+  contextKey: string;
+  zIndex: number;
+  placementTrack: number;
+  elements: TimelineElement[];
+}
+
+export interface StackingTimelineLayerGroups {
+  visualLayers: StackingTimelineLayer[];
+  audioLayers: StackingTimelineLayer[];
+  rows: StackingTimelineLayer[];
+}
+
+type TimelineLayerOrderItem = TimelineStackingOrderItem & {
+  start: number;
+  duration: number;
+  index: number;
+  element: TimelineElement;
+};
+
+type BuildLayer = Omit<StackingTimelineLayer, "id">;
+
+function toTimelineLayerOrderItem(element: TimelineElement, index: number): TimelineLayerOrderItem {
+  return {
+    ...toStackingOrderItem(element),
+    start: element.start,
+    duration: element.duration,
+    index,
+    element,
+  };
+}
+
+export function timelineElementsOverlap(
+  a: Pick<TimelineElement, "start" | "duration">,
+  b: Pick<TimelineElement, "start" | "duration">,
+): boolean {
+  return a.start < b.start + b.duration && b.start < a.start + a.duration;
+}
+
+function compareLayerItems(a: TimelineLayerOrderItem, b: TimelineLayerOrderItem): number {
+  if (a.zIndex !== b.zIndex) return b.zIndex - a.zIndex;
+  return a.index - b.index;
+}
+
+function buildElementLayerId(
+  prefix: string,
+  contextKey: string,
+  element: TimelineElement,
+): TimelineLayerId {
+  return `${prefix}:${contextKey}:${getTimelineElementIdentity(element)}`;
+}
+
+function buildLaneId(
+  prefix: string,
+  contextKey: string,
+  elements: TimelineElement[],
+): TimelineLayerId {
+  const memberKey = elements.map(getTimelineElementIdentity).sort().join("|");
+  return `${prefix}:${contextKey}:${memberKey}`;
+}
+
+function getOrderedContextKeys(items: readonly TimelineLayerOrderItem[]): string[] {
+  const keys: string[] = [];
+  for (const item of resolveContextOrder(items)) {
+    const key = resolveStackingContextKey(item);
+    if (!keys.includes(key)) keys.push(key);
+  }
+  return keys;
+}
+
+function canJoinLayer(layer: BuildLayer, item: TimelineLayerOrderItem): boolean {
+  // A row IS a z-band: clips only share a lane when they carry the same z-index
+  // (and don't overlap in time). Without the z-index gate a non-overlapping clip
+  // greedily packs into the first time-compatible row — the topmost one — so a
+  // vertical restack changes z but the row never follows it.
+  return (
+    layer.contextKey === resolveStackingContextKey(item) &&
+    layer.zIndex === item.zIndex &&
+    layer.elements.every((element) => !timelineElementsOverlap(element, item.element))
+  );
+}
+
+function compareElementsByStart(a: TimelineElement, b: TimelineElement): number {
+  if (a.start !== b.start) return a.start - b.start;
+  return getTimelineElementIdentity(a).localeCompare(getTimelineElementIdentity(b));
+}
+
+function buildVisualLayerRows(items: readonly TimelineLayerOrderItem[]): StackingTimelineLayer[] {
+  const byContext = new Map<string, TimelineLayerOrderItem[]>();
+  for (const item of items) {
+    const key = resolveStackingContextKey(item);
+    const list = byContext.get(key);
+    if (list) list.push(item);
+    else byContext.set(key, [item]);
+  }
+
+  const rows: StackingTimelineLayer[] = [];
+  for (const contextKey of getOrderedContextKeys(items)) {
+    const contextRows: BuildLayer[] = [];
+    const contextItems = [...(byContext.get(contextKey) ?? [])].sort(compareLayerItems);
+    for (const item of contextItems) {
+      const existing = contextRows.find((row) => canJoinLayer(row, item));
+      if (existing) {
+        existing.elements.push(item.element);
+        existing.zIndex = Math.max(existing.zIndex, item.zIndex);
+        continue;
+      }
+      contextRows.push({
+        kind: "visual",
+        contextKey,
+        zIndex: item.zIndex,
+        placementTrack: item.element.track,
+        elements: [item.element],
+      });
+    }
+    rows.push(
+      ...contextRows.map((row) => {
+        const elements = [...row.elements].sort(compareElementsByStart);
+        return {
+          ...row,
+          id: buildLaneId("lane", contextKey, elements),
+          elements,
+        };
+      }),
+    );
+  }
+  return rows;
+}
+
+function buildAudioLayerRows(items: readonly TimelineLayerOrderItem[]): StackingTimelineLayer[] {
+  return items.map((item) => ({
+    id: buildElementLayerId("audio", resolveStackingContextKey(item), item.element),
+    kind: "audio",
+    contextKey: resolveStackingContextKey(item),
+    zIndex: item.zIndex,
+    placementTrack: item.element.track,
+    elements: [item.element],
+  }));
+}
+
+export function buildStackingTimelineLayers(
+  elements: readonly TimelineElement[],
+): StackingTimelineLayerGroups {
+  const items = elements.map(toTimelineLayerOrderItem);
+  const visualItems = items.filter((item) => item.element.tag !== "audio");
+  const audioItems = items.filter((item) => item.element.tag === "audio");
+  const visualLayers = buildVisualLayerRows(visualItems);
+  const audioLayers = buildAudioLayerRows(audioItems);
+  return {
+    visualLayers,
+    audioLayers,
+    rows: [...visualLayers, ...audioLayers],
+  };
+}
+
+export function insertPreviewTrackOrder(
+  layerOrder: readonly TimelineLayerId[],
+  previewLayerId: TimelineLayerId,
+  previewIndex: number,
+): TimelineLayerId[] {
+  if (layerOrder.includes(previewLayerId)) return [...layerOrder];
+  const index = Math.max(0, Math.min(layerOrder.length, Math.round(previewIndex)));
+  return [...layerOrder.slice(0, index), previewLayerId, ...layerOrder.slice(index)];
+}

package/src/player/components/useTimelineActiveClips.test.ts

@@ -78,6 +78,26 @@ describe("updateTimelineActiveClipClasses", () => {
     expect(previous).toEqual(new Set());
   });
 
+  it("re-applies data-active to a fresh DOM node that stayed active across a re-render", () => {
+    // A clip that moves lanes on a reorder remounts as a new element. It stays
+    // in the previous active set, so the plain diff would skip it and leave the
+    // new node without data-active. syncAll must force the attribute on.
+    const container = document.createElement("div");
+    appendClip(container, "hero", "0", "5");
+    const previous = new Set<string>();
+    updateTimelineActiveClipClasses(container, previous, 2);
+    expect(previous).toEqual(new Set(["hero"]));
+
+    // Simulate a remount: replace the hero clip's DOM node (no data-active).
+    container.replaceChildren();
+    const heroReborn = appendClip(container, "hero", "0", "5");
+    expect(heroReborn.hasAttribute("data-active")).toBe(false);
+
+    // Diff-only would skip it (still active → unchanged); syncAll re-applies.
+    updateTimelineActiveClipClasses(container, previous, 2, true);
+    expect(heroReborn.hasAttribute("data-active")).toBe(true);
+  });
+
   it("ignores clips with invalid timing data", () => {
     const container = document.createElement("div");
     const missingId = appendClip(container, "", "0", "2");

package/src/player/components/useTimelineActiveClips.ts

@@ -65,13 +65,23 @@ function setsMatch(left: Set<string>, right: Set<string>): boolean {
   return true;
 }
 
-function applyActiveClipDiff(records: ActiveClipRecord[], previous: Set<string>, time: number) {
+function applyActiveClipDiff(
+  records: ActiveClipRecord[],
+  previous: Set<string>,
+  time: number,
+  // Force every record's attribute to match its active state instead of only
+  // touching clips whose active-state changed. Required whenever `records` were
+  // freshly re-queried after a render: a clip that stayed active but got a new
+  // DOM node (e.g. moved lanes on a reorder) would otherwise be skipped by the
+  // diff and render without `data-active` despite still being at the playhead.
+  syncAll = false,
+) {
   const next = getActiveClipIds(records, time);
   const changed = !setsMatch(previous, next);
   for (const record of records) {
     const wasActive = previous.has(record.id);
     const isActive = next.has(record.id);
-    if (wasActive === isActive) continue;
+    if (!syncAll && wasActive === isActive) continue;
     record.element.toggleAttribute("data-active", isActive);
   }
   previous.clear();
@@ -83,8 +93,9 @@ export function updateTimelineActiveClipClasses(
   container: HTMLElement,
   previous: Set<string>,
   time: number,
+  syncAll = false,
 ) {
-  applyActiveClipDiff(collectTimelineClipRecords(container), previous, time);
+  applyActiveClipDiff(collectTimelineClipRecords(container), previous, time, syncAll);
 }
 
 export function useTimelineActiveClips({
@@ -107,7 +118,7 @@ export function useTimelineActiveClips({
       }
       recordsRef.current = collectTimelineClipRecords(scroll);
       recordsByIdRef.current = indexClipRecordsById(recordsRef.current);
-      applyActiveClipDiff(recordsRef.current, previousActiveIdsRef.current, time);
+      applyActiveClipDiff(recordsRef.current, previousActiveIdsRef.current, time, true);
     },
     [scrollRef],
   );