@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/storyboard/shotboard/sketchModel.ts

@@ -0,0 +1,219 @@
+// THE SHOT BOARD'S ARITHMETIC: pure, so the suite pins it without a DOM.
+//
+// Every number here is a LAYER UNIT (design px, origin at the frame's centre,
+// +y down, types.ts), the unit the sketch stores and the Studio inspector
+// shows. The canvas turns a client point into one with `designPointAt` and
+// back with MiniSketch's `boxStyle` (percentages of the paper), so a zoom only
+// changes the paper's width and nothing else is re-derived.
+import { ALIGN_AXIS, DISTRIBUTE_MODES, MIN_DISTRIBUTE, applyToTransform, sketchCardOf } from "@dailies-studio/shot/doc";
+import type { AlignMode, Doc3D, ResizeHandle, SketchItem3D, SketchItemPatch, Transform3D } from "@dailies-studio/shot/doc";
+import { marqueeHits } from "../../timeline/marquee.js";
+import type { MarqueeRect } from "../../timeline/marquee.js";
+
+/** An item's box: its centre and its size. An arrow's is the box its two ends
+ *  span. */
+export interface SketchRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export function itemRect(item: SketchItem3D): SketchRect {
+  if (item.kind === "arrow") {
+    const [ax, ay] = item.from;
+    const [bx, by] = item.to;
+    return { x: (ax + bx) / 2, y: (ay + by) / 2, w: Math.abs(bx - ax), h: Math.abs(by - ay) };
+  }
+  return { x: item.position[0], y: item.position[1], w: item.size[0], h: item.size[1] };
+}
+
+/** The patch that moves an item by (dx, dy): its box, or both arrow ends. */
+export function movedPatch(item: SketchItem3D, dx: number, dy: number): SketchItemPatch {
+  if (item.kind === "arrow") {
+    return { from: [item.from[0] + dx, item.from[1] + dy], to: [item.to[0] + dx, item.to[1] + dy] };
+  }
+  return { position: [item.position[0] + dx, item.position[1] + dy] };
+}
+
+/** The file name a Project asset shows: its stored name without the hash
+ *  prefix, as the Assets panel and `sketchLines` print it. */
+export function fileNameOf(path: string): string {
+  return path.replace(/^[0-9a-f]{8}-/, "");
+}
+
+/** What an item is, in one word: the Layers row's trailing kind (Paper SB4). */
+export type SketchItemKind = "Title" | "Body" | "Caption" | "Image" | "Video" | "Component" | "Box" | "Arrow" | "Missing";
+
+export function itemKindOf(doc: Doc3D, item: SketchItem3D): SketchItemKind {
+  switch (item.kind) {
+    case "text":
+      return item.role === "title" ? "Title" : item.role === "body" ? "Body" : "Caption";
+    case "box":
+      return "Box";
+    case "arrow":
+      return "Arrow";
+    case "ref": {
+      const card = sketchCardOf(doc, item);
+      if (card?.type === "component") return "Component";
+      if (card?.type === "asset") {
+        const kind = doc.assets[card.asset]?.kind;
+        if (kind === "video") return "Video";
+        if (kind === "image") return "Image";
+      }
+      return "Missing";
+    }
+  }
+}
+
+/** A component card's name: its definition's, else the export's, else the
+ *  card's own label. */
+export function componentNameOf(doc: Doc3D, card: Extract<NonNullable<ReturnType<typeof sketchCardOf>>, { type: "component" }>): string {
+  if (card.def !== undefined) {
+    const def = doc.components?.[card.def];
+    if (def !== undefined) return def.name;
+  }
+  if (card.component !== undefined) return card.component.split("#").at(-1)!;
+  return card.label;
+}
+
+/**
+ * The Layers row's name (Paper SB3): a component reads "<label prop> ·
+ * <component name>" when its card sets a text `label`, a picture its file
+ * name, text its words, a box or an arrow its label, else its kind.
+ */
+export function itemNameOf(doc: Doc3D, item: SketchItem3D): string {
+  switch (item.kind) {
+    case "text":
+      return item.text;
+    case "box":
+      return item.label ?? "Box";
+    case "arrow":
+      return item.label ?? "Arrow";
+    case "ref": {
+      const card = sketchCardOf(doc, item);
+      if (card === undefined) return "Missing card";
+      if (card.type === "component") {
+        const name = componentNameOf(doc, card);
+        const label = card.props["label"];
+        return typeof label === "string" && label.trim() !== "" ? `${label.trim()} · ${name}` : name;
+      }
+      if (card.type === "asset") {
+        const asset = doc.assets[card.asset];
+        return asset === undefined ? card.label : fileNameOf(asset.path);
+      }
+      return card.label;
+    }
+  }
+}
+
+/** The design point under a client point, on a paper drawn at `paper` (its
+ *  client box). */
+export function designPointAt(
+  paper: { left: number; top: number; width: number; height: number },
+  frame: { width: number; height: number },
+  clientX: number,
+  clientY: number,
+): [number, number] {
+  const scale = paper.width / frame.width;
+  return [Math.round((clientX - paper.left) / scale - frame.width / 2), Math.round((clientY - paper.top) / scale - frame.height / 2)];
+}
+
+/** The ids a marquee (in layer units) touches, in front of `add` (the
+ *  selection frozen at a Shift press). `marqueeHits`' touching rule. */
+export function marqueeItems(items: readonly SketchItem3D[], rect: MarqueeRect, add: readonly string[]): string[] {
+  const bars = items.map((item) => {
+    const r = itemRect(item);
+    return { layerId: item.id, sceneId: "sketch", left: r.x - r.w / 2, right: r.x + r.w / 2, top: r.y - r.h / 2, bottom: r.y + r.h / 2 };
+  });
+  return marqueeHits(rect, bars, { sceneId: "sketch", add });
+}
+
+/**
+ * A box resized from `handle` by (dx, dy) layer units of handle travel, the
+ * stage's own resize arithmetic (`applyToTransform`): the opposite edge stays
+ * put, and the size never collapses. `keepAspect` (a picture) holds the box's
+ * aspect on every handle: a corner follows the axis the pointer committed to,
+ * an edge derives the other side about the centre.
+ */
+export function resizedRect(rect: SketchRect, handle: ResizeHandle, dx: number, dy: number, keepAspect: boolean): SketchRect {
+  const transform: Transform3D = { position: [rect.x, rect.y, 0], size: [rect.w, rect.h], tilt: [0, 0], rollDeg: 0, opacity: 1 };
+  const corner = handle.sx !== 0 && handle.sy !== 0;
+  const next = applyToTransform(transform, { kind: "resize", dx, dy, handle, keepAspect: keepAspect && corner });
+  let [w, h] = next.size;
+  if (keepAspect && !corner && rect.h > 0) {
+    const aspect = rect.w / rect.h;
+    if (handle.sx !== 0) h = Math.max(1, w / aspect);
+    else w = Math.max(1, h * aspect);
+  }
+  return { x: next.position[0], y: next.position[1], w: Math.round(w), h: Math.round(h) };
+}
+
+/**
+ * Align or distribute items, `ALIGN_MODES`' words: ONE item aligns to the
+ * frame, two or more to the selection's own bounds, a distribution needs
+ * `MIN_DISTRIBUTE` and leaves equal gaps between the first and the last.
+ * Answers each moved item's patch.
+ */
+export function alignPatches(
+  items: readonly SketchItem3D[],
+  mode: AlignMode,
+  frame: { width: number; height: number },
+): Record<string, SketchItemPatch> {
+  const axis = ALIGN_AXIS[mode];
+  const boxes = items.map((item) => {
+    const r = itemRect(item);
+    return axis === "x" ? { item, centre: r.x, extent: r.w } : { item, centre: r.y, extent: r.h };
+  });
+  const out: Record<string, SketchItemPatch> = {};
+  const move = (item: SketchItem3D, by: number): void => {
+    if (by === 0) return;
+    out[item.id] = axis === "x" ? movedPatch(item, by, 0) : movedPatch(item, 0, by);
+  };
+  if (DISTRIBUTE_MODES.has(mode)) {
+    if (boxes.length < MIN_DISTRIBUTE) return out;
+    const sorted = [...boxes].sort((a, b) => a.centre - b.centre);
+    const first = sorted[0]!;
+    const last = sorted.at(-1)!;
+    const span = last.centre + last.extent / 2 - (first.centre - first.extent / 2);
+    const gap = (span - sorted.reduce((sum, b) => sum + b.extent, 0)) / (sorted.length - 1);
+    let edge = first.centre + first.extent / 2;
+    for (const box of sorted.slice(1, -1)) {
+      move(box.item, edge + gap + box.extent / 2 - box.centre);
+      edge += gap + box.extent;
+    }
+    return out;
+  }
+  const half = (axis === "x" ? frame.width : frame.height) / 2;
+  const min = boxes.length === 1 ? -half : Math.min(...boxes.map((b) => b.centre - b.extent / 2));
+  const max = boxes.length === 1 ? half : Math.max(...boxes.map((b) => b.centre + b.extent / 2));
+  for (const box of boxes) {
+    const target =
+      mode === "left" || mode === "top"
+        ? min + box.extent / 2
+        : mode === "right" || mode === "bottom"
+          ? max - box.extent / 2
+          : (min + max) / 2;
+    move(box.item, target - box.centre);
+  }
+  return out;
+}
+
+// ── zoom ──────────────────────────────────────────────────────────────────
+
+/** The zoom steps, as multiples of the fitted paper (100% is Fit). */
+export const SKETCH_ZOOMS = [0.25, 0.5, 0.7, 1, 1.25, 1.5, 2, 3, 4] as const;
+
+/** The next step in or out from `zoom`. */
+export function stepZoom(zoom: number, by: 1 | -1): number {
+  if (by > 0) return SKETCH_ZOOMS.find((z) => z > zoom + 1e-6) ?? SKETCH_ZOOMS.at(-1)!;
+  return [...SKETCH_ZOOMS].reverse().find((z) => z < zoom - 1e-6) ?? SKETCH_ZOOMS[0];
+}
+
+/** The paper's width at 100%: as wide as the desk allows, and short enough
+ *  that the strip under it still shows (`below` px). Never under 160. */
+export function fitPaperWidth(desk: { width: number; height: number }, frame: { width: number; height: number }, pad: number, below: number): number {
+  const byWidth = desk.width - pad * 2;
+  const byHeight = ((desk.height - pad * 2 - below) * frame.width) / frame.height;
+  return Math.max(160, Math.floor(Math.min(byWidth, byHeight)));
+}

