@pixerate/editor-svelte 0.169.0 → 0.170.0

package/dist/animation-editor/AnimationStage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+  import { highlightMotionSvg, motionCameraTransform, motionCameraViewAt, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
@@ -59,6 +59,9 @@
       highlight ?? []
     )
   );
+  // A camera move's tilt and turn are 3D, so the stage element turns (its roll and blur are in the SVG).
+  let stage = $state<HTMLDivElement | null>(null);
+  const transform = $derived(motionCameraTransform(motionCameraViewAt(controller.viewScene(), view.current.time, view.current.effectsProvider), stage?.clientWidth || view.current.scene.artwork.width));
   function onclick(event: MouseEvent) {
     onpick?.(motionNodeAtElement(view.current.scene, event.target as Element, event.currentTarget as Element), event);
   }
@@ -68,7 +71,8 @@
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 <div
   class="relative overflow-hidden {recording ? 'cursor-grab touch-none' : onpick ? 'cursor-crosshair' : ''} {className}"
-  style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}"
+  bind:this={stage}
+  style="aspect-ratio:{view.current.scene.artwork.width} / {view.current.scene.artwork.height}{transform ? `; transform:${transform}` : ''}"
   data-animation-stage=""
   data-recording={recording ? '' : undefined}
   role="img"

