@dailies-studio/shot-editor 0.1.0 → 0.2.0

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

@@ -1,60 +1,124 @@
 // The align/distribute grid, the first thing in Raylight's Position section.
 //
-// Six alignments then two distributions, in two rows of four — the same order
-// and grouping every design tool uses, so the muscle memory transfers.
+// Two rows of five, one per axis: row 1 works on x (left, centre, right,
+// distribute, flip horizontal), row 2 on y. Every tooltip names its key, so the
+// grid teaches the chords.
 //
 // The icons are inline SVG rather than glyphs: the whole point of this control
 // is that you recognise it without reading it, and no font ships a
 // distribute-horizontally character.
-import { ALIGN_MODES } from "@dailies-studio/shot/doc";
-import type { AlignMode } from "@dailies-studio/shot/doc";
+import { useLocked } from "@dailies-studio/ui";
+import { ALIGN_LABELS, DISTRIBUTE_MODES, MIN_DISTRIBUTE } from "@dailies-studio/shot/doc";
+import type { AlignMode, FlipAxis } from "@dailies-studio/shot/doc";
 import { useShotEditor, useStore } from "../../../state/context.js";
+import { shortcutHint } from "../../../state/shortcuts.js";
 import { useSelectedLayers } from "../useDocWrite.js";
 
