@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/timeline/BlockRow.tsx

@@ -1,4 +1,4 @@
-// One track: a layer's blocks, or the camera's shots, as INTERVALS.
+// The camera row: one shot's camera moves, as INTERVALS.
 //
 // ── THE THREE DRAGS, AND WHY THEY WRITE DIFFERENT FIELDS ────────────────
 //
@@ -7,7 +7,7 @@
 //   OUT    writes `durationFrames`.
 //
 // One field for both edges is the classic version of this bug, and it makes a
-// left-trim slide the whole block. The document math is in
+// left-trim slide the whole move. The document math is in
 // @dailies-studio/shot's timelineOps; this file only turns pixels into frames.
 //
 // ── SCENE-LOCAL BARS ON A MASTER STRIP ──────────────────────────────────
@@ -19,90 +19,101 @@
 // scenes — so that is the one place the offset crosses, and it crosses in one
 // expression that converts straight back.
 //
+// `originFrames` is the SHOT CONTEXT's re-zero, and it is a second number
+// rather than a smaller `offsetFrames` on purpose: it is subtracted in the
+// `left` expression and NOWHERE else, so the snap conversion above still runs
+// on true master frames. One number for both would make a snap inside a shot
+// land `start` frames away from where the same drag lands outside it.
+//
 // ── THE SPRING'S OUT HANDLE IS DISABLED, AND SAYS SO ────────────────────
 //
 // `clipProgress01`'s spring arm measures elapsed SECONDS, because a spring has
 // an intrinsic settle time. So dragging that edge changes where the window
 // CLIPS, not how fast the spring settles. That is correct physics and it is
-// still surprising, so the handle is disabled and the tail is drawn dashed —
-// the author sees the block continuing past its window rather than discovering
-// the rule by dragging.
+// still surprising, so the handle is DRAWN AND DEAD — carrying the reason in
+// its title — and the tail is drawn dashed. The author sees the move
+// continuing past its window rather than discovering the rule by dragging, and
+// sees why the one control that is missing is missing.
 import { frameToPx, startDrag } from "@dailies-studio/timeline";
 import type { PointerEvent as ReactPointerEvent } from "react";
+import { ADD_ICON } from "../../icons.js";
 import { useShotEditor, useStore } from "../../state/context.js";
-import type { BlockBar, Lifespan } from "./model.js";
-import { CAMERA_ROW_ID, deadSpans, frameDelta } from "./model.js";
+import type { BlockBar, CameraMark } from "./model.js";
+import { CAMERA_ROW_ID, fitsBlockLabel, frameDelta, isLoadBearingMark, thinCameraMarks } from "./model.js";
 import type { SnapPress } from "./snap.js";
 import { isSnapSuppressed } from "./snap.js";
