@pixerate/editor-svelte 0.178.0 → 0.179.0

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.178.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.241.0"
+    "@pixerate/editor": "0.242.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",