@pixerate/editor-svelte 0.133.3 → 0.135.0

package/dist/image-editor/AdjustmentLayersPanel.svelte

@@ -101,7 +101,7 @@
   }
 
   function addLayer() {
-    selectedId = controller.addAdjustmentLayer(newKind);
+    selectedId = controller.addAdjustmentLayer({ kind: newKind, useSelection: true });
     channel = 'master';
     range = -1;
   }

package/dist/image-editor/ImageEditor.svelte

@@ -954,6 +954,7 @@
             onOptionsChange={(next) => (selectionOptions = next)}
             selection={editor.state.selection ?? null}
             quickMask={Boolean(editor.state.quickMask)}
+            selectionDisplay={editor.state.selectionDisplay}
           />
           {#if selectionError}
             <p role="alert" class="text-destructive">{selectionError}</p>

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -23,6 +23,7 @@
     measureCanvasViewport,
     watchCanvasViewport,
     startMarchingAnts,
+    handleSelectionShortcut,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -594,6 +595,28 @@
     if (paintGesture.error) report('paint', paintGesture.error);
   }
 
+  $effect(() => {
+    if (mode !== 'select' || typeof window === 'undefined') return;
+    const gesture = selectionGesture;
+    // The polygonal lasso: Enter closes it, Escape cancels, Backspace removes the last corner.
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (target?.closest?.('input, textarea, select, [contenteditable="true"]')) return;
+      // Leave Copy to the page while text on it is selected.
+      if (window.getSelection?.()?.toString()) return;
+      if (handleSelectionShortcut(editor.controller, e, (message) => report('select', message))) {
+        e.preventDefault();
+        return;
+      }
+      if (gesture.key(e.key)) {
+        e.preventDefault();
+        selectionDraft = gesture.draftPath;
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  });
+
   $effect(() => {
     if (mode !== 'paint' || typeof window === 'undefined') return;
     const c = editor.controller;
@@ -663,7 +686,10 @@
     if (mode === 'select') {
       const gesture = selectionGesture;
       const imgPt = canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false);
-      void gesture.begin(imgPt, e).then(() => report('select', gesture.error));
+      void gesture.begin(imgPt, e).then(() => {
+        report('select', gesture.error);
+        selectionDraft = gesture.draftPath;
+      });
       return;
     }
 
@@ -771,7 +797,7 @@
 
     if (mode === 'select') {
       const gesture = selectionGesture;
-      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false))) {
+      if (gesture.active && gesture.move(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), e)) {
         selectionDraft = gesture.draftPath;
         renderCanvas();
       }
@@ -924,7 +950,8 @@
       const gesture = selectionGesture;
       if (gesture.active) {
         gesture.end(canvasToImagePoint(canvasPt, editor.state, view.width, view.height, false), e);
-        selectionDraft = null;
+        // A polygonal lasso stays open between clicks.
+        selectionDraft = gesture.draftPath;
         renderCanvas();
       }
       return;

package/dist/image-editor/ImageProviderEffectsPanel.svelte

