@bensitu/image-editor 1.4.1 → 1.4.2

package/dist/image-editor.esm.mjs

@@ -5,13 +5,13 @@ import fabricModule from "fabric";
 /**
  * @file image-editor.js
  * @module image-editor
- * @version 1.4.1
+ * @version 1.4.2
  * @author Ben Situ
  * @license MIT
  * @description Lightweight canvas-based image editor with masking/transform/export support.
  */
 var fabric = null;
-var INTERNAL_OPERATION_TOKEN = /* @__PURE__ */ Symbol("ImageEditorInternalOperation");
+var INTERNAL_OPERATION_TOKEN = /* @__PURE__ */ Symbol.for("ImageEditorInternalOperation");
 function getGlobalScope() {
   if (typeof globalThis !== "undefined") return globalThis;
   if (typeof self !== "undefined") return self;
@@ -575,12 +575,14 @@ var ImageEditor = class {
       const imageElement = await this._createImageElement(imageBase64);
       if (this._disposed || !this.canvas) throw new Error("Editor was disposed while loading image");
       let loadSource = imageBase64;
-      if (this.options.downsampleOnLoad) {
-        const shouldResize = imageElement.naturalWidth > this.options.downsampleMaxWidth || imageElement.naturalHeight > this.options.downsampleMaxHeight;
+      const downsampleMaxWidth = Number(this.options.downsampleMaxWidth);
+      const downsampleMaxHeight = Number(this.options.downsampleMaxHeight);
+      if (this.options.downsampleOnLoad && downsampleMaxWidth > 0 && downsampleMaxHeight > 0) {
+        const shouldResize = imageElement.naturalWidth > downsampleMaxWidth || imageElement.naturalHeight > downsampleMaxHeight;
         if (shouldResize) {
           const ratio = Math.min(
-            this.options.downsampleMaxWidth / imageElement.naturalWidth,
-            this.options.downsampleMaxHeight / imageElement.naturalHeight
+            downsampleMaxWidth / imageElement.naturalWidth,
+            downsampleMaxHeight / imageElement.naturalHeight
           );
           const targetWidth = Math.round(imageElement.naturalWidth * ratio);
           const targetHeight = Math.round(imageElement.naturalHeight * ratio);
@@ -592,6 +594,8 @@ var ImageEditor = class {
             imageBase64
           );
         }
+      } else if (this.options.downsampleOnLoad) {
+        this._reportWarning("loadImage: downsample limits must be positive numbers; using the original image");
       }
       const fabricImage = await this._createFabricImageFromURL(loadSource);
       if (this._disposed || !this.canvas) throw new Error("Editor was disposed while loading image");
@@ -669,6 +673,15 @@ var ImageEditor = class {
     const fabricInstance2 = ensureFabric();
     return !!(this.originalImage && fabricInstance2 && this.originalImage instanceof fabricInstance2.Image && this.originalImage.width > 0 && this.originalImage.height > 0);
   }
+  /**
+   * Checks whether the editor is in a temporary non-mutating state.
+   *
+   * @returns {boolean} True while loading, animating, cropping, or running a compound operation.
+   * @public
+   */
+  isBusy() {
+    return !!(this.isAnimating || this._cropMode || this._isLoading || this._activeOperationToken || this.animationQueue && this.animationQueue.isBusy());
+  }
   /**
    * Creates an HTMLImageElement from a given data URL.
    * 
@@ -740,7 +753,6 @@ var ImageEditor = class {
   _captureLoadImageTransaction() {
     return {
       canvasState: this._serializeCanvasState(),
-      originalImage: this.originalImage,
       baseImageScale: this.baseImageScale,
       currentScale: this.currentScale,
       currentRotation: this.currentRotation,
@@ -826,12 +838,19 @@ var ImageEditor = class {
    * @private
    */
   _resampleImageToDataURL(imageElement, targetWidth, targetHeight, quality = 0.92, sourceDataUrl = null) {
+    const sourceWidth = Math.max(1, Number(imageElement && (imageElement.naturalWidth || imageElement.width)) || 0);
+    const sourceHeight = Math.max(1, Number(imageElement && (imageElement.naturalHeight || imageElement.height)) || 0);
+    const safeTargetWidth = Math.round(Number(targetWidth));
+    const safeTargetHeight = Math.round(Number(targetHeight));
+    if (!Number.isFinite(safeTargetWidth) || !Number.isFinite(safeTargetHeight) || safeTargetWidth <= 0 || safeTargetHeight <= 0) {
+      throw new Error("Invalid image resample target dimensions");
+    }
     const offscreenCanvas = document.createElement("canvas");
-    offscreenCanvas.width = targetWidth;
-    offscreenCanvas.height = targetHeight;
+    offscreenCanvas.width = safeTargetWidth;
+    offscreenCanvas.height = safeTargetHeight;
     const context = offscreenCanvas.getContext("2d");
     if (!context) throw new Error("2D canvas context is unavailable");
-    context.drawImage(imageElement, 0, 0, imageElement.naturalWidth, imageElement.naturalHeight, 0, 0, targetWidth, targetHeight);
+    context.drawImage(imageElement, 0, 0, sourceWidth, sourceHeight, 0, 0, safeTargetWidth, safeTargetHeight);
     return offscreenCanvas.toDataURL(this._getDownsampleMimeType(sourceDataUrl), quality);
   }
   _getDataUrlMimeType(dataUrl) {
@@ -1332,10 +1351,42 @@ var ImageEditor = class {
   }
   _getJpegBackgroundColor() {
     const backgroundColor = String(this.options.backgroundColor || "").trim();
-    if (!backgroundColor || backgroundColor === "transparent") return "#ffffff";
-    if (/^rgba\([^)]*,\s*0(?:\.0+)?\s*\)$/i.test(backgroundColor)) return "#ffffff";
+    if (!backgroundColor || this._isTransparentCssColor(backgroundColor)) return "#ffffff";
     return backgroundColor;
   }
+  _isTransparentCssColor(color) {
+    const normalizedColor = String(color || "").trim().toLowerCase();
+    if (!normalizedColor || normalizedColor === "transparent") return true;
+    const hexAlphaMatch = normalizedColor.match(/^#(?:[0-9a-f]{3}([0-9a-f])|[0-9a-f]{6}([0-9a-f]{2}))$/i);
+    if (hexAlphaMatch) {
+      const alpha = hexAlphaMatch[1] || hexAlphaMatch[2];
+      return alpha === "0" || alpha === "00";
+    }
+    const slashAlphaMatch = normalizedColor.match(/^(?:rgba?|hsla?)\([^)]*\/\s*([^)]+)\)$/i);
+    if (slashAlphaMatch) return this._isZeroCssAlpha(slashAlphaMatch[1]);
+    const commaAlphaMatch = normalizedColor.match(/^(?:rgba|hsla)\((.*)\)$/i);
+    if (commaAlphaMatch) {
+      const parts = commaAlphaMatch[1].split(",");
+      if (parts.length >= 4) return this._isZeroCssAlpha(parts[parts.length - 1]);
+    }
+    return false;
+  }
+  _isZeroCssAlpha(alphaValue) {
+    const normalizedAlpha = String(alphaValue || "").trim();
+    if (!normalizedAlpha) return false;
+    if (normalizedAlpha.endsWith("%")) return Number.parseFloat(normalizedAlpha) === 0;
+    return Number(normalizedAlpha) === 0;
+  }
+  _decodeBase64Payload(base64Payload) {
+    const payload = String(base64Payload || "");
+    if (typeof atob === "function") {
+      return Uint8Array.from(atob(payload), (char) => char.charCodeAt(0));
+    }
+    if (typeof Buffer !== "undefined" && typeof Buffer.from === "function") {
+      return new Uint8Array(Buffer.from(payload, "base64"));
+    }
+    throw new Error("Base64 decoding is unavailable");
+  }
   /** 
    * Gets the top-left corner coordinates of the given object.
    * Used for geometry calculations (e.g., scale, rotate).
@@ -1778,6 +1829,9 @@ var ImageEditor = class {
       try {
         const state = typeof serializedState === "string" ? JSON.parse(serializedState) : serializedState;
         const editorMetadata = state && state.imageEditorMetadata ? state.imageEditorMetadata : null;
+        if (editorMetadata && Object.prototype.hasOwnProperty.call(editorMetadata, "version") && Number(editorMetadata.version) !== 1) {
+          this._reportWarning(`loadFromState: unsupported editor metadata version ${editorMetadata.version}`);
+        }
         this.canvas.loadFromJSON(state, async () => {
           try {
             if (this._disposed || !this.canvas) {
@@ -1856,12 +1910,12 @@ var ImageEditor = class {
   }
   _waitForImageElementReady(imageElement) {
     if (!imageElement) return Promise.resolve();
-    if (imageElement.complete || imageElement.naturalWidth > 0 || imageElement.width > 0) return Promise.resolve();
+    const hasLoadedDimensions = (Number(imageElement.naturalWidth) > 0 || Number(imageElement.width) > 0) && (Number(imageElement.naturalHeight) > 0 || Number(imageElement.height) > 0);
+    if (hasLoadedDimensions) return Promise.resolve();
+    if (imageElement.complete) return Promise.reject(new Error("Image could not be loaded while restoring state"));
     return new Promise((resolve, reject) => {
       let isSettled = false;
-      const timerId = setTimeout(() => {
-        settle(() => reject(new Error("Image load timed out while restoring state")));
-      }, this._getSafeTimeoutMs(this.options.imageLoadTimeoutMs));
+      let timerId;
       const settle = (callback) => {
         if (isSettled) return;
         isSettled = true;
@@ -1875,8 +1929,20 @@ var ImageEditor = class {
         }
         callback();
       };
-      const handleLoad = () => settle(resolve);
-      const handleError = (error) => settle(() => reject(error));
+      const handleLoad = () => {
+        const didLoad = (Number(imageElement.naturalWidth) > 0 || Number(imageElement.width) > 0) && (Number(imageElement.naturalHeight) > 0 || Number(imageElement.height) > 0);
+        settle(() => {
+          if (didLoad) {
+            resolve();
+          } else {
+            reject(new Error("Image could not be loaded while restoring state"));
+          }
+        });
+      };
+      const handleError = (error) => settle(() => reject(error instanceof Error ? error : new Error("Image could not be loaded while restoring state")));
+      timerId = setTimeout(() => {
+        settle(() => reject(new Error("Image load timed out while restoring state")));
+      }, this._getSafeTimeoutMs(this.options.imageLoadTimeoutMs));
       if (typeof imageElement.addEventListener === "function") {
         imageElement.addEventListener("load", handleLoad, { once: true });
         imageElement.addEventListener("error", handleError, { once: true });
@@ -2148,6 +2214,10 @@ var ImageEditor = class {
           });
       }
     }
+    if (!mask || typeof mask.set !== "function" || typeof mask.setCoords !== "function") {
+      this._reportWarning("fabricGenerator returned an invalid Fabric object");
+      return null;
+    }
     const styles = maskConfig.styles || {};
     const hasStyle = (property) => Object.prototype.hasOwnProperty.call(styles, property);
     const maskSettings = {
@@ -2275,6 +2345,93 @@ var ImageEditor = class {
       }
     }
   }
+  _captureMaskLabelBackups(masks) {
+    if (!this.canvas) return [];
+    const canvasObjects = new Set(this.canvas.getObjects());
+    return (masks || []).map((mask) => {
+      const label = mask && mask.__label ? mask.__label : null;
+      return {
+        mask,
+        label,
+        hadLabel: !!label,
+        labelInCanvas: !!label && canvasObjects.has(label),
+        visible: label ? label.visible : void 0
+      };
+    });
+  }
+  _restoreMaskLabelBackups(labelBackups) {
+    if (!this.canvas || !Array.isArray(labelBackups)) return;
+    const canvasObjects = new Set(this.canvas.getObjects());
+    labelBackups.forEach((backup) => {
+      if (!backup || !backup.mask) return;
+      try {
+        if (!backup.hadLabel) {
+          if (backup.mask.__label) this._removeLabelForMask(backup.mask);
+          return;
+        }
+        backup.mask.__label = backup.label;
+        if (!backup.label) return;
+        if (backup.labelInCanvas && !canvasObjects.has(backup.label)) {
+          this.canvas.add(backup.label);
+          canvasObjects.add(backup.label);
+        }
+        if (backup.visible !== void 0) backup.label.set({ visible: backup.visible });
+        if (backup.labelInCanvas) this.canvas.bringToFront(backup.label);
+        this._syncMaskLabel(backup.mask);
+      } catch (error) {
+        void error;
+      }
+    });
+  }
+  _captureActiveObjectBackup() {
+    if (!this.canvas) return null;
+    const activeObject = this.canvas.getActiveObject();
+    if (!activeObject) return null;
+    const selectedObjects = typeof activeObject.getObjects === "function" ? activeObject.getObjects() : [activeObject];
+    return { activeObject, selectedObjects };
+  }
+  _restoreActiveObjectBackup(activeObjectBackup) {
+    if (!this.canvas || !activeObjectBackup || !activeObjectBackup.activeObject) return;
+    const canvasObjects = this.canvas.getObjects();
+    const selectedObjects = Array.isArray(activeObjectBackup.selectedObjects) ? activeObjectBackup.selectedObjects : [];
+    const canRestore = selectedObjects.length ? selectedObjects.every((object) => canvasObjects.includes(object)) : canvasObjects.includes(activeObjectBackup.activeObject);
+    if (!canRestore) return;
+    try {
+      this.canvas.setActiveObject(activeObjectBackup.activeObject);
+    } catch (error) {
+      void error;
+    }
+  }
+  _captureMaskExportBackups(masks) {
+    return (masks || []).map((mask) => ({
+      object: mask,
+      visible: mask.visible,
+      opacity: mask.opacity,
+      fill: mask.fill,
+      strokeWidth: mask.strokeWidth,
+      stroke: mask.stroke,
+      selectable: mask.selectable,
+      lockRotation: mask.lockRotation
+    }));
+  }
+  _restoreMaskExportBackups(maskBackups) {
+    (maskBackups || []).forEach((backup) => {
+      try {
+        backup.object.set({
+          visible: backup.visible,
+          opacity: backup.opacity,
+          fill: backup.fill,
+          strokeWidth: backup.strokeWidth,
+          stroke: backup.stroke,
+          selectable: backup.selectable,
+          lockRotation: backup.lockRotation
+        });
+        backup.object.setCoords();
+      } catch (error) {
+        void error;
+      }
+    });
+  }
   /**
    * Returns a stable zero-based creation index for label callbacks.
    *
@@ -2347,10 +2504,14 @@ var ImageEditor = class {
   _hideAllMaskLabels() {
     if (!this.canvas) return;
     const canvasObjects = this.canvas.getObjects();
+    const canvasObjectSet = new Set(canvasObjects);
     const labels = canvasObjects.filter((object) => object.maskLabel);
     labels.forEach((label) => {
       try {
-        if (canvasObjects.includes(label)) this.canvas.remove(label);
+        if (canvasObjectSet.has(label)) {
+          this.canvas.remove(label);
+          canvasObjectSet.delete(label);
+        }
       } catch (error) {
         void error;
       }
@@ -2520,6 +2681,9 @@ var ImageEditor = class {
         fileType: "png"
       }));
       this.removeAllMasks(this._withInternalOperationOptions(operationToken, { saveHistory: false }));
+      if (this.canvas.getObjects().some((object) => object.maskId)) {
+        throw new Error("Masks could not be removed during merge");
+      }
       await this.loadImage(merged, this._withInternalOperationOptions(operationToken, {
         preserveScroll: true,
         resetMaskCounter: false
@@ -2593,7 +2757,11 @@ var ImageEditor = class {
     const format = this._normalizeImageFormat(options.fileType || options.format);
     if (!exportImageArea) {
       const masks2 = this.canvas.getObjects().filter((object) => object.maskId || object.maskLabel);
+      const editableMasks = this.canvas.getObjects().filter((object) => object.maskId);
       const maskVisibilityBackups = masks2.map((mask) => ({ object: mask, visible: mask.visible }));
+      const maskStyleBackups2 = this._captureMaskExportBackups(editableMasks);
+      const labelBackups2 = this._captureMaskLabelBackups(editableMasks);
+      const activeObjectBackup2 = this._captureActiveObjectBackup();
       try {
         masks2.forEach((mask) => {
           mask.set({ visible: false });
@@ -2618,19 +2786,16 @@ var ImageEditor = class {
             void error;
           }
         });
+        this._restoreMaskExportBackups(maskStyleBackups2);
+        this._restoreMaskLabelBackups(labelBackups2);
+        this._restoreActiveObjectBackup(activeObjectBackup2);
         this.canvas.renderAll();
       }
     }
     const masks = this.canvas.getObjects().filter((object) => object.maskId);
-    const maskStyleBackups = masks.map((mask) => ({
-      object: mask,
-      opacity: mask.opacity,
-      fill: mask.fill,
-      strokeWidth: mask.strokeWidth,
-      stroke: mask.stroke,
-      selectable: mask.selectable,
-      lockRotation: mask.lockRotation
-    }));
+    const maskStyleBackups = this._captureMaskExportBackups(masks);
+    const labelBackups = this._captureMaskLabelBackups(masks);
+    const activeObjectBackup = this._captureActiveObjectBackup();
     let finalBase64;
     try {
       masks.forEach((mask) => this._removeLabelForMask(mask));
@@ -2652,21 +2817,9 @@ var ImageEditor = class {
         sealPartialEdges: this._getPartialExportEdges(imageBounds)
       });
     } finally {
-      maskStyleBackups.forEach((backup) => {
-        try {
-          backup.object.set({
-            opacity: backup.opacity,
-            fill: backup.fill,
-            strokeWidth: backup.strokeWidth,
-            stroke: backup.stroke,
-            selectable: backup.selectable,
-            lockRotation: backup.lockRotation
-          });
-          backup.object.setCoords();
-        } catch (error) {
-          void error;
-        }
-      });
+      this._restoreMaskExportBackups(maskStyleBackups);
+      this._restoreMaskLabelBackups(labelBackups);
+      this._restoreActiveObjectBackup(activeObjectBackup);
       this.canvas.renderAll();
     }
     return finalBase64;
@@ -2750,13 +2903,8 @@ var ImageEditor = class {
         imageElement.src = imageBase64;
       });
     }
-    const binaryString = atob(imageDataUrl.split(",")[1]);
+    const bytes = this._decodeBase64Payload(imageDataUrl.split(",")[1]);
     const mime = `image/${safeFileType}`;
-    let byteIndex = binaryString.length;
-    const bytes = new Uint8Array(byteIndex);
-    while (byteIndex--) {
-      bytes[byteIndex] = binaryString.charCodeAt(byteIndex);
-    }
     return new File([bytes], fileName, { type: mime });
   }
   _clearMaskPlacementMemory() {
@@ -2903,6 +3051,30 @@ var ImageEditor = class {
         const nextScaleY = Math.min(maxCropHeight / cropHeight, Math.max(minCropHeight / cropHeight, Number(cropRect.scaleY) || 1));
         cropRect.set({ scaleX: nextScaleX, scaleY: nextScaleY });
         cropRect.setCoords();
+        const cropBounds = cropRect.getBoundingRect(true, true);
+        const imageLeft = Number(imageBounds.left) || 0;
+        const imageTop = Number(imageBounds.top) || 0;
+        const imageRight = imageLeft + (Number(imageBounds.width) || 0);
+        const imageBottom = imageTop + (Number(imageBounds.height) || 0);
+        let deltaX = 0;
+        let deltaY = 0;
+        if (cropBounds.left < imageLeft) {
+          deltaX = imageLeft - cropBounds.left;
+        } else if (cropBounds.left + cropBounds.width > imageRight) {
+          deltaX = imageRight - (cropBounds.left + cropBounds.width);
+        }
+        if (cropBounds.top < imageTop) {
+          deltaY = imageTop - cropBounds.top;
+        } else if (cropBounds.top + cropBounds.height > imageBottom) {
+          deltaY = imageBottom - (cropBounds.top + cropBounds.height);
+        }
+        if (deltaX || deltaY) {
+          cropRect.set({
+            left: (Number(cropRect.left) || 0) + deltaX,
+            top: (Number(cropRect.top) || 0) + deltaY
+          });
+          cropRect.setCoords();
+        }
         this.canvas.requestRenderAll();
       } catch (error) {
         void error;
@@ -2970,19 +3142,15 @@ var ImageEditor = class {
       const masks = this.canvas.getObjects().filter((object) => object.maskId);
       if (masks && masks.length) {
         masks.forEach((mask) => {
-          try {
-            mask.setCoords();
-            const maskBounds = mask.getBoundingRect(true, true);
-            const intersectsCrop = maskBounds.left < cropRegion.sourceX + cropRegion.sourceWidth && maskBounds.left + maskBounds.width > cropRegion.sourceX && maskBounds.top < cropRegion.sourceY + cropRegion.sourceHeight && maskBounds.top + maskBounds.height > cropRegion.sourceY;
-            this._removeLabelForMask(mask);
-            this.canvas.remove(mask);
-            if (shouldPreserveMasks && intersectsCrop) {
-              this._translateObjectByCanvasOffset(mask, -cropRegion.sourceX, -cropRegion.sourceY);
-              mask.set({ visible: true });
-              preservedMasks.push(mask);
-            }
-          } catch (error) {
-            this._reportWarning("applyCrop: failed to remove mask", error);
+          mask.setCoords();
+          const maskBounds = mask.getBoundingRect(true, true);
+          const intersectsCrop = maskBounds.left < cropRegion.sourceX + cropRegion.sourceWidth && maskBounds.left + maskBounds.width > cropRegion.sourceX && maskBounds.top < cropRegion.sourceY + cropRegion.sourceHeight && maskBounds.top + maskBounds.height > cropRegion.sourceY;
+          this._removeLabelForMask(mask);
+          this.canvas.remove(mask);
+          if (shouldPreserveMasks && intersectsCrop) {
+            this._translateObjectByCanvasOffset(mask, -cropRegion.sourceX, -cropRegion.sourceY);
+            mask.set({ visible: true });
+            preservedMasks.push(mask);
           }
         });
         this._clearMaskPlacementMemory();
@@ -2990,7 +3158,8 @@ var ImageEditor = class {
         this.canvas.renderAll();
       }
     } catch (error) {
-      this._reportWarning("applyCrop: error while removing masks", error);
+      await this._restoreStateAfterCropFailure(beforeJson, "applyCrop: failed to prepare masks", error);
+      return;
     }
     this._removeCropRect();
     this._cropMode = false;
@@ -3066,7 +3235,7 @@ var ImageEditor = class {
     const canUndo = this.historyManager?.canUndo();
     const canRedo = this.historyManager?.canRedo();
     const isInCropMode = !!this._cropMode;
-    const isBusy = this.isAnimating || this._isLoading || !!this._activeOperationToken || !!(this.animationQueue && this.animationQueue.isBusy());
+    const isBusy = this.isBusy();
     if (isInCropMode) {
       for (const key of Object.keys(this.elements || {})) {
         const element = this._getElement(key);
@@ -3094,6 +3263,10 @@ var ImageEditor = class {
     this._setDisabled("cropBtn", !hasImage || isBusy);
     this._setDisabled("applyCropBtn", true);
     this._setDisabled("cancelCropBtn", true);
+    this._setDisabled("scaleRate", !hasImage || isBusy);
+    this._setDisabled("rotationLeftInput", !hasImage || isBusy);
+    this._setDisabled("rotationRightInput", !hasImage || isBusy);
+    this._setDisabled("maskList", !hasImage || isBusy);
     this._setDisabled("imageInput", isBusy);
     this._setDisabled("uploadArea", isBusy);
   }
@@ -3408,9 +3581,9 @@ var HistoryManager = class {
   execute(command) {
     const result = command.execute();
     if (result && typeof result.then === "function") {
-      return Promise.resolve(result).then(() => {
+      return this.enqueue(() => Promise.resolve(result).then(() => {
         this.push(command);
-      });
+      }));
     }
     this.push(command);
     return result;