@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/stage/stageTheme.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+
+export type StageTheme = "light" | "dark";
+
+/** The stage follows only the resolved theme stamped on its own document.
+ *  Preference storage belongs to the chrome, and authored content must never
+ *  learn about System/Light/Dark as document state. */
+export function readStageTheme(root: HTMLElement | null = stageRoot()): StageTheme {
+  return root?.dataset.dailiesStudioTheme === "light" ? "light" : "dark";
+}
+
+/** Observe the same-origin root attribute StagePanel updates in place. This
+ *  causes editor-only Three materials to be rebuilt without remounting the
+ *  iframe, Canvas, authored runtime, or bridge. */
+export function useStageTheme(): StageTheme {
+  const [theme, setTheme] = useState<StageTheme>(() => readStageTheme());
+
+  useEffect(() => {
+    const root = stageRoot();
+    if (root === null || typeof MutationObserver === "undefined") return;
+    const sync = (): void => setTheme(readStageTheme(root));
+    const observer = new MutationObserver(sync);
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: ["data-dailies-studio-theme"],
+    });
+    sync();
+    return () => observer.disconnect();
+  }, []);
+
+  return theme;
+}
+
+function stageRoot(): HTMLElement | null {
+  return typeof document === "undefined" ? null : document.documentElement;
+}

package/src/stage/stageWarmup.ts

@@ -0,0 +1,11 @@
+/** `?warmup=off|mount|compile` on the stage URL: how much of the scenes the
+ *  playhead is about to reach the stage prepares ahead of their cuts while
+ *  the transport runs (`ShotRuntimeProps.warmup`). A diagnostic knob for the
+ *  playback gate's A/B arms; the default is the whole warm-up. Its own
+ *  module, read once: the stage URL is set at iframe mount and never
+ *  rewritten. */
+export const STAGE_WARMUP: "off" | "mount" | "compile" = (() => {
+  if (typeof window === "undefined") return "compile";
+  const value = new URLSearchParams(window.location.search).get("warmup");
+  return value === "off" || value === "mount" ? value : "compile";
+})();

package/src/stage/textAutoSize.ts

