@bensitu/image-editor 1.5.1 → 1.5.2

package/image-editor.d.ts

@@ -56,6 +56,8 @@ declare module '@bensitu/image-editor' {
 
     exportMultiplier?: number;
     maxExportPixels?: number;
+    /** Maximum undo/redo history entries to keep. Large base64 images can make each snapshot expensive. */
+    maxHistorySize?: number;
     exportImageAreaByDefault?: boolean;
 
     defaultMaskWidth?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bensitu/image-editor",
-    "version": "1.5.1",
+    "version": "1.5.2",
     "description": "Lightweight canvas-based image editor",
     "main": "./dist/image-editor.cjs",
     "module": "./dist/image-editor.esm.mjs",

package/src/image-editor.js

@@ -1,7 +1,7 @@
 /**
  * @file image-editor.js
  * @module image-editor
- * @version 1.5.1
+ * @version 1.5.2
  * @author Ben Situ
  * @license MIT
  * @description Lightweight canvas-based image editor with masking/transform/export support.
@@ -133,6 +133,7 @@ function ensureFabric() {
      * @param {number} [options.imageLoadTimeoutMs=30000] - Timeout for image decode operations.
      * @param {number} [options.exportMultiplier=1] - Scale output image by this multiplier on export.
      * @param {number} [options.maxExportPixels=50000000] - Maximum output pixels allowed per export.
+     * @param {number} [options.maxHistorySize=50] - Maximum undo/redo history entries to keep. Large base64 images can make each snapshot expensive.
      * @param {boolean} [options.exportImageAreaByDefault=true] - Export only the image area (clipped to masks).
      * @param {number} [options.defaultMaskWidth=50] - Default width of new masks.
      * @param {number} [options.defaultMaskHeight=80] - Default height of new masks.
@@ -204,6 +205,7 @@ function ensureFabric() {
 
                 exportMultiplier: 1,
                 maxExportPixels: 50000000,
+                maxHistorySize: 50,
                 exportImageAreaByDefault: true,
 
                 defaultMaskWidth: 50,
@@ -236,6 +238,7 @@ function ensureFabric() {
                     ...userCrop
                 }
             };
+            this._normalizeOptions();
 
             // Verify that Fabric.js is present before any canvas work starts.
             this._fabricLoaded = !!ensureFabric();
@@ -260,11 +263,12 @@ function ensureFabric() {
             this._activeOperationToken = null;
             this.elements = {};
             this.isImageLoadedToCanvas = false;
-            this.maxHistorySize = 50;
+            this.maxHistorySize = this.options.maxHistorySize;
 
             this._handlersByElementKey = {};
             this._elementCache = {};
             this._elementOriginalPointerEvents = new Map();
+            this._elementOriginalDisabledState = new Map();
 
             this._lastMask = null;
             this._lastMaskInitialLeft = null;
@@ -273,6 +277,7 @@ function ensureFabric() {
             this._lastSnapshot = null;
 
             this._cropMode = false;
+            this._isApplyingCrop = false;
             this._cropRect = null;
             this._cropHandlers = [];
             this._cropPrevEvented = null;
@@ -378,6 +383,8 @@ function ensureFabric() {
             this._activeOperationName = null;
             this._activeOperationToken = null;
             this._elementOriginalPointerEvents = new Map();
+            this._elementOriginalDisabledState = new Map();
+            this._isApplyingCrop = false;
             this._containerOriginalOverflow = null;
             this._lastContainerViewportSize = null;
             this._canvasElementOriginalStyle = null;
@@ -513,6 +520,66 @@ function ensureFabric() {
             );
         }
 
+        _normalizeFiniteNumber(value, fallback) {
+            const numericValue = Number(value);
+            return Number.isFinite(numericValue) ? numericValue : fallback;
+        }
+
+        _normalizePositiveNumber(value, fallback) {
+            const numericValue = this._normalizeFiniteNumber(value, fallback);
+            return numericValue > 0 ? numericValue : fallback;
+        }
+
+        _normalizeNonNegativeNumber(value, fallback) {
+            const numericValue = this._normalizeFiniteNumber(value, fallback);
+            return numericValue >= 0 ? numericValue : fallback;
+        }
+
+        _normalizePositiveInteger(value, fallback) {
+            const numericValue = this._normalizePositiveNumber(value, fallback);
+            return Math.max(1, Math.floor(numericValue));
+        }
+
+        _normalizeOptions() {
+            const options = this.options || {};
+            options.canvasWidth = this._normalizePositiveNumber(options.canvasWidth, 800);
+            options.canvasHeight = this._normalizePositiveNumber(options.canvasHeight, 600);
+            options.animationDuration = this._normalizeNonNegativeNumber(options.animationDuration, 300);
+
+            const minScale = this._normalizePositiveNumber(options.minScale, 0.1);
+            const maxScale = this._normalizePositiveNumber(options.maxScale, 5);
+            if (minScale > maxScale) {
+                options.minScale = 0.1;
+                options.maxScale = 5;
+            } else {
+                options.minScale = minScale;
+                options.maxScale = maxScale;
+            }
+            options.scaleStep = this._normalizePositiveNumber(options.scaleStep, 0.05);
+            options.rotationStep = this._normalizeFiniteNumber(options.rotationStep, 90);
+
+            options.downsampleMaxWidth = this._normalizePositiveNumber(options.downsampleMaxWidth, 4000);
+            options.downsampleMaxHeight = this._normalizePositiveNumber(options.downsampleMaxHeight, 3000);
+            options.downsampleQuality = options.downsampleQuality == null
+                ? 0.92
+                : Math.max(0, Math.min(1, this._normalizeFiniteNumber(options.downsampleQuality, 0.92)));
+            options.imageLoadTimeoutMs = this._normalizePositiveNumber(options.imageLoadTimeoutMs, 30000);
+
+            options.exportMultiplier = this._normalizePositiveNumber(options.exportMultiplier, 1);
+            options.maxExportPixels = this._normalizePositiveInteger(options.maxExportPixels, 50000000);
+            options.maxHistorySize = this._normalizePositiveInteger(options.maxHistorySize, 50);
+
+            options.defaultMaskWidth = this._normalizePositiveNumber(options.defaultMaskWidth, 50);
+            options.defaultMaskHeight = this._normalizePositiveNumber(options.defaultMaskHeight, 80);
+            options.maskLabelOffset = this._normalizeNonNegativeNumber(options.maskLabelOffset, 3);
+
+            if (options.crop) {
+                options.crop.minWidth = this._normalizePositiveNumber(options.crop.minWidth, 100);
+                options.crop.minHeight = this._normalizePositiveNumber(options.crop.minHeight, 100);
+                options.crop.padding = this._normalizeNonNegativeNumber(options.crop.padding, 10);
+            }
+        }
+
         _reportError(message, error = null) {
             const handler = this.options && this.options.onError;
             if (typeof handler !== 'function') return;
@@ -535,10 +602,19 @@ function ensureFabric() {
             }
         }
 
+        _emitSafeCallback(callback, message) {
+            if (typeof callback !== 'function') return;
+            try {
+                callback();
+            } catch (error) {
+                this._reportWarning(message, error);
+            }
+        }
+
         _notifyImageLoaded() {
             const optionsCallback = this.options && this.options.onImageLoaded;
             const callback = typeof optionsCallback === 'function' ? optionsCallback : this.onImageLoaded;
-            if (typeof callback === 'function') callback();
+            this._emitSafeCallback(callback, 'onImageLoaded callback failed');
         }
 
         /**
@@ -804,7 +880,6 @@ function ensureFabric() {
         _loadImageFile(file) {
             if (!this._isSupportedImageFile(file)) {
                 const error = new Error('Selected file is not a supported image');
-                this._reportError('Selected file is not a supported image', error);
                 return Promise.reject(error);
             }
 
@@ -878,6 +953,7 @@ function ensureFabric() {
                 ? this._getInternalOperationToken(options)
                 : this._beginBusyOperation('loadImage');
             let transaction = null;
+            let shouldNotifyImageLoaded;
 
             try {
                 this._isLoading = true;
@@ -981,8 +1057,7 @@ function ensureFabric() {
                 this._updateUI();
                 this.canvas.renderAll();
                 this._lastSnapshot = this._captureCanvasStateOrThrow('loadImage');
-
-                this._notifyImageLoaded();
+                shouldNotifyImageLoaded = true;
             } catch (error) {
                 await this._rollbackLoadImageTransaction(
                     transaction,
@@ -994,6 +1069,9 @@ function ensureFabric() {
                 if (!isNestedOperation) this._endBusyOperation(operationToken);
                 if (!this._disposed && this.canvas) this._updateUI();
             }
+            if (shouldNotifyImageLoaded && !this._disposed && this.canvas) {
+                this._notifyImageLoaded();
+            }
         }
 
         /**
@@ -1021,6 +1099,7 @@ function ensureFabric() {
             return !!(
                 this.isAnimating ||
                 this._cropMode ||
+                this._isApplyingCrop ||
                 this._isLoading ||
                 this._activeOperationToken ||
                 (this.animationQueue && this.animationQueue.isBusy())
@@ -1908,7 +1987,24 @@ function ensureFabric() {
         _getJpegBackgroundColor() {
             const backgroundColor = String(this.options.backgroundColor || '').trim();
             if (!backgroundColor || this._isTransparentCssColor(backgroundColor)) return '#ffffff';
-            return backgroundColor;
+            return this._isValidCanvasFillStyle(backgroundColor) ? backgroundColor : '#ffffff';
+        }
+
+        _isValidCanvasFillStyle(color) {
+            try {
+                if (typeof document === 'undefined' || !document.createElement) return false;
+                const validationCanvas = document.createElement('canvas');
+                const context = validationCanvas.getContext && validationCanvas.getContext('2d');
+                if (!context) return false;
+                context.fillStyle = '#010203';
+                context.fillStyle = color;
+                if (context.fillStyle !== '#010203') return true;
+                context.fillStyle = '#040506';
+                context.fillStyle = color;
+                return context.fillStyle !== '#040506';
+            } catch {
+                return false;
+            }
         }
 
         _isTransparentCssColor(color) {
@@ -2364,10 +2460,12 @@ function ensureFabric() {
         async _scaleImageImpl(factor, options = {}) {
             if (!this.originalImage || this._disposed) return;
             if (this.isAnimating) return;
+            const numericFactor = Number(factor);
+            if (!Number.isFinite(numericFactor)) return;
             const saveHistory = options.saveHistory !== false;
             let didStartAnimation = false;
             try {
-                factor = Math.max(this.options.minScale, Math.min(this.options.maxScale, factor));
+                factor = Math.max(this.options.minScale, Math.min(this.options.maxScale, numericFactor));
                 this.currentScale = factor;
                 this.isAnimating = true;
                 didStartAnimation = true;
@@ -2442,7 +2540,8 @@ function ensureFabric() {
         async _rotateImageImpl(degrees, options = {}) {
             if (!this.originalImage || this._disposed) return;
             if (this.isAnimating) return;
-            if (isNaN(degrees)) return;
+            const numericDegrees = Number(degrees);
+            if (!Number.isFinite(numericDegrees)) return;
             const saveHistory = options.saveHistory !== false;
             const image = this.originalImage;
             const previousOriginX = image.originX || 'left';
@@ -2451,6 +2550,7 @@ function ensureFabric() {
             let didStartAnimation = false;
             let didCompleteRotation = false;
             try {
+                degrees = numericDegrees;
                 this.currentRotation = degrees;
                 this.isAnimating = true;
                 didStartAnimation = true;
@@ -3018,7 +3118,11 @@ function ensureFabric() {
 
             let mask;
             if (typeof maskConfig.fabricGenerator === 'function') {
-                mask = maskConfig.fabricGenerator(maskConfig, this.canvas, this.options);
+                try {
+                    mask = maskConfig.fabricGenerator(maskConfig, this.canvas, this.options);
+                } catch (error) {
+                    return rejectInvalidMask('fabricGenerator failed', error);
+                }
             } else {
                 switch (shapeType) {
                     case 'circle':
@@ -3070,6 +3174,17 @@ function ensureFabric() {
                         } catch (error) {
                             return rejectInvalidMask('invalid polygon points', error);
                         }
+                        const uniquePointKeys = new Set(polygonPoints.map(point => `${point.x}:${point.y}`));
+                        if (uniquePointKeys.size !== polygonPoints.length) {
+                            return rejectInvalidMask('polygon points must not contain duplicates');
+                        }
+                        const doubleArea = polygonPoints.reduce((area, point, index) => {
+                            const nextPoint = polygonPoints[(index + 1) % polygonPoints.length];
+                            return area + point.x * nextPoint.y - nextPoint.x * point.y;
+                        }, 0);
+                        if (Math.abs(doubleArea) < 0.000001) {
+                            return rejectInvalidMask('polygon masks must have a non-zero area');
+                        }
                         mask = new fabric.Polygon(polygonPoints, {
                             left, top,
                             fill: maskConfig.color,
@@ -3154,7 +3269,12 @@ function ensureFabric() {
             this.canvas.renderAll();
             this.saveState();
 
-            if (typeof maskConfig.onCreate === 'function') maskConfig.onCreate(mask, this.canvas);
+            if (typeof maskConfig.onCreate === 'function') {
+                this._emitSafeCallback(
+                    () => maskConfig.onCreate(mask, this.canvas),
+                    'createMask onCreate callback failed'
+                );
+            }
             return mask;
         }
 
@@ -3369,8 +3489,15 @@ function ensureFabric() {
             this._removeLabelForMask(mask);
             let textObject = null;
             if (this.options.label && typeof this.options.label.create === 'function') {
-                textObject = this.options.label.create(mask, fabric);
-                if (!textObject || typeof textObject.set !== 'function') {
+                let didLabelCreateThrow = false;
+                try {
+                    textObject = this.options.label.create(mask, fabric);
+                } catch (error) {
+                    didLabelCreateThrow = true;
+                    this._reportWarning('label.create() failed; using the default label', error);
+                    textObject = null;
+                }
+                if (!didLabelCreateThrow && (!textObject || typeof textObject.set !== 'function')) {
                     this._reportWarning('label.create() returned an invalid Fabric object; using the default label');
                     textObject = null;
                 }
@@ -3391,7 +3518,12 @@ function ensureFabric() {
                 };
                 if (this.options.label) {
                     if (typeof this.options.label.getText === 'function') {
-                        labelText = this.options.label.getText(mask, this._getMaskCreationIndex(mask));
+                        try {
+                            labelText = this.options.label.getText(mask, this._getMaskCreationIndex(mask));
+                        } catch (error) {
+                            this._reportWarning('label.getText() failed; using the mask name', error);
+                            labelText = mask.maskName;
+                        }
                     }
                     // Merge external styles
                     if (this.options.label.textOptions) {
@@ -3940,6 +4072,42 @@ function ensureFabric() {
             };
         }
 
+        _getCropRectRawBounds(cropRect) {
+            if (!cropRect) return { left: NaN, top: NaN, width: NaN, height: NaN };
+            return {
+                left: Number(cropRect.left),
+                top: Number(cropRect.top),
+                width: Number(cropRect.width) * Math.abs(Number(cropRect.scaleX)),
+                height: Number(cropRect.height) * Math.abs(Number(cropRect.scaleY))
+            };
+        }
+
+        _isValidCropRegion(cropBounds, imageBounds) {
+            if (!cropBounds || !imageBounds) return false;
+            const left = Number(cropBounds.left);
+            const top = Number(cropBounds.top);
+            const width = Number(cropBounds.width);
+            const height = Number(cropBounds.height);
+            const imageLeft = Number(imageBounds.left);
+            const imageTop = Number(imageBounds.top);
+            const imageWidth = Number(imageBounds.width);
+            const imageHeight = Number(imageBounds.height);
+            if (![left, top, width, height, imageLeft, imageTop, imageWidth, imageHeight].every(Number.isFinite)) return false;
+            if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return false;
+
+            const right = left + width;
+            const bottom = top + height;
+            const imageRight = imageLeft + imageWidth;
+            const imageBottom = imageTop + imageHeight;
+            const overlapsImage = left < imageRight && right > imageLeft && top < imageBottom && bottom > imageTop;
+            if (!overlapsImage) return false;
+
+            const canvasWidth = this.canvas ? Number(this.canvas.getWidth()) : NaN;
+            const canvasHeight = this.canvas ? Number(this.canvas.getHeight()) : NaN;
+            if (!Number.isFinite(canvasWidth) || !Number.isFinite(canvasHeight) || canvasWidth <= 0 || canvasHeight <= 0) return false;
+            return left < canvasWidth && right > 0 && top < canvasHeight && bottom > 0;
+        }
+
         /**
          * Enters crop mode by creating a resizable crop rectangle above the base image.
          *
@@ -3951,6 +4119,10 @@ function ensureFabric() {
          */
         enterCropMode() {
             if (!this.canvas || !this.originalImage || this._cropMode) return;
+            if (this._isApplyingCrop) {
+                this._reportWarning('enterCropMode ignored because a crop is already being applied');
+                return;
+            }
             if (!this._canMutateNow('enterCropMode')) return;
             if (!this.isImageLoaded()) return;
             this._removeCropRect();
@@ -4090,6 +4262,10 @@ function ensureFabric() {
          * @public
          */
         cancelCrop() {
+            if (this._isApplyingCrop) {
+                this._reportWarning('cancelCrop ignored because a crop is already being applied');
+                return;
+            }
             if (!this.canvas || !this._cropMode) return;
             this._removeCropRect();
             this._restoreCropObjectState();
@@ -4116,13 +4292,25 @@ function ensureFabric() {
          */
         async applyCrop() {
             if (!this.canvas || !this._cropMode || !this._cropRect) return;
+            if (this._isApplyingCrop) {
+                this._reportWarning('applyCrop ignored because a crop is already being applied');
+                return;
+            }
             this._assertIdleForOperation('applyCrop');
+            this._isApplyingCrop = true;
             const operationToken = this._beginBusyOperation('applyCrop');
             const internalOptions = this._withInternalOperationOptions(operationToken);
 
             try {
             // Fabric does not update control coordinates automatically after programmatic transforms.
             this._cropRect.setCoords();
+            this.originalImage.setCoords();
+            const imageBounds = this.originalImage.getBoundingRect(true, true);
+            const rawCropBounds = this._getCropRectRawBounds(this._cropRect);
+            if (!this._isValidCropRegion(rawCropBounds, imageBounds)) {
+                this._reportWarning('applyCrop: crop region is invalid');
+                return;
+            }
             const rectBounds = this._getCropRectContentBounds(this._cropRect);
 
             const cropRegion = this._getClampedCanvasRegion(rectBounds, { includePartialPixels: false });
@@ -4138,7 +4326,13 @@ function ensureFabric() {
                 beforeJson = null;
             }
             if (!beforeJson) {
-                this.cancelCrop();
+                this._removeCropRect();
+                this._cropMode = false;
+                this.canvas.selection = !!this._prevSelectionSetting;
+                this._prevSelectionSetting = undefined;
+                this.canvas.discardActiveObject();
+                this._updateUI();
+                this.canvas.renderAll();
                 return;
             }
 
@@ -4232,6 +4426,7 @@ function ensureFabric() {
             this._updateUI();
             this.canvas.renderAll();
             } finally {
+                this._isApplyingCrop = false;
                 this._endBusyOperation(operationToken);
             }
         }
@@ -4268,10 +4463,12 @@ function ensureFabric() {
             const isBusy = this.isBusy();
 
             if (isInCropMode) {
-                // Disable all controls except the crop action buttons while crop mode is active.
+                // Disable operation controls while keeping canvas interaction and viewport scrolling available.
+                const cropInteractionKeys = new Set(['canvas', 'canvasContainer', 'imagePlaceholder', 'imgPlaceholder']);
                 for (const key of Object.keys(this.elements || {})) {
                     const element = this._getElement(key);
                     if (!element) continue;
+                    if (cropInteractionKeys.has(key)) continue;
                     if (key === 'applyCropButton' || key === 'cancelCropButton' || key === 'applyCropBtn' || key === 'cancelCropBtn') {
                         this._setDisabled(key, false);
                     } else {
@@ -4311,9 +4508,44 @@ function ensureFabric() {
          * @param {boolean} disabled - If true, disables the element; otherwise enables.
          * @private
          */
+        _rememberElementDisabledState(key, element) {
+            if (!element) return;
+            if (!this._elementOriginalDisabledState) this._elementOriginalDisabledState = new Map();
+            if (this._elementOriginalDisabledState.has(key)) return;
+            this._elementOriginalDisabledState.set(key, {
+                element,
+                hasDisabledProperty: 'disabled' in element,
+                disabled: ('disabled' in element) ? !!element.disabled : undefined,
+                ariaDisabled: element.getAttribute ? element.getAttribute('aria-disabled') : null,
+                pointerEvents: element.style ? (element.style.pointerEvents || '') : ''
+            });
+        }
+
+        _restoreElementDisabledStates() {
+            if (!this._elementOriginalDisabledState) return;
+            for (const state of this._elementOriginalDisabledState.values()) {
+                const element = state && state.element;
+                if (!element) continue;
+                try {
+                    if (state.hasDisabledProperty && 'disabled' in element) {
+                        element.disabled = !!state.disabled;
+                    }
+                    if (element.getAttribute && element.setAttribute && element.removeAttribute) {
+                        if (state.ariaDisabled === null) {
+                            element.removeAttribute('aria-disabled');
+                        } else {
+                            element.setAttribute('aria-disabled', state.ariaDisabled);
+                        }
+                    }
+                    if (element.style) element.style.pointerEvents = state.pointerEvents || '';
+                } catch (error) { void error; }
+            }
+        }
+
         _setDisabled(key, disabled) {
             const element = this._getElement(key);
             if (!element) return;
+            this._rememberElementDisabledState(key, element);
             if ('disabled' in element) {
                 element.disabled = !!disabled;
                 return;
@@ -4343,7 +4575,6 @@ function ensureFabric() {
          * @private
          */
         _updatePlaceholderStatus() {
-            if (!this.options.showPlaceholder) return;
             this._setPlaceholderVisible(!this.originalImage);
         }
 
@@ -4354,10 +4585,11 @@ function ensureFabric() {
          * @private
          */
         _setPlaceholderVisible(show) {
-            if (this.placeholderElement) this._setElementVisible(this.placeholderElement, show);
+            const shouldShowPlaceholder = !!show && this.options.showPlaceholder !== false;
+            if (this.placeholderElement) this._setElementVisible(this.placeholderElement, shouldShowPlaceholder);
             const canvasVisibilityElement = this._getCanvasVisibilityElement();
             if (canvasVisibilityElement && canvasVisibilityElement !== this.placeholderElement) {
-                this._setElementVisible(canvasVisibilityElement, !show);
+                this._setElementVisible(canvasVisibilityElement, !shouldShowPlaceholder);
             }
         }
 
@@ -4443,6 +4675,9 @@ function ensureFabric() {
             } catch (error) { void error; }
 
             if (this._cropRect) this._removeCropRect();
+            this._isApplyingCrop = false;
+
+            try { this._restoreElementDisabledStates(); } catch (error) { void error; }
 
             if (this.containerElement && this._containerOriginalOverflow) {
                 try { this._restoreContainerOverflowState(); } catch (error) { void error; }
@@ -4480,6 +4715,7 @@ function ensureFabric() {
             this._handlersByElementKey = {};
             this._elementCache = {};
             this._elementOriginalPointerEvents = new Map();
+            this._elementOriginalDisabledState = new Map();
             this._clearMaskPlacementMemory();
             this.originalImage = null;
             this.baseImageScale = 1;
@@ -4488,6 +4724,7 @@ function ensureFabric() {
             this.isAnimating = false;
             this._isLoading = false;
             this._cropMode = false;
+            this._isApplyingCrop = false;
             this._cropRect = null;
             this._cropHandlers = [];
             this._cropPrevEvented = null;
@@ -4660,12 +4897,13 @@ function ensureFabric() {
          * @param {number} [maxSize=50] - Maximum number of commands to keep in history.
          */
         constructor(maxSize = 50) {
+            const numericMaxSize = Number(maxSize);
             /** @type {Array<Command>} */
             this.history = [];
             /** @type {number} */
             this.currentIndex = -1;
             /** @type {number} */
-            this.maxSize = maxSize;
+            this.maxSize = Number.isFinite(numericMaxSize) && numericMaxSize > 0 ? Math.floor(numericMaxSize) : 50;
             /** @type {Promise<void>} */
             this.pending = Promise.resolve();
         }