@pixerate/editor-svelte 0.159.0 → 0.161.0

package/dist/image-editor/RefineEdgePanel.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { imageRangeClass, imageSectionTitleClass } from './styles.js';
   import MaskEdgeCheck from './MaskEdgeCheck.svelte';
+  import SelectionChangeCheck from './SelectionChangeCheck.svelte';
   import type {
     AdjustmentKind,
     AdjustmentLayer,
@@ -52,6 +53,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 +69,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 +121,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)} />
@@ -159,6 +169,7 @@
     <p role="alert" class="text-destructive">{error}</p>
   {/if}
   <MaskEdgeCheck {controller} selection={sel} />
+  <SelectionChangeCheck {controller} selection={sel} />
 
   <span class="font-semibold text-foreground uppercase tracking-wider text-[11px] mt-2">Layer Mask</span>
   <div class="flex gap-1 items-center">

package/dist/image-editor/SelectionChangeCheck.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import type { ImageEditorController, SelectionDiff, SelectionMask } from '@pixerate/editor/image-editor';
+
+  /**
+   * Show Last Change: what the last step did to the selection, as the `compare_selections` tool
+   * reports it, with the added area tinted green and the removed red on the canvas until the
+   * selection changes again.
+   */
+  interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): the summary clears when it changes. */
+    selection?: SelectionMask | null;
+    class?: string;
+  }
+
+  let { controller, selection, class: className = '' }: Props = $props();
+
+  const button =
+    'px-2 py-1 rounded-md border border-border bg-background text-[11px] text-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-40';
+  const sel = $derived(selection === undefined ? controller.getSelection() : selection);
+  let result = $state<{ diff: SelectionDiff; for: SelectionMask | null } | null>(null);
+  let error = $state<string | null>(null);
+  const diff = $derived(result && result.for === sel ? result.diff : null);
+
+  function show() {
+    error = null;
+    try {
+      result = { diff: controller.compareSelections(), for: sel };
+    } catch (err) {
+      result = null;
+      error = err instanceof Error ? err.message : String(err);
+    }
+  }
+</script>
+
+<div data-testid="selection-change-check" class="flex flex-col gap-1 text-xs {className}">
+  <button type="button" class="{button} self-start" onclick={show}>Show Last Change</button>
+  {#if diff}
+    <p data-testid="selection-change-summary" class="text-foreground">
+      {#if diff.identical}
+        The last step did not change the selection.
+      {:else}
+        <span class="text-green-600">+{diff.added.area} px</span> <span class="text-destructive">−{diff.removed.area} px</span>, overlap {Math.round(diff.iou * 100)}%
+      {/if}
+    </p>
+  {/if}
+  {#if error}
+    <p role="alert" class="text-destructive">{error}</p>
+  {/if}
+</div>

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

@@ -0,0 +1,15 @@
+import type { ImageEditorController, SelectionMask } from '@pixerate/editor/image-editor';
+/**
+ * Show Last Change: what the last step did to the selection, as the `compare_selections` tool
+ * reports it, with the added area tinted green and the removed red on the canvas until the
+ * selection changes again.
+ */
+interface Props {
+    controller: ImageEditorController;
+    /** The current selection (`state.selection`): the summary clears when it changes. */
+    selection?: SelectionMask | null;
+    class?: string;
+}
+declare const SelectionChangeCheck: import("svelte").Component<Props, {}, "">;
+type SelectionChangeCheck = ReturnType<typeof SelectionChangeCheck>;
+export default SelectionChangeCheck;

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

@@ -9,6 +9,7 @@ import type ControlSliderComponent from "./ControlSlider.svelte";
 import type SelectionOptionsBarComponent from "./SelectionOptionsBar.svelte";
 import type RefineEdgePanelComponent from "./RefineEdgePanel.svelte";
 import type MaskEdgeCheckComponent from "./MaskEdgeCheck.svelte";
+import type SelectionChangeCheckComponent from "./SelectionChangeCheck.svelte";
 import type PathsPanelComponent from "./PathsPanel.svelte";
 import type SelectAndMaskWorkspaceComponent from "./SelectAndMaskWorkspace.svelte";
 import type ContentAwareFillWorkspaceComponent from "./ContentAwareFillWorkspace.svelte";
@@ -38,6 +39,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
+export { default as SelectionChangeCheck } from './SelectionChangeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';
@@ -69,6 +71,7 @@ export type ControlSliderProps = ComponentProps<typeof ControlSliderComponent>;
 export type SelectionOptionsBarProps = ComponentProps<typeof SelectionOptionsBarComponent>;
 export type RefineEdgePanelProps = ComponentProps<typeof RefineEdgePanelComponent>;
 export type MaskEdgeCheckProps = ComponentProps<typeof MaskEdgeCheckComponent>;
+export type SelectionChangeCheckProps = ComponentProps<typeof SelectionChangeCheckComponent>;
 export type PathsPanelProps = ComponentProps<typeof PathsPanelComponent>;
 export type SelectAndMaskWorkspaceProps = ComponentProps<typeof SelectAndMaskWorkspaceComponent>;
 export type ContentAwareFillWorkspaceProps = ComponentProps<typeof ContentAwareFillWorkspaceComponent>;

package/dist/image-editor/index.js

@@ -11,6 +11,7 @@ export { default as ControlSlider } from './ControlSlider.svelte';
 export { default as SelectionOptionsBar } from './SelectionOptionsBar.svelte';
 export { default as RefineEdgePanel } from './RefineEdgePanel.svelte';
 export { default as MaskEdgeCheck } from './MaskEdgeCheck.svelte';
+export { default as SelectionChangeCheck } from './SelectionChangeCheck.svelte';
 export { default as PathsPanel } from './PathsPanel.svelte';
 export { default as SelectAndMaskWorkspace } from './SelectAndMaskWorkspace.svelte';
 export { default as ContentAwareFillWorkspace } from './ContentAwareFillWorkspace.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.159.0",
+  "version": "0.161.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.215.0"
+    "@pixerate/editor": "0.217.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",