@bensitu/image-editor 2.0.0 → 2.1.0

package/dist/esm/image-editor.js

@@ -1,15 +1,16 @@
 import { AnimationQueue } from './animation/animation-queue.js';
 import { reportError, reportWarning } from './core/callback-reporter.js';
-import { resolveOptions } from './core/default-options.js';
+import { areResolvedMosaicConfigsEqual, cloneResolvedMosaicConfig, getInvalidMosaicConfigFields, isLayoutMode, mergeMosaicConfigPatch, resolveOptions, } from './core/default-options.js';
 import { OperationGuard } from './core/operation-guard.js';
 import { loadFromState as loadFromStateImpl, saveState as saveStateImpl, } from './core/state-serializer.js';
 import { Command, HistoryManager } from './history/history-manager.js';
 import { detectFabric } from './fabric/fabric-adapter.js';
 import { isMaskObject } from './core/public-types.js';
 import { applyCrop as applyCropImpl, cancelCrop as cancelCropImpl, enterCropMode as enterCropModeImpl, } from './crop/crop-controller.js';
+import { enterMosaicMode as enterMosaicModeImpl, exitMosaicMode as exitMosaicModeImpl, updateMosaicPreview, } from './mosaic/mosaic-controller.js';
 import { downloadImage as downloadImageImpl, exportImageBase64 as exportImageBase64Impl, exportImageFile as exportImageFileImpl, mergeMasks as mergeMasksImpl, } from './export/export-service.js';
 import { loadImage as loadImageImpl } from './image/image-loader.js';
-import { ViewportCache, applyCanvasDimensions, computeScrollableCanvasSize, detectLayoutConflict, measureScrollbarSize, } from './image/layout-manager.js';
+import { ViewportCache, applyCanvasDimensions, computeScrollableCanvasSize, measureScrollbarSize, } from './image/layout-manager.js';
 import { TransformController } from './image/transform-controller.js';
 import { createMask as createMaskImpl, removeAllMasks as removeAllMasksImpl, removeSelectedMask as removeSelectedMaskImpl, } from './mask/mask-factory.js';
 import { createLabelForMask, hideAllMaskLabels, removeLabelForMask, showLabelForMask, syncMaskLabel, } from './mask/mask-label-manager.js';
@@ -20,8 +21,8 @@ import { setPlaceholderVisible as setPlaceholderVisibleImpl } from './ui/visibil
 import { inferImageMimeType, readFileAsDataUrl, resetFileInput } from './utils/file.js';
 import { detectSourceMimeType } from './image/image-resampler.js';
 const LAYOUT_EPSILON = 0.5;
