@pixerate/editor-svelte 0.131.0 → 0.133.0

package/dist/image-editor/ImageEditorCanvas.svelte

@@ -18,9 +18,11 @@
     FreeTransformTool,
     boxFrameHit,
     quadFrameOverlay,
+    TRANSFORM_ROTATE_HANDLE_OFFSET,
     getViewportProjection,
     measureCanvasViewport,
     watchCanvasViewport,
+    startMarchingAnts,
     ShapeDrawGesture,
     TypeToolGesture,
     DEFAULT_SHAPE_TOOL_OPTIONS,
@@ -371,7 +373,8 @@
     if (!layer || layer.visible === false) return null;
     const corners = c.getLayerFrame(layer.id);
     if (!corners) return null;
-    return quadFrameOverlay(corners, !(layer.locks?.all || layer.locks?.position));
+    const { scale } = getViewportProjection(c.getState(), view.width, view.height, false);
+    return quadFrameOverlay(corners, !(layer.locks?.all || layer.locks?.position), TRANSFORM_ROTATE_HANDLE_OFFSET / (scale || 1));
   }
 
   /**
@@ -499,10 +502,23 @@
     );
   });
 
+  // Marching ants: while a selection shows as ants, step the dash offset and redraw.
+  let antsOffset = 0;
+  const marching = $derived(!!editor.state.selection?.bounds && !editor.state.quickMask);
+  $effect(() => {
+    if (!marching) return;
+    return startMarchingAnts((offset) => {
+      antsOffset = offset;
+      void renderCanvas();
+    });
+  });
+
   async function renderCanvas(overrideAnnotation?: Annotation | null, overrideCrop?: CropBox | null) {
     if (!canvasEl || !containerEl) return;
     const viewport = measureCanvasViewport(containerEl);
     view = { width: viewport.width, height: viewport.height };
+    // The transform overlay's rotate handle sits a fixed distance out on screen.
+    transformTool.setView(getViewportProjection(editor.controller.getState(), view.width, view.height, mode === 'crop').scale);
 
     await editor.controller.render(canvasEl, {
       viewportWidth: viewport.width,
@@ -512,6 +528,7 @@
       fit,
       showCropOverlay: mode === 'crop',
       showSelectionOverlay: true,
+      antsOffset,
       interactive: true,
       draftAnnotation: overrideAnnotation !== undefined ? overrideAnnotation : draftAnnotation,
       draftCrop: overrideCrop !== undefined ? overrideCrop : draftCrop,

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -45,6 +45,29 @@
 
   let radius = $state(2);
 
+  // Select › Subject (only with a segmentation provider).
+  const canSegment = $derived.by(() => {
+    void tick;
+    return Boolean(controller.segmentationProvider);
+  });
+  let subject = $state('');
+  let segmenting = $state(false);
+  let subjectStatus = $state<string | null>(null);
+  async function selectSubject() {
+    const target = subject.trim();
+    if (!target || segmenting) return;
+    segmenting = true;
+    subjectStatus = null;
+    try {
+      const { segments } = await controller.selectSubject(target, { mode: options.mode });
+      subjectStatus = segments.length ? null : `Nothing matching “${target}” was found.`;
+    } catch (err) {
+      subjectStatus = err instanceof Error ? err.message : String(err);
+    } finally {
+      segmenting = false;
+    }
+  }
+
   const MODIFY_OPS: { op: SelectionModifyOp; label: string }[] = [
     { op: 'grow', label: 'Grow' },
     { op: 'shrink', label: 'Shrink' },
@@ -109,6 +132,33 @@
       </label>
     </div>
   {/if}
+  {#if canSegment}
+    <form
+      data-testid="select-subject"
+      class="flex flex-col gap-1"
+      onsubmit={(e) => {
+        e.preventDefault();
+        void selectSubject();
+      }}
+    >
+      <div class="flex gap-1">
+        <input
+          type="text"
+          aria-label="Subject to select"
+          placeholder="Subject, e.g. the dog"
+          bind:value={subject}
+          disabled={segmenting}
+          class="min-w-0 flex-1 bg-background border border-border rounded px-2 py-1 text-foreground"
+        />
+        <button type="submit" class={btn(false)} disabled={segmenting || !subject.trim()} aria-busy={segmenting}>
+          {segmenting ? 'Selecting…' : 'Select Subject'}
+        </button>
+      </div>
+      {#if subjectStatus}
+        <p role="status" class="text-muted-foreground">{subjectStatus}</p>
+      {/if}
+    </form>
+  {/if}
   <label class="flex items-center gap-2 text-foreground">
     <ImageCheckbox label="Anti-alias" checked={options.antiAlias} onchange={(on) => set({ antiAlias: on })} />
     Anti-alias

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.131.0",
+  "version": "0.133.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.178.0"
+    "@pixerate/editor": "0.180.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",