package/dist/animation-editor/ShotCameraMoves.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { motionShotCameraMove, type AnimationEditorController, type MotionCameraMoveResult } from '@pixerate/editor/animation-editor';
+  import type { CameraMoveRole, EffectSummary } from '@pixerate/editor/effects';
+  import EffectParameters from '../effects/EffectParameters.svelte';
+  import { effectDescriptionOf } from '../effects/effects.svelte.js';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The shot whose moves to edit. */
+    shot: string;
+    class?: string;
+  }
+
+  let { controller, shot, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const current = $derived(editor.scene.shots.find((s) => s.id === shot));
+  const roles: { role: CameraMoveRole; label: string; none: string }[] = [
+    { role: 'transition', label: 'Move in', none: 'ease in' },
+    { role: 'hold', label: 'While holding', none: 'stay still' }
+  ];
+  const input = 'w-full min-w-0 rounded border border-border bg-transparent px-1 py-0.5 text-xs';
+
+  // The provider's camera moves of each role, loaded when the provider changes.
+  let moves = $state<Record<CameraMoveRole, EffectSummary[]>>({ transition: [], hold: [] });
+  $effect(() => {
+    void editor.effectsProvider;
+    let live = true;
+    void Promise.all([controller.cameraMoves('transition'), controller.cameraMoves('hold')]).then(
+      ([transition, hold]) => live && (moves = { transition, hold }),
+      () => live && (moves = { transition: [], hold: [] })
+    );
+    return () => (live = false);
+  });
+  const has = $derived(moves.transition.length + moves.hold.length > 0);
+  const named = $derived(current?.camera?.in !== undefined || current?.camera?.during !== undefined);
+  const inMove = $derived(motionShotCameraMove(current, 'transition'));
+  const holdMove = $derived(motionShotCameraMove(current, 'hold'));
+  const inDescription = effectDescriptionOf(() => controller.effectsProvider, () => inMove?.move);
+  const holdDescription = effectDescriptionOf(() => controller.effectsProvider, () => holdMove?.move);
+  let message = $state<string | null>(null);
+
+  function report(r: Promise<MotionCameraMoveResult> | MotionCameraMoveResult) {
+    void Promise.resolve(r).then((x) => (message = x.ok ? null : x.error));
+  }
+  function pick(role: CameraMoveRole, id: string) {
+    report(id ? controller.setShotCameraMove(shot, role, id) : controller.clearShotCameraMove(shot, role));
+  }
+  // Changes over the move as saved; null removes a field (a changed value drops the preset's name).
+  function set(role: CameraMoveRole, changes: { values?: Record<string, unknown>; preset?: string | null; ms?: number | null }, merge?: string | null) {
+    const move = motionShotCameraMove(current, role);
+    if (!move) return;
+    const next: Record<string, unknown> = { ...move, ...changes };
+    for (const k of Object.keys(next)) if (next[k] === null || (k === 'values' && !Object.keys(next[k] as object).length)) delete next[k];
+    report(controller.setShotCameraMove(shot, role, next as never, { merge: merge ?? undefined }));
+  }
+  function length(raw: string) {
+    if (raw.trim() === '') return set('transition', { ms: null });
+    const n = Number(raw);
+    if (Number.isFinite(n) && n >= 0) set('transition', { ms: n });
+    else message = 'Length is a number of ms, 0 or more.';
+  }
+  function reset(role: CameraMoveRole, k: string) {
+    const { [k]: _gone, ...rest } = motionShotCameraMove(current, role)?.values ?? {};
+    set(role, { values: rest, preset: null });
+  }
+</script>
+
+<!--
+  A shot's camera moves from the effects provider: the move it gets in with and the move it makes
+  while it holds, each with its length (a move in), presets and controls. Hidden with the reason
+  when the provider has no camera moves. Every change is one undo step (a slider drag is one).
+-->
+{#if current}
+  {#if !has}
+    {#if named}
+      <p class="text-[10px] text-muted-foreground {className}" data-camera-moves="unavailable">
+        This shot names camera moves, but {editor.effectsProvider ? `${editor.effectsProvider.name} has none` : 'no effects provider is set'}, so the camera eases instead.
+      </p>
+    {/if}
+  {:else}
+    <div class="grid grid-cols-[6.5rem_1fr] items-center gap-x-2 gap-y-1 {className}" data-camera-moves="">
+      {#each roles as { role, label, none } (role)}
+        {@const move = role === 'transition' ? inMove : holdMove}
+        {@const loaded = role === 'transition' ? inDescription : holdDescription}
+        {@const known = moves[role].some((m) => m.id === move?.move)}
+        <span class="text-muted-foreground">{label}</span>
+        <select class={input} aria-label={label} disabled={editor.readOnly} value={move?.move ?? ''} onchange={(e) => pick(role, e.currentTarget.value)}>
+          <option value="">{none}</option>
+          {#if move && !known}<option value={move.move}>{move.move} (not in the provider)</option>{/if}
+          {#each moves[role] as m (m.id)}
+            <option value={m.id}>{m.name}</option>
+          {/each}
+        </select>
+        {#if move && known && !editor.readOnly}
+          {#if loaded.error}
+            <p class="col-span-2 text-[11px] text-amber-500">{loaded.error}</p>
+          {:else if loaded.description}
+            <div class="col-span-2 flex flex-col gap-1 border-l border-border pl-2" data-camera-move-controls={role}>
+              {#if role === 'transition'}
+                <div class="flex items-center gap-1">
+                  <span class="w-16 text-muted-foreground">Length</span>
+                  <input class={input} type="number" min="0" step="50" aria-label="Move length" placeholder={String(loaded.description.camera?.durationMs ?? '')} value={move.ms ?? ''} onchange={(e) => length(e.currentTarget.value)} />
+                  <span class="text-[10px] text-muted-foreground">ms</span>
+                </div>
+              {/if}
+              <EffectParameters
+                description={loaded.description}
+                values={move.values ?? {}}
+                onchange={(k, v, g) => set(role, { values: { ...(move.values ?? {}), [k]: v }, preset: null }, g)}
+                onreset={(k) => reset(role, k)}
+                onpresetname={(name) => set(role, { preset: name, values: {} })}
+              />
+            </div>
+          {/if}
+        {/if}
+      {/each}
+      {#if message}<p class="col-span-2 text-[11px] text-destructive" role="alert">{message}</p>{/if}
+    </div>
+  {/if}
+{/if}

package/dist/animation-editor/ShotCameraMoves.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type AnimationEditorController } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The shot whose moves to edit. */
+    shot: string;
+    class?: string;
+}
+declare const ShotCameraMoves: import("svelte").Component<Props, {}, "">;
+type ShotCameraMoves = ReturnType<typeof ShotCameraMoves>;
+export default ShotCameraMoves;

package/dist/animation-editor/ShotInspector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { describeMotionElements, freshShotId, motionCueChoices, motionCueFromKey, motionCueKey, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
+  import { describeMotionElements, freshShotId, motionCameraFramed, motionCueChoices, motionCueFromKey, motionCueKey, type AnimationEditorController, type MotionEdit } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+  import ShotCameraMoves from './ShotCameraMoves.svelte';
 
   interface Props {
     controller: AnimationEditorController;
@@ -53,8 +54,10 @@
     apply(raw.trim() ? { op: 'update_shot', shot: current.id, set: { label: raw.trim() } } : { op: 'update_shot', shot: current.id, remove: ['label'] }, 'Rename shot');
   }
   function setCamera(v: string) {
-    if (!v) apply({ op: 'update_shot', shot: current.id, remove: ['camera'] }, 'Clear camera');
-    else if (v.startsWith('frame:')) apply({ op: 'update_shot', shot: current.id, set: { camera: { frame: v.slice(6), padding: 24 } } }, 'Frame camera');
+    // Its camera moves stay when the framing changes.
+    const moves = { ...(current.camera?.in !== undefined ? { in: current.camera.in } : {}), ...(current.camera?.during !== undefined ? { during: current.camera.during } : {}) };
+    if (!v) apply(Object.keys(moves).length ? { op: 'update_shot', shot: current.id, set: { camera: moves } } : { op: 'update_shot', shot: current.id, remove: ['camera'] }, 'Clear camera');
+    else if (v.startsWith('frame:')) apply({ op: 'update_shot', shot: current.id, set: { camera: { ...moves, frame: v.slice(6), padding: 24 } } }, 'Frame camera');
   }
   function setCue(v: string) {
     const cue = motionCueFromKey(v);
@@ -63,8 +66,8 @@
 </script>
 
 <!--
-  The selected shot: label, hold, speed, the node the camera frames and the cue it starts on (a
-  beat or a narration word). Also adds, moves and deletes shots. Every change is one undo step.
+  The selected shot: label, hold, speed, the node the camera frames, the cue it starts on (a
+  beat or a narration word) and its camera moves (ShotCameraMoves). Also adds, moves and deletes shots. Every change is one undo step.
 -->
 <div class="flex flex-col gap-1.5 text-xs {className}" data-shot-inspector="">
   <div class="flex items-center gap-1">
@@ -94,9 +97,9 @@
         <span class="text-[10px] text-muted-foreground">×</span>
       </div>
       <span class="text-muted-foreground">Camera</span>
-      <select class={input} aria-label="Camera frames" disabled={editor.readOnly} value={current.camera ? (frame ? `frame:${frame}` : 'rect') : ''} onchange={(e) => setCamera(e.currentTarget.value)}>
+      <select class={input} aria-label="Camera frames" disabled={editor.readOnly} value={current.camera && motionCameraFramed(current.camera) ? (frame ? `frame:${frame}` : 'rect') : ''} onchange={(e) => setCamera(e.currentTarget.value)}>
         <option value="">keep framing</option>
-        {#if current.camera && !frame}<option value="rect">a rectangle</option>{/if}
+        {#if current.camera && motionCameraFramed(current.camera) && !frame}<option value="rect">a rectangle</option>{/if}
         {#each elements as e (e.id)}
           <option value="frame:{e.id}">frame {e.name ?? e.id}</option>
         {/each}
@@ -114,6 +117,7 @@
       {/if}
     </div>
   {/if}
+  {#if current}<ShotCameraMoves {controller} shot={current.id} />{/if}
   {#if message}
     <p class="text-red-500" role="alert" data-edit-error="">{message}</p>
   {/if}

package/dist/animation-editor/index.d.ts

@@ -7,6 +7,7 @@ import type CommandListComponent from "./CommandList.svelte";
 import type CommandInspectorComponent from "./CommandInspector.svelte";
 import type EasePickerComponent from "./EasePicker.svelte";
 import type ShotInspectorComponent from "./ShotInspector.svelte";
+import type ShotCameraMovesComponent from "./ShotCameraMoves.svelte";
 import type SceneSettingsComponent from "./SceneSettings.svelte";
 import type AnimationRecordPanelComponent from "./AnimationRecordPanel.svelte";
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
@@ -17,6 +18,7 @@ export { default as CommandList } from "./CommandList.svelte";
 export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as ShotCameraMoves } from "./ShotCameraMoves.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
@@ -29,5 +31,6 @@ export type CommandListProps = ComponentProps<typeof CommandListComponent>;
 export type CommandInspectorProps = ComponentProps<typeof CommandInspectorComponent>;
 export type EasePickerProps = ComponentProps<typeof EasePickerComponent>;
 export type ShotInspectorProps = ComponentProps<typeof ShotInspectorComponent>;
+export type ShotCameraMovesProps = ComponentProps<typeof ShotCameraMovesComponent>;
 export type SceneSettingsProps = ComponentProps<typeof SceneSettingsComponent>;
 export type AnimationRecordPanelProps = ComponentProps<typeof AnimationRecordPanelComponent>;

package/dist/animation-editor/index.js

@@ -6,6 +6,7 @@ export { default as CommandList } from "./CommandList.svelte";
 export { default as CommandInspector } from "./CommandInspector.svelte";
 export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
+export { default as ShotCameraMoves } from "./ShotCameraMoves.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
 export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.169.0",
+  "version": "0.170.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.229.0"
+    "@pixerate/editor": "0.230.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",