-const INTERNAL_OPERATION_TOKEN = Symbol.for('ImageEditorInternalOperation');
-const INTERNAL_ALLOW_DURING_ANIMATION_QUEUE = Symbol.for('ImageEditorAllowDuringAnimationQueue');
+const INTERNAL_OPERATION_TOKEN = Symbol('ImageEditorInternalOperation');
+const INTERNAL_ALLOW_DURING_ANIMATION_QUEUE = Symbol('ImageEditorAllowDuringAnimationQueue');
 const CROP_MODE_CONTROL_KEYS = [
     'scalePercentageInput',
     'rotateLeftDegreesInput',
@@ -42,9 +43,85 @@ const CROP_MODE_CONTROL_KEYS = [
     'enterCropModeButton',
     'applyCropButton',
     'cancelCropButton',
+    'enterMosaicModeButton',
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
 ];
 const CROP_MODE_ENABLED_KEYS = ['applyCropButton', 'cancelCropButton'];
 const CROP_SESSION_ALLOWED_OPERATIONS = new Set(['applyCrop', 'cancelCrop']);
+const MOSAIC_MODE_CONTROL_KEYS = [
+    'scalePercentageInput',
+    'rotateLeftDegreesInput',
+    'rotateRightDegreesInput',
+    'rotateLeftButton',
+    'rotateRightButton',
+    'createMaskButton',
+    'removeSelectedMaskButton',
+    'removeAllMasksButton',
+    'mergeMasksButton',
+    'downloadImageButton',
+    'zoomInButton',
+    'zoomOutButton',
+    'resetImageTransformButton',
+    'undoButton',
+    'redoButton',
+    'imageInput',
+    'enterCropModeButton',
+    'applyCropButton',
+    'cancelCropButton',
+    'enterMosaicModeButton',
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
+];
+const MOSAIC_MODE_ENABLED_KEYS = [
+    'exitMosaicModeButton',
+    'mosaicBrushSizeInput',
+    'mosaicBlockSizeInput',
+];
+const MOSAIC_SESSION_ALLOWED_OPERATIONS = new Set([
+    'exitMosaicMode',
+    'applyMosaic',
+    'setMosaicConfig',
+    'resetMosaicConfig',
+    'setMosaicBrushSize',
+    'setMosaicBlockSize',
+    'saveState',
+]);
+const SCROLLBAR_SETTLE_EPSILON = 1;
+const IMAGE_EDITOR_OPERATIONS = new Set([
+    'init',
+    'loadImage',
+    'loadFromState',
+    'saveState',
+    'scaleImage',
+    'rotateImage',
+    'resetImageTransform',
+    'createMask',
+    'removeSelectedMask',
+    'removeAllMasks',
+    'mergeMasks',
+    'enterCropMode',
+    'applyCrop',
+    'cancelCrop',
+    'enterMosaicMode',
+    'exitMosaicMode',
+    'applyMosaic',
+    'setMosaicConfig',
+    'resetMosaicConfig',
+    'setMosaicBrushSize',
+    'setMosaicBlockSize',
+    'undo',
+    'redo',
+    'exportImageBase64',
+    'exportImageFile',
+    'downloadImage',
+    'dispose',
+]);
+function isImageEditorOperation(value) {
+    return value !== null && IMAGE_EDITOR_OPERATIONS.has(value);
+}
 export class ImageEditor {
     constructor(fabricModuleOrOptions = {}, options = {}) {
         var _a;
@@ -66,6 +143,24 @@ export class ImageEditor {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "currentLayoutMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'expand'
+        });
+        Object.defineProperty(this, "defaultMosaicConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentMosaicConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "canvas", {
             enumerable: true,
             configurable: true,
@@ -204,6 +299,12 @@ export class ImageEditor {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "mosaicSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "domBindings", {
             enumerable: true,
             configurable: true,
@@ -244,9 +345,15 @@ export class ImageEditor {
         this.fabricModule = (_a = detected.fabric) !== null && _a !== void 0 ? _a : {};
         this.isFabricLoaded = detected.isFabricLoaded;
         this.options = resolveOptions(detected.options);
-        const layoutConflict = detectLayoutConflict(this.options);
-        if (layoutConflict) {
-            reportWarning(this.options, null, layoutConflict.message);
+        this.currentLayoutMode = this.options.layoutMode;
+        this.defaultMosaicConfig = this.options.defaultMosaicConfig;
+        this.currentMosaicConfig = cloneResolvedMosaicConfig(this.defaultMosaicConfig);
+        const rawDefaultLayoutMode = detected.options
+            .defaultLayoutMode;
+        if (rawDefaultLayoutMode !== undefined && !isLayoutMode(rawDefaultLayoutMode)) {
+            reportWarning(this.options, new TypeError(`[ImageEditor] Unsupported defaultLayoutMode ` +
+                `${JSON.stringify(rawDefaultLayoutMode)}. ` +
+                'Expected "fit", "cover", or "expand".'), 'Invalid defaultLayoutMode fell back to "expand".');
         }
         this.operationGuard = new OperationGuard();
         this.animQueue = new AnimationQueue();
@@ -288,10 +395,14 @@ export class ImageEditor {
             enterCropModeButton: 'enterCropModeButton',
             applyCropButton: 'applyCropButton',
             cancelCropButton: 'cancelCropButton',
+            enterMosaicModeButton: 'enterMosaicModeButton',
+            exitMosaicModeButton: 'exitMosaicModeButton',
+            mosaicBrushSizeInput: 'mosaicBrushSizeInput',
+            mosaicBlockSizeInput: 'mosaicBlockSizeInput',
             uploadArea: 'uploadArea',
         };
         this.elements = { ...defaults, ...idMap };
-        this.domBindings = new DomBindings((key) => this.elements[key], () => this.isDisposed);
+        this.domBindings = new DomBindings((key) => this.elements[key], () => this.isDisposed, () => { var _a, _b; return (_b = (_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document; });
         this.initCanvas();
         this.transformController = new TransformController(this.buildTransformContext());
         this.bindDomEvents();
@@ -442,6 +553,26 @@ export class ImageEditor {
         this.bindElementIfExists('cancelCropButton', 'click', () => {
             this.cancelCrop();
         });
+        this.bindElementIfExists('enterMosaicModeButton', 'click', () => {
+            this.enterMosaicMode();
+        });
+        this.bindElementIfExists('exitMosaicModeButton', 'click', () => {
+            this.exitMosaicMode();
+        });
+        const bindMosaicSizeInput = (key, applyValue) => {
+            const handler = (event) => {
+                const parsed = parseFloat(event.target.value);
+                applyValue(parsed);
+            };
+            this.bindElementIfExists(key, 'input', handler);
+            this.bindElementIfExists(key, 'change', handler);
+        };
+        bindMosaicSizeInput('mosaicBrushSizeInput', (value) => {
+            this.setMosaicBrushSize(value);
+        });
+        bindMosaicSizeInput('mosaicBlockSizeInput', (value) => {
+            this.setMosaicBlockSize(value);
+        });
     }
     bindElementIfExists(key, event, handler) {
         var _a;
@@ -477,6 +608,9 @@ export class ImageEditor {
         }
     }
     async loadImage(base64, options = {}) {
+        return this.loadImageInternal(base64, options);
+    }
+    async loadImageInternal(base64, options = {}) {
         if (!this.isFabricLoaded || !this.canvas)
             return;
         if (this.isDisposed)
@@ -496,7 +630,7 @@ export class ImageEditor {
         const loadImageContext = {
             fabric: this.fabricModule,
             canvas: this.canvas,
-            options: this.options,
+            options: this.getRuntimeOptions(),
             containerElement: this.containerElement,
             placeholderElement: this.placeholderElement,
             viewportCache: this.viewportCache,
@@ -588,6 +722,11 @@ export class ImageEditor {
             !CROP_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
             throw new Error(`[ImageEditor] Cannot run "${operationName}" while crop mode is active.`);
         }
+        if (this.mosaicSession &&
+            !this.operationGuard.isOwnOperation(token) &&
+            !MOSAIC_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
+            throw new Error(`[ImageEditor] Cannot run "${operationName}" while mosaic mode is active.`);
+        }
         if (this.animQueue.isBusy() && !this.canRunDuringAnimationQueue(options)) {
             throw new Error(`[ImageEditor] Cannot run "${operationName}" while an animation is queued.`);
         }
@@ -597,10 +736,17 @@ export class ImageEditor {
             this.assertIdleForOperation(operationName, options);
             return true;
         }
-        catch {
+        catch (error) {
+            if (!this.isExpectedIdleGuardError(error, operationName)) {
+                throw error;
+            }
             return false;
         }
     }
+    isExpectedIdleGuardError(error, operationName) {
+        return (error instanceof Error &&
+            error.message.startsWith(`[ImageEditor] Cannot run "${operationName}" `));
+    }
     assertCanQueueAnimation(operationName, options) {
         this.operationGuard.assertCanQueueAnimation(operationName, this.getInternalOperationToken(options));
     }
@@ -612,17 +758,26 @@ export class ImageEditor {
             ((_b = this.originalImage.height) !== null && _b !== void 0 ? _b : 0) > 0);
     }
     isBusy() {
-        return this.operationGuard.isBusy() || this.animQueue.isBusy() || this.cropSession !== null;
+        return (this.operationGuard.isBusy() ||
+            this.animQueue.isBusy() ||
+            this.cropSession !== null ||
+            this.mosaicSession !== null);
     }
     setLayoutMode(mode) {
-        if (mode !== 'fit' && mode !== 'cover' && mode !== 'expand') {
+        if (!isLayoutMode(mode)) {
             reportWarning(this.options, new TypeError(`[ImageEditor] Unsupported layout mode ${JSON.stringify(mode)}. ` +
                 'Expected "fit", "cover", or "expand".'), 'Ignored invalid layout mode.');
             return;
         }
-        this.options.fitImageToCanvas = mode === 'fit';
-        this.options.coverImageToCanvas = mode === 'cover';
-        this.options.expandCanvasToImage = mode === 'expand';
+        this.currentLayoutMode = mode;
+    }
+    getRuntimeOptions() {
+        if (this.currentLayoutMode === this.options.layoutMode)
+            return this.options;
+        return Object.freeze({
+            ...this.options,
+            layoutMode: this.currentLayoutMode,
+        });
     }
     buildCallbackContext(operation, isInternalOperation = false) {
         return { operation, isInternalOperation };
@@ -631,7 +786,7 @@ export class ImageEditor {
         const internal = this.getInternalOperationToken(options);
         const activeOperation = this.operationGuard.activeOperationName();
         if (internal && activeOperation) {
-            return this.buildCallbackContext(activeOperation, true);
+            return this.buildCallbackContext(isImageEditorOperation(activeOperation) ? activeOperation : fallback, true);
         }
         return this.buildCallbackContext(fallback, false);
     }
@@ -698,6 +853,7 @@ export class ImageEditor {
             currentRotation: this.currentRotation,
             isBusy: this.isBusy(),
             isCropMode: this.cropSession !== null,
+            isMosaicMode: this.mosaicSession !== null,
             canUndo: this.historyManager.canUndo(),
             canRedo: this.historyManager.canRedo(),
             canvasWidth,
@@ -785,7 +941,7 @@ export class ImageEditor {
         const boundingRect = this.originalImage.getBoundingRect();
         const scrollbarSize = measureScrollbarSize((_b = (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : null);
         const viewport = this.measureLayoutViewport(scrollbarSize);
-        if (this.options.fitImageToCanvas || this.options.coverImageToCanvas) {
+        if (this.currentLayoutMode === 'fit' || this.currentLayoutMode === 'cover') {
             const canvasSize = computeScrollableCanvasSize(boundingRect.width, boundingRect.height, viewport, scrollbarSize);
             this.setCanvasSizePx(canvasSize.width, canvasSize.height);
             return;
@@ -807,14 +963,14 @@ export class ImageEditor {
         const canvasH = Math.ceil(this.canvas.getHeight());
         const clipsImage = boundingRect.width > canvasW + LAYOUT_EPSILON ||
             boundingRect.height > canvasH + LAYOUT_EPSILON;
-        if (this.options.fitImageToCanvas || this.options.coverImageToCanvas) {
+        if (this.currentLayoutMode === 'fit' || this.currentLayoutMode === 'cover') {
             const staleOverflowWidth = canvasW > viewport.width + LAYOUT_EPSILON &&
                 boundingRect.width <= viewport.width + LAYOUT_EPSILON;
             const staleOverflowHeight = canvasH > viewport.height + LAYOUT_EPSILON &&
                 boundingRect.height <= viewport.height + LAYOUT_EPSILON;
             return clipsImage || staleOverflowWidth || staleOverflowHeight;
         }
-        if (this.options.expandCanvasToImage) {
+        if (this.currentLayoutMode === 'expand') {
             const expectedW = Math.max(viewport.width, Math.ceil(boundingRect.width));
             const expectedH = Math.max(viewport.height, Math.ceil(boundingRect.height));
             return (Math.abs(canvasW - expectedW) > LAYOUT_EPSILON ||
@@ -822,6 +978,33 @@ export class ImageEditor {
         }
         return clipsImage;
     }
+    settleFitCoverScrollbarsAfterStateRestore() {
+        if (!this.canvas ||
+            !this.containerElement ||
+            (this.currentLayoutMode !== 'fit' && this.currentLayoutMode !== 'cover')) {
+            return;
+        }
+        const canvasW = Math.ceil(this.canvas.getWidth());
+        const canvasH = Math.ceil(this.canvas.getHeight());
+        if (canvasW <= 1 || canvasH <= 1)
+            return;
+        const clientW = Math.floor(this.containerElement.clientWidth || 0);
+        const clientH = Math.floor(this.containerElement.clientHeight || 0);
+        if (clientW <= 0 || clientH <= 0)
+            return;
+        const scrollW = Math.ceil(this.containerElement.scrollWidth || 0);
+        const scrollH = Math.ceil(this.containerElement.scrollHeight || 0);
+        const hasHorizontalScrollbar = scrollW > clientW + LAYOUT_EPSILON;
+        const hasVerticalScrollbar = scrollH > clientH + LAYOUT_EPSILON;
+        if (!hasHorizontalScrollbar && !hasVerticalScrollbar)
+            return;
+        const nudgeWidth = hasVerticalScrollbar && Math.abs(canvasW - clientW) <= SCROLLBAR_SETTLE_EPSILON;
+        const nudgeHeight = hasHorizontalScrollbar && Math.abs(canvasH - clientH) <= SCROLLBAR_SETTLE_EPSILON;
+        if (!nudgeWidth && !nudgeHeight)
+            return;
+        this.setCanvasSizePx(nudgeWidth ? canvasW - 1 : canvasW, nudgeHeight ? canvasH - 1 : canvasH);
+        this.setCanvasSizePx(canvasW, canvasH);
+    }
     captureImageDisplayGeometry() {
         if (!this.canvas || !this.originalImage)
             return null;
@@ -886,11 +1069,7 @@ export class ImageEditor {
             afterTransformSnap: () => {
                 if (this.isDisposed || !this.canvas || !this.originalImage)
                     return;
-                if (this.options.expandCanvasToImage ||
-                    this.options.coverImageToCanvas ||
-                    this.options.fitImageToCanvas) {
-                    this.updateCanvasSizeToImageBounds();
-                }
+                this.updateCanvasSizeToImageBounds();
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
                 this.canvas
                     .getObjects()
@@ -1058,14 +1237,13 @@ export class ImageEditor {
                 this.currentImageMimeType = null;
             }
             this.isImageLoadedToCanvas = !!this.originalImage;
-            if (this.originalImage &&
-                (this.options.expandCanvasToImage ||
-                    this.options.coverImageToCanvas ||
-                    this.options.fitImageToCanvas) &&
-                this.shouldNormalizeCanvasSizeAfterStateRestore()) {
+            if (this.originalImage && this.shouldNormalizeCanvasSizeAfterStateRestore()) {
                 this.updateCanvasSizeToImageBounds();
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
             }
+            if (this.originalImage) {
+                this.settleFitCoverScrollbarsAfterStateRestore();
+            }
             const restoredMasks = restoredState.objects.filter(isMaskObject);
             this.lastMask = restoredMasks.reduce((lastMask, maskObject) => !lastMask || maskObject.maskId > lastMask.maskId ? maskObject : lastMask, null);
             restoredMasks.forEach((maskObject) => {
@@ -1125,16 +1303,12 @@ export class ImageEditor {
             if (after === before) {
                 return;
             }
-            let executedOnce = false;
             const cmd = new Command(async () => {
-                if (executedOnce) {
-                    await this.loadFromStateInternal(after, this.withAnimationQueueBypass());
-                }
-                executedOnce = true;
+                await this.loadFromStateInternal(after, this.withAnimationQueueBypass());
             }, async () => {
                 await this.loadFromStateInternal(before, this.withAnimationQueueBypass());
             });
-            this.historyManager.execute(cmd);
+            this.historyManager.push(cmd);
             this.lastSnapshot = after;
         }
         catch (error) {
@@ -1249,7 +1423,7 @@ export class ImageEditor {
         return {
             fabric: this.fabricModule,
             canvas: this.canvas,
-            options: this.options,
+            options: this.getRuntimeOptions(),
             getLastMask: () => this.lastMask,
             setLastMask: (maskObject) => {
                 this.lastMask = maskObject;
@@ -1450,7 +1624,7 @@ export class ImageEditor {
             containerElement: this.containerElement,
             loadImage: async (base64, providedOptions) => {
                 const geometry = this.captureImageDisplayGeometry();
-                await this.loadImage(base64, this.withInternalOperationOptions(operationToken, providedOptions));
+                await this.loadImageInternal(base64, this.withInternalOperationOptions(operationToken, providedOptions !== null && providedOptions !== void 0 ? providedOptions : {}));
                 this.restoreMergedImageDisplayGeometry(geometry);
             },
             saveState: () => this.captureSnapshotInternal(),
@@ -1463,8 +1637,9 @@ export class ImageEditor {
     }
     captureSnapshotInternal() {
         var _a;
-        if (!this.canvas)
-            return '';
+        if (!this.canvas) {
+            throw new Error('[ImageEditor] Cannot capture canvas snapshot before init or after dispose.');
+        }
         const activeMask = this.getActiveMaskForSnapshot();
         this.hideAllMaskLabels();
         return saveStateImpl({
@@ -1483,9 +1658,134 @@ export class ImageEditor {
         const activeObject = this.canvas.getActiveObject();
         if (activeObject && isMaskObject(activeObject))
             return activeObject;
-        return ((_a = this.canvas
+        const labeledMasks = this.canvas
             .getObjects()
-            .find((object) => isMaskObject(object) && !!object.labelObject)) !== null && _a !== void 0 ? _a : null);
+            .filter((object) => isMaskObject(object) && !!object.labelObject);
+        return labeledMasks.length === 1 ? ((_a = labeledMasks[0]) !== null && _a !== void 0 ? _a : null) : null;
+    }
+    enterMosaicMode() {
+        if (!this.canvas || !this.originalImage)
+            return;
+        if (this.mosaicSession)
+            return;
+        if (!this.isImageLoaded())
+            return;
+        if (!this.canRunIdleOperation('enterMosaicMode'))
+            return;
+        enterMosaicModeImpl(this.buildMosaicControllerContext());
+        this.updateInputs();
+        this.updateUi();
+        const callbackContext = this.buildCallbackContext('enterMosaicMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    exitMosaicMode() {
+        if (!this.canvas || !this.mosaicSession)
+            return;
+        if (!this.canRunIdleOperation('exitMosaicMode'))
+            return;
+        exitMosaicModeImpl(this.buildMosaicControllerContext());
+        this.updateInputs();
+        this.updateUi();
+        const callbackContext = this.buildCallbackContext('exitMosaicMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    isMosaicMode() {
+        return this.mosaicSession !== null;
+    }
+    getMosaicConfig() {
+        return cloneResolvedMosaicConfig(this.currentMosaicConfig);
+    }
+    setMosaicConfig(config) {
+        this.applyMosaicConfigPatch(config, 'setMosaicConfig');
+    }
+    resetMosaicConfig() {
+        if (this.isDisposed)
+            return;
+        const nextConfig = cloneResolvedMosaicConfig(this.defaultMosaicConfig);
+        if (areResolvedMosaicConfigsEqual(this.currentMosaicConfig, nextConfig))
+            return;
+        this.currentMosaicConfig = nextConfig;
+        if (this.mosaicSession && this.canvas) {
+            updateMosaicPreview(this.buildMosaicControllerContext());
+        }
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext('resetMosaicConfig', false));
+    }
+    setMosaicBrushSize(size) {
+        this.applyMosaicConfigPatch({ brushSize: size }, 'setMosaicBrushSize');
+    }
+    setMosaicBlockSize(size) {
+        this.applyMosaicConfigPatch({ blockSize: size }, 'setMosaicBlockSize');
+    }
+    applyMosaicConfigPatch(config, operation) {
+        if (this.isDisposed)
+            return;
+        if (config === null || typeof config !== 'object' || Array.isArray(config)) {
+            reportWarning(this.options, new TypeError('[ImageEditor] Invalid Mosaic config object.'), 'Ignored invalid Mosaic config.');
+            return;
+        }
+        const invalidFields = getInvalidMosaicConfigFields(config);
+        if (invalidFields.length > 0) {
+            reportWarning(this.options, new TypeError(`[ImageEditor] Ignored invalid Mosaic config field(s): ` +
+                `${invalidFields.join(', ')}.`), 'Ignored invalid Mosaic config fields.');
+        }
+        const nextConfig = mergeMosaicConfigPatch(this.currentMosaicConfig, config);
+        if (areResolvedMosaicConfigsEqual(this.currentMosaicConfig, nextConfig))
+            return;
+        this.currentMosaicConfig = nextConfig;
+        if (this.mosaicSession && this.canvas) {
+            updateMosaicPreview(this.buildMosaicControllerContext());
+        }
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext(operation, false));
+    }
+    buildMosaicControllerContext() {
+        return {
+            fabric: this.fabricModule,
+            canvas: this.canvas,
+            options: this.options,
+            historyManager: this.historyManager,
+            getMosaicConfig: () => cloneResolvedMosaicConfig(this.currentMosaicConfig),
+            isImageLoaded: () => this.isImageLoaded(),
+            getOriginalImage: () => this.originalImage,
+            setOriginalImage: (image) => {
+                this.originalImage = image;
+            },
+            getCurrentImageMimeType: () => this.currentImageMimeType,
+            setCurrentImageMimeType: (mimeType) => {
+                this.currentImageMimeType = mimeType;
+            },
+            getLastSnapshot: () => this.lastSnapshot,
+            setLastSnapshot: (snapshot) => {
+                this.lastSnapshot = snapshot;
+            },
+            captureSnapshot: () => this.captureSnapshotInternal(),
+            loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withAnimationQueueBypass()),
+            updateUi: () => {
+                this.updateUi();
+            },
+            updateInputs: () => {
+                this.updateInputs();
+            },
+            hideAllMaskLabels: () => {
+                this.hideAllMaskLabels();
+            },
+            emitImageChanged: (context) => {
+                this.emitImageChanged(context);
+            },
+            emitBusyChangeIfChanged: (context) => {
+                this.emitBusyChangeIfChanged(context);
+            },
+            buildCallbackContext: (operation, isInternal) => this.buildCallbackContext(operation, isInternal),
+            getMosaicSession: () => this.mosaicSession,
+            setMosaicSession: (session) => {
+                this.mosaicSession = session;
+            },
+        };
     }
     enterCropMode() {
         if (!this.canvas || !this.originalImage)
@@ -1558,7 +1858,7 @@ export class ImageEditor {
             },
             saveState: () => this.captureSnapshotInternal(),
             loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withInternalOperationOptions(operationToken, this.withAnimationQueueBypass())),
-            loadImage: (base64, providedOptions) => this.loadImage(base64, this.withInternalOperationOptions(operationToken, providedOptions)),
+            loadImage: (base64, providedOptions) => this.loadImageInternal(base64, this.withInternalOperationOptions(operationToken, providedOptions !== null && providedOptions !== void 0 ? providedOptions : {})),
             getMaskCounter: () => this.maskCounter,
             setMaskCounter: (n) => {
                 this.maskCounter = n;
@@ -1570,13 +1870,28 @@ export class ImageEditor {
     }
     updateInputs() {
         const scaleId = this.elements.scalePercentageInput;
-        if (!scaleId)
-            return;
-        const scaleInputElement = document.getElementById(scaleId);
-        if (scaleInputElement)
-            scaleInputElement.value = String(Math.round(this.currentScale * 100));
+        if (scaleId) {
+            const scaleInputElement = document.getElementById(scaleId);
+            if (scaleInputElement) {
+                scaleInputElement.value = String(Math.round(this.currentScale * 100));
+            }
+        }
+        const mosaicConfig = this.getMosaicConfig();
+        const mosaicBrushSizeInputId = this.elements.mosaicBrushSizeInput;
+        if (mosaicBrushSizeInputId) {
+            const brushInput = document.getElementById(mosaicBrushSizeInputId);
+            if (brushInput)
+                brushInput.value = String(mosaicConfig.brushSize);
+        }
+        const mosaicBlockSizeInputId = this.elements.mosaicBlockSizeInput;
+        if (mosaicBlockSizeInputId) {
+            const blockInput = document.getElementById(mosaicBlockSizeInputId);
+            if (blockInput)
+                blockInput.value = String(mosaicConfig.blockSize);
+        }
     }
     updateUi() {
+        var _a;
         if (!this.canvas)
             return;
         const hasImage = !!this.originalImage;
@@ -1588,13 +1903,22 @@ export class ImageEditor {
         const canUndo = this.historyManager.canUndo();
         const canRedo = this.historyManager.canRedo();
         const isInCropMode = this.cropSession !== null;
+        const isInMosaicMode = this.mosaicSession !== null;
         const isBusy = this.operationGuard.isBusy() || this.animQueue.isBusy();
+        const isMosaicApplying = ((_a = this.mosaicSession) === null || _a === void 0 ? void 0 : _a.isApplying) === true;
         if (isInCropMode) {
             CROP_MODE_CONTROL_KEYS.forEach((key) => {
                 this.setControlEnabled(key, !isBusy && CROP_MODE_ENABLED_KEYS.includes(key));
             });
             return;
         }
+        if (isInMosaicMode) {
+            MOSAIC_MODE_CONTROL_KEYS.forEach((key) => {
+                this.setControlEnabled(key, !isBusy && !isMosaicApplying && MOSAIC_MODE_ENABLED_KEYS.includes(key));
+            });
+            this.setControlEnabled('imageInput', false);
+            return;
+        }
         this.setControlEnabled('scalePercentageInput', hasImage && !isBusy);
         this.setControlEnabled('rotateLeftDegreesInput', hasImage && !isBusy);
         this.setControlEnabled('rotateRightDegreesInput', hasImage && !isBusy);
@@ -1611,6 +1935,10 @@ export class ImageEditor {
         this.setControlEnabled('undoButton', hasImage && !isBusy && canUndo);
         this.setControlEnabled('redoButton', hasImage && !isBusy && canRedo);
         this.setControlEnabled('enterCropModeButton', hasImage && !isBusy);
+        this.setControlEnabled('enterMosaicModeButton', hasImage && !isBusy);
+        this.setControlEnabled('exitMosaicModeButton', false);
+        this.setControlEnabled('mosaicBrushSizeInput', !this.isDisposed);
+        this.setControlEnabled('mosaicBlockSizeInput', !this.isDisposed);
         this.setControlEnabled('imageInput', !isBusy);
         this.setControlEnabled('applyCropButton', false);
         this.setControlEnabled('cancelCropButton', false);
@@ -1708,6 +2036,14 @@ export class ImageEditor {
             }
             this.cropSession = null;
         }
+        if (this.mosaicSession && this.canvas) {
+            try {
+                exitMosaicModeImpl(this.buildMosaicControllerContext());
+            }
+            catch {
+            }
+            this.mosaicSession = null;
+        }
         if (this.canvas) {
             try {
                 void Promise.resolve(this.canvas.dispose()).catch(() => {