@bensitu/image-editor 1.4.0 → 1.4.2

package/src/image-editor.js

@@ -1,13 +1,14 @@
 /**
  * @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.
  */
 
 let fabric = null;
+const INTERNAL_OPERATION_TOKEN = Symbol.for('ImageEditorInternalOperation');
 
 /**
  * Returns the ambient global scope used to discover a globally loaded Fabric.js namespace.
@@ -252,12 +253,16 @@ function ensureFabric() {
             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 = new Map();
 
             this._lastMask = null;
             this._lastMaskInitialLeft = null;
@@ -357,6 +362,10 @@ function ensureFabric() {
             this.historyManager = new HistoryManager(this.maxHistorySize);
             this._visibilityStateByElement = new WeakMap();
             this._activeAnimationRejectors = new Set();
+            this._isLoading = false;
+            this._activeOperationName = null;
+            this._activeOperationToken = null;
+            this._elementOriginalPointerEvents = new Map();
             this._containerOriginalOverflow = null;
             this._lastContainerViewportSize = null;
             this._canvasElementOriginalStyle = null;
@@ -589,6 +598,13 @@ function ensureFabric() {
             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
@@ -740,8 +756,10 @@ function ensureFabric() {
             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();
 
@@ -750,14 +768,16 @@ function ensureFabric() {
                 if (this._disposed || !this.canvas) throw new Error('Editor was disposed while loading image');
 
                 let loadSource = imageBase64;
-                if (this.options.downsampleOnLoad) {
+                const downsampleMaxWidth = Number(this.options.downsampleMaxWidth);
+                const downsampleMaxHeight = Number(this.options.downsampleMaxHeight);
+                if (this.options.downsampleOnLoad && downsampleMaxWidth > 0 && downsampleMaxHeight > 0) {
                     const shouldResize =
-                        imageElement.naturalWidth > this.options.downsampleMaxWidth ||
-                        imageElement.naturalHeight > this.options.downsampleMaxHeight;
+                        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);
@@ -765,10 +785,12 @@ function ensureFabric() {
                             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);
@@ -844,6 +866,9 @@ function ensureFabric() {
             } catch (error) {
                 await this._rollbackLoadImageTransaction(transaction);
                 throw error;
+            } finally {
+                this._isLoading = false;
+                if (!this._disposed && this.canvas) this._updateUI();
             }
         }
 
@@ -862,6 +887,22 @@ function ensureFabric() {
             );
         }
 
+        /**
+         * 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.
          * 
@@ -936,7 +977,6 @@ function ensureFabric() {
         _captureLoadImageTransaction() {
             return {
                 canvasState: this._serializeCanvasState(),
-                originalImage: this.originalImage,
                 baseImageScale: this.baseImageScale,
                 currentScale: this.currentScale,
                 currentRotation: this.currentRotation,
@@ -961,9 +1001,14 @@ function ensureFabric() {
 
         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);
             }
 
@@ -973,16 +1018,20 @@ function ensureFabric() {
             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();
@@ -990,6 +1039,22 @@ function ensureFabric() {
             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.
          * 
@@ -1002,12 +1067,20 @@ function ensureFabric() {
          * @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);
         }
 
@@ -1315,7 +1388,11 @@ function ensureFabric() {
                     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 {
@@ -1387,9 +1464,15 @@ function ensureFabric() {
          * @returns {number} A finite quality value between 0 and 1.
          * @private
          */
-        _normalizeQuality(quality) {
+        _normalizeQuality(quality, fallback = undefined) {
+            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));
         }
 
@@ -1444,62 +1527,70 @@ function ensureFabric() {
             };
         }
 
-        /**
-         * 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 : 30000;
-                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')));
-                    // Clearing src prevents later network/decode work; already-dispatched onload work is guarded by settle().
-                    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');
         }
 
         /**
@@ -1513,13 +1604,16 @@ function ensureFabric() {
          * @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,
@@ -1527,6 +1621,71 @@ function ensureFabric() {
                 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');
         }
 
         /** 
@@ -1698,19 +1857,80 @@ function ensureFabric() {
          * @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];
         }
 
-        _assertIdleForOperation(operationName) {
+        _isOwnInternalOperation(options) {
+            const token = this._getInternalOperationToken(options);
+            return !!token && token === this._activeOperationToken;
+        }
+
+        _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);
@@ -1824,7 +2044,15 @@ function ensureFabric() {
          * @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();
+                });
         }
 
         /** 
@@ -1894,6 +2122,11 @@ function ensureFabric() {
          */
         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');
@@ -1901,6 +2134,8 @@ function ensureFabric() {
                 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;
@@ -1942,6 +2177,13 @@ function ensureFabric() {
                         ? 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 {
@@ -2035,22 +2277,48 @@ function ensureFabric() {
 
         _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;
+                }
             });
         }
 
@@ -2336,6 +2604,11 @@ function ensureFabric() {
                 }
             }
 
+            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 = {
@@ -2435,7 +2708,7 @@ function ensureFabric() {
          */
         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));
@@ -2470,6 +2743,99 @@ function ensureFabric() {
             }
         }
 
