@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/material/MaterialWorkspace.tsx

@@ -0,0 +1,501 @@
+// THE MATERIAL MODE: the node editor, in the docked frame.
+//
+// It is chrome-only. Nodes remain plain shot data and the mounted StagePanel
+// stays exactly where it is: this draws beside it and leaves one hole for it to
+// render the isolated object into. `closeMaterialWorkspace` puts back the
+// layout, the shading, the tool, the isolation and the selection the entry
+// borrowed.
+//
+// ── WHERE EACH PART LANDS ───────────────────────────────────────────────
+//
+// One component, portalled into the shell's cells (panels/stage/cellSlots.tsx),
+// so its state and the graph's React Flow provider stay one React subtree:
+//
+//   LEFT      the Project's graphs and the starters (MaterialLibrary.tsx);
+//   BAR       the way back, the trail, the slot, the compile status, then the
+//             TSL toggle, the graph's zoom and Recenter pushed right;
+//   CENTRE    the graph (or its TSL source), a seam, and the object's HOLE at
+//             the right of the canvas cell. The setup screen instead, while
+//             the mesh has no graph.
+//
+// The top bar, the inspector and the timeline stay on screen around it. The
+// material's own rows (name, graph, exposed controls) are the inspector's
+// MaterialSection: an exposed control is a per-mesh value with a keyframe
+// dot, authored against the playhead, and the timeline under the graph is
+// where it is scrubbed.
+//
+// ── WHY THE NODE INSPECTOR IS NOT HERE ──────────────────────────────────
+//
+// It showed ONE selected node's value away from the card the author was
+// looking at, and it was the only way to type a number. Every field it had is
+// on the card itself now (`MaterialNode.tsx`), which also removed a second
+// commit path into a node's value.
+//
+// ── AND WHY THE SLOT PICKER IS IN THE BAR ───────────────────────────────
+//
+// A model ships one material per submesh, and schema v17 lets each carry its
+// own graph. Which one is on the canvas is a property of the WORKSPACE and not
+// of the document, exactly like the trail beside it, so it sits in the same
+// row, and everything below is resolved through it.
+import { lazy, Suspense, useRef, useState } from "react";
+import { Combobox } from "@dailies-studio/ui";
+import {
+  emitMaterialGraphTsl,
+  homeOf,
+  isGraphMaterial,
+  materialBindingForSlot,
+  validateMaterialGraph,
+} from "@dailies-studio/shot/doc";
+import type { MaterialGraph3D, MeshMaterialSlotInfo } from "@dailies-studio/shot/doc";
+import { CHEVRON_LEFT_ICON } from "../../icons.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import { MATERIAL_COLUMN } from "../../state/panelSize.js";
+import { shortcutHint } from "../../state/shortcuts.js";
+import { workspaceOf } from "../../state/workspace.js";
+import { ResizeHandle } from "../ResizeHandle.js";
+import { InCell } from "../stage/cellSlots.js";
+import { MATERIAL_STARTERS, MaterialLibrary } from "./MaterialLibrary.js";
+
+const LazyMaterialGraphCanvas = lazy(async () => {
+  const module = await import("./MaterialGraphCanvas.js");
+  return { default: module.MaterialGraphCanvas };
+});
+
+/** How wide the preview hole may be: half the canvas cell, read LIVE at the
+ *  drag. Undefined when the cell has no box yet (nothing laid out). */
+function previewCeiling(centre: HTMLElement | null): number | undefined {
+  const width = centre?.getBoundingClientRect().width ?? 0;
+  return width > 0 ? width / 2 : undefined;
+}
+
+export function MaterialWorkspace() {
+  const store = useStore();
+  // THE MODE PORTALS ONLY IN ITS OWN WORKSPACE, so two modes can never fill
+  // one cell.
+  const own = useShotEditor((state) => workspaceOf(state) === "material");
+  const workspace = useShotEditor((state) => state.materialWorkspace);
+  const doc = useShotEditor((state) => state.doc);
+  const name = useShotEditor((state) => state.name);
+  const materialCompile = useShotEditor((state) => state.materialCompile);
+  const path = useShotEditor((state) => state.materialGraphPath);
+  const slots = useShotEditor((state) =>
+    state.materialWorkspace === null ? undefined : state.meshMaterialSlots[state.materialWorkspace.layerId],
+  );
+  // The camera is derived until the author orbits it, and a drag on the hole
+  // always orbits. Recenter is the visible way back, offered exactly when it
+  // is true.
+  const orbited = useShotEditor((state) => state.isolationOrbit);
+  const [sourceOpen, setSourceOpen] = useState(false);
+  // The place in the bar the graph's zoom is portalled into, from INSIDE the
+  // lazy canvas's React Flow provider (MaterialGraphCanvas.tsx). A state and
+  // not a ref, so the canvas renders again once the place exists.
+  const [zoomSlot, setZoomSlot] = useState<HTMLElement | null>(null);
+  const centreRef = useRef<HTMLElement | null>(null);
+  const holeRef = useRef<HTMLDivElement | null>(null);
+
+  if (!own || workspace === null || doc === null) return null;
+  const layer = homeOf(doc, workspace.containerId)?.layersById[workspace.layerId];
+  if (layer?.kind !== "mesh") return null;
+  // THROUGH THE SLOT. `workspaceMaterialId` in the store resolves it the same
+  // way for the keymap; both call `materialBindingForSlot` rather than each
+  // reading `material.slots` themselves.
+  const binding = isGraphMaterial(layer.mesh.material)
+    ? materialBindingForSlot(layer.mesh.material, workspace.slot)
+    : null;
+  const graph = binding === null ? undefined : doc.materials?.[binding.materialId];
+  const layerName = layer.label?.trim() || "Mesh";
+  const projectName = doc.title ?? name ?? doc.name;
+  const contextName =
+    doc.scenesById[workspace.containerId]?.name ?? doc.components?.[workspace.containerId]?.name ?? "Shot";
+
+  const problems = graph === undefined ? [] : validateMaterialGraph(graph, doc.assets);
+  // No slot test here: the store already resolves the verdict for the open
+  // slot (`cachedMaterialCompile`), and a slot without its own graph shows the
+  // whole model's verdict, which the stage reports under slot null.
+  const compile =
+    graph !== undefined &&
+    materialCompile.status !== "idle" &&
+    materialCompile.materialId === graph.id &&
+    materialCompile.layerId === layer.id
+      ? materialCompile
+      : { status: "idle" as const };
+  const compileLabel =
+    problems.length > 0
+      ? `${problems.length} issue${problems.length === 1 ? "" : "s"}`
+      : compile.status === "compiling"
+        ? "Compiling…"
+        : compile.status === "error"
+          ? "GPU error"
+          : compile.status === "ready"
+            ? "Live"
+            : "Waiting";
+  const compileTitle =
+    problems[0]?.message ??
+    (compile.status === "error"
+      ? compile.message
+      : compile.status === "compiling"
+        ? "The stage is compiling this material graph."
+        : compile.status === "ready"
+          ? "The stage compiled this graph and is previewing it on the isolated mesh."
+          : "Waiting for the stage compiler to report this material.");
+
+  return (
+    <>
+      <InCell name="left">
+        <MaterialLibrary layer={layer} layerName={layerName} currentId={graph?.id ?? null} slot={workspace.slot} />
+      </InCell>
+
+      <InCell name="bar">
+        <div className="material-bar">
+          {/* THE WAY OUT, first in the bar like every mode's. The trail's upper
+              rungs leave too; this is the one that is always in the same place. */}
+          <button
+            type="button"
+            className="back-chip material-back"
+            data-testid="material-back"
+            aria-label="Close material nodes"
+            title="Close material nodes (Esc)"
+            onClick={() => store.closeMaterialWorkspace()}
+          >
+            <span className="tool-icon" aria-hidden="true">
+              {CHEVRON_LEFT_ICON}
+            </span>
+          </button>
+          <MaterialCrumbs
+            projectName={projectName}
+            contextName={contextName}
+            layerName={layerName}
+            graphName={graph?.name ?? "Material"}
+            functionNames={path.map((id) => graph?.functions?.[id]?.name ?? id)}
+          />
+          <SlotPicker slots={slots} slot={workspace.slot} />
+          {graph === undefined ? null : (
+            <span
+              className={`material-compile-status${problems.length > 0 || compile.status === "error" ? " is-error" : ""}${compile.status === "compiling" ? " is-compiling" : ""}`}
+              role="status"
+              title={compileTitle}
+            >
+              <span aria-hidden="true" />
+              {compileLabel}
+            </span>
+          )}
+          {graph === undefined ? null : (
+            <div className="material-bar-end">
+              {/* The visible opener; Tab, Shift+A and a double-click on the
+                  pane open the same palette (MaterialNodePalette.tsx). */}
+              <button
+                type="button"
+                className="btn"
+                data-testid="material-add-node"
+                title={`Add node${shortcutHint("graph.add")}`}
+                onClick={() => store.openMaterialPalette(null)}
+              >
+                Add node
+              </button>
+              <button
+                type="button"
+                className={`btn${sourceOpen ? " is-active" : ""}`}
+                aria-pressed={sourceOpen}
+                onClick={() => setSourceOpen((open) => !open)}
+              >
+                TSL
+              </button>
+              {/* Filled by the canvas while the graph is on screen; takes no
+                  room of its own (`display: contents`). */}
+              <div className="material-zoom-slot" ref={setZoomSlot} />
+              {/* THE WAY BACK for an orbited preview. Nothing re-derives an
+                  orbited camera, by design, and the hole takes no pointer (a
+                  drag on it reaches the stage), so a control over it could not
+                  be pressed. The stage owns the double-click (`onFitRequest`). */}
+              {orbited ? (
+                <button
+                  type="button"
+                  className="btn"
+                  data-testid="material-refit"
+                  title="Frame the object head-on again (Home)"
+                  onClick={() => store.fitWorkingView()}
+                >
+                  Recenter
+                </button>
+              ) : null}
+            </div>
+          )}
+        </div>
+      </InCell>
+
+      <InCell name="centre">
+        <section
+          className="material-workspace"
+          aria-label={`Material graph for ${layerName}`}
+          ref={centreRef}
+        >
+          {graph === undefined ? (
+            <MaterialSetup
+              layerId={layer.id}
+              legacy={layer.mesh.material !== undefined && !isGraphMaterial(layer.mesh.material)}
+            />
+          ) : (
+            <>
+              <div className="material-graph-region">
+                {/* THE GPU'S OWN WORDS, on screen and not only in the pill's
+                    tooltip, which a touch user cannot reach. Validator problems
+                    need no strip: their node cards already show them. */}
+                {compile.status === "error" ? (
+                  <div className="code-studio-strip is-error" role="alert" data-testid="material-compile-error">
+                    {compile.message}
+                  </div>
+                ) : null}
+                {sourceOpen ? (
+                  <SourceView graph={graph} />
+                ) : (
+                  <Suspense
+                    fallback={
+                      <section className="material-graph-canvas is-loading" aria-label="Loading material node graph">
+                        <p className="material-empty-copy">Loading node canvas…</p>
+                      </section>
+                    }
+                  >
+                    <LazyMaterialGraphCanvas
+                      graph={graph}
+                      materialId={graph.id}
+                      layerId={layer.id}
+                      slot={workspace.slot}
+                      zoomSlot={zoomSlot}
+                    />
+                  </Suspense>
+                )}
+              </div>
+              {/* THE OBJECT, AND NOTHING ELSE IN HERE WITH IT.
+                  A HOLE and not a component: the stage iframe behind the shell
+                  is still rendering the isolated layer, and `measureInset` hands
+                  it this element's rect to frame into. So what shows here is the
+                  real object under the real material, which is the only reason
+                  this mode can claim preview === export. `.stage-window` is the
+                  class `measureInset` LOOKS FOR, shared with every mode's hole.
+                  An `aria-hidden` empty div, because a screen reader has nothing
+                  to read in a GL surface this document does not own. */}
+              <div
+                className="stage-window material-preview-hole"
+                aria-hidden="true"
+                data-testid="material-preview-hole"
+                ref={holeRef}
+              />
+              {/* ON THE SEAM, beside the hole it sizes, from the same variable
+                  (`--material-preview-w`). A drag starts from the width the hole
+                  is DRAWN at and is capped by half the live canvas cell, so the
+                  edge moves with the pointer from the first pixel. */}
+              <ResizeHandle
+                axis="x"
+                getValue={() =>
+                  holeRef.current?.getBoundingClientRect().width || store.getState().materialColumnWidth
+                }
+                // The hole is on the RIGHT, so moving the pointer along +x
+                // shrinks it: the inspector's rule.
+                sign={-1}
+                onChange={(px) => store.setMaterialColumnWidth(px, previewCeiling(centreRef.current))}
+                onReset={() => store.setMaterialColumnWidth(MATERIAL_COLUMN.default)}
+                className="material-workspace-resize"
+                label="Resize the material preview"
+              />
+            </>
+          )}
+        </section>
+      </InCell>
+    </>
+  );
+}
+
+/**
+ * The trail: Project › Shot › Mesh › Material › function › function.
+ *
+ * The first three rungs are buttons, and each is a way out.
+ *
+ * The first three rungs all close the workspace, because that is what going
+ * back up from a shader means: `closeMaterialWorkspace` restores the viewport,
+ * the tool and the selection the entry borrowed. The Project rung additionally
+ * leaves the shot, which is the one place the two differ.
+ */
+function MaterialCrumbs({
+  projectName,
+  contextName,
+  layerName,
+  graphName,
+  functionNames,
+}: {
+  projectName: string;
+  contextName: string;
+  layerName: string;
+  graphName: string;
+  functionNames: readonly string[];
+}) {
+  const store = useStore();
+  const depth = functionNames.length;
+  const leave = (): void => store.closeMaterialWorkspace();
+  return (
+    <nav className="material-workspace-crumbs" data-testid="material-crumbs">
+      <button
+        type="button"
+        className="crumb"
+        title="The whole Project"
+        onClick={() => {
+          leave();
+          store.leaveScene();
+        }}
+      >
+        {projectName}
+      </button>
+      <button type="button" className="crumb" onClick={leave}>
+        {contextName}
+      </button>
+      <button type="button" className="crumb" onClick={leave}>
+        {layerName}
+      </button>
+      <button
+        type="button"
+        className={`crumb${depth === 0 ? " is-current" : ""}`}
+        aria-current={depth === 0}
+        // ONE `exitMaterialSubgraph` PER LEVEL rather than a "go to root" verb,
+        // because the store's rung is one level and adding a second spelling of
+        // the same climb is how the two end up disagreeing about what clears.
+        onClick={() => {
+          for (let level = 0; level < depth; level += 1) store.exitMaterialSubgraph();
+        }}
+      >
+        {graphName}
+      </button>
+      {functionNames.map((fnName, index) => (
+        <button
+          key={`${index}:${fnName}`}
+          type="button"
+          className={`crumb${index === depth - 1 ? " is-current" : ""}`}
+          aria-current={index === depth - 1}
+          onClick={() => {
+            for (let level = index; level < depth - 1; level += 1) store.exitMaterialSubgraph();
+          }}
+        >
+          {fnName}
+        </button>
+      ))}
+    </nav>
+  );
+}
+
+/** The rail's value for the layer-wide binding. Not a slot index, so it cannot
+ *  collide with one. */
+const WHOLE_MODEL = "all";
+
+/**
+ * Which of a model's materials is on the canvas.
+ *
+ * ABSENT when the mesh has no separate materials, which is every primitive and
+ * every model with one: a dropdown with a single unchangeable row is furniture
+ * that says nothing. "Whole model" is first and is the default, because it is
+ * the binding a mesh has before anybody picks a submesh and the only one a
+ * primitive can have.
+ */
+function SlotPicker({
+  slots,
+  slot,
+}: {
+  slots: readonly MeshMaterialSlotInfo[] | undefined;
+  slot: number | null;
+}) {
+  const store = useStore();
+  if (slots === undefined || slots.length === 0) return null;
+  return (
+    <Combobox
+      className="material-slot-picker"
+      // `WHOLE` and not the empty string, which `Combobox` reads as "no value"
+      // and renders as a placeholder, so the layer-wide binding (the default
+      // and the commonest state) showed as a blank control.
+      value={slot === null ? WHOLE_MODEL : String(slot)}
+      ariaLabel="Material slot"
+      options={[
+        { value: WHOLE_MODEL, label: "Whole model" },
+        ...slots.map((entry) => ({
+          value: String(entry.index),
+          label: `${entry.index} · ${entry.name.trim() === "" ? "Material" : entry.name}`,
+        })),
+      ]}
+      onChange={(value) => store.setMaterialSlot(value === WHOLE_MODEL ? null : Number(value))}
+    />
+  );
+}
+
+/**
+ * The centre while the mesh has no graph: what this place is, and the three
+ * ways to start. The graphs the Project already has are one column over, in
+ * the library, which offers the same starters as rows.
+ */
+function MaterialSetup({ layerId, legacy }: { layerId: string; legacy: boolean }) {
+  const store = useStore();
+  return (
+    <div className="material-setup">
+      <div className="material-setup-intro">
+        <span className="material-eyebrow">Material nodes</span>
+        <h2>Build the surface on the real object.</h2>
+        <p>
+          The mesh stays isolated on the stage while nodes describe its TSL material. Start from a neutral model
+          here, or pick a graph this Project already has from the library on the left.
+        </p>
+        {legacy ? (
+          <p className="material-legacy-note">
+            This mesh uses a legacy catalog material. It will keep rendering until you replace it with a node graph.
+          </p>
+        ) : null}
+      </div>
+      <section className="material-starters" aria-label="Start a material">
+        {MATERIAL_STARTERS.map((starter) => (
+          <button
+            type="button"
+            className="material-starter-card"
+            key={starter.id}
+            onClick={() => store.createMeshGraphMaterial(layerId, starter.id)}
+          >
+            <span className={`material-starter-orb is-${starter.id}`} aria-hidden="true" />
+            <span>
+              <strong>{starter.name}</strong>
+              <small>{starter.detail}</small>
+            </span>
+          </button>
+        ))}
+      </section>
+    </div>
+  );
+}
+
+/** The generated TSL, read-only, in place of the graph. */
+function SourceView({ graph }: { graph: MaterialGraph3D }) {
+  const source = sourceOf(graph);
+  return (
+    <section className="material-source-view" aria-label="Generated TSL source">
+      <div className="material-source-heading">
+        <div>
+          <strong>Generated TSL</strong>
+          <span>Read-only reference · runtime compiles the data graph directly</span>
+        </div>
+        <button
+          type="button"
+          className="btn"
+          onClick={() => void navigator.clipboard?.writeText(source.text)}
+          disabled={source.error !== null}
+        >
+          Copy
+        </button>
+      </div>
+      {source.error === null ? (
+        <pre tabIndex={0}>{source.text}</pre>
+      ) : (
+        <div className="material-source-error">{source.error}</div>
+      )}
+    </section>
+  );
+}
+
+function sourceOf(graph: MaterialGraph3D): { text: string; error: string | null } {
+  try {
+    return { text: emitMaterialGraphTsl(graph), error: null };
+  } catch (error) {
+    return { text: "", error: error instanceof Error ? error.message : "Unable to generate TSL." };
+  }
+}

