@bensitu/image-editor 2.0.0 → 2.2.0

package/dist/esm/image-editor.js

@@ -1,15 +1,22 @@
 import { AnimationQueue } from './animation/animation-queue.js';
 import { reportError, reportWarning } from './core/callback-reporter.js';
-import { resolveOptions } from './core/default-options.js';
+import { areResolvedMosaicConfigsEqual, areResolvedDrawConfigsEqual, areResolvedTextAnnotationConfigsEqual, cloneResolvedMosaicConfig, cloneResolvedDrawConfig, cloneResolvedTextAnnotationConfig, getInvalidDrawConfigFields, getInvalidMosaicConfigFields, getInvalidTextAnnotationConfigFields, isLayoutMode, mergeDrawConfigPatch, mergeMosaicConfigPatch, mergeTextAnnotationConfigPatch, 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 { isAnnotationObject, isDrawAnnotationObject, isEditableOverlayObject, isMaskObject, isTextAnnotationObject, } from './core/public-types.js';
+import { getAnnotations as getAnnotationsImpl, removeAllAnnotations as removeAllAnnotationsImpl, removeAnnotationObjects, removeSelectedAnnotation as removeSelectedAnnotationImpl, renderAnnotationList, updateAnnotation as updateAnnotationImpl, updateAnnotationListSelection, updateSelectedAnnotation as updateSelectedAnnotationImpl, } from './annotation/annotation-manager.js';
+import { attachTextEditingHandlersToAnnotations, createTextAnnotation as createTextAnnotationImpl, enterTextMode as enterTextModeImpl, exitTextMode as exitTextModeImpl, finalizeActiveTextEditing, } from './annotation/text-controller.js';
+import { enterDrawMode as enterDrawModeImpl, exitDrawMode as exitDrawModeImpl, updateDrawBrush, } from './annotation/draw-controller.js';
+import { isAnnotationLocked, isAnnotationUnlocked } from './annotation/annotation-lock.js';
+import { syncAnnotationRuntimeStates } from './annotation/annotation-style.js';
+import { normalizeLayerOrder, getEditableOverlayRange } from './core/layer-order.js';
 import { applyCrop as applyCropImpl, cancelCrop as cancelCropImpl, enterCropMode as enterCropModeImpl, } from './crop/crop-controller.js';
-import { downloadImage as downloadImageImpl, exportImageBase64 as exportImageBase64Impl, exportImageFile as exportImageFileImpl, mergeMasks as mergeMasksImpl, } from './export/export-service.js';
+import { enterMosaicMode as enterMosaicModeImpl, exitMosaicMode as exitMosaicModeImpl, updateMosaicPreview, } from './mosaic/mosaic-controller.js';
+import { downloadImage as downloadImageImpl, exportImageBase64 as exportImageBase64Impl, exportImageFile as exportImageFileImpl, mergeAnnotations as mergeAnnotationsImpl, 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 +27,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',
@@ -32,6 +39,22 @@ const CROP_MODE_CONTROL_KEYS = [
     'removeSelectedMaskButton',
     'removeAllMasksButton',
     'mergeMasksButton',
+    'mergeAnnotationsButton',
+    'enterTextModeButton',
+    'exitTextModeButton',
+    'textColorInput',
+    'textFontSizeInput',
+    'enterDrawModeButton',
+    'exitDrawModeButton',
+    'drawColorInput',
+    'drawBrushSizeInput',
+    'removeSelectedAnnotationButton',
+    'removeAllAnnotationsButton',
+    'deleteSelectedObjectButton',
+    'bringSelectedObjectForwardButton',
+    'sendSelectedObjectBackwardButton',
+    'bringSelectedObjectToFrontButton',
+    'sendSelectedObjectToBackButton',
     'downloadImageButton',
     'zoomInButton',
     'zoomOutButton',
@@ -42,9 +65,155 @@ 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 TEXT_MODE_ENABLED_KEYS = [
+    'exitTextModeButton',
+    'textColorInput',
+    'textFontSizeInput',
+];
+const DRAW_MODE_ENABLED_KEYS = [
+    'exitDrawModeButton',
+    'drawColorInput',
+    'drawBrushSizeInput',
+];
+const MOSAIC_MODE_CONTROL_KEYS = [
+    'scalePercentageInput',
+    'rotateLeftDegreesInput',
+    'rotateRightDegreesInput',
+    'rotateLeftButton',
+    'rotateRightButton',
+    'createMaskButton',
+    'removeSelectedMaskButton',
+    'removeAllMasksButton',
+    'mergeMasksButton',
+    'mergeAnnotationsButton',
+    'enterTextModeButton',
+    'exitTextModeButton',
+    'textColorInput',
+    'textFontSizeInput',
+    'enterDrawModeButton',
+    'exitDrawModeButton',
+    'drawColorInput',
+    'drawBrushSizeInput',
+    'removeSelectedAnnotationButton',
+    'removeAllAnnotationsButton',
+    'deleteSelectedObjectButton',
+    'bringSelectedObjectForwardButton',
+    'sendSelectedObjectBackwardButton',
+    'bringSelectedObjectToFrontButton',
+    'sendSelectedObjectToBackButton',
+    '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',
+    'createTextAnnotation',
+    'enterTextMode',
+    'exitTextMode',
+    'setTextConfig',
+    'resetTextConfig',
+    'setTextColor',
+    'setTextFontSize',
+    'enterDrawMode',
+    'exitDrawMode',
+    'setDrawConfig',
+    'resetDrawConfig',
+    'setDrawColor',
+    'setDrawBrushSize',
+    'updateSelectedAnnotation',
+    'updateAnnotation',
+    'removeSelectedAnnotation',
+    'removeAllAnnotations',
+    'deleteSelectedObject',
+    'mergeAnnotations',
+    'bringSelectedObjectForward',
+    'sendSelectedObjectBackward',
+    'bringSelectedObjectToFront',
+    'sendSelectedObjectToBack',
+    'enterCropMode',
+    'applyCrop',
+    'cancelCrop',
+    'enterMosaicMode',
+    'exitMosaicMode',
+    'applyMosaic',
+    'setMosaicConfig',
+    'resetMosaicConfig',
+    'setMosaicBrushSize',
+    'setMosaicBlockSize',
+    'undo',
+    'redo',
+    'exportImageBase64',
+    'exportImageFile',
+    'downloadImage',
+    'dispose',
+]);
+const TOOL_MODE_ALLOWED_OPERATIONS = {
+    crop: CROP_SESSION_ALLOWED_OPERATIONS,
+    mosaic: MOSAIC_SESSION_ALLOWED_OPERATIONS,
+    text: new Set([
+        'exitTextMode',
+        'createTextAnnotation',
+        'setTextConfig',
+        'resetTextConfig',
+        'setTextColor',
+        'setTextFontSize',
+        'saveState',
+    ]),
+    draw: new Set([
+        'exitDrawMode',
+        'setDrawConfig',
+        'resetDrawConfig',
+        'setDrawColor',
+        'setDrawBrushSize',
+        'saveState',
+    ]),
+};
+function isImageEditorOperation(value) {
+    return value !== null && IMAGE_EDITOR_OPERATIONS.has(value);
+}
 export class ImageEditor {
     constructor(fabricModuleOrOptions = {}, options = {}) {
         var _a;
@@ -66,6 +235,48 @@ 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, "defaultTextConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentTextConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "defaultDrawConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "currentDrawConfig", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "canvas", {
             enumerable: true,
             configurable: true,
@@ -162,6 +373,12 @@ export class ImageEditor {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "annotationCounter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
         Object.defineProperty(this, "lastSnapshot", {
             enumerable: true,
             configurable: true,
@@ -204,12 +421,42 @@ export class ImageEditor {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "mosaicSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "textSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "drawSession", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "domBindings", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "keyboardDocument", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "keyboardHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "isDisposed", {
             enumerable: true,
             configurable: true,
@@ -244,9 +491,19 @@ 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);
+        this.defaultTextConfig = this.options.defaultTextConfig;
+        this.currentTextConfig = cloneResolvedTextAnnotationConfig(this.defaultTextConfig);
+        this.defaultDrawConfig = this.options.defaultDrawConfig;
+        this.currentDrawConfig = cloneResolvedDrawConfig(this.defaultDrawConfig);
+        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();
@@ -277,6 +534,23 @@ export class ImageEditor {
             removeSelectedMaskButton: 'removeSelectedMaskButton',
             removeAllMasksButton: 'removeAllMasksButton',
             mergeMasksButton: 'mergeMasksButton',
+            annotationList: 'annotationList',
+            enterTextModeButton: 'enterTextModeButton',
+            exitTextModeButton: 'exitTextModeButton',
+            textColorInput: 'textColorInput',
+            textFontSizeInput: 'textFontSizeInput',
+            enterDrawModeButton: 'enterDrawModeButton',
+            exitDrawModeButton: 'exitDrawModeButton',
+            drawColorInput: 'drawColorInput',
+            drawBrushSizeInput: 'drawBrushSizeInput',
+            removeSelectedAnnotationButton: 'removeSelectedAnnotationButton',
+            removeAllAnnotationsButton: 'removeAllAnnotationsButton',
+            deleteSelectedObjectButton: 'deleteSelectedObjectButton',
+            mergeAnnotationsButton: 'mergeAnnotationsButton',
+            bringSelectedObjectForwardButton: 'bringSelectedObjectForwardButton',
+            sendSelectedObjectBackwardButton: 'sendSelectedObjectBackwardButton',
+            bringSelectedObjectToFrontButton: 'bringSelectedObjectToFrontButton',
+            sendSelectedObjectToBackButton: 'sendSelectedObjectToBackButton',
             downloadImageButton: 'downloadImageButton',
             maskList: 'maskList',
             zoomInButton: 'zoomInButton',
@@ -288,15 +562,20 @@ 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.initCanvas();
+        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.transformController = new TransformController(this.buildTransformContext());
         this.bindDomEvents();
         this.updateInputs();
         this.updateMaskList();
+        this.updateAnnotationList();
         this.updateUi();
         if (this.options.initialImageBase64) {
             void this.loadImage(this.options.initialImageBase64).catch(() => {
@@ -348,20 +627,24 @@ export class ImageEditor {
         });
         this.canvas.on('selection:cleared', () => this.handleSelectionChanged([]));
         const onObjectEvent = (e) => {
-            if (e.target && isMaskObject(e.target))
-                this.syncMaskLabel(e.target);
+            if (e.target)
+                this.handleObjectMovingScalingRotating(e.target);
         };
         const onObjectModified = (e) => {
-            if (!e.target || !isMaskObject(e.target))
-                return;
-            this.syncMaskLabel(e.target);
-            this.saveState();
+            if (e.target)
+                this.handleObjectModified(e.target);
         };
         this.canvas.on('object:moving', onObjectEvent);
         this.canvas.on('object:scaling', onObjectEvent);
         this.canvas.on('object:rotating', onObjectEvent);
         this.canvas.on('object:modified', onObjectModified);
     }
+    getLiveCanvasOrThrow(operationName) {
+        if (this.isDisposed || !this.canvas) {
+            throw new Error(`[ImageEditor] Cannot run "${operationName}" after dispose.`);
+        }
+        return this.canvas;
+    }
     bindDomEvents() {
         this.bindElementIfExists('uploadArea', 'click', () => {
             var _a;
@@ -396,6 +679,42 @@ export class ImageEditor {
         this.bindElementIfExists('mergeMasksButton', 'click', () => {
             void this.mergeMasks();
         });
+        this.bindElementIfExists('mergeAnnotationsButton', 'click', () => {
+            void this.mergeAnnotations();
+        });
+        this.bindElementIfExists('enterTextModeButton', 'click', () => {
+            this.enterTextMode();
+        });
+        this.bindElementIfExists('exitTextModeButton', 'click', () => {
+            this.exitTextMode();
+        });
+        this.bindElementIfExists('enterDrawModeButton', 'click', () => {
+            this.enterDrawMode();
+        });
+        this.bindElementIfExists('exitDrawModeButton', 'click', () => {
+            this.exitDrawMode();
+        });
+        this.bindElementIfExists('removeSelectedAnnotationButton', 'click', () => {
+            this.removeSelectedAnnotation();
+        });
+        this.bindElementIfExists('removeAllAnnotationsButton', 'click', () => {
+            this.removeAllAnnotations();
+        });
+        this.bindElementIfExists('deleteSelectedObjectButton', 'click', () => {
+            this.deleteSelectedObject();
+        });
+        this.bindElementIfExists('bringSelectedObjectForwardButton', 'click', () => {
+            this.bringSelectedObjectForward();
+        });
+        this.bindElementIfExists('sendSelectedObjectBackwardButton', 'click', () => {
+            this.sendSelectedObjectBackward();
+        });
+        this.bindElementIfExists('bringSelectedObjectToFrontButton', 'click', () => {
+            this.bringSelectedObjectToFront();
+        });
+        this.bindElementIfExists('sendSelectedObjectToBackButton', 'click', () => {
+            this.sendSelectedObjectToBack();
+        });
         this.bindElementIfExists('downloadImageButton', 'click', () => {
             this.downloadImage();
         });
@@ -442,11 +761,112 @@ 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);
+        });
+        const bindStringInput = (key, applyValue) => {
+            const handler = (event) => {
+                applyValue(event.target.value);
+            };
+            this.bindElementIfExists(key, 'input', handler);
+            this.bindElementIfExists(key, 'change', handler);
+        };
+        const bindNumberInput = (key, applyValue) => {
+            const handler = (event) => {
+                applyValue(parseFloat(event.target.value));
+            };
+            this.bindElementIfExists(key, 'input', handler);
+            this.bindElementIfExists(key, 'change', handler);
+        };
+        bindStringInput('textColorInput', (value) => this.applyTextColorInput(value));
+        bindNumberInput('textFontSizeInput', (value) => this.applyTextFontSizeInput(value));
+        bindStringInput('drawColorInput', (value) => this.applyDrawColorInput(value));
+        bindNumberInput('drawBrushSizeInput', (value) => this.applyDrawBrushSizeInput(value));
+        this.bindKeyboardEvents();
     }
     bindElementIfExists(key, event, handler) {
         var _a;
         (_a = this.domBindings) === null || _a === void 0 ? void 0 : _a.bindIfExists(key, event, handler);
     }
+    bindKeyboardEvents() {
+        var _a, _b;
+        const ownerDocument = (_b = (_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        if (this.keyboardHandler && this.keyboardDocument) {
+            this.keyboardDocument.removeEventListener('keydown', this.keyboardHandler);
+        }
+        this.keyboardDocument = ownerDocument;
+        this.keyboardHandler = (event) => this.handleKeyboardEvent(event);
+        ownerDocument.addEventListener('keydown', this.keyboardHandler);
+    }
+    isNativeTextInputActive() {
+        var _a;
+        const activeElement = (_a = this.keyboardDocument) === null || _a === void 0 ? void 0 : _a.activeElement;
+        if (!activeElement)
+            return false;
+        const tagName = activeElement.tagName.toLowerCase();
+        return (tagName === 'input' ||
+            tagName === 'textarea' ||
+            tagName === 'select' ||
+            activeElement.isContentEditable === true);
+    }
+    isFabricTextEditingActive() {
+        var _a;
+        const activeObject = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getActiveObject();
+        return !!(activeObject &&
+            isTextAnnotationObject(activeObject) &&
+            activeObject.isEditing === true);
+    }
+    handleKeyboardEvent(event) {
+        if (this.isDisposed)
+            return;
+        if (event.key === 'Delete' || event.key === 'Backspace') {
+            if (this.isNativeTextInputActive() || this.isFabricTextEditingActive())
+                return;
+            this.deleteSelectedObject();
+            return;
+        }
+        if (event.key !== 'Escape')
+            return;
+        if (this.isFabricTextEditingActive() && this.canvas) {
+            finalizeActiveTextEditing(this.buildTextControllerContext(), { commit: false });
+            event.preventDefault();
+            return;
+        }
+        if (this.textSession) {
+            this.exitTextMode();
+        }
+        else if (this.drawSession) {
+            this.exitDrawMode();
+        }
+        else if (this.mosaicSession) {
+            this.exitMosaicMode();
+        }
+        else if (this.cropSession) {
+            this.cancelCrop();
+        }
+    }
+    finalizeActiveTextEditingIfNeeded() {
+        if (!this.canvas || !this.isFabricTextEditingActive())
+            return;
+        finalizeActiveTextEditing(this.buildTextControllerContext(), { commit: true });
+    }
     async loadImageFile(file) {
         const inputId = this.elements.imageInput;
         const inputEl = inputId
@@ -477,6 +897,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)
@@ -485,9 +908,11 @@ export class ImageEditor {
             return;
         if (!this.canRunIdleOperation('loadImage', options))
             return;
+        this.finalizeActiveTextEditingIfNeeded();
         const callbackContext = this.getOperationContext('loadImage', options);
         const previousImage = this.originalImage;
         const hadMasks = this.getMasks().length > 0;
+        const hadAnnotations = this.getAnnotations().length > 0;
         this.emitOptionCallback('onImageLoadStart', [callbackContext]);
         this.operationGuard.beginLoading();
         this.emitBusyChangeIfChanged(callbackContext);
@@ -496,7 +921,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,
@@ -516,6 +941,10 @@ export class ImageEditor {
             setMaskCounter: (v) => {
                 this.maskCounter = v;
             },
+            getAnnotationCounter: () => this.annotationCounter,
+            setAnnotationCounter: (v) => {
+                this.annotationCounter = v;
+            },
             getCurrentScale: () => this.currentScale,
             setCurrentScale: (v) => {
                 this.currentScale = v;
@@ -548,6 +977,7 @@ export class ImageEditor {
         this.lastMask = null;
         this.updateInputs();
         this.updateMaskList();
+        this.updateAnnotationList();
         this.updateUi();
         if (previousImage && previousImage !== this.originalImage) {
             this.emitOptionCallback('onImageCleared', [previousImage, callbackContext]);
@@ -559,6 +989,9 @@ export class ImageEditor {
         if (hadMasks) {
             this.emitMasksChanged(callbackContext);
         }
+        if (hadAnnotations) {
+            this.emitAnnotationsChanged(callbackContext);
+        }
         this.emitImageChanged(callbackContext);
     }
     getInternalOperationToken(options) {
@@ -583,10 +1016,11 @@ export class ImageEditor {
     assertIdleForOperation(operationName, options) {
         const token = this.getInternalOperationToken(options);
         this.operationGuard.assertIdleForOperation(operationName, token);
-        if (this.cropSession &&
+        const activeToolMode = this.getActiveToolMode();
+        if (activeToolMode &&
             !this.operationGuard.isOwnOperation(token) &&
-            !CROP_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
-            throw new Error(`[ImageEditor] Cannot run "${operationName}" while crop mode is active.`);
+            !TOOL_MODE_ALLOWED_OPERATIONS[activeToolMode].has(operationName)) {
+            throw new Error(`[ImageEditor] Cannot run "${operationName}" while ${activeToolMode} mode is active.`);
         }
         if (this.animQueue.isBusy() && !this.canRunDuringAnimationQueue(options)) {
             throw new Error(`[ImageEditor] Cannot run "${operationName}" while an animation is queued.`);
@@ -597,10 +1031,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 +1053,23 @@ 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.isToolModeActive();
     }
     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 +1078,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);
     }
@@ -681,11 +1128,35 @@ export class ImageEditor {
             return [];
         return this.canvas.getObjects().filter(isMaskObject).slice();
     }
+    getAnnotations() {
+        if (!this.canvas)
+            return [];
+        return getAnnotationsImpl(this.canvas);
+    }
     getMaskCollectionSignature() {
         return this.getMasks()
             .map((mask) => `${mask.maskId}:${mask.maskName}`)
             .join('|');
     }
+    getAnnotationCollectionSignature() {
+        return this.getAnnotations()
+            .map((annotation) => `${annotation.annotationId}:${annotation.annotationName}`)
+            .join('|');
+    }
+    getActiveToolMode() {
+        if (this.cropSession)
+            return 'crop';
+        if (this.mosaicSession)
+            return 'mosaic';
+        if (this.textSession)
+            return 'text';
+        if (this.drawSession)
+            return 'draw';
+        return null;
+    }
+    isToolModeActive() {
+        return this.getActiveToolMode() !== null;
+    }
     getEditorState() {
         const canvasWidth = this.canvas ? this.canvas.getWidth() : 0;
         const canvasHeight = this.canvas ? this.canvas.getHeight() : 0;
@@ -694,10 +1165,15 @@ export class ImageEditor {
             hasImage: image !== null,
             image,
             maskCount: this.getMasks().length,
+            annotationCount: this.getAnnotations().length,
             currentScale: this.currentScale,
             currentRotation: this.currentRotation,
             isBusy: this.isBusy(),
+            activeToolMode: this.getActiveToolMode(),
             isCropMode: this.cropSession !== null,
+            isMosaicMode: this.mosaicSession !== null,
+            isTextMode: this.textSession !== null,
+            isDrawMode: this.drawSession !== null,
             canUndo: this.historyManager.canUndo(),
             canRedo: this.historyManager.canRedo(),
             canvasWidth,
@@ -710,6 +1186,9 @@ export class ImageEditor {
     emitMasksChanged(context) {
         this.emitOptionCallback('onMasksChanged', [this.getMasks(), context]);
     }
+    emitAnnotationsChanged(context) {
+        this.emitOptionCallback('onAnnotationsChanged', [this.getAnnotations(), context]);
+    }
     emitBusyChangeIfChanged(context) {
         const isBusy = this.isBusy();
         if (this.lastEmittedIsBusy === isBusy)
@@ -718,11 +1197,20 @@ export class ImageEditor {
         this.emitOptionCallback('onBusyChange', [isBusy, context]);
     }
     buildSelection(selected) {
-        var _a;
+        var _a, _b;
         const selectedMasks = selected.filter(isMaskObject);
+        const selectedAnnotations = selected.filter(isAnnotationObject);
+        const selectedObjectKind = selectedMasks.length === 1 && selectedAnnotations.length === 0
+            ? 'mask'
+            : selectedAnnotations.length === 1 && selectedMasks.length === 0
+                ? 'annotation'
+                : null;
         return {
             selectedMask: (_a = selectedMasks[0]) !== null && _a !== void 0 ? _a : null,
             selectedMasks,
+            selectedAnnotation: (_b = selectedAnnotations[0]) !== null && _b !== void 0 ? _b : null,
+            selectedAnnotations,
+            selectedObjectKind,
         };
     }
     withSelectionChangeContext(context, callback) {
@@ -761,7 +1249,7 @@ export class ImageEditor {
         applyCanvasDimensions(this.canvas, widthPx, heightPx, this.containerElement);
     }
     alignObjectBoundingBoxToCanvasTopLeft(object) {
-        var _a, _b;
+        var _a, _b, _c;
         object.setCoords();
         const boundingRect = object.getBoundingRect();
         object.set({
@@ -769,7 +1257,7 @@ export class ImageEditor {
             top: ((_b = object.top) !== null && _b !== void 0 ? _b : 0) - boundingRect.top,
         });
         object.setCoords();
-        this.canvas.renderAll();
+        (_c = this.canvas) === null || _c === void 0 ? void 0 : _c.renderAll();
     }
     measureLayoutViewport(scrollbarSize) {
         return this.viewportCache.measure(this.containerElement, {
@@ -777,7 +1265,13 @@ export class ImageEditor {
             height: this.options.canvasHeight,
         }, scrollbarSize);
     }
-    updateCanvasSizeToImageBounds() {
+    getScrollbarStableViewportCanvasSize(viewport) {
+        return {
+            width: Math.max(1, viewport.width - 1),
+            height: Math.max(1, viewport.height - 1),
+        };
+    }
+    updateCanvasSizeToImageBounds(options = {}) {
         var _a, _b;
         if (!this.originalImage)
             return;
@@ -785,13 +1279,26 @@ 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) {
+        const shouldStabilizeContainedViewport = options.stabilizeContainedViewport !== false;
+        const imageFitsViewport = boundingRect.width <= viewport.width + LAYOUT_EPSILON &&
+            boundingRect.height <= viewport.height + LAYOUT_EPSILON;
+        if (this.currentLayoutMode === 'fit' || this.currentLayoutMode === 'cover') {
+            if (imageFitsViewport) {
+                const canvasSize = shouldStabilizeContainedViewport
+                    ? this.getScrollbarStableViewportCanvasSize(viewport)
+                    : viewport;
+                this.setCanvasSizePx(canvasSize.width, canvasSize.height);
+                return;
+            }
             const canvasSize = computeScrollableCanvasSize(boundingRect.width, boundingRect.height, viewport, scrollbarSize);
             this.setCanvasSizePx(canvasSize.width, canvasSize.height);
             return;
         }
-        if (boundingRect.width <= viewport.width && boundingRect.height <= viewport.height) {
-            this.setCanvasSizePx(viewport.width, viewport.height);
+        if (imageFitsViewport) {
+            const canvasSize = shouldStabilizeContainedViewport
+                ? this.getScrollbarStableViewportCanvasSize(viewport)
+                : viewport;
+            this.setCanvasSizePx(canvasSize.width, canvasSize.height);
             return;
         }
         this.setCanvasSizePx(Math.max(viewport.width, Math.ceil(boundingRect.width)), Math.max(viewport.height, Math.ceil(boundingRect.height)));
@@ -807,14 +1314,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 +1329,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;
@@ -864,7 +1398,7 @@ export class ImageEditor {
     }
     buildTransformContext() {
         return {
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('buildTransformContext'),
             options: this.options,
             guard: this.operationGuard,
             getOriginalImage: () => this.originalImage,
@@ -886,11 +1420,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()
@@ -1020,6 +1550,7 @@ export class ImageEditor {
         const context = this.buildCallbackContext(activeRestoreOperation !== null && activeRestoreOperation !== void 0 ? activeRestoreOperation : 'loadFromState', activeRestoreOperation === 'undo' || activeRestoreOperation === 'redo');
         const previousImage = this.originalImage;
         const previousMaskSignature = this.getMaskCollectionSignature();
+        const previousAnnotationSignature = this.getAnnotationCollectionSignature();
         try {
             const restoredState = await loadFromStateImpl({
                 canvas: this.canvas,
@@ -1042,6 +1573,7 @@ export class ImageEditor {
                 this.canvas.sendObjectToBack(this.originalImage);
             }
             this.maskCounter = restoredState.maxMaskId;
+            this.annotationCounter = restoredState.maxAnnotationId;
             const editorState = restoredState.editorState;
             if (editorState) {
                 this.currentScale = editorState.currentScale;
@@ -1058,24 +1590,26 @@ export class ImageEditor {
                 this.currentImageMimeType = null;
             }
             this.isImageLoadedToCanvas = !!this.originalImage;
-            if (this.originalImage &&
-                (this.options.expandCanvasToImage ||
-                    this.options.coverImageToCanvas ||
-                    this.options.fitImageToCanvas) &&
-                this.shouldNormalizeCanvasSizeAfterStateRestore()) {
-                this.updateCanvasSizeToImageBounds();
+            if (this.originalImage && this.shouldNormalizeCanvasSizeAfterStateRestore()) {
+                this.updateCanvasSizeToImageBounds({ stabilizeContainedViewport: false });
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
             }
-            const restoredMasks = restoredState.objects.filter(isMaskObject);
+            if (this.originalImage) {
+                this.settleFitCoverScrollbarsAfterStateRestore();
+            }
+            const restoredMasks = restoredState.masks;
             this.lastMask = restoredMasks.reduce((lastMask, maskObject) => !lastMask || maskObject.maskId > lastMask.maskId ? maskObject : lastMask, null);
             restoredMasks.forEach((maskObject) => {
                 applyMaskUnselectedStyle(maskObject);
                 reattachMaskHoverHandlers(maskObject);
             });
+            syncAnnotationRuntimeStates(restoredState.annotations);
+            attachTextEditingHandlersToAnnotations(this.buildTextControllerContext(), restoredState.annotations);
             this.lastSnapshot = this.captureSnapshotInternal();
             this.canvas.renderAll();
             this.updateInputs();
             this.updateMaskList();
+            this.updateAnnotationList();
             this.updateUi();
             if (previousImage && previousImage !== this.originalImage) {
                 this.emitOptionCallback('onImageCleared', [previousImage, context]);
@@ -1083,17 +1617,32 @@ export class ImageEditor {
             if (previousMaskSignature !== this.getMaskCollectionSignature()) {
                 this.emitMasksChanged(context);
             }
+            if (previousAnnotationSignature !== this.getAnnotationCollectionSignature()) {
+                this.emitAnnotationsChanged(context);
+            }
             this.emitImageChanged(context);
+            const canvas = this.getLiveCanvasOrThrow('loadFromState');
             const activeMaskId = editorState === null || editorState === void 0 ? void 0 : editorState.activeMaskId;
-            if (typeof activeMaskId === 'number') {
+            const activeAnnotationId = editorState === null || editorState === void 0 ? void 0 : editorState.activeAnnotationId;
+            if ((editorState === null || editorState === void 0 ? void 0 : editorState.activeObjectKind) === 'mask' && typeof activeMaskId === 'number') {
                 const activeMask = restoredMasks.find((maskObject) => maskObject.maskId === activeMaskId);
                 if (activeMask) {
                     this.withSelectionChangeContext(context, () => {
-                        this.canvas.setActiveObject(activeMask);
+                        canvas.setActiveObject(activeMask);
                         this.handleSelectionChanged([activeMask]);
                     });
                 }
             }
+            else if ((editorState === null || editorState === void 0 ? void 0 : editorState.activeObjectKind) === 'annotation' &&
+                typeof activeAnnotationId === 'number') {
+                const activeAnnotation = restoredState.annotations.find((annotation) => annotation.annotationId === activeAnnotationId);
+                if (activeAnnotation) {
+                    this.withSelectionChangeContext(context, () => {
+                        canvas.setActiveObject(activeAnnotation);
+                        this.handleSelectionChanged([activeAnnotation]);
+                    });
+                }
+            }
         }
         catch (error) {
             reportError(this.options, error, 'Failed to restore canvas state.');
@@ -1104,62 +1653,67 @@ export class ImageEditor {
         this.saveStateInternal();
     }
     saveStateInternal(options) {
-        var _a, _b;
+        var _a, _b, _c;
         if (!this.canvas || this.shouldSuppressSaveState)
             return;
         if (!this.canRunIdleOperation('saveState', options))
             return;
         const activeObj = this.canvas.getActiveObject();
         const activeMask = this.getActiveMaskForSnapshot();
+        const activeAnnotation = this.getActiveAnnotationForSnapshot();
         this.hideAllMaskLabels();
         try {
             const after = saveStateImpl({
                 canvas: this.canvas,
                 activeMaskId: (_a = activeMask === null || activeMask === void 0 ? void 0 : activeMask.maskId) !== null && _a !== void 0 ? _a : null,
+                activeAnnotationId: (_b = activeAnnotation === null || activeAnnotation === void 0 ? void 0 : activeAnnotation.annotationId) !== null && _b !== void 0 ? _b : null,
                 currentScale: this.currentScale,
                 currentRotation: this.currentRotation,
                 baseImageScale: this.baseImageScale,
                 currentImageMimeType: this.currentImageMimeType,
             });
-            const before = (_b = this.lastSnapshot) !== null && _b !== void 0 ? _b : after;
+            const before = (_c = this.lastSnapshot) !== null && _c !== void 0 ? _c : after;
             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) {
             reportWarning(this.options, error, 'Failed to capture canvas snapshot.');
         }
         finally {
-            this.restoreActiveMaskAfterSnapshot(activeObj, activeMask);
+            this.restoreActiveObjectAfterSnapshot(activeObj, activeMask, activeAnnotation);
             this.updateUi();
         }
     }
-    restoreActiveMaskAfterSnapshot(activeObj, activeMask) {
+    restoreActiveObjectAfterSnapshot(activeObj, activeMask, activeAnnotation) {
         if (!this.canvas)
             return;
         const maskToRestore = activeObj && isMaskObject(activeObj) ? activeObj : activeMask;
-        if (!maskToRestore || !this.canvas.getObjects().includes(maskToRestore))
+        const annotationToRestore = activeObj && isAnnotationObject(activeObj) ? activeObj : activeAnnotation;
+        if (maskToRestore && this.canvas.getObjects().includes(maskToRestore)) {
+            this.canvas.setActiveObject(maskToRestore);
+            this.showLabelForMask(maskToRestore);
+            this.updateMaskListSelection(maskToRestore);
             return;
-        this.canvas.setActiveObject(maskToRestore);
-        this.showLabelForMask(maskToRestore);
-        this.updateMaskListSelection(maskToRestore);
+        }
+        if (annotationToRestore && this.canvas.getObjects().includes(annotationToRestore)) {
+            this.canvas.setActiveObject(annotationToRestore);
+            this.updateAnnotationListSelection(annotationToRestore);
+        }
     }
     undo() {
         if (this.isDisposed)
             return Promise.resolve();
         if (!this.canRunIdleOperation('undo'))
             return Promise.resolve();
+        this.finalizeActiveTextEditingIfNeeded();
         const context = this.buildCallbackContext('undo', true);
         const job = this.animQueue.add(async () => {
             if (this.isDisposed)
@@ -1183,6 +1737,7 @@ export class ImageEditor {
             return Promise.resolve();
         if (!this.canRunIdleOperation('redo'))
             return Promise.resolve();
+        this.finalizeActiveTextEditingIfNeeded();
         const context = this.buildCallbackContext('redo', true);
         const job = this.animQueue.add(async () => {
             if (this.isDisposed)
@@ -1248,8 +1803,8 @@ export class ImageEditor {
     buildCreateMaskContext() {
         return {
             fabric: this.fabricModule,
-            canvas: this.canvas,
-            options: this.options,
+            canvas: this.getLiveCanvasOrThrow('createMask'),
+            options: this.getRuntimeOptions(),
             getLastMask: () => this.lastMask,
             setLastMask: (maskObject) => {
                 this.lastMask = maskObject;
@@ -1271,7 +1826,7 @@ export class ImageEditor {
     }
     buildRemoveMaskContext() {
         return {
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('removeMask'),
             removeLabelForMask: (mask) => {
                 this.removeLabelForMask(mask);
             },
@@ -1321,11 +1876,35 @@ export class ImageEditor {
             return;
         showLabelForMask(context, mask);
     }
+    handleObjectMovingScalingRotating(target) {
+        if (isMaskObject(target)) {
+            this.syncMaskLabel(target);
+        }
+    }
+    handleObjectModified(target) {
+        if (isMaskObject(target)) {
+            this.syncMaskLabel(target);
+            const context = this.buildCallbackContext('saveState', false);
+            this.saveState();
+            this.emitMasksChanged(context);
+            this.emitImageChanged(context);
+            return;
+        }
+        if (isAnnotationObject(target)) {
+            if (isAnnotationLocked(target))
+                return;
+            const context = this.buildCallbackContext('updateAnnotation', false);
+            this.saveState();
+            this.emitAnnotationsChanged(context);
+            this.emitImageChanged(context);
+        }
+    }
     handleSelectionChanged(selected) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this.canvas)
             return;
         const selectedMask = (_a = selected.find(isMaskObject)) !== null && _a !== void 0 ? _a : null;
+        const selectedAnnotation = (_b = selected.find(isAnnotationObject)) !== null && _b !== void 0 ? _b : null;
         const masks = this.canvas.getObjects().filter(isMaskObject);
         masks.forEach((maskObject) => {
             if (maskObject !== selectedMask) {
@@ -1341,9 +1920,10 @@ export class ImageEditor {
         if (selectedMask)
             this.showLabelForMask(selectedMask);
         this.updateMaskListSelection(selectedMask);
+        this.updateAnnotationListSelection(selectedAnnotation);
         this.canvas.requestRenderAll();
         this.updateUi();
-        const context = (_b = this.nextSelectionChangeContext) !== null && _b !== void 0 ? _b : this.buildCallbackContext((_c = this.activeStateRestoreOperation) !== null && _c !== void 0 ? _c : 'createMask', this.activeStateRestoreOperation === 'undo' ||
+        const context = (_c = this.nextSelectionChangeContext) !== null && _c !== void 0 ? _c : this.buildCallbackContext((_d = this.activeStateRestoreOperation) !== null && _d !== void 0 ? _d : 'createMask', this.activeStateRestoreOperation === 'undo' ||
             this.activeStateRestoreOperation === 'redo');
         this.emitOptionCallback('onSelectionChange', [this.buildSelection(selected), context]);
     }
@@ -1360,68 +1940,490 @@ export class ImageEditor {
     updateMaskListSelection(selectedMask) {
         updateMaskListSelection(this.buildMaskListContext(), selectedMask);
     }
-    async mergeMasks() {
+    enterTextMode() {
         if (!this.canvas)
             return;
-        if (!this.canRunIdleOperation('mergeMasks'))
+        if (!this.canRunIdleOperation('enterTextMode'))
             return;
-        const hasMasks = this.canvas.getObjects().some(isMaskObject);
-        if (!hasMasks)
+        if (this.isToolModeActive())
             return;
-        const callbackContext = this.buildCallbackContext('mergeMasks', false);
-        const operationToken = this.operationGuard.beginBusyOperation('mergeMasks');
+        enterTextModeImpl(this.buildTextControllerContext());
+        const callbackContext = this.buildCallbackContext('enterTextMode', false);
         this.emitBusyChangeIfChanged(callbackContext);
-        this.updateUi();
-        try {
-            const mergeMasksContext = this.buildMergeMasksContext(operationToken);
-            await mergeMasksImpl(mergeMasksContext);
-            this.updateInputs();
-            this.updateMaskList();
-            this.emitMasksChanged(callbackContext);
-            this.emitImageChanged(callbackContext);
-        }
-        finally {
-            this.operationGuard.endBusyOperation(operationToken);
-            this.emitBusyChangeIfChanged(callbackContext);
-            this.updateUi();
-        }
+        this.emitImageChanged(callbackContext);
     }
-    downloadImage(fileName) {
-        if (!this.canvas)
+    exitTextMode() {
+        if (!this.canvas || !this.textSession)
             return;
-        if (!this.canRunIdleOperation('downloadImage'))
+        if (!this.canRunIdleOperation('exitTextMode'))
             return;
-        const callbackContext = this.buildCallbackContext('downloadImage', false);
-        const operationToken = this.operationGuard.beginBusyOperation('downloadImage');
+        exitTextModeImpl(this.buildTextControllerContext());
+        const callbackContext = this.buildCallbackContext('exitTextMode', false);
         this.emitBusyChangeIfChanged(callbackContext);
-        const exportContext = this.buildExportServiceContext();
-        try {
-            downloadImageImpl(exportContext, fileName);
-        }
-        finally {
-            this.operationGuard.endBusyOperation(operationToken);
-            this.emitBusyChangeIfChanged(callbackContext);
-        }
+        this.emitImageChanged(callbackContext);
     }
-    async exportImageBase64(options) {
+    isTextMode() {
+        return this.textSession !== null;
+    }
+    createTextAnnotation(config = {}) {
         if (!this.canvas)
-            return '';
-        if (!this.canRunIdleOperation('exportImageBase64', options))
-            return '';
-        const callbackContext = this.buildCallbackContext('exportImageBase64', false);
-        const operationToken = this.operationGuard.beginBusyOperation('exportImageBase64');
-        this.emitBusyChangeIfChanged(callbackContext);
-        const exportContext = this.buildExportServiceContext();
-        try {
-            return await exportImageBase64Impl(exportContext, options);
-        }
-        finally {
-            this.operationGuard.endBusyOperation(operationToken);
-            this.emitBusyChangeIfChanged(callbackContext);
-        }
+            return null;
+        if (!this.canRunIdleOperation('createTextAnnotation'))
+            return null;
+        return createTextAnnotationImpl(this.buildTextControllerContext(), config);
     }
-    async exportImageFile(options) {
-        this.assertIdleForOperation('exportImageFile', options);
+    enterDrawMode() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('enterDrawMode'))
+            return;
+        if (this.isToolModeActive())
+            return;
+        enterDrawModeImpl(this.buildDrawControllerContext());
+        const callbackContext = this.buildCallbackContext('enterDrawMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    exitDrawMode() {
+        if (!this.canvas || !this.drawSession)
+            return;
+        if (!this.canRunIdleOperation('exitDrawMode'))
+            return;
+        exitDrawModeImpl(this.buildDrawControllerContext());
+        const callbackContext = this.buildCallbackContext('exitDrawMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    isDrawMode() {
+        return this.drawSession !== null;
+    }
+    getTextConfig() {
+        return cloneResolvedTextAnnotationConfig(this.currentTextConfig);
+    }
+    setTextConfig(config) {
+        this.applyTextConfigPatch(config, 'setTextConfig');
+    }
+    resetTextConfig() {
+        this.applyTextConfigPatch(this.defaultTextConfig, 'resetTextConfig');
+    }
+    setTextColor(color) {
+        this.applyTextConfigPatch({ fill: color }, 'setTextColor');
+    }
+    setTextFontSize(size) {
+        this.applyTextConfigPatch({ fontSize: size }, 'setTextFontSize');
+    }
+    getDrawConfig() {
+        return cloneResolvedDrawConfig(this.currentDrawConfig);
+    }
+    setDrawConfig(config) {
+        this.applyDrawConfigPatch(config, 'setDrawConfig');
+    }
+    resetDrawConfig() {
+        this.applyDrawConfigPatch(this.defaultDrawConfig, 'resetDrawConfig');
+    }
+    setDrawColor(color) {
+        this.applyDrawConfigPatch({ color }, 'setDrawColor');
+    }
+    setDrawBrushSize(size) {
+        this.applyDrawConfigPatch({ brushSize: size }, 'setDrawBrushSize');
+    }
+    removeSelectedAnnotation() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('removeSelectedAnnotation'))
+            return;
+        const before = this.getAnnotations().length;
+        const callbackContext = this.buildCallbackContext('removeSelectedAnnotation', false);
+        this.withSelectionChangeContext(callbackContext, () => {
+            removeSelectedAnnotationImpl(this.buildAnnotationManagerContext());
+        });
+        this.updateAnnotationList();
+        this.updateUi();
+        if (this.getAnnotations().length !== before) {
+            this.emitAnnotationsChanged(callbackContext);
+            this.emitImageChanged(callbackContext);
+        }
+    }
+    removeAllAnnotations(options = {}) {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('removeAllAnnotations', options))
+            return;
+        const before = this.getAnnotations().length;
+        const callbackContext = this.buildCallbackContext('removeAllAnnotations', false);
+        this.withSelectionChangeContext(callbackContext, () => {
+            removeAllAnnotationsImpl(this.buildAnnotationManagerContext(), options);
+        });
+        this.updateAnnotationList();
+        this.updateUi();
+        if (this.getAnnotations().length !== before) {
+            this.emitAnnotationsChanged(callbackContext);
+            this.emitImageChanged(callbackContext);
+        }
+    }
+    updateAnnotation(annotationId, config) {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('updateAnnotation'))
+            return;
+        const callbackContext = this.buildCallbackContext('updateAnnotation', false);
+        const changed = updateAnnotationImpl(this.buildAnnotationManagerContext(), annotationId, config);
+        if (changed) {
+            this.updateAnnotationList();
+            this.emitAnnotationsChanged(callbackContext);
+            this.emitImageChanged(callbackContext);
+        }
+    }
+    updateSelectedAnnotation(config) {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('updateSelectedAnnotation'))
+            return;
+        const callbackContext = this.buildCallbackContext('updateSelectedAnnotation', false);
+        const changed = updateSelectedAnnotationImpl(this.buildAnnotationManagerContext(), config);
+        if (changed) {
+            this.updateAnnotationList();
+            this.emitAnnotationsChanged(callbackContext);
+            this.emitImageChanged(callbackContext);
+        }
+    }
+    deleteSelectedObject() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('deleteSelectedObject'))
+            return;
+        this.finalizeActiveTextEditingIfNeeded();
+        const selectedObjects = this.getSelectedCanvasObjects();
+        const selectedMasks = selectedObjects.filter(isMaskObject);
+        const selectedAnnotations = selectedObjects.filter((object) => isAnnotationObject(object) && isAnnotationUnlocked(object));
+        if (selectedMasks.length === 0 && selectedAnnotations.length === 0)
+            return;
+        const canvas = this.getLiveCanvasOrThrow('deleteSelectedObject');
+        const callbackContext = this.buildCallbackContext('deleteSelectedObject', false);
+        this.withSelectionChangeContext(callbackContext, () => {
+            for (const mask of selectedMasks) {
+                this.removeLabelForMask(mask);
+                canvas.remove(mask);
+            }
+            removeAnnotationObjects(this.buildAnnotationManagerContext(), selectedAnnotations, {
+                saveHistory: false,
+                force: true,
+            });
+            canvas.discardActiveObject();
+            canvas.renderAll();
+            this.saveState();
+        });
+        this.updateMaskList();
+        this.updateAnnotationList();
+        this.updateUi();
+        if (selectedMasks.length > 0)
+            this.emitMasksChanged(callbackContext);
+        if (selectedAnnotations.length > 0)
+            this.emitAnnotationsChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    bringSelectedObjectForward() {
+        this.moveSelectedEditableObject('bringSelectedObjectForward');
+    }
+    sendSelectedObjectBackward() {
+        this.moveSelectedEditableObject('sendSelectedObjectBackward');
+    }
+    bringSelectedObjectToFront() {
+        this.moveSelectedEditableObject('bringSelectedObjectToFront');
+    }
+    sendSelectedObjectToBack() {
+        this.moveSelectedEditableObject('sendSelectedObjectToBack');
+    }
+    buildAnnotationManagerContext() {
+        return {
+            canvas: this.getLiveCanvasOrThrow('annotationManager'),
+            saveCanvasState: () => this.saveState(),
+            updateUi: () => this.updateUi(),
+        };
+    }
+    buildAnnotationListContext() {
+        return {
+            canvas: this.canvas,
+            getListElementId: () => this.elements.annotationList,
+            onAnnotationSelected: (annotation) => this.handleSelectionChanged([annotation]),
+        };
+    }
+    updateAnnotationList() {
+        renderAnnotationList(this.buildAnnotationListContext());
+    }
+    updateAnnotationListSelection(selectedAnnotation) {
+        updateAnnotationListSelection(this.buildAnnotationListContext(), selectedAnnotation);
+    }
+    buildTextControllerContext() {
+        return {
+            fabric: this.fabricModule,
+            canvas: this.getLiveCanvasOrThrow('textController'),
+            options: this.options,
+            getOriginalImage: () => this.originalImage,
+            getTextConfig: () => this.currentTextConfig,
+            isImageLoaded: () => this.isImageLoaded(),
+            getAnnotationCounter: () => this.annotationCounter,
+            setAnnotationCounter: (value) => {
+                this.annotationCounter = value;
+            },
+            getTextSession: () => this.textSession,
+            setTextSession: (session) => {
+                this.textSession = session;
+            },
+            saveCanvasState: () => this.saveState(),
+            updateAnnotationList: () => this.updateAnnotationList(),
+            updateUi: () => this.updateUi(),
+            emitAnnotationsChanged: (context) => this.emitAnnotationsChanged(context),
+            emitImageChanged: (context) => this.emitImageChanged(context),
+            buildCallbackContext: (operation) => this.buildCallbackContext(operation, false),
+        };
+    }
+    buildDrawControllerContext() {
+        return {
+            fabric: this.fabricModule,
+            canvas: this.getLiveCanvasOrThrow('drawController'),
+            options: this.options,
+            getDrawConfig: () => this.currentDrawConfig,
+            isImageLoaded: () => this.isImageLoaded(),
+            getAnnotationCounter: () => this.annotationCounter,
+            setAnnotationCounter: (value) => {
+                this.annotationCounter = value;
+            },
+            getDrawSession: () => this.drawSession,
+            setDrawSession: (session) => {
+                this.drawSession = session;
+            },
+            saveCanvasState: () => this.saveState(),
+            updateAnnotationList: () => this.updateAnnotationList(),
+            updateUi: () => this.updateUi(),
+            emitAnnotationsChanged: (context) => this.emitAnnotationsChanged(context),
+            emitImageChanged: (context) => this.emitImageChanged(context),
+            buildCallbackContext: (operation) => this.buildCallbackContext(operation, false),
+        };
+    }
+    applyTextConfigPatch(config, operation) {
+        if (!this.canRunIdleOperation(operation))
+            return;
+        const invalidFields = getInvalidTextAnnotationConfigFields(config);
+        if (invalidFields.length > 0) {
+            reportWarning(this.options, null, `${operation} ignored invalid Text config fields: ${invalidFields.join(', ')}.`);
+        }
+        const next = mergeTextAnnotationConfigPatch(this.currentTextConfig, config, this.defaultTextConfig);
+        if (areResolvedTextAnnotationConfigsEqual(this.currentTextConfig, next))
+            return;
+        this.currentTextConfig = next;
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext(operation, false));
+    }
+    applyDrawConfigPatch(config, operation) {
+        if (!this.canRunIdleOperation(operation))
+            return;
+        const invalidFields = getInvalidDrawConfigFields(config);
+        if (invalidFields.length > 0) {
+            reportWarning(this.options, null, `${operation} ignored invalid Draw config fields: ${invalidFields.join(', ')}.`);
+        }
+        const next = mergeDrawConfigPatch(this.currentDrawConfig, config, this.defaultDrawConfig);
+        if (areResolvedDrawConfigsEqual(this.currentDrawConfig, next))
+            return;
+        this.currentDrawConfig = next;
+        updateDrawBrush(this.buildDrawControllerContext());
+        this.updateInputs();
+        this.updateUi();
+        this.emitImageChanged(this.buildCallbackContext(operation, false));
+    }
+    applyTextColorInput(color) {
+        var _a;
+        if (this.isTextMode()) {
+            this.setTextColor(color);
+            return;
+        }
+        const selected = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getActiveObject();
+        if (selected && isTextAnnotationObject(selected)) {
+            this.updateSelectedAnnotation({ fill: color });
+            return;
+        }
+        this.setTextColor(color);
+    }
+    applyTextFontSizeInput(size) {
+        var _a;
+        if (this.isTextMode()) {
+            this.setTextFontSize(size);
+            return;
+        }
+        const selected = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getActiveObject();
+        if (selected && isTextAnnotationObject(selected)) {
+            this.updateSelectedAnnotation({ fontSize: size });
+            return;
+        }
+        this.setTextFontSize(size);
+    }
+    applyDrawColorInput(color) {
+        var _a;
+        if (this.isDrawMode()) {
+            this.setDrawColor(color);
+            return;
+        }
+        const selected = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getActiveObject();
+        if (selected && isDrawAnnotationObject(selected)) {
+            this.updateSelectedAnnotation({ stroke: color });
+            return;
+        }
+        this.setDrawColor(color);
+    }
+    applyDrawBrushSizeInput(size) {
+        var _a;
+        if (this.isDrawMode()) {
+            this.setDrawBrushSize(size);
+            return;
+        }
+        const selected = (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.getActiveObject();
+        if (selected && isDrawAnnotationObject(selected)) {
+            this.updateSelectedAnnotation({ strokeWidth: size });
+            return;
+        }
+        this.setDrawBrushSize(size);
+    }
+    getSelectedCanvasObjects() {
+        var _a, _b, _c;
+        if (!this.canvas)
+            return [];
+        const activeObject = this.canvas.getActiveObject();
+        if (!activeObject)
+            return [];
+        const type = typeof activeObject.type === 'string' ? activeObject.type.toLowerCase() : '';
+        const isActiveSelection = type === 'activeselection' ||
+            ((_c = (_b = (_a = activeObject).isType) === null || _b === void 0 ? void 0 : _b.call(_a, 'ActiveSelection')) !== null && _c !== void 0 ? _c : false);
+        if (!isActiveSelection)
+            return [activeObject];
+        const getObjects = activeObject
+            .getObjects;
+        return typeof getObjects === 'function' ? getObjects.call(activeObject) : [];
+    }
+    moveSelectedEditableObject(operation) {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation(operation))
+            return;
+        const selected = this.getSelectedCanvasObjects().filter(isEditableOverlayObject);
+        if (selected.length !== 1) {
+            if (selected.length > 1) {
+                reportWarning(this.options, null, `${operation} skipped: ActiveSelection layer moves are not supported.`);
+            }
+            return;
+        }
+        const object = selected[0];
+        const range = getEditableOverlayRange(this.canvas);
+        const overlays = range.overlays;
+        const currentOverlayIndex = overlays.indexOf(object);
+        if (currentOverlayIndex < 0)
+            return;
+        let nextOverlayIndex = currentOverlayIndex;
+        if (operation === 'bringSelectedObjectForward') {
+            nextOverlayIndex = Math.min(overlays.length - 1, currentOverlayIndex + 1);
+        }
+        else if (operation === 'sendSelectedObjectBackward') {
+            nextOverlayIndex = Math.max(0, currentOverlayIndex - 1);
+        }
+        else if (operation === 'bringSelectedObjectToFront') {
+            nextOverlayIndex = overlays.length - 1;
+        }
+        else if (operation === 'sendSelectedObjectToBack') {
+            nextOverlayIndex = 0;
+        }
+        if (nextOverlayIndex === currentOverlayIndex)
+            return;
+        const reordered = overlays.slice();
+        reordered.splice(currentOverlayIndex, 1);
+        reordered.splice(nextOverlayIndex, 0, object);
+        reordered.forEach((overlay, index) => {
+            var _a, _b;
+            (_b = (_a = this.canvas).moveObjectTo) === null || _b === void 0 ? void 0 : _b.call(_a, overlay, range.start + index);
+        });
+        normalizeLayerOrder(this.canvas);
+        this.canvas.setActiveObject(object);
+        this.canvas.renderAll();
+        this.saveState();
+        this.updateMaskList();
+        this.updateAnnotationList();
+        this.updateUi();
+        const context = this.buildCallbackContext(operation, false);
+        if (isMaskObject(object))
+            this.emitMasksChanged(context);
+        if (isAnnotationObject(object))
+            this.emitAnnotationsChanged(context);
+        this.emitImageChanged(context);
+    }
+    async mergeMasks() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('mergeMasks'))
+            return;
+        this.finalizeActiveTextEditingIfNeeded();
+        const hasMasks = this.canvas.getObjects().some(isMaskObject);
+        if (!hasMasks)
+            return;
+        const callbackContext = this.buildCallbackContext('mergeMasks', false);
+        const operationToken = this.operationGuard.beginBusyOperation('mergeMasks');
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.updateUi();
+        try {
+            const mergeMasksContext = this.buildMergeMasksContext(operationToken);
+            await mergeMasksImpl(mergeMasksContext);
+            this.updateInputs();
+            this.updateMaskList();
+            this.updateAnnotationList();
+            this.emitMasksChanged(callbackContext);
+            if (this.getAnnotations().length > 0) {
+                this.emitAnnotationsChanged(callbackContext);
+            }
+            this.emitImageChanged(callbackContext);
+        }
+        finally {
+            this.operationGuard.endBusyOperation(operationToken);
+            this.emitBusyChangeIfChanged(callbackContext);
+            this.updateUi();
+        }
+    }
+    downloadImage(options) {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('downloadImage'))
+            return;
+        this.finalizeActiveTextEditingIfNeeded();
+        const callbackContext = this.buildCallbackContext('downloadImage', false);
+        const operationToken = this.operationGuard.beginBusyOperation('downloadImage');
+        this.emitBusyChangeIfChanged(callbackContext);
+        const exportContext = this.buildExportServiceContext();
+        try {
+            downloadImageImpl(exportContext, options);
+        }
+        finally {
+            this.operationGuard.endBusyOperation(operationToken);
+            this.emitBusyChangeIfChanged(callbackContext);
+        }
+    }
+    async exportImageBase64(options) {
+        if (!this.canvas)
+            return '';
+        if (!this.canRunIdleOperation('exportImageBase64', options))
+            return '';
+        this.finalizeActiveTextEditingIfNeeded();
+        const callbackContext = this.buildCallbackContext('exportImageBase64', false);
+        const operationToken = this.operationGuard.beginBusyOperation('exportImageBase64');
+        this.emitBusyChangeIfChanged(callbackContext);
+        const exportContext = this.buildExportServiceContext();
+        try {
+            return await exportImageBase64Impl(exportContext, options);
+        }
+        finally {
+            this.operationGuard.endBusyOperation(operationToken);
+            this.emitBusyChangeIfChanged(callbackContext);
+        }
+    }
+    async exportImageFile(options) {
+        this.assertIdleForOperation('exportImageFile', options);
+        this.finalizeActiveTextEditingIfNeeded();
         const callbackContext = this.buildCallbackContext('exportImageFile', false);
         const operationToken = this.operationGuard.beginBusyOperation('exportImageFile');
         this.emitBusyChangeIfChanged(callbackContext);
@@ -1437,7 +2439,7 @@ export class ImageEditor {
     buildExportServiceContext() {
         return {
             fabric: this.fabricModule,
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('export'),
             options: this.options,
             isImageLoaded: () => this.isImageLoaded(),
             getOriginalImage: () => this.originalImage,
@@ -1450,26 +2452,77 @@ 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(),
+            captureSnapshot: () => this.captureSnapshotInternal(),
             loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withInternalOperationOptions(operationToken, this.withAnimationQueueBypass())),
+            exportImageBase64: (options) => exportImageBase64Impl(this.buildExportServiceContext(), options),
+            updateUi: () => this.updateUi(),
+            updateInputs: () => this.updateInputs(),
             removeAllMasksNoHistory: () => {
                 const context = this.buildRemoveMaskContext();
                 removeAllMasksImpl(context, { saveHistory: false });
             },
+            getAnnotations: () => this.getAnnotations(),
+            restoreAnnotations: (objects) => {
+                const canvas = this.getLiveCanvasOrThrow('restoreAnnotations');
+                objects.forEach((annotation) => {
+                    canvas.add(annotation);
+                });
+                syncAnnotationRuntimeStates(objects);
+                attachTextEditingHandlersToAnnotations(this.buildTextControllerContext(), objects);
+                this.annotationCounter = Math.max(this.annotationCounter, ...objects.map((annotation) => annotation.annotationId), 0);
+                this.updateAnnotationList();
+            },
+        };
+    }
+    buildMergeAnnotationsContext(operationToken) {
+        return {
+            ...this.buildExportServiceContext(),
+            historyManager: this.historyManager,
+            containerElement: this.containerElement,
+            loadImage: async (base64, providedOptions) => {
+                const geometry = this.captureImageDisplayGeometry();
+                await this.loadImageInternal(base64, this.withInternalOperationOptions(operationToken, providedOptions !== null && providedOptions !== void 0 ? providedOptions : {}));
+                this.restoreMergedImageDisplayGeometry(geometry);
+            },
+            captureSnapshot: () => this.captureSnapshotInternal(),
+            loadFromState: (snapshot) => this.loadFromStateInternal(snapshot, this.withInternalOperationOptions(operationToken, this.withAnimationQueueBypass())),
+            exportImageBase64: (options) => exportImageBase64Impl(this.buildExportServiceContext(), options),
+            updateUi: () => this.updateUi(),
+            updateInputs: () => this.updateInputs(),
+            removeAllAnnotationsNoHistory: () => {
+                removeAllAnnotationsImpl(this.buildAnnotationManagerContext(), {
+                    saveHistory: false,
+                    force: true,
+                });
+            },
+            getMasks: () => this.getMasks(),
+            restoreMasks: (objects) => {
+                const canvas = this.getLiveCanvasOrThrow('restoreMasks');
+                objects.forEach((mask) => {
+                    canvas.add(mask);
+                    reattachMaskHoverHandlers(mask);
+                });
+                this.lastMask = objects.reduce((lastMask, mask) => !lastMask || mask.maskId > lastMask.maskId ? mask : lastMask, null);
+                this.maskCounter = Math.max(this.maskCounter, ...objects.map((mask) => mask.maskId), 0);
+                this.updateMaskList();
+            },
         };
     }
     captureSnapshotInternal() {
-        var _a;
-        if (!this.canvas)
-            return '';
+        var _a, _b;
+        if (!this.canvas) {
+            throw new Error('[ImageEditor] Cannot capture canvas snapshot before init or after dispose.');
+        }
         const activeMask = this.getActiveMaskForSnapshot();
+        const activeAnnotation = this.getActiveAnnotationForSnapshot();
         this.hideAllMaskLabels();
         return saveStateImpl({
             canvas: this.canvas,
             activeMaskId: (_a = activeMask === null || activeMask === void 0 ? void 0 : activeMask.maskId) !== null && _a !== void 0 ? _a : null,
+            activeAnnotationId: (_b = activeAnnotation === null || activeAnnotation === void 0 ? void 0 : activeAnnotation.annotationId) !== null && _b !== void 0 ? _b : null,
             currentScale: this.currentScale,
             currentRotation: this.currentRotation,
             baseImageScale: this.baseImageScale,
@@ -1483,9 +2536,140 @@ 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;
+    }
+    getActiveAnnotationForSnapshot() {
+        if (!this.canvas)
+            return null;
+        const activeObject = this.canvas.getActiveObject();
+        return activeObject && isAnnotationObject(activeObject) ? activeObject : 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.getLiveCanvasOrThrow('mosaicController'),
+            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)
@@ -1546,7 +2730,7 @@ export class ImageEditor {
     buildCropControllerContext(operationToken) {
         return {
             fabric: this.fabricModule,
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('cropController'),
             options: this.options,
             historyManager: this.historyManager,
             isImageLoaded: () => this.isImageLoaded(),
@@ -1558,7 +2742,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;
@@ -1568,33 +2752,131 @@ export class ImageEditor {
             },
         };
     }
+    syncInputValue(inputElement, value) {
+        if (!inputElement)
+            return;
+        const ownerDocument = inputElement.ownerDocument;
+        if (ownerDocument.activeElement === inputElement && !inputElement.readOnly)
+            return;
+        if (inputElement.value !== value)
+            inputElement.value = value;
+    }
     updateInputs() {
         const scaleId = this.elements.scalePercentageInput;
-        if (!scaleId)
+        if (scaleId) {
+            const scaleInputElement = document.getElementById(scaleId);
+            this.syncInputValue(scaleInputElement, String(Math.round(this.currentScale * 100)));
+        }
+        const mosaicConfig = this.getMosaicConfig();
+        const mosaicBrushSizeInputId = this.elements.mosaicBrushSizeInput;
+        if (mosaicBrushSizeInputId) {
+            const brushInput = document.getElementById(mosaicBrushSizeInputId);
+            this.syncInputValue(brushInput, String(mosaicConfig.brushSize));
+        }
+        const mosaicBlockSizeInputId = this.elements.mosaicBlockSizeInput;
+        if (mosaicBlockSizeInputId) {
+            const blockInput = document.getElementById(mosaicBlockSizeInputId);
+            this.syncInputValue(blockInput, String(mosaicConfig.blockSize));
+        }
+        const textConfig = this.getTextConfig();
+        const textColorInputId = this.elements.textColorInput;
+        if (textColorInputId) {
+            const textColorInput = document.getElementById(textColorInputId);
+            this.syncInputValue(textColorInput, textConfig.fill);
+        }
+        const textFontSizeInputId = this.elements.textFontSizeInput;
+        if (textFontSizeInputId) {
+            const fontInput = document.getElementById(textFontSizeInputId);
+            this.syncInputValue(fontInput, String(textConfig.fontSize));
+        }
+        const drawConfig = this.getDrawConfig();
+        const drawColorInputId = this.elements.drawColorInput;
+        if (drawColorInputId) {
+            const drawColorInput = document.getElementById(drawColorInputId);
+            this.syncInputValue(drawColorInput, drawConfig.color);
+        }
+        const drawBrushSizeInputId = this.elements.drawBrushSizeInput;
+        if (drawBrushSizeInputId) {
+            const brushInput = document.getElementById(drawBrushSizeInputId);
+            this.syncInputValue(brushInput, String(drawConfig.brushSize));
+        }
+    }
+    async mergeAnnotations() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('mergeAnnotations'))
             return;
-        const scaleInputElement = document.getElementById(scaleId);
-        if (scaleInputElement)
-            scaleInputElement.value = String(Math.round(this.currentScale * 100));
+        this.finalizeActiveTextEditingIfNeeded();
+        const hasAnnotations = this.canvas.getObjects().some(isAnnotationObject);
+        if (!hasAnnotations)
+            return;
+        const callbackContext = this.buildCallbackContext('mergeAnnotations', false);
+        const operationToken = this.operationGuard.beginBusyOperation('mergeAnnotations');
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.updateUi();
+        try {
+            await mergeAnnotationsImpl(this.buildMergeAnnotationsContext(operationToken));
+            this.updateInputs();
+            this.updateMaskList();
+            this.updateAnnotationList();
+            this.emitAnnotationsChanged(callbackContext);
+            if (this.getMasks().length > 0)
+                this.emitMasksChanged(callbackContext);
+            this.emitImageChanged(callbackContext);
+        }
+        finally {
+            this.operationGuard.endBusyOperation(operationToken);
+            this.emitBusyChangeIfChanged(callbackContext);
+            this.updateUi();
+        }
     }
     updateUi() {
+        var _a;
         if (!this.canvas)
             return;
         const hasImage = !!this.originalImage;
         const masks = hasImage ? this.canvas.getObjects().filter(isMaskObject) : [];
+        const annotations = hasImage ? this.canvas.getObjects().filter(isAnnotationObject) : [];
         const hasMasks = masks.length > 0;
+        const hasAnnotations = annotations.length > 0;
         const activeObject = this.canvas.getActiveObject();
         const hasSelectedMask = !!(activeObject && isMaskObject(activeObject));
+        const hasSelectedAnnotation = !!(activeObject && isAnnotationObject(activeObject));
+        const hasSelectedEditableObject = !!activeObject && isEditableOverlayObject(activeObject);
         const isDefaultTransform = this.currentScale === 1 && this.currentRotation === 0;
         const canUndo = this.historyManager.canUndo();
         const canRedo = this.historyManager.canRedo();
         const isInCropMode = this.cropSession !== null;
+        const isInMosaicMode = this.mosaicSession !== null;
+        const isInTextMode = this.textSession !== null;
+        const isInDrawMode = this.drawSession !== 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 (isInTextMode) {
+            CROP_MODE_CONTROL_KEYS.forEach((key) => {
+                this.setControlEnabled(key, !isBusy && TEXT_MODE_ENABLED_KEYS.includes(key));
+            });
+            return;
+        }
+        if (isInDrawMode) {
+            CROP_MODE_CONTROL_KEYS.forEach((key) => {
+                this.setControlEnabled(key, !isBusy && DRAW_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);
@@ -1606,11 +2888,31 @@ export class ImageEditor {
         this.setControlEnabled('removeSelectedMaskButton', hasSelectedMask && !isBusy);
         this.setControlEnabled('removeAllMasksButton', hasMasks && !isBusy);
         this.setControlEnabled('mergeMasksButton', hasImage && hasMasks && !isBusy);
+        this.setControlEnabled('removeSelectedAnnotationButton', hasSelectedAnnotation && !isBusy);
+        this.setControlEnabled('removeAllAnnotationsButton', hasAnnotations && !isBusy);
+        this.setControlEnabled('deleteSelectedObjectButton', hasSelectedEditableObject && !isBusy);
+        this.setControlEnabled('mergeAnnotationsButton', hasImage && hasAnnotations && !isBusy);
+        this.setControlEnabled('bringSelectedObjectForwardButton', hasSelectedEditableObject && !isBusy);
+        this.setControlEnabled('sendSelectedObjectBackwardButton', hasSelectedEditableObject && !isBusy);
+        this.setControlEnabled('bringSelectedObjectToFrontButton', hasSelectedEditableObject && !isBusy);
+        this.setControlEnabled('sendSelectedObjectToBackButton', hasSelectedEditableObject && !isBusy);
         this.setControlEnabled('downloadImageButton', hasImage && !isBusy);
         this.setControlEnabled('resetImageTransformButton', hasImage && !isDefaultTransform && !isBusy);
         this.setControlEnabled('undoButton', hasImage && !isBusy && canUndo);
         this.setControlEnabled('redoButton', hasImage && !isBusy && canRedo);
         this.setControlEnabled('enterCropModeButton', hasImage && !isBusy);
+        this.setControlEnabled('enterMosaicModeButton', hasImage && !isBusy);
+        this.setControlEnabled('enterTextModeButton', hasImage && !isBusy);
+        this.setControlEnabled('enterDrawModeButton', hasImage && !isBusy);
+        this.setControlEnabled('exitMosaicModeButton', false);
+        this.setControlEnabled('exitTextModeButton', false);
+        this.setControlEnabled('exitDrawModeButton', false);
+        this.setControlEnabled('mosaicBrushSizeInput', !this.isDisposed);
+        this.setControlEnabled('mosaicBlockSizeInput', !this.isDisposed);
+        this.setControlEnabled('textColorInput', !this.isDisposed);
+        this.setControlEnabled('textFontSizeInput', !this.isDisposed);
+        this.setControlEnabled('drawColorInput', !this.isDisposed);
+        this.setControlEnabled('drawBrushSizeInput', !this.isDisposed);
         this.setControlEnabled('imageInput', !isBusy);
         this.setControlEnabled('applyCropButton', false);
         this.setControlEnabled('cancelCropButton', false);
@@ -1625,7 +2927,10 @@ export class ImageEditor {
             return;
         this.recordElementOriginalState(key, controlElement);
         if ('disabled' in controlElement) {
-            controlElement.disabled = !isEnabled;
+            const formControl = controlElement;
+            const nextDisabled = !isEnabled;
+            if (formControl.disabled !== nextDisabled)
+                formControl.disabled = nextDisabled;
             return;
         }
         if (!isEnabled) {
@@ -1698,6 +3003,15 @@ export class ImageEditor {
         this.operationGuard.markDisposed();
         this.animQueue.clear();
         (_a = this.domBindings) === null || _a === void 0 ? void 0 : _a.removeAll();
+        if (this.keyboardHandler && this.keyboardDocument) {
+            try {
+                this.keyboardDocument.removeEventListener('keydown', this.keyboardHandler);
+            }
+            catch {
+            }
+        }
+        this.keyboardHandler = null;
+        this.keyboardDocument = null;
         this.restoreElementOriginalStates();
         if (this.cropSession && this.canvas) {
             try {
@@ -1708,6 +3022,30 @@ export class ImageEditor {
             }
             this.cropSession = null;
         }
+        if (this.mosaicSession && this.canvas) {
+            try {
+                exitMosaicModeImpl(this.buildMosaicControllerContext());
+            }
+            catch {
+            }
+            this.mosaicSession = null;
+        }
+        if (this.textSession && this.canvas) {
+            try {
+                exitTextModeImpl(this.buildTextControllerContext());
+            }
+            catch {
+            }
+            this.textSession = null;
+        }
+        if (this.drawSession && this.canvas) {
+            try {
+                exitDrawModeImpl(this.buildDrawControllerContext());
+            }
+            catch {
+            }
+            this.drawSession = null;
+        }
         if (this.canvas) {
             try {
                 void Promise.resolve(this.canvas.dispose()).catch(() => {
@@ -1723,6 +3061,7 @@ export class ImageEditor {
         this.currentImageMimeType = null;
         this.lastMask = null;
         this.maskCounter = 0;
+        this.annotationCounter = 0;
         this.currentScale = 1;
         this.currentRotation = 0;
         this.baseImageScale = 1;