@@ -162,7 +162,7 @@
     </div>
     {#if browse === 'filter'}
       {@const id = layer.id}
-      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id)))} />
+      <EffectsBrowser {provider} uses={['filter']} title="Filters" onpick={(e) => ((browse = null), run(() => controller.applyEffectFilter(id, e.id, { useSelection: true })))} />
     {/if}
   {/if}
   {#if layer && all.some((f) => f.kind === 'effect')}

package/dist/image-editor/LayersPanel.svelte

@@ -8,6 +8,8 @@
     downloadPsd,
     dropPlacement,
     dropZone,
+    maskThumbnailClick,
+    layerThumbnailClick,
     layerBadge,
     layerEffectsBadge,
     layerHasThumbnail,
@@ -333,6 +335,13 @@
             <canvas
               use:paint={thumb(layer)}
               aria-label={`${row.label} pixels`}
+              data-testid="layer-thumbnail"
+              onclick={(e) => {
+                if (e.ctrlKey || e.metaKey) {
+                  e.stopPropagation();
+                  attempt(() => layerThumbnailClick(controller, layer, e));
+                }
+              }}
               style="width: {thumbnailSize}px; height: {thumbnailSize}px"
               class={thumbClass(row.active && snapshot.activeTarget === 'pixels' && Boolean(layer.mask))}
             ></canvas>
@@ -371,8 +380,7 @@
             class={thumbClass(row.active && snapshot.activeTarget === 'mask')}
             onclick={(e) => {
               e.stopPropagation();
-              if (e.shiftKey) attempt(() => controller.setLayerMaskProps(layer.id, { enabled: layer.mask!.enabled === false }));
-              else attempt(() => controller.setActiveLayer(layer.id, 'mask'));
+              attempt(() => maskThumbnailClick(controller, layer, e));
             }}
           ></canvas>
         {/if}

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -3,12 +3,16 @@
   import ImageRange from './controls/ImageRange.svelte';
   import ImageSelect from './controls/ImageSelect.svelte';
   import type {
+    ColorRangePreset,
     ImageEditorController,
+    SelectionDisplay,
     SelectionMask,
     SelectionModifyOp,
     SelectionToolOptions,
   } from '@pixerate/editor/image-editor';
   import {
+    COLOR_RANGE_PRESETS,
+    COLOR_RANGE_PRESET_LABELS,
     SELECTION_MODES,
     SELECTION_MODE_LABELS,
     SELECTION_TOOLS,
@@ -24,10 +28,12 @@
     selection?: SelectionMask | null;
     /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
     quickMask?: boolean;
+    /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
+    selectionDisplay?: SelectionDisplay;
     class?: string;
   }
 
-  let { controller, options, onOptionsChange, selection, quickMask, class: className = '' }: Props = $props();
+  let { controller, options, onOptionsChange, selection, quickMask, selectionDisplay, class: className = '' }: Props = $props();
 
   let tick = $state(0);
   $effect(() => {
@@ -38,10 +44,60 @@
     void tick;
     return selection === undefined ? controller.getSelection() : selection;
   });
-  const qm = $derived.by(() => {
+  const display = $derived.by((): SelectionDisplay => {
     void tick;
-    return quickMask ?? Boolean(controller.getState().quickMask);
+    return selectionDisplay ?? (quickMask === undefined ? controller.getSelectionDisplay() : quickMask ? 'quickMask' : 'ants');
   });
+  const DISPLAYS: { id: SelectionDisplay; label: string }[] = [
+    { id: 'ants', label: 'Ants' },
+    { id: 'quickMask', label: 'Quick Mask' },
+    { id: 'none', label: 'Hidden' },
+  ];
+  const numberInput = 'w-14 bg-background border border-border rounded px-1 py-0.5 text-foreground';
+
+  // Color Range presets.
+  let preset = $state<ColorRangePreset>('reds');
+  let rangeStatus = $state<string | null>(null);
+  const canReselect = $derived.by(() => {
+    void tick;
+    void sel;
+    return controller.canReselect();
+  });
+  let colorStatus = $state<string | null>(null);
+  let strokeWidth = $state(4);
+  let strokeLocation = $state<'inside' | 'center' | 'outside'>('outside');
+  function edit(fn: () => unknown) {
+    colorStatus = null;
+    try {
+      fn();
+    } catch (err) {
+      colorStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
+  async function runColor(op: 'grow' | 'similar') {
+    colorStatus = null;
+    const opts = { tolerance: options.tolerance, sampleMerged: options.sampleMerged, sample: options.sample };
+    try {
+      await (op === 'grow' ? controller.growSelection(opts) : controller.selectSimilar(opts));
+    } catch (err) {
+      colorStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
+  async function applyPreset() {
+    rangeStatus = null;
+    try {
+      await controller.selectColorRangePreset(preset, {
+        mode: options.mode,
+        feather: options.feather ?? 0,
+        invert: options.rangeInvert ?? false,
+        falloff: options.fuzziness ?? 20,
+        sampleMerged: options.sampleMerged,
+        sample: options.sample,
+      });
+    } catch (err) {
+      rangeStatus = err instanceof Error ? err.message : String(err);
+    }
+  }
 
   let radius = $state(2);
 
@@ -69,8 +125,8 @@
   }
 
   const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
-    { op: 'grow', label: 'Grow' },
-    { op: 'shrink', label: 'Shrink' },
+    { op: 'expand', label: 'Expand' },
+    { op: 'contract', label: 'Contract' },
     { op: 'feather', label: 'Feather' },
     { op: 'border', label: 'Border' },
     { op: 'smooth', label: 'Smooth' },
@@ -114,6 +170,18 @@
         <ImageCheckbox label="Contiguous" checked={options.contiguous} onchange={(on) => set({ contiguous: on })} />
         Contiguous
       </label>
+      <label class="flex items-center gap-2 text-foreground">
+        Distance
+        <ImageSelect
+          label="Colour distance"
+          value={options.distance}
+          options={[
+            { value: 'rgb', label: 'RGB' },
+            { value: 'perceptual', label: 'Perceptual' },
+          ]}
+          onchange={(v) => set({ distance: v as 'rgb' | 'perceptual' })}
+        />
+      </label>
       <label class="flex items-center gap-2 text-foreground">
         <ImageCheckbox label="Sample adjusted image" checked={options.sampleMerged} onchange={(on) => set({ sampleMerged: on })} />
         Sample adjusted image
@@ -132,6 +200,64 @@
       </label>
     </div>
   {/if}
+  {#if options.tool === 'polygon'}
+    <p class="text-muted-foreground">Click to add corners (Shift for 45°), drag for a free-hand stretch; double-click, Enter or a click on the first corner closes it, Backspace removes a corner, Escape cancels.</p>
+  {/if}
+  {#if options.tool === 'range'}
+    <div data-testid="color-range-options" class="flex flex-col gap-2">
+      <p class="text-muted-foreground">Click a colour to select it; Shift-click adds a colour, Alt-click removes one.</p>
+      <label class="flex flex-col gap-1">
+        <span class="flex justify-between text-muted-foreground">
+          <span>Fuzziness</span>
+          <span class="font-mono">{options.fuzziness ?? 40}</span>
+        </span>
+        <ImageRange label="Fuzziness" min={0} max={200} step={1} value={options.fuzziness ?? 40} oninput={(v) => set({ fuzziness: v })} />
+      </label>
+      <label class="flex items-center gap-1 text-muted-foreground">
+        Localized radius
+        <input
+          type="number"
+          min="0"
+          step="1"
+          aria-label="Localized radius"
+          value={options.localized ?? 0}
+          oninput={(e) => set({ localized: Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0) })}
+          class={numberInput}
+        />
+        px
+      </label>
+      <label class="flex items-center gap-2 text-foreground">
+        <ImageCheckbox label="Invert" checked={options.rangeInvert ?? false} onchange={(on) => set({ rangeInvert: on })} />
+        Invert
+      </label>
+      <div class="flex items-center gap-1">
+        <ImageSelect
+          label="Color Range preset"
+          value={preset}
+          options={COLOR_RANGE_PRESETS.map((p) => ({ value: p, label: COLOR_RANGE_PRESET_LABELS[p] }))}
+          onchange={(v) => (preset = v as ColorRangePreset)}
+        />
+        <button type="button" class={btn(false)} onclick={() => void applyPreset()}>Select</button>
+      </div>
+      {#if rangeStatus}
+        <p role="status" class="text-muted-foreground">{rangeStatus}</p>
+      {/if}
+    </div>
+  {/if}
+  <label class="flex items-center gap-1 text-muted-foreground">
+    Feather
+    <input
+      type="number"
+      min="0"
+      max="1000"
+      step="0.5"
+      aria-label="Feather"
+      value={options.feather ?? 0}
+      oninput={(e) => set({ feather: Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0) })}
+      class={numberInput}
+    />
+    px
+  </label>
   {#if canSegment}
     <form
       data-testid="select-subject"
@@ -167,7 +293,15 @@
     <button type="button" class={btn(false)} onclick={() => controller.selectAll()}>Select All</button>
     <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.deselect()}>Deselect</button>
     <button type="button" class={btn(false)} onclick={() => controller.invertSelection()}>Inverse</button>
-    <button type="button" aria-pressed={qm} class={btn(qm)} onclick={() => controller.setQuickMask(!qm)}>Quick Mask</button>
+    <button type="button" class={btn(false)} disabled={!canReselect} onclick={() => controller.reselect()}>Reselect</button>
+    <button type="button" class={btn(false)} disabled={!sel} title="Add connected pixels of a selected colour (wand tolerance)" onclick={() => void runColor('grow')}>Grow</button>
+    <button type="button" class={btn(false)} disabled={!sel} title="Add every pixel of a selected colour (wand tolerance)" onclick={() => void runColor('similar')}>Similar</button>
+  </div>
+  <div role="group" aria-label="Show selection" class="flex flex-wrap items-center gap-1">
+    <span class="text-muted-foreground">Show</span>
+    {#each DISPLAYS as d (d.id)}
+      <button type="button" aria-pressed={display === d.id} class={btn(display === d.id)} onclick={() => controller.setSelectionDisplay(d.id)}>{d.label}</button>
+    {/each}
   </div>
   <div class="flex flex-wrap items-center gap-1">
     <label class="flex items-center gap-1 text-muted-foreground">
@@ -180,12 +314,53 @@
         aria-label="Modify radius"
         value={radius}
         oninput={(e) => (radius = Math.max(0, Number((e.currentTarget as HTMLInputElement).value) || 0))}
-        class="w-14 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+        class={numberInput}
       />
     </label>
     {#each MODIFY_OPS as m (m.op)}
       <button type="button" class={btn(false)} disabled={!sel} onclick={() => controller.modifySelection(m.op, radius)}>{m.label}</button>
     {/each}
   </div>
+  <div role="group" aria-label="Edit selection" class="flex flex-wrap items-center gap-1">
+    <label class="flex items-center gap-1 text-muted-foreground">
+      Stroke
+      <input
+        type="number"
+        min="1"
+        max="250"
+        step="1"
+        aria-label="Stroke width"
+        value={strokeWidth}
+        oninput={(e) => (strokeWidth = Math.min(250, Math.max(1, Number((e.currentTarget as HTMLInputElement).value) || 1)))}
+        class={numberInput}
+      />
+      px
+    </label>
+    <ImageSelect
+      label="Stroke location"
+      value={strokeLocation}
+      options={[
+        { value: 'outside', label: 'Outside' },
+        { value: 'center', label: 'Center' },
+        { value: 'inside', label: 'Inside' },
+      ]}
+      onchange={(v) => (strokeLocation = v as 'inside' | 'center' | 'outside')}
+    />
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.strokeSelection({ width: strokeWidth, location: strokeLocation }))}>Stroke</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.cropToSelection())}>Crop to Selection</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.contentAwareFill({ output: 'new-layer' }))}>Content-Aware Fill</button>
+  </div>
+  <div role="group" aria-label="Clipboard" class="flex flex-wrap gap-1">
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.copyPixels())}>Copy</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.copyPixels({ merged: true }))}>Copy Merged</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.cutPixels())}>Cut</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.pastePixels('new-layer'))}>Paste</button>
+    <button type="button" class={btn(false)} onclick={() => edit(() => controller.pastePixels('in-place'))}>Paste in Place</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.pastePixels('into'))}>Paste Into</button>
+    <button type="button" class={btn(false)} disabled={!sel} onclick={() => edit(() => controller.pastePixels('outside'))}>Paste Outside</button>
+  </div>
+  {#if colorStatus}
+    <p role="status" class="text-muted-foreground">{colorStatus}</p>
+  {/if}
   <p data-testid="selection-status" class="text-muted-foreground">{describeSelection(sel)}</p>
 </div>

package/dist/image-editor/SelectionOptionsBar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ImageEditorController, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
+import type { ImageEditorController, SelectionDisplay, SelectionMask, SelectionToolOptions } from '@pixerate/editor/image-editor';
 interface Props {
     controller: ImageEditorController;
     options: SelectionToolOptions;
@@ -7,6 +7,8 @@ interface Props {
     selection?: SelectionMask | null;
     /** The Quick Mask view flag (`state.quickMask`). Omit to follow the controller. */
     quickMask?: boolean;
+    /** How the canvas shows the selection (`state.selectionDisplay`); wins over `quickMask`. */
+    selectionDisplay?: SelectionDisplay;
     class?: string;
 }
 declare const SelectionOptionsBar: import("svelte").Component<Props, {}, "">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.133.3",
+  "version": "0.135.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.183.0"
+    "@pixerate/editor": "0.185.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",