+import { useLive } from "./useLive.js";
 
 export function BlockRow({
   label,
   sceneId,
-  layerId,
-  depth,
   bars,
   ppf,
   labelWidth,
   offsetFrames = 0,
-  lifespan,
+  originFrames = 0,
   beginSnap,
   onAdd,
-  addLabel,
+  marks,
 }: {
   label: string;
   /** WHICH SCENE this row's bars live in. Read from the row and never from
    *  `state.sceneId`: the dock shows every scene at once, so the row under the
    *  pointer is routinely not the one the playhead is in. */
   sceneId: string;
-  layerId: string;
-  depth: number;
   bars: readonly BlockBar[];
   ppf: number;
   labelWidth: number;
-  /** The scene's master start. Drawing only — see the header. */
+  /** The scene's master start. Drawing AND the snap conversion — see the header. */
   offsetFrames?: number;
-  /** The owning layer's lifespan, when it has one. A block outside it is kept
-   *  and drawn dead rather than deleted. Absent on the camera row, which has no
-   *  layer and therefore no lifespan. */
-  lifespan?: Lifespan;
+  /** The shot context's re-zero. DRAWING ONLY — see the header. */
+  originFrames?: number;
   beginSnap?: SnapPress;
-  /** Give the row a create button in its label cell. Only the camera row has
-   *  one: a layer's blocks are added from the Animate palette, which is where
-   *  the author picks WHICH preset, and a bare "+" there would have to guess. */
+  /** Give the row a create button in its label cell. */
   onAdd?: () => void;
-  addLabel?: string;
+  /**
+   * READ-ONLY marks drawn over the bars: the camera's poses (P4).
+   *
+   * Read-only is the point, not a shortcut: a camera pose is not stored
+   * anywhere a mark could write to. It is `shot.from`/`shot.to`, which the
+   * inspector edits, and a path's waypoints, which only the agent can replace.
+   */
+  marks?: readonly CameraMark[];
 }) {
   const store = useStore();
-  const selectedLayer = useShotEditor((s) => s.selection.includes(layerId));
-  const selectedBlock = useShotEditor((s) => s.selectedBlock);
+  const selectedMove = useShotEditor((s) => s.selectedMove);
+  // Preferences > Timeline > Camera move labels. Read once per row, not per bar.
+  const labels = useShotEditor((s) => s.blockLabels) === "fit";
 
   return (
-    <div
-      className={`block-row${selectedLayer ? " is-selected" : ""}`}
-      data-track={layerId}
-      data-row-scene={sceneId}
-    >
+    <div className="block-row is-camera" data-track={CAMERA_ROW_ID} data-row-scene={sceneId}>
       {/* A CELL rather than a wide button, because the add control has to sit
           beside the name and a button inside a button is not markup a browser
           will keep. */}
       <div className="block-row-label-cell" style={{ width: labelWidth }}>
+        {/* THE CAMERA ROW WEARS ITS MARK: a hollow square, the shot's own eye
+            rather than one of its contents. */}
+        <span className="camera-swatch" aria-hidden="true" />
         <button
           type="button"
           className="block-row-label"
-          style={{ paddingLeft: 8 + depth * 12 }}
-          onClick={() => {
-            // NAVIGATE FIRST when the row belongs to another scene: the stage
-            // shows one scene, and `select` orders within the current one — so
-            // without this the selection resolves to empty and nothing happens.
-            store.focusScene(sceneId);
-            if (layerId !== CAMERA_ROW_ID) store.select([layerId]);
-          }}
+          // NAVIGATE when the row belongs to another scene: the stage shows one
+          // scene, and the camera row is that scene's.
+          onClick={() => store.focusScene(sceneId)}
         >
           {label}
         </button>
+        {/* How many marks the camera holds, at the label's end. */}
+        {marks === undefined ? null : <span className="camera-keyed">{marks.length} keyed</span>}
         {onAdd !== undefined && (
-          <button type="button" className="block-row-add" onClick={onAdd}>
-            {addLabel ?? "+"}
+          <button
+            type="button"
+            className="btn is-icon is-ghost block-row-add"
+            aria-label="Add camera move"
+            title="Add a camera move at the playhead"
+            onClick={onAdd}
+          >
+            {ADD_ICON}
           </button>
         )}
       </div>
@@ -113,19 +124,50 @@ export function BlockRow({
             bar={bar}
             ppf={ppf}
             offsetFrames={offsetFrames}
-            lifespan={lifespan}
+            originFrames={originFrames}
             beginSnap={beginSnap}
-            sceneId={sceneId}
-            selected={selectedBlock?.blockId === bar.id}
+            labels={labels}
+            selected={selectedMove?.sceneId === sceneId && selectedMove.shotId === bar.id}
             onSelect={() => {
               store.focusScene(sceneId);
-              store.selectBlock({ sceneId, layerId: bar.layerId, blockId: bar.id });
+              store.selectMove({ sceneId, shotId: bar.id });
             }}
-            onDrag={(edge, toFrame) => store.dragBlock(sceneId, bar.layerId, bar.id, edge, toFrame)}
+            onDrag={(edge, toFrame) => store.dragMove(sceneId, bar.id, edge, toFrame)}
             onDragEnd={(commit) => store.endBlockDrag(commit)}
             onDragStart={() => store.beginBlockDrag()}
           />
         ))}
+        {/* AFTER the bars, so a pose sitting on a bar's edge — which is where
+            every one of them sits — reads as being on top of it rather than
+            half-swallowed. `pointer-events: none` in the CSS: these are a
+            reading, and a mark that ate the press would take the bar's own
+            trim handle away. */}
+        {(marks === undefined ? undefined : thinCameraMarks(marks, ppf))?.map((mark) => (
+          <span
+            key={mark.id}
+            className={`camera-key is-${mark.kind}`}
+            style={{ left: frameToPx(mark.frame + offsetFrames - originFrames, ppf) }}
+            data-camera-key={mark.id}
+            // The MARK's id, never its frame: a cut puts two marks on one frame
+            // (a move's end and the next move's differing start), and a frame
+            // key would name both.
+            data-testid={`camera-key-${mark.id}`}
+            title={mark.title}
+            // ── ONE OF THESE FOUR IS NOT DECORATION ────────────────────────
+            //
+            // A pose, a chain and a waypoint each restate something the bars
+            // beside them already say, so they are hidden from assistive tech
+            // — a twenty-move camera row would otherwise announce forty marks.
+            //
+            // A BREAK is the exception and has to be exposed: the rig
+            // discontinuity exists nowhere else in this row, and hiding the one
+            // mark that carries new information is how an accessibility default
+            // quietly becomes an omission.
+            {...(isLoadBearingMark(mark)
+              ? { role: "img", "aria-label": mark.title }
+              : { "aria-hidden": "true" as const })}
+          />
+        ))}
       </div>
     </div>
   );
