@pixerate/editor-svelte 0.103.3 → 0.104.0

package/dist/animation-editor/AnimationEditor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { indexMotionNodes, motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+  import { indexMotionNodes, motionIssueLine, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+  import AnimationRecordPanel from './AnimationRecordPanel.svelte';
   import AnimationStage from './AnimationStage.svelte';
   import CommandInspector from './CommandInspector.svelte';
   import CommandList from './CommandList.svelte';
@@ -70,6 +71,7 @@
   let picked: string | null = $state(null);
   let onion = $state(false);
   let paths = $state(false);
+  let recordMode: MotionRecordGestureMode = $state('move');
   const nodes = $derived(indexMotionNodes(editor.scene.artwork.nodes));
   const pickedValid = $derived(picked && nodes.has(picked) ? picked : null);
   const command = $derived(editor.selection?.command !== undefined ? editor.scene.shots.find((s) => s.id === editor.selection!.shot)?.run[editor.selection.command] : undefined);
@@ -106,8 +108,9 @@
 
 <!--
   A whole animation editor: the stage (click to pick an element, shift-click to toggle it as a
-  target of the selected command), the playhead scrubber, and panels to edit commands, shots and
-  scene settings by hand. Every edit is one undo step.
+  target of the selected command), the playhead scrubber, a Record button to perform changes live
+  on the stage and keep them as a shot, and panels to edit commands, shots and scene settings by
+  hand. Every edit is one undo step.
 -->
 {#if !editable}
   <div bind:this={root} class="relative flex flex-col gap-2 {className}" data-animation-editor="">
@@ -132,6 +135,7 @@
         motionPaths={motionPaths ?? paths}
         {onpick}
         {highlight}
+        {recordMode}
         class="rounded-md border border-border bg-muted/40"
       />
       <PlayheadScrubber {controller} />
@@ -153,6 +157,9 @@
           {/if}
         </span>
       </div>
+      {#if !editor.readOnly}
+        <AnimationRecordPanel {controller} node={pickedValid} mode={recordMode} onmodechange={(m) => (recordMode = m)} class="border-t border-border pt-2" />
+      {/if}
       {@render issueList()}
     </div>
     <div class="flex min-w-0 flex-col gap-3">

package/dist/animation-editor/AnimationRecordPanel.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { MOTION_RECORD_GESTURE_MODES, type AnimationEditorController, type MotionRecordGestureMode, type MotionTakeSample } from '@pixerate/editor/animation-editor';
+  import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
+
+  interface Props {
+    controller: AnimationEditorController;
+    /** The element the paint and opacity controls record (e.g. the one picked on the stage). */
+    node?: string | null;
+    /** What a stage drag does while recording (pass the same to `<AnimationStage recordMode>`). */
+    mode: MotionRecordGestureMode;
+    onmodechange: (mode: MotionRecordGestureMode) => void;
+    class?: string;
+  }
+
+  let { controller, node = null, mode, onmodechange, class: className = '' }: Props = $props();
+  const view = animationEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const pose = $derived(editor.recording && node ? controller.pose(node) : null);
+  const btn = 'rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40';
+  const MODE_LABELS: Record<MotionRecordGestureMode, string> = { move: 'Move', scale: 'Scale', rotate: 'Rotate' };
+  const hex6 = (c: string | undefined) => (c && /^#[0-9a-f]{6}/i.test(c) ? c.slice(0, 7).toLowerCase() : '#000000');
+  const sample = (values: Omit<MotionTakeSample, 'node' | 't'>) => node && controller.recordSample(node, values);
+</script>
+
+<!--
+  Record a take: Record plays on from the end of the scene while you drag elements on the stage
+  (moving, scaling or turning them, as `mode` says) and change the picked element's paint and
+  opacity; Stop keeps the performance as a new shot of ordinary commands, one undo step.
+-->
+<div class="flex flex-wrap items-center gap-2 text-xs {className}" data-animation-record="">
+  {#if editor.recording}
+    <button type="button" class="{btn} border-red-500 text-red-600" onclick={() => controller.stopRecording()} data-record-stop="">■ Stop</button>
+    <button type="button" class={btn} onclick={() => controller.cancelRecording()} data-record-cancel="">Cancel</button>
+    <button type="button" class={btn} onclick={() => controller.toggle()}>{editor.playing ? 'Pause' : 'Resume'}</button>
+    <span class="tabular-nums text-red-600" aria-live="polite">● REC {(editor.recording.elapsed / 1000).toFixed(1)} s · {editor.recording.samples} samples</span>
+  {:else}
+    <button type="button" class={btn} onclick={() => controller.startRecording()} disabled={editor.readOnly} title="Perform changes live on the stage and keep them as a new shot" data-record-start="">● Record</button>
+  {/if}
+  <span class="flex items-center gap-1" role="radiogroup" aria-label="Drag to">
+    Drag to
+    {#each MOTION_RECORD_GESTURE_MODES as m (m)}
+      <label class="flex items-center gap-0.5"><input type="radio" name="animation-record-mode" checked={mode === m} onchange={() => onmodechange(m)} /> {MODE_LABELS[m]}</label>
+    {/each}
+  </span>
+  {#if pose}
+    <span class="flex items-center gap-2" data-record-paint="">
+      {#if pose.fill !== undefined}
+        <label class="flex items-center gap-1">Fill <input type="color" value={hex6(pose.fill)} oninput={(e) => sample({ fill: e.currentTarget.value })} /></label>
+      {/if}
+      {#if pose.stroke !== undefined}
+        <label class="flex items-center gap-1">Stroke <input type="color" value={hex6(pose.stroke)} oninput={(e) => sample({ stroke: e.currentTarget.value })} /></label>
+      {/if}
+      <label class="flex items-center gap-1">Opacity <input type="range" min="0" max="1" step="0.01" value={pose.opacity} oninput={(e) => sample({ opacity: Number(e.currentTarget.value) })} /></label>
+    </span>
+  {/if}
+  {#if editor.recording && !node}
+    <span class="text-muted-foreground">Drag an element; click one to record its paint and opacity.</span>
+  {/if}
+  {#if !editor.recording && editor.error && /record/i.test(editor.error)}
+    <span class="text-amber-600">{editor.error}</span>
+  {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import { type AnimationEditorController, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
+interface Props {
+    controller: AnimationEditorController;
+    /** The element the paint and opacity controls record (e.g. the one picked on the stage). */
+    node?: string | null;
+    /** What a stage drag does while recording (pass the same to `<AnimationStage recordMode>`). */
+    mode: MotionRecordGestureMode;
+    onmodechange: (mode: MotionRecordGestureMode) => void;
+    class?: string;
+}
+declare const AnimationRecordPanel: import("svelte").Component<Props, {}, "">;
+type AnimationRecordPanel = ReturnType<typeof AnimationRecordPanel>;
+export default AnimationRecordPanel;

package/dist/animation-editor/AnimationStage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+  import { highlightMotionSvg, motionNodeAtElement, type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
   import { animationEditorStateOf } from './createAnimationEditor.svelte.js';
 
   interface Props {
@@ -17,11 +17,40 @@
     onpick?: (id: string | null, event: MouseEvent) => void;
     /** Node ids to outline (e.g. the picked element and the selected command's targets). */
     highlight?: readonly string[];
+    /**
+     * While the controller records a take (`startRecording`), what dragging an element does:
+     * `move` it, `scale` it about its centre or `rotate` it (default `move`). Each pointer move
+     * is a sample of the take.
+     */
+    recordMode?: MotionRecordGestureMode;
     class?: string;
   }
 
-  let { controller, values, onionSkin, motionPaths, onpick, highlight, class: className = '' }: Props = $props();
+  let { controller, values, onionSkin, motionPaths, onpick, highlight, recordMode = 'move', class: className = '' }: Props = $props();
   const view = animationEditorStateOf(() => controller);
+  const recording = $derived(view.current.recording);
+  let dragging: number | null = null;
+  const point = (e: PointerEvent) => controller.clientToDocument((e.currentTarget as Element).getBoundingClientRect(), e.clientX, e.clientY);
+  function onpointerdown(e: PointerEvent) {
+    const id = motionNodeAtElement(view.current.scene, e.target as Element, e.currentTarget as Element);
+    if (!id || !controller.beginRecordGesture(id, recordMode, point(e))) return;
+    dragging = e.pointerId;
+    (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
+    e.preventDefault();
+  }
+  function onpointermove(e: PointerEvent) {
+    if (dragging === e.pointerId) controller.updateRecordGesture(point(e));
+  }
+  function onpointerup(e: PointerEvent) {
+    if (dragging !== e.pointerId) return;
+    dragging = null;
+    controller.endRecordGesture();
+  }
+  function onpointercancel() {
+    dragging = null;
+    controller.endRecordGesture();
+  }
+  // Re-drawn on every state change (a recorded sample changes the frame without moving the playhead).
   const svg = $derived(
     highlightMotionSvg(
       controller
@@ -38,12 +67,17 @@
 <!-- The frame at the playhead as inline SVG (keeping node ids, so a click can pick an element). -->
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 <div
-  class="relative overflow-hidden {onpick ? 'cursor-crosshair' : ''} {className}"
+  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}"
   data-animation-stage=""
+  data-recording={recording ? '' : undefined}
   role="img"
   aria-label="{view.current.scene.name} at {(view.current.time / 1000).toFixed(2)} s"
   onclick={onpick ? onclick : undefined}
+  onpointerdown={recording ? onpointerdown : undefined}
+  onpointermove={recording ? onpointermove : undefined}
+  onpointerup={recording ? onpointerup : undefined}
+  onpointercancel={recording ? onpointercancel : undefined}
 >
   {@html svg}
 </div>

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

@@ -1,4 +1,4 @@
-import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin } from '@pixerate/editor/animation-editor';
+import { type AnimationEditorController, type MotionFrameOptions, type MotionOnionSkin, type MotionRecordGestureMode } from '@pixerate/editor/animation-editor';
 interface Props {
     controller: AnimationEditorController;
     /** Control values to preview (`{ accent: "#0ea5e9" }`). */
@@ -14,6 +14,12 @@ interface Props {
     onpick?: (id: string | null, event: MouseEvent) => void;
     /** Node ids to outline (e.g. the picked element and the selected command's targets). */
     highlight?: readonly string[];
+    /**
+     * While the controller records a take (`startRecording`), what dragging an element does:
+     * `move` it, `scale` it about its centre or `rotate` it (default `move`). Each pointer move
+     * is a sample of the take.
+     */
+    recordMode?: MotionRecordGestureMode;
     class?: string;
 }
 declare const AnimationStage: import("svelte").Component<Props, {}, "">;

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

@@ -8,6 +8,7 @@ import type CommandInspectorComponent from "./CommandInspector.svelte";
 import type EasePickerComponent from "./EasePicker.svelte";
 import type ShotInspectorComponent from "./ShotInspector.svelte";
 import type SceneSettingsComponent from "./SceneSettings.svelte";
+import type AnimationRecordPanelComponent from "./AnimationRecordPanel.svelte";
 export { default as AnimationEditor } from "./AnimationEditor.svelte";
 export { default as AnimationStage } from "./AnimationStage.svelte";
 export { default as ShotTimeline } from "./ShotTimeline.svelte";
@@ -18,6 +19,7 @@ export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
+export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";
 export type AnimationEditorProps = ComponentProps<typeof AnimationEditorComponent>;
 export type AnimationStageProps = ComponentProps<typeof AnimationStageComponent>;
@@ -28,3 +30,4 @@ export type CommandInspectorProps = ComponentProps<typeof CommandInspectorCompon
 export type EasePickerProps = ComponentProps<typeof EasePickerComponent>;
 export type ShotInspectorProps = ComponentProps<typeof ShotInspectorComponent>;
 export type SceneSettingsProps = ComponentProps<typeof SceneSettingsComponent>;
+export type AnimationRecordPanelProps = ComponentProps<typeof AnimationRecordPanelComponent>;

package/dist/animation-editor/index.js

@@ -8,4 +8,5 @@ export { default as EasePicker } from "./EasePicker.svelte";
 export { default as ShotInspector } from "./ShotInspector.svelte";
 export { default as SceneSettings } from "./SceneSettings.svelte";
 export { default as AnimationEffectsPanel } from "./AnimationEffectsPanel.svelte";
+export { default as AnimationRecordPanel } from "./AnimationRecordPanel.svelte";
 export * from "./createAnimationEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.103.3",
+  "version": "0.104.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -144,7 +144,7 @@
     "@tiptap/extension-bubble-menu": "^2.27.3",
     "@tiptap/extension-placeholder": "^2.27.3",
     "@tiptap/starter-kit": "^2.27.3",
-    "@pixerate/editor": "0.144.0"
+    "@pixerate/editor": "0.145.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",