-/** Label and icon geometry per mode. `satisfies` so a new ALIGN_MODES entry
- *  without a row here is a compile error rather than a blank button. */
-const SPEC = {
-  left: { label: "Align left", bar: [2, 2, 1.6, 12], marks: [[4, 3.5, 8, 3], [4, 9.5, 5, 3]] },
-  hcenter: { label: "Align horizontal centres", bar: [7.2, 2, 1.6, 12], marks: [[3, 3.5, 10, 3], [4.5, 9.5, 7, 3]] },
-  right: { label: "Align right", bar: [12.4, 2, 1.6, 12], marks: [[4, 3.5, 8, 3], [7, 9.5, 5, 3]] },
-  top: { label: "Align top", bar: [2, 2, 12, 1.6], marks: [[3.5, 4, 3, 8], [9.5, 4, 3, 5]] },
-  vcenter: { label: "Align vertical centres", bar: [2, 7.2, 12, 1.6], marks: [[3.5, 3, 3, 10], [9.5, 4.5, 3, 7]] },
-  bottom: { label: "Align bottom", bar: [2, 12.4, 12, 1.6], marks: [[3.5, 4, 3, 8], [9.5, 7, 3, 5]] },
-  hdistribute: { label: "Distribute horizontally", bar: null, marks: [[2, 4, 3, 8], [6.5, 4, 3, 8], [11, 4, 3, 8]] },
-  vdistribute: { label: "Distribute vertically", bar: null, marks: [[4, 2, 8, 3], [4, 6.5, 8, 3], [4, 11, 8, 3]] },
-} as const satisfies Record<AlignMode, { label: string; bar: readonly number[] | null; marks: ReadonlyArray<readonly number[]> }>;
+/** Icon path per mode, the design's own 24-grid strokes: a rule for the edge
+ *  or axis being matched and two bars that sit against it, or three bars for
+ *  a distribution. `satisfies` so a new ALIGN_MODES entry without a row here is
+ *  a compile error rather than a blank button. Drawn at this chrome's 1.5
+ *  stroke (the design shows 1.4), so the grid reads as the same family as
+ *  every other 24-grid glyph in the shot editor.
+ *
+ *  The LABEL comes from `ALIGN_LABELS` in packages/shot: the app menu names
+ *  these modes too, and a mode with two names is two controls the author
+ *  cannot tell apart. */
+const PATHS = {
+  left: "M5 3V21M8 7H20V10H8M8 14H16V17H8",
+  hcenter: "M12 3V21M5 7H19V10H5M8 14H16V17H8",
+  right: "M19 3V21M4 7H16V10H4M8 14H16V17H8",
+  top: "M3 5H21M7 8V20H10V8M14 8V16H17V8",
+  vcenter: "M3 12H21M7 5V19H10V5M14 8V16H17V8",
+  bottom: "M3 19H21M7 4V16H10V4M14 8V16H17V8",
+  hdistribute: "M3 4V20M21 4V20M7 8V16M12 5V19M17 8V16",
+  vdistribute: "M4 3H20M4 21H20M8 7H16M5 12H19M8 17H16",
+} as const satisfies Record<AlignMode, string>;
+
+/** The flip glyphs: a dashed mirror line between two facing triangles. */
+const FLIP_PATHS = {
+  x: "M12 3V5M12 9V11M12 15V17M12 21V21M9 6L3 18H9ZM15 6L21 18H15Z",
+  y: "M3 12H5M9 12H11M15 12H17M21 12H21M6 9L18 3V9ZM6 15L18 21V15Z",
+} as const satisfies Record<FlipAxis, string>;
+
+const FLIP_LABELS = { x: "Flip horizontal", y: "Flip vertical" } as const satisfies Record<FlipAxis, string>;
+
+type Cell = { kind: "align"; mode: AlignMode } | { kind: "flip"; axis: FlipAxis };
+
+/** One row per axis. A new align mode has to be placed here by hand; the
+ *  grid test counts the buttons. */
+const ROWS: readonly (readonly Cell[])[] = (
+  [
+    ["left", "hcenter", "right", "hdistribute", "x"],
+    ["top", "vcenter", "bottom", "vdistribute", "y"],
+  ] as const
+).map((row) =>
+  row.map((id): Cell => (id === "x" || id === "y" ? { kind: "flip", axis: id } : { kind: "align", mode: id })),
+);
+
+function Glyph({ d }: { d: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={d} />
+    </svg>
+  );
+}
 
 export function AlignRow() {
   const store = useStore();
   const layers = useSelectedLayers();
   const doc = useShotEditor((s) => s.doc);
+  // Every cell moves layers, so a viewer's panel disables the whole grid.
+  const locked = useLocked();
   if (doc === null || layers.length === 0) return null;
 
   return (
-    <div className="align-grid" role="group" aria-label="Align and distribute" data-testid="align-row">
-      {ALIGN_MODES.map((mode) => {
-        const spec = SPEC[mode];
+    <div className="align-grid" role="group" aria-label="Align, distribute and flip" data-testid="align-row">
+      {ROWS.flat().map((cell) => {
+        if (cell.kind === "flip") {
+          const label = FLIP_LABELS[cell.axis];
+          return (
+            <button
+              key={`flip-${cell.axis}`}
+              type="button"
+              className="align-button"
+              aria-label={label}
+              title={`${label}${shortcutHint(`layer.flip.${cell.axis}`)}`}
+              disabled={locked}
+              onClick={() => store.flipSelection(cell.axis)}
+            >
+              <Glyph d={FLIP_PATHS[cell.axis]} />
+            </button>
+          );
+        }
+        const { mode } = cell;
         // Distribute needs three. Disabled rather than hidden: a control that
         // vanishes teaches nothing, and the tooltip says what is missing.
-        const needsThree = spec.bar === null && layers.length < 3;
+        const needsThree = DISTRIBUTE_MODES.has(mode) && layers.length < MIN_DISTRIBUTE;
+        const label = ALIGN_LABELS[mode];
         return (
           <button
             key={mode}
             type="button"
             className="align-button"
-            aria-label={spec.label}
-            title={needsThree ? `${spec.label} — needs 3 or more layers` : spec.label}
-            disabled={needsThree}
+            aria-label={label}
+            title={
+              needsThree
+                ? `${label}: needs ${MIN_DISTRIBUTE} or more layers`
+                : `${label}${shortcutHint(`layout.align.${mode}`)}`
+            }
+            disabled={locked || needsThree}
             onClick={() => store.alignSelection(mode)}
           >
-            <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
-              {spec.bar !== null && (
-                <rect x={spec.bar[0]} y={spec.bar[1]} width={spec.bar[2]} height={spec.bar[3]} className="align-icon-rule" />
-              )}
-              {spec.marks.map((m, i) => (
-                <rect key={i} x={m[0]} y={m[1]} width={m[2]} height={m[3]} rx="1" className="align-icon-box" />
-              ))}
-            </svg>
+            <Glyph d={PATHS[mode]} />
           </button>
         );
       })}

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

@@ -1,20 +1,105 @@
-// Opacity, visibility and lock.
+// Opacity, blur, visibility and lock.
 //
-// Opacity is a MULTIPLICATIVE channel, so typing into it divides the block's
-// delta out — and at a delta of zero there is no base that renders at the value
-// asked for, which `setEffectiveField` refuses by name rather than guessing.
+// Visible and Locked read the whole selection. One that disagrees reads Mixed
+// (a third state, not the first layer's), and a press turns the switch ON for
+// every layer: the one policy every inspector switch keeps, so a Mixed row
+// lands somewhere in one press.
+import { useRef } from "react";
+import { BLUR_PX_MAX, containerFrame } from "@dailies-studio/shot/doc";
+import type { Doc3D, Layer3D } from "@dailies-studio/shot/doc";
 import { InspectorRow, InspectorSection, NumberField, Toggle } from "@dailies-studio/ui";
-import { useSelectionValue, useSelectionWrite, useTransformWrite } from "../useDocWrite.js";
+import type { ScrubHandlers } from "@dailies-studio/ui";
+import { useStore } from "../../../state/context.js";
+import { writeSelection } from "../../../state/fieldWrite.js";
+import { authoringFrame } from "../../../state/viewMode.js";
+import { KeyframeDot } from "../KeyframeDot.js";
+import { useScrub, useSelectionValue, useSelectionWrite, useTransformWrite } from "../useDocWrite.js";
+import { useTransformScrub } from "./TransformSection.js";
+
+/** A typed or dragged radius held to the field's range, 0 for garbage. */
+const clampBlur = (px: number): number => (Number.isFinite(px) ? Math.min(BLUR_PX_MAX, Math.max(0, px)) : 0);
+
+/**
+ * `layer` blurred by `px` (schema v47), clamped to the field's range. 0
+ * removes the field, so an unblurred layer keeps no step in the render plan,
+ * unless the layer keys `blurPx`: there 0 is a value to key, and a removed
+ * field would read to the router as the property gone, taking the animation
+ * with it. The same layer for a no-op, so a typed no-op costs no undo entry.
+ */
+export function withBlur(layer: Layer3D, px: number): Layer3D {
+  const next = clampBlur(px);
+  if (next === 0 && layer.tracks?.["blurPx"] === undefined) {
+    if (layer.blurPx === undefined) return layer;
+    const { blurPx: _sharp, ...rest } = layer;
+    return rest as Layer3D;
+  }
+  return layer.blurPx === next ? layer : { ...layer, blurPx: next };
+}
+
+/**
+ * The Blur field's write over `ids`, as ONE document change: `withBlur`
+ * through `writeSelection`, which keys a layer that animates `blurPx` at
+ * `frame` (Animate mode's keys included).
+ */
+export function writeBlur(
+  doc: Doc3D,
+  containerId: string,
+  ids: readonly string[],
+  px: number,
+  frame: number,
+): { doc: Doc3D; refusal: string | null } {
+  const value = clampBlur(px);
+  return writeSelection(doc, containerId, ids, (layer) => withBlur(layer, value), frame);
+}
+
+/** `writeBlur` over the LIVE selection at the frame the inspector writes at:
+ *  `useSelectionWrite`'s and `useSelectionScrub`'s reads, with the blur's own
+ *  write, and a refusal named once (at the commit, or the drag's release). */
+function useBlurWrite(): { commit: (px: number) => void; scrub: ScrubHandlers } {
+  const store = useStore();
+  const refusal = useRef<string | null>(null);
+  const run = (doc: Doc3D, px: number): Doc3D => {
+    const s = store.getState();
+    const container = s.editingDef ?? s.sceneId;
+    if (container === null) return doc;
+    const out = writeBlur(doc, container, s.selection, px, containerFrame(doc, container, authoringFrame(s)));
+    refusal.current = out.refusal;
+    return out.doc;
+  };
+  const say = (ran: boolean): void => {
+    if (ran && refusal.current !== null) store.reportError(refusal.current);
+    refusal.current = null;
+  };
+  const scrub = useScrub((doc, raw) => run(doc, Number(raw)));
+  return {
+    commit: (px) => say(store.edit((doc) => run(doc, px))),
+    scrub: {
+      ...scrub,
+      end: (commit) => {
+        scrub.end(commit);
+        say(commit);
+      },
+    },
+  };
+}
 
 export function AppearanceSection() {
   const write = useSelectionWrite();
   const writeTransform = useTransformWrite();
+  // Opacity is a TransformField, so its drag is the transform grid's drag — it
+  // just arrives as a PERCENT, which is why both halves divide by 100 rather
+  // than only the commit one.
+  const scrub = useTransformScrub("opacity");
   const opacity = useSelectionValue((_l, effective) => Math.round(effective.opacity * 100));
+  // The resolved radius, so a keyed blur reads the value at the playhead.
+  const blur = useSelectionValue((layer) => layer.blurPx ?? 0);
+  const blurWrite = useBlurWrite();
+  const blurScrub = blurWrite.scrub;
   const hidden = useSelectionValue((layer) => layer.hidden === true);
   const locked = useSelectionValue((layer) => layer.locked === true);
 
   return (
-    <InspectorSection title="Appearance" persistKey="shot:appearance">
+    <InspectorSection className="insp-object" title="Appearance" persistKey="shot:appearance">
       <InspectorRow>
         <NumberField
           value={opacity.value ?? 100}
@@ -25,23 +110,47 @@ export function AppearanceSection() {
           min={0}
           max={100}
           step={1}
+          trailing={<KeyframeDot path="transform.opacity" />}
           onCommit={(next) => writeTransform("opacity", next / 100)}
+          onScrubStart={scrub.start}
+          onScrub={(next) => scrub.move(next / 100)}
+          onScrubEnd={scrub.end}
+        />
+      </InspectorRow>
+      <InspectorRow>
+        <NumberField
+          value={blur.value ?? 0}
+          mixed={blur.mixed}
+          label="Blur"
+          ariaLabel="Blur"
+          unit="px"
+          title="A gaussian blur of the whole layer, children included: the radius in design px"
+          min={0}
+          max={BLUR_PX_MAX}
+          step={1}
+          trailing={<KeyframeDot path="blurPx" />}
+          onCommit={blurWrite.commit}
+          onScrubStart={blurScrub.start}
+          onScrub={blurScrub.move}
+          onScrubEnd={blurScrub.end}
         />
       </InspectorRow>
       <InspectorRow label="Visible">
         <Toggle
           checked={hidden.value !== true}
+          mixed={hidden.mixed}
           ariaLabel="Visible"
           onChange={(next) => write((layer) => ({ ...layer, hidden: !next }))}
         />
       </InspectorRow>
       <InspectorRow label="Locked">
-        {/* Written through `useSelectionWrite`, which SKIPS locked layers — so
-            unlocking has to bypass it or a lock would be one-way. */}
+        {/* Visible and Locked are the two fields `lockRefuses` lets through,
+            so both work on a locked layer. */}
         <Toggle
           checked={locked.value === true}
+          mixed={locked.mixed}
           ariaLabel="Locked"
-          onChange={(next) => write((layer) => ({ ...layer, locked: next }), { includeLocked: true })}
+          onChange={(next) => write((layer) => ({ ...layer, locked: next }))}
         />
       </InspectorRow>
     </InspectorSection>