@pixerate/editor-svelte 0.202.1 → 0.203.0

package/dist/paint-editor/PaintCanvas.svelte

@@ -9,6 +9,7 @@
     handlePaintShortcut,
     viewCssTransform,
     type PaintEditorController,
+    type FillRegionOptions,
     type PaintPresence,
     type PaintProposals,
     type PaintAgentStrokes,
@@ -26,6 +27,8 @@
     controller: PaintEditorController;
     /** The active tool (default brush). */
     tool?: PaintTool;
+    /** Options for the Fill tool (`tool === 'fill'`). */
+    fillOptions?: Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
     /** Draw the symmetry axes and perspective lines (default true). */
     showGuides?: boolean;
     /** Fit the canvas in the viewport on mount (default true). */
@@ -40,7 +43,7 @@
     agentStrokes?: PaintAgentStrokes;
     class?: string;
   }
-  let { controller, tool = 'brush', showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, class: className = '' }: Props = $props();
+  let { controller, tool = 'brush', fillOptions, showGuides = true, fitOnMount = true, onerror, presence, proposals, agentStrokes, class: className = '' }: Props = $props();
   let agentLines = $state.raw<PaintAgentStrokesState>({ strokes: [] });
   $effect(() => {
     const store = agentStrokes;
@@ -71,6 +74,7 @@
   );
   $effect(() => {
     gesture.tool = tool;
+    if (fillOptions) gesture.fillOptions = fillOptions;
   });
   const doc = $derived(snap.document.canvas);
 

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

@@ -1,8 +1,10 @@
-import { type PaintEditorController, type PaintPresence, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type PaintEditorController, type FillRegionOptions, type PaintPresence, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
 interface Props {
     controller: PaintEditorController;
     /** The active tool (default brush). */
     tool?: PaintTool;
+    /** Options for the Fill tool (`tool === 'fill'`). */
+    fillOptions?: Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
     /** Draw the symmetry axes and perspective lines (default true). */
     showGuides?: boolean;
     /** Fit the canvas in the viewport on mount (default true). */

package/dist/paint-editor/PaintEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PaintPresence, documentToScreen, screenToDocument, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
+  import { PaintPresence, documentToScreen, screenToDocument, type FillRegionOptions, type PaintEditorController, type PaintProposals, type PaintAgentStrokes, type PaintTool } from '@pixerate/editor/paint-editor';
   import type { AgentPlayback, PlaybackPoint, PlaybackRect, PlaybackRef } from '@pixerate/editor/tools';
   import { createPlaybackSurface, getAgentPlayback } from '../playback/playback.svelte.js';
   import PresenceLayer from '../playback/PresenceLayer.svelte';
@@ -105,6 +105,7 @@
     return c && box ? { x: c.x - box.left, y: c.y - box.top } : p;
   };
   let tool = $state<PaintTool>('brush');
+  let fillOptions = $state<Omit<FillRegionOptions, 'x' | 'y' | 'points'>>({ reference: 'all', tolerance: 32, closeGap: 4, expand: 1, antialias: true });
   let tab = $state<'color' | 'wet' | 'paper' | 'layers' | 'effects'>('color');
   const effects = paintEffectsProvider(() => controller);
   const tabs = $derived(effects.current ? (['color', 'wet', 'paper', 'layers', 'effects'] as const) : (['color', 'wet', 'paper', 'layers'] as const));
@@ -116,12 +117,12 @@
   {#if playing}
     <PresenceLayer presence={agentPresence} viewport={docToRoot} />
   {/if}
-  <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fileName} />
+  <PaintToolbar {controller} {tool} ontoolchange={(t) => (tool = t)} {fillOptions} onfilloptionschange={(f) => (fillOptions = f)} {fileName} />
   <div class="flex min-h-0 flex-1 gap-2">
     <BrushPanel {controller} class="w-60 shrink-0 overflow-y-auto pr-1" />
     <div class="flex min-w-0 flex-1 flex-col">
       <!-- With playback the editor draws the cursor (over the panels too), so the canvas doesn't. -->
-      <PaintCanvas {controller} {tool} presence={playing ? undefined : presence} {proposals} {agentStrokes} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
+      <PaintCanvas {controller} {tool} {fillOptions} presence={playing ? undefined : presence} {proposals} {agentStrokes} onerror={(e) => (error = e)} class="flex-1 rounded-lg" />
       {#if error}<p role="alert" class="mt-1 text-[11px] text-rose-400">{error}</p>{/if}
     </div>
     <div class="flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1">

package/dist/paint-editor/PaintToolbar.svelte

@@ -1,18 +1,33 @@
 <script lang="ts">
-  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
+  import { PAINT_TOOLS, SYMMETRY_MODES, decodeImageBlob, downloadBytes, quickStencil, timeLapseZip, type FillRegionOptions, type PaintEditorController, type PaintTool, type SymmetryMode } from '@pixerate/editor/paint-editor';
   import { attempt, button, chip, paintEditorState } from './paintEditorRune.svelte.js';
 
+  type FillToolbarOptions = Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
+
   interface Props {
     controller: PaintEditorController;
     tool: PaintTool;
     ontoolchange: (tool: PaintTool) => void;
+    fillOptions?: FillToolbarOptions;
+    onfilloptionschange?: (options: FillToolbarOptions) => void;
     /** Base name of saved and exported files (default `painting`). */
     fileName?: string;
     class?: string;
   }
-  let { controller, tool, ontoolchange, fileName = 'painting', class: className = '' }: Props = $props();
+  let { controller, tool, ontoolchange, fillOptions: controlledFill, onfilloptionschange, fileName = 'painting', class: className = '' }: Props = $props();
   const editor = paintEditorState(() => controller);
   const snap = $derived(editor.current);
+  let localFill = $state<FillToolbarOptions>({ reference: 'all', tolerance: 32, closeGap: 4, expand: 1, antialias: true });
+  const fill = $derived(controlledFill ?? localFill);
+  const updateFill = (patch: Partial<FillToolbarOptions>) => {
+    const next = { ...fill, ...patch };
+    localFill = next;
+    onfilloptionschange?.(next);
+  };
+  const layers = $derived.by(() => {
+    void snap;
+    return controller.listLayers().filter((l) => l.type === 'pixel');
+  });
   const symmetry = $derived(snap.guides.symmetry);
   const perspective = $derived(snap.guides.perspective);
   const tracing = $derived(snap.guides.tracing);
@@ -63,6 +78,33 @@
   {#each PAINT_TOOLS as t (t.id)}
     <button type="button" aria-pressed={tool === t.id} title={`${t.label} (${t.key.toUpperCase()})`} class={chip(tool === t.id)} onclick={() => ontoolchange(t.id)}>{t.label}</button>
   {/each}
+  {#if tool === 'fill'}
+    <div class="flex items-center gap-1.5 rounded border border-slate-700/80 bg-slate-900/60 px-2 py-0.5 text-[11px] text-slate-300" data-testid="paint-fill-options">
+      <label class="flex items-center gap-1">
+        <span>Ref</span>
+        <select aria-label="Fill reference" class="rounded bg-slate-800 px-1 py-0.5 text-[11px]" value={fill.reference ?? 'all'} onchange={(e) => updateFill({ reference: e.currentTarget.value })}>
+          <option value="all">All layers</option>
+          <option value="layer">Active layer</option>
+          {#each layers as l (l.id)}
+            <option value={l.id}>{l.name}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Tol</span>
+        <input type="number" aria-label="Fill tolerance" min="0" max="255" value={fill.tolerance ?? 32} oninput={(e) => updateFill({ tolerance: Math.max(0, Math.min(255, Number(e.currentTarget.value) || 0)) })} class="w-11 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Gap</span>
+        <input type="number" aria-label="Close gap" min="0" max="32" value={fill.closeGap ?? 4} oninput={(e) => updateFill({ closeGap: Math.max(0, Math.min(32, Number(e.currentTarget.value) || 0)) })} class="w-10 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <label class="flex items-center gap-1">
+        <span>Expand</span>
+        <input type="number" aria-label="Expand fill" min="-16" max="16" value={fill.expand ?? 1} oninput={(e) => updateFill({ expand: Math.max(-16, Math.min(16, Number(e.currentTarget.value) || 0)) })} class="w-10 rounded bg-slate-800 px-1 py-0.5 text-[11px]" />
+      </label>
+      <button type="button" class={chip(Boolean(fill.wet))} aria-pressed={Boolean(fill.wet)} onclick={() => updateFill({ wet: !fill.wet })}>Wet</button>
+    </div>
+  {/if}
   <span class="mx-1 h-4 w-px bg-slate-700"></span>
   <button type="button" class={button} disabled={!snap.canUndo} title={snap.undoLabel ? `Undo ${snap.undoLabel}` : 'Undo'} onclick={() => controller.undo()}>Undo</button>
   <button type="button" class={button} disabled={!snap.canRedo} title={snap.redoLabel ? `Redo ${snap.redoLabel}` : 'Redo'} onclick={() => controller.redo()}>Redo</button>

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

@@ -1,8 +1,11 @@
-import { type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+import { type FillRegionOptions, type PaintEditorController, type PaintTool } from '@pixerate/editor/paint-editor';
+type FillToolbarOptions = Omit<FillRegionOptions, 'x' | 'y' | 'points'>;
 interface Props {
     controller: PaintEditorController;
     tool: PaintTool;
     ontoolchange: (tool: PaintTool) => void;
+    fillOptions?: FillToolbarOptions;
+    onfilloptionschange?: (options: FillToolbarOptions) => void;
     /** Base name of saved and exported files (default `painting`). */
     fileName?: string;
     class?: string;

package/package.json

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