@pixerate/editor 0.95.0 → 0.97.0

package/dist/{chunk-E2ILRYTJ.js → chunk-OEVSVA6V.js}

@@ -6,6 +6,7 @@ import {
   isBlendMode,
   isSeparableBlendMode,
   mixPigment8,
+  mixPigmentRgb,
   readRegion,
   surfaceFromPixels,
   tileKey,
@@ -372,6 +373,7 @@ function oneOf(r, key, path, values) {
 }
 function blend(r, key, path) {
   if (!isBlendMode(r[key])) fail(`${path}.${key}`, `must be a blend mode such as normal, multiply or screen (got ${JSON.stringify(r[key])}).`);
+  if (r[key] === "pigment") fail(`${path}.${key}`, "pigment is a layer blend mode only; effects cannot use it.");
 }
 function contour(v, path) {
   if (v === void 0) return;
@@ -1078,11 +1080,18 @@ function boxLine(src, x0, dst, bw) {
   }
 }
 var BLUR_EPS = 1e-7;
+var BLUR_FIX = 2 ** 32;
 function tentLine(src, dst, bw, mid) {
   const [r] = boxGeom(bw);
-  boxLine(src, -r, mid.subarray(0, src.length + 2 * r), bw);
-  boxLine(mid.subarray(0, src.length + 2 * r), r, dst, bw);
-  for (let i = 0; i < dst.length; i++) if (Math.abs(dst[i]) < BLUR_EPS) dst[i] = 0;
+  const m = mid.subarray(0, src.length + 2 * r);
+  for (let i = 0; i < src.length; i++) src[i] = Math.round(src[i] * BLUR_FIX);
+  boxLine(src, -r, m, bw);
+  for (let i = 0; i < m.length; i++) m[i] = Math.round(m[i]);
+  boxLine(m, r, dst, bw);
+  for (let i = 0; i < dst.length; i++) {
+    const v = dst[i] / BLUR_FIX;
+    dst[i] = Math.abs(v) < BLUR_EPS ? 0 : v;
+  }
 }
 function tent(m, w) {
   if (!Number.isFinite(w) || m.v.length === 0) return;
@@ -1384,25 +1393,41 @@ function effectsAreLocal(items) {
     }
   });
 }
