@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/material/MaterialGraphMenu.tsx

@@ -0,0 +1,45 @@
+// The canvas's right-click menu, as a hook.
+//
+// `StageMenu.tsx`'s shape exactly: the ENTRIES are data and live in
+// `state/menu.ts` beside every other menu in this chrome, and this file is only
+// the part that has to be React — the portal, the anchor point, and turning a
+// hit on the canvas into the `MaterialNodeMenuTargets` the entry builder takes.
+//
+// The split is what keeps `materialGraphMenu.test.ts` able to assert that every
+// row is an existing store verb without mounting a canvas: a menu that built
+// its own JSX would also be a menu that could quietly implement its own edit.
+import { useCallback } from "react";
+import { useContextMenu } from "@dailies-studio/ui";
+import type { MenuPoint } from "@dailies-studio/ui";
+import { useStore } from "../../state/context.js";
+import { materialNodeMenuEntries } from "../../state/menu.js";
+import type { MaterialNodeMenuTargets } from "../../state/menu.js";
+
+export interface MaterialGraphMenuHandle {
+  /** Render this inside the canvas; it portals to `<body>`. */
+  menu: ReturnType<typeof useContextMenu>["menu"];
+  /** Open at a CLIENT point, about what the press landed on. */
+  open(at: MenuPoint, targets: MaterialNodeMenuTargets): void;
+  close(): void;
+}
+
+export function useMaterialGraphMenu(): MaterialGraphMenuHandle {
+  const store = useStore();
+  const menu = useContextMenu();
+  const openMenu = menu.open;
+  // STABLE, because the canvas's context-menu handlers close over it and React
+  // Flow hands those down to every node wrapper: a fresh identity per render
+  // would re-render the whole node layer for a callback nobody called.
+  const open = useCallback(
+    (at: MenuPoint, targets: MaterialNodeMenuTargets) => {
+      // Read at OPEN time, `StageMenu`'s rule: the press has already applied
+      // its own selection policy by the time this runs, so the entries describe
+      // what is actually selected rather than what was when this last rendered.
+      const entries = materialNodeMenuEntries(store, store.getState(), targets);
+      if (entries.length === 0) return;
+      openMenu(at, entries);
+    },
+    [store, openMenu],
+  );
+  return { menu: menu.menu, open, close: menu.close };
+}

package/src/panels/material/MaterialGroupNode.tsx

@@ -0,0 +1,56 @@
+// A group box, drawn as a React Flow SUBFLOW.
+//
+// The document stores group membership as `node.groupId` and every position
+// absolute; `flowModel.ts` converts that into React Flow's `parentId` plus a
+// parent-relative position on the way in, and `graphPositionOf` converts it back
+// on the way out. The reason to pay for that conversion at all is that a subflow
+// is the only thing that makes dragging the BOX carry its members: without it,
+// a group is a rectangle drawn behind cards that stay where they were, which is
+// a decoration rather than a way to move a region of a graph.
+//
+// The title is editable in place, and so is the SIZE. The box is born around
+// the members it was built from, but a graph keeps growing after that, and the
+// alternative to a handle was ungrouping and grouping again.
+//
+// ONE HANDLE, bottom-right, not a full `NodeResizer`. A top or left handle
+// moves the box's POSITION as well as its size, which is a second write and so
+// a second undo entry for what the author felt as one drag. The bottom-right
+// corner only ever changes `size`, which `setMaterialComment` commits whole.
+import { memo } from "react";
+import { NodeResizeControl } from "@xyflow/react";
+import type { NodeProps } from "@xyflow/react";
+import { TextField } from "@dailies-studio/ui";
+import { useStore } from "../../state/context.js";
+import type { MaterialFlowNode } from "./flowModel.js";
+
+export const MaterialGroupNode = memo(function MaterialGroupNode({
+  data,
+  selected,
+}: NodeProps<MaterialFlowNode>) {
+  const store = useStore();
+  const { node, materialId, path } = data;
+  return (
+    <div className="material-group" data-testid={`material-node-${node.id}`}>
+      <div className="material-group-title nodrag nowheel">
+        <TextField
+          value={node.label ?? "Group"}
+          ariaLabel="Group name"
+          onCommit={(label) => store.setMaterialComment(materialId, path, node.id, { label })}
+        />
+      </div>
+      {selected === true ? (
+        <NodeResizeControl
+          className="material-resize-handle"
+          position="bottom-right"
+          minWidth={160}
+          minHeight={120}
+          onResizeEnd={(_event, params) =>
+            store.setMaterialComment(materialId, path, node.id, {
+              size: [Math.round(params.width), Math.round(params.height)],
+            })
+          }
+        />
+      ) : null}
+    </div>
+  );
+});

package/src/panels/material/MaterialLibrary.tsx

