@pixerate/editor-svelte 0.196.2 → 0.197.0

package/dist/animation-editor/AnimationEffectControls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { AnimationEditorController, MotionEffectResult } from '@pixerate/editor/animation-editor';
+  import { pathControlsOf } from '@pixerate/editor/effects';
   import EffectParameters from '../effects/EffectParameters.svelte';
   import { effectDescriptionOf } from '../effects/effects.svelte.js';
 
@@ -8,11 +9,20 @@
     instance: string;
     effect: string;
     values: Readonly<Record<string, unknown>>;
+    pathNodes?: readonly string[];
+    defaultPathNode?: string;
+    disabled?: boolean;
   }
 
-  let { controller, instance, effect, values }: Props = $props();
+  let { controller, instance, effect, values, pathNodes = [], defaultPathNode = '', disabled = false }: Props = $props();
   const loaded = effectDescriptionOf(() => controller.effectsProvider, () => effect);
   let message = $state<string | null>(null);
+  let pathNode = $state('');
+  let words = $state('');
+  const chosenPathNode = $derived(
+    pathNode && pathNodes.includes(pathNode) ? pathNode : defaultPathNode && pathNodes.includes(defaultPathNode) ? defaultPathNode : pathNodes[0] ?? ''
+  );
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
   const report = (r: Promise<MotionEffectResult>) => void r.then((x) => (message = x.ok ? null : x.error));
 </script>
 
@@ -24,9 +34,45 @@
 {:else if !loaded.description}
   <p class="text-[11px] text-muted-foreground">Loading…</p>
 {:else}
