@pixerate/editor 0.187.0 → 0.189.0

package/dist/{chunk-FW7N64XK.js → chunk-ZEHTUR7Z.js}

@@ -114,15 +114,19 @@ import {
   parseDataUrl,
   pngDataUrl,
   readDeepRegion,
+  readPixel,
   readRegion,
   setLum,
   surfaceDepth,
   surfaceFromDeepPixels,
   surfaceFromPixels,
+  tileCoord,
   tileKey,
   tilesInRect,
   translateSurface,
-  writeDeepRegion
+  uniformTile,
+  writeDeepRegion,
+  writeRegion
 } from "./chunk-H367YTXI.js";
 import {
   ZlibError,
@@ -750,15 +754,159 @@ function computeSelectionBounds(width, height, data) {
   if (y0 < 0) return null;
   return { x: x0, y: y0, width: x1 - x0 + 1, height: y1 - y0 + 1 };
 }
+var TILE_PIXELS = TILE * TILE;
+var MATERIALIZED_LIMIT = 4;
+var materialized = /* @__PURE__ */ new Map();
+var lastRead = null;
+var lastData = null;
+var TiledSelectionMask = class {
+  constructor(width, height, surface, bounds, data) {
+    this.width = width;
+    this.height = height;
+    this.surface = surface;
+    this.cachedBounds = bounds;
+    if (data) this.remember(data);
+  }
+  width;
+  height;
+  surface;
+  cachedBounds;
+  weak = null;
+  get bounds() {
+    if (this.cachedBounds === void 0) this.cachedBounds = contentBounds(this.surface);
+    return this.cachedBounds;
+  }
+  get data() {
+    if (lastRead === this) return lastData;
+    let d = materialized.get(this);
+    if (d) {
+      materialized.delete(this);
+      materialized.set(this, d);
+      lastRead = this;
+      lastData = d;
+      return d;
+    }
+    d = this.weak?.deref();
+    if (!d) {
+      const all = readRegion(this.surface, { x: 0, y: 0, width: this.width, height: this.height });
+      d = new Uint8Array(all.buffer, all.byteOffset, all.length);
+    }
+    this.remember(d);
+    return d;
+  }
+  remember(d) {
+    lastRead = this;
+    lastData = d;
+    this.weak = typeof WeakRef === "function" ? new WeakRef(d) : null;
+    materialized.set(this, d);
+    while (materialized.size > MATERIALIZED_LIMIT) materialized.delete(materialized.keys().next().value);
+  }
+};
+function tileGrid(width, height) {
+  return { cols: Math.ceil(width / TILE), rows: Math.ceil(height / TILE) };
+}
+function insideTile(tx, ty, width, height) {
+  return (tx + 1) * TILE <= width && (ty + 1) * TILE <= height;
+}
+function surfaceFromCoverage(width, height, data) {
+  const tiles = /* @__PURE__ */ new Map();
+  const { cols, rows } = tileGrid(width, height);
+  for (let ty = 0; ty < rows; ty++) {
+    for (let tx = 0; tx < cols; tx++) {
+      const ox = tx * TILE;
+      const oy = ty * TILE;
+      const w = Math.min(TILE, width - ox);
+      const h = Math.min(TILE, height - oy);
+      let lo = 255;
+      let hi = 0;
+      for (let y = 0; y < h && !(hi > 0 && lo < hi); y++) {
+        const row = (oy + y) * width + ox;
+        for (let x = 0; x < w; x++) {
+          const v = data[row + x];
+          if (v < lo) lo = v;
+          if (v > hi) hi = v;
+        }
+      }
+      if (hi === 0) continue;
+      if (lo === hi && w === TILE && h === TILE) {
+        tiles.set(tileKey(tx, ty), uniformTile(1, hi));
+        continue;
+      }
+      const t = new Uint8ClampedArray(TILE_PIXELS);
+      for (let y = 0; y < h; y++) {
+        const row = (oy + y) * width + ox;
+        for (let x = 0; x < w; x++) t[y * TILE + x] = data[row + x];
+      }
+      tiles.set(tileKey(tx, ty), { data: t, uniform: null });
+    }
+  }
+  return new TiledSurface(1, tiles, 0);
+}
+function clipTile(tile, w, h) {
+  const d = tile.data;
+  let outside = false;
+  for (let y = 0; y < TILE && !outside; y++) {
+    for (let x = y < h ? w : 0; x < TILE; x++) {
+      if (d[y * TILE + x] !== 0) {
+        outside = true;
+        break;
+      }
+    }
+  }
+  if (!outside) return tile;
+  const t = new Uint8ClampedArray(TILE_PIXELS);
+  for (let y = 0; y < h; y++) t.set(d.subarray(y * TILE, y * TILE + w), y * TILE);
+  return finishTile(t, 1, 0);
+}
+function selectionFromTiles(width, height, surface) {
+  checkSize(width, height);
+  if (surface.channels !== 1) throw new Error("A selection needs a 1-channel surface");
+  if (surface.defaultValue !== 0) {
+    const all = readRegion(surface, { x: 0, y: 0, width, height });
+    return createSelectionMask(width, height, new Uint8Array(all.buffer, all.byteOffset, all.length));
+  }
+  const { cols, rows } = tileGrid(width, height);
+  let tiles = null;
+  for (const [key, tile] of surface.tiles) {
+    const { tx, ty } = tileCoord(key);
+    let next = tile;
+    if (tx < 0 || ty < 0 || tx >= cols || ty >= rows) next = null;
+    else if (!insideTile(tx, ty, width, height)) next = clipTile(tile, Math.min(TILE, width - tx * TILE), Math.min(TILE, height - ty * TILE));
+    if (next === tile) continue;
+    tiles ??= new Map(surface.tiles);
+    if (next) tiles.set(key, next);
+    else tiles.delete(key);
+  }
+  return new TiledSelectionMask(width, height, tiles ? new TiledSurface(1, tiles, 0) : surface);
+}
 function createSelectionMask(width, height, data) {
   checkSize(width, height);
-  const bytes = data ?? new Uint8Array(width * height);
-  if (bytes.length !== width * height) throw new Error("Selection data does not match its size");
-  return { width, height, data: bytes, bounds: data ? computeSelectionBounds(width, height, bytes) : null };
+  if (!data) return new TiledSelectionMask(width, height, new TiledSurface(1, /* @__PURE__ */ new Map(), 0), null);
+  if (data.length !== width * height) throw new Error("Selection data does not match its size");
+  return new TiledSelectionMask(width, height, surfaceFromCoverage(width, height, data), void 0, data);
+}
+function selectionFromRegion(width, height, rect, data) {
+  checkSize(width, height);
+  if (rect.x < 0 || rect.y < 0 || rect.x + rect.width > width || rect.y + rect.height > height) throw new Error("The region lies outside the selection");
+  return new TiledSelectionMask(width, height, writeRegion(new TiledSurface(1, /* @__PURE__ */ new Map(), 0), rect, data));
 }
 function fullSelection(width, height) {
   checkSize(width, height);
-  return { width, height, data: new Uint8Array(width * height).fill(255), bounds: { x: 0, y: 0, width, height } };
+  const tiles = /* @__PURE__ */ new Map();
+  const { cols, rows } = tileGrid(width, height);
+  for (let ty = 0; ty < rows; ty++) {
+    for (let tx = 0; tx < cols; tx++) {
+      if (insideTile(tx, ty, width, height)) {
+        tiles.set(tileKey(tx, ty), uniformTile(1, 255));
+        continue;
+      }
+      const t = new Uint8ClampedArray(TILE_PIXELS);
+      const w = Math.min(TILE, width - tx * TILE);
+      for (let y = 0; y < Math.min(TILE, height - ty * TILE); y++) t.fill(255, y * TILE, y * TILE + w);
+      tiles.set(tileKey(tx, ty), { data: t, uniform: null });
+    }
+  }
+  return new TiledSelectionMask(width, height, new TiledSurface(1, tiles, 0), { x: 0, y: 0, width, height });
 }
 function isSelectionEmpty(mask) {
   return !mask || mask.bounds === null;
@@ -767,7 +915,7 @@ function selectionValueAt(mask, x, y) {
   const xi = Math.floor(x);
   const yi = Math.floor(y);
   if (xi < 0 || yi < 0 || xi >= mask.width || yi >= mask.height) return 0;
-  return mask.data[yi * mask.width + xi] / 255;
+  return readPixel(mask.surface, xi, yi)[0] / 255;
 }
 function coverageToByte(v) {
   if (!(v > 0)) return 0;
@@ -788,10 +936,13 @@ function selectionToCoverage(mask) {
 function selectionArea(mask) {
   if (!mask || !mask.bounds) return 0;
   let sum = 0;
-  const { x, y, width, height } = mask.bounds;
-  for (let yy = y; yy < y + height; yy++) {
-    const row = yy * mask.width;
-    for (let xx = x; xx < x + width; xx++) sum += mask.data[row + xx];
+  for (const tile of mask.surface.tiles.values()) {
+    if (tile.uniform !== null) {
+      sum += tile.uniform * TILE_PIXELS;
+      continue;
+    }
+    const d = tile.data;
+    for (let i = 0; i < d.length; i++) sum += d[i];
   }
   return sum / 255;
 }
@@ -803,20 +954,68 @@ function combineSelections(prev, next, mode) {
     return null;
   } else {
     if (prev.width !== next.width || prev.height !== next.height) throw new Error("Selections differ in size");
-    const a = prev.data;
-    const b = next.data;
-    const out = new Uint8Array(a.length);
-    if (mode === "add") for (let i = 0; i < a.length; i++) out[i] = a[i] > b[i] ? a[i] : b[i];
-    else if (mode === "subtract") for (let i = 0; i < a.length; i++) out[i] = a[i] > b[i] ? a[i] - b[i] : 0;
-    else for (let i = 0; i < a.length; i++) out[i] = a[i] < b[i] ? a[i] : b[i];
-    result = createSelectionMask(prev.width, prev.height, out);
+    result = new TiledSelectionMask(prev.width, prev.height, combineSurfaces(prev.surface, next.surface, mode));
   }
   return result.bounds ? result : null;
 }
+var FULL = 255;
+function combineTile(a, b, mode) {
+  if (mode === "add") {
+    if (!b || a?.uniform === FULL) return a;
+    if (!a || b.uniform === FULL) return b;
+  } else if (mode === "subtract") {
+    if (!a || !b) return a;
+    if (b.uniform === FULL) return void 0;
+  } else {
+    if (!a || !b) return void 0;
+    if (a.uniform === FULL) return b;
+    if (b.uniform === FULL) return a;
+  }
+  const x = a.data;
+  const y = b.data;
+  const out = new Uint8ClampedArray(TILE_PIXELS);
+  if (mode === "add") for (let i = 0; i < out.length; i++) out[i] = x[i] > y[i] ? x[i] : y[i];
+  else if (mode === "subtract") for (let i = 0; i < out.length; i++) out[i] = x[i] > y[i] ? x[i] - y[i] : 0;
+  else for (let i = 0; i < out.length; i++) out[i] = x[i] < y[i] ? x[i] : y[i];
+  return finishTile(out, 1, 0) ?? void 0;
+}
+function combineSurfaces(a, b, mode) {
+  const tiles = /* @__PURE__ */ new Map();
+  for (const key of /* @__PURE__ */ new Set([...a.tiles.keys(), ...b.tiles.keys()])) {
+    const tile = combineTile(a.tiles.get(key), b.tiles.get(key), mode);
+    if (tile) tiles.set(key, tile);
+  }
+  return new TiledSurface(1, tiles, 0);
+}
 function invertSelection(mask) {
-  const out = new Uint8Array(mask.data.length);
-  for (let i = 0; i < out.length; i++) out[i] = 255 - mask.data[i];
-  return createSelectionMask(mask.width, mask.height, out);
+  const { width, height } = mask;
+  const tiles = /* @__PURE__ */ new Map();
+  const { cols, rows } = tileGrid(width, height);
+  for (let ty = 0; ty < rows; ty++) {
+    for (let tx = 0; tx < cols; tx++) {
+      const src = mask.surface.getTile(tx, ty);
+      const key = tileKey(tx, ty);
+      if (insideTile(tx, ty, width, height)) {
+        if (!src) tiles.set(key, uniformTile(1, FULL));
+        else if (src.uniform !== null) {
+          if (src.uniform !== FULL) tiles.set(key, uniformTile(1, FULL - src.uniform));
+        } else {
+          const out2 = new Uint8ClampedArray(TILE_PIXELS);
+          for (let i = 0; i < out2.length; i++) out2[i] = FULL - src.data[i];
+          const t2 = finishTile(out2, 1, 0);
+          if (t2) tiles.set(key, t2);
+        }
+        continue;
+      }
+      const w = Math.min(TILE, width - tx * TILE);
+      const h = Math.min(TILE, height - ty * TILE);
+      const out = new Uint8ClampedArray(TILE_PIXELS);
+      for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) out[y * TILE + x] = FULL - (src ? src.data[y * TILE + x] : 0);
+      const t = finishTile(out, 1, 0);
+      if (t) tiles.set(key, t);
+    }
+  }
+  return new TiledSelectionMask(width, height, new TiledSurface(1, tiles, 0));
 }
 function resizeSelection(mask, width, height) {
   if (mask.width === width && mask.height === height) return mask;
@@ -1222,6 +1421,13 @@ function modifySelection(mask, op, radius) {
 }
 
 // src/image-editor/selection/layer-mask.ts
+function layerMaskSelection(layer, width, height) {
+  if (!layer.mask || layer.mask.source) return null;
+  const ox = layer.type === "pixel" ? layer.offset.x : 0;
+  const oy = layer.type === "pixel" ? layer.offset.y : 0;
+  const data = readRegion(layer.mask.surface, { x: -ox, y: -oy, width, height });
+  return createSelectionMask(width, height, new Uint8Array(data.buffer, data.byteOffset, data.length));
+}
 var MAX_SIDE2 = 1 << 15;
 function normalizeLayerMask(raw) {
   if (!raw || typeof raw !== "object") return null;
@@ -11640,7 +11846,9 @@ export {
   isSelectionMode,
   parseSelectionMode,
   computeSelectionBounds,
+  selectionFromTiles,
   createSelectionMask,
+  selectionFromRegion,
   fullSelection,
   isSelectionEmpty,
   selectionValueAt,
@@ -11669,6 +11877,7 @@ export {
   shiftCoverage,
   SELECTION_MODIFY_OPS,
   modifySelection,
+  layerMaskSelection,
   normalizeLayerMask,
   layerMaskFromSelection,
   updateLayerMaskProps,

package/dist/image-editor/controller.d.cts

@@ -113,6 +113,8 @@ export interface SelectionCommandOptions {
 }
 /** How the canvas shows the selection: marching ants, a Quick Mask tint, or not at all. */
 export type SelectionDisplay = 'ants' | 'quickMask' | 'none';
+/** How a layer mask is shown on the canvas: alone in grey, or as a red tint over the image. */
+export type MaskViewMode = 'gray' | 'overlay';
 /** What `exportMaskImage` writes: the selection, an alpha channel or a layer's painted mask. */
 export type MaskImageSource = 'selection' | {
     channelId: string;
@@ -724,8 +726,8 @@ export declare class ImageEditorController {
     private asOneStep;
     private recordHistory;
     /**
-     * Bytes of pixel tiles held only by undo / redo steps (not by the current state). The oldest
-     * undo steps are dropped while it exceeds `maxHistoryBytes`.
+     * Bytes of pixel, selection and channel tiles held only by undo / redo steps (not by the
+     * current state). The oldest undo steps are dropped while it exceeds `maxHistoryBytes`.
      */
     get historyBytes(): number;
     private trimHistoryBytes;
@@ -1506,6 +1508,21 @@ export declare class ImageEditorController {
      * it (the selection still applies). View state: no undo step, not saved.
      */
     setSelectionDisplay(display: SelectionDisplay): void;
+    /** The layer mask shown on the canvas, or `null` (see `setMaskView`). */
+    getMaskView(): {
+        layerId: string;
+        mode: MaskViewMode;
+    } | null;
+    /**
+     * Shows a layer's mask on the canvas: `gray` alone in grey (Alt-click the mask thumbnail),
+     * `overlay` as a red tint over what it hides (the \ key), `off` back to the image. The layer
+     * defaults to the active one. View state: no undo step, not saved. Throws when the layer has
+     * no painted mask.
+     */
+    setMaskView(mode: MaskViewMode | 'off', layerId?: string): {
+        layerId: string;
+        mode: MaskViewMode;
+    } | null;
     /** The alpha channels (saved selections), in panel order. */
     getChannels(): readonly AlphaChannel[];
     getChannel(id: string): AlphaChannel | null;
@@ -1559,7 +1576,7 @@ export declare class ImageEditorController {
     setQuickMaskMode(on: boolean): void;
     /** The selection as a 1-channel surface to paint in Quick Mask mode. */
     private quickMaskSurface;
-    /** The selection a painted Quick Mask surface stands for (`rects` changed since `base`). */
+    /** The selection a painted Quick Mask surface stands for (it shares the surface's tiles). */
     private selectionFromSurface;
     private maskFromSelection;
     /**

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

@@ -113,6 +113,8 @@ export interface SelectionCommandOptions {
 }
 /** How the canvas shows the selection: marching ants, a Quick Mask tint, or not at all. */
 export type SelectionDisplay = 'ants' | 'quickMask' | 'none';
+/** How a layer mask is shown on the canvas: alone in grey, or as a red tint over the image. */
+export type MaskViewMode = 'gray' | 'overlay';
 /** What `exportMaskImage` writes: the selection, an alpha channel or a layer's painted mask. */
 export type MaskImageSource = 'selection' | {
     channelId: string;
@@ -724,8 +726,8 @@ export declare class ImageEditorController {
     private asOneStep;
     private recordHistory;
     /**
-     * Bytes of pixel tiles held only by undo / redo steps (not by the current state). The oldest
-     * undo steps are dropped while it exceeds `maxHistoryBytes`.
+     * Bytes of pixel, selection and channel tiles held only by undo / redo steps (not by the
+     * current state). The oldest undo steps are dropped while it exceeds `maxHistoryBytes`.
      */
     get historyBytes(): number;
     private trimHistoryBytes;
@@ -1506,6 +1508,21 @@ export declare class ImageEditorController {
      * it (the selection still applies). View state: no undo step, not saved.
      */
     setSelectionDisplay(display: SelectionDisplay): void;
+    /** The layer mask shown on the canvas, or `null` (see `setMaskView`). */
+    getMaskView(): {
+        layerId: string;
+        mode: MaskViewMode;
+    } | null;
+    /**
+     * Shows a layer's mask on the canvas: `gray` alone in grey (Alt-click the mask thumbnail),
+     * `overlay` as a red tint over what it hides (the \ key), `off` back to the image. The layer
+     * defaults to the active one. View state: no undo step, not saved. Throws when the layer has
+     * no painted mask.
+     */
+    setMaskView(mode: MaskViewMode | 'off', layerId?: string): {
+        layerId: string;
+        mode: MaskViewMode;
+    } | null;
     /** The alpha channels (saved selections), in panel order. */
     getChannels(): readonly AlphaChannel[];
     getChannel(id: string): AlphaChannel | null;
@@ -1559,7 +1576,7 @@ export declare class ImageEditorController {
     setQuickMaskMode(on: boolean): void;
     /** The selection as a 1-channel surface to paint in Quick Mask mode. */
     private quickMaskSurface;
-    /** The selection a painted Quick Mask surface stands for (`rects` changed since `base`). */
+    /** The selection a painted Quick Mask surface stands for (it shares the surface's tiles). */
     private selectionFromSurface;
     private maskFromSelection;
     /**