@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/maskMarks.tsx

@@ -0,0 +1,117 @@
+// HOW A MASK READS IN A LIST OF ROWS (gap 7, Paper page 25). The outline and
+// the timeline's label column draw the same three marks, from this one reader:
+//
+//   the ICON   the mask glyph, accent on the mask's own row and ink on a group
+//              whose children hold a mask (the "Mask group");
+//   the BADGE  "Alpha", "Luma", "Alpha · Inv", or "Off" on a hidden mask;
+//   the BRACKET a line down the left of the run, from the frontmost content
+//              row to the middle of the mask row. Front first, the mask is the
+//              BOTTOM row of its run, so the bracket closes on it.
+//
+// A hidden mask switches masking off, so its run draws no bracket: the row
+// dims and the badge reads Off, which is the cause made visible. A live mask
+// with nothing in front gets the "Nothing in front to mask" hint instead.
+//
+// THE BRACKET IS PER ROW. Each row draws its own slice of every bracket it
+// sits in (`segments`), so a flat list (the windowed outline, the timeline)
+// and the nested one draw the same picture, and a content GROUP's own children
+// carry the line through. Each bracket takes one `MASK_STEP` column, so a row
+// inside N brackets is pushed right by N steps (`inset`).
+import type { CSSProperties, ReactElement } from "react";
+import { maskRun, maskTargetOf, parentOf, runMaskOf } from "@dailies-studio/shot/doc";
+import type { LayerHome, LayerMask3D } from "@dailies-studio/shot/doc";
+
+/** One bracket's column, Paper's 10px. */
+export const MASK_STEP = 10;
+
+export interface MaskSegment {
+  /** top: the frontmost content row, the bracket's corner. mid: a row the
+   *  line runs through. bottom: the mask row, where it closes. */
+  part: "top" | "mid" | "bottom";
+  /** The depth of the rows the bracket groups (the mask's siblings). */
+  depth: number;
+  /** The insets of the brackets OUTSIDE this one, in px. */
+  inset: number;
+}
+
+export interface MaskMarks {
+  /** px the row's content moves right to make room for its brackets. */
+  inset: number;
+  segments: MaskSegment[];
+  /** The row's own badge, or null when the row is not a mask. */
+  badge: string | null;
+  /** A hidden mask: masking is off and the row dims. */
+  off: boolean;
+  /** A live mask with nothing in front of it to mask. */
+  empty: boolean;
+  /** "mask" on a mask's row, "group" on a group holding one, else null. */
+  icon: "mask" | "group" | null;
+}
+
+export function maskBadgeText(mask: LayerMask3D, hidden: boolean): string {
+  if (hidden) return "Off";
+  return `${mask.mode === "alpha" ? "Alpha" : "Luma"}${mask.invert === true ? " · Inv" : ""}`;
+}
+
+/** The marks for the row of `id`, drawn at `depth`. */
+export function maskMarksOf(home: LayerHome, id: string, depth: number): MaskMarks {
+  const layer = home.layersById[id];
+  // The row and its ancestors, nearest first. Each one that sits in a LIVE
+  // run (content, or a mask with content) owns a bracket column.
+  const chain: string[] = [];
+  for (let at: string | null = id; at !== null && chain.length <= depth; at = parentOf(home, at)) chain.push(at);
+  const live = (maskId: string | null): maskId is string =>
+    maskId !== null && home.layersById[maskId]?.hidden !== true;
+  const roles = chain.map((a): "content" | "mask" | null => {
+    const l = home.layersById[a];
+    if (l === undefined) return null;
+    if (l.mask !== undefined) return l.hidden !== true && maskRun(home, a).length > 0 ? "mask" : null;
+    return live(runMaskOf(home, a)) ? "content" : null;
+  });
+  const segments: MaskSegment[] = [];
+  let outside = roles.filter((r) => r !== null).length * MASK_STEP;
+  const inset = outside;
+  roles.forEach((role, k) => {
+    if (role === null) return;
+    outside -= MASK_STEP;
+    const a = chain[k]!;
+    if (role === "mask") {
+      // A mask's children sit below its middle, outside its bracket.
+      if (k === 0) segments.push({ part: "bottom", depth: depth - k, inset: outside });
+      return;
+    }
+    const run = maskRun(home, runMaskOf(home, a)!);
+    segments.push({ part: k === 0 && run[run.length - 1] === a ? "top" : "mid", depth: depth - k, inset: outside });
+  });
+  const mask = layer?.mask;
+  const off = mask !== undefined && layer?.hidden === true;
+  const target = maskTargetOf(home, id);
+  return {
+    inset,
+    segments,
+    badge: mask === undefined ? null : maskBadgeText(mask, off),
+    off,
+    empty: mask !== undefined && !off && maskRun(home, id).length === 0,
+    icon: mask !== undefined ? "mask" : target !== null ? "group" : null,
+  };
+}
+
+/** The row's slices of its brackets. Absolute, so the row's own flex layout
+ *  never sees them; `left` is measured from the row's outer edge. */
+export function MaskBracket({ segments, base }: { segments: readonly MaskSegment[]; base: string }): ReactElement | null {
+  if (segments.length === 0) return null;
+  return (
+    <>
+      {segments.map((s) => (
+        <span
+          key={`${s.depth}-${s.part}`}
+          className={`mask-bracket is-${s.part}`}
+          aria-hidden="true"
+          style={{ left: `calc(${base} + ${s.depth} * var(--tree-indent) + ${s.inset}px)` } as CSSProperties}
+        />
+      ))}
+    </>
+  );
+}
+
+export const NO_CONTENT_HINT = "Nothing in front to mask";

package/src/panels/material/MaterialCommentNode.tsx

@@ -0,0 +1,54 @@
+// A sticky note on the canvas.
+//
+// `inert: true` in the registry, which is the whole point: it has no sockets,
+// contributes nothing to either signature, and cannot change a pixel of the
+// render. It exists so the person who comes back to a forty-node graph in six
+// months can read why the remap is there.
+//
+// A multiline `TextField`, so the note wraps rather than scrolling sideways,
+// and `nodrag nowheel` on the wrapper for the reason every field on this canvas
+// carries them: without `nodrag` the pointer-down starts a card drag and the
+// caret never lands.
+// A note is resizable from its bottom-right corner, for the reason the group
+// box is: a paragraph that outgrew its box had nowhere to go. One corner only,
+// so the whole gesture commits as a single `size` write and a single undo entry.
+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 MaterialCommentNode = memo(function MaterialCommentNode({
+  data,
+  selected,
+}: NodeProps<MaterialFlowNode>) {
+  const store = useStore();
+  const { node, materialId, path } = data;
+  return (
+    <div className="material-comment" data-testid={`material-node-${node.id}`}>
+      <div className="material-comment-body nodrag nowheel">
+        <TextField
+          multiline
+          value={node.text ?? ""}
+          placeholder="Note"
+          ariaLabel="Comment"
+          onCommit={(text) => store.setMaterialComment(materialId, path, node.id, { text })}
+        />
+      </div>
+      {selected === true ? (
+        <NodeResizeControl
+          className="material-resize-handle"
+          position="bottom-right"
+          minWidth={140}
+          minHeight={80}
+          onResizeEnd={(_event, params) =>
+            store.setMaterialComment(materialId, path, node.id, {
+              size: [Math.round(params.width), Math.round(params.height)],
+            })
+          }
+        />
+      ) : null}
+    </div>
+  );
+});