@bensitu/image-editor 1.4.0 → 1.4.2

package/dist/image-editor.esm.js

@@ -5,12 +5,13 @@ import fabricModule from "fabric";
 /**
  * @file image-editor.js
  * @module image-editor
- * @version 1.4.0
+ * @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.for("ImageEditorInternalOperation");
 function getGlobalScope() {
   if (typeof globalThis !== "undefined") return globalThis;
   if (typeof self !== "undefined") return self;
@@ -118,11 +119,15 @@ var ImageEditor = class {
     this.currentRotation = 0;
     this.maskCounter = 0;
     this.isAnimating = false;
+    this._isLoading = false;
+    this._activeOperationName = null;
+    this._activeOperationToken = null;
     this.elements = {};
     this.isImageLoadedToCanvas = false;
     this.maxHistorySize = 50;
     this._handlersByElementKey = {};
     this._elementCache = {};
+    this._elementOriginalPointerEvents = /* @__PURE__ */ new Map();
     this._lastMask = null;
     this._lastMaskInitialLeft = null;
     this._lastMaskInitialTop = null;
@@ -211,6 +216,10 @@ var ImageEditor = class {
     this.historyManager = new HistoryManager(this.maxHistorySize);
     this._visibilityStateByElement = /* @__PURE__ */ new WeakMap();
     this._activeAnimationRejectors = /* @__PURE__ */ new Set();
+    this._isLoading = false;
+    this._activeOperationName = null;
+    this._activeOperationToken = null;
+    this._elementOriginalPointerEvents = /* @__PURE__ */ new Map();
     this._containerOriginalOverflow = null;
     this._lastContainerViewportSize = null;
     this._canvasElementOriginalStyle = null;
@@ -417,6 +426,12 @@ var ImageEditor = class {
     this.containerElement.style.overflowX = this._containerOriginalOverflow.overflowX;
     this.containerElement.style.overflowY = this._containerOriginalOverflow.overflowY;
   }
+  _restoreContainerOverflowSnapshot(snapshot) {
+    if (!this.containerElement || !this.containerElement.style || !snapshot) return;
+    this.containerElement.style.overflow = snapshot.overflow || "";
+    this.containerElement.style.overflowX = snapshot.overflowX || "";
+    this.containerElement.style.overflowY = snapshot.overflowY || "";
+  }
   /** 
    * DOM / UI bindings
    * @private
@@ -551,19 +566,23 @@ var ImageEditor = class {
     if (!this._fabricLoaded) return;
     if (!this.canvas || this._disposed) return;
     if (!imageBase64 || typeof imageBase64 !== "string" || !imageBase64.startsWith("data:image/")) return;
-    this._assertIdleForOperation("loadImage");
+    this._assertIdleForOperation("loadImage", options);
+    this._isLoading = true;
+    this._updateUI();
     this._warnOnImageLayoutOptionConflict();
     const transaction = this._captureLoadImageTransaction();
     try {
       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);
@@ -571,10 +590,12 @@ var ImageEditor = class {
             imageElement,
             targetWidth,
             targetHeight,
-            this.options.downsampleQuality,
+            this._normalizeQuality(this.options.downsampleQuality),
             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");
@@ -639,6 +660,9 @@ var ImageEditor = class {
     } catch (error) {
       await this._rollbackLoadImageTransaction(transaction);
       throw error;
+    } finally {
+      this._isLoading = false;
+      if (!this._disposed && this.canvas) this._updateUI();
     }
   }
   /**
@@ -649,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.
    * 
@@ -720,7 +753,6 @@ var ImageEditor = class {
   _captureLoadImageTransaction() {
     return {
       canvasState: this._serializeCanvasState(),
-      originalImage: this.originalImage,
       baseImageScale: this.baseImageScale,
       currentScale: this.currentScale,
       currentRotation: this.currentRotation,
@@ -744,9 +776,14 @@ var ImageEditor = class {
   }
   async _rollbackLoadImageTransaction(transaction) {
     if (!transaction || !this.canvas || this._disposed) return;
+    let didRestoreCanvasState = false;
     try {
-      if (transaction.canvasState) await this.loadFromState(transaction.canvasState);
+      if (transaction.canvasState) {
+        await this.loadFromState(transaction.canvasState);
+        didRestoreCanvasState = true;
+      }
     } catch (error) {
+      this._lastMask = null;
       this._reportError("loadImage rollback failed", error);
     }
     this.baseImageScale = transaction.baseImageScale;
@@ -755,22 +792,40 @@ var ImageEditor = class {
     this.maskCounter = transaction.maskCounter;
     this.isImageLoadedToCanvas = transaction.isImageLoadedToCanvas;
     this._lastSnapshot = transaction.lastSnapshot;
+    if (didRestoreCanvasState) {
+      this._restoreLastMaskReference(transaction.lastMask);
+    } else {
+      this._lastMask = null;
+    }
     this._lastMaskInitialLeft = transaction.lastMaskInitialLeft;
     this._lastMaskInitialTop = transaction.lastMaskInitialTop;
     this._lastMaskInitialWidth = transaction.lastMaskInitialWidth;
-    this._containerOriginalOverflow = transaction.containerOverflow;
     this._restoreElementVisibility(this.placeholderElement, transaction.placeholderVisibility);
     this._restoreElementVisibility(this._getCanvasVisibilityElement(), transaction.canvasVisibility);
     if (this.containerElement) {
       this.containerElement.scrollLeft = transaction.scrollLeft;
       this.containerElement.scrollTop = transaction.scrollTop;
-      this._restoreContainerOverflowState();
+      this._restoreContainerOverflowSnapshot(transaction.containerOverflow);
     }
     this._updateInputs();
     this._updateMaskList();
     this._updateUI();
     if (this.canvas) this.canvas.renderAll();
   }
+  _restoreLastMaskReference(previousLastMask) {
+    if (!this.canvas) {
+      this._lastMask = null;
+      return;
+    }
+    const masks = this.canvas.getObjects().filter((object) => object.maskId);
+    const previousMaskId = previousLastMask && previousLastMask.maskId;
+    this._lastMask = masks.find((mask) => mask.maskId === previousMaskId) || masks[masks.length - 1] || null;
+    if (!this._lastMask) {
+      this._lastMaskInitialLeft = null;
+      this._lastMaskInitialTop = null;
+      this._lastMaskInitialWidth = null;
+    }
+  }
   /**
    * Resamples the given image element to a new width and height and returns the result as a data URL.
    * 
@@ -783,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) {
@@ -1054,7 +1116,11 @@ var ImageEditor = class {
         maskStyleBackups.push(backup);
         mask.set(stylePatch);
       });
-      return callback();
+      const result = callback();
+      if (result && typeof result.then === "function") {
+        throw new Error("_withNormalizedMaskStyles callback must be synchronous");
+      }
+      return result;
     } finally {
       maskStyleBackups.forEach((backup) => {
         try {
@@ -1122,9 +1188,13 @@ var ImageEditor = class {
    * @returns {number} A finite quality value between 0 and 1.
    * @private
    */
-  _normalizeQuality(quality) {
+  _normalizeQuality(quality, fallback = void 0) {
+    const fallbackQuality = fallback == null ? this.options.downsampleQuality : fallback;
+    const numericFallback = fallbackQuality == null ? NaN : Number(fallbackQuality);
+    const safeFallback = Number.isFinite(numericFallback) ? Math.max(0, Math.min(1, numericFallback)) : 0.92;
+    if (quality == null) return safeFallback;
     const numericQuality = Number(quality);
-    if (!Number.isFinite(numericQuality)) return this.options.downsampleQuality ?? 0.92;
+    if (!Number.isFinite(numericQuality)) return safeFallback;
     return Math.max(0, Math.min(1, numericQuality));
   }
   /**
@@ -1175,64 +1245,63 @@ var ImageEditor = class {
       sourceHeight: Math.max(1, endY - sourceY)
     };
   }
-  /**
-   * Crops an image data URL to a source region using an offscreen canvas.
-   *
-   * @param {string} dataUrl - Source image data URL.
-   * @param {number} sourceX - Source region x coordinate.
-   * @param {number} sourceY - Source region y coordinate.
-   * @param {number} sourceWidth - Source region width.
-   * @param {number} sourceHeight - Source region height.
-   * @param {number} multiplier - Export multiplier already applied to the source data URL.
-   * @param {'jpeg'|'png'|'webp'} [format='jpeg'] - Output image format.
-   * @param {number} [quality=0.92] - Output image quality for lossy formats.
-   * @returns {Promise<string>} Resolves with the cropped image data URL.
-   * @private
-   */
-  async _cropDataUrl(dataUrl, sourceX, sourceY, sourceWidth, sourceHeight, multiplier, format = "jpeg", quality = 0.92) {
-    return new Promise((resolve, reject) => {
-      const imageElement = new Image();
-      let isSettled = false;
-      const timeoutMs = Number(this.options.imageLoadTimeoutMs);
-      const safeTimeoutMs = Number.isFinite(timeoutMs) && timeoutMs > 0 ? timeoutMs : 3e4;
-      let timerId;
-      const settle = (callback) => {
-        if (isSettled) return;
-        isSettled = true;
-        clearTimeout(timerId);
-        imageElement.onload = null;
-        imageElement.onerror = null;
-        callback();
-      };
-      timerId = setTimeout(() => {
-        settle(() => reject(new Error("Image crop load timed out")));
-        try {
-          imageElement.src = "";
-        } catch (error) {
-          void error;
-        }
-      }, safeTimeoutMs);
-      imageElement.onload = () => {
-        try {
-          const safeMultiplier = Math.max(1, Number(multiplier) || 1);
-          const scaledSourceX = Math.round(sourceX * safeMultiplier);
-          const scaledSourceY = Math.round(sourceY * safeMultiplier);
-          const scaledSourceWidth = Math.max(1, Math.round(sourceWidth * safeMultiplier));
-          const scaledSourceHeight = Math.max(1, Math.round(sourceHeight * safeMultiplier));
-          const offscreenCanvas = document.createElement("canvas");
-          offscreenCanvas.width = scaledSourceWidth;
-          offscreenCanvas.height = scaledSourceHeight;
-          const context = offscreenCanvas.getContext("2d");
-          if (!context) throw new Error("2D canvas context is unavailable");
-          context.drawImage(imageElement, scaledSourceX, scaledSourceY, scaledSourceWidth, scaledSourceHeight, 0, 0, scaledSourceWidth, scaledSourceHeight);
-          settle(() => resolve(offscreenCanvas.toDataURL(`image/${format}`, quality)));
-        } catch (error) {
-          settle(() => reject(error));
-        }
-      };
-      imageElement.onerror = (error) => settle(() => reject(error));
-      imageElement.src = dataUrl;
-    });
+  _hasFractionalCanvasEdge(value) {
+    const numericValue = Number(value);
+    if (!Number.isFinite(numericValue)) return false;
+    return Math.abs(numericValue - Math.round(numericValue)) > 0.01;
+  }
+  _getPartialExportEdges(bounds) {
+    if (!bounds) return null;
+    const angle = Math.abs((Number(this.originalImage && this.originalImage.angle) || 0) % 90);
+    const isAxisAligned = angle < 0.01 || Math.abs(angle - 90) < 0.01;
+    if (!isAxisAligned) return null;
+    return {
+      left: this._hasFractionalCanvasEdge(bounds.left),
+      top: this._hasFractionalCanvasEdge(bounds.top),
+      right: this._hasFractionalCanvasEdge((Number(bounds.left) || 0) + (Number(bounds.width) || 0)),
+      bottom: this._hasFractionalCanvasEdge((Number(bounds.top) || 0) + (Number(bounds.height) || 0))
+    };
+  }
+  async _sealPartialTransparentEdges(dataUrl, edges) {
+    if (!edges || !Object.values(edges).some(Boolean)) return dataUrl;
+    const imageElement = await this._createImageElement(dataUrl);
+    const width = Math.max(1, imageElement.naturalWidth || imageElement.width || 1);
+    const height = Math.max(1, imageElement.naturalHeight || imageElement.height || 1);
+    const offscreenCanvas = document.createElement("canvas");
+    offscreenCanvas.width = width;
+    offscreenCanvas.height = height;
+    const context = offscreenCanvas.getContext("2d");
+    if (!context) throw new Error("2D canvas context is unavailable");
+    context.drawImage(imageElement, 0, 0, width, height);
+    const imageData = context.getImageData(0, 0, width, height);
+    const pixels = imageData.data;
+    const sealPixel = (x, y, fallbackX, fallbackY) => {
+      const index = (y * width + x) * 4;
+      const fallbackIndex = (fallbackY * width + fallbackX) * 4;
+      if (pixels[index + 3] === 0 && pixels[fallbackIndex + 3] > 0) {
+        pixels[index] = pixels[fallbackIndex];
+        pixels[index + 1] = pixels[fallbackIndex + 1];
+        pixels[index + 2] = pixels[fallbackIndex + 2];
+        pixels[index + 3] = pixels[fallbackIndex + 3];
+      }
+      if (pixels[index + 3] > 0 && pixels[index + 3] < 255) {
+        pixels[index + 3] = 255;
+      }
+    };
+    if (edges.left && width > 1) {
+      for (let y = 0; y < height; y += 1) sealPixel(0, y, 1, y);
+    }
+    if (edges.right && width > 1) {
+      for (let y = 0; y < height; y += 1) sealPixel(width - 1, y, width - 2, y);
+    }
+    if (edges.top && height > 1) {
+      for (let x = 0; x < width; x += 1) sealPixel(x, 0, x, 1);
+    }
+    if (edges.bottom && height > 1) {
+      for (let x = 0; x < width; x += 1) sealPixel(x, height - 1, x, height - 2);
+    }
+    context.putImageData(imageData, 0, 0);
+    return offscreenCanvas.toDataURL("image/png");
   }
   /**
    * Exports a source region directly through Fabric's region export options.
@@ -1245,13 +1314,16 @@ var ImageEditor = class {
    * @param {number} [region.multiplier=1] - Export multiplier.
    * @param {number} [region.quality=0.92] - Output image quality for lossy formats.
    * @param {'jpeg'|'png'|'webp'} [region.format='jpeg'] - Output image format.
+   * @param {Object|null} [region.sealPartialEdges=null] - Fractional canvas edges whose alpha should be sealed.
    * @returns {Promise<string>} Resolves with an image data URL for the cropped region.
    * @private
    */
-  _exportCanvasRegionToDataURL({ sourceX, sourceY, sourceWidth, sourceHeight, multiplier = 1, quality = 0.92, format = "jpeg" }) {
+  async _exportCanvasRegionToDataURL({ sourceX, sourceY, sourceWidth, sourceHeight, multiplier = 1, quality = 0.92, format = "jpeg", sealPartialEdges = null }) {
     const safeMultiplier = Math.max(1, Number(multiplier) || 1);
-    return this.canvas.toDataURL({
-      format,
+    const safeFormat = this._normalizeImageFormat(format);
+    const exportFormat = safeFormat === "jpeg" ? "png" : safeFormat;
+    let regionDataUrl = this.canvas.toDataURL({
+      format: exportFormat,
       quality,
       multiplier: safeMultiplier,
       left: sourceX,
@@ -1259,6 +1331,61 @@ var ImageEditor = class {
       width: sourceWidth,
       height: sourceHeight
     });
+    regionDataUrl = await this._sealPartialTransparentEdges(regionDataUrl, sealPartialEdges);
+    if (safeFormat !== "jpeg") return regionDataUrl;
+    return this._convertDataUrlToOpaqueJpeg(regionDataUrl, quality);
+  }
+  async _convertDataUrlToOpaqueJpeg(dataUrl, quality = 0.92) {
+    const imageElement = await this._createImageElement(dataUrl);
+    const width = Math.max(1, imageElement.naturalWidth || imageElement.width || 1);
+    const height = Math.max(1, imageElement.naturalHeight || imageElement.height || 1);
+    const offscreenCanvas = document.createElement("canvas");
+    offscreenCanvas.width = width;
+    offscreenCanvas.height = height;
+    const context = offscreenCanvas.getContext("2d");
+    if (!context) throw new Error("2D canvas context is unavailable");
+    context.fillStyle = this._getJpegBackgroundColor();
+    context.fillRect(0, 0, width, height);
+    context.drawImage(imageElement, 0, 0, width, height);
+    return offscreenCanvas.toDataURL("image/jpeg", this._normalizeQuality(quality));
+  }
+  _getJpegBackgroundColor() {
+    const backgroundColor = String(this.options.backgroundColor || "").trim();
+    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.
@@ -1416,17 +1543,70 @@ var ImageEditor = class {
    * @public
    */
   scaleImage(factor, options = {}) {
-    return this.animationQueue.add(() => this._scaleImageImpl(factor, options));
+    try {
+      this._assertCanQueueAnimation("scaleImage", options);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+    return this.animationQueue.add(() => this._scaleImageImpl(factor, options)).finally(() => {
+      if (!this._disposed && this.canvas) this._updateUI();
+    });
+  }
+  _getInternalOperationToken(options) {
+    return options && options[INTERNAL_OPERATION_TOKEN];
+  }
+  _isOwnInternalOperation(options) {
+    const token = this._getInternalOperationToken(options);
+    return !!token && token === this._activeOperationToken;
   }
-  _assertIdleForOperation(operationName) {
+  _beginBusyOperation(operationName) {
+    const token = Symbol(operationName);
+    this._activeOperationName = operationName;
+    this._activeOperationToken = token;
+    this._updateUI();
+    return token;
+  }
+  _endBusyOperation(token) {
+    if (token && token === this._activeOperationToken) {
+      this._activeOperationName = null;
+      this._activeOperationToken = null;
+      this._updateUI();
+    }
+  }
+  _withInternalOperationOptions(token, options = {}) {
+    return {
+      ...options,
+      [INTERNAL_OPERATION_TOKEN]: token
+    };
+  }
+  _assertEditorAvailable(operationName) {
     if (this._disposed || !this.canvas) throw new Error(`${operationName} cannot run after the editor has been disposed`);
+  }
+  _assertIdleForOperation(operationName, options = {}) {
+    this._assertEditorAvailable(operationName);
+    const isOwnInternalOperation = this._isOwnInternalOperation(options);
     if (this.isAnimating || this.animationQueue && this.animationQueue.isBusy()) {
       throw new Error(`${operationName} cannot run while an animation is running`);
     }
+    if (this._isLoading && !isOwnInternalOperation) {
+      throw new Error(`${operationName} cannot run while an image is loading`);
+    }
+    if (this._activeOperationToken && !isOwnInternalOperation) {
+      throw new Error(`${operationName} cannot run while ${this._activeOperationName || "another operation"} is running`);
+    }
+  }
+  _assertCanQueueAnimation(operationName, options = {}) {
+    this._assertEditorAvailable(operationName);
+    if (this._isLoading && !this._isOwnInternalOperation(options)) {
+      throw new Error(`${operationName} cannot run while an image is loading`);
+    }
+    if (this._activeOperationToken && !this._isOwnInternalOperation(options)) {
+      throw new Error(`${operationName} cannot run while ${this._activeOperationName || "another operation"} is running`);
+    }
   }
-  _canMutateNow(operationName) {
+  _canMutateNow(operationName, options = {}) {
     try {
-      this._assertIdleForOperation(operationName);
+      this._assertIdleForOperation(operationName, options);
       return true;
     } catch (error) {
       this._reportError(`${operationName} blocked`, error);
@@ -1531,7 +1711,14 @@ var ImageEditor = class {
    * @public
    */
   rotateImage(degrees, options = {}) {
-    return this.animationQueue.add(() => this._rotateImageImpl(degrees, options));
+    try {
+      this._assertCanQueueAnimation("rotateImage", options);
+    } catch (error) {
+      return Promise.reject(error);
+    }
+    return this.animationQueue.add(() => this._rotateImageImpl(degrees, options)).finally(() => {
+      if (!this._disposed && this.canvas) this._updateUI();
+    });
   }
   /** 
    * Rotates the original image by a given number of degrees, with animation.
@@ -1593,12 +1780,19 @@ var ImageEditor = class {
    */
   resetImageTransform() {
     if (!this.originalImage) return Promise.resolve();
+    try {
+      this._assertCanQueueAnimation("resetImageTransform");
+    } catch (error) {
+      return Promise.reject(error);
+    }
     return this.animationQueue.add(async () => {
       const before = this._lastSnapshot || this._captureCanvasStateOrThrow("resetImageTransform");
       await this._scaleImageImpl(1, { saveHistory: false });
       await this._rotateImageImpl(0, { saveHistory: false });
       const after = this._captureCanvasStateOrThrow("resetImageTransform");
       this._pushStateTransition(before, after);
+    }).finally(() => {
+      if (!this._disposed && this.canvas) this._updateUI();
     }).catch((error) => {
       this._reportError("resetImageTransform() failed", error);
       throw error;
@@ -1635,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) {
@@ -1713,22 +1910,46 @@ 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;
         clearTimeout(timerId);
-        imageElement.onload = null;
-        imageElement.onerror = null;
+        if (typeof imageElement.removeEventListener === "function") {
+          imageElement.removeEventListener("load", handleLoad);
+          imageElement.removeEventListener("error", handleError);
+        } else {
+          imageElement.onload = null;
+          imageElement.onerror = null;
+        }
         callback();
       };
-      imageElement.onload = () => settle(resolve);
-      imageElement.onerror = (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 });
+      } else {
+        imageElement.onload = handleLoad;
+        imageElement.onerror = handleError;
+      }
     });
   }
   /**
@@ -1993,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 = {
@@ -2081,7 +2306,7 @@ var ImageEditor = class {
    */
   removeAllMasks(options = {}) {
     if (!this.canvas) return;
-    if (!this._canMutateNow("removeAllMasks")) return;
+    if (!this._canMutateNow("removeAllMasks", options)) return;
     const saveHistory = options.saveHistory !== false;
     const masks = this.canvas.getObjects().filter((object) => object.maskId);
     masks.forEach((mask) => this._removeLabelForMask(mask));
@@ -2120,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.
    *
@@ -2192,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;
       }
@@ -2354,18 +2670,36 @@ var ImageEditor = class {
     this._assertIdleForOperation("mergeMasks");
     const masks = this.canvas.getObjects().filter((object) => object.maskId);
     if (!masks.length) return;
+    const beforeJson = this._serializeCanvasState();
+    const operationToken = this._beginBusyOperation("mergeMasks");
     this.canvas.discardActiveObject();
     this.canvas.renderAll();
     try {
-      const beforeJson = this._serializeCanvasState();
-      const merged = await this.exportImageBase64({ exportImageArea: true, multiplier: this.options.exportMultiplier });
-      this.removeAllMasks({ saveHistory: false });
-      await this.loadImage(merged, { preserveScroll: true, resetMaskCounter: false });
+      const merged = await this.exportImageBase64(this._withInternalOperationOptions(operationToken, {
+        exportImageArea: true,
+        multiplier: this.options.exportMultiplier,
+        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
+      }));
       const afterJson = this._serializeCanvasState();
       this._pushStateTransition(beforeJson, afterJson);
     } catch (error) {
       this._reportError("merge error", error);
+      try {
+        await this.loadFromState(beforeJson);
+      } catch (restoreError) {
+        this._reportError("mergeMasks rollback failed", restoreError);
+      }
       throw error;
+    } finally {
+      this._endBusyOperation(operationToken);
     }
   }
   /**
@@ -2416,14 +2750,18 @@ var ImageEditor = class {
    */
   async exportImageBase64(options = {}) {
     if (!this.originalImage) throw new Error("No image loaded");
-    this._assertIdleForOperation("exportImageBase64");
+    this._assertIdleForOperation("exportImageBase64", options);
     const exportImageArea = typeof options.exportImageArea === "boolean" ? options.exportImageArea : this.options.exportImageAreaByDefault;
     const multiplier = options.multiplier || this.options.exportMultiplier || 1;
     const quality = this._normalizeQuality(options.quality ?? this.options.downsampleQuality);
     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 });
@@ -2432,12 +2770,13 @@ var ImageEditor = class {
         this.canvas.renderAll();
         this.originalImage.setCoords();
         const imageBounds = this.originalImage.getBoundingRect(true, true);
-        const exportRegion = this._getClampedCanvasRegion(imageBounds, { includePartialPixels: false });
-        return this._exportCanvasRegionToDataURL({
+        const exportRegion = this._getClampedCanvasRegion(imageBounds);
+        return await this._exportCanvasRegionToDataURL({
           ...exportRegion,
           multiplier,
           quality,
-          format
+          format,
+          sealPartialEdges: this._getPartialExportEdges(imageBounds)
         });
       } finally {
         maskVisibilityBackups.forEach((backup) => {
@@ -2447,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));
@@ -2472,29 +2808,18 @@ var ImageEditor = class {
       this.canvas.renderAll();
       this.originalImage.setCoords();
       const imageBounds = this.originalImage.getBoundingRect(true, true);
-      const exportRegion = this._getClampedCanvasRegion(imageBounds, { includePartialPixels: false });
-      finalBase64 = this._exportCanvasRegionToDataURL({
+      const exportRegion = this._getClampedCanvasRegion(imageBounds);
+      finalBase64 = await this._exportCanvasRegionToDataURL({
         ...exportRegion,
         multiplier,
         quality,
-        format
+        format,
+        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;
@@ -2538,19 +2863,20 @@ var ImageEditor = class {
       fileName = this.options.defaultDownloadFileName ?? "exported_image.jpg"
     } = options;
     const safeFileType = this._normalizeImageFormat(fileType);
+    const normalizedQuality = this._normalizeQuality(quality);
     let imageBase64;
     if (mergeMask) {
       imageBase64 = await this.exportImageBase64({
         exportImageArea: true,
         multiplier,
-        quality,
+        quality: normalizedQuality,
         fileType: safeFileType
       });
     } else {
       imageBase64 = await this.exportImageBase64({
         exportImageArea: false,
         multiplier,
-        quality,
+        quality: normalizedQuality,
         fileType: safeFileType
       });
     }
@@ -2567,7 +2893,7 @@ var ImageEditor = class {
             const context = offscreenCanvas.getContext("2d");
             if (!context) throw new Error("Unable to create 2D canvas context for export conversion");
             context.drawImage(imageElement, 0, 0);
-            const convertedDataUrl = offscreenCanvas.toDataURL(`image/${safeFileType}`, quality);
+            const convertedDataUrl = offscreenCanvas.toDataURL(`image/${safeFileType}`, normalizedQuality);
             resolve(convertedDataUrl);
           } catch (error) {
             reject(error);
@@ -2577,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() {
@@ -2730,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;
@@ -2797,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();
@@ -2817,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;
@@ -2893,6 +3235,7 @@ var ImageEditor = class {
     const canUndo = this.historyManager?.canUndo();
     const canRedo = this.historyManager?.canRedo();
     const isInCropMode = !!this._cropMode;
+    const isBusy = this.isBusy();
     if (isInCropMode) {
       for (const key of Object.keys(this.elements || {})) {
         const element = this._getElement(key);
@@ -2905,23 +3248,27 @@ var ImageEditor = class {
       }
       return;
     }
-    this._setDisabled("zoomInBtn", !hasImage || this.isAnimating || this.currentScale >= this.options.maxScale);
-    this._setDisabled("zoomOutBtn", !hasImage || this.isAnimating || this.currentScale <= this.options.minScale);
-    this._setDisabled("rotateLeftBtn", !hasImage || this.isAnimating);
-    this._setDisabled("rotateRightBtn", !hasImage || this.isAnimating);
-    this._setDisabled("addMaskBtn", !hasImage || this.isAnimating);
-    this._setDisabled("removeMaskBtn", !hasSelectedMask || this.isAnimating);
-    this._setDisabled("removeAllMasksBtn", !hasMasks || this.isAnimating);
-    this._setDisabled("mergeBtn", !hasImage || !hasMasks || this.isAnimating);
-    this._setDisabled("downloadBtn", !hasImage || this.isAnimating);
-    this._setDisabled("resetBtn", !hasImage || isDefaultTransform || this.isAnimating);
-    this._setDisabled("undoBtn", !hasImage || this.isAnimating || !canUndo);
-    this._setDisabled("redoBtn", !hasImage || this.isAnimating || !canRedo);
-    this._setDisabled("cropBtn", !hasImage || this.isAnimating);
+    this._setDisabled("zoomInBtn", !hasImage || isBusy || this.currentScale >= this.options.maxScale);
+    this._setDisabled("zoomOutBtn", !hasImage || isBusy || this.currentScale <= this.options.minScale);
+    this._setDisabled("rotateLeftBtn", !hasImage || isBusy);
+    this._setDisabled("rotateRightBtn", !hasImage || isBusy);
+    this._setDisabled("addMaskBtn", !hasImage || isBusy);
+    this._setDisabled("removeMaskBtn", !hasSelectedMask || isBusy);
+    this._setDisabled("removeAllMasksBtn", !hasMasks || isBusy);
+    this._setDisabled("mergeBtn", !hasImage || !hasMasks || isBusy);
+    this._setDisabled("downloadBtn", !hasImage || isBusy);
+    this._setDisabled("resetBtn", !hasImage || isDefaultTransform || isBusy);
+    this._setDisabled("undoBtn", !hasImage || isBusy || !canUndo);
+    this._setDisabled("redoBtn", !hasImage || isBusy || !canRedo);
+    this._setDisabled("cropBtn", !hasImage || isBusy);
     this._setDisabled("applyCropBtn", true);
     this._setDisabled("cancelCropBtn", true);
-    this._setDisabled("imageInput", this.isAnimating);
-    this._setDisabled("uploadArea", this.isAnimating);
+    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);
   }
   /**
    * Enables or disables a specific UI element (typically a button) by its key.
@@ -2937,12 +3284,16 @@ var ImageEditor = class {
       element.disabled = !!disabled;
       return;
     }
+    if (!this._elementOriginalPointerEvents) this._elementOriginalPointerEvents = /* @__PURE__ */ new Map();
+    if (!this._elementOriginalPointerEvents.has(key)) {
+      this._elementOriginalPointerEvents.set(key, element.style.pointerEvents || "");
+    }
     if (disabled) {
       element.setAttribute("aria-disabled", "true");
       element.style.pointerEvents = "none";
     } else {
       element.removeAttribute("aria-disabled");
-      element.style.pointerEvents = "";
+      element.style.pointerEvents = this._elementOriginalPointerEvents.get(key) ?? "";
     }
   }
   _isElementDisabled(element) {
@@ -3028,6 +3379,9 @@ var ImageEditor = class {
     if (this.animationQueue) {
       this.animationQueue.cancelAll(new Error("Editor disposed"));
     }
+    this._isLoading = false;
+    this._activeOperationName = null;
+    this._activeOperationToken = null;
     try {
       for (const [key, handlers] of Object.entries(this._handlersByElementKey || {})) {
         const element = this._getElement(key);
@@ -3089,17 +3443,20 @@ var ImageEditor = class {
     }
     this._handlersByElementKey = {};
     this._elementCache = {};
+    this._elementOriginalPointerEvents = /* @__PURE__ */ new Map();
     this._clearMaskPlacementMemory();
     this.originalImage = null;
     this.baseImageScale = 1;
     this.currentScale = 1;
     this.currentRotation = 0;
     this.isAnimating = false;
+    this._isLoading = false;
     this._cropMode = false;
     this._cropRect = null;
     this._cropHandlers = [];
     this._cropPrevEvented = null;
     this._prevSelectionSetting = void 0;
+    this._lastContainerViewportSize = null;
     this._initialized = false;
   }
 };
@@ -3111,6 +3468,7 @@ var AnimationQueue = class {
     this.animationTasks = [];
     this.isRunning = false;
     this.currentTask = null;
+    this._generation = 0;
   }
   /**
    * Adds an animation function to the queue.
@@ -3130,6 +3488,7 @@ var AnimationQueue = class {
     return this.isRunning || this.animationTasks.length > 0;
   }
   cancelAll(reason = new Error("Animation queue cancelled")) {
+    this._generation += 1;
     const cancellationError = reason instanceof Error ? reason : new Error(String(reason));
     const tasks = [
       ...this.currentTask ? [this.currentTask] : [],
@@ -3151,26 +3510,33 @@ var AnimationQueue = class {
    */
   async _drainQueue() {
     if (this.isRunning) return;
+    const generation = this._generation;
     this.isRunning = true;
-    while (this.animationTasks.length > 0) {
-      const task = this.animationTasks.shift();
-      this.currentTask = task;
-      try {
-        const result = await task.animationFn();
-        if (!task.isSettled) {
-          task.isSettled = true;
-          task.resolve(result);
-        }
-      } catch (error) {
-        if (!task.isSettled) {
-          task.isSettled = true;
-          task.reject(error);
+    try {
+      while (this.animationTasks.length > 0 && generation === this._generation) {
+        const task = this.animationTasks.shift();
+        this.currentTask = task;
+        try {
+          const result = await task.animationFn();
+          if (generation === this._generation && !task.isSettled) {
+            task.isSettled = true;
+            task.resolve(result);
+          }
+        } catch (error) {
+          if (generation === this._generation && !task.isSettled) {
+            task.isSettled = true;
+            task.reject(error);
+          }
+        } finally {
+          if (generation === this._generation && this.currentTask === task) this.currentTask = null;
         }
-      } finally {
-        if (this.currentTask === task) this.currentTask = null;
+      }
+    } finally {
+      if (generation === this._generation) {
+        this.isRunning = false;
+        this.currentTask = null;
       }
     }
-    this.isRunning = false;
   }
 };
 var Command = class {
@@ -3215,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;