+  {@const description = loaded.description}
+  {@const pathControls = description.kind === 'vector' ? pathControlsOf(description) : []}
+  {#if pathControls.length > 0}
+    <div class="mb-1 flex flex-wrap items-center gap-1" data-effect-part="path">
+      <span class="text-muted-foreground">Path</span>
+      <select
+        class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]"
+        aria-label="Path node"
+        value={chosenPathNode}
+        disabled={disabled || !pathNodes.length}
+        onchange={(e) => (pathNode = e.currentTarget.value)}
+      >
+        <option value="">Path node…</option>
+        {#each pathNodes as id (id)}<option value={id}>{id}</option>{/each}
+      </select>
+      <button type="button" class={btn} disabled={disabled || !chosenPathNode} onclick={() => report(controller.setVectorEffectPath(instance, { node: chosenPathNode }))}>
+        Use path node
+      </button>
+      {#if controller.effectsProvider.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.setVectorEffectPath(instance, { text: words }))}>
+          Write
+        </button>
+      {/if}
+      <button type="button" class={btn} {disabled} onclick={() => report(controller.updateMotionEffect(instance, { [pathControls[0]]: '' }))}>
+        Clear path
+      </button>
+    </div>
+  {/if}
   <EffectParameters
-    description={loaded.description}
+    {description}
     {values}
+    {disabled}
     onchange={(k, v, g) => report(controller.updateMotionEffect(instance, { [k]: v as never }, { merge: g ?? undefined }))}
     onreset={(k) => report(controller.updateMotionEffect(instance, { [k]: null }))}
     onpreset={(v) => report(controller.updateMotionEffect(instance, v as never))}

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

@@ -4,6 +4,9 @@ interface Props {
     instance: string;
     effect: string;
     values: Readonly<Record<string, unknown>>;
+    pathNodes?: readonly string[];
+    defaultPathNode?: string;
+    disabled?: boolean;
 }
 declare const AnimationEffectControls: import("svelte").Component<Props, {}, "">;
 type AnimationEffectControls = ReturnType<typeof AnimationEffectControls>;

package/dist/animation-editor/AnimationEffectsPanel.svelte

@@ -16,16 +16,24 @@
   const view = animationEditorStateOf(() => controller);
   const ed = $derived(view.current);
   const provider = $derived(ed.effectsProvider);
+  const applied = $derived.by(() => {
+    void ed.scene;
+    return controller.appliedEffects();
+  });
   const nodes = $derived([...indexMotionNodes(ed.scene.artwork.nodes).keys()]);
+  const pathNodes = $derived.by(() => {
+    const vectorGroups = new Set(applied.filter((e) => e.kind === 'vector').map((e) => e.instance));
+    const own = ed.scene.artwork.nodes.filter((n) => !vectorGroups.has(n.id));
+    return [...indexMotionNodes(own).values()].filter((e) => e.node.type === 'path').map((e) => e.node.id);
+  });
   let chosen = $state('');
   const target = $derived(node && nodes.includes(node) ? node : chosen && nodes.includes(chosen) ? chosen : '');
   let browse = $state<null | 'motion' | 'vector'>(null);
+  let vectorPathNode = $state('');
+  let vectorWords = $state('');
+  const activeVectorPathNode = $derived(vectorPathNode && pathNodes.includes(vectorPathNode) ? vectorPathNode : '');
   let open = $state<string | null>(null);
   let message = $state<string | null>(null);
-  const applied = $derived.by(() => {
-    void ed.scene;
-    return controller.appliedEffects();
-  });
   const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
   function report(r: MotionEffectResult | Promise<MotionEffectResult>) {
     void Promise.resolve(r).then((x) => (message = x.ok ? (x.notes.length ? x.notes.join(' ') : null) : x.error));
@@ -53,7 +61,46 @@
   {/if}
   <EffectTemplates {provider} disabled={ed.readOnly} fillLabel="New scene from template" onfill={(t, v) => controller.fillTemplate(t, v).then((r) => (r.ok && r.notes.length && (message = r.notes.join(' ')), r))} />
   {#if browse === 'vector'}
-    <EffectsBrowser {provider} kinds={['vector']} title="Vector effects" onpick={(e) => ((browse = null), report(controller.addVectorEffect(e.id)))} />
+    <div class="space-y-1">
+      <div class="flex flex-wrap items-center gap-1" data-effect-part="vector-path">
+        <span class="text-muted-foreground">Path</span>
+        <select
+          class="rounded border border-border bg-transparent px-1 py-0.5 text-[11px]"
+          aria-label="Path node for vector effect"
+          value={activeVectorPathNode}
+          disabled={ed.readOnly || !pathNodes.length}
+          onchange={(e) => (vectorPathNode = e.currentTarget.value)}
+        >
+          <option value="">Default path</option>
+          {#each pathNodes as id (id)}<option value={id}>{id}</option>{/each}
+        </select>
+        {#if provider?.pathFromText}
+          <input
+            class="w-24 rounded border border-border bg-transparent px-1 py-0.5"
+            aria-label="Words for vector effect path"
+            placeholder="Words"
+            bind:value={vectorWords}
+            disabled={ed.readOnly}
+          />
+        {/if}
+      </div>
+      <EffectsBrowser
+        {provider}
+        kinds={['vector']}
+        title="Vector effects"
+        onpick={(e) => {
+          browse = null;
+          const path = e.accepts?.includes('path')
+            ? vectorWords.trim()
+              ? { text: vectorWords }
+              : activeVectorPathNode
+                ? { node: activeVectorPathNode }
+                : undefined
+            : undefined;
+          report(controller.addVectorEffect(e.id, path ? { path } : undefined));
+        }}
+      />
+    </div>
   {/if}
   <ol class="space-y-1">
     {#each applied as e (e.instance)}
@@ -64,7 +111,7 @@
           </button>
           <button type="button" class={btn} disabled={ed.readOnly} aria-label="Remove {e.name ?? e.effect}" onclick={() => report(controller.removeMotionEffect(e.instance))}>✕</button>
         </div>
-        {#if open === e.instance}<div class="mt-1"><AnimationEffectControls {controller} instance={e.instance} effect={e.effect} values={e.values} /></div>{/if}
+        {#if open === e.instance}<div class="mt-1"><AnimationEffectControls {controller} instance={e.instance} effect={e.effect} values={e.values} {pathNodes} defaultPathNode={target} disabled={ed.readOnly} /></div>{/if}
       </li>
     {/each}
   </ol>

package/dist/canvas/createCanvasDraw.svelte.d.ts

@@ -41,8 +41,18 @@ export declare function createCanvasDraw<TNode extends CanvasNode = CanvasNode>(
     selectBrush: (id: string | null, choice?: {
         keepColour?: boolean;
     }) => Promise<import("@pixerate/editor/canvas").CanvasBrushPreset | null>;
-    /** Sets the colour scheme that picks the side of a brush's light / dark default colour. */
-    setColorScheme: (scheme: "light" | "dark") => void;
+    readonly colorScheme: "light" | "dark";
+    /**
+     * Sets the colour scheme that picks the side of a brush's light / dark default colour; a
+     * stroke colour taken from one (`selectBrush`) follows.
+     */
+    setColorScheme(scheme: "light" | "dark"): void;
+    /** "Keep my colour": choosing a brush keeps the stroke colour. */
+    readonly colorLocked: boolean;
+    /** Locks the stroke colour ("Keep my colour"): `selectBrush` then keeps it. */
+    setColorLocked: (locked: boolean) => void;
+    /** What the brush picker is set to (brush, colour, scheme, lock), read now; `canvas.selectBrush` returns it. */
+    brushSettings: () => import("@pixerate/editor/canvas").CanvasBrushChoice;
 };
 export type CanvasDraw<TNode extends CanvasNode = CanvasNode> = ReturnType<typeof createCanvasDraw<TNode>>;
 export {};

package/dist/canvas/createCanvasDraw.svelte.js

@@ -5,8 +5,14 @@ import { createCanvasDrawController } from '@pixerate/editor/canvas';
 export function createCanvasDraw(options) {
     let tool = $state.raw(options.tool ?? 'select');
     let activeStroke = $state.raw(null);
+    let colorLocked = $state(!!options.colorLocked);
+    let colorScheme = $state(options.colorScheme === 'dark' ? 'dark' : 'light');
     const controller = createCanvasDrawController({
         ...options,
+        onColorLockChange: (locked) => {
+            colorLocked = locked;
+            options.onColorLockChange?.(locked);
+        },
         onToolChange: (nextTool) => {
             tool = nextTool;
             style = controller.style;
@@ -53,7 +59,24 @@ export function createCanvasDraw(options) {
          * Resolves to the preset; rejects for a brush the canvas can't paint.
          */
         selectBrush: controller.selectBrush,
-        /** Sets the colour scheme that picks the side of a brush's light / dark default colour. */
-        setColorScheme: controller.setColorScheme
+        get colorScheme() {
+            return colorScheme;
+        },
+        /**
+         * Sets the colour scheme that picks the side of a brush's light / dark default colour; a
+         * stroke colour taken from one (`selectBrush`) follows.
+         */
+        setColorScheme(scheme) {
+            controller.setColorScheme(scheme);
+            colorScheme = controller.colorScheme;
+        },
+        /** "Keep my colour": choosing a brush keeps the stroke colour. */
+        get colorLocked() {
+            return colorLocked;
+        },
+        /** Locks the stroke colour ("Keep my colour"): `selectBrush` then keeps it. */
+        setColorLocked: controller.setColorLocked,
+        /** What the brush picker is set to (brush, colour, scheme, lock), read now; `canvas.selectBrush` returns it. */
+        brushSettings: controller.brushSettings
     };
 }

package/dist/vector/VectorAppearancePanel.svelte

@@ -211,6 +211,12 @@
     </div>
     <!-- Top layer first, as it draws. -->
     {#each [...layers].reverse() as l (`${l.kind}-${l.index}`)}{@render layerRow(l, layers.length, ids)}{/each}
+    {#if kind === 'stroke' && layers.some((l) => l.brushstroke)}
+      <!-- Editor state: brushstrokes added or rebrushed from now on keep their colour. -->
+      <label class="flex items-center gap-1 text-[11px] text-muted-foreground" title="Choosing a brush keeps the stroke's colour instead of taking the brush's default colour">
+        <input type="checkbox" aria-label="Keep my colour" data-vector-keep-colour="" checked={view.colorLocked} onchange={(e) => controller.setColorLocked(e.currentTarget.checked)} /> Keep my colour when choosing a brush
+      </label>
+    {/if}
   </div>
 {/snippet}
 

package/package.json

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