@@ -135,10 +177,10 @@ function BlockBarView({
   bar,
   ppf,
   offsetFrames,
-  lifespan,
+  originFrames,
   beginSnap,
-  sceneId,
   selected,
+  labels,
   onSelect,
   onDragStart,
   onDrag,
@@ -147,18 +189,39 @@ function BlockBarView({
   bar: BlockBar;
   ppf: number;
   offsetFrames: number;
-  lifespan: Lifespan | undefined;
+  originFrames: number;
   beginSnap: SnapPress | undefined;
-  sceneId: string;
   selected: boolean;
+  /** The Camera move labels pref: false draws no label on any bar. */
+  labels: boolean;
   onSelect(): void;
   onDragStart(): void;
   onDrag(edge: "body" | "in" | "out", toFrame: number): void;
   onDragEnd(commit: boolean): void;
 }) {
-  const left = frameToPx(bar.frame + offsetFrames, ppf);
+  // ── WHERE THE BAR IS, IN LANE FRAMES ───────────────────────────────────
+  //
+  // Named once and used twice: `left` is drawn from it and `useLive` compares
+  // the clock against it. Two spellings of one position is how a highlight
+  // ends up a bar to the left of the bar it is highlighting.
+  const startLane = bar.frame + offsetFrames - originFrames;
+  const live = useLive(startLane, startLane + bar.durationFrames, originFrames);
+  const left = frameToPx(startLane, ppf);
+  // ── THE FLOOR, AND WHAT IT COSTS ────────────────────────────────────────
+  //
+  // 4px so a one-frame move stays visible and grabbable. It is the ONLY floor
+  // now: `.block-bar` used to carry `padding: 0 8px`, which under border-box
+  // put a second, invisible 18px floor under every bar and made short moves
+  // overdraw their neighbours. The inset lives on `.block-label` for that
+  // reason.
+  //
+  // Below about 4px per frame this floor is wider than the gap to the next
+  // move, so a dense run overlaps by a pixel or two. That is deliberate and
+  // it is the only honest choice left: at that zoom the space per move is
+  // genuinely smaller than the smallest visible mark, so the alternative is
+  // a move that renders sub-pixel and disappears. Being slightly wide is
+  // recoverable by zooming in; being invisible is not.
   const width = Math.max(4, frameToPx(bar.durationFrames, ppf));
-  const dead = deadSpans(bar, lifespan);
 
   const drag =
     (edge: "body" | "in" | "out") =>
@@ -173,11 +236,9 @@ function BlockBarView({
       // through would be unusable.
       const startFrame = bar.frame;
       const startEnd = bar.frame + bar.durationFrames;
-      // THIS BAR, not this layer: only the two edges under the pointer are
-      // frozen, so the block can still land on its own siblings and on its
-      // layer's lifespan. LifespanRow passes no blockId, because there the whole
-      // layer is what moves.
-      const snap = beginSnap?.({ sceneId, layerId: bar.layerId, blockId: bar.id }, isSnapSuppressed(e));
+      // Nothing to exclude: a camera move's edges are not snap targets, so the
+      // bar cannot catch on itself.
+      const snap = beginSnap?.(undefined, isSnapSuppressed(e));
       const place = (anchor: number, delta: number): number =>
         snap === undefined ? anchor + delta : snap(anchor + delta + offsetFrames) - offsetFrames;
       onDragStart();
@@ -195,48 +256,56 @@ function BlockBarView({
 
   return (
     <div
-      className={`block-bar slot-${bar.slot}${selected ? " is-selected" : ""}${dead.length > 0 ? " is-clipped" : ""}`}
+      className={`block-bar${live ? " is-live" : ""}${selected ? " is-selected" : ""}`}
       style={{ left, width }}
       data-block={bar.id}
-      data-clipped={dead.length > 0 ? "true" : undefined}
       onPointerDown={drag("body")}
-      title={
-        `${bar.preset} · ${bar.slot} · ${bar.frame}–${bar.frame + bar.durationFrames}` +
-        (dead.length > 0 ? " · outside the layer's lifespan, so this part never plays" : "")
-      }
+      title={`${bar.label} · ${bar.frame}–${bar.frame + bar.durationFrames}`}
     >
-      {/* KEPT, NOT DELETED. Shortening a lifespan past a block is a trim, not a
-          request to throw the block away — refusal over corruption applies to
-          the editor too. The part that can never play is greyed in place, so the
-          author can see exactly how far to pull the edge back. */}
-      {dead.map((span) => (
-        <span
-          key={span.from}
-          className="block-dead"
-          aria-hidden="true"
-          style={{ left: frameToPx(span.from - bar.frame, ppf), width: frameToPx(span.to - span.from, ppf) }}
-        />
-      ))}
       <span
         className="block-handle block-handle-in"
         data-handle="in"
         onPointerDown={drag("in")}
         aria-hidden="true"
       />
-      <span className="block-label">{bar.preset}</span>
+      {/* ONLY WHEN THE WHOLE WORD FITS. See `fitsBlockLabel`: a bar is as wide
+          as its move is long, so on a dense row the label used to be handed
+          the two or three pixels left after the inset and drew a sliver of a
+          letter. The `title` above carries the kind for every bar, fitted or
+          not, so this hides a name that could not be read rather than a fact.
+          The Camera move labels pref turns them all off; the title stays. */}
+      {labels && fitsBlockLabel(width, bar.label) ? <span className="block-label">{bar.label}</span> : null}
       {bar.spring ? (
-        // The settle tail: the block keeps moving past its own window, which is
-        // what a spring does and what the disabled handle is about.
+        // The settle tail: the move keeps going past its own window, which is
+        // what a spring does and what the dead handle beside it is about.
         <span className="block-spring-tail" aria-hidden="true" />
-      ) : (
-        <span
-          className="block-handle block-handle-out"
-          data-handle="out"
-          onPointerDown={drag("out")}
-          aria-hidden="true"
-        />
-      )}
+      ) : null}
+      {/* DRAWN EVEN WHEN IT DOES NOTHING. A spring's out edge omitted outright
+          teaches an author nothing: the affordance every other bar has simply
+          is not there, and the rule behind that is invisible. It is drawn dead
+          with the reason in its title instead, and the press is swallowed
+          rather than left to bubble — reaching the bar's body drag would MOVE
+          the move, which is the one thing someone pulling an out handle
+          certainly did not ask for. */}
+      <span
+        className={`block-handle block-handle-out${bar.spring ? " is-disabled" : ""}`}
+        data-handle="out"
+        data-disabled={bar.spring ? "true" : undefined}
+        onPointerDown={
+          bar.spring
+            ? (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            : drag("out")
+        }
+        title={
+          bar.spring
+            ? "A spring settles in its own time, so this edge would only clip the window rather than shorten the motion"
+            : undefined
+        }
+        aria-hidden="true"
+      />
     </div>
   );
 }
-