+        _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 : undefined
+                };
+            });
+        }
+
+        _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 !== undefined) 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.
          *
@@ -2547,10 +2913,14 @@ function ensureFabric() {
         _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; }
             });
             canvasObjects.forEach(object => {
@@ -2714,20 +3084,38 @@ function ensureFabric() {
             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);
             }
         }
 
@@ -2783,7 +3171,7 @@ function ensureFabric() {
          */
         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);
@@ -2791,7 +3179,11 @@ function ensureFabric() {
 
             if (!exportImageArea) {
                 const masks = this.canvas.getObjects().filter(object => object.maskId || object.maskLabel);
+                const editableMasks = this.canvas.getObjects().filter(object => object.maskId);
                 const maskVisibilityBackups = masks.map(mask => ({ object: mask, visible: mask.visible }));
+                const maskStyleBackups = this._captureMaskExportBackups(editableMasks);
+                const labelBackups = this._captureMaskLabelBackups(editableMasks);
+                const activeObjectBackup = this._captureActiveObjectBackup();
 
                 try {
                     masks.forEach(mask => { mask.set({ visible: false }); });
@@ -2800,32 +3192,30 @@ function ensureFabric() {
 
                     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 => {
                         try { backup.object.set({ visible: backup.visible }); } catch (error) { void error; }
                     });
+                    this._restoreMaskExportBackups(maskStyleBackups);
+                    this._restoreMaskLabelBackups(labelBackups);
+                    this._restoreActiveObjectBackup(activeObjectBackup);
                     this.canvas.renderAll();
                 }
             }
 
             // Render masks as export shapes without mutating their editable styles.
             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 {
@@ -2844,30 +3234,20 @@ function ensureFabric() {
                 // Compute an integer canvas region for the base image.
                 this.originalImage.setCoords();
                 const imageBounds = this.originalImage.getBoundingRect(true, true);
-                const exportRegion = this._getClampedCanvasRegion(imageBounds, { includePartialPixels: false });
+                const exportRegion = this._getClampedCanvasRegion(imageBounds);
 
                 // Crop precisely in offscreen canvas
-                finalBase64 = this._exportCanvasRegionToDataURL({
+                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();
             }
 
@@ -2915,6 +3295,7 @@ function ensureFabric() {
             } = options;
 
             const safeFileType = this._normalizeImageFormat(fileType);
+            const normalizedQuality = this._normalizeQuality(quality);
 
             // Generate the data URL in the requested export mode.
             let imageBase64;
@@ -2922,14 +3303,14 @@ function ensureFabric() {
                 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
                 });
             }
@@ -2949,7 +3330,7 @@ function ensureFabric() {
                             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); }
                     };
@@ -2959,13 +3340,8 @@ function ensureFabric() {
             }
 
             // Convert the final data URL to a File with the requested MIME type.
-            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 });
         }
 
@@ -3126,6 +3502,30 @@ function ensureFabric() {
                     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; }
             };
@@ -3205,23 +3605,19 @@ function ensureFabric() {
                 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();
@@ -3229,7 +3625,8 @@ function ensureFabric() {
                     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();
@@ -3321,6 +3718,7 @@ function ensureFabric() {
             const canUndo = this.historyManager?.canUndo();
             const canRedo = this.historyManager?.canRedo();
             const isInCropMode = !!this._cropMode;
+            const isBusy = this.isBusy();
 
             if (isInCropMode) {
                 // Disable all controls except the crop action buttons while crop mode is active.
@@ -3336,23 +3734,27 @@ function ensureFabric() {
                 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);
         }
 
         /**
@@ -3369,13 +3771,17 @@ function ensureFabric() {
                 element.disabled = !!disabled;
                 return;
             }
+            if (!this._elementOriginalPointerEvents) this._elementOriginalPointerEvents = 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) ?? '';
             }
         }
 
@@ -3474,6 +3880,9 @@ function ensureFabric() {
             if (this.animationQueue) {
                 this.animationQueue.cancelAll(new Error('Editor disposed'));
             }
+            this._isLoading = false;
+            this._activeOperationName = null;
+            this._activeOperationToken = null;
 
             // Remove bound DOM event listeners
             try {
@@ -3520,17 +3929,20 @@ function ensureFabric() {
             }
             this._handlersByElementKey = {};
             this._elementCache = {};
+            this._elementOriginalPointerEvents = 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 = undefined;
+            this._lastContainerViewportSize = null;
             this._initialized = false;
         }
     }
@@ -3585,6 +3997,7 @@ function ensureFabric() {
              */
             this.isRunning = false;
             this.currentTask = null;
+            this._generation = 0;
         }
 
         /**
@@ -3607,6 +4020,7 @@ function ensureFabric() {
         }
 
         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] : []),
@@ -3629,29 +4043,35 @@ function ensureFabric() {
          */
         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 {
+                while (this.animationTasks.length > 0 && generation === this._generation) {
+                    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 {
+                        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;
         }
     }
 
@@ -3722,9 +4142,9 @@ function ensureFabric() {
         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;