@@ -0,0 +1,124 @@
+// AUTO-WIDTH TEXT (`TextBox`): the stage measures each auto box and pushes
+// the size to the chrome, which writes it into `transform.size` (bridge v40
+// `onTextAutoSize`). The `naturalSize` model: the box is stored, so the export,
+// the selection handles and hit-testing all read the same one. While the
+// inline editor types, only the handles run ahead (`grownQuad`); the store
+// hears the size once, after the commit.
+import { useEffect, useState } from "react";
+import { autoTextSize, canvasFont } from "@dailies-studio/shot";
+import type { Raster2DContext } from "@dailies-studio/shot";
+import type { Doc3D, TextLayer3D } from "@dailies-studio/shot/doc";
+import type { LayerFrame, ScreenQuad } from "./project.js";
+
+let measuring: Raster2DContext | null | undefined;
+function measureContext(): Raster2DContext | null {
+  if (measuring !== undefined) return measuring;
+  const ctx = document.createElement("canvas").getContext("2d");
+  measuring = ctx === null ? null : (ctx as unknown as Raster2DContext);
+  return measuring;
+}
+
+/** The size `text` measures to, the same measure the commit writes. Null
+ *  with no 2D canvas. */
+export function measureAutoText(text: TextLayer3D["text"]): [number, number] | null {
+  const ctx = measureContext();
+  return ctx === null ? null : autoTextSize(ctx, text);
+}
+
+/**
+ * `quad` (screen TL, TR, BR, BL) of a box `from` design px, regrown to `to`
+ * the way `refitAutoText` moves it: the top edge stays, and so does the edge
+ * the alignment reads from. For the selection handles while the inline editor
+ * types. ponytail: affine, exact for a box facing the view; a steep
+ * perspective tilt draws a little off until the commit re-projects it.
+ */
+export function grownQuad(
+  quad: ScreenQuad,
+  from: readonly [number, number],
+  to: readonly [number, number],
+  align: TextLayer3D["text"]["style"]["align"],
+): ScreenQuad {
+  if (from[0] <= 0 || from[1] <= 0) return quad;
+  const [w, h] = to;
+  const ux = (quad[2] - quad[0]) / from[0];
+  const uy = (quad[3] - quad[1]) / from[0];
+  const vx = (quad[6] - quad[0]) / from[1];
+  const vy = (quad[7] - quad[1]) / from[1];
+  const shift = (w - from[0]) * (align === "right" ? 1 : align === "center" ? 0.5 : 0);
+  const x = quad[0] - ux * shift;
+  const y = quad[1] - uy * shift;
+  return [x, y, x + ux * w, y + uy * w, x + ux * w + vx * h, y + uy * w + vy * h, x + vx * h, y + vy * h];
+}
+
+/** An auto box's live size while the inline editor types it. */
+export interface TypedSize {
+  id: string;
+  size: readonly [number, number];
+  align: TextLayer3D["text"]["style"]["align"];
+}
+
+/**
+ * The size the typed layer's quad was projected from (its `LayerFrame`), while
+ * `typed` still runs ahead of it. Null once there is nothing to grow: the layer
+ * is not selected, is gone, or its stored box has caught up. The store hears
+ * the size a round trip after the commit (the measure, then `refitAutoText`),
+ * so the handles hold the typed size until then instead of jumping back.
+ */
+export function typedFrom(
+  typed: TypedSize | null,
+  ids: readonly string[],
+  frames: readonly LayerFrame[] | null,
+): readonly [number, number] | null {
+  if (typed === null || !ids.includes(typed.id)) return null;
+  const from = frames?.find((f) => f.id === typed.id)?.size;
+  return from === undefined || (from[0] === typed.size[0] && from[1] === typed.size[1]) ? null : from;
+}
+
+/** Every auto-width text layer in the document, scenes and definitions both.
+ *  ponytail: an instance prop that overrides a definition's text content is
+ *  not measured; the box fits the definition's own copy. */
+function autoTextLayers(doc: Doc3D): TextLayer3D[] {
+  const out: TextLayer3D[] = [];
+  const tables = [...Object.values(doc.scenesById), ...Object.values(doc.components ?? {})];
+  for (const { layersById } of tables) {
+    for (const layer of Object.values(layersById)) {
+      if (layer.kind === "text" && layer.text.box === "auto") out.push(layer);
+    }
+  }
+  return out;
+}
+
+/**
+ * Measure every auto text box after each document change and push the ones
+ * whose stored size is off. Re-measures when the page's fonts finish loading,
+ * so a box measured against a fallback face is corrected. `push` null (an
+ * export is running) measures nothing.
+ */
+export function useTextAutoSize(
+  doc: Doc3D | null,
+  push: ((layerId: string, size: readonly [number, number]) => void) | null,
+): void {
+  const [fontsEpoch, setFontsEpoch] = useState(0);
+  useEffect(() => {
+    // jsdom has no FontFaceSet.
+    const fonts = document.fonts as FontFaceSet | undefined;
+    if (fonts === undefined) return;
+    const bump = (): void => setFontsEpoch((n) => n + 1);
+    fonts.addEventListener("loadingdone", bump);
+    return () => fonts.removeEventListener("loadingdone", bump);
+  }, []);
+  useEffect(() => {
+    if (doc === null || push === null) return;
+    const ctx = measureContext();
+    if (ctx === null) return;
+    for (const layer of autoTextLayers(doc)) {
+      const { style } = layer.text;
+      // Starts a face that is declared but not yet used; `loadingdone` above
+      // re-measures when it lands.
+      void (document.fonts as FontFaceSet | undefined)?.load(canvasFont(style), layer.text.content).catch(() => {});
+      const [w, h] = autoTextSize(ctx, layer.text);
+      const [sw, sh] = layer.transform.size;
+      if (w !== sw || h !== sh) push(layer.id, [w, h]);
+    }
+  }, [doc, push, fontsEpoch]);
+}