@@ -0,0 +1,253 @@
+// THE MATERIAL NODES' LEFT COLUMN: the graphs this Project already has, and
+// the starters a new one is made from.
+//
+// It shows in the docked left column's mode slot (MaterialWorkspace portals it
+// there), so it wears the column's vocabulary: a head one bar tall with the
+// bar's hairline under it, then ONE scroller (`.rail-scroll`) with full-bleed
+// rows. Every row ends at a store verb the rest of the chrome already uses:
+// `assignMeshGraphMaterial` (the inspector's Graph row), `deleteProjectMaterial`
+// and `createMeshGraphMaterial` (the setup screen's starters).
+//
+// THE OPEN SLOT, OR THE WHOLE MODEL. With a submesh open (a model whose whole
+// model already wears a graph), a row binds that submesh alone: the model's
+// own graph puts the submesh back on it, and only that submesh's keyed
+// controls go (`bindGraph` in the store). Otherwise a row binds the whole
+// mesh, which drops every per-slot graph and every keyed material control.
+// Either way:
+//
+//   - a row names what it does;
+//   - the row marked current (the graph on the canvas) does nothing, and on
+//     the whole model neither does the graph it already wears;
+//   - a press that would take slot graphs or keyed controls with it asks
+//     first, through the house confirm, and names what goes. Undo still
+//     brings it back; the confirm is so it never goes unseen.
+import { IconTrash, useConfirm } from "@dailies-studio/ui";
+import {
+  isGraphMaterial,
+  isMaterialGraphParamPath,
+  materialGraphParamAddressOf,
+  materialGraphUseCount,
+} from "@dailies-studio/shot/doc";
+import type { Layer3D, MaterialGraph3D, MaterialGraphStarterKind } from "@dailies-studio/shot/doc";
+import { useShotEditor, useStore } from "../../state/context.js";
+
+/** The three graphs a new material can start from. The setup screen shows
+ *  them as cards and this column as rows; one list, so the two cannot offer
+ *  different starters. */
+export const MATERIAL_STARTERS: readonly {
+  id: MaterialGraphStarterKind;
+  name: string;
+  detail: string;
+}[] = [
+  {
+    id: "studio",
+    name: "Preserve Current",
+    detail: "Studio/unlit colour and opacity wired to the mesh's current surface.",
+  },
+  {
+    id: "standard",
+    name: "Standard",
+    detail: "A lit PBR surface with roughness, metalness, emissive and normals.",
+  },
+  {
+    id: "glass",
+    name: "Glass",
+    detail: "Physical transmission with exposed roughness, thickness, IOR and dispersion.",
+  },
+];
+
+type MeshLayer = Extract<Layer3D, { kind: "mesh" }>;
+
+/** What a rebind takes with it, as phrases for the confirm. On one submesh,
+ *  its own keyed controls; on the whole model, the submeshes' own graphs and
+ *  every keyed material control. Empty when nothing would go. */
+function rebindLosses(layer: MeshLayer, slot: number | null): string[] {
+  const material = layer.mesh.material;
+  if (slot !== null) {
+    const keyedHere = Object.keys(layer.tracks ?? {}).filter(
+      (path) => materialGraphParamAddressOf(path)?.slot === slot,
+    ).length;
+    return keyedHere === 0 ? [] : [`${keyedHere} keyed material ${keyedHere === 1 ? "control" : "controls"} on it`];
+  }
+  const slots = isGraphMaterial(material) ? Object.keys(material.slots ?? {}).length : 0;
+  const keyed = Object.keys(layer.tracks ?? {}).filter((path) => isMaterialGraphParamPath(path)).length;
+  const losses: string[] = [];
+  if (slots > 0) {
+    losses.push(slots === 1 ? "the graph on 1 submesh" : `the graphs on ${slots} submeshes`);
+  }
+  if (keyed > 0) {
+    losses.push(`${keyed} keyed material ${keyed === 1 ? "control" : "controls"}`);
+  }
+  return losses;
+}
+
+/** The slot a rebind lands on: the open submesh only on top of a whole-model
+ *  graph (`bindGraph` in the store), otherwise the whole model. */
+export function rebindTarget(layer: MeshLayer, slot: number | null): number | null {
+  return slot !== null && isGraphMaterial(layer.mesh.material) ? slot : null;
+}
+
+/** A rebind for every surface that swaps a mesh's graph (this column and the
+ *  inspector's Graph row): straight through when it takes nothing with it,
+ *  otherwise asked first through the house confirm, naming what goes. `run`
+ *  gets the slot the rebind lands on. Render `dialog`. */
+export function useRebindGraph() {
+  const { confirm, dialog } = useConfirm();
+  const rebind = (
+    layer: MeshLayer,
+    layerName: string,
+    slot: number | null,
+    what: string,
+    run: (target: number | null) => void,
+  ): void => {
+    const target = rebindTarget(layer, slot);
+    const losses = rebindLosses(layer, target);
+    if (losses.length === 0) {
+      run(target);
+      return;
+    }
+    const where = target === null ? `all of ${layerName}` : "this submesh";
+    void confirm({
+      title: "Replace the material",
+      message: `Put ${what} on ${where}? This also removes ${losses.join(" and ")}. Undo brings them back.`,
+      confirmLabel: "Replace",
+      danger: true,
+    }).then((yes) => {
+      if (yes) run(target);
+    });
+  };
+  return { rebind, confirm, dialog };
+}
+
+export function MaterialLibrary({
+  layer,
+  layerName,
+  currentId,
+  slot,
+}: {
+  layer: MeshLayer;
+  layerName: string;
+  /** The graph the open slot resolves to, or null while the mesh has none. */
+  currentId: string | null;
+  /** The submesh the workspace is open on, or null for the whole model. */
+  slot: number | null;
+}) {
+  const store = useStore();
+  const doc = useShotEditor((state) => state.doc);
+  const { rebind, confirm, dialog } = useRebindGraph();
+  if (doc === null) return null;
+  const saved: MaterialGraph3D[] = Object.values(doc.materials ?? {}).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  );
+  /** The graph the whole model wears. */
+  const wholeId = isGraphMaterial(layer.mesh.material) ? layer.mesh.material.materialId : null;
+  const target = rebindTarget(layer, slot);
+  const where = target === null ? `all of ${layerName}` : "this submesh";
+
+  return (
+    <section className="material-library" aria-label="Materials">
+      <div className="material-library-head">
+        <h2 className="material-library-title">Materials</h2>
+      </div>
+      <div className="rail-scroll">
+        <h3 className="material-library-group">In this Project</h3>
+        {saved.length === 0 ? (
+          <p className="insp-empty">No saved graphs yet. Start one from the list below.</p>
+        ) : (
+          <ul className="material-library-list" aria-label="Saved graphs">
+            {saved.map((material) => {
+              const usage = materialGraphUseCount(doc, material.id);
+              const current = material.id === currentId;
+              // A press that would change nothing: the graph on the canvas, or
+              // on the whole model the one it already wears (the verb skips it).
+              // On a submesh the model's own graph is a real press: it puts the
+              // submesh back on it.
+              const inert = current || (target === null && material.id === wholeId);
+              return (
+                <li key={material.id} className={`material-saved-row${current ? " is-current" : ""}`}>
+                  <button
+                    type="button"
+                    className="material-saved-apply"
+                    aria-current={current}
+                    aria-disabled={inert || undefined}
+                    title={
+                      current
+                        ? `${target === null ? layerName : "This submesh"} wears this graph`
+                        : target !== null && material.id === wholeId
+                          ? `Put this submesh back on ${layerName}'s own graph`
+                          : `Put this graph on ${where}`
+                    }
+                    onClick={
+                      inert
+                        ? undefined
+                        : () =>
+                            rebind(layer, layerName, slot, `“${material.name}”`, (to) =>
+                              store.assignMeshGraphMaterial(layer.id, material.id, to),
+                            )
+                    }
+                  >
+                    <span className={`material-model-mark is-${material.model}`} aria-hidden="true" />
+                    <span className="material-saved-text">
+                      <strong>{material.name}</strong>
+                      <small>
+                        {material.model} · {Object.keys(material.nodesById).length} nodes · {usage}{" "}
+                        {usage === 1 ? "use" : "uses"}
+                      </small>
+                    </span>
+                  </button>
+                  {/* Only an unused graph offers a delete: `deleteProjectMaterial`
+                      refuses one a mesh still wears, and a button that always
+                      refuses is furniture. */}
+                  {usage === 0 ? (
+                    <button
+                      type="button"
+                      className="material-saved-delete"
+                      aria-label={`Delete ${material.name}`}
+                      title="Delete this unused graph from the Project"
+                      onClick={() =>
+                        void confirm({
+                          title: "Delete material",
+                          message: `Delete “${material.name}” from this Project? No mesh uses it.`,
+                          confirmLabel: "Delete",
+                          danger: true,
+                        }).then((yes) => {
+                          if (yes) store.deleteProjectMaterial(material.id);
+                        })
+                      }
+                    >
+                      <IconTrash />
+                    </button>
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+        <h3 className="material-library-group">New from</h3>
+        <ul className="material-library-list" aria-label="New material starters">
+          {MATERIAL_STARTERS.map((starter) => (
+            <li key={starter.id} className="material-saved-row">
+              <button
+                type="button"
+                className="material-saved-apply"
+                title={starter.detail}
+                onClick={() =>
+                  rebind(layer, layerName, slot, `a new ${starter.name} graph`, (to) =>
+                    store.createMeshGraphMaterial(layer.id, starter.id, to),
+                  )
+                }
+              >
+                <span className={`material-starter-orb is-${starter.id}`} aria-hidden="true" />
+                <span className="material-saved-text">
+                  <strong>{starter.name}</strong>
+                  <small>{starter.detail}</small>
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      {dialog}
+    </section>
+  );
+}