@dailies-studio/shot-editor 0.1.0 → 0.2.0

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

@@ -0,0 +1,443 @@
+// THE SKETCH PAPER (Paper SB2, SB3, SB4): the open sketch drawn in the DOM,
+// and every gesture on it.
+//
+//   select   a press on an item selects it (Shift adds or takes it away) and
+//            a drag moves the selection, snapped by `snapMove` to the frame
+//            and the other items, guides drawn in `--guide`. A press on the
+//            paper starts a marquee (`marqueeItems`), Shift adding to what
+//            was selected. One drag is ONE undo entry (`beginSketchDrag`,
+//            then absolute patches from the press, then `endSketchDrag`).
+//   resize   eight handles round one selected box; a picture keeps its
+//            aspect (Shift frees it; on any other box Shift holds it). An
+//            arrow shows a handle on each end instead.
+//   draw     with Text, Box or Arrow armed a press draws one, and the tool
+//            goes back to Select. A click makes a default size.
+//   text     a double press, or Enter, edits a text item's words in place.
+//   drop     an OS file, a Project asset tile (`ASSET_MIME`) or a board card
+//            (`STORYBOARD_MIME`) lands as an item at the drop point.
+//   cursors  other people's pointers on this same sketch (`BoardCursors`
+//            with `where`), over the items.
+//
+// Positions are layer units, read from the paper's own client box at the
+// press (`designPointAt`), so a zoom or a scroll mid-session cannot skew them.
+import { useRef, useState } from "react";
+import type {
+  CSSProperties,
+  DragEvent as ReactDragEvent,
+  FocusEvent as ReactFocusEvent,
+  MouseEvent as ReactMouseEvent,
+  PointerEvent as ReactPointerEvent,
+  ReactNode,
+} from "react";
+import { RESIZE_HANDLES, snapMove } from "@dailies-studio/shot/doc";
+import type { Doc3D, NewSketchItem, SketchItem3D, SketchItemPatch, SnapGuide, StoryboardSketch3D } from "@dailies-studio/shot/doc";
+import { startDrag } from "@dailies-studio/ui";
+import { COMPONENT_ICON, kindIcon } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { rectBetween } from "../../timeline/marquee.js";
+import type { MarqueeRect } from "../../timeline/marquee.js";
+import { ASSET_MIME, readAssetDrag } from "../../files/assetDrag.js";
+import { BoardCursors } from "../BoardCursors.js";
+import { boxStyle } from "../MiniSketch.js";
+import { STORYBOARD_MIME, readDragPayload } from "../storyboardDrop.js";
+import { partNumberOf } from "../PlanPanel.js";
+import { SketchItemView } from "./SketchItem.js";
+import { designPointAt, itemRect, marqueeItems, movedPatch, resizedRect } from "./sketchModel.js";
+import type { SketchRect } from "./sketchModel.js";
+
+/** How far a press travels, in CSS px, before it is a drag and not a click. */
+const DRAG_SLOP_PX = 3;
+/** The snap's pull, in CSS px on screen at every zoom. */
+const SNAP_PX = 6;
+/** What a click with Box or Text armed makes, layer units. */
+const DEFAULT_BOX: readonly [number, number] = [480, 270];
+const DEFAULT_TEXT: readonly [number, number] = [760, 120];
+/** What a click with Arrow armed makes: this long, pointing right. */
+const DEFAULT_ARROW = 400;
+/** A drag shorter than this, layer units, is a click. */
+const MIN_DRAW = 16;
+
+/** The eight handles, in `HANDLE_SITES`' order: corners, then edges. */
+const HANDLES = ["nw", "ne", "se", "sw", "n", "e", "s", "w"] as const;
+
+type Draft = { kind: "box" | "text"; rect: MarqueeRect } | { kind: "arrow"; from: [number, number]; to: [number, number] };
+
+export interface SketchCanvasProps {
+  doc: Doc3D;
+  partId: string;
+  /** The open sketch, or undefined while the plan has none (the first add
+   *  makes Sketch 1). */
+  sketch: StoryboardSketch3D | undefined;
+  /** The paper's width, CSS px. */
+  width: number;
+  /** The text item being edited, or null. */
+  editing: string | null;
+  onEdit(id: string | null): void;
+}
+
+export function SketchCanvas(props: SketchCanvasProps) {
+  const { doc, sketch, width } = props;
+  const store = useStore();
+  const selection = useShotEditor((s) => s.sketchSelection);
+  const tool = useShotEditor((s) => s.sketchTool);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  // State, not a ref: the cursor layer binds to the element.
+  const [paper, setPaper] = useState<HTMLDivElement | null>(null);
+  const [guides, setGuides] = useState<readonly SnapGuide[]>([]);
+  const [marquee, setMarquee] = useState<MarqueeRect | null>(null);
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [drop, setDrop] = useState<[number, number] | null>(null);
+  // A press, not a Tab, focused the item: its focus must not select it again.
+  const pressing = useRef(false);
+  const frame = doc.size;
+  const items = sketch?.items ?? [];
+  const selected = new Set(selection);
+  const one = selection.length === 1 ? items.find((item) => item.id === selection[0]) : undefined;
+  const number = partNumberOf(doc, props.partId) ?? "this shot";
+
+  const pointAt = (clientX: number, clientY: number): [number, number] =>
+    designPointAt(paper!.getBoundingClientRect(), frame, clientX, clientY);
+  const scaleNow = (): number => paper!.getBoundingClientRect().width / frame.width;
+
+  // ── MOVE ──────────────────────────────────────────────────────────────
+  const moveGesture = (event: ReactPointerEvent<HTMLElement>, ids: readonly string[]): void => {
+    const moving = items.filter((item) => ids.includes(item.id));
+    const others = items.filter((item) => !ids.includes(item.id)).map(snapBox);
+    const scale = scaleNow();
+    let begun = false;
+    startDrag(event, {
+      onMove(ev) {
+        const cx = ev.clientX - event.clientX;
+        const cy = ev.clientY - event.clientY;
+        if (!begun && Math.hypot(cx, cy) < DRAG_SLOP_PX) return;
+        if (!begun) {
+          begun = true;
+          store.beginSketchDrag();
+        }
+        const raw = { dx: cx / scale, dy: cy / scale };
+        // ALT MOVES FREELY, the house's snap override.
+        const snap = ev.altKey ? { ...raw, guides: [] } : snapMove(moving.map(snapBox), others, frame, raw, SNAP_PX / scale);
+        const dx = Math.round(snap.dx);
+        const dy = Math.round(snap.dy);
+        setGuides(snap.guides);
+        store.dragSketchItems(Object.fromEntries(moving.map((item) => [item.id, movedPatch(item, dx, dy)])));
+      },
+      onEnd(commit) {
+        setGuides([]);
+        if (begun) store.endSketchDrag(commit);
+      },
+    });
+  };
+
+  // ── RESIZE ────────────────────────────────────────────────────────────
+  const resizeGesture = (event: ReactPointerEvent<HTMLElement>, item: SketchItem3D, handle: string): void => {
+    const scale = scaleNow();
+    const start = itemRect(item);
+    const picture = item.kind === "ref" && (refKind(doc, item) === "image" || refKind(doc, item) === "video");
+    let begun = false;
+    startDrag(event, {
+      onMove(ev) {
+        const dx = (ev.clientX - event.clientX) / scale;
+        const dy = (ev.clientY - event.clientY) / scale;
+        if (!begun) {
+          begun = true;
+          store.beginSketchDrag();
+        }
+        let patch: SketchItemPatch;
+        if (item.kind === "arrow") {
+          const end = handle === "from" ? item.from : item.to;
+          const at: [number, number] = [Math.round(end[0] + dx), Math.round(end[1] + dy)];
+          patch = handle === "from" ? { from: at } : { to: at };
+        } else {
+          const keep = picture !== ev.shiftKey;
+          const next = resizedRect(start, RESIZE_HANDLES[handle]!, dx, dy, keep);
+          patch = { position: [Math.round(next.x), Math.round(next.y)], size: [next.w, next.h] };
+        }
+        store.dragSketchItems({ [item.id]: patch });
+      },
+      onEnd(commit) {
+        if (begun) store.endSketchDrag(commit);
+      },
+    });
+  };
+
+  // ── MARQUEE ───────────────────────────────────────────────────────────
+  const marqueeGesture = (event: ReactPointerEvent<HTMLElement>, shift: boolean): void => {
+    const from = pointAt(event.clientX, event.clientY);
+    const add = shift ? selection : [];
+    let moved = false;
+    startDrag(event, {
+      onMove(ev) {
+        if (!moved && Math.hypot(ev.clientX - event.clientX, ev.clientY - event.clientY) < DRAG_SLOP_PX) return;
+        moved = true;
+        const to = pointAt(ev.clientX, ev.clientY);
+        const rect = rectBetween({ x: from[0], y: from[1] }, { x: to[0], y: to[1] });
+        setMarquee(rect);
+        store.setSketchSelection(marqueeItems(items, rect, add));
+      },
+      onEnd() {
+        setMarquee(null);
+        // A CLICK ON THE PAPER clears the selection; with Shift it keeps it.
+        if (!moved && !shift) store.setSketchSelection([]);
+      },
+    });
+  };
+
+  // ── DRAW ──────────────────────────────────────────────────────────────
+  const drawGesture = (event: ReactPointerEvent<HTMLElement>, kind: "box" | "text" | "arrow"): void => {
+    const from = pointAt(event.clientX, event.clientY);
+    let to = from;
+    startDrag(event, {
+      onMove(ev) {
+        to = pointAt(ev.clientX, ev.clientY);
+        setDraft(kind === "arrow" ? { kind, from, to } : { kind, rect: rectBetween({ x: from[0], y: from[1] }, { x: to[0], y: to[1] }) });
+      },
+      onEnd(commit) {
+        setDraft(null);
+        if (!commit) return;
+        const made = drawnItem(kind, from, to);
+        const ids = store.addSketchItems([made]);
+        store.setSketchTool("select");
+        // New words are typed straight away.
+        if (kind === "text" && ids[0] !== undefined) props.onEdit(ids[0]);
+      },
+    });
+  };
+
+  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>): void => {
+    if (event.button !== 0) return;
+    pressing.current = true;
+    const target = event.target as Element;
+    const handle = target.closest<HTMLElement>("[data-handle]")?.dataset["handle"];
+    const id = target.closest<HTMLElement | SVGElement>("[data-item]")?.getAttribute("data-item") ?? null;
+    if (!readOnly && (tool === "box" || tool === "text" || tool === "arrow")) {
+      event.preventDefault();
+      drawGesture(event, tool);
+      return;
+    }
+    if (handle !== undefined && one !== undefined && !readOnly) {
+      event.preventDefault();
+      resizeGesture(event, one, handle);
+      return;
+    }
+    if (id !== null) {
+      // SHIFT TOGGLES the item; a plain press on an unselected item selects
+      // it alone, on a selected one keeps the group so it moves together.
+      let ids: readonly string[];
+      if (event.shiftKey) ids = selected.has(id) ? selection.filter((s) => s !== id) : [...selection, id];
+      else ids = selected.has(id) ? selection : [id];
+      store.setSketchSelection(ids);
+      if (!readOnly && ids.includes(id)) moveGesture(event, ids);
+      return;
+    }
+    marqueeGesture(event, event.shiftKey);
+  };
+
+  // ── DROP ──────────────────────────────────────────────────────────────
+  const takes = (event: ReactDragEvent): boolean => {
+    const types = Array.from(event.dataTransfer.types);
+    return !readOnly && (types.includes("Files") || types.includes(ASSET_MIME) || types.includes(STORYBOARD_MIME));
+  };
+  const onDragOver = (event: ReactDragEvent<HTMLDivElement>): void => {
+    if (!takes(event)) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    setDrop(pointAt(event.clientX, event.clientY));
+  };
+  const onDrop = (event: ReactDragEvent<HTMLDivElement>): void => {
+    setDrop(null);
+    if (!takes(event)) return;
+    const at = pointAt(event.clientX, event.clientY);
+    const files = Array.from(event.dataTransfer.files ?? []);
+    const asset = readAssetDrag(event.dataTransfer);
+    const card = readDragPayload(event.dataTransfer);
+    // ONLY WHAT LANDS IS TAKEN: a board drag's payload reads only at the drop,
+    // and of those only a card lands here.
+    if (files.length === 0 && asset === null && card?.kind !== "reference") return;
+    event.preventDefault();
+    if (files.length > 0) void store.addSketchItemsFromFiles(files, at);
+    else if (asset !== null) void store.addSketchItemFromAsset(asset.asset, at);
+    else if (card?.kind === "reference") void store.addSketchItemFromCard(card.id, at);
+  };
+
+  const onDoubleClick = (event: ReactMouseEvent): void => {
+    const id = (event.target as Element).closest("[data-item]")?.getAttribute("data-item");
+    const item = items.find((i) => i.id === id);
+    if (item?.kind === "text" && !readOnly) props.onEdit(item.id);
+  };
+
+  const onFocus = (event: ReactFocusEvent): void => {
+    // A KEYBOARD FOCUS selects the item, as a press does; a press already did.
+    const id = (event.target as Element).getAttribute("data-item");
+    if (id !== null && !pressing.current && !selected.has(id)) store.setSketchSelection([id]);
+  };
+
+  return (
+    <div
+      ref={setPaper}
+      className="sketch-paper"
+      data-ground={sketch?.ground ?? "paper"}
+      data-tool={tool}
+      data-testid="sketch-paper"
+      style={{ width, aspectRatio: `${frame.width} / ${frame.height}` }}
+      onPointerDown={onPointerDown}
+      onPointerUp={() => {
+        pressing.current = false;
+      }}
+      onDoubleClick={onDoubleClick}
+      onFocus={onFocus}
+      onDragOver={onDragOver}
+      onDragLeave={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDrop(null);
+      }}
+      onDrop={onDrop}
+    >
+      {items.map((item) => (
+        <SketchItemView
+          key={item.id}
+          doc={doc}
+          item={item}
+          paperPx={width}
+          selected={selected.has(item.id)}
+          editing={props.editing === item.id}
+          onEditEnd={(text) => {
+            props.onEdit(null);
+            const trimmed = text.trim();
+            // AN EMPTIED TEXT GOES: a text item is never stored empty.
+            if (trimmed === "") store.removeSketchItems([item.id]);
+            else if (item.kind === "text" && trimmed !== item.text) store.updateSketchItem(item.id, { text: trimmed });
+          }}
+        />
+      ))}
+      {items.length === 0 && draft === null ? <EmptySketch /> : null}
+      {items.filter((item) => selected.has(item.id)).map((item) => (
+        <span key={item.id} className="sketch-selection" style={rectStyle(doc, itemRect(item))} aria-hidden="true" />
+      ))}
+      {one !== undefined && !readOnly && props.editing === null ? <Handles doc={doc} item={one} /> : null}
+      {guides.map((guide) => (
+        <span
+          key={`${guide.axis}${guide.at}`}
+          className={`sketch-guide is-${guide.axis}`}
+          aria-hidden="true"
+          style={guide.axis === "x" ? { left: `${(guide.at / frame.width + 0.5) * 100}%` } : { top: `${(guide.at / frame.height + 0.5) * 100}%` }}
+        />
+      ))}
+      {marquee === null ? null : <span className="sketch-marquee" data-testid="sketch-marquee" aria-hidden="true" style={marqueeStyle(doc, marquee)} />}
+      {draft === null ? null : <DraftView doc={doc} draft={draft} />}
+      {drop === null ? null : (
+        <span className="sketch-drop" aria-hidden="true" style={{ left: `${(drop[0] / frame.width + 0.5) * 100}%`, top: `${(drop[1] / frame.height + 0.5) * 100}%` }}>
+          {kindIcon("image")}
+          <span className="sketch-drop-chip">{`Drop to add · creates a card pinned to ${number}`}</span>
+        </span>
+      )}
+      {sketch === undefined ? null : <BoardCursors canvas={paper} where={sketch.id} />}
+    </div>
+  );
+}
+
+/** A box as `snapMove` reads one. */
+function snapBox(item: SketchItem3D): { position: [number, number, number]; size: [number, number] } {
+  const r = itemRect(item);
+  return { position: [r.x, r.y, 0], size: [r.w, r.h] };
+}
+
+function refKind(doc: Doc3D, item: Extract<SketchItem3D, { kind: "ref" }>): string | undefined {
+  const card = doc.resources?.references?.find((r) => r.id === item.ref);
+  return card?.type === "asset" ? doc.assets[card.asset]?.kind : card?.type;
+}
+
+const rectStyle = (doc: Doc3D, r: SketchRect): CSSProperties => boxStyle(doc, [r.x, r.y], [r.w, r.h]);
+const marqueeStyle = (doc: Doc3D, m: MarqueeRect): CSSProperties =>
+  boxStyle(doc, [(m.left + m.right) / 2, (m.top + m.bottom) / 2], [m.right - m.left, m.bottom - m.top]);
+
+/** What a finished draw adds: the dragged box, else a default one centred on
+ *  the click. */
+function drawnItem(kind: "box" | "text" | "arrow", from: [number, number], to: [number, number]): NewSketchItem {
+  if (kind === "arrow") {
+    const long = Math.hypot(to[0] - from[0], to[1] - from[1]) >= MIN_DRAW;
+    return { kind: "arrow", from, to: long ? to : [from[0] + DEFAULT_ARROW, from[1]] };
+  }
+  const w = Math.abs(to[0] - from[0]);
+  const h = Math.abs(to[1] - from[1]);
+  const dragged = w >= MIN_DRAW && h >= MIN_DRAW;
+  const size: [number, number] = dragged ? [w, h] : [...(kind === "box" ? DEFAULT_BOX : DEFAULT_TEXT)];
+  // Whole design px: an odd width would put the centre on a half pixel.
+  const position: [number, number] = dragged ? [Math.round((from[0] + to[0]) / 2), Math.round((from[1] + to[1]) / 2)] : from;
+  return kind === "box" ? { kind: "box", position, size } : { kind: "text", text: "Text", role: "title", position, size };
+}
+
+/** The eight handles round one box, or a handle on each end of an arrow. */
+function Handles({ doc, item }: { doc: Doc3D; item: SketchItem3D }) {
+  if (item.kind === "arrow") {
+    return (
+      <>
+        {(["from", "to"] as const).map((end) => (
+          <span
+            key={end}
+            className="sketch-handle is-end"
+            data-handle={end}
+            data-testid={`sketch-handle-${end}`}
+            aria-hidden="true"
+            style={{ left: `${(item[end][0] / doc.size.width + 0.5) * 100}%`, top: `${(item[end][1] / doc.size.height + 0.5) * 100}%` }}
+          />
+        ))}
+      </>
+    );
+  }
+  return (
+    <span className="sketch-handles" style={rectStyle(doc, itemRect(item))} aria-hidden="true">
+      {HANDLES.map((h) => (
+        <span key={h} className={`sketch-handle is-${h}`} data-handle={h} data-testid={`sketch-handle-${h}`} />
+      ))}
+    </span>
+  );
+}
+
+function DraftView({ doc, draft }: { doc: Doc3D; draft: Draft }) {
+  if (draft.kind === "arrow") {
+    const { width: w, height: h } = doc.size;
+    return (
+      <svg className="sketch-draft is-arrow" viewBox={`${-w / 2} ${-h / 2} ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
+        <path d={`M ${draft.from[0]} ${draft.from[1]} L ${draft.to[0]} ${draft.to[1]}`} />
+      </svg>
+    );
+  }
+  return <span className={`sketch-draft is-${draft.kind}`} style={marqueeStyle(doc, draft.rect)} aria-hidden="true" />;
+}
+
+/** SB2's three starts, on an empty sketch. */
+function EmptySketch() {
+  const store = useStore();
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const start = (label: string, icon: ReactNode, tool: "image" | "component" | "box", key?: string): ReactNode => (
+    <button
+      type="button"
+      className="sketch-start"
+      data-testid={`sketch-start-${tool}`}
+      disabled={readOnly}
+      onPointerDown={(event) => event.stopPropagation()}
+      onClick={() => store.setSketchTool(tool)}
+    >
+      <span className="sketch-start-icon" aria-hidden="true">
+        {icon}
+      </span>
+      <span className="sketch-start-label">
+        {label}
+        {key === undefined ? null : <kbd className="sketch-start-key">{key}</kbd>}
+      </span>
+    </button>
+  );
+  return (
+    <div className="sketch-empty" data-testid="sketch-empty">
+      <div className="sketch-empty-copy">
+        <h3 className="sketch-empty-title">Sketch the shot</h3>
+        <p className="sketch-empty-lead">Place what we see, roughly. The agent and the Studio read it.</p>
+      </div>
+      <div className="sketch-empty-starts">
+        {start("Drop images", kindIcon("image"), "image")}
+        {start("Add a component", COMPONENT_ICON, "component")}
+        {start("Draw a box", kindIcon("rect"), "box", "R")}
+      </div>
+    </div>
+  );
+}