package/src/panels/material/NodePreview.tsx

@@ -0,0 +1,70 @@
+// The live thumbnail on a card, and the context that keeps it off every other
+// card's props.
+//
+// The stage answers `requestNodePreviews` with `ImageBitmap`s. A bitmap is not
+// a React value: it cannot be compared, it cannot be serialised, and it holds
+// GPU memory until somebody closes it. So it never enters `MaterialFlowData` —
+// see that module's header. It rides a context whose value changes when a batch
+// lands, which re-renders the handful of components that actually read one.
+//
+// Drawn with `drawImage` into a `<canvas>` rather than handed to an `<img>`,
+// because an ImageBitmap has no URL: `createObjectURL` does not take one, and
+// the alternative (encode to a blob per thumbnail) is a second copy of every
+// pixel for a picture that is about to be scaled down anyway.
+import { createContext, useContext, useEffect, useRef } from "react";
+import type { ReactNode } from "react";
+import type { PreviewEntry } from "./previewScheduler.js";
+
+const PreviewContext = createContext<ReadonlyMap<string, PreviewEntry>>(new Map());
+
+export function MaterialPreviewProvider({
+  entries,
+  children,
+}: {
+  entries: ReadonlyMap<string, PreviewEntry>;
+  children: ReactNode;
+}) {
+  return <PreviewContext.Provider value={entries}>{children}</PreviewContext.Provider>;
+}
+
+/** What the stage last said about one node: a picture, a sentence, or nothing
+ *  yet. */
+export function useNodePreview(nodeId: string): PreviewEntry | undefined {
+  return useContext(PreviewContext).get(nodeId);
+}
+
+/** The thumbnail edge in CSS px. The request asks for the same number in device
+ *  px, so a retina card draws a downscaled bitmap rather than a soft one. */
+export const NODE_PREVIEW_PX = 96;
+
+export function NodePreview({ nodeId }: { nodeId: string }) {
+  const entry = useNodePreview(nodeId);
+  const canvas = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const el = canvas.current;
+    if (el === null || entry === undefined || typeof entry === "string") return;
+    const context = el.getContext("2d");
+    if (context === null) return;
+    // The bitmap arrives at whatever size the stage rendered; the card decides
+    // how big it is drawn. `clearRect` first, because a batch that failed for
+    // this node leaves the previous picture behind otherwise.
+    context.clearRect(0, 0, el.width, el.height);
+    context.drawImage(entry, 0, 0, el.width, el.height);
+  }, [entry]);
+
+  return (
+    <div className="material-node-preview" aria-hidden={typeof entry !== "string"}>
+      {typeof entry === "string" ? (
+        <span className="material-node-preview-message">{entry}</span>
+      ) : (
+        <canvas
+          ref={canvas}
+          className={`material-node-preview-canvas${entry === undefined ? " is-waiting" : ""}`}
+          width={NODE_PREVIEW_PX}
+          height={NODE_PREVIEW_PX}
+        />
+      )}
+    </div>
+  );
+}