@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/stage/overlays/Rulers.tsx

@@ -0,0 +1,495 @@
+// The rulers and the author's guides (gap 5, bridge v44), on the camera pane over a
+// Shot and on the working pane inside a component definition.
+//
+// ITS OWN SVG, beside the overlay rather than inside it. The overlay is a
+// memoised leaf that bails unless a prop changed, and the rulers read the live
+// camera through `feed.paneAt`, which no prop sees move; this one is rendered
+// by `OverlaysHost` on every `feed.onOverlay` repaint, so it follows a dolly.
+//
+// PAINT, plus three grab sites: the two ruler bands (a new guide) and each
+// guide line (move it, double-click to type it). The gestures themselves live
+// in StageApp, which owns the one pointer lane (`dragGesture`); this file only
+// hands it the press. A viewer gets no grab sites at all.
+//
+// A READING IS THE INSPECTOR'S NUMBER: centre origin, y up (see rulers.ts).
+
+import { useCallback, useRef } from "react";
+import type { MutableRefObject, PointerEvent as ReactPointerEvent } from "react";
+import type { Guide3D } from "@dailies-studio/shot/doc";
+import { RULER_BAND_PX, rulerLabel, rulerTicks } from "../rulers.js";
+import type { AxisMap } from "../rulers.js";
+import type { PaneRect } from "../panes.js";
+
+/** A guide drag in flight, as the stage draws it: the guide at its live
+ *  reading, dashed, with a readout. `hide` names the document guides the drag
+ *  stands in for (the one being moved, or the one the scrub has added). */
+export interface GuideDrag {
+  axis: "x" | "y";
+  at: number;
+  /** The pointer is over the guide's own ruler band: a drop there removes. */
+  overRuler: boolean;
+  /** A placed guide (a drop on the ruler deletes it), not a new one. */
+  removes: boolean;
+  hide: { has(id: string): boolean };
+}
+
+/** The selection's screen bounds in the camera pane, for the extent marks. */
+export interface ScreenExtent {
+  x0: number;
+  x1: number;
+  y0: number;
+  y1: number;
+}
+
+export interface RulersProps {
+  /** The pane they measure (the camera pane, or the working pane inside a
+   *  definition), in area px. */
+  camera: PaneRect;
+  /** The part of it no docked panel covers, pane-local. */
+  clear: PaneRect;
+  /** The bands themselves. Guides draw either way. */
+  bands: boolean;
+  mapX: AxisMap;
+  mapY: AxisMap;
+  guides: readonly Guide3D[];
+  drag: GuideDrag | null;
+  selected: string | null;
+  extent: ScreenExtent | null;
+  /** The live snap guides in pane px: where one lands on a guide, the guide
+   *  is HOLDING the dragged edge and draws its span. */
+  holds: readonly { axis: "x" | "y"; at: number }[];
+  readOnly: boolean;
+  /** Filled with the hairline's imperative setter, which StageApp calls from
+   *  the hover it already handles (area px, or null when the pointer left). */
+  cursor: MutableRefObject<((at: readonly [number, number] | null) => void) | null>;
+  onGrabRuler: (axis: "x" | "y", e: ReactPointerEvent) => void;
+  onGrabGuide: (guide: Guide3D, e: ReactPointerEvent) => void;
+}
+
+const BAND = RULER_BAND_PX;
+const MAJOR = 8;
+const MINOR = 4;
+const LABEL_CHAR_PX = 5.5;
+const GUIDE = "var(--user-guide, #c46cff)";
+const ACCENT = "var(--accent, #0099ff)";
+const MONO = "var(--font-mono, ui-monospace, monospace)";
+
+const labelWidth = (text: string): number => text.length * LABEL_CHAR_PX;
+
+export function Rulers({
+  camera,
+  clear,
+  bands,
+  mapX,
+  mapY,
+  guides,
+  drag,
+  selected,
+  extent,
+  holds,
+  readOnly,
+  cursor,
+  onGrabRuler,
+  onGrabGuide,
+}: RulersProps) {
+  const hairX = useRef<SVGLineElement | null>(null);
+  const hairY = useRef<SVGLineElement | null>(null);
+  // The hairline moves on every hover, so it is written to the two lines
+  // directly: a React commit per pointermove would be a stage commit per move.
+  const register = useCallback(
+    (el: SVGGElement | null) => {
+      if (el === null) {
+        cursor.current = null;
+        return;
+      }
+      cursor.current = (at) => {
+        const x = at === null ? -1 : at[0] - camera.x;
+        const y = at === null ? -1 : at[1] - camera.y;
+        const inside =
+          at !== null && x >= clear.x && x < clear.x + clear.width && y >= clear.y && y < clear.y + clear.height;
+        for (const [line, on, v] of [
+          [hairX.current, inside && x >= clear.x + BAND, x],
+          [hairY.current, inside && y >= clear.y + BAND, y],
+        ] as const) {
+          if (line === null) continue;
+          line.style.visibility = on ? "visible" : "hidden";
+          if (!on) continue;
+          if (line === hairX.current) {
+            line.setAttribute("x1", String(v + 0.5));
+            line.setAttribute("x2", String(v + 0.5));
+          } else {
+            line.setAttribute("y1", String(v + 0.5));
+            line.setAttribute("y2", String(v + 0.5));
+          }
+        }
+      };
+    },
+    [cursor, camera.x, camera.y, clear.x, clear.y, clear.width, clear.height],
+  );
+
+  const pxOf = (axis: "x" | "y", at: number): number => {
+    const map = axis === "x" ? mapX : mapY;
+    return map.origin + map.scale * at;
+  };
+  const shown = guides.filter((g) => drag === null || !drag.hide.has(g.id));
+  const right = clear.x + clear.width;
+  const bottom = clear.y + clear.height;
+  const top0 = clear.y;
+  const left0 = clear.x;
+
+  return (
+    <svg
+      className="stage-rulers"
+      data-dailies-stage-furniture=""
+      data-testid="stage-rulers"
+      width={camera.width}
+      height={camera.height}
+      style={{
+        position: "absolute",
+        left: camera.x,
+        top: camera.y,
+        overflow: "hidden",
+        pointerEvents: "none",
+      }}
+    >
+      {/* THE GUIDES, under the bands so a band covers the end of its line. */}
+      {shown.map((g) => {
+        const p = Math.round(pxOf(g.axis, g.at)) + 0.5;
+        const vertical = g.axis === "x";
+        const isSelected = g.id === selected;
+        const held = holds.some((h) => h.axis === g.axis && Math.abs(h.at - (p - 0.5)) <= 1);
+        return (
+          <g key={g.id} data-testid="stage-guide" data-guide={g.id}>
+            <line
+              x1={vertical ? p : 0}
+              y1={vertical ? 0 : p}
+              x2={vertical ? p : camera.width}
+              y2={vertical ? camera.height : p}
+              stroke={GUIDE}
+              strokeWidth={isSelected ? 2 : 1}
+            />
+            {held && extent !== null ? (
+              <rect
+                x={vertical ? p - 1.5 : extent.x0}
+                y={vertical ? extent.y0 : p - 1.5}
+                width={vertical ? 3 : Math.max(0, extent.x1 - extent.x0)}
+                height={vertical ? Math.max(0, extent.y1 - extent.y0) : 3}
+                rx={2}
+                fill={GUIDE}
+              />
+            ) : null}
+            {readOnly ? null : (
+              // The grab site: a wide invisible stroke over the clear area,
+              // so a 1px line is easy to catch.
+              <line
+                x1={vertical ? p : left0}
+                y1={vertical ? top0 : p}
+                x2={vertical ? p : right}
+                y2={vertical ? bottom : p}
+                stroke="transparent"
+                strokeWidth={9}
+                pointerEvents="stroke"
+                style={{ cursor: vertical ? "ew-resize" : "ns-resize" }}
+                onPointerDown={(e) => onGrabGuide(g, e)}
+              />
+            )}
+          </g>
+        );
+      })}
+
+      {drag === null ? null : <DragGuide drag={drag} pxOf={pxOf} camera={camera} clear={clear} />}
+
+      {bands ? (
+        <g data-testid="stage-ruler-bands">
+          <TopBand
+            map={mapX}
+            clear={clear}
+            extent={extent}
+            guides={shown.filter((g) => g.axis === "x").map((g) => pxOf("x", g.at))}
+            readOnly={readOnly}
+            onGrab={(e) => onGrabRuler("y", e)}
+          />
+          <LeftBand
+            map={mapY}
+            clear={clear}
+            extent={extent}
+            guides={shown.filter((g) => g.axis === "y").map((g) => pxOf("y", g.at))}
+            readOnly={readOnly}
+            onGrab={(e) => onGrabRuler("x", e)}
+          />
+          {/* The corner the two bands share: no ticks, just the surface. */}
+          <rect x={left0} y={top0} width={BAND} height={BAND} fill="var(--surface-panel, #111111)" />
+          <g ref={register}>
+            <line
+              ref={hairX}
+              x1={0}
+              x2={0}
+              y1={top0}
+              y2={top0 + BAND}
+              stroke="var(--ink-1, #f5f5f5)"
+              strokeWidth={1}
+              style={{ visibility: "hidden" }}
+            />
+            <line
+              ref={hairY}
+              x1={left0}
+              x2={left0 + BAND}
+              y1={0}
+              y2={0}
+              stroke="var(--ink-1, #f5f5f5)"
+              strokeWidth={1}
+              style={{ visibility: "hidden" }}
+            />
+          </g>
+        </g>
+      ) : null}
+    </svg>
+  );
+}
+
+/** The top band: x readings, the selection's x extent, the x guides' marks.
+ *  A press here pulls out a HORIZONTAL guide (a y guide). */
+function TopBand({
+  map,
+  clear,
+  extent,
+  guides,
+  readOnly,
+  onGrab,
+}: {
+  map: AxisMap;
+  clear: PaneRect;
+  extent: ScreenExtent | null;
+  guides: number[];
+  readOnly: boolean;
+  onGrab: (e: ReactPointerEvent) => void;
+}) {
+  const y = clear.y;
+  const from = clear.x + BAND;
+  const to = clear.x + clear.width;
+  const ticks = rulerTicks(map, from, to);
+  const edges =
+    extent === null
+      ? null
+      : {
+          a: Math.max(from, extent.x0),
+          b: Math.min(to, extent.x1),
+          la: rulerLabel((extent.x0 - map.origin) / map.scale),
+          lb: rulerLabel((extent.x1 - map.origin) / map.scale),
+        };
+  const blocked =
+    edges === null ? null : [edges.a - 3 - labelWidth(edges.la) - 4, edges.b + 3 + labelWidth(edges.lb) + 4];
+  return (
+    <g data-testid="stage-ruler-top">
+      <rect
+        x={clear.x}
+        y={y}
+        width={clear.width}
+        height={BAND}
+        fill="var(--surface-panel, #111111)"
+        pointerEvents={readOnly ? "none" : "auto"}
+        style={readOnly ? undefined : { cursor: "ns-resize" }}
+        onPointerDown={readOnly ? undefined : onGrab}
+      />
+      <line x1={clear.x} y1={y + BAND - 0.5} x2={to} y2={y + BAND - 0.5} stroke="var(--line, #2a2a2a)" />
+      {edges === null || edges.b < edges.a ? null : (
+        <rect x={edges.a} y={y} width={edges.b - edges.a} height={BAND} fill={ACCENT} fillOpacity={0.18} />
+      )}
+      {ticks.minor.map((px) => (
+        <line key={`m${px}`} x1={px} x2={px} y1={y + BAND - MINOR} y2={y + BAND} stroke="var(--line-strong, #3d3d3d)" />
+      ))}
+      {ticks.major.map((t) => {
+        const text = rulerLabel(t.value);
+        const hidden = blocked !== null && t.px + 3 + labelWidth(text) > blocked[0]! && t.px + 3 < blocked[1]!;
+        return (
+          <g key={`M${t.value}`}>
+            <line x1={t.px} x2={t.px} y1={y + BAND - MAJOR} y2={y + BAND} stroke="var(--line-strong, #3d3d3d)" />
+            {hidden ? null : (
+              <text x={t.px + 3} y={y + 10} fill="var(--ink-3, #9c9c9c)" fontFamily={MONO} fontSize={9}>
+                {text}
+              </text>
+            )}
+          </g>
+        );
+      })}
+      {edges === null || edges.b < edges.a ? null : (
+        <g>
+          <line x1={edges.a} x2={edges.a} y1={y} y2={y + BAND} stroke={ACCENT} />
+          <line x1={edges.b} x2={edges.b} y1={y} y2={y + BAND} stroke={ACCENT} />
+          <text x={edges.a - 3} y={y + 10} textAnchor="end" fill={ACCENT} fontFamily={MONO} fontSize={9}>
+            {edges.la}
+          </text>
+          <text x={edges.b + 3} y={y + 10} fill={ACCENT} fontFamily={MONO} fontSize={9}>
+            {edges.lb}
+          </text>
+        </g>
+      )}
+      {guides
+        .filter((px) => px >= from && px <= to)
+        .map((px, i) => (
+          <path
+            key={`g${i}`}
+            d={`M${px - 3} ${y + BAND - 8}h6l-3 8z`}
+            fill={GUIDE}
+            data-testid="stage-guide-mark"
+          />
+        ))}
+    </g>
+  );
+}
+
+/** The left band: y readings (up), the selection's y extent, the y guides'
+ *  marks. A press here pulls out a VERTICAL guide (an x guide). */
+function LeftBand({
+  map,
+  clear,
+  extent,
+  guides,
+  readOnly,
+  onGrab,
+}: {
+  map: AxisMap;
+  clear: PaneRect;
+  extent: ScreenExtent | null;
+  guides: number[];
+  readOnly: boolean;
+  onGrab: (e: ReactPointerEvent) => void;
+}) {
+  const x = clear.x;
+  const from = clear.y + BAND;
+  const to = clear.y + clear.height;
+  const ticks = rulerTicks(map, from, to);
+  // Rotated labels run UP from just above their tick, so on screen a label
+  // occupies [px - 3 - width, px - 3].
+  const edges =
+    extent === null
+      ? null
+      : {
+          a: Math.max(from, extent.y0),
+          b: Math.min(to, extent.y1),
+          la: rulerLabel((extent.y0 - map.origin) / map.scale),
+          lb: rulerLabel((extent.y1 - map.origin) / map.scale),
+        };
+  const blocked =
+    edges === null ? null : [edges.a - 3 - labelWidth(edges.la) - 4, edges.b + 3 + labelWidth(edges.lb) + 4];
+  const label = (px: number, text: string, fill: string, after: boolean) => {
+    const ax = x + 11;
+    const ay = after ? px + 3 : px - 3;
+    return (
+      <text
+        x={ax}
+        y={ay}
+        transform={`rotate(-90 ${ax} ${ay})`}
+        textAnchor={after ? "end" : "start"}
+        fill={fill}
+        fontFamily={MONO}
+        fontSize={9}
+      >
+        {text}
+      </text>
+    );
+  };
+  return (
+    <g data-testid="stage-ruler-left">
+      <rect
+        x={x}
+        y={clear.y}
+        width={BAND}
+        height={clear.height}
+        fill="var(--surface-panel, #111111)"
+        pointerEvents={readOnly ? "none" : "auto"}
+        style={readOnly ? undefined : { cursor: "ew-resize" }}
+        onPointerDown={readOnly ? undefined : onGrab}
+      />
+      <line x1={x + BAND - 0.5} y1={clear.y} x2={x + BAND - 0.5} y2={to} stroke="var(--line, #2a2a2a)" />
+      {edges === null || edges.b < edges.a ? null : (
+        <rect x={x} y={edges.a} width={BAND} height={edges.b - edges.a} fill={ACCENT} fillOpacity={0.18} />
+      )}
+      {ticks.minor.map((px) => (
+        <line key={`m${px}`} y1={px} y2={px} x1={x + BAND - MINOR} x2={x + BAND} stroke="var(--line-strong, #3d3d3d)" />
+      ))}
+      {ticks.major.map((t) => {
+        const text = rulerLabel(t.value);
+        const hidden = blocked !== null && t.px - 3 > blocked[0]! && t.px - 3 - labelWidth(text) < blocked[1]!;
+        return (
+          <g key={`M${t.value}`}>
+            <line y1={t.px} y2={t.px} x1={x + BAND - MAJOR} x2={x + BAND} stroke="var(--line-strong, #3d3d3d)" />
+            {hidden ? null : label(t.px, text, "var(--ink-3, #9c9c9c)", false)}
+          </g>
+        );
+      })}
+      {edges === null || edges.b < edges.a ? null : (
+        <g>
+          <line y1={edges.a} y2={edges.a} x1={x} x2={x + BAND} stroke={ACCENT} />
+          <line y1={edges.b} y2={edges.b} x1={x} x2={x + BAND} stroke={ACCENT} />
+          {label(edges.a, edges.la, ACCENT, false)}
+          {label(edges.b, edges.lb, ACCENT, true)}
+        </g>
+      )}
+      {guides
+        .filter((px) => px >= from && px <= to)
+        .map((px, i) => (
+          <path
+            key={`g${i}`}
+            d={`M${x + BAND - 8} ${px - 3}v6l8 -3z`}
+            fill={GUIDE}
+            data-testid="stage-guide-mark"
+          />
+        ))}
+    </g>
+  );
+}
+
+/** The guide being dragged: dashed, with its reading in a chip by the ruler
+ *  band. Over its own ruler the line dims, and a placed guide's chip says
+ *  the drop removes it. */
+function DragGuide({
+  drag,
+  pxOf,
+  camera,
+  clear,
+}: {
+  drag: GuideDrag;
+  pxOf: (axis: "x" | "y", at: number) => number;
+  camera: PaneRect;
+  clear: PaneRect;
+}) {
+  const p = Math.round(pxOf(drag.axis, drag.at)) + 0.5;
+  const vertical = drag.axis === "x";
+  const value = drag.overRuler && drag.removes ? "remove" : `${drag.axis} ${rulerLabel(drag.at)}`;
+  const chipW = 6 + 8 + 38 + 6 + value.length * 6.6 + 8;
+  const cx = vertical ? p + 8 : clear.x + BAND + 8;
+  const cy = vertical ? clear.y + BAND + 8 : p + 8;
+  return (
+    <g data-testid="stage-guide-drag" opacity={drag.overRuler ? 0.5 : 1}>
+      <line
+        x1={vertical ? p : 0}
+        y1={vertical ? 0 : p}
+        x2={vertical ? p : camera.width}
+        y2={vertical ? camera.height : p}
+        stroke={GUIDE}
+        strokeWidth={1}
+        strokeDasharray="4 3"
+        opacity={0.85}
+      />
+      <g transform={`translate(${cx} ${cy})`}>
+        <rect
+          x={0.5}
+          y={0.5}
+          width={chipW}
+          height={22}
+          rx={4}
+          fill="var(--surface-panel, #111111)"
+          fillOpacity={0.88}
+          stroke={GUIDE}
+        />
+        <text x={8} y={15} fill={GUIDE} fontFamily="var(--font-sans, system-ui)" fontSize={11} fontWeight={600}>
+          GUIDE
+        </text>
+        <text x={8 + 38 + 6} y={15} fill="var(--ink-1, #f5f5f5)" fontFamily={MONO} fontSize={11}>
+          {value}
+        </text>
+      </g>
+    </g>
+  );
+}