@pixerate/editor-svelte 0.158.0 → 0.160.0

package/dist/image-editor/EdgeColorPanel.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+  import { untrack } from 'svelte';
+
+  /**
+   * Edge Colour: decontamination, despill and the live edge cast of a layer's soft edge, applied
+   * when compositing (nothing is baked), as the `set_edge_*` tools set them. A slider drag is one
+   * undo step.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The layer to edit (a pixel, shape, type or smart object layer). */
+    layer: ImageLayer;
+    class?: string;
+  }
+
+  let { controller, layer, class: className = '' }: Props = $props();
+
+  const SLIDERS = [
+    { key: 'decontaminate', label: 'Decontaminate', hint: 'Unmix the old background from a soft-edged mask' },
+    { key: 'despill', label: 'Despill', hint: "Take out the old background's hue at the edge" },
+    { key: 'ambient', label: 'Cast', hint: 'Tint the edge with what is behind the layer, live' },
+  ] as const;
+
+  let tick = $state(0);
+  $effect(() => {
+    const c = controller;
+    return untrack(() => c.subscribe(() => tick++));
+  });
+  let error = $state<string | null>(null);
+  let commitNext = true;
+  const info = $derived.by(() => {
+    void tick;
+    return controller.getEdgeColor(layer.id);
+  });
+  const fixed = $derived(info.ambientSource !== 'auto');
+
+  function set(change: Parameters<ImageEditorController['setEdgeColor']>[1]) {
+    error = null;
+    try {
+      controller.setEdgeColor(layer.id, change, commitNext);
+      commitNext = false;
+    } catch (err) {
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+  const startDrag = () => (commitNext = true);
+</script>
+
+<details class="text-xs {className}" data-testid="edge-color-panel" open={Boolean(info.decontaminate || info.despill || info.ambient) || undefined}>
+  <summary class="cursor-pointer text-muted-foreground">Edge Colour</summary>
+  <div class="flex flex-col gap-1.5 pt-1">
+    {#each SLIDERS as s (s.key)}
+      <label class="flex flex-col gap-0.5" title={s.hint}>
+        <span class="flex justify-between text-muted-foreground">
+          <span>{s.label}</span>
+          <span class="font-mono">{info[s.key]}%</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="100"
+          aria-label="Edge {s.label.toLowerCase()}"
+          value={info[s.key]}
+          onpointerdown={startDrag}
+          onpointerup={startDrag}
+          onkeydown={startDrag}
+          oninput={(e) => set({ [s.key]: Number((e.currentTarget as HTMLInputElement).value) })}
+          class="accent-primary"
+        />
+      </label>
+    {/each}
+    <label class="flex items-center gap-1.5 text-foreground">
+      <input
+        type="checkbox"
+        aria-label="Fixed cast colour"
+        checked={fixed}
+        onchange={(e) => {
+          commitNext = true;
+          set({ ambientColor: (e.currentTarget as HTMLInputElement).checked ? '#808080' : 'auto' });
+        }}
+        class="accent-primary"
+      />
+      Fixed cast colour
+      {#if fixed}
+        <input
+          type="color"
+          aria-label="Cast colour"
+          value={info.ambientSource}
+          onchange={(e) => {
+            commitNext = true;
+            set({ ambientColor: (e.currentTarget as HTMLInputElement).value });
+          }}
+          class="h-5 w-8 bg-background border border-border rounded"
+        />
+      {/if}
+    </label>
+    {#if error}
+      <p role="alert" class="text-destructive">{error}</p>
+    {/if}
+  </div>
+</details>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, ImageLayer } from '@pixerate/editor/image-editor';
+/**
+ * Edge Colour: decontamination, despill and the live edge cast of a layer's soft edge, applied
+ * when compositing (nothing is baked), as the `set_edge_*` tools set them. A slider drag is one
+ * undo step.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The layer to edit (a pixel, shape, type or smart object layer). */
+    layer: ImageLayer;
+    class?: string;
+}
+declare const EdgeColorPanel: import("svelte").Component<Props, {}, "">;
+type EdgeColorPanel = ReturnType<typeof EdgeColorPanel>;
+export default EdgeColorPanel;

package/dist/image-editor/LayersPanel.svelte

@@ -23,6 +23,7 @@
   } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
   import LayerEffectsPanel from './LayerEffectsPanel.svelte';
+  import EdgeColorPanel from './EdgeColorPanel.svelte';
 
   interface Props {
     controller: ImageEditorController;
@@ -283,6 +284,12 @@
     </div>
   {/if}
 
+  {#if snapshot.active && (snapshot.active.type === 'pixel' || snapshot.active.type === 'shape' || snapshot.active.type === 'type' || snapshot.active.type === 'smart')}
+    {#key snapshot.active.id}
+      <EdgeColorPanel {controller} layer={snapshot.active} class="border-t border-border pt-1.5" />
+    {/key}
+  {/if}
+
   {#if effects && snapshot.active && snapshot.active.type !== 'adjustment'}
     <LayerEffectsPanel {controller} class="border-t border-border pt-1.5" />
   {/if}

package/dist/image-editor/RefineEdgePanel.svelte

@@ -52,6 +52,7 @@
   let output = $state<RefineOutput>('selection');
   let decontaminate = $state(0);
   let objectAware = $state(false);
+  let onlyUncertain = $state(false);
   const canObject = $derived.by(() => {
     void tick;
     return Boolean(controller.segmentationProvider);
@@ -67,9 +68,13 @@
     busy = true;
     error = null;
     try {
+      // Only where the edge has no image edge under it (the selection's uncertain regions).
+      const regions = onlyUncertain ? controller.selectionUncertainty().regions.map((r) => r.bounds) : undefined;
+      if (regions && !regions.length) throw new Error("No uncertain areas: the selection's edge already follows edges in the image. Untick Only uncertain areas to refine everywhere.");
       await controller.refineSelectionTo({ ...params }, output, {
         decontaminate: toLayer ? decontaminate : 0,
         refineMode: canObject && objectAware ? 'object' : 'color',
+        ...(regions ? { regions } : {}),
       });
     } catch (err) {
       error = err instanceof Error ? err.message : String(err);
@@ -115,6 +120,10 @@
     />
     Smart Radius
   </label>
+  <label class="flex items-center gap-2 text-foreground" title="Refine only where the edge has no image edge under it">
+    <input type="checkbox" aria-label="Only uncertain areas" checked={onlyUncertain} onchange={(e) => (onlyUncertain = (e.currentTarget as HTMLInputElement).checked)} />
+    Only uncertain areas
+  </label>
   {#if canObject}
     <label class="flex items-center gap-2 text-foreground">
       <input type="checkbox" aria-label="Object aware" checked={objectAware} onchange={(e) => (objectAware = (e.currentTarget as HTMLInputElement).checked)} />

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

@@ -16,6 +16,7 @@ import type ChannelsPanelComponent from "./ChannelsPanel.svelte";
 import type LayersPanelComponent from "./LayersPanel.svelte";
 import type ColorProfilePanelComponent from "./ColorProfilePanel.svelte";
 import type LayerEffectsPanelComponent from "./LayerEffectsPanel.svelte";
+import type EdgeColorPanelComponent from "./EdgeColorPanel.svelte";
 import type BrushOptionsBarComponent from "./BrushOptionsBar.svelte";
 import type FreeTransformOptionsBarComponent from "./FreeTransformOptionsBar.svelte";
 import type ShapeOptionsBarComponent from "./ShapeOptionsBar.svelte";
@@ -44,6 +45,7 @@ export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
+export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';
@@ -74,6 +76,7 @@ export type ChannelsPanelProps = ComponentProps<typeof ChannelsPanelComponent>;
 export type LayersPanelProps = ComponentProps<typeof LayersPanelComponent>;
 export type ColorProfilePanelProps = ComponentProps<typeof ColorProfilePanelComponent>;
 export type LayerEffectsPanelProps = ComponentProps<typeof LayerEffectsPanelComponent>;
+export type EdgeColorPanelProps = ComponentProps<typeof EdgeColorPanelComponent>;
 export type BrushOptionsBarProps = ComponentProps<typeof BrushOptionsBarComponent>;
 export type FreeTransformOptionsBarProps = ComponentProps<typeof FreeTransformOptionsBarComponent>;
 export type ShapeOptionsBarProps = ComponentProps<typeof ShapeOptionsBarComponent>;

package/dist/image-editor/index.js

@@ -18,6 +18,7 @@ export { default as ChannelsPanel } from './ChannelsPanel.svelte';
 export { default as LayersPanel } from './LayersPanel.svelte';
 export { default as ColorProfilePanel } from './ColorProfilePanel.svelte';
 export { default as LayerEffectsPanel } from './LayerEffectsPanel.svelte';
+export { default as EdgeColorPanel } from './EdgeColorPanel.svelte';
 export { default as BrushOptionsBar } from './BrushOptionsBar.svelte';
 export { default as FreeTransformOptionsBar } from './FreeTransformOptionsBar.svelte';
 export { default as ShapeOptionsBar } from './ShapeOptionsBar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.158.0",
+  "version": "0.160.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.214.0"
+    "@pixerate/editor": "0.216.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",