@bensitu/image-editor 2.1.0 → 2.2.0

package/dist/esm/image-editor.js

@@ -1,14 +1,20 @@
 import { AnimationQueue } from './animation/animation-queue.js';
 import { reportError, reportWarning } from './core/callback-reporter.js';
-import { areResolvedMosaicConfigsEqual, cloneResolvedMosaicConfig, getInvalidMosaicConfigFields, isLayoutMode, mergeMosaicConfigPatch, 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 { enterMosaicMode as enterMosaicModeImpl, exitMosaicMode as exitMosaicModeImpl, updateMosaicPreview, } from './mosaic/mosaic-controller.js';
-import { downloadImage as downloadImageImpl, exportImageBase64 as exportImageBase64Impl, exportImageFile as exportImageFileImpl, mergeMasks as mergeMasksImpl, } from './export/export-service.js';
+import { 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, measureScrollbarSize, } from './image/layout-manager.js';
 import { TransformController } from './image/transform-controller.js';
@@ -33,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',
@@ -50,6 +72,16 @@ const CROP_MODE_CONTROL_KEYS = [
 ];
 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',
@@ -60,6 +92,22 @@ const MOSAIC_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',
@@ -102,6 +150,29 @@ const IMAGE_EDITOR_OPERATIONS = new Set([
     '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',
@@ -119,6 +190,27 @@ const IMAGE_EDITOR_OPERATIONS = new Set([
     '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);
 }
@@ -161,6 +253,30 @@ export class ImageEditor {
             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,
@@ -257,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,
@@ -305,12 +427,36 @@ export class ImageEditor {
             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,
@@ -348,6 +494,10 @@ export class ImageEditor {
         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)) {
@@ -384,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',
@@ -402,12 +569,13 @@ export class ImageEditor {
             uploadArea: 'uploadArea',
         };
         this.elements = { ...defaults, ...idMap };
-        this.domBindings = new DomBindings((key) => this.elements[key], () => this.isDisposed, () => { var _a, _b; return (_b = (_a = this.canvasElement) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document; });
         this.initCanvas();
+        this.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(() => {
@@ -459,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;
@@ -507,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();
         });
@@ -573,11 +781,92 @@ export class ImageEditor {
         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
@@ -619,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);
@@ -650,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;
@@ -682,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]);
@@ -693,6 +989,9 @@ export class ImageEditor {
         if (hadMasks) {
             this.emitMasksChanged(callbackContext);
         }
+        if (hadAnnotations) {
+            this.emitAnnotationsChanged(callbackContext);
+        }
         this.emitImageChanged(callbackContext);
     }
     getInternalOperationToken(options) {
@@ -717,15 +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.`);
-        }
-        if (this.mosaicSession &&
-            !this.operationGuard.isOwnOperation(token) &&
-            !MOSAIC_SESSION_ALLOWED_OPERATIONS.has(operationName)) {
-            throw new Error(`[ImageEditor] Cannot run "${operationName}" while mosaic mode is active.`);
+            !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.`);
@@ -758,10 +1053,7 @@ 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 ||
-            this.mosaicSession !== null);
+        return this.operationGuard.isBusy() || this.animQueue.isBusy() || this.isToolModeActive();
     }
     setLayoutMode(mode) {
         if (!isLayoutMode(mode)) {
@@ -836,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;
@@ -849,11 +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,
@@ -866,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)
@@ -874,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) {
@@ -917,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({
@@ -925,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, {
@@ -933,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;
@@ -941,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);
+        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)));
@@ -1047,7 +1398,7 @@ export class ImageEditor {
     }
     buildTransformContext() {
         return {
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('buildTransformContext'),
             options: this.options,
             guard: this.operationGuard,
             getOriginalImage: () => this.originalImage,
@@ -1199,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,
@@ -1221,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;
@@ -1238,22 +1591,25 @@ export class ImageEditor {
             }
             this.isImageLoadedToCanvas = !!this.originalImage;
             if (this.originalImage && this.shouldNormalizeCanvasSizeAfterStateRestore()) {
-                this.updateCanvasSizeToImageBounds();
+                this.updateCanvasSizeToImageBounds({ stabilizeContainedViewport: false });
                 this.alignObjectBoundingBoxToCanvasTopLeft(this.originalImage);
             }
             if (this.originalImage) {
                 this.settleFitCoverScrollbarsAfterStateRestore();
             }
-            const restoredMasks = restoredState.objects.filter(isMaskObject);
+            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]);
@@ -1261,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.');
@@ -1282,24 +1653,26 @@ 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;
             }
@@ -1315,25 +1688,32 @@ export class ImageEditor {
             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)
@@ -1357,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)
@@ -1422,7 +1803,7 @@ export class ImageEditor {
     buildCreateMaskContext() {
         return {
             fabric: this.fabricModule,
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('createMask'),
             options: this.getRuntimeOptions(),
             getLastMask: () => this.lastMask,
             setLastMask: (maskObject) => {
@@ -1445,7 +1826,7 @@ export class ImageEditor {
     }
     buildRemoveMaskContext() {
         return {
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('removeMask'),
             removeLabelForMask: (mask) => {
                 this.removeLabelForMask(mask);
             },
@@ -1495,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) {
@@ -1515,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]);
     }
@@ -1534,11 +1940,426 @@ export class ImageEditor {
     updateMaskListSelection(selectedMask) {
         updateMaskListSelection(this.buildMaskListContext(), selectedMask);
     }
+    enterTextMode() {
+        if (!this.canvas)
+            return;
+        if (!this.canRunIdleOperation('enterTextMode'))
+            return;
+        if (this.isToolModeActive())
+            return;
+        enterTextModeImpl(this.buildTextControllerContext());
+        const callbackContext = this.buildCallbackContext('enterTextMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    exitTextMode() {
+        if (!this.canvas || !this.textSession)
+            return;
+        if (!this.canRunIdleOperation('exitTextMode'))
+            return;
+        exitTextModeImpl(this.buildTextControllerContext());
+        const callbackContext = this.buildCallbackContext('exitTextMode', false);
+        this.emitBusyChangeIfChanged(callbackContext);
+        this.emitImageChanged(callbackContext);
+    }
+    isTextMode() {
+        return this.textSession !== null;
+    }
+    createTextAnnotation(config = {}) {
+        if (!this.canvas)
+            return null;
+        if (!this.canRunIdleOperation('createTextAnnotation'))
+            return null;
+        return createTextAnnotationImpl(this.buildTextControllerContext(), config);
+    }
+    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;
@@ -1551,7 +2372,11 @@ export class ImageEditor {
             await mergeMasksImpl(mergeMasksContext);
             this.updateInputs();
             this.updateMaskList();
+            this.updateAnnotationList();
             this.emitMasksChanged(callbackContext);
+            if (this.getAnnotations().length > 0) {
+                this.emitAnnotationsChanged(callbackContext);
+            }
             this.emitImageChanged(callbackContext);
         }
         finally {
@@ -1560,17 +2385,18 @@ export class ImageEditor {
             this.updateUi();
         }
     }
-    downloadImage(fileName) {
+    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, fileName);
+            downloadImageImpl(exportContext, options);
         }
         finally {
             this.operationGuard.endBusyOperation(operationToken);
@@ -1582,6 +2408,7 @@ export class ImageEditor {
             return '';
         if (!this.canRunIdleOperation('exportImageBase64', options))
             return '';
+        this.finalizeActiveTextEditingIfNeeded();
         const callbackContext = this.buildCallbackContext('exportImageBase64', false);
         const operationToken = this.operationGuard.beginBusyOperation('exportImageBase64');
         this.emitBusyChangeIfChanged(callbackContext);
@@ -1596,6 +2423,7 @@ export class ImageEditor {
     }
     async exportImageFile(options) {
         this.assertIdleForOperation('exportImageFile', options);
+        this.finalizeActiveTextEditingIfNeeded();
         const callbackContext = this.buildCallbackContext('exportImageFile', false);
         const operationToken = this.operationGuard.beginBusyOperation('exportImageFile');
         this.emitBusyChangeIfChanged(callbackContext);
@@ -1611,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,
@@ -1627,24 +2455,74 @@ export class ImageEditor {
                 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;
+        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,
@@ -1663,6 +2541,12 @@ export class ImageEditor {
             .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;
@@ -1746,7 +2630,7 @@ export class ImageEditor {
     buildMosaicControllerContext() {
         return {
             fabric: this.fabricModule,
-            canvas: this.canvas,
+            canvas: this.getLiveCanvasOrThrow('mosaicController'),
             options: this.options,
             historyManager: this.historyManager,
             getMosaicConfig: () => cloneResolvedMosaicConfig(this.currentMosaicConfig),
@@ -1846,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(),
@@ -1868,26 +2752,82 @@ 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) {
             const scaleInputElement = document.getElementById(scaleId);
-            if (scaleInputElement) {
-                scaleInputElement.value = String(Math.round(this.currentScale * 100));
-            }
+            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);
-            if (brushInput)
-                brushInput.value = String(mosaicConfig.brushSize);
+            this.syncInputValue(brushInput, String(mosaicConfig.brushSize));
         }
         const mosaicBlockSizeInputId = this.elements.mosaicBlockSizeInput;
         if (mosaicBlockSizeInputId) {
             const blockInput = document.getElementById(mosaicBlockSizeInputId);
-            if (blockInput)
-                blockInput.value = String(mosaicConfig.blockSize);
+            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;
+        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() {
@@ -1896,14 +2836,20 @@ export class ImageEditor {
             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) {
@@ -1912,6 +2858,18 @@ export class ImageEditor {
             });
             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));
@@ -1930,15 +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);
@@ -1953,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) {
@@ -2026,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 {
@@ -2044,6 +3030,22 @@ export class ImageEditor {
             }
             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(() => {
@@ -2059,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;