@pixerate/editor 0.231.0 → 0.232.0

package/dist/image-editor/index.js

@@ -744,7 +744,7 @@ import {
   createEffectToolProvider,
   linearToSrgb,
   resolveEffectValues
-} from "../chunk-TCZ2J7PR.js";
+} from "../chunk-PQYDJ2AV.js";
 import "../chunk-V2ZCJRDM.js";
 import {
   BrushstrokeCache,
@@ -7141,6 +7141,50 @@ var ImageEditorController = class {
     const enc = encodeSurface(surface);
     return enc ? enc.url : null;
   }
+  maskedImageCache = /* @__PURE__ */ new WeakMap();
+  /**
+   * A pixel layer's own pixels with its raster and vector masks applied, cropped to what shows: a
+   * PNG data URL and its document bounds, or `null` for an unknown or non-pixel layer, or when
+   * nothing shows. Opacity, blending, filters and effects are left out, as in `getLayerDataURL`.
+   * Use it for a masked layer, whose stored pixels (a whole copy, for Separate Subject's subject)
+   * are not what it shows.
+   */
+  getMaskedLayerImage(id) {
+    const layer = this.getLayer(id);
+    if (!layer || layer.type !== "pixel") return null;
+    const surface = this.surfaceOf(layer);
+    const cached = this.maskedImageCache.get(layer);
+    if (cached && cached.surface === surface) return cached.image;
+    const b = this.getLayerBounds(id);
+    let image = null;
+    if (b) {
+      const content = { ...layer, visible: true, opacity: 1, blend: "normal" };
+      delete content.clipped;
+      delete content.fillOpacity;
+      delete content.effects;
+      delete content.filters;
+      const data = this.compositor.composite([content], b, this.compositorSources());
+      let x0 = b.width, y0 = b.height, x1 = -1, y1 = -1;
+      for (let y = 0; y < b.height; y++) {
+        for (let x = 0; x < b.width; x++) {
+          if (!data[(y * b.width + x) * 4 + 3]) continue;
+          if (x < x0) x0 = x;
+          if (x > x1) x1 = x;
+          if (y < y0) y0 = y;
+          if (y > y1) y1 = y;
+        }
+      }
+      if (x1 >= 0) {
+        const w = x1 - x0 + 1;
+        const h = y1 - y0 + 1;
+        const out = new Uint8ClampedArray(w * h * 4);
+        for (let y = 0; y < h; y++) out.set(data.subarray(((y0 + y) * b.width + x0) * 4, ((y0 + y) * b.width + x0 + w) * 4), y * w * 4);
+        image = { url: pngDataUrl(w, h, out, 4), bounds: { x: b.x + x0, y: b.y + y0, width: w, height: h } };
+      }
+    }
+    this.maskedImageCache.set(layer, { surface, image });
+    return image;
+  }
   /**
    * Composites the layer stack in document space without a canvas (annotation layers need one
    * and are left out): `rect` (default: the canvas) as RGBA, straight alpha. Crop, rotation and
@@ -20820,7 +20864,8 @@ function extractNormalizedLayerItems(controller, fallbackImageUrl = "") {
   const imgW = state.imageDimensions?.width || 1;
   const imgH = state.imageDimensions?.height || 1;
   return ctrlLayers.map((l) => {
-    const bounds = controller.getLayerBounds(l.id) || {
+    const masked = l.type === "pixel" && (l.mask || l.vectorMask) ? controller.getMaskedLayerImage(l.id) : null;
+    const bounds = masked?.bounds || controller.getLayerBounds(l.id) || {
       x: 0,
       y: 0,
       width: imgW,
@@ -20828,7 +20873,7 @@ function extractNormalizedLayerItems(controller, fallbackImageUrl = "") {
     };
     const sLayer = sLayerMap.get(l.id);
     const assetKey = sLayer?.asset;
-    const layerDataUrl = assetKey && assets[assetKey] || assets[l.id] || (sLayer?.source === "document" ? fallbackImageUrl : "");
+    const layerDataUrl = masked?.url || assetKey && assets[assetKey] || assets[l.id] || (sLayer?.source === "document" ? fallbackImageUrl : "");
     return {
       id: l.id,
       name: l.name || "Untitled Layer",

package/dist/paint-editor/index.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3; var _class4; var _class5; var _class6; var _class7; var _class8; var _class9; var _class10; var _class11; var _class12;
 
-var _chunk5T3H7CGGcjs = require('../chunk-5T3H7CGG.cjs');
+var _chunkA653N65Qcjs = require('../chunk-A653N65Q.cjs');
 
 
 
@@ -137,7 +137,7 @@ require('../chunk-NM3G4VQT.cjs');
 
 
 
-var _chunkOPSK22DLcjs = require('../chunk-OPSK22DL.cjs');
+var _chunk2K5TELHVcjs = require('../chunk-2K5TELHV.cjs');
 require('../chunk-WOFXZ3XU.cjs');
 
 
@@ -3213,7 +3213,7 @@ function timeLapseVideo(frameCount, width, height, fps, holdMs, name = "Time-lap
   }
   const video = { version: 1, name, width: w, height: h, fps, background: "#000000", assets, tracks: [{ id: "v1", kind: "video", clips }] };
   const durationMs = frameCount ? clips[clips.length - 1].start + clips[clips.length - 1].duration : 0;
-  return { video, ffmpeg: _chunk5T3H7CGGcjs.toVideoFfmpeg.call(void 0, video, { output: "timelapse.mp4" }), durationMs };
+  return { video, ffmpeg: _chunkA653N65Qcjs.toVideoFfmpeg.call(void 0, video, { output: "timelapse.mp4" }), durationMs };
 }
 async function buildTimeLapse(source, target, options = {}) {
   const maxSide = Math.max(32, Math.min(4096, Math.round(_nullishCoalesce(options.maxSide, () => ( 720)))));
@@ -3296,7 +3296,7 @@ function checkPaintEffectPlace(d, place) {
   else if (d.uses.includes("filter") && place !== "light") instead = "; run it on a layer's dried paint with apply_effect instead";
   else if (place === "light" && d.uses.some((u) => PAINT_EFFECT_PLACES.layer.includes(u))) instead = "; add it as an effect layer (add_effect_layer) or fill a layer with it (fill_layer_with_effect) instead";
   else if (place === "paper" && d.uses.some((u) => u === "overlay" || u === "title")) instead = "; add it as an effect layer with add_effect_layer instead";
-  throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.uses.join(" / ") || d.kind} effect, and ${PLACE_WORDS[place]}${instead}.`, d.id);
+  throw new (0, _chunk2K5TELHVcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.uses.join(" / ") || d.kind} effect, and ${PLACE_WORDS[place]}${instead}.`, d.id);
 }
 var PAPER_EFFECT_BLENDS = ["multiply", "normal", "overlay", "soft-light", "screen", "color"];
 var paperVersion = 1;
@@ -3479,7 +3479,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
   /** Set while an operation that changes wet paint runs: the simulation before it (for undo). */
   __init106() {this.wetOp = null}
   /** The effects provider slot (see `setEffectsProvider`). */
-  __init107() {this.effects = new (0, _chunkOPSK22DLcjs.EffectsSlot)()}
+  __init107() {this.effects = new (0, _chunk2K5TELHVcjs.EffectsSlot)()}
   __init108() {this.effectsRenderer = new PaintEffectsRenderer()}
   __init109() {this.paperEffectNodeCache = null}
   constructor(options = {}) {;_class10.prototype.__init72.call(this);_class10.prototype.__init73.call(this);_class10.prototype.__init74.call(this);_class10.prototype.__init75.call(this);_class10.prototype.__init76.call(this);_class10.prototype.__init77.call(this);_class10.prototype.__init78.call(this);_class10.prototype.__init79.call(this);_class10.prototype.__init80.call(this);_class10.prototype.__init81.call(this);_class10.prototype.__init82.call(this);_class10.prototype.__init83.call(this);_class10.prototype.__init84.call(this);_class10.prototype.__init85.call(this);_class10.prototype.__init86.call(this);_class10.prototype.__init87.call(this);_class10.prototype.__init88.call(this);_class10.prototype.__init89.call(this);_class10.prototype.__init90.call(this);_class10.prototype.__init91.call(this);_class10.prototype.__init92.call(this);_class10.prototype.__init93.call(this);_class10.prototype.__init94.call(this);_class10.prototype.__init95.call(this);_class10.prototype.__init96.call(this);_class10.prototype.__init97.call(this);_class10.prototype.__init98.call(this);_class10.prototype.__init99.call(this);_class10.prototype.__init100.call(this);_class10.prototype.__init101.call(this);_class10.prototype.__init102.call(this);_class10.prototype.__init103.call(this);_class10.prototype.__init104.call(this);_class10.prototype.__init105.call(this);_class10.prototype.__init106.call(this);_class10.prototype.__init107.call(this);_class10.prototype.__init108.call(this);_class10.prototype.__init109.call(this);_class10.prototype.__init110.call(this);_class10.prototype.__init111.call(this);_class10.prototype.__init112.call(this);_class10.prototype.__init113.call(this);
@@ -4154,7 +4154,7 @@ var PaintEditorController = (_class10 = class _PaintEditorController {
       if (v === null) merged[k] = d.defaults[k];
       else given[k] = v;
     }
-    return { ...merged, ..._chunkOPSK22DLcjs.resolveEffectValues.call(void 0, { ...d, defaults: merged }, given) };
+    return { ...merged, ..._chunk2K5TELHVcjs.resolveEffectValues.call(void 0, { ...d, defaults: merged }, given) };
   }
   /** Renders a generator, overlay or title effect at the canvas size. */
   renderEffectCanvas(d, values, time = 0) {
@@ -8917,7 +8917,7 @@ function createPaintEffectsToolProvider(controller, options = {}) {
     if (changes.enabled !== void 0) throw new Error("enabled does not apply here: hide an effect layer with update_layer visible false, or remove the effect paper.");
   };
   const values = (v) => v;
-  return withPaintPlayback(_chunkOPSK22DLcjs.createEffectToolProvider.call(void 0, {
+  return withPaintPlayback(_chunk2K5TELHVcjs.createEffectToolProvider.call(void 0, {
     id: _nullishCoalesce(options.id, () => ( "paint-effects")),
     namespace: options.namespace,
     title: "Paint effects",

package/dist/paint-editor/index.js

@@ -1,6 +1,6 @@
 import {
   toVideoFfmpeg
-} from "../chunk-CSM5T6SE.js";
+} from "../chunk-6QLTUGMO.js";
 import {
   deserializeLayers,
   exportPsd,
@@ -137,7 +137,7 @@ import {
   EffectsSlot,
   createEffectToolProvider,
   resolveEffectValues
-} from "../chunk-TCZ2J7PR.js";
+} from "../chunk-PQYDJ2AV.js";
 import "../chunk-V2ZCJRDM.js";
 import {
   CoverageMap,

package/dist/vector/index.cjs

@@ -558,7 +558,7 @@ var _chunkNM3G4VQTcjs = require('../chunk-NM3G4VQT.cjs');
 
 
 
-var _chunkOPSK22DLcjs = require('../chunk-OPSK22DL.cjs');
+var _chunk2K5TELHVcjs = require('../chunk-2K5TELHV.cjs');
 require('../chunk-WOFXZ3XU.cjs');
 
 
@@ -7328,7 +7328,7 @@ var VectorEditorController = (_class7 = class _VectorEditorController {
   }
   // --- Provider effects ---
   /** The effects provider slot (see `setEffectsProvider`). */
-  __init59() {this.effects = new (0, _chunkOPSK22DLcjs.EffectsSlot)()}
+  __init59() {this.effects = new (0, _chunk2K5TELHVcjs.EffectsSlot)()}
   /** The registered effects provider, or `null`. */
   get effectsProvider() {
     return this.effects.provider;
@@ -7352,10 +7352,10 @@ var VectorEditorController = (_class7 = class _VectorEditorController {
   /** The effect's picture as group children, scaled into `box` (an affine fit). */
   async vectorEffectPicture(effect, values) {
     const provider = this.effects.require();
-    if (!provider.applyVectorEffect) throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`${provider.name} has no vector effects.`);
+    if (!provider.applyVectorEffect) throw new (0, _chunk2K5TELHVcjs.EffectUnsupportedError)(`${provider.name} has no vector effects.`);
     const d = await provider.describe(effect);
-    if (d.kind !== "vector") throw new (0, _chunkOPSK22DLcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.kind} effect; the vector editor adds vector effects, which bring their own picture${d.kind === "motion" ? " (apply motion in the animation editor)" : ""}.`, d.id);
-    const resolved = _chunkOPSK22DLcjs.resolveEffectValues.call(void 0, d, values);
+    if (d.kind !== "vector") throw new (0, _chunk2K5TELHVcjs.EffectUnsupportedError)(`"${d.id}" (${d.name}) is a ${d.kind} effect; the vector editor adds vector effects, which bring their own picture${d.kind === "motion" ? " (apply motion in the animation editor)" : ""}.`, d.id);
+    const resolved = _chunk2K5TELHVcjs.resolveEffectValues.call(void 0, d, values);
     const motion = await provider.applyVectorEffect(d.id, this.toSvg(), resolved);
     const parsed = _chunkBQE3Y6ZOcjs.parseVectorSvg.call(void 0, motion.svg);
     if (!parsed.nodes.length) throw new Error(`"${d.name}" drew no shapes the editor can read.`);
@@ -18172,7 +18172,7 @@ function createVectorEffectsToolProvider(controller, options = {}) {
     const effects = _optionalChain([g, 'optionalAccess', _765 => _765.providerEffect]) ? [info(g)] : [];
     return { target: id, effect: _nullishCoalesce(removed, () => ( effects[0])), effects };
   };
-  return _chunkOPSK22DLcjs.createEffectToolProvider.call(void 0, {
+  return _chunk2K5TELHVcjs.createEffectToolProvider.call(void 0, {
     id: _nullishCoalesce(options.id, () => ( "vector-effects")),
     namespace: options.namespace,
     title: "Vector effects",

package/dist/vector/index.js

@@ -558,7 +558,7 @@ import {
   EffectsSlot,
   createEffectToolProvider,
   resolveEffectValues
-} from "../chunk-TCZ2J7PR.js";
+} from "../chunk-PQYDJ2AV.js";
 import "../chunk-V2ZCJRDM.js";
 import {
   GRAIN_PATTERNS