@overtone-art/canvas-editor-core 0.8.2 → 0.8.3

package/dist/index.mjs

@@ -3616,6 +3616,7 @@ function installClip(host, entries, sources, box, absolute) {
 
 // src/masks/store.ts
 var CANVAS_MASK_TARGET = "canvas";
+var MAX_MASK_LAYERS = 10;
 var DEFAULT_ENTRY = {
   mode: "add",
   linked: true,
@@ -3834,13 +3835,16 @@ var LayerMaskManager = class extends MaskStackStore {
     if (!host) return null;
     const sources = this.unwrap(target, host);
     const entries = this.entriesFor(target, sources);
+    if (entries.length >= MAX_MASK_LAYERS) return null;
     const entry = {
       ...DEFAULT_ENTRY,
       id: generateId(),
       name: options.name ?? "Mask",
       ...options.mode ? { mode: options.mode } : {},
       ...options.linked === void 0 ? {} : { linked: options.linked },
-      ...options.meta ? { meta: options.meta } : {}
+      ...options.meta ? { meta: options.meta } : {},
+      ...options.sourceLayer ? { sourceLayer: options.sourceLayer } : {},
+      ...options.sourceObject ? { sourceObject: options.sourceObject } : {}
     };
     if (target === CANVAS_MASK_TARGET) entry.linked = false;
     if (options.fit !== false) {
@@ -3910,6 +3914,48 @@ var LayerMaskManager = class extends MaskStackStore {
     this.commit(target, host, [], []);
     return true;
   }
+  /**
+   * Remove one mask from its host and restore it as an ordinary canvas layer.
+   * Its shape, text, paint and transform survive; only the mask relationship is
+   * removed, so it can be edited through every normal layer property panel.
+   */
+  unmask(target, maskId) {
+    const host = this.host(target);
+    if (!host) return null;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry2) => entry2.id === maskId);
+    if (index === -1) return null;
+    const sources = this.unwrap(target, host);
+    const source = sources[index];
+    if (!source) return null;
+    const entry = entries[index];
+    this.history.beginTransaction();
+    try {
+      this.endEdit(false);
+      entries.splice(index, 1);
+      sources.splice(index, 1);
+      if (!source.absolutePositioned && target !== CANVAS_MASK_TARGET) toCanvasSpace(source, host);
+      source.set({
+        absolutePositioned: false,
+        opacity: entry.sourceObject?.opacity ?? 1,
+        globalCompositeOperation: entry.sourceObject?.globalCompositeOperation ?? "source-over",
+        objectCaching: entry.sourceObject?.objectCaching ?? true
+      });
+      if (this.selected?.maskId === maskId) this.select(null, null);
+      this.commit(target, host, entries, sources, false);
+      const saved = entry.sourceLayer;
+      const restored = this.layers.add(saved?.type ?? layerTypeOf(source), source, saved?.name ?? entry.name);
+      restored.meta = saved?.meta ? structuredClone(saved.meta) : {};
+      this.layers.setVisibility(restored.id, saved?.visible ?? true);
+      this.layers.setLocked(restored.id, saved?.locked ?? false);
+      this.layers.setOpacity(restored.id, saved?.opacity ?? 1);
+      this.layers.select(restored.id);
+      this.history.save();
+      return restored;
+    } finally {
+      this.history.endTransaction();
+    }
+  }
   reorder(target, maskId, index) {
     const host = this.host(target);
     if (!host) return false;
@@ -3984,7 +4030,21 @@ var LayerMaskManager = class extends MaskStackStore {
     const below = index > 0 ? ordered[index - 1] : void 0;
     const resolved = target ?? (below && !below.meta.canvasMask ? below.id : CANVAS_MASK_TARGET);
     if (resolved === layerId) return null;
+    if (this.list(resolved).length >= MAX_MASK_LAYERS) return null;
     const object = layer.fabricObject;
+    const sourceLayer = {
+      type: layer.type,
+      name: layer.name,
+      visible: layer.visible,
+      locked: layer.locked,
+      opacity: layer.opacity,
+      ...Object.keys(layer.meta).length > 0 ? { meta: structuredClone(layer.meta) } : {}
+    };
+    const sourceObject = {
+      opacity: object.opacity ?? 1,
+      globalCompositeOperation: object.globalCompositeOperation ?? "source-over",
+      objectCaching: object.objectCaching
+    };
     if (!object.fill && object.type !== "image") object.set({ fill: "#000000" });
     const stackHost = this.host(resolved);
     const absolute = resolved === CANVAS_MASK_TARGET || needsAbsoluteSpace(this.list(resolved));
@@ -3994,7 +4054,7 @@ var LayerMaskManager = class extends MaskStackStore {
       if (this.canvas.getActiveObject() === object) this.canvas.discardActiveObject();
       this.canvas.remove(object);
       this.layers.remove(layerId);
-      const entry = this.add(resolved, object, { name: layer.name, fit: false });
+      const entry = this.add(resolved, object, { name: layer.name, fit: false, sourceLayer, sourceObject });
       return entry ? { target: resolved, entry } : null;
     } finally {
       this.history.endTransaction();
@@ -4072,6 +4132,11 @@ var LayerMaskManager = class extends MaskStackStore {
     return true;
   }
 };
+function layerTypeOf(object) {
+  if (object.type === "image") return "image";
+  if (object.type === "text" || object.type === "textbox" || object.type === "i-text") return "text";
+  return "shape";
+}
 
 // src/gradient.ts
 import { Color, Gradient } from "fabric";
@@ -5317,6 +5382,7 @@ export {
   LayerManager,
   LayerMaskManager,
   LicenseManager,
+  MAX_MASK_LAYERS,
   MaskController,
   MaskPresetManager,
   MaskRefinementError,