@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/shotboard/ShotBoard.tsx

@@ -0,0 +1,292 @@
+// THE SHOT BOARD (Paper SB2-SB5): one planned shot's sketches, on the board.
+// Double-clicking a shot lands here, and no Shot is made or entered.
+//
+// THE STUDIO'S ANATOMY IN 2D, in the board's canvas cell: Layers on the left
+// (224), then the canvas bar (40), the paper on the dot desk with the sketch
+// strip under it, and the tool footer (48). The right column is the shell's:
+// the Plan with nothing selected, the item inspector with something selected
+// (`boardRightPanel`, RightColumn). No timeline, no 3D, and no WebGL until
+// Play (SketchPlay).
+//
+//   bar     ‹ Storyboard, the shot's number and name (a double press, F2,
+//           or Enter on the focused name renames it, `PartName`), its status,
+//           ‹ › to the shots either side; Play (Stop while it plays), Ask
+//           agent, and the one primary, Open in Studio.
+//   keys    the sketch keys (`resolveShotBoardKey`, keymap.ts) are
+//           answered HERE, on the shot board's own element, and stopped, so
+//           an arrow pressed in the inspector moves nothing. Delete, ⌘D, ⌘A,
+//           Escape and the clipboard stay the board's (store, StoryboardView).
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import { framesToSeconds } from "@dailies-studio/engine";
+import { findSketchItem, partFramesOf, sketchesOf } from "@dailies-studio/shot/doc";
+import type { Doc3D, StoryboardPart3D } from "@dailies-studio/shot/doc";
+import { CHEVRON_LEFT_ICON, CHEVRON_RIGHT_ICON, OPEN_ELSEWHERE_ICON, PLAY_ICON, SPARKLES_ICON } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { isEditable, resolveShotBoardKey } from "../../../state/keymap.js";
+import type { SketchKeyAction } from "../../../state/keymap.js";
+import { SHOT_STATUS_LABEL, buildPlannedPrompt, shotStatusOf, storyEntries } from "../../../state/storyboardModel.js";
+import { agentGate, agentInEditor } from "../../agent/agentGate.js";
+import { formatDuration } from "../../timeline/model.js";
+import { PartName, partNumberOf } from "../PlanPanel.js";
+import { ComponentPicker } from "./ComponentPicker.js";
+import { ImagePicker } from "./ImagePicker.js";
+import { SketchCanvas } from "./SketchCanvas.js";
+import { SketchLayers } from "./SketchLayers.js";
+import { SketchPlay } from "./SketchPlay.js";
+import { SketchStrip } from "./SketchStrip.js";
+import { SketchToolFooter } from "./SketchToolFooter.js";
+import { fitPaperWidth } from "./sketchModel.js";
+import "./sketch.css";
+import { useBuildingParts } from "../../agent/AgentDots.js";
+
+/** The desk's air round the paper, and what the strip under it takes: a
+ *  72px thumb, its label row and the gap above it (SB2). */
+const DESK_PAD = 24;
+const STRIP_H = 120;
+/** The desk's size before it is measured (jsdom measures nothing). */
+const DESK_FALLBACK = { width: 1280, height: 800 };
+
+/** The badge tone each status reads in (G1 `.badge`). */
+const STATUS_TONE = { planned: "", building: " is-building", built: " is-success" } as const;
+
+/** The planned shots in playing order, for ‹ and ›. */
+/** The board's cards in reading order, each as the id `openShotBoard` takes:
+ *  the plan's id, or the Shot's id when no plan links it yet (opening it
+ *  gives it one), so ‹ › never skips a card the board shows. */
+export function partOrder(doc: Doc3D): string[] {
+  return storyEntries(doc).map((e) => (e.kind === "shot" ? (e.shot.part?.id ?? e.shot.sceneId) : e.part.id));
+}
+
+export function ShotBoard({ partId, rootRef }: { partId: string; rootRef?: (el: HTMLElement | null) => void }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const sketchId = useShotEditor((s) => s.storyboardSketch);
+  const tool = useShotEditor((s) => s.sketchTool);
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  const [zoom, setZoom] = useState(1);
+  const [editing, setEditing] = useState<string | null>(null);
+  const [desk, setDesk] = useState<HTMLDivElement | null>(null);
+  const [deskSize, setDeskSize] = useState(DESK_FALLBACK);
+  const imageAnchor = useRef<HTMLButtonElement>(null);
+  const componentAnchor = useRef<HTMLButtonElement>(null);
+
+  // THE DESK'S SIZE, so the paper fits it at 100%.
+  useLayoutEffect(() => {
+    if (desk === null || typeof ResizeObserver === "undefined") return;
+    const measure = (): void => {
+      const { width, height } = desk.getBoundingClientRect();
+      if (width > 0 && height > 0) setDeskSize({ width, height });
+    };
+    measure();
+    const sized = new ResizeObserver(measure);
+    sized.observe(desk);
+    return () => sized.disconnect();
+  }, [desk]);
+
+  // A text editor open on an item that went (an undo, an agent) closes.
+  useEffect(() => {
+    if (editing !== null && (doc === null || findSketchItem(doc, editing) === null)) setEditing(null);
+  }, [doc, editing]);
+
+  const part = doc?.storyboard?.parts.find((p) => p.id === partId);
+  if (doc === null || part === undefined) return null;
+  const sketches = sketchesOf(doc, partId);
+  const sketch = sketches.find((s) => s.id === sketchId) ?? sketches[0];
+  const width = Math.round(fitPaperWidth(deskSize, doc.size, DESK_PAD, STRIP_H) * zoom);
+
+  const run = (action: SketchKeyAction): boolean => {
+    const state = store.getState();
+    switch (action.kind) {
+      case "sketchMove":
+        if (state.sketchSelection.length === 0) return false;
+        store.nudgeSketchItems(state.sketchSelection, action.dx, action.dy);
+        return true;
+      case "sketchRestack": {
+        const only = state.sketchSelection.length === 1 ? findSketchItem(doc, state.sketchSelection[0]!) : null;
+        if (only === null) return false;
+        store.restackSketchItem(only.item.id, only.index + action.by);
+        return true;
+      }
+      case "sketchEdit": {
+        const only = state.sketchSelection.length === 1 ? findSketchItem(doc, state.sketchSelection[0]!) : null;
+        if (only?.item.kind !== "text" || state.readOnly || state.sketchPlaying) return false;
+        setEditing(only.item.id);
+        return true;
+      }
+      case "sketchTool":
+        if (state.sketchPlaying) return false;
+        store.setSketchTool(action.tool);
+        return true;
+    }
+  };
+
+  const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
+    const target = event.target as HTMLElement;
+    // A PORTAL'S KEY (a picker, the strip's menu) bubbles here through the
+    // React tree; an arrow on a picker tile must not move the sketch.
+    if (!event.currentTarget.contains(target)) return;
+    // Enter on a control presses the control; on the paper it edits text.
+    if (event.key === "Enter" && target.closest("button, [role=option], a") !== null) return;
+    const action = resolveShotBoardKey(event, { editing: isEditable(target), hasSelection: false, storyboard: true });
+    if (action === null || !action.kind.startsWith("sketch")) return;
+    if (!run(action as SketchKeyAction)) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      className="shot-board"
+      tabIndex={-1}
+      data-testid="shot-board"
+      aria-label={`Shot board: ${part.label}`}
+      onKeyDown={onKeyDown}
+    >
+      <SketchLayers doc={doc} sketch={sketch} />
+      <div className="shot-board-main">
+        <ShotBoardBar doc={doc} part={part} empty={(sketch?.items.length ?? 0) === 0} />
+        <div ref={setDesk} className="sketch-desk" data-testid="sketch-desk">
+          <div className="sketch-desk-stack" style={{ width }}>
+            {playing && sketch !== undefined ? (
+              <SketchPlay doc={doc} partId={partId} sketch={sketch} width={width} />
+            ) : (
+              <SketchCanvas doc={doc} partId={partId} sketch={sketch} width={width} editing={editing} onEdit={setEditing} />
+            )}
+            <div className="sketch-desk-strip" inert={playing}>
+              <SketchStrip doc={doc} partId={partId} sketches={sketches} current={sketch?.id ?? null} />
+            </div>
+          </div>
+        </div>
+        <div className="sketch-footer-cell" inert={playing}>
+          <SketchToolFooter zoom={zoom} onZoom={setZoom} anchors={{ image: imageAnchor, component: componentAnchor }} />
+        </div>
+      </div>
+      <ImagePicker open={tool === "image" && !playing} anchor={imageAnchor} onClose={() => store.setSketchTool("select")} />
+      <ComponentPicker open={tool === "component" && !playing} anchor={componentAnchor} partId={partId} onClose={() => store.setSketchTool("select")} />
+    </div>
+  );
+}
+
+/** The canvas bar (SB2, SB5). */
+function ShotBoardBar({ doc, part, empty }: { doc: Doc3D; part: StoryboardPart3D; empty: boolean }) {
+  const store = useStore();
+  const building = useBuildingParts();
+  const playing = useShotEditor((s) => s.sketchPlaying);
+  const credentials = useShotEditor((s) => s.agentCredentials);
+  const probeError = useShotEditor((s) => s.agentCredentialsError);
+  const gate = agentGate(credentials, probeError);
+  const order = partOrder(doc);
+  const at = order.indexOf(part.id);
+  const prev = at > 0 ? order[at - 1] : undefined;
+  const next = at >= 0 && at < order.length - 1 ? order[at + 1] : undefined;
+  const status = shotStatusOf(part, building);
+  // Play loops the sketches over the PLAN (`sketchStageDoc`), so the label
+  // says the plan's length; when a linked Shot runs another (`partFramesOf`,
+  // the length the card shows), it names both, as buildPlannedPrompt does.
+  const planned = formatDuration(framesToSeconds(part.durationFrames, doc.fps));
+  const shotFrames = partFramesOf(doc, part);
+  const loop =
+    shotFrames === part.durationFrames
+      ? `${planned} loop`
+      : `${planned} planned loop (its Shot runs ${formatDuration(framesToSeconds(shotFrames, doc.fps))})`;
+
+  return (
+    <header className="sketch-bar" data-testid="sketch-bar">
+      <div className="sketch-bar-group">
+        {/* A NARROW BAR (sketch.css, `@container sketch-bar`) hides the
+            words marked `sketch-bar-word`; each button keeps its name. */}
+        <button
+          type="button"
+          className="sketch-crumb"
+          data-testid="sketch-crumb"
+          aria-label="Storyboard"
+          title="Back to the Storyboard"
+          onClick={() => store.closeShotBoard()}
+        >
+          {CHEVRON_LEFT_ICON}
+          <span className="sketch-bar-word">Storyboard</span>
+        </button>
+        <span className="sketch-divider" aria-hidden="true" />
+        <div className="sketch-bar-title">
+          <span className="sketch-bar-number">{partNumberOf(doc, part.id)}</span>
+          {/* THE NAME RENAMES IN PLACE, the Plan panel head's way: a
+              double-click, F2, or Enter on the focused name. It is still the
+              shot board's heading, as the Plan head's name is its panel's. */}
+          <h2 className="sketch-bar-heading">
+            <PartName part={part} className="sketch-bar-name" testId="sketch-bar-name" />
+          </h2>
+          <span className={`badge${STATUS_TONE[status]}`}>{SHOT_STATUS_LABEL[status]}</span>
+        </div>
+        <div className="sketch-bar-nav">
+          <button
+            type="button"
+            className="sketch-icon-button"
+            aria-label="Previous shot"
+            disabled={prev === undefined}
+            onClick={() => prev !== undefined && store.openShotBoard(prev)}
+          >
+            {CHEVRON_LEFT_ICON}
+          </button>
+          <button
+            type="button"
+            className="sketch-icon-button"
+            aria-label="Next shot"
+            disabled={next === undefined}
+            onClick={() => next !== undefined && store.openShotBoard(next)}
+          >
+            {CHEVRON_RIGHT_ICON}
+          </button>
+        </div>
+      </div>
+      <div className="sketch-bar-group">
+        {playing ? (
+          <>
+            <span className="sketch-bar-playing">{`Playing · ${loop}`}</span>
+            <button type="button" className="btn is-active" data-testid="sketch-stop" onClick={() => store.setSketchPlaying(false)}>
+              <span className="sketch-stop-square" aria-hidden="true" />
+              Stop
+              <kbd className="sketch-stop-key">Esc</kbd>
+            </button>
+          </>
+        ) : (
+          <button
+            type="button"
+            className="btn"
+            data-testid="sketch-play-button"
+            disabled={empty}
+            aria-label="Play"
+            title={empty ? "Put something on the sketch to play it." : "Play the sketch in one stage"}
+            onClick={() => store.setSketchPlaying(true)}
+          >
+            {PLAY_ICON}
+            <span className="sketch-bar-word">Play</span>
+          </button>
+        )}
+        {agentInEditor() ? (
+          <button
+            type="button"
+            className="btn"
+            data-testid="sketch-ask-agent"
+            disabled={!gate.ready}
+            aria-label="Ask agent"
+            title={gate.ready ? "Ask the agent to build this shot from its sketches" : gate.title}
+            // THE BOARD'S BUILD for this one shot, so it reads Building; a shot
+            // already built or building is still asked, with no status change.
+            onClick={() => {
+              if (store.buildPlannedShots([part.id]).length === 0) store.openAgentWith(buildPlannedPrompt(doc, [part.id]));
+            }}
+          >
+            {SPARKLES_ICON}
+            <span className="sketch-bar-word">Ask agent</span>
+          </button>
+        ) : null}
+        <button type="button" className="btn is-primary" data-testid="sketch-open-studio" onClick={() => store.openPlannedShot(part.id)}>
+          Open in Studio
+          {OPEN_ELSEWHERE_ICON}
+        </button>
+      </div>
+    </header>
+  );
+}