+function shapeBounds(shape, rect) {
+  const { width: w, height: h } = rect;
+  const rowHit = (y) => {
+    for (let x = 0, i = y * w; x < w; x++, i++) if (shape[i] > INSIDE_EPS) return true;
+    return false;
+  };
+  let y0 = 0;
+  while (y0 < h && !rowHit(y0)) y0++;
+  if (y0 === h) return null;
+  let y1 = h - 1;
+  while (!rowHit(y1)) y1--;
+  let x0 = w;
+  let x1 = -1;
+  for (let y = y0; y <= y1; y++) {
+    const o = y * w;
+    for (let x = 0; x < x0; x++) {
+      if (shape[o + x] > INSIDE_EPS) {
+        x0 = x;
+        break;
+      }
+    }
+    for (let x = w - 1; x > x1; x--) {
+      if (shape[o + x] > INSIDE_EPS) {
+        x1 = x;
+        break;
+      }
+    }
+  }
+  return { x: rect.x + x0, y: rect.y + y0, width: x1 - x0 + 1, height: y1 - y0 + 1 };
+}
 function buildEffectMaps(items, shape, rect, ctx) {
   const w = rect.width;
   const h = rect.height;
   const s = { w, h, v: shape };
-  let x0 = Infinity;
-  let y0 = Infinity;
-  let x1 = -Infinity;
-  let y1 = -Infinity;
-  for (let y = 0; y < h; y++) {
-    for (let x = 0; x < w; x++) {
-      if (shape[y * w + x] > INSIDE_EPS) {
-        if (x < x0) x0 = x;
-        if (x > x1) x1 = x;
-        if (y < y0) y0 = y;
-        if (y > y1) y1 = y;
-      }
-    }
-  }
-  const bounds = x0 === Infinity ? null : { x: rect.x + x0, y: rect.y + y0, width: x1 - x0 + 1, height: y1 - y0 + 1 };
+  const bounds = shapeBounds(shape, rect);
   const anchor = bounds ? { x: bounds.x, y: bounds.y } : { x: rect.x, y: rect.y };
   const per = [];
   const bevelPaint = [];
@@ -1450,8 +1475,84 @@ function buildEffectMaps(items, shape, rect, ctx) {
   for (const d of [din, dout, doutExact]) if (d) bytes += d.byteLength;
   return { rect, items, bounds, shape, per, bevelPaint, din, dout, doutExact, frames, bytes };
 }
+var rectArea = (r) => r.width * r.height;
+function clipRect(a, b) {
+  const x0 = Math.max(a.x, b.x);
+  const y0 = Math.max(a.y, b.y);
+  const x1 = Math.min(a.x + a.width, b.x + b.width);
+  const y1 = Math.min(a.y + a.height, b.y + b.height);
+  return x1 > x0 && y1 > y0 ? { x: x0, y: y0, width: x1 - x0, height: y1 - y0 } : null;
+}
+var growRect = (r, m) => ({ x: r.x - m, y: r.y - m, width: r.width + 2 * m, height: r.height + 2 * m });
+function unionRect(a, b) {
+  const x0 = Math.min(a.x, b.x);
+  const y0 = Math.min(a.y, b.y);
+  return { x: x0, y: y0, width: Math.max(a.x + a.width, b.x + b.width) - x0, height: Math.max(a.y + a.height, b.y + b.height) - y0 };
+}
+function rectMinus(r, cut) {
+  const i = clipRect(r, cut);
+  if (!i) return [r];
+  const parts = [
+    { x: r.x, y: r.y, width: r.width, height: i.y - r.y },
+    { x: r.x, y: i.y + i.height, width: r.width, height: r.y + r.height - (i.y + i.height) },
+    { x: r.x, y: i.y, width: i.x - r.x, height: i.height },
+    { x: i.x + i.width, y: i.y, width: r.x + r.width - (i.x + i.width), height: i.height }
+  ];
+  return parts.filter((p) => p.width > 0 && p.height > 0);
+}
+function pasteMap(dst, to, src, from, a) {
+  for (let y = a.y; y < a.y + a.height; y++) {
+    const s = (y - from.y) * from.width + (a.x - from.x);
+    dst.set(src.subarray(s, s + a.width), (y - to.y) * to.width + (a.x - to.x));
+  }
+}
+function patchEffectMaps(prev, items, rect, changed, margin, shapeOver, ctx) {
+  if (!effectsAreLocal(items) || rectArea(rect) <= 0) return null;
+  let areas = [];
+  for (const c of changed) {
+    const a = clipRect(growRect(c, margin), rect);
+    if (a) areas.push(a);
+  }
+  areas.push(...rectMinus(rect, prev.rect));
+  for (let merged = true; merged; ) {
+    merged = false;
+    for (let i = 0; i < areas.length && !merged; i++) {
+      for (let j = i + 1; j < areas.length; j++) {
+        if (clipRect(growRect(areas[i], 2 * margin), areas[j])) {
+          areas[i] = unionRect(areas[i], areas[j]);
+          areas.splice(j, 1);
+          merged = true;
+          break;
+        }
+      }
+    }
+  }
+  const windows = areas.map((a) => clipRect(growRect(a, margin), rect));
+  if (windows.reduce((n, w) => n + rectArea(w), 0) > rectArea(rect) / 2) return null;
+  const same = rect.x === prev.rect.x && rect.y === prev.rect.y && rect.width === prev.rect.width && rect.height === prev.rect.height;
+  const take = (v) => same ? v : crop(v, prev.rect, rect, 0);
+  const shape = take(prev.shape);
+  const per = prev.per.map((maps) => maps.map(take));
+  const din = prev.din && take(prev.din);
+  const dout = prev.dout && take(prev.dout);
+  const doutExact = prev.doutExact && take(prev.doutExact);
+  areas.forEach((a, k) => {
+    const w = windows[k];
+    const part = buildEffectMaps(items, shapeOver(w), w, ctx);
+    pasteMap(shape, rect, part.shape, w, a);
+    per.forEach((maps, i) => maps.forEach((m, j) => pasteMap(m, rect, part.per[i][j], w, a)));
+    if (din) pasteMap(din, rect, part.din, w, a);
+    if (dout) pasteMap(dout, rect, part.dout, w, a);
+    if (doutExact) pasteMap(doutExact, rect, part.doutExact, w, a);
+  });
+  let bytes = shape.byteLength;
+  for (const maps of per) for (const m of maps) bytes += m.byteLength;
+  for (const d of [din, dout, doutExact]) if (d) bytes += d.byteLength;
+  return { rect, items, bounds: shapeBounds(shape, rect), shape, per, bevelPaint: prev.bevelPaint, din, dout, doutExact, frames: /* @__PURE__ */ new Map(), bytes };
+}
 var rgbScratchB = [0, 0, 0];
 var rgbScratchS = [0, 0, 0];
+var rgbScratchM = [0, 0, 0];
 function compositeAt(dst, i, mode, separable, sr, sg, sb, sa) {
   if (!(sa > 0)) return;
   const ab = dst[i + 3];
@@ -1463,6 +1564,20 @@ function compositeAt(dst, i, mode, separable, sr, sg, sb, sa) {
   const b0 = dst[i];
   const b1 = dst[i + 1];
   const b2 = dst[i + 2];
+  if (mode === "pigment") {
+    rgbScratchB[0] = b0;
+    rgbScratchB[1] = b1;
+    rgbScratchB[2] = b2;
+    rgbScratchS[0] = sr;
+    rgbScratchS[1] = sg;
+    rgbScratchS[2] = sb;
+    mixPigmentRgb(rgbScratchB, rgbScratchS, sa / ao, rgbScratchM);
+    dst[i] = rgbScratchM[0];
+    dst[i + 1] = rgbScratchM[1];
+    dst[i + 2] = rgbScratchM[2];
+    dst[i + 3] = ao;
+    return;
+  }
   let m0;
   let m1;
   let m2;
@@ -2067,8 +2182,11 @@ var RasterCompositor = class {
   patternTiles = /* @__PURE__ */ new WeakMap();
   reachCache = /* @__PURE__ */ new WeakMap();
   fxContext = null;
-  lastStats = { tiles: 0, cached: 0, stepsRun: 0 };
+  lastStats = { tiles: 0, cached: 0, stepsRun: 0, effectsBuilt: 0, effectsPatched: 0 };
   hint = -1;
+  /** The `dirty` rectangles of the current call, as passed. */
+  callDirty = null;
+  callStats = this.lastStats;
   /** Drops every cached tile and plane. */
   clear() {
     this.tiles.clear();
@@ -2116,7 +2234,9 @@ var RasterCompositor = class {
     const steps = this.buildSteps(layers);
     this.hint = options.checkpointLayerId ? this.stepIndexOf(steps, options.checkpointLayerId) : -1;
     this.stamp++;
-    const stats = { tiles: 0, cached: 0, stepsRun: 0 };
+    this.callDirty = options.dirty ?? null;
+    const stats = { tiles: 0, cached: 0, stepsRun: 0, effectsBuilt: 0, effectsPatched: 0 };
+    this.callStats = stats;
     const grow = options.dirty ? this.effectsReach(layers) : 0;
     const dirty = grow > 0 ? options.dirty.map((d) => inflateRect(d, grow)) : options.dirty;
     for (const { tx, ty } of tilesInRect(rect)) {
@@ -2132,8 +2252,10 @@ var RasterCompositor = class {
   tile(layers, tx, ty, sources) {
     this.setSources(sources);
     this.stamp++;
-    const stats = { tiles: 1, cached: 0, stepsRun: 0 };
+    const stats = { tiles: 1, cached: 0, stepsRun: 0, effectsBuilt: 0, effectsPatched: 0 };
+    this.callStats = stats;
     this.hint = -1;
+    this.callDirty = null;
     const data = this.compositeTile(layers, this.buildSteps(layers), tx, ty, stats);
     this.lastStats = stats;
     this.evict();
@@ -2203,7 +2325,8 @@ var RasterCompositor = class {
     let first = 0;
     if (entry) {
       while (first < sigs.length && first < entry.sigs.length && sameSig(entry.sigs[first], sigs[first])) first++;
-      if (first === sigs.length && first === entry.sigs.length) {
+      if (first === sigs.length && first === entry.sigs.length || this.changedOnlyNearby(steps, sigs, entry, dirty)) {
+        entry.sigs = sigs;
         entry.stamp = this.stamp;
         stats.cached++;
         return entry.result;
@@ -2268,6 +2391,20 @@ var RasterCompositor = class {
     this.cacheBytes += this.entryBytes(next) - prevBytes;
     return result;
   }
+  /**
+   * Whether a tile with no part in this call's (grown) `dirty` rectangles changed only in what local
+   * effects read beyond it: every changed step is a pixel layer with local effects whose changes stay
+   * inside `dirty` (and so are farther than its margin), which leaves the tile's pixels as they were.
+   */
+  changedOnlyNearby(steps, sigs, entry, dirty) {
+    if (this.callDirty === null || dirty || entry.stamp !== this.stamp - 1 || sigs.length !== entry.sigs.length) return false;
+    return steps.every((step, i) => {
+      if (sameSig(entry.sigs[i], sigs[i])) return true;
+      if (step.kind !== "content" || entry.sigs[i].key !== sigs[i].key) return false;
+      const { layer, clipped } = step;
+      return this.hasEffects(layer) && effectsAreLocal(activeEffectItems(layer.effects)) && this.dirtyCoversShape(layer) && clipped.every((c) => this.dirtyCoversShape(c));
+    });
+  }
   entryBytes(e) {
     let n = e.result === ZERO_TILE ? 0 : TILE_BYTES;
     for (const cp of e.checkpoints.values()) n += cp.data.byteLength;
@@ -2398,14 +2535,20 @@ var RasterCompositor = class {
     if (!b) return { x: 0, y: 0, width: 0, height: 0 };
     return intersectRect({ x: b.x + dx - m, y: b.y + dy - m, width: b.width + 2 * m, height: b.height + 2 * m }, canvas);
   }
+  /** The signature of a layer's shape (its surface tiles and mask refs) per tile of `region`. */
+  shapeSigs(layer, region) {
+    const sigs = /* @__PURE__ */ new Map();
+    if (region.width <= 0 || region.height <= 0) return sigs;
+    const steps = isGroup(layer) ? this.buildSteps(layer.children ?? []) : null;
+    for (const t of tilesInRect(region)) {
+      sigs.set(tileKey(t.tx, t.ty), steps ? this.plainGroupSig(layer, steps, t.tx, t.ty) : this.plainContentSig(layer, t.tx, t.ty));
+    }
+    return sigs;
+  }
   /** The surface tiles (and mask refs) a layer's shape reads over `region`. */
   shapeRefs(layer, region) {
     const refs = [];
-    if (region.width <= 0 || region.height <= 0) return refs;
-    for (const t of tilesInRect(region)) {
-      const sig = isGroup(layer) ? this.plainGroupSig(layer, this.buildSteps(layer.children ?? []), t.tx, t.ty) : this.plainContentSig(layer, t.tx, t.ty);
-      for (const r of sig.refs) refs.push(r);
-    }
+    for (const sig of this.shapeSigs(layer, region).values()) for (const r of sig.refs) refs.push(r);
     return refs;
   }
   lightKey() {
@@ -2431,18 +2574,28 @@ var RasterCompositor = class {
     const memo = this.effectMemo.get(layer);
     if (memo && memo.stamp === this.stamp) return memo.maps;
     const region = this.effectRegion(layer);
-    const key = `${this.propsKey(layer)}${this.lightKey()}|${region.x},${region.y},${region.width},${region.height}`;
-    const refs = this.shapeRefs(layer, region);
+    const key = this.propsKey(layer) + this.lightKey();
+    const tiles = this.shapeSigs(layer, region);
     const hit = this.effectCache.get(layer.id);
-    let maps;
-    if (hit && hit.key === key && sameSig({ key, refs: hit.refs }, { key, refs })) {
-      this.effectCache.delete(layer.id);
-      this.effectCache.set(layer.id, hit);
-      maps = hit.maps;
+    this.effectCache.delete(layer.id);
+    let entry;
+    if (hit && hit.key === key && sameRect(hit.region, region) && [...tiles].every(([k, sig]) => sameSig(hit.tiles.get(k), sig))) {
+      entry = hit;
     } else {
-      maps = buildEffectMaps(activeEffectItems(layer.effects), this.layerShape(layer, region), region, this.effectContext());
-      this.effectCache.delete(layer.id);
-      this.effectCache.set(layer.id, { key, refs, maps });
+      const items = activeEffectItems(layer.effects);
+      const ctx = this.effectContext();
+      let maps = null;
+      if (hit && hit.key === key && items.every((e) => effectReach(e) <= MAX_EFFECT_REACH)) {
+        const changed = this.shapeChanges(layer, hit, tiles, region);
+        maps = patchEffectMaps(hit.maps, items, region, changed, effectsMargin(layer.effects), (r) => this.layerShape(layer, r), ctx);
+      }
+      if (maps) this.callStats.effectsPatched++;
+      else this.callStats.effectsBuilt++;
+      entry = { key, region, tiles, maps: maps ?? buildEffectMaps(items, this.layerShape(layer, region), region, ctx), stamp: 0 };
+    }
+    entry.stamp = this.stamp;
+    this.effectCache.set(layer.id, entry);
+    if (entry !== hit) {
       let bytes = 0;
       for (const e of this.effectCache.values()) bytes += e.maps.bytes;
       while (this.effectCache.size > 1 && (this.effectCache.size > 32 || bytes > this.maxCacheBytes / 2)) {
@@ -2451,8 +2604,42 @@ var RasterCompositor = class {
         this.effectCache.delete(oldest);
       }
     }
-    this.effectMemo.set(layer, { stamp: this.stamp, maps });
-    return maps;
+    this.effectMemo.set(layer, { stamp: this.stamp, maps: entry.maps });
+    return entry.maps;
+  }
+  /**
+   * Where a layer's shape may differ from the one `prev` was built from: the tiles whose signature
+   * changed (a tile new to the region that reads nothing did not), narrowed to this call's `dirty`
+   * rectangles when `prev` is from the previous call and they cover every change of the shape.
+   */
+  shapeChanges(layer, prev, tiles, region) {
+    const out = [];
+    for (const { tx, ty } of tilesInRect(region)) {
+      const sig = tiles.get(tileKey(tx, ty));
+      const old = prev.tiles.get(tileKey(tx, ty));
+      if (old ? sameSig(old, sig) : sig.refs.every((r2) => r2 === null || r2 === 0)) continue;
+      const r = intersectRect({ x: tx * TILE, y: ty * TILE, width: TILE, height: TILE }, region);
+      if (r.width > 0 && r.height > 0) out.push(r);
+    }
+    const dirty = this.callDirty;
+    if (!dirty || prev.stamp !== this.stamp - 1 || !this.dirtyCoversShape(layer)) return out;
+    const narrowed = [];
+    for (const r of out) {
+      for (const d of dirty) {
+        const a = intersectRect(r, { x: Math.floor(d.x), y: Math.floor(d.y), width: Math.ceil(d.x + d.width) - Math.floor(d.x), height: Math.ceil(d.y + d.height) - Math.floor(d.y) });
+        if (a.width > 0 && a.height > 0) narrowed.push(a);
+      }
+    }
+    return narrowed;
+  }
+  /**
+   * Whether a change to a layer stays inside the `dirty` rectangles that name it: a pixel layer
+   * without filters or a feathered or parametric mask (those spread a change beyond it).
+   */
+  dirtyCoversShape(layer) {
+    if (!isPixel(layer) || this.profile.pixelFilters?.(layer)) return false;
+    const mask = layer.mask;
+    return !mask || mask.enabled === false || !mask.source && !((mask.feather ?? 0) > 0);
   }
   /** A layer's alpha over `r` after its mask (0..1, quantised to bytes as tiles see it). */
   layerShape(layer, r) {
@@ -2779,6 +2966,9 @@ function copyRect(data, r, a) {
 function pasteRect(data, r, part, a) {
   for (let y = 0; y < a.height; y++) data.set(part.subarray(y * a.width * 4, (y + 1) * a.width * 4), ((a.y - r.y + y) * r.width + (a.x - r.x)) * 4);
 }
+function sameRect(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
 function inflateRect(r, m) {
   return { x: r.x - m, y: r.y - m, width: r.width + 2 * m, height: r.height + 2 * m };
 }
@@ -3672,6 +3862,7 @@ export {
   activeEffectItems,
   effectsAreLocal,
   buildEffectMaps,
+  patchEffectMaps,
   gradientT,
   compositeLayerEffects,
   renderLayerEffects,
@@ -3692,4 +3883,4 @@ export {
   parseDataUrl,
   pngDataUrl
 };
-//# sourceMappingURL=chunk-E2ILRYTJ.js.map
+//# sourceMappingURL=chunk-OEVSVA6V.js.map