@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/inspector/design/MaskSection.tsx

@@ -0,0 +1,84 @@
+// THE MASK SECTION (gap 7, Paper page 25, "3 · Mask section"). First in the
+// rail whenever the selection is a mask or a group that holds one: Mode,
+// Invert, what it masks, and Release.
+//
+// Mode and Invert are plain switches, not keyframed: the mask's opacity,
+// transform and keyframes are what animate a matte. Every write goes through
+// `store.editMask`, the same verb the menu rows call, so a locked mask refuses
+// here exactly as it does there.
+//
+// A DOCUMENT GATE, like Spline follow: the table in layout.ts lists "mask" for
+// every kind, and this section withholds itself when nothing selected is a mask
+// or holds one.
+import { InspectorRow, InspectorSection, SegmentedControl, Toggle, useLocked } from "@dailies-studio/ui";
+import { homeOf, maskRun, maskTargetOf } from "@dailies-studio/shot/doc";
+import type { LayerMask3D } from "@dailies-studio/shot/doc";
+import { MASK_ICON } from "../../../icons.js";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { NO_CONTENT_HINT } from "../../maskMarks.js";
+
+export function MaskSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const container = useShotEditor((s) => s.editingDef ?? s.sceneId);
+  const selection = useShotEditor((s) => s.selection);
+  // Release is a plain button, so it reads a viewer's lock here; Mode and
+  // Invert are widgets that read it themselves.
+  const locked = useLocked();
+  const home = doc === null || container === null ? null : homeOf(doc, container);
+  if (home === null) return null;
+  // `editMask`'s own reading of the selection, so the rows show what it writes.
+  const targets = [
+    ...new Set(selection.map((id) => maskTargetOf(home, id)).filter((id): id is string => id !== null)),
+  ];
+  const masks = targets.map((id) => home.layersById[id]!);
+  if (masks.length === 0) return null;
+  const modes = new Set(masks.map((l) => l.mask!.mode));
+  // Invert over EVERY mask the selection names: masks that disagree read
+  // Mixed, and a press inverts them all (the one switch policy).
+  const inverts = new Set(masks.map((l) => l.mask!.invert === true));
+  const invert = inverts.has(true) && inverts.size === 1;
+  const live = masks.filter((l) => l.hidden !== true);
+  const covered = [...new Set(live.flatMap((l) => maskRun(home, l.id)))].map((id) => home.layersById[id]!.label);
+  const reach =
+    live.length === 0 ? "Off while hidden" : covered.length === 0 ? NO_CONTENT_HINT : covered.join(", ");
+
+  return (
+    <InspectorSection className="insp-object insp-mask" title="Mask" icon={MASK_ICON} persistKey="shot:mask">
+      <InspectorRow label="Mode">
+        <SegmentedControl
+          ariaLabel="Mask mode"
+          // A selection whose masks disagree selects neither, Stroke's rule.
+          value={modes.size === 1 ? [...modes][0]! : ""}
+          options={[
+            { value: "alpha", label: "Alpha" },
+            { value: "luma", label: "Luma" },
+          ]}
+          onChange={(mode) => store.editMask({ mode: mode as LayerMask3D["mode"] })}
+        />
+      </InspectorRow>
+      <InspectorRow label="Invert">
+        <Toggle
+          checked={invert}
+          mixed={inverts.size > 1}
+          ariaLabel="Invert mask"
+          onChange={(next) => store.editMask({ invert: next })}
+        />
+      </InspectorRow>
+      {/* What it masks is read, never typed: the house readout, so the box
+          neither lifts on hover nor offers a text cursor. */}
+      <InspectorRow label="Masks" className="insp-readout">
+        <span className="insp-dim is-text" title={reach}>
+          {reach}
+        </span>
+      </InspectorRow>
+      {/* One quiet verb under the rows: the house row of buttons, holding the
+          house outline button (no fill, the quiet edge) across the row. */}
+      <div className="insp-buttons insp-mask-release">
+        <button type="button" className="btn is-outline" disabled={locked} onClick={() => store.editMask(null)}>
+          Release mask
+        </button>
+      </div>
+    </InspectorSection>
+  );
+}

