@pixerate/editor-svelte 0.177.0 → 0.179.0

package/dist/paint-editor/PaintCanvas.svelte

@@ -102,6 +102,13 @@
     });
   });
 
+  // Live effect paint plays while the canvas is mounted (idle when nothing is live or it is paused).
+  $effect(() => {
+    const c = controller;
+    const player = untrack(() => c.playEffects());
+    return () => player.stop();
+  });
+
   // Wheel needs a non-passive listener to prevent page scroll (see GOTCHAS).
   $effect(() => {
     const el = viewport;

package/dist/paint-editor/PaintEffectsPanel.svelte

@@ -25,8 +25,16 @@
       effectPaint: editor.current.effectPaint,
       rendering: editor.current.effectPaintRendering,
       color: editor.current.color,
+      animation: controller.getAnimation(),
+      playback: editor.current.effectPlayback,
     };
   });
+  /** Paints with the effect paint again with some of it changed (the other settings kept). */
+  const repaint = (patch: { values?: Record<string, unknown>; map?: unknown; live?: boolean }) => {
+    const fx = view.effectPaint;
+    if (!fx) return;
+    run(() => controller.setEffectPaint({ effect: fx.effect, values: fx.values as never, time: fx.time, map: fx.map, live: fx.live, ...(patch as object) }));
+  };
   const thumbnail = $derived.by(() => {
     const { effectPaint, rendering } = view;
     return effectPaint && !rendering ? untrack(() => controller.effectPaintThumbnail(48)) : null;
@@ -129,9 +137,44 @@
         {provider}
         effect={fx.effect}
         values={fx.values}
-        onchange={(k, v) => run(() => controller.setEffectPaint({ effect: fx.effect, values: { ...fx.values, [k]: v as never }, time: fx.time }))}
-        onpreset={(values) => run(() => controller.setEffectPaint({ effect: fx.effect, values: { ...fx.values, ...values } as never, time: fx.time }))}
+        onchange={(k, v) => repaint({ values: { ...fx.values, [k]: v } })}
+        onpreset={(values) => repaint({ values: { ...fx.values, ...values } })}
       />
+      <div class="flex flex-wrap items-center gap-2" data-testid="effect-paint-placement">
+        <label class="flex items-center gap-1" title="Lay the effect along each stroke instead of fixing it to the canvas">
+          <input type="checkbox" checked={Boolean(fx.map)} onchange={(e) => repaint({ map: e.currentTarget.checked ? { by: 'stroke', length: 300, repeat: 'repeat' } : { by: 'canvas' } })} />
+          Along the stroke
+        </label>
+        <label class="flex items-center gap-1" title="Strokes on a stroke layer keep playing the effect">
+          <input type="checkbox" checked={Boolean(fx.live)} onchange={(e) => repaint({ live: e.currentTarget.checked })} />
+          Live
+        </label>
+      </div>
+      {#if fx.map}
+        {@const map = fx.map}
+        <div class="flex flex-wrap items-center gap-2">
+          <label class="flex items-center gap-1">
+            <span class="text-slate-400">Length</span>
+            <input type="number" aria-label="Effect length along the stroke" min="16" max="4096" value={map.length} onchange={(e) => { const length = Number(e.currentTarget.value); if (length !== map.length) repaint({ map: { ...map, length } }); }} class="w-16 rounded bg-slate-800 px-1 py-0.5" />
+          </label>
+          <select aria-label="Effect repeat" value={map.repeat} onchange={(e) => repaint({ map: { ...map, repeat: e.currentTarget.value } })} class="rounded bg-slate-800 px-1 py-0.5">
+            <option value="repeat">Repeat</option>
+            <option value="mirror">Mirror</option>
+            <option value="clamp">Clamp</option>
+          </select>
+        </div>
+      {/if}
+    </div>
+  {/if}
+  {#if view.animation}
+    {@const animation = view.animation}
+    <div class="flex items-center gap-2 rounded border border-slate-700 p-1" data-effect-part="playback">
+      <span class="flex-1 truncate">Live paint: {animation.strokes} {animation.strokes === 1 ? 'stroke' : 'strokes'}</span>
+      <button type="button" class={button} aria-pressed={view.playback.playing} onclick={() => attempt(() => controller.setEffectPlayback({ playing: !view.playback.playing }), (m) => (error = m))}>{view.playback.playing ? 'Pause' : 'Play'}</button>
+      <label class="flex items-center gap-1">
+        <span class="text-slate-400">fps</span>
+        <input type="number" aria-label="Live paint frame rate" min="1" max="60" value={view.playback.fps} onchange={(e) => attempt(() => controller.setEffectPlayback({ fps: Math.round(Number(e.currentTarget.value)) }), (m) => (error = m))} class="w-12 rounded bg-slate-800 px-1 py-0.5" />
+      </label>
     </div>
   {/if}
   {#if view.layerEffect && view.activeId}

package/dist/video-editor/EffectControls.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import type { EffectProvider } from '@pixerate/editor/effects';
-  import { isVideoKeyframes, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import { pathControlsOf, type EffectProvider } from '@pixerate/editor/effects';
+  import { isVideoKeyframes, type VideoClip, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
+  import PathControls from './PathControls.svelte';
   import EffectParameters from '../effects/EffectParameters.svelte';
   import { effectDescriptionOf } from '../effects/effects.svelte.js';
 
@@ -12,9 +13,11 @@
     disabled: boolean;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** For an effect on a clip: where its path comes from, when it draws along one. */
+    path?: { controller: VideoEditorController; clip: VideoClip; instance: string; report: (r: VideoEffectEditResult | Promise<VideoEffectEditResult>) => void };
   }
 
-  let { provider, effect, name, values, disabled, onchange, onpreset }: Props = $props();
+  let { provider, effect, name, values, disabled, onchange, onpreset, path }: Props = $props();
   const loaded = effectDescriptionOf(() => provider, () => effect);
   const keyed = $derived(new Set(Object.entries(values ?? {}).filter(([, v]) => isVideoKeyframes(v)).map(([k]) => k)));
 </script>
@@ -28,5 +31,8 @@
   <p class="text-[11px] text-muted-foreground">Loading…</p>
 {:else}
   {@const description = loaded.description}
+  {#if path && pathControlsOf(description).length}
+    <PathControls controller={path.controller} clip={path.clip} instance={path.instance} report={path.report} {provider} {disabled} />
+  {/if}
   <EffectParameters {description} values={values ?? {}} keyframed={keyed} {disabled} {onchange} onreset={(k) => onchange(k, description.defaults[k], null)} {onpreset} />
 {/if}

package/dist/video-editor/EffectControls.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { EffectProvider } from '@pixerate/editor/effects';
-import { type VideoEffectValues } from '@pixerate/editor/video-editor';
+import { type EffectProvider } from '@pixerate/editor/effects';
+import { type VideoClip, type VideoEditorController, type VideoEffectEditResult, type VideoEffectValues } from '@pixerate/editor/video-editor';
 interface Props {
     provider: EffectProvider | null;
     effect: string;
@@ -8,6 +8,13 @@ interface Props {
     disabled: boolean;
     onchange: (control: string, value: unknown, gesture: string | null) => void;
     onpreset: (values: Readonly<Record<string, unknown>>) => void;
+    /** For an effect on a clip: where its path comes from, when it draws along one. */
+    path?: {
+        controller: VideoEditorController;
+        clip: VideoClip;
+        instance: string;
+        report: (r: VideoEffectEditResult | Promise<VideoEffectEditResult>) => void;
+    };
 }
 declare const EffectControls: import("svelte").Component<Props, {}, "">;
 type EffectControls = ReturnType<typeof EffectControls>;

package/dist/video-editor/PathControls.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { EffectProvider } from '@pixerate/editor/effects';
+  import type { VideoClip, VideoEditorController, VideoEffectEditResult } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    clip: VideoClip;
+    instance: string;
+    provider: EffectProvider;
+    disabled: boolean;
+    report: (r: VideoEffectEditResult | Promise<VideoEffectEditResult>) => void;
+  }
+
+  let { controller, clip, instance, provider, disabled, report }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const drawing = $derived(view.current.pathDrawing?.clip === clip.id && view.current.pathDrawing.instance === instance);
+  let words = $state('');
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+</script>
+
+<!-- Where an effect's path comes from, for an effect that draws along one: drawn on the preview, a mask outline, words, or none. -->
+<div class="flex flex-wrap items-center gap-1" data-effect-part="path">
+  <span class="text-muted-foreground">Path</span>
+  <button type="button" class={btn} {disabled} aria-pressed={drawing} title="Draw the path on the preview" onclick={() => (drawing ? controller.cancelPathDrawing() : controller.startPathDrawing({ clip: clip.id, instance }))}>{drawing ? 'Drawing… (Esc)' : 'Draw path'}</button>
+  <button type="button" class={btn} disabled={disabled || !clip.mask} title={clip.mask ? "Run it along this clip's mask outline" : 'Give the clip a mask first'} onclick={() => report(controller.setEffectPath(clip.id, instance, { mask: { clip: clip.id } }))}>Use mask outline</button>
+  {#if provider.pathFromText}
+    <input class="w-24 rounded border border-border bg-transparent px-1 py-0.5" aria-label="Words to write along the path" placeholder="Words" bind:value={words} {disabled} />
+    <button type="button" class={btn} disabled={disabled || !words.trim()} onclick={() => report(controller.setEffectPath(clip.id, instance, { text: words }))}>Write</button>
+  {/if}
+  <button type="button" class={btn} {disabled} onclick={() => report(controller.setEffectPath(clip.id, instance, { d: '' }))}>Clear path</button>
+</div>

package/dist/video-editor/PathControls.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { EffectProvider } from '@pixerate/editor/effects';
+import type { VideoClip, VideoEditorController, VideoEffectEditResult } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    clip: VideoClip;
+    instance: string;
+    provider: EffectProvider;
+    disabled: boolean;
+    report: (r: VideoEffectEditResult | Promise<VideoEffectEditResult>) => void;
+}
+declare const PathControls: import("svelte").Component<Props, {}, "">;
+type PathControls = ReturnType<typeof PathControls>;
+export default PathControls;

package/dist/video-editor/VideoEffectsPanel.svelte

@@ -92,6 +92,7 @@
           {disabled}
           onchange={(k, v, g) => report(controller.updateEffectValues(c.id, 'generator', { [k]: v } as VideoEffectValues, merge(g)))}
           onpreset={(values) => report(controller.updateEffectValues(c.id, 'generator', values as VideoEffectValues))}
+          path={{ controller, clip: c, instance: 'generator', report }}
         />
       </div>
     {/if}
@@ -165,6 +166,7 @@
                   {disabled}
                   onchange={(k, v, g) => report(controller.updateClipEffect(clip!.id, e.id, { values: { [k]: v as never } }, merge(g)))}
                   onpreset={(values) => report(controller.updateClipEffect(clip!.id, e.id, { values: values as never }))}
+                  path={{ controller, clip: clip!, instance: e.id, report }}
                 />
               </div>
             {/if}

package/dist/video-editor/VideoPreview.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from 'svelte';
-  import { formatVideoTimecode, VideoPreviewEngine, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { formatVideoTimecode, VideoPathGesture, VideoPreviewEngine, type VideoEditorController } from '@pixerate/editor/video-editor';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
   interface Props {
@@ -24,13 +24,50 @@
     const engine = untrack(() => new VideoPreviewEngine(source, el, options));
     return () => engine.destroy();
   });
+  // Drawing a path for an effect (the effects panel's Draw path): the preview takes the pointer.
+  const pathDrawing = $derived(view.current.pathDrawing);
+  const gesture = $derived(new VideoPathGesture({ width: project.width, height: project.height }));
+  let drawn = $state<number[]>([]);
+  $effect(() => {
+    if (!pathDrawing) return;
+    const c = controller;
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && c.cancelPathDrawing();
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
 </script>
 
 <!-- The frame at the playhead, drawn on a canvas with the project's aspect ratio; media plays in step with the timeline. -->
-<canvas
-  bind:this={canvas}
-  class="block w-full bg-black {className}"
-  style="aspect-ratio:{project.width} / {project.height};{style}"
-  data-video-preview=""
-  aria-label="{project.name ?? 'Video'} at {formatVideoTimecode(view.current.time, project.fps)}"
-></canvas>
+<div style="position: relative">
+  <canvas
+    bind:this={canvas}
+    class="block w-full bg-black {className}"
+    style="aspect-ratio:{project.width} / {project.height};{style}"
+    data-video-preview=""
+    aria-label="{project.name ?? 'Video'} at {formatVideoTimecode(view.current.time, project.fps)}"
+  ></canvas>
+  {#if pathDrawing}
+    <svg
+      viewBox="0 0 {project.width} {project.height}"
+      style="position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none"
+      role="application"
+      aria-label="Draw the effect's path"
+      data-video-path-drawing=""
+      onpointerdown={(e) => {
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+        gesture.down(e, e.currentTarget.getBoundingClientRect());
+        drawn = [...gesture.points];
+      }}
+      onpointermove={(e) => {
+        if (gesture.move(e, e.currentTarget.getBoundingClientRect())) drawn = [...gesture.points];
+      }}
+      onpointerup={() => {
+        const points = gesture.up();
+        drawn = [];
+        if (points) void controller.finishPathDrawing(points);
+      }}
+    >
+      <polyline points={drawn.join(' ')} fill="none" stroke="#22d3ee" stroke-width={Math.max(2, project.width / 300)} stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  {/if}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.177.0",
+  "version": "0.179.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.240.0"
+    "@pixerate/editor": "0.242.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",