@pixerate/editor 0.218.0 → 0.218.1

package/dist/image-editor/index.js

@@ -1039,6 +1039,44 @@ function selectionOutline(mask, threshold = 128) {
   }
   return Float32Array.from(segs);
 }
+function selectionOutlinePaths(mask, threshold = 128) {
+  const segs = selectionOutline(mask, threshold);
+  const n = segs.length / 4;
+  if (!n) return [];
+  const stride = mask.width + 1;
+  const key2 = (x, y) => y * stride + x;
+  const at = /* @__PURE__ */ new Map();
+  for (let s = 0; s < n; s++) {
+    for (const k of [key2(segs[s * 4], segs[s * 4 + 1]), key2(segs[s * 4 + 2], segs[s * 4 + 3])]) {
+      const list = at.get(k);
+      if (list) list.push(s);
+      else at.set(k, [s]);
+    }
+  }
+  const used = new Uint8Array(n);
+  const paths = [];
+  for (let s0 = 0; s0 < n; s0++) {
+    if (used[s0]) continue;
+    used[s0] = 1;
+    const pts = [segs[s0 * 4], segs[s0 * 4 + 1], segs[s0 * 4 + 2], segs[s0 * 4 + 3]];
+    for (const forward of [true, false]) {
+      for (; ; ) {
+        const x = forward ? pts[pts.length - 2] : pts[0];
+        const y = forward ? pts[pts.length - 1] : pts[1];
+        const next = at.get(key2(x, y))?.find((t) => !used[t]);
+        if (next === void 0) break;
+        used[next] = 1;
+        const a = [segs[next * 4], segs[next * 4 + 1]];
+        const b = [segs[next * 4 + 2], segs[next * 4 + 3]];
+        const far = a[0] === x && a[1] === y ? b : a;
+        if (forward) pts.push(far[0], far[1]);
+        else pts.unshift(far[0], far[1]);
+      }
+    }
+    paths.push(Float32Array.from(pts));
+  }
+  return paths;
+}
 function quickMaskPixels(mask, style = {}) {
   const [r, g, b] = style.color ?? [255, 0, 0];
   const k = Math.min(1, Math.max(0, style.opacity ?? 0.5));
@@ -2168,17 +2206,17 @@ var ImageEditorRenderer = class {
    * screen pixels per natural pixel (the projection scale times the host's CSS scale).
    */
   drawAnts(ctx, selection, scale, offset) {
-    let segs = this.outlineCache.get(selection);
-    if (!segs) {
-      segs = selectionOutline(selection);
-      this.outlineCache.set(selection, segs);
+    let paths = this.outlineCache.get(selection);
+    if (!paths) {
+      paths = selectionOutlinePaths(selection);
+      this.outlineCache.set(selection, paths);
     }
-    if (!segs.length) return;
+    if (!paths.length) return;
     const px2 = 1 / (scale || 1);
     ctx.beginPath();
-    for (let i = 0; i < segs.length; i += 4) {
-      ctx.moveTo(segs[i], segs[i + 1]);
-      ctx.lineTo(segs[i + 2], segs[i + 3]);
+    for (const p of paths) {
+      ctx.moveTo(p[0], p[1]);
+      for (let i = 2; i < p.length; i += 2) ctx.lineTo(p[i], p[i + 1]);
     }
     ctx.lineWidth = px2;
     ctx.strokeStyle = "#ffffff";
@@ -6003,6 +6041,10 @@ var ImageEditorController = class {
     this.state.imageDimensions = source.dimensions;
     if (!this.samplePixelsOverride) this.samplePixels = null;
     if (prev.width !== source.dimensions.width || prev.height !== source.dimensions.height) {
+      const c = this.state.crop;
+      if (c && c.x === 0 && c.y === 0 && c.width === prev.width && c.height === prev.height) {
+        this.state.crop = { x: 0, y: 0, width: source.dimensions.width, height: source.dimensions.height };
+      }
       this.state.layers = resizeLegacyMasks(this.state.layers, prev, source.dimensions);
     }
     this.dropMismatchedSelection();
@@ -23027,6 +23069,7 @@ export {
   selectionFromTiles,
   selectionModeFromModifiers,
   selectionOutline,
+  selectionOutlinePaths,
   selectionRing,
   selectionToCoverage,
   selectionToPixels,

package/dist/image-editor/selection/overlay.d.cts

@@ -5,6 +5,13 @@ import type { SelectionMask } from './mask.cjs';
  * This is what marching ants are drawn from. Linear in the pixel count.
  */
 export declare function selectionOutline(mask: SelectionMask, threshold?: number): Float32Array;
+/**
+ * The selection's outline (`selectionOutline`) joined into polylines, `[x0, y0, x1, y1, …]` each,
+ * closed loops ending where they start. Marching ants are stroked from these, so the dash runs on
+ * along a staircase edge instead of restarting at every one-pixel step (which made diagonal edges
+ * flash rather than march). A loop may break where two pixels touch only at a corner.
+ */
+export declare function selectionOutlinePaths(mask: SelectionMask, threshold?: number): Float32Array[];
 export interface QuickMaskStyle {
     /** Overlay colour, `[r, g, b]` 0..255 (default Photoshop's rubylith red). */
     color?: readonly [number, number, number];

package/dist/image-editor/selection/overlay.d.ts

@@ -5,6 +5,13 @@ import type { SelectionMask } from './mask.js';
  * This is what marching ants are drawn from. Linear in the pixel count.
  */
 export declare function selectionOutline(mask: SelectionMask, threshold?: number): Float32Array;
+/**
+ * The selection's outline (`selectionOutline`) joined into polylines, `[x0, y0, x1, y1, …]` each,
+ * closed loops ending where they start. Marching ants are stroked from these, so the dash runs on
+ * along a staircase edge instead of restarting at every one-pixel step (which made diagonal edges
+ * flash rather than march). A loop may break where two pixels touch only at a corner.
+ */
+export declare function selectionOutlinePaths(mask: SelectionMask, threshold?: number): Float32Array[];
 export interface QuickMaskStyle {
     /** Overlay colour, `[r, g, b]` 0..255 (default Photoshop's rubylith red). */
     color?: readonly [number, number, number];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.218.0",
+  "version": "0.218.1",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",