package/src/panels/inspector/design/MaterialSection.tsx

@@ -0,0 +1,177 @@
+// The reusable material's own fields, on the mesh that wears it: its name,
+// which graph it is bound to, whether anything else shares it, and the
+// controls it exposes per mesh.
+//
+// ── WHY THESE ARE NOT IN THE NODE EDITOR ────────────────────────────────
+//
+// They were, briefly, as a column beside the graph. The node editor shows the
+// shader and the object it is on and nothing else — a properties rail in there
+// is the thing that made it read as a docked plugin rather than a view.
+//
+// They belong here anyway. An exposed control is a PER-MESH value with a
+// keyframe dot: it is shot work, authored against the playhead, on the layer.
+// The graph those controls come from is the reusable thing, and which mesh
+// wears it is a property of the mesh. Both questions are this panel's.
+//
+// SUBJECT: the selected mesh, not the open workspace. Selecting a mesh is how
+// you get here, and `openMaterialWorkspace` selects the mesh it opens on, so
+// closing the editor lands on exactly these rows for the material just edited.
+import { useState } from "react";
+import { Combobox, IconPlus, InspectorRow, InspectorSection, TextField, useLocked } from "@dailies-studio/ui";
+import {
+  homeOf,
+  isGraphMaterial,
+  materialBindingForSlot,
+  materialGraphUseCount,
+  validateMaterialGraph,
+} from "@dailies-studio/shot/doc";
+import type { MaterialGraphParameterType } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../../state/context.js";
+import { governingMaterialSlot } from "../../../state/store.js";
+import { useRebindGraph } from "../../material/MaterialLibrary.js";
+import {
+  MaterialParameterControls,
+  MaterialParameterDefinitions,
+} from "../../material/MaterialParameterControls.js";
+import type { MaterialWorkspaceState } from "../../../state/types.js";
+
+/** The slot the node editor is open on, when it is open on THIS mesh. Null
+ *  otherwise, which is the layer-wide binding — the only one a primitive has
+ *  and the one a fresh selection means. */
+function workspaceSlot(workspace: MaterialWorkspaceState | null, layerId: string): number | null {
+  return workspace !== null && workspace.layerId === layerId ? workspace.slot : null;
+}
+
+export function MaterialSection() {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  const containerId = useShotEditor((s) => s.editingDef ?? s.enteredScene ?? s.sceneId);
+  const selection = useShotEditor((s) => s.selection);
+  const workspace = useShotEditor((s) => s.materialWorkspace);
+  const [parameterType, setParameterType] = useState<MaterialGraphParameterType>("float");
+  // Make unique and the add are plain buttons, so they read a viewer's lock
+  // here; the name, the graph and the type are widgets that read it themselves.
+  const locked = useLocked();
+  // The material column's rebind, so a swap here asks before it takes
+  // submesh graphs or keyed controls with it, exactly as a press there does.
+  const { rebind, dialog } = useRebindGraph();
+
+  // ONE MESH. These keys belong to ONE graph's parameter list, so a fan-out
+  // across a mixed selection would write keys the other material has never
+  // heard of — MeshSection's own rule, for its own reason.
+  const layerId = selection.length === 1 ? selection[0] : undefined;
+  if (doc === null || containerId === null || layerId === undefined) return null;
+  const layer = homeOf(doc, containerId)?.layersById[layerId];
+  if (layer?.kind !== "mesh") return null;
+  // THROUGH THE SLOT the node editor is open on, when it is open: a model's
+  // submesh has its own graph, and closing the editor must land on the rows
+  // for the graph that was just edited rather than the layer-wide default.
+  const slot = workspaceSlot(workspace, layer.id);
+  const binding = isGraphMaterial(layer.mesh.material)
+    ? materialBindingForSlot(layer.mesh.material, slot)
+    : null;
+  // The binding the shown graph actually sits on: the submesh's own, or the
+  // whole model's when that submesh has none.
+  const bindingSlot = isGraphMaterial(layer.mesh.material)
+    ? governingMaterialSlot(layer.mesh.material, slot)
+    : null;
+  const layerName = layer.label?.trim() || "Mesh";
+  const graph = binding === null ? undefined : doc.materials?.[binding.materialId];
+  // A legacy catalog material, or none at all. MeshSection's own Material row
+  // is what offers to set one up; there is nothing here to name until it is.
+  if (graph === undefined) return null;
+
+  const usage = materialGraphUseCount(doc, graph.id);
+  const problems = validateMaterialGraph(graph, doc.assets);
+
+  return (
+    <InspectorSection className="insp-object" title="Material" persistKey="shot:material-graph">
+      <InspectorRow label="Name">
+        <TextField
+          value={graph.name}
+          ariaLabel="Material name"
+          onCommit={(next) => store.renameProjectMaterial(graph.id, next)}
+        />
+      </InspectorRow>
+      <InspectorRow label="Graph">
+        <Combobox
+          value={graph.id}
+          ariaLabel="Project material"
+          options={Object.values(doc.materials ?? {})
+            .sort((a, b) => a.name.localeCompare(b.name))
+            .map((material) => ({ value: material.id, label: material.name }))}
+          onChange={(materialId) => {
+            if (materialId === graph.id) return;
+            const named = doc.materials?.[materialId]?.name ?? "this graph";
+            rebind(layer, layerName, slot, `“${named}”`, (to) =>
+              store.assignMeshGraphMaterial(layer.id, materialId, to),
+            );
+          }}
+        />
+      </InspectorRow>
+      <InspectorRow label="Shared">
+        <button
+          type="button"
+          className="btn"
+          disabled={locked || usage <= 1}
+          title={
+            usage <= 1
+              ? "This mesh already owns the only binding"
+              : "Copy this shared material for only this surface"
+          }
+          onClick={() => store.duplicateMeshGraphMaterial(layer.id, slot)}
+        >
+          {usage <= 1 ? "Only this mesh" : `Make unique · ${usage} uses`}
+        </button>
+      </InspectorRow>
+
+      {/* ONE LINE. The two-deck heading this replaces was drawn for a 260px
+          detail rail with nothing above it; in the inspector it sits under a
+          section title that already says "Material", and "Exposed controls"
+          wrapped to two lines to make room for a second label saying the same
+          thing again. */}
+      <div className="material-section-heading">
+        <span className="material-eyebrow">Exposed controls</span>
+        <div className="material-add-parameter">
+          <Combobox
+            value={parameterType}
+            ariaLabel="New parameter type"
+            className="material-parameter-type"
+            options={[
+              { value: "float", label: "Float" },
+              { value: "color", label: "Color" },
+              { value: "vec2", label: "Vector 2" },
+              { value: "vec3", label: "Vector 3" },
+            ]}
+            onChange={(value) => setParameterType(value as MaterialGraphParameterType)}
+          />
+          {/* The house add glyph, as every inspector add is drawn, and a
+              name a screen reader announces. */}
+          <button
+            type="button"
+            className="btn is-icon"
+            aria-label="Expose parameter"
+            title="Expose parameter"
+            disabled={locked}
+            onClick={() => store.addProjectMaterialParameter(graph.id, parameterType)}
+          >
+            <IconPlus />
+          </button>
+        </div>
+      </div>
+      <MaterialParameterDefinitions graph={graph} />
+      <MaterialParameterControls graph={graph} containerId={containerId} layerId={layer.id} slot={bindingSlot} />
+
+      {problems.length === 0 ? null : (
+        <section className="material-problem-list" aria-label="Graph issues">
+          {problems.map((problem) => (
+            <p key={`${problem.at}:${problem.message}`}>
+              <code>{problem.at || "graph"}</code> {problem.message}
+            </p>
+          ))}
+        </section>
+      )}
+      {dialog}
+    </InspectorSection>
+  );
+}