package/src/panels/storyboard/storyboardDrop.ts

@@ -0,0 +1,164 @@
+// What lands on the board: files from the desktop, a card dragged to another
+// lane, a planned shot dragged to a new place in the outline.
+//
+// One vendor MIME for the in-app payloads, mirrored to `text/plain` because
+// Safari drops custom types on some paths; `readDragPayload` reads the vendor
+// type first and trusts `text/plain` only when it parses as OUR json, so the
+// outliner's plain-text layer ids never read as a card.
+//
+// Files are filtered by EXTENSION here, `AddMenu`'s rule: the server stores
+// the bytes before it consults its kind map (`KIND_BY_EXT`), so a file the map
+// does not know would leave an orphan blob nothing collects.
+import { linkUrlProblem } from "@dailies-studio/shot/doc";
+
+export const STORYBOARD_MIME = "application/x-dailies-storyboard";
+
+/** What a board copy or cut writes under `STORYBOARD_MIME`: a marker that the
+ *  in-memory clip is the clipboard's latest, not the clip itself. A board
+ *  paste takes the clip only under it. */
+export const CLIP_MARKER = "storyboard-clip";
+
+/** What a board drag CARRIES: a card (dropped on a lane, it moves there), or
+ *  a planned shot (dropped in the outline, it reorders). */
+export type DragPayload = { kind: "reference"; id: string } | { kind: "part"; id: string };
+
+/** The extensions the server's `KIND_BY_EXT` answers image or video for. */
+export const ACCEPTED_MEDIA_EXTENSIONS = [
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".webp",
+  ".avif",
+  ".gif",
+  ".svg",
+  ".mp4",
+  ".webm",
+  ".mov",
+  ".m4v",
+] as const;
+
+/** The extensions it answers audio for: each lands as a sound card. */
+export const ACCEPTED_AUDIO_EXTENSIONS = [".mp3", ".wav", ".ogg", ".flac", ".m4a", ".aac"] as const;
+
+export const AUDIO_ACCEPT_ATTRIBUTE = `${ACCEPTED_AUDIO_EXTENSIONS.join(",")},audio/mpeg,audio/wav,audio/x-wav,audio/ogg,audio/flac,audio/mp4,audio/x-m4a,audio/aac`;
+
+export const ACCEPT_ATTRIBUTE = `${ACCEPTED_MEDIA_EXTENSIONS.join(",")},image/png,image/jpeg,image/webp,image/avif,image/gif,image/svg+xml,video/mp4,video/webm,video/quicktime,${AUDIO_ACCEPT_ATTRIBUTE}`;
+
+const endsWithAny = (name: string, exts: readonly string[]): boolean => {
+  const lower = name.toLowerCase();
+  return exts.some((ext) => lower.endsWith(ext));
+};
+
+/** An audio file by its name: it lands as a sound card, not a reference. */
+export function isAudioFile(name: string): boolean {
+  return endsWithAny(name, ACCEPTED_AUDIO_EXTENSIONS);
+}
+
+/**
+ * What the board says about files it cannot take, or null when it takes them
+ * all. Built from the lists above, so the sentence cannot name a stale set.
+ * Every door that filters files (paste, a lane drop, the pickers) says it.
+ */
+export function refusedFilesMessage(files: readonly File[]): string | null {
+  const refused = files.filter((file) => !endsWithAny(file.name, ACCEPTED_MEDIA_EXTENSIONS) && !isAudioFile(file.name));
+  if (refused.length === 0) return null;
+  return (
+    `The board takes images, videos and audio (${ACCEPTED_AUDIO_EXTENSIONS.join(" ")}). ` +
+    `${refused.map((file) => file.name).join(", ")} ${refused.length === 1 ? "is" : "are"} not one.`
+  );
+}
+
+/** The files the board can take: images, videos and audio, by extension. */
+export function acceptedFiles(files: Iterable<File>): File[] {
+  const out: File[] = [];
+  for (const file of files) {
+    if (endsWithAny(file.name, ACCEPTED_MEDIA_EXTENSIONS) || isAudioFile(file.name)) out.push(file);
+  }
+  return out;
+}
+
+export function writeDrag(dataTransfer: DataTransfer, payload: DragPayload): void {
+  const text = JSON.stringify(payload);
+  dataTransfer.setData(STORYBOARD_MIME, text);
+  dataTransfer.setData("text/plain", text);
+  dataTransfer.effectAllowed = "move";
+}
+
+function parsePayload(text: string): DragPayload | null {
+  try {
+    const parsed = JSON.parse(text) as unknown;
+    if (typeof parsed !== "object" || parsed === null) return null;
+    const row = parsed as Record<string, unknown>;
+    const kind = row["kind"];
+    if ((kind === "reference" || kind === "part") && typeof row["id"] === "string") {
+      return { kind, id: row["id"] };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/** The payload a board drag carries, or null for anything else (a file, a
+ *  layer id from the outliner). Reads only `types` and `getData`, which is
+ *  all a jsdom test can hand a synthetic drop. */
+export function readDragPayload(dataTransfer: Pick<DataTransfer, "types" | "getData">): DragPayload | null {
+  const types = Array.from(dataTransfer.types ?? []);
+  if (types.includes(STORYBOARD_MIME)) return parsePayload(dataTransfer.getData(STORYBOARD_MIME));
+  return types.includes("text/plain") ? parsePayload(dataTransfer.getData("text/plain")) : null;
+}
+
+/**
+ * Every extension the server stores as a file of its own: the board's media
+ * and audio, plus the kinds only the Assets tab takes (models, fonts, HDRIs).
+ * The CLI's `KIND_BY_EXT` is the source; the shot editor cannot import it.
+ */
+const FILE_URL_EXTENSIONS: readonly string[] = [
+  ...ACCEPTED_MEDIA_EXTENSIONS,
+  ...ACCEPTED_AUDIO_EXTENSIONS,
+  ".glb",
+  ".gltf",
+  ".ttf",
+  ".otf",
+  ".woff",
+  ".woff2",
+  ".hdr",
+  ".exr",
+];
+
+/**
+ * True when a URL names a media FILE rather than a page, by its path's
+ * extension. Such a URL is not imported: links are never fetched, so the
+ * bytes would have to come from the author's own download.
+ */
+export function isMediaUrl(url: string): boolean {
+  try {
+    return endsWithAny(new URL(url).pathname, FILE_URL_EXTENSIONS);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * The https address a drop or paste carries, or null when it carries none.
+ *
+ * `text/uri-list` first (a dragged link or a browser's address bar), whose
+ * lines starting with "#" are comments; then `text/plain`, which is how a
+ * paste of a copied address arrives. Only a value `linkUrlProblem` passes is
+ * returned, so a stray sentence never reads as a link, and the store's own
+ * check never sees anything this let through on a looser rule.
+ */
+export function urlFromTransfer(dataTransfer: Pick<DataTransfer, "types" | "getData">): string | null {
+  const types = Array.from(dataTransfer.types ?? []);
+  const candidates: string[] = [];
+  if (types.includes("text/uri-list")) {
+    const first = dataTransfer
+      .getData("text/uri-list")
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .find((line) => line !== "" && !line.startsWith("#"));
+    if (first !== undefined) candidates.push(first);
+  }
+  if (types.includes("text/plain")) candidates.push(dataTransfer.getData("text/plain").trim());
+  return candidates.find((value) => linkUrlProblem(value) === null) ?? null;
+}