roosterjs-content-model-plugins 9.45.0 → 9.45.1

package/lib/imageEdit/ImageEditPlugin.js

@@ -1,585 +1,585 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageEditPlugin = void 0;
-var tslib_1 = require("tslib");
-var applyChange_1 = require("./utils/applyChange");
-var canRegenerateImage_1 = require("./utils/canRegenerateImage");
-var imageEditUtils_1 = require("./utils/imageEditUtils");
-var createImageWrapper_1 = require("./utils/createImageWrapper");
-var cropperContext_1 = require("./Cropper/cropperContext");
-var findEditingImage_1 = require("./utils/findEditingImage");
-var filterInnerResizerHandles_1 = require("./utils/filterInnerResizerHandles");
-var getDropAndDragHelpers_1 = require("./utils/getDropAndDragHelpers");
-var getHTMLImageOptions_1 = require("./utils/getHTMLImageOptions");
-var getSelectedImage_1 = require("./utils/getSelectedImage");
-var updateImageEditInfo_1 = require("./utils/updateImageEditInfo");
-var ImageEditElementClass_1 = require("./types/ImageEditElementClass");
-var normalizeImageSelection_1 = require("./utils/normalizeImageSelection");
-var resizerContext_1 = require("./Resizer/resizerContext");
-var rotatorContext_1 = require("./Rotator/rotatorContext");
-var updateHandleCursor_1 = require("./utils/updateHandleCursor");
-var updateRotateHandle_1 = require("./Rotator/updateRotateHandle");
-var updateWrapper_1 = require("./utils/updateWrapper");
-var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
-var DefaultOptions = {
-    borderColor: '#DB626C',
-    minWidth: 10,
-    minHeight: 10,
-    preserveRatio: true,
-    disableRotate: false,
-    disableSideResize: false,
-    onSelectState: ['resize', 'rotate'],
-};
-var MouseRightButton = 2;
-var DRAG_ID = '_dragging';
-var IMAGE_EDIT_CLASS = 'imageEdit';
-var IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
-var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
-/**
- * ImageEdit plugin handles the following image editing features:
- * - Resize image
- * - Crop image
- * - Rotate image
- * - Flip image
- */
-var ImageEditPlugin = /** @class */ (function () {
-    function ImageEditPlugin(options) {
-        this.editor = null;
-        this.shadowSpan = null;
-        this.selectedImage = null;
-        this.wrapper = null;
-        this.imageEditInfo = null;
-        this.imageHTMLOptions = null;
-        this.dndHelpers = [];
-        this.clonedImage = null;
-        this.lastSrc = null;
-        this.wasImageResized = false;
-        this.isCropMode = false;
-        this.resizers = [];
-        this.rotators = [];
-        this.croppers = [];
-        this.zoomScale = 1;
-        this.disposer = null;
-        this.isEditing = false;
-        this.options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultOptions), options);
-    }
-    /**
-     * Get name of this plugin
-     */
-    ImageEditPlugin.prototype.getName = function () {
-        return 'ImageEdit';
-    };
-    /**
-     * The first method that editor will call to a plugin when editor is initializing.
-     * It will pass in the editor instance, plugin should take this chance to save the
-     * editor reference so that it can call to any editor method or format API later.
-     * @param editor The editor object
-     */
-    ImageEditPlugin.prototype.initialize = function (editor) {
-        var _this = this;
-        this.editor = editor;
-        this.disposer = editor.attachDomEvent({
-            blur: {
-                beforeDispatch: function () {
-                    if (_this.isEditing && _this.editor && !_this.editor.isDisposed()) {
-                        _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
-                    }
-                },
-            },
-            dragstart: {
-                beforeDispatch: function (ev) {
-                    if (_this.editor) {
-                        var target = ev.target;
-                        if (_this.isImageSelection(target)) {
-                            target.id = target.id + DRAG_ID;
-                        }
-                    }
-                },
-            },
-            dragend: {
-                beforeDispatch: function (ev) {
-                    if (_this.editor) {
-                        var target = ev.target;
-                        if (_this.isImageSelection(target) && target.id.includes(DRAG_ID)) {
-                            target.id = target.id.replace(DRAG_ID, '').trim();
-                        }
-                    }
-                },
-            },
-        });
-    };
-    /**
-     * The last method that editor will call to a plugin before it is disposed.
-     * Plugin can take this chance to clear the reference to editor. After this method is
-     * called, plugin should not call to any editor method since it will result in error.
-     */
-    ImageEditPlugin.prototype.dispose = function () {
-        if (this.disposer) {
-            this.disposer();
-            this.disposer = null;
-        }
-        this.isEditing = false;
-        this.cleanInfo();
-        this.editor = null;
-    };
-    /**
-     * Core method for a plugin. Once an event happens in editor, editor will call this
-     * method of each plugin to handle the event as long as the event is not handled
-     * exclusively by another plugin.
-     * @param event The event to handle:
-     */
-    ImageEditPlugin.prototype.onPluginEvent = function (event) {
-        if (!this.editor) {
-            return;
-        }
-        switch (event.eventType) {
-            case 'mouseDown':
-                this.mouseDownHandler(this.editor, event);
-                break;
-            case 'mouseUp':
-                this.mouseUpHandler(this.editor, event);
-                break;
-            case 'keyDown':
-                this.keyDownHandler(this.editor, event);
-                break;
-            case 'contentChanged':
-                this.contentChangedHandler(this.editor, event);
-                break;
-            case 'extractContentWithDom':
-                this.removeImageEditing(event.clonedRoot);
-                break;
-            case 'beforeLogicalRootChange':
-                this.handleBeforeLogicalRootChange();
-                break;
-        }
-    };
-    ImageEditPlugin.prototype.handleBeforeLogicalRootChange = function () {
-        if (this.isEditing && this.editor && !this.editor.isDisposed()) {
-            this.applyFormatWithContentModel(this.editor, this.isCropMode, false /* shouldSelectImage */);
-            this.removeImageWrapper();
-            this.cleanInfo();
-        }
-    };
-    ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {
-        var images = clonedRoot.querySelectorAll('img');
-        images.forEach(function (image) {
-            if (image.dataset.editingInfo) {
-                delete image.dataset.editingInfo;
-            }
-        });
-    };
-    ImageEditPlugin.prototype.isImageSelection = function (target) {
-        return ((0, roosterjs_content_model_dom_1.isNodeOfType)(target, 'ELEMENT_NODE') &&
-            ((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'img') ||
-                !!((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'span') &&
-                    target.firstElementChild &&
-                    (0, roosterjs_content_model_dom_1.isNodeOfType)(target.firstElementChild, 'ELEMENT_NODE') &&
-                    (0, roosterjs_content_model_dom_1.isElementOfType)(target.firstElementChild, 'img'))));
-    };
-    ImageEditPlugin.prototype.mouseUpHandler = function (editor, event) {
-        var selection = editor.getDOMSelection();
-        if ((selection && selection.type == 'image') || this.isEditing) {
-            var shouldSelectImage = this.isImageSelection(event.rawEvent.target) &&
-                event.rawEvent.button === MouseRightButton;
-            this.applyFormatWithContentModel(editor, this.isCropMode, shouldSelectImage);
-        }
-    };
-    ImageEditPlugin.prototype.mouseDownHandler = function (editor, event) {
-        if (this.isEditing &&
-            this.isImageSelection(event.rawEvent.target) &&
-            event.rawEvent.button !== MouseRightButton &&
-            !this.isCropMode) {
-            this.applyFormatWithContentModel(editor, this.isCropMode);
-        }
-    };
-    ImageEditPlugin.prototype.onDropHandler = function (editor) {
-        var selection = editor.getDOMSelection();
-        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
-            editor.formatContentModel(function (model) {
-                var imageDragged = (0, findEditingImage_1.findEditingImage)(model, selection.image.id);
-                var imageDropped = (0, findEditingImage_1.findEditingImage)(model, selection.image.id.replace(DRAG_ID, '').trim());
-                if (imageDragged && imageDropped) {
-                    var draggedIndex = imageDragged.paragraph.segments.indexOf(imageDragged.image);
-                    (0, roosterjs_content_model_dom_1.mutateBlock)(imageDragged.paragraph).segments.splice(draggedIndex, 1);
-                    var segment = imageDropped.image;
-                    var paragraph = imageDropped.paragraph;
-                    (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
-                        image.isSelected = true;
-                        image.isSelectedAsImageSelection = true;
-                    });
-                    return true;
-                }
-                return false;
-            });
-        }
-    };
-    ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
-        if (this.isEditing) {
-            if (event.rawEvent.key === 'Escape' ||
-                event.rawEvent.key === 'Delete' ||
-                event.rawEvent.key === 'Backspace') {
-                if (event.rawEvent.key === 'Escape') {
-                    this.removeImageWrapper();
-                }
-                this.cleanInfo();
-            }
-            else {
-                if (event.rawEvent.key == 'Enter' && this.isCropMode) {
-                    event.rawEvent.preventDefault();
-                }
-                this.applyFormatWithContentModel(editor, this.isCropMode, true /** should selectImage */, false /* isApiOperation */);
-            }
-        }
-    };
-    ImageEditPlugin.prototype.setContentHandler = function () {
-        if (this.selectedImage) {
-            this.cleanInfo();
-            (0, roosterjs_content_model_dom_1.setImageState)(this.selectedImage, '');
-            this.isEditing = false;
-            this.isCropMode = false;
-        }
-    };
-    ImageEditPlugin.prototype.formatEventHandler = function (event) {
-        if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
-            this.cleanInfo();
-            this.isEditing = false;
-            this.isCropMode = false;
-        }
-    };
-    ImageEditPlugin.prototype.contentChangedHandler = function (editor, event) {
-        switch (event.source) {
-            case roosterjs_content_model_dom_1.ChangeSource.SetContent:
-                this.setContentHandler();
-                break;
-            case roosterjs_content_model_dom_1.ChangeSource.Format:
-                this.formatEventHandler(event);
-                break;
-            case roosterjs_content_model_dom_1.ChangeSource.Drop:
-                this.onDropHandler(editor);
-                break;
-        }
-    };
-    /**
-     * EXPOSED FOR TESTING PURPOSE ONLY
-     */
-    ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
-        var _this = this;
-        var editingImageModel;
-        var selection = editor.getDOMSelection();
-        var isRTL = false;
-        editor.formatContentModel(function (model, context) {
-            var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
-            var previousSelectedImage = isApiOperation
-                ? editingImage
-                : (0, findEditingImage_1.findEditingImage)(model);
-            var result = false;
-            // Skip adding undo snapshot for now. If we detect any changes later, we will reset it
-            context.skipUndoSnapshot = 'SkipAll';
-            if (shouldSelectImage ||
-                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
-                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.format.imageState) == findEditingImage_1.EDITING_MARKER ||
-                isApiOperation) {
-                var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
-                if ((_this.isEditing || isApiOperation) &&
-                    previousSelectedImage &&
-                    lastSrc_1 &&
-                    selectedImage_1 &&
-                    imageEditInfo_1 &&
-                    clonedImage_1) {
-                    (0, roosterjs_content_model_dom_1.mutateSegment)(previousSelectedImage.paragraph, previousSelectedImage.image, function (image) {
-                        var changeState = (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
-                        if (_this.wasImageResized || changeState == 'FullyChanged') {
-                            context.skipUndoSnapshot = false;
-                        }
-                        var isSameImage = (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) === (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image);
-                        image.isSelected = isSameImage || shouldSelectImage;
-                        image.isSelectedAsImageSelection = isSameImage || shouldSelectImage;
-                        image.format.imageState = undefined;
-                        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
-                            var selectedParagraphs = (0, roosterjs_content_model_dom_1.getSelectedParagraphs)(model, true);
-                            var isImageInRange = selectedParagraphs.some(function (paragraph) {
-                                return paragraph.segments.includes(image);
-                            });
-                            if (isImageInRange) {
-                                image.isSelected = true;
-                            }
-                        }
-                    });
-                    if (shouldSelectImage) {
-                        (0, normalizeImageSelection_1.normalizeImageSelection)(previousSelectedImage);
-                    }
-                    _this.cleanInfo();
-                    result = true;
-                }
-                _this.isEditing = false;
-                _this.isCropMode = false;
-                if (editingImage &&
-                    (selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
-                    !shouldSelectImage &&
-                    !isApiOperation) {
-                    _this.isEditing = true;
-                    _this.isCropMode = isCropMode;
-                    (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
-                        editingImageModel = image;
-                        isRTL = editingImage.paragraph.format.direction == 'rtl';
-                        _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
-                        image.format.imageState = 'isEditing';
-                    });
-                    result = true;
-                }
-            }
-            return result;
-        }, {
-            onNodeCreated: function (model, node) {
-                if (!isApiOperation &&
-                    editingImageModel &&
-                    editingImageModel == model &&
-                    editingImageModel.format.imageState == findEditingImage_1.EDITING_MARKER &&
-                    (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
-                    (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
-                    if (isCropMode) {
-                        _this.startCropMode(editor, node, isRTL);
-                    }
-                    else {
-                        _this.startRotateAndResize(editor, node, isRTL);
-                    }
-                }
-            },
-            apiName: IMAGE_EDIT_FORMAT_EVENT,
-        }, {
-            tryGetFromCache: true,
-        });
-    };
-    ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
-        var _this = this;
-        if (!this.imageEditInfo) {
-            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
-        }
-        if ((this.imageEditInfo.widthPx == 0 || this.imageEditInfo.heightPx == 0) &&
-            !image.complete) {
-            // Image dimensions are zero and loading is incomplete, wait for image to load.
-            image.onload = function () {
-                _this.updateImageDimensionsIfZero(image);
-                _this.startEditingInternal(editor, image, apiOperation);
-                image.onload = null;
-                image.onerror = null;
-            };
-            image.onerror = function () {
-                image.onload = null;
-                image.onerror = null;
-            };
-        }
-        else {
-            this.updateImageDimensionsIfZero(image);
-            this.startEditingInternal(editor, image, apiOperation);
-        }
-    };
-    ImageEditPlugin.prototype.updateImageDimensionsIfZero = function (image) {
-        var _a, _b;
-        if (((_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.widthPx) === 0 || ((_b = this.imageEditInfo) === null || _b === void 0 ? void 0 : _b.heightPx) === 0) {
-            this.imageEditInfo.widthPx = image.clientWidth;
-            this.imageEditInfo.heightPx = image.clientHeight;
-        }
-    };
-    ImageEditPlugin.prototype.startEditingInternal = function (editor, image, apiOperation) {
-        if (!this.imageEditInfo) {
-            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
-        }
-        this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
-        this.lastSrc = image.getAttribute('src');
-        var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
-        this.shadowSpan = shadowSpan;
-        this.selectedImage = image;
-        this.wrapper = wrapper;
-        this.clonedImage = imageClone;
-        this.wasImageResized = (0, imageEditUtils_1.checkIfImageWasResized)(image);
-        this.resizers = resizers;
-        this.rotators = rotators;
-        this.croppers = croppers;
-        this.zoomScale = editor.getDOMHelper().calculateZoomScale();
-        editor.setEditorStyle(IMAGE_EDIT_CLASS, "outline-style:none!important;", [
-            "span:has(>img" + (0, roosterjs_content_model_dom_1.getSafeIdSelector)(this.selectedImage.id) + ")",
-        ]);
-        editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, "caret-color: transparent;");
-    };
-    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, isRTL) {
-        var _this = this;
-        var _a, _b;
-        if (this.imageEditInfo) {
-            this.startEditing(editor, image, ['resize', 'rotate']);
-            if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
-                var isMobileOrTable = !!editor.getEnvironment().isMobileOrTablet;
-                this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
-                    if (_this.imageEditInfo &&
-                        _this.selectedImage &&
-                        _this.wrapper &&
-                        _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers, undefined /* croppers */, isRTL);
-                        _this.wasImageResized = true;
-                    }
-                }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
-                    var _a, _b;
-                    if (_this.imageEditInfo &&
-                        _this.selectedImage &&
-                        _this.wrapper &&
-                        _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, undefined /* croppers */, isRTL, true /* isRotating */);
-                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
-                        _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
-                    }
-                }, this.zoomScale, isMobileOrTable)), false);
-                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers, undefined /* croppers */, isRTL);
-                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
-            }
-        }
-    };
-    ImageEditPlugin.prototype.updateResizeHandleDirection = function (resizers, angleRad) {
-        var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
-        if (angleRad !== undefined) {
-            (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
-        }
-    };
-    ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad, disableSideResize) {
-        var viewport = editor.getVisibleViewport();
-        var smallImage = (0, imageEditUtils_1.isASmallImage)(image.width, image.height);
-        if (viewport && rotators && rotators.length > 0) {
-            var rotator = rotators[0];
-            var rotatorHandle = rotator.firstElementChild;
-            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotatorHandle, 'ELEMENT_NODE') &&
-                (0, roosterjs_content_model_dom_1.isElementOfType)(rotatorHandle, 'div')) {
-                (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage, disableSideResize);
-            }
-        }
-    };
-    ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
-        return (operation === 'resize' ||
-            operation === 'rotate' ||
-            operation === 'flip' ||
-            operation === 'crop');
-    };
-    ImageEditPlugin.prototype.canRegenerateImage = function (image) {
-        return (0, canRegenerateImage_1.canRegenerateImage)(image);
-    };
-    ImageEditPlugin.prototype.startCropMode = function (editor, image, isRTL) {
-        var _this = this;
-        if (this.imageEditInfo) {
-            this.startEditing(editor, image, ['crop']);
-            if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
-                this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
-                    if (_this.imageEditInfo &&
-                        _this.selectedImage &&
-                        _this.wrapper &&
-                        _this.clonedImage) {
-                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, _this.croppers, isRTL);
-                        _this.isCropMode = true;
-                    }
-                }, this.zoomScale, !!editor.getEnvironment().isMobileOrTablet)), false);
-                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined /* resizers */, this.croppers, isRTL);
-            }
-        }
-    };
-    ImageEditPlugin.prototype.cropImage = function () {
-        if (!this.editor) {
-            return;
-        }
-        if (!this.editor.getEnvironment().isSafari) {
-            this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
-        }
-        var selection = this.editor.getDOMSelection();
-        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
-            this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
-        }
-    };
-    ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
-        this.startEditing(editor, image, apiOperation);
-        if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
-            return;
-        }
-        operation(this.imageEditInfo);
-        (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper);
-        this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
-    };
-    /**
-     * Exported for testing purpose only
-     */
-    ImageEditPlugin.prototype.cleanInfo = function () {
-        var _a, _b;
-        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorStyle(IMAGE_EDIT_CLASS, null);
-        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
-        this.selectedImage = null;
-        this.shadowSpan = null;
-        this.wrapper = null;
-        this.imageEditInfo = null;
-        this.imageHTMLOptions = null;
-        this.dndHelpers.forEach(function (helper) { return helper.dispose(); });
-        this.dndHelpers = [];
-        this.clonedImage = null;
-        this.lastSrc = null;
-        this.wasImageResized = false;
-        this.isCropMode = false;
-        this.resizers = [];
-        this.rotators = [];
-        this.croppers = [];
-    };
-    ImageEditPlugin.prototype.removeImageWrapper = function () {
-        var image = null;
-        if (this.shadowSpan && this.shadowSpan.parentElement) {
-            if (this.shadowSpan.firstElementChild &&
-                (0, roosterjs_content_model_dom_1.isNodeOfType)(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&
-                (0, roosterjs_content_model_dom_1.isElementOfType)(this.shadowSpan.firstElementChild, 'img')) {
-                image = this.shadowSpan.firstElementChild;
-            }
-            (0, roosterjs_content_model_dom_1.unwrap)(this.shadowSpan);
-            this.shadowSpan = null;
-            this.wrapper = null;
-        }
-        return image;
-    };
-    ImageEditPlugin.prototype.flipImage = function (direction) {
-        var _a;
-        var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-        if (!this.editor || !selection || selection.type !== 'image') {
-            return;
-        }
-        var image = selection.image;
-        if (this.editor) {
-            this.editImage(this.editor, image, ['flip'], function (imageEditInfo) {
-                var angleRad = imageEditInfo.angleRad || 0;
-                var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
-                    (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
-                if (isInVerticalPostion) {
-                    if (direction === 'horizontal') {
-                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
-                    }
-                    else {
-                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
-                    }
-                }
-                else {
-                    if (direction === 'vertical') {
-                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
-                    }
-                    else {
-                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
-                    }
-                }
-            });
-        }
-    };
-    ImageEditPlugin.prototype.rotateImage = function (angleRad) {
-        var _a;
-        var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
-        if (!this.editor || !selection || selection.type !== 'image') {
-            return;
-        }
-        var image = selection.image;
-        if (this.editor) {
-            this.editImage(this.editor, image, [], function (imageEditInfo) {
-                imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
-            });
-        }
-    };
-    return ImageEditPlugin;
-}());
-exports.ImageEditPlugin = ImageEditPlugin;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageEditPlugin = void 0;
+var tslib_1 = require("tslib");
+var applyChange_1 = require("./utils/applyChange");
+var canRegenerateImage_1 = require("./utils/canRegenerateImage");
+var imageEditUtils_1 = require("./utils/imageEditUtils");
+var createImageWrapper_1 = require("./utils/createImageWrapper");
+var cropperContext_1 = require("./Cropper/cropperContext");
+var findEditingImage_1 = require("./utils/findEditingImage");
+var filterInnerResizerHandles_1 = require("./utils/filterInnerResizerHandles");
+var getDropAndDragHelpers_1 = require("./utils/getDropAndDragHelpers");
+var getHTMLImageOptions_1 = require("./utils/getHTMLImageOptions");
+var getSelectedImage_1 = require("./utils/getSelectedImage");
+var updateImageEditInfo_1 = require("./utils/updateImageEditInfo");
+var ImageEditElementClass_1 = require("./types/ImageEditElementClass");
+var normalizeImageSelection_1 = require("./utils/normalizeImageSelection");
+var resizerContext_1 = require("./Resizer/resizerContext");
+var rotatorContext_1 = require("./Rotator/rotatorContext");
+var updateHandleCursor_1 = require("./utils/updateHandleCursor");
+var updateRotateHandle_1 = require("./Rotator/updateRotateHandle");
+var updateWrapper_1 = require("./utils/updateWrapper");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var DefaultOptions = {
+    borderColor: '#DB626C',
+    minWidth: 10,
+    minHeight: 10,
+    preserveRatio: true,
+    disableRotate: false,
+    disableSideResize: false,
+    onSelectState: ['resize', 'rotate'],
+};
+var MouseRightButton = 2;
+var DRAG_ID = '_dragging';
+var IMAGE_EDIT_CLASS = 'imageEdit';
+var IMAGE_EDIT_CLASS_CARET = 'imageEditCaretColor';
+var IMAGE_EDIT_FORMAT_EVENT = 'ImageEditEvent';
+/**
+ * ImageEdit plugin handles the following image editing features:
+ * - Resize image
+ * - Crop image
+ * - Rotate image
+ * - Flip image
+ */
+var ImageEditPlugin = /** @class */ (function () {
+    function ImageEditPlugin(options) {
+        this.editor = null;
+        this.shadowSpan = null;
+        this.selectedImage = null;
+        this.wrapper = null;
+        this.imageEditInfo = null;
+        this.imageHTMLOptions = null;
+        this.dndHelpers = [];
+        this.clonedImage = null;
+        this.lastSrc = null;
+        this.wasImageResized = false;
+        this.isCropMode = false;
+        this.resizers = [];
+        this.rotators = [];
+        this.croppers = [];
+        this.zoomScale = 1;
+        this.disposer = null;
+        this.isEditing = false;
+        this.options = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, DefaultOptions), options);
+    }
+    /**
+     * Get name of this plugin
+     */
+    ImageEditPlugin.prototype.getName = function () {
+        return 'ImageEdit';
+    };
+    /**
+     * The first method that editor will call to a plugin when editor is initializing.
+     * It will pass in the editor instance, plugin should take this chance to save the
+     * editor reference so that it can call to any editor method or format API later.
+     * @param editor The editor object
+     */
+    ImageEditPlugin.prototype.initialize = function (editor) {
+        var _this = this;
+        this.editor = editor;
+        this.disposer = editor.attachDomEvent({
+            blur: {
+                beforeDispatch: function () {
+                    if (_this.isEditing && _this.editor && !_this.editor.isDisposed()) {
+                        _this.applyFormatWithContentModel(_this.editor, _this.isCropMode, true /* shouldSelectImage */);
+                    }
+                },
+            },
+            dragstart: {
+                beforeDispatch: function (ev) {
+                    if (_this.editor) {
+                        var target = ev.target;
+                        if (_this.isImageSelection(target)) {
+                            target.id = target.id + DRAG_ID;
+                        }
+                    }
+                },
+            },
+            dragend: {
+                beforeDispatch: function (ev) {
+                    if (_this.editor) {
+                        var target = ev.target;
+                        if (_this.isImageSelection(target) && target.id.includes(DRAG_ID)) {
+                            target.id = target.id.replace(DRAG_ID, '').trim();
+                        }
+                    }
+                },
+            },
+        });
+    };
+    /**
+     * The last method that editor will call to a plugin before it is disposed.
+     * Plugin can take this chance to clear the reference to editor. After this method is
+     * called, plugin should not call to any editor method since it will result in error.
+     */
+    ImageEditPlugin.prototype.dispose = function () {
+        if (this.disposer) {
+            this.disposer();
+            this.disposer = null;
+        }
+        this.isEditing = false;
+        this.cleanInfo();
+        this.editor = null;
+    };
+    /**
+     * Core method for a plugin. Once an event happens in editor, editor will call this
+     * method of each plugin to handle the event as long as the event is not handled
+     * exclusively by another plugin.
+     * @param event The event to handle:
+     */
+    ImageEditPlugin.prototype.onPluginEvent = function (event) {
+        if (!this.editor) {
+            return;
+        }
+        switch (event.eventType) {
+            case 'mouseDown':
+                this.mouseDownHandler(this.editor, event);
+                break;
+            case 'mouseUp':
+                this.mouseUpHandler(this.editor, event);
+                break;
+            case 'keyDown':
+                this.keyDownHandler(this.editor, event);
+                break;
+            case 'contentChanged':
+                this.contentChangedHandler(this.editor, event);
+                break;
+            case 'extractContentWithDom':
+                this.removeImageEditing(event.clonedRoot);
+                break;
+            case 'beforeLogicalRootChange':
+                this.handleBeforeLogicalRootChange();
+                break;
+        }
+    };
+    ImageEditPlugin.prototype.handleBeforeLogicalRootChange = function () {
+        if (this.isEditing && this.editor && !this.editor.isDisposed()) {
+            this.applyFormatWithContentModel(this.editor, this.isCropMode, false /* shouldSelectImage */);
+            this.removeImageWrapper();
+            this.cleanInfo();
+        }
+    };
+    ImageEditPlugin.prototype.removeImageEditing = function (clonedRoot) {
+        var images = clonedRoot.querySelectorAll('img');
+        images.forEach(function (image) {
+            if (image.dataset.editingInfo) {
+                delete image.dataset.editingInfo;
+            }
+        });
+    };
+    ImageEditPlugin.prototype.isImageSelection = function (target) {
+        return ((0, roosterjs_content_model_dom_1.isNodeOfType)(target, 'ELEMENT_NODE') &&
+            ((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'img') ||
+                !!((0, roosterjs_content_model_dom_1.isElementOfType)(target, 'span') &&
+                    target.firstElementChild &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(target.firstElementChild, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(target.firstElementChild, 'img'))));
+    };
+    ImageEditPlugin.prototype.mouseUpHandler = function (editor, event) {
+        var selection = editor.getDOMSelection();
+        if ((selection && selection.type == 'image') || this.isEditing) {
+            var shouldSelectImage = this.isImageSelection(event.rawEvent.target) &&
+                event.rawEvent.button === MouseRightButton;
+            this.applyFormatWithContentModel(editor, this.isCropMode, shouldSelectImage);
+        }
+    };
+    ImageEditPlugin.prototype.mouseDownHandler = function (editor, event) {
+        if (this.isEditing &&
+            this.isImageSelection(event.rawEvent.target) &&
+            event.rawEvent.button !== MouseRightButton &&
+            !this.isCropMode) {
+            this.applyFormatWithContentModel(editor, this.isCropMode);
+        }
+    };
+    ImageEditPlugin.prototype.onDropHandler = function (editor) {
+        var selection = editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+            editor.formatContentModel(function (model) {
+                var imageDragged = (0, findEditingImage_1.findEditingImage)(model, selection.image.id);
+                var imageDropped = (0, findEditingImage_1.findEditingImage)(model, selection.image.id.replace(DRAG_ID, '').trim());
+                if (imageDragged && imageDropped) {
+                    var draggedIndex = imageDragged.paragraph.segments.indexOf(imageDragged.image);
+                    (0, roosterjs_content_model_dom_1.mutateBlock)(imageDragged.paragraph).segments.splice(draggedIndex, 1);
+                    var segment = imageDropped.image;
+                    var paragraph = imageDropped.paragraph;
+                    (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
+                        image.isSelected = true;
+                        image.isSelectedAsImageSelection = true;
+                    });
+                    return true;
+                }
+                return false;
+            });
+        }
+    };
+    ImageEditPlugin.prototype.keyDownHandler = function (editor, event) {
+        if (this.isEditing) {
+            if (event.rawEvent.key === 'Escape' ||
+                event.rawEvent.key === 'Delete' ||
+                event.rawEvent.key === 'Backspace') {
+                if (event.rawEvent.key === 'Escape') {
+                    this.removeImageWrapper();
+                }
+                this.cleanInfo();
+            }
+            else {
+                if (event.rawEvent.key == 'Enter' && this.isCropMode) {
+                    event.rawEvent.preventDefault();
+                }
+                this.applyFormatWithContentModel(editor, this.isCropMode, true /** should selectImage */, false /* isApiOperation */);
+            }
+        }
+    };
+    ImageEditPlugin.prototype.setContentHandler = function () {
+        if (this.selectedImage) {
+            this.cleanInfo();
+            (0, roosterjs_content_model_dom_1.setImageState)(this.selectedImage, '');
+            this.isEditing = false;
+            this.isCropMode = false;
+        }
+    };
+    ImageEditPlugin.prototype.formatEventHandler = function (event) {
+        if (this.isEditing && event.formatApiName !== IMAGE_EDIT_FORMAT_EVENT) {
+            this.cleanInfo();
+            this.isEditing = false;
+            this.isCropMode = false;
+        }
+    };
+    ImageEditPlugin.prototype.contentChangedHandler = function (editor, event) {
+        switch (event.source) {
+            case roosterjs_content_model_dom_1.ChangeSource.SetContent:
+                this.setContentHandler();
+                break;
+            case roosterjs_content_model_dom_1.ChangeSource.Format:
+                this.formatEventHandler(event);
+                break;
+            case roosterjs_content_model_dom_1.ChangeSource.Drop:
+                this.onDropHandler(editor);
+                break;
+        }
+    };
+    /**
+     * EXPOSED FOR TESTING PURPOSE ONLY
+     */
+    ImageEditPlugin.prototype.applyFormatWithContentModel = function (editor, isCropMode, shouldSelectImage, isApiOperation) {
+        var _this = this;
+        var editingImageModel;
+        var selection = editor.getDOMSelection();
+        var isRTL = false;
+        editor.formatContentModel(function (model, context) {
+            var editingImage = (0, getSelectedImage_1.getSelectedImage)(model);
+            var previousSelectedImage = isApiOperation
+                ? editingImage
+                : (0, findEditingImage_1.findEditingImage)(model);
+            var result = false;
+            // Skip adding undo snapshot for now. If we detect any changes later, we will reset it
+            context.skipUndoSnapshot = 'SkipAll';
+            if (shouldSelectImage ||
+                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) != (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image) ||
+                (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image.format.imageState) == findEditingImage_1.EDITING_MARKER ||
+                isApiOperation) {
+                var _a = _this, lastSrc_1 = _a.lastSrc, selectedImage_1 = _a.selectedImage, imageEditInfo_1 = _a.imageEditInfo, clonedImage_1 = _a.clonedImage;
+                if ((_this.isEditing || isApiOperation) &&
+                    previousSelectedImage &&
+                    lastSrc_1 &&
+                    selectedImage_1 &&
+                    imageEditInfo_1 &&
+                    clonedImage_1) {
+                    (0, roosterjs_content_model_dom_1.mutateSegment)(previousSelectedImage.paragraph, previousSelectedImage.image, function (image) {
+                        var changeState = (0, applyChange_1.applyChange)(editor, selectedImage_1, image, imageEditInfo_1, lastSrc_1, _this.wasImageResized || _this.isCropMode, clonedImage_1);
+                        if (_this.wasImageResized || changeState == 'FullyChanged') {
+                            context.skipUndoSnapshot = false;
+                        }
+                        var isSameImage = (previousSelectedImage === null || previousSelectedImage === void 0 ? void 0 : previousSelectedImage.image) === (editingImage === null || editingImage === void 0 ? void 0 : editingImage.image);
+                        image.isSelected = isSameImage || shouldSelectImage;
+                        image.isSelectedAsImageSelection = isSameImage || shouldSelectImage;
+                        image.format.imageState = undefined;
+                        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'range' && !selection.range.collapsed) {
+                            var selectedParagraphs = (0, roosterjs_content_model_dom_1.getSelectedParagraphs)(model, true);
+                            var isImageInRange = selectedParagraphs.some(function (paragraph) {
+                                return paragraph.segments.includes(image);
+                            });
+                            if (isImageInRange) {
+                                image.isSelected = true;
+                            }
+                        }
+                    });
+                    if (shouldSelectImage) {
+                        (0, normalizeImageSelection_1.normalizeImageSelection)(previousSelectedImage);
+                    }
+                    _this.cleanInfo();
+                    result = true;
+                }
+                _this.isEditing = false;
+                _this.isCropMode = false;
+                if (editingImage &&
+                    (selection === null || selection === void 0 ? void 0 : selection.type) == 'image' &&
+                    !shouldSelectImage &&
+                    !isApiOperation) {
+                    _this.isEditing = true;
+                    _this.isCropMode = isCropMode;
+                    (0, roosterjs_content_model_dom_1.mutateSegment)(editingImage.paragraph, editingImage.image, function (image) {
+                        editingImageModel = image;
+                        isRTL = editingImage.paragraph.format.direction == 'rtl';
+                        _this.imageEditInfo = (0, updateImageEditInfo_1.updateImageEditInfo)(image, selection.image);
+                        image.format.imageState = 'isEditing';
+                    });
+                    result = true;
+                }
+            }
+            return result;
+        }, {
+            onNodeCreated: function (model, node) {
+                if (!isApiOperation &&
+                    editingImageModel &&
+                    editingImageModel == model &&
+                    editingImageModel.format.imageState == findEditingImage_1.EDITING_MARKER &&
+                    (0, roosterjs_content_model_dom_1.isNodeOfType)(node, 'ELEMENT_NODE') &&
+                    (0, roosterjs_content_model_dom_1.isElementOfType)(node, 'img')) {
+                    if (isCropMode) {
+                        _this.startCropMode(editor, node, isRTL);
+                    }
+                    else {
+                        _this.startRotateAndResize(editor, node, isRTL);
+                    }
+                }
+            },
+            apiName: IMAGE_EDIT_FORMAT_EVENT,
+        }, {
+            tryGetFromCache: true,
+        });
+    };
+    ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+        var _this = this;
+        if (!this.imageEditInfo) {
+            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+        }
+        if ((this.imageEditInfo.widthPx == 0 || this.imageEditInfo.heightPx == 0) &&
+            !image.complete) {
+            // Image dimensions are zero and loading is incomplete, wait for image to load.
+            image.onload = function () {
+                _this.updateImageDimensionsIfZero(image);
+                _this.startEditingInternal(editor, image, apiOperation);
+                image.onload = null;
+                image.onerror = null;
+            };
+            image.onerror = function () {
+                image.onload = null;
+                image.onerror = null;
+            };
+        }
+        else {
+            this.updateImageDimensionsIfZero(image);
+            this.startEditingInternal(editor, image, apiOperation);
+        }
+    };
+    ImageEditPlugin.prototype.updateImageDimensionsIfZero = function (image) {
+        var _a, _b;
+        if (((_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.widthPx) === 0 || ((_b = this.imageEditInfo) === null || _b === void 0 ? void 0 : _b.heightPx) === 0) {
+            this.imageEditInfo.widthPx = image.clientWidth;
+            this.imageEditInfo.heightPx = image.clientHeight;
+        }
+    };
+    ImageEditPlugin.prototype.startEditingInternal = function (editor, image, apiOperation) {
+        if (!this.imageEditInfo) {
+            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+        }
+        this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
+        this.lastSrc = image.getAttribute('src');
+        var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation), resizers = _a.resizers, rotators = _a.rotators, wrapper = _a.wrapper, shadowSpan = _a.shadowSpan, imageClone = _a.imageClone, croppers = _a.croppers;
+        this.shadowSpan = shadowSpan;
+        this.selectedImage = image;
+        this.wrapper = wrapper;
+        this.clonedImage = imageClone;
+        this.wasImageResized = (0, imageEditUtils_1.checkIfImageWasResized)(image);
+        this.resizers = resizers;
+        this.rotators = rotators;
+        this.croppers = croppers;
+        this.zoomScale = editor.getDOMHelper().calculateZoomScale();
+        editor.setEditorStyle(IMAGE_EDIT_CLASS, "outline-style:none!important;", [
+            "span:has(>img" + (0, roosterjs_content_model_dom_1.getSafeIdSelector)(this.selectedImage.id) + ")",
+        ]);
+        editor.setEditorStyle(IMAGE_EDIT_CLASS_CARET, "caret-color: transparent;");
+    };
+    ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, isRTL) {
+        var _this = this;
+        var _a, _b;
+        if (this.imageEditInfo) {
+            this.startEditing(editor, image, ['resize', 'rotate']);
+            if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                var isMobileOrTable = !!editor.getEnvironment().isMobileOrTablet;
+                this.dndHelpers = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.ResizeHandle, resizerContext_1.Resizer, function () {
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers, undefined /* croppers */, isRTL);
+                        _this.wasImageResized = true;
+                    }
+                }, this.zoomScale, isMobileOrTable)), false), (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.RotateHandle, rotatorContext_1.Rotator, function () {
+                    var _a, _b;
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, undefined /* croppers */, isRTL, true /* isRotating */);
+                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = _this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
+                        _this.updateResizeHandleDirection(_this.resizers, _this.imageEditInfo.angleRad);
+                    }
+                }, this.zoomScale, isMobileOrTable)), false);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers, undefined /* croppers */, isRTL);
+                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad, !!((_b = this.options) === null || _b === void 0 ? void 0 : _b.disableSideResize));
+            }
+        }
+    };
+    ImageEditPlugin.prototype.updateResizeHandleDirection = function (resizers, angleRad) {
+        var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
+        if (angleRad !== undefined) {
+            (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
+        }
+    };
+    ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad, disableSideResize) {
+        var viewport = editor.getVisibleViewport();
+        var smallImage = (0, imageEditUtils_1.isASmallImage)(image.width, image.height);
+        if (viewport && rotators && rotators.length > 0) {
+            var rotator = rotators[0];
+            var rotatorHandle = rotator.firstElementChild;
+            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotatorHandle, 'ELEMENT_NODE') &&
+                (0, roosterjs_content_model_dom_1.isElementOfType)(rotatorHandle, 'div')) {
+                (0, updateRotateHandle_1.updateRotateHandle)(viewport, angleRad !== null && angleRad !== void 0 ? angleRad : 0, wrapper, rotator, rotatorHandle, smallImage, disableSideResize);
+            }
+        }
+    };
+    ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
+        return (operation === 'resize' ||
+            operation === 'rotate' ||
+            operation === 'flip' ||
+            operation === 'crop');
+    };
+    ImageEditPlugin.prototype.canRegenerateImage = function (image) {
+        return (0, canRegenerateImage_1.canRegenerateImage)(image);
+    };
+    ImageEditPlugin.prototype.startCropMode = function (editor, image, isRTL) {
+        var _this = this;
+        if (this.imageEditInfo) {
+            this.startEditing(editor, image, ['crop']);
+            if (this.imageEditInfo && this.selectedImage && this.wrapper && this.clonedImage) {
+                this.dndHelpers = (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)((0, getDropAndDragHelpers_1.getDropAndDragHelpers)(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass_1.ImageEditElementClass.CropHandle, cropperContext_1.Cropper, function () {
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined /* resizers */, _this.croppers, isRTL);
+                        _this.isCropMode = true;
+                    }
+                }, this.zoomScale, !!editor.getEnvironment().isMobileOrTablet)), false);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined /* resizers */, this.croppers, isRTL);
+            }
+        }
+    };
+    ImageEditPlugin.prototype.cropImage = function () {
+        if (!this.editor) {
+            return;
+        }
+        if (!this.editor.getEnvironment().isSafari) {
+            this.editor.focus(); // Safari will keep the selection when click crop, then the focus() call should not be called
+        }
+        var selection = this.editor.getDOMSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.type) == 'image') {
+            this.applyFormatWithContentModel(this.editor, true /* isCropMode */, false /* shouldSelectImage */);
+        }
+    };
+    ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
+        this.startEditing(editor, image, apiOperation);
+        if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
+            return;
+        }
+        operation(this.imageEditInfo);
+        (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper);
+        this.applyFormatWithContentModel(editor, false /* isCrop */, true /* shouldSelect*/, true /* isApiOperation */);
+    };
+    /**
+     * Exported for testing purpose only
+     */
+    ImageEditPlugin.prototype.cleanInfo = function () {
+        var _a, _b;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorStyle(IMAGE_EDIT_CLASS, null);
+        (_b = this.editor) === null || _b === void 0 ? void 0 : _b.setEditorStyle(IMAGE_EDIT_CLASS_CARET, null);
+        this.selectedImage = null;
+        this.shadowSpan = null;
+        this.wrapper = null;
+        this.imageEditInfo = null;
+        this.imageHTMLOptions = null;
+        this.dndHelpers.forEach(function (helper) { return helper.dispose(); });
+        this.dndHelpers = [];
+        this.clonedImage = null;
+        this.lastSrc = null;
+        this.wasImageResized = false;
+        this.isCropMode = false;
+        this.resizers = [];
+        this.rotators = [];
+        this.croppers = [];
+    };
+    ImageEditPlugin.prototype.removeImageWrapper = function () {
+        var image = null;
+        if (this.shadowSpan && this.shadowSpan.parentElement) {
+            if (this.shadowSpan.firstElementChild &&
+                (0, roosterjs_content_model_dom_1.isNodeOfType)(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&
+                (0, roosterjs_content_model_dom_1.isElementOfType)(this.shadowSpan.firstElementChild, 'img')) {
+                image = this.shadowSpan.firstElementChild;
+            }
+            (0, roosterjs_content_model_dom_1.unwrap)(this.shadowSpan);
+            this.shadowSpan = null;
+            this.wrapper = null;
+        }
+        return image;
+    };
+    ImageEditPlugin.prototype.flipImage = function (direction) {
+        var _a;
+        var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+        if (!this.editor || !selection || selection.type !== 'image') {
+            return;
+        }
+        var image = selection.image;
+        if (this.editor) {
+            this.editImage(this.editor, image, ['flip'], function (imageEditInfo) {
+                var angleRad = imageEditInfo.angleRad || 0;
+                var isInVerticalPostion = (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||
+                    (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);
+                if (isInVerticalPostion) {
+                    if (direction === 'horizontal') {
+                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
+                    }
+                    else {
+                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
+                    }
+                }
+                else {
+                    if (direction === 'vertical') {
+                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;
+                    }
+                    else {
+                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;
+                    }
+                }
+            });
+        }
+    };
+    ImageEditPlugin.prototype.rotateImage = function (angleRad) {
+        var _a;
+        var selection = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.getDOMSelection();
+        if (!this.editor || !selection || selection.type !== 'image') {
+            return;
+        }
+        var image = selection.image;
+        if (this.editor) {
+            this.editImage(this.editor, image, [], function (imageEditInfo) {
+                imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
+            });
+        }
+    };
+    return ImageEditPlugin;
+}());
+exports.ImageEditPlugin = ImageEditPlugin;
 //# sourceMappingURL=ImageEditPlugin.js.map