@pixerate/editor-svelte 0.176.1 → 0.177.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, () => {
@@ -117,7 +118,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 +131,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 +140,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 +181,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/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.177.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.240.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",