@pixerate/editor-svelte 0.176.1 → 0.178.0

package/dist/paint-editor/PaintCanvas.svelte

@@ -40,6 +40,7 @@
   let water = $state<HTMLCanvasElement | null>(null);
   let size = $state({ width: 800, height: 600 });
   let predicted = $state<Array<{ x: number; y: number }>>([]);
+  let strokeDrag = $state<{ id: string; dx: number; dy: number } | null>(null);
   const presenter = $derived(new PaintCanvasPresenter(controller));
   const gesture = $derived(
     new PaintGesture(controller, () => {
@@ -101,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;
@@ -117,7 +125,7 @@
   const transform = $derived(viewCssTransform(snap.view, doc, size));
   const lines = $derived.by(() => {
     void snap;
-    return showGuides ? guideOverlay(controller) : [];
+    return showGuides ? guideOverlay(controller, strokeDrag) : [];
   });
 </script>
 
@@ -130,7 +138,7 @@
   aria-label="Paint canvas"
   data-testid="paint-canvas"
   class={`relative overflow-hidden bg-slate-950 outline-none touch-none select-none ${className}`}
-  style={`cursor: ${tool === 'pan' ? 'grab' : tool === 'eyedropper' ? 'copy' : 'crosshair'}`}
+  style={`cursor: ${tool === 'pan' ? 'grab' : tool === 'eyedropper' ? 'copy' : tool === 'stroke' ? 'default' : 'crosshair'}`}
   onpointerdown={(e) => {
     viewport?.focus();
     if (gesture.down(e)) (e.target as Element).setPointerCapture?.(e.pointerId);
@@ -139,14 +147,18 @@
   onpointermove={(e) => {
     gesture.move(e);
     if (gesture.predicted.length || predicted.length) predicted = gesture.predicted.map((p) => ({ x: p.x, y: p.y }));
+    if (gesture.strokeDrag || strokeDrag) strokeDrag = gesture.strokeDrag;
   }}
   onpointerup={(e) => {
     gesture.up(e);
     predicted = [];
+    strokeDrag = null;
+    onerror?.(gesture.error);
   }}
   onpointercancel={() => {
     gesture.cancel();
     predicted = [];
+    strokeDrag = null;
   }}
   onkeydown={(e) => {
     if (handlePaintShortcut(controller, gesture, e)) e.preventDefault();
@@ -176,8 +188,8 @@
         y1={l.from.y}
         x2={l.to.x}
         y2={l.to.y}
-        stroke={l.kind === 'symmetry' ? '#22d3ee' : l.kind === 'stencil' ? '#fbbf24' : l.kind === 'sticker' ? '#818cf8' : '#f472b6'}
-        stroke-opacity={l.kind === 'symmetry' || l.kind === 'stencil' || l.kind === 'sticker' ? 0.8 : 0.35}
+        stroke={l.kind === 'symmetry' ? '#22d3ee' : l.kind === 'stencil' ? '#fbbf24' : l.kind === 'stroke' || l.kind === 'sticker' ? '#818cf8' : '#f472b6'}
+        stroke-opacity={l.kind === 'symmetry' || l.kind === 'stencil' || l.kind === 'stroke' || l.kind === 'sticker' ? 0.8 : 0.35}
         stroke-width={1 / snap.view.zoom}
         stroke-dasharray={l.kind === 'symmetry' ? `${6 / snap.view.zoom} ${4 / snap.view.zoom}` : undefined}
       />

package/dist/paint-editor/PaintEditor.svelte

@@ -11,6 +11,7 @@
   import PaperPanel from './PaperPanel.svelte';
   import WetPanel from './WetPanel.svelte';
   import StickerPanel from './StickerPanel.svelte';
+  import StrokePanel from './StrokePanel.svelte';
   import PaintEffectsPanel from './PaintEffectsPanel.svelte';
   import { chip, paintEffectsProvider } from './paintEditorRune.svelte.js';
 
@@ -128,7 +129,7 @@
         {#if tab === 'color'}<ColorPanel {controller} />{/if}
         {#if tab === 'wet'}<WetPanel {controller} />{/if}
         {#if tab === 'paper'}<PaperPanel {controller} />{/if}
-        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StickerPanel {controller} />{/if}
+        {#if tab === 'layers'}<PaintLayersPanel {controller} /><StrokePanel {controller} /><StickerPanel {controller} />{/if}
         {#if tab === 'effects' && effects.current}<PaintEffectsPanel {controller} />{/if}
       </div>
     </div>

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/paint-editor/PaintLayersPanel.svelte

@@ -31,6 +31,7 @@
   <div class="flex flex-wrap gap-1">
     <button type="button" class={button} onclick={() => run(() => controller.addLayer())}>New layer</button>
     <button type="button" class={button} onclick={() => run(() => controller.addLayer({ type: 'group' }))}>New group</button>
+    <button type="button" class={button} title="A layer whose strokes stay editable" onclick={() => run(() => controller.addLayer({ type: 'strokes' }))}>New stroke layer</button>
     <button type="button" class={button} disabled={!active} onclick={() => active && run(() => controller.duplicateLayer(active.id))}>Duplicate</button>
     <button type="button" class={button} disabled={!active} aria-label="Move layer up" onclick={() => move(1)}>↑</button>
     <button type="button" class={button} disabled={!active} aria-label="Move layer down" onclick={() => move(-1)}>↓</button>
@@ -75,7 +76,7 @@
             }}
           />
         {:else}
-          <span class="flex-1 truncate" role="presentation" ondblclick={() => (renaming = l.id)}>{l.type === 'group' ? '▸ ' : ''}{l.name}</span>
+          <span class="flex-1 truncate" role="presentation" ondblclick={() => (renaming = l.id)}>{l.type === 'group' ? '▸ ' : ''}{#if l.liveStrokes !== undefined}<span aria-label="Stroke layer" title={`Stroke layer: ${l.liveStrokes} editable strokes`}>✎ </span>{/if}{l.name}</span>
         {/if}
         {#if l.locks.pixels || l.locks.all}<span title="Locked">🔒</span>{/if}
       </li>

package/dist/paint-editor/StrokePanel.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { STROKE_SLIDERS, liveStrokeRefusal, readPath, type PaintEditorController } from '@pixerate/editor/paint-editor';
+  import PaintSlider from './PaintSlider.svelte';
+  import { attempt, button, paintEditorState, panel } from './paintEditorRune.svelte.js';
+
+  interface Props {
+    controller: PaintEditorController;
+    class?: string;
+  }
+  let { controller, class: className = '' }: Props = $props();
+  const editor = paintEditorState(() => controller);
+  const layerId = $derived(editor.current.document.activeLayerId);
+  const strokes = $derived(layerId ? editor.current.document.liveStrokes?.[layerId] : undefined);
+  const index = $derived(strokes ? strokes.findIndex((s) => s.id === editor.current.selectedStroke) : -1);
+  const sel = $derived(strokes && index >= 0 ? strokes[index] : null);
+  const brushes = $derived(editor.current.brushes.filter((b) => !liveStrokeRefusal(b)));
+  let error = $state<string | null>(null);
+  const run = (fn: () => unknown) => attempt(fn, (m) => (error = m));
+</script>
+
+<!-- The active stroke layer's strokes: pick one (here, or with the Select stroke tool on the canvas) to change its brush, size, opacity, flow, colour or seed, reorder or delete it. The layer redraws exactly; each change is one undo step. -->
+{#if layerId && strokes}
+  <div class={`${panel} ${className}`} data-testid="stroke-panel">
+    <div class="flex items-center justify-between">
+      <span class="font-medium text-slate-300">Strokes ({strokes.length})</span>
+      <button type="button" class={button} onclick={() => run(() => controller.rasterizeLiveStrokes(layerId))}>Rasterize</button>
+    </div>
+    <div class="flex max-h-24 flex-wrap gap-1 overflow-y-auto" role="listbox" aria-label="Strokes">
+      {#each strokes as s, i (s.id)}
+        <button type="button" role="option" aria-selected={s.id === editor.current.selectedStroke} title={`${i + 1}. ${s.brush.name} (${s.id})`} class={`h-5 w-5 rounded ring-1 ${s.id === editor.current.selectedStroke ? 'ring-indigo-400' : 'ring-slate-700'}`} style={`background: ${s.color}`} onclick={() => controller.selectStroke(s.id)}></button>
+      {/each}
+    </div>
+    {#if sel}
+      <div class="flex flex-col gap-1.5" data-testid="stroke-edit">
+        <label class="flex items-center justify-between gap-2">
+          <span class="text-slate-400">Brush</span>
+          <select aria-label="Stroke brush" value={brushes.some((b) => b.id === sel.brush.id) ? sel.brush.id : ''} onchange={(e) => { const brushId = e.currentTarget.value; if (brushId) run(() => controller.updateStroke(sel.id, { brushId })); }} class="max-w-[10rem] rounded bg-slate-800 px-1 py-0.5">
+            {#if !brushes.some((b) => b.id === sel.brush.id)}<option value="">{sel.brush.name}</option>{/if}
+            {#each brushes as b (b.id)}<option value={b.id}>{b.name}</option>{/each}
+          </select>
+        </label>
+        {#each STROKE_SLIDERS as c (c.path)}
+          <PaintSlider control={c} value={readPath(sel.brush, c.path)} oncommit={(v) => run(() => controller.updateStroke(sel.id, { brush: { tip: { [c.path.split('.')[1]]: v } } }))} />
+        {/each}
+        <label class="flex items-center justify-between">
+          <span class="text-slate-400">Colour</span>
+          <input type="color" aria-label="Stroke colour" value={sel.color} onchange={(e) => { const color = e.currentTarget.value; run(() => controller.updateStroke(sel.id, { color })); }} class="h-6 w-10 rounded bg-transparent" />
+        </label>
+        <div class="flex flex-wrap gap-1">
+          <button type="button" class={button} onclick={() => run(() => controller.updateStroke(sel.id, { seed: (sel.seed + 1) % 2147483647 }))}>New seed</button>
+          <button type="button" class={button} disabled={index === strokes.length - 1} aria-label="Move stroke up" onclick={() => run(() => controller.reorderStroke(sel.id, index + 1))}>↑</button>
+          <button type="button" class={button} disabled={index === 0} aria-label="Move stroke down" onclick={() => run(() => controller.reorderStroke(sel.id, index - 1))}>↓</button>
+          <button type="button" class={button} onclick={() => run(() => { controller.removeStrokes([sel.id]); controller.selectStroke(null); })}>Delete</button>
+        </div>
+      </div>
+    {/if}
+    {#if error}<p role="alert" class="text-[11px] text-rose-400">{error}</p>{/if}
+  </div>
+{/if}

package/dist/paint-editor/StrokePanel.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type PaintEditorController } from '@pixerate/editor/paint-editor';
+interface Props {
+    controller: PaintEditorController;
+    class?: string;
+}
+declare const StrokePanel: import("svelte").Component<Props, {}, "">;
+type StrokePanel = ReturnType<typeof StrokePanel>;
+export default StrokePanel;

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

@@ -8,6 +8,7 @@ import type ColorPanelComponent from './ColorPanel.svelte';
 import type PaintLayersPanelComponent from './PaintLayersPanel.svelte';
 import type WetPanelComponent from './WetPanel.svelte';
 import type StickerPanelComponent from './StickerPanel.svelte';
+import type StrokePanelComponent from './StrokePanel.svelte';
 import type PaintEffectsPanelComponent from './PaintEffectsPanel.svelte';
 import type PaintGradientEditorComponent from './PaintGradientEditor.svelte';
 export { default as PaintEditor } from './PaintEditor.svelte';
@@ -19,6 +20,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';
@@ -33,5 +35,6 @@ export type ColorPanelProps = ComponentProps<typeof ColorPanelComponent>;
 export type PaintLayersPanelProps = ComponentProps<typeof PaintLayersPanelComponent>;
 export type WetPanelProps = ComponentProps<typeof WetPanelComponent>;
 export type StickerPanelProps = ComponentProps<typeof StickerPanelComponent>;
+export type StrokePanelProps = ComponentProps<typeof StrokePanelComponent>;
 export type PaintEffectsPanelProps = ComponentProps<typeof PaintEffectsPanelComponent>;
 export type PaintGradientEditorProps = ComponentProps<typeof PaintGradientEditorComponent>;

package/dist/paint-editor/index.js

@@ -7,6 +7,7 @@ export { default as ColorPanel } from './ColorPanel.svelte';
 export { default as PaintLayersPanel } from './PaintLayersPanel.svelte';
 export { default as WetPanel } from './WetPanel.svelte';
 export { default as StickerPanel } from './StickerPanel.svelte';
+export { default as StrokePanel } from './StrokePanel.svelte';
 export { default as PaintEffectsPanel } from './PaintEffectsPanel.svelte';
 export { default as PaintGradientEditor } from './PaintGradientEditor.svelte';
 export { default as PaintSlider } from './PaintSlider.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.176.1",
+  "version": "0.178.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.239.0"
+    "@pixerate/editor": "0.241.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",