roosterjs-content-model-plugins 9.4.1 → 9.5.0

package/lib-amd/imageEdit/ImageEditPlugin.js

@@ -0,0 +1,315 @@
+define(["require", "exports", "tslib", "./utils/applyChange", "./utils/canRegenerateImage", "./utils/imageEditUtils", "./utils/createImageWrapper", "./Cropper/cropperContext", "./utils/getDropAndDragHelpers", "./utils/getHTMLImageOptions", "./utils/updateImageEditInfo", "./types/ImageEditElementClass", "./Resizer/resizerContext", "./Rotator/rotatorContext", "./Rotator/updateRotateHandle", "./utils/updateWrapper", "roosterjs-content-model-dom"], function (require, exports, tslib_1, applyChange_1, canRegenerateImage_1, imageEditUtils_1, createImageWrapper_1, cropperContext_1, getDropAndDragHelpers_1, getHTMLImageOptions_1, updateImageEditInfo_1, ImageEditElementClass_1, resizerContext_1, rotatorContext_1, updateRotateHandle_1, updateWrapper_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ImageEditPlugin = void 0;
+    var DefaultOptions = {
+        borderColor: '#DB626C',
+        minWidth: 10,
+        minHeight: 10,
+        preserveRatio: true,
+        disableRotate: false,
+        disableSideResize: false,
+        onSelectState: 'resize',
+    };
+    var IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';
+    /**
+     * ImageEdit plugin handles the following image editing features:
+     * - Resize image
+     * - Crop image
+     * - Rotate image
+     * - Flip image
+     */
+    var ImageEditPlugin = /** @class */ (function () {
+        function ImageEditPlugin(options) {
+            if (options === void 0) { options = DefaultOptions; }
+            this.options = 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;
+        }
+        /**
+         * 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 () {
+                        _this.formatImageWithContentModel(editor, true /* shouldSelectImage */, true /* shouldSelectAsImageSelection*/);
+                    },
+                },
+            });
+        };
+        /**
+         * 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 () {
+            this.editor = null;
+            this.cleanInfo();
+            if (this.disposer) {
+                this.disposer();
+                this.disposer = 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) { };
+        ImageEditPlugin.prototype.startEditing = function (editor, image, apiOperation) {
+            var imageSpan = image.parentElement;
+            if (!imageSpan || (imageSpan && !(0, roosterjs_content_model_dom_1.isElementOfType)(imageSpan, 'span'))) {
+                return;
+            }
+            this.imageEditInfo = (0, updateImageEditInfo_1.getSelectedImageMetadata)(editor, image);
+            this.lastSrc = image.getAttribute('src');
+            this.imageHTMLOptions = (0, getHTMLImageOptions_1.getHTMLImageOptions)(editor, this.options, this.imageEditInfo);
+            var _a = (0, createImageWrapper_1.createImageWrapper)(editor, image, imageSpan, this.options, this.imageEditInfo, this.imageHTMLOptions, apiOperation || this.options.onSelectState), 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('imageEdit', "outline-style:none!important;", [
+                "span:has(>img#" + this.selectedImage.id + ")",
+            ]);
+        };
+        ImageEditPlugin.prototype.startRotateAndResize = function (editor, image, apiOperation) {
+            var _this = this;
+            var _a;
+            if (this.wrapper && this.selectedImage && this.shadowSpan) {
+                this.removeImageWrapper();
+            }
+            this.startEditing(editor, image, apiOperation);
+            if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {
+                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);
+                        _this.wasImageResized = true;
+                    }
+                }, this.zoomScale)), 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;
+                    if (_this.imageEditInfo &&
+                        _this.selectedImage &&
+                        _this.wrapper &&
+                        _this.clonedImage) {
+                        (0, updateWrapper_1.updateWrapper)(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.rotators);
+                        _this.updateRotateHandleState(editor, _this.selectedImage, _this.wrapper, _this.rotators, (_a = _this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+                    }
+                }, this.zoomScale)), false);
+                (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, this.resizers);
+                this.updateRotateHandleState(editor, this.selectedImage, this.wrapper, this.rotators, (_a = this.imageEditInfo) === null || _a === void 0 ? void 0 : _a.angleRad);
+            }
+        };
+        ImageEditPlugin.prototype.updateRotateHandleState = function (editor, image, wrapper, rotators, angleRad) {
+            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);
+                }
+            }
+        };
+        ImageEditPlugin.prototype.isOperationAllowed = function (operation) {
+            return operation === 'resize' || operation === 'rotate' || operation === 'flip';
+        };
+        ImageEditPlugin.prototype.canRegenerateImage = function (image) {
+            return (0, canRegenerateImage_1.canRegenerateImage)(image);
+        };
+        ImageEditPlugin.prototype.cropImage = function () {
+            var _this = this;
+            var _a, _b;
+            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.wrapper && this.selectedImage && this.shadowSpan) {
+                image = (_b = this.removeImageWrapper()) !== null && _b !== void 0 ? _b : image;
+            }
+            this.startEditing(this.editor, image, 'crop');
+            if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {
+                return;
+            }
+            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, _this.croppers);
+                    _this.isCropMode = true;
+                }
+            }, this.zoomScale)), false);
+            (0, updateWrapper_1.updateWrapper)(this.imageEditInfo, this.options, this.selectedImage, this.clonedImage, this.wrapper, undefined, this.croppers);
+        };
+        ImageEditPlugin.prototype.editImage = function (editor, image, apiOperation, operation) {
+            var _a;
+            if (this.wrapper && this.selectedImage && this.shadowSpan) {
+                image = (_a = this.removeImageWrapper()) !== null && _a !== void 0 ? _a : image;
+            }
+            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.formatImageWithContentModel(editor, true /* shouldSelect*/, true /* shouldSelectAsImageSelection*/);
+        };
+        ImageEditPlugin.prototype.cleanInfo = function () {
+            var _a;
+            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.setEditorStyle('imageEdit', 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.formatImageWithContentModel = function (editor, shouldSelectImage, shouldSelectAsImageSelection) {
+            var _this = this;
+            if (this.lastSrc &&
+                this.selectedImage &&
+                this.imageEditInfo &&
+                this.clonedImage &&
+                this.shadowSpan) {
+                editor.formatContentModel(function (model) {
+                    var selectedSegmentsAndParagraphs = (0, roosterjs_content_model_dom_1.getSelectedSegmentsAndParagraphs)(model, false);
+                    if (!selectedSegmentsAndParagraphs[0]) {
+                        return false;
+                    }
+                    var segment = selectedSegmentsAndParagraphs[0][0];
+                    var paragraph = selectedSegmentsAndParagraphs[0][1];
+                    if (paragraph && segment.segmentType == 'Image') {
+                        (0, roosterjs_content_model_dom_1.mutateSegment)(paragraph, segment, function (image) {
+                            if (_this.lastSrc &&
+                                _this.selectedImage &&
+                                _this.imageEditInfo &&
+                                _this.clonedImage) {
+                                (0, applyChange_1.applyChange)(editor, _this.selectedImage, image, _this.imageEditInfo, _this.lastSrc, _this.wasImageResized || _this.isCropMode, _this.clonedImage);
+                                image.isSelected = shouldSelectImage;
+                                image.isSelectedAsImageSelection = shouldSelectAsImageSelection;
+                            }
+                        });
+                        return true;
+                    }
+                    return false;
+                }, {
+                    changeSource: IMAGE_EDIT_CHANGE_SOURCE,
+                    onNodeCreated: function () {
+                        _this.cleanInfo();
+                    },
+                });
+            }
+        };
+        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, 'rotate', function (imageEditInfo) {
+                    imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;
+                });
+            }
+        };
+        //EXPOSED FOR TEST ONLY
+        ImageEditPlugin.prototype.getWrapper = function () {
+            return this.wrapper;
+        };
+        return ImageEditPlugin;
+    }());
+    exports.ImageEditPlugin = ImageEditPlugin;
+});
+//# sourceMappingURL=ImageEditPlugin.js.map

package/lib-amd/imageEdit/ImageEditPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditPlugin.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/ImageEditPlugin.ts"],"names":[],"mappings":"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","sourcesContent":["import { applyChange } from './utils/applyChange';\nimport { canRegenerateImage } from './utils/canRegenerateImage';\nimport { checkIfImageWasResized, isASmallImage } from './utils/imageEditUtils';\nimport { createImageWrapper } from './utils/createImageWrapper';\nimport { Cropper } from './Cropper/cropperContext';\nimport { getDropAndDragHelpers } from './utils/getDropAndDragHelpers';\nimport { getHTMLImageOptions } from './utils/getHTMLImageOptions';\nimport { getSelectedImageMetadata } from './utils/updateImageEditInfo';\nimport { ImageEditElementClass } from './types/ImageEditElementClass';\nimport { Resizer } from './Resizer/resizerContext';\nimport { Rotator } from './Rotator/rotatorContext';\nimport { updateRotateHandle } from './Rotator/updateRotateHandle';\nimport { updateWrapper } from './utils/updateWrapper';\nimport {\n    getSelectedSegmentsAndParagraphs,\n    isElementOfType,\n    isNodeOfType,\n    mutateSegment,\n    unwrap,\n} from 'roosterjs-content-model-dom';\nimport type { DragAndDropHelper } from '../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport type { DragAndDropContext } from './types/DragAndDropContext';\nimport type { ImageHtmlOptions } from './types/ImageHtmlOptions';\nimport type { ImageEditOptions } from './types/ImageEditOptions';\nimport type {\n    EditorPlugin,\n    IEditor,\n    ImageEditOperation,\n    ImageEditor,\n    ImageMetadataFormat,\n    PluginEvent,\n} from 'roosterjs-content-model-types';\n\nconst DefaultOptions: Partial<ImageEditOptions> = {\n    borderColor: '#DB626C',\n    minWidth: 10,\n    minHeight: 10,\n    preserveRatio: true,\n    disableRotate: false,\n    disableSideResize: false,\n    onSelectState: 'resize',\n};\n\nconst IMAGE_EDIT_CHANGE_SOURCE = 'ImageEdit';\n\n/**\n * ImageEdit plugin handles the following image editing features:\n * - Resize image\n * - Crop image\n * - Rotate image\n * - Flip image\n */\nexport class ImageEditPlugin implements ImageEditor, EditorPlugin {\n    protected editor: IEditor | null = null;\n    private shadowSpan: HTMLSpanElement | null = null;\n    private selectedImage: HTMLImageElement | null = null;\n    public wrapper: HTMLSpanElement | null = null;\n    private imageEditInfo: ImageMetadataFormat | null = null;\n    private imageHTMLOptions: ImageHtmlOptions | null = null;\n    private dndHelpers: DragAndDropHelper<DragAndDropContext, any>[] = [];\n    private clonedImage: HTMLImageElement | null = null;\n    private lastSrc: string | null = null;\n    private wasImageResized: boolean = false;\n    private isCropMode: boolean = false;\n    private resizers: HTMLDivElement[] = [];\n    private rotators: HTMLDivElement[] = [];\n    private croppers: HTMLDivElement[] = [];\n    private zoomScale: number = 1;\n    private disposer: (() => void) | null = null;\n\n    constructor(protected options: ImageEditOptions = DefaultOptions) {}\n\n    /**\n     * Get name of this plugin\n     */\n    getName() {\n        return 'ImageEdit';\n    }\n\n    /**\n     * The first method that editor will call to a plugin when editor is initializing.\n     * It will pass in the editor instance, plugin should take this chance to save the\n     * editor reference so that it can call to any editor method or format API later.\n     * @param editor The editor object\n     */\n    initialize(editor: IEditor) {\n        this.editor = editor;\n        this.disposer = editor.attachDomEvent({\n            blur: {\n                beforeDispatch: () => {\n                    this.formatImageWithContentModel(\n                        editor,\n                        true /* shouldSelectImage */,\n                        true /* shouldSelectAsImageSelection*/\n                    );\n                },\n            },\n        });\n    }\n\n    /**\n     * The last method that editor will call to a plugin before it is disposed.\n     * Plugin can take this chance to clear the reference to editor. After this method is\n     * called, plugin should not call to any editor method since it will result in error.\n     */\n    dispose() {\n        this.editor = null;\n        this.cleanInfo();\n        if (this.disposer) {\n            this.disposer();\n            this.disposer = null;\n        }\n    }\n\n    /**\n     * Core method for a plugin. Once an event happens in editor, editor will call this\n     * method of each plugin to handle the event as long as the event is not handled\n     * exclusively by another plugin.\n     * @param event The event to handle:\n     */\n    onPluginEvent(_event: PluginEvent) {}\n\n    private startEditing(\n        editor: IEditor,\n        image: HTMLImageElement,\n        apiOperation?: ImageEditOperation\n    ) {\n        const imageSpan = image.parentElement;\n        if (!imageSpan || (imageSpan && !isElementOfType(imageSpan, 'span'))) {\n            return;\n        }\n        this.imageEditInfo = getSelectedImageMetadata(editor, image);\n        this.lastSrc = image.getAttribute('src');\n        this.imageHTMLOptions = getHTMLImageOptions(editor, this.options, this.imageEditInfo);\n        const {\n            resizers,\n            rotators,\n            wrapper,\n            shadowSpan,\n            imageClone,\n            croppers,\n        } = createImageWrapper(\n            editor,\n            image,\n            imageSpan,\n            this.options,\n            this.imageEditInfo,\n            this.imageHTMLOptions,\n            apiOperation || this.options.onSelectState\n        );\n        this.shadowSpan = shadowSpan;\n        this.selectedImage = image;\n        this.wrapper = wrapper;\n        this.clonedImage = imageClone;\n        this.wasImageResized = checkIfImageWasResized(image);\n        this.resizers = resizers;\n        this.rotators = rotators;\n        this.croppers = croppers;\n        this.zoomScale = editor.getDOMHelper().calculateZoomScale();\n\n        editor.setEditorStyle('imageEdit', `outline-style:none!important;`, [\n            `span:has(>img#${this.selectedImage.id})`,\n        ]);\n    }\n\n    public startRotateAndResize(\n        editor: IEditor,\n        image: HTMLImageElement,\n        apiOperation?: 'resize' | 'rotate'\n    ) {\n        if (this.wrapper && this.selectedImage && this.shadowSpan) {\n            this.removeImageWrapper();\n        }\n        this.startEditing(editor, image, apiOperation);\n        if (this.selectedImage && this.imageEditInfo && this.wrapper && this.clonedImage) {\n            this.dndHelpers = [\n                ...getDropAndDragHelpers(\n                    this.wrapper,\n                    this.imageEditInfo,\n                    this.options,\n                    ImageEditElementClass.ResizeHandle,\n                    Resizer,\n                    () => {\n                        if (\n                            this.imageEditInfo &&\n                            this.selectedImage &&\n                            this.wrapper &&\n                            this.clonedImage\n                        ) {\n                            updateWrapper(\n                                this.imageEditInfo,\n                                this.options,\n                                this.selectedImage,\n                                this.clonedImage,\n                                this.wrapper,\n                                this.resizers\n                            );\n                            this.wasImageResized = true;\n                        }\n                    },\n                    this.zoomScale\n                ),\n                ...getDropAndDragHelpers(\n                    this.wrapper,\n                    this.imageEditInfo,\n                    this.options,\n                    ImageEditElementClass.RotateHandle,\n                    Rotator,\n                    () => {\n                        if (\n                            this.imageEditInfo &&\n                            this.selectedImage &&\n                            this.wrapper &&\n                            this.clonedImage\n                        ) {\n                            updateWrapper(\n                                this.imageEditInfo,\n                                this.options,\n                                this.selectedImage,\n                                this.clonedImage,\n                                this.wrapper,\n                                this.rotators\n                            );\n                            this.updateRotateHandleState(\n                                editor,\n                                this.selectedImage,\n                                this.wrapper,\n                                this.rotators,\n                                this.imageEditInfo?.angleRad\n                            );\n                        }\n                    },\n                    this.zoomScale\n                ),\n            ];\n\n            updateWrapper(\n                this.imageEditInfo,\n                this.options,\n                this.selectedImage,\n                this.clonedImage,\n                this.wrapper,\n                this.resizers\n            );\n\n            this.updateRotateHandleState(\n                editor,\n                this.selectedImage,\n                this.wrapper,\n                this.rotators,\n                this.imageEditInfo?.angleRad\n            );\n        }\n    }\n\n    private updateRotateHandleState(\n        editor: IEditor,\n        image: HTMLImageElement,\n        wrapper: HTMLSpanElement,\n        rotators: HTMLDivElement[],\n        angleRad: number | undefined\n    ) {\n        const viewport = editor.getVisibleViewport();\n        const smallImage = isASmallImage(image.width, image.height);\n        if (viewport && rotators && rotators.length > 0) {\n            const rotator = rotators[0];\n            const rotatorHandle = rotator.firstElementChild;\n            if (\n                isNodeOfType(rotatorHandle, 'ELEMENT_NODE') &&\n                isElementOfType(rotatorHandle, 'div')\n            ) {\n                updateRotateHandle(\n                    viewport,\n                    angleRad ?? 0,\n                    wrapper,\n                    rotator,\n                    rotatorHandle,\n                    smallImage\n                );\n            }\n        }\n    }\n\n    public isOperationAllowed(operation: ImageEditOperation): boolean {\n        return operation === 'resize' || operation === 'rotate' || operation === 'flip';\n    }\n\n    public canRegenerateImage(image: HTMLImageElement): boolean {\n        return canRegenerateImage(image);\n    }\n\n    public cropImage() {\n        const selection = this.editor?.getDOMSelection();\n        if (!this.editor || !selection || selection.type !== 'image') {\n            return;\n        }\n        let image = selection.image;\n        if (this.wrapper && this.selectedImage && this.shadowSpan) {\n            image = this.removeImageWrapper() ?? image;\n        }\n\n        this.startEditing(this.editor, image, 'crop');\n        if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {\n            return;\n        }\n        this.dndHelpers = [\n            ...getDropAndDragHelpers(\n                this.wrapper,\n                this.imageEditInfo,\n                this.options,\n                ImageEditElementClass.CropHandle,\n                Cropper,\n                () => {\n                    if (\n                        this.imageEditInfo &&\n                        this.selectedImage &&\n                        this.wrapper &&\n                        this.clonedImage\n                    ) {\n                        updateWrapper(\n                            this.imageEditInfo,\n                            this.options,\n                            this.selectedImage,\n                            this.clonedImage,\n                            this.wrapper,\n                            undefined,\n                            this.croppers\n                        );\n                        this.isCropMode = true;\n                    }\n                },\n                this.zoomScale\n            ),\n        ];\n\n        updateWrapper(\n            this.imageEditInfo,\n            this.options,\n            this.selectedImage,\n            this.clonedImage,\n            this.wrapper,\n            undefined,\n            this.croppers\n        );\n    }\n\n    private editImage(\n        editor: IEditor,\n        image: HTMLImageElement,\n        apiOperation: ImageEditOperation,\n        operation: (imageEditInfo: ImageMetadataFormat) => void\n    ) {\n        if (this.wrapper && this.selectedImage && this.shadowSpan) {\n            image = this.removeImageWrapper() ?? image;\n        }\n        this.startEditing(editor, image, apiOperation);\n        if (!this.selectedImage || !this.imageEditInfo || !this.wrapper || !this.clonedImage) {\n            return;\n        }\n\n        operation(this.imageEditInfo);\n\n        updateWrapper(\n            this.imageEditInfo,\n            this.options,\n            this.selectedImage,\n            this.clonedImage,\n            this.wrapper\n        );\n\n        this.formatImageWithContentModel(\n            editor,\n            true /* shouldSelect*/,\n            true /* shouldSelectAsImageSelection*/\n        );\n    }\n\n    private cleanInfo() {\n        this.editor?.setEditorStyle('imageEdit', null);\n        this.selectedImage = null;\n        this.shadowSpan = null;\n        this.wrapper = null;\n        this.imageEditInfo = null;\n        this.imageHTMLOptions = null;\n        this.dndHelpers.forEach(helper => helper.dispose());\n        this.dndHelpers = [];\n        this.clonedImage = null;\n        this.lastSrc = null;\n        this.wasImageResized = false;\n        this.isCropMode = false;\n        this.resizers = [];\n        this.rotators = [];\n        this.croppers = [];\n    }\n\n    private formatImageWithContentModel(\n        editor: IEditor,\n        shouldSelectImage: boolean,\n        shouldSelectAsImageSelection: boolean\n    ) {\n        if (\n            this.lastSrc &&\n            this.selectedImage &&\n            this.imageEditInfo &&\n            this.clonedImage &&\n            this.shadowSpan\n        ) {\n            editor.formatContentModel(\n                model => {\n                    const selectedSegmentsAndParagraphs = getSelectedSegmentsAndParagraphs(\n                        model,\n                        false\n                    );\n                    if (!selectedSegmentsAndParagraphs[0]) {\n                        return false;\n                    }\n\n                    const segment = selectedSegmentsAndParagraphs[0][0];\n                    const paragraph = selectedSegmentsAndParagraphs[0][1];\n\n                    if (paragraph && segment.segmentType == 'Image') {\n                        mutateSegment(paragraph, segment, image => {\n                            if (\n                                this.lastSrc &&\n                                this.selectedImage &&\n                                this.imageEditInfo &&\n                                this.clonedImage\n                            ) {\n                                applyChange(\n                                    editor,\n                                    this.selectedImage,\n                                    image,\n                                    this.imageEditInfo,\n                                    this.lastSrc,\n                                    this.wasImageResized || this.isCropMode,\n                                    this.clonedImage\n                                );\n                                image.isSelected = shouldSelectImage;\n                                image.isSelectedAsImageSelection = shouldSelectAsImageSelection;\n                            }\n                        });\n                        return true;\n                    }\n\n                    return false;\n                },\n                {\n                    changeSource: IMAGE_EDIT_CHANGE_SOURCE,\n                    onNodeCreated: () => {\n                        this.cleanInfo();\n                    },\n                }\n            );\n        }\n    }\n\n    private removeImageWrapper() {\n        let image: HTMLImageElement | null = null;\n        if (this.shadowSpan && this.shadowSpan.parentElement) {\n            if (\n                this.shadowSpan.firstElementChild &&\n                isNodeOfType(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&\n                isElementOfType(this.shadowSpan.firstElementChild, 'img')\n            ) {\n                image = this.shadowSpan.firstElementChild;\n            }\n            unwrap(this.shadowSpan);\n            this.shadowSpan = null;\n            this.wrapper = null;\n        }\n\n        return image;\n    }\n\n    public flipImage(direction: 'horizontal' | 'vertical') {\n        const selection = this.editor?.getDOMSelection();\n        if (!this.editor || !selection || selection.type !== 'image') {\n            return;\n        }\n        const image = selection.image;\n        if (this.editor) {\n            this.editImage(this.editor, image, 'flip', imageEditInfo => {\n                const angleRad = imageEditInfo.angleRad || 0;\n                const isInVerticalPostion =\n                    (angleRad >= Math.PI / 2 && angleRad < (3 * Math.PI) / 4) ||\n                    (angleRad <= -Math.PI / 2 && angleRad > (-3 * Math.PI) / 4);\n                if (isInVerticalPostion) {\n                    if (direction === 'horizontal') {\n                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;\n                    } else {\n                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;\n                    }\n                } else {\n                    if (direction === 'vertical') {\n                        imageEditInfo.flippedVertical = !imageEditInfo.flippedVertical;\n                    } else {\n                        imageEditInfo.flippedHorizontal = !imageEditInfo.flippedHorizontal;\n                    }\n                }\n            });\n        }\n    }\n\n    public rotateImage(angleRad: number) {\n        const selection = this.editor?.getDOMSelection();\n        if (!this.editor || !selection || selection.type !== 'image') {\n            return;\n        }\n        const image = selection.image;\n        if (this.editor) {\n            this.editImage(this.editor, image, 'rotate', imageEditInfo => {\n                imageEditInfo.angleRad = (imageEditInfo.angleRad || 0) + angleRad;\n            });\n        }\n    }\n\n    //EXPOSED FOR TEST ONLY\n    public getWrapper() {\n        return this.wrapper;\n    }\n}\n"]}

package/lib-amd/imageEdit/Resizer/createImageResizer.d.ts

@@ -0,0 +1,12 @@
+import type { CreateElementData } from '../../pluginUtils/CreateElement/CreateElementData';
+import type { DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';
+/**
+ * @internal
+ */
+export interface OnShowResizeHandle {
+    (elementData: CreateElementData, x: DNDDirectionX, y: DnDDirectionY): void;
+}
+/**
+ * @internal
+ */
+export declare function createImageResizer(doc: Document, onShowResizeHandle?: OnShowResizeHandle): HTMLDivElement[];

package/lib-amd/imageEdit/Resizer/createImageResizer.js

@@ -0,0 +1,86 @@
+define(["require", "exports", "tslib", "../../pluginUtils/CreateElement/createElement", "../types/ImageEditElementClass", "roosterjs-content-model-dom", "../constants/constants"], function (require, exports, tslib_1, createElement_1, ImageEditElementClass_1, roosterjs_content_model_dom_1, constants_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.createImageResizer = void 0;
+    var RESIZE_HANDLE_MARGIN = 6;
+    var RESIZE_HANDLE_SIZE = 10;
+    /**
+     * @internal
+     */
+    function createImageResizer(doc, onShowResizeHandle) {
+        var cornerElements = getCornerResizeHTML(onShowResizeHandle);
+        var sideElements = getSideResizeHTML(onShowResizeHandle);
+        var handles = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(cornerElements), false), (0, tslib_1.__read)(sideElements), false).map(function (element) {
+            var handle = (0, createElement_1.createElement)(element, doc);
+            if ((0, roosterjs_content_model_dom_1.isNodeOfType)(handle, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(handle, 'div')) {
+                return handle;
+            }
+        })
+            .filter(function (element) { return !!element; });
+        return handles;
+    }
+    exports.createImageResizer = createImageResizer;
+    /**
+     * @internal
+     * Get HTML for resize handles at the corners
+     */
+    function getCornerResizeHTML(onShowResizeHandle) {
+        var result = [];
+        constants_1.Xs.forEach(function (x) {
+            return constants_1.Ys.forEach(function (y) {
+                var elementData = (x == '') == (y == '') ? getResizeHandleHTML(x, y) : null;
+                if (onShowResizeHandle && elementData) {
+                    onShowResizeHandle(elementData, x, y);
+                }
+                if (elementData) {
+                    result.push(elementData);
+                }
+            });
+        });
+        return result;
+    }
+    /**
+     * @internal
+     * Get HTML for resize handles on the sides
+     */
+    function getSideResizeHTML(onShowResizeHandle) {
+        var result = [];
+        constants_1.Xs.forEach(function (x) {
+            return constants_1.Ys.forEach(function (y) {
+                var elementData = (x == '') != (y == '') ? getResizeHandleHTML(x, y) : null;
+                if (onShowResizeHandle && elementData) {
+                    onShowResizeHandle(elementData, x, y);
+                }
+                if (elementData) {
+                    result.push(elementData);
+                }
+            });
+        });
+        return result;
+    }
+    var createHandleStyle = function (direction, topOrBottom, leftOrRight) {
+        return "position:relative;width:" + RESIZE_HANDLE_SIZE + "px;height:" + RESIZE_HANDLE_SIZE + "px;background-color: #FFFFFF;cursor:" + direction + "-resize;" + topOrBottom + ":-" + RESIZE_HANDLE_MARGIN + "px;" + leftOrRight + ":-" + RESIZE_HANDLE_MARGIN + "px;border-radius:100%;border: 2px solid #bfbfbf;box-shadow: 0px 0.36316px 1.36185px rgba(100, 100, 100, 0.25);";
+    };
+    function getResizeHandleHTML(x, y) {
+        var leftOrRight = x == 'w' ? 'left' : 'right';
+        var topOrBottom = y == 'n' ? 'top' : 'bottom';
+        var leftOrRightValue = x == '' ? '50%' : '0px';
+        var topOrBottomValue = y == '' ? '50%' : '0px';
+        var direction = y + x;
+        return x == '' && y == ''
+            ? null
+            : {
+                tag: 'div',
+                style: "position:absolute;" + leftOrRight + ":" + leftOrRightValue + ";" + topOrBottom + ":" + topOrBottomValue,
+                children: [
+                    {
+                        tag: 'div',
+                        style: createHandleStyle(direction, topOrBottom, leftOrRight),
+                        className: ImageEditElementClass_1.ImageEditElementClass.ResizeHandle,
+                        dataset: { x: x, y: y },
+                    },
+                ],
+            };
+    }
+});
+//# sourceMappingURL=createImageResizer.js.map

package/lib-amd/imageEdit/Resizer/createImageResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageResizer.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/createImageResizer.ts"],"names":[],"mappings":"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","sourcesContent":["import { createElement } from '../../pluginUtils/CreateElement/createElement';\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';\nimport { Xs, Ys } from '../constants/constants';\nimport type { CreateElementData } from '../../pluginUtils/CreateElement/CreateElementData';\nimport type { DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';\n/**\n * @internal\n */\nexport interface OnShowResizeHandle {\n    (elementData: CreateElementData, x: DNDDirectionX, y: DnDDirectionY): void;\n}\n\nconst RESIZE_HANDLE_MARGIN = 6;\nconst RESIZE_HANDLE_SIZE = 10;\n\n/**\n * @internal\n */\nexport function createImageResizer(\n    doc: Document,\n    onShowResizeHandle?: OnShowResizeHandle\n): HTMLDivElement[] {\n    const cornerElements = getCornerResizeHTML(onShowResizeHandle);\n    const sideElements = getSideResizeHTML(onShowResizeHandle);\n    const handles = [...cornerElements, ...sideElements]\n        .map(element => {\n            const handle = createElement(element, doc);\n            if (isNodeOfType(handle, 'ELEMENT_NODE') && isElementOfType(handle, 'div')) {\n                return handle;\n            }\n        })\n        .filter(element => !!element) as HTMLDivElement[];\n    return handles;\n}\n\n/**\n * @internal\n * Get HTML for resize handles at the corners\n */\nfunction getCornerResizeHTML(onShowResizeHandle?: OnShowResizeHandle): CreateElementData[] {\n    const result: CreateElementData[] = [];\n\n    Xs.forEach(x =>\n        Ys.forEach(y => {\n            const elementData = (x == '') == (y == '') ? getResizeHandleHTML(x, y) : null;\n            if (onShowResizeHandle && elementData) {\n                onShowResizeHandle(elementData, x, y);\n            }\n            if (elementData) {\n                result.push(elementData);\n            }\n        })\n    );\n    return result;\n}\n\n/**\n * @internal\n * Get HTML for resize handles on the sides\n */\nfunction getSideResizeHTML(onShowResizeHandle?: OnShowResizeHandle): CreateElementData[] {\n    const result: CreateElementData[] = [];\n    Xs.forEach(x =>\n        Ys.forEach(y => {\n            const elementData = (x == '') != (y == '') ? getResizeHandleHTML(x, y) : null;\n            if (onShowResizeHandle && elementData) {\n                onShowResizeHandle(elementData, x, y);\n            }\n            if (elementData) {\n                result.push(elementData);\n            }\n        })\n    );\n    return result;\n}\n\nconst createHandleStyle = (direction: string, topOrBottom: string, leftOrRight: string) => {\n    return `position:relative;width:${RESIZE_HANDLE_SIZE}px;height:${RESIZE_HANDLE_SIZE}px;background-color: #FFFFFF;cursor:${direction}-resize;${topOrBottom}:-${RESIZE_HANDLE_MARGIN}px;${leftOrRight}:-${RESIZE_HANDLE_MARGIN}px;border-radius:100%;border: 2px solid #bfbfbf;box-shadow: 0px 0.36316px 1.36185px rgba(100, 100, 100, 0.25);`;\n};\n\nfunction getResizeHandleHTML(x: DNDDirectionX, y: DnDDirectionY): CreateElementData | null {\n    const leftOrRight = x == 'w' ? 'left' : 'right';\n    const topOrBottom = y == 'n' ? 'top' : 'bottom';\n    const leftOrRightValue = x == '' ? '50%' : '0px';\n    const topOrBottomValue = y == '' ? '50%' : '0px';\n    const direction = y + x;\n    return x == '' && y == ''\n        ? null\n        : {\n              tag: 'div',\n              style: `position:absolute;${leftOrRight}:${leftOrRightValue};${topOrBottom}:${topOrBottomValue}`,\n              children: [\n                  {\n                      tag: 'div',\n                      style: createHandleStyle(direction, topOrBottom, leftOrRight),\n                      className: ImageEditElementClass.ResizeHandle,\n                      dataset: { x, y },\n                  },\n              ],\n          };\n}\n"]}

package/lib-amd/imageEdit/Resizer/resizerContext.d.ts

@@ -0,0 +1,8 @@
+import type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';
+import type { ImageResizeMetadataFormat } from 'roosterjs-content-model-types';
+import type { DragAndDropContext } from '../types/DragAndDropContext';
+/**
+ * @internal
+ * The resize drag and drop handler
+ */
+export declare const Resizer: DragAndDropHandler<DragAndDropContext, ImageResizeMetadataFormat>;

package/lib-amd/imageEdit/Resizer/resizerContext.js

@@ -0,0 +1,61 @@
+define(["require", "exports", "tslib", "../utils/imageEditUtils"], function (require, exports, tslib_1, imageEditUtils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Resizer = void 0;
+    /**
+     * @internal
+     * The resize drag and drop handler
+     */
+    exports.Resizer = {
+        onDragStart: function (_a) {
+            var editInfo = _a.editInfo;
+            return ((0, tslib_1.__assign)({}, editInfo));
+        },
+        onDragging: function (_a, e, base, deltaX, deltaY) {
+            var _b;
+            var _c;
+            var x = _a.x, y = _a.y, editInfo = _a.editInfo, options = _a.options;
+            if (base.heightPx &&
+                base.widthPx &&
+                options.minWidth !== undefined &&
+                options.minHeight !== undefined) {
+                var ratio = base.widthPx > 0 && base.heightPx > 0 ? (base.widthPx * 1.0) / base.heightPx : 0;
+                _b = (0, tslib_1.__read)((0, imageEditUtils_1.rotateCoordinate)(deltaX, deltaY, (_c = editInfo.angleRad) !== null && _c !== void 0 ? _c : 0), 2), deltaX = _b[0], deltaY = _b[1];
+                var horizontalOnly = x == '';
+                var verticalOnly = y == '';
+                var shouldPreserveRatio = !(horizontalOnly || verticalOnly) && (options.preserveRatio || e.shiftKey);
+                var newWidth = horizontalOnly
+                    ? base.widthPx
+                    : Math.max(base.widthPx + deltaX * (x == 'w' ? -1 : 1), options.minWidth);
+                var newHeight = verticalOnly
+                    ? base.heightPx
+                    : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);
+                if (shouldPreserveRatio && ratio > 0) {
+                    if (ratio > 1) {
+                        // first sure newHeight is right，calculate newWidth
+                        newWidth = newHeight * ratio;
+                        if (newWidth < options.minWidth) {
+                            newWidth = options.minWidth;
+                            newHeight = newWidth / ratio;
+                        }
+                    }
+                    else {
+                        // first sure newWidth is right，calculate newHeight
+                        newHeight = newWidth / ratio;
+                        if (newHeight < options.minHeight) {
+                            newHeight = options.minHeight;
+                            newWidth = newHeight * ratio;
+                        }
+                    }
+                }
+                editInfo.widthPx = newWidth;
+                editInfo.heightPx = newHeight;
+                return true;
+            }
+            else {
+                return false;
+            }
+        },
+    };
+});
+//# sourceMappingURL=resizerContext.js.map

package/lib-amd/imageEdit/Resizer/resizerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizerContext.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/resizerContext.ts"],"names":[],"mappings":";;;;IAKA;;;OAGG;IACU,QAAA,OAAO,GAAsE;QACtF,WAAW,EAAE,UAAC,EAAY;gBAAV,QAAQ,cAAA;YAAO,OAAA,2BAAM,QAAQ,EAAG;QAAjB,CAAiB;QAChD,UAAU,EAAE,UAAC,EAA2B,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;;;gBAAlD,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;YAClC,IACI,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,OAAO;gBACZ,OAAO,CAAC,QAAQ,KAAK,SAAS;gBAC9B,OAAO,CAAC,SAAS,KAAK,SAAS,EACjC;gBACE,IAAM,KAAK,GACP,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrF,KAAA,oBAAmB,IAAA,iCAAgB,EAAC,MAAM,EAAE,MAAM,EAAE,MAAA,QAAQ,CAAC,QAAQ,mCAAI,CAAC,CAAC,IAAA,EAA1E,MAAM,QAAA,EAAE,MAAM,QAAA,CAA6D;gBAC5E,IAAM,cAAc,GAAG,CAAC,IAAI,EAAE,CAAC;gBAC/B,IAAM,YAAY,GAAG,CAAC,IAAI,EAAE,CAAC;gBAC7B,IAAM,mBAAmB,GACrB,CAAC,CAAC,cAAc,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;gBAC/E,IAAI,QAAQ,GAAG,cAAc;oBACzB,CAAC,CAAC,IAAI,CAAC,OAAO;oBACd,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;gBAC9E,IAAI,SAAS,GAAG,YAAY;oBACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;oBACf,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;gBAEhF,IAAI,mBAAmB,IAAI,KAAK,GAAG,CAAC,EAAE;oBAClC,IAAI,KAAK,GAAG,CAAC,EAAE;wBACX,mDAAmD;wBACnD,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;wBAC7B,IAAI,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAAE;4BAC7B,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;4BAC5B,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;yBAChC;qBACJ;yBAAM;wBACH,mDAAmD;wBACnD,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;wBAC7B,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE;4BAC/B,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;4BAC9B,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;yBAChC;qBACJ;iBACJ;gBAED,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;gBAC5B,QAAQ,CAAC,QAAQ,GAAG,SAAS,CAAC;gBAC9B,OAAO,IAAI,CAAC;aACf;iBAAM;gBACH,OAAO,KAAK,CAAC;aAChB;QACL,CAAC;KACJ,CAAC","sourcesContent":["import { rotateCoordinate } from '../utils/imageEditUtils';\nimport type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { ImageResizeMetadataFormat } from 'roosterjs-content-model-types';\nimport type { DragAndDropContext } from '../types/DragAndDropContext';\n\n/**\n * @internal\n * The resize drag and drop handler\n */\nexport const Resizer: DragAndDropHandler<DragAndDropContext, ImageResizeMetadataFormat> = {\n    onDragStart: ({ editInfo }) => ({ ...editInfo }),\n    onDragging: ({ x, y, editInfo, options }, e, base, deltaX, deltaY) => {\n        if (\n            base.heightPx &&\n            base.widthPx &&\n            options.minWidth !== undefined &&\n            options.minHeight !== undefined\n        ) {\n            const ratio =\n                base.widthPx > 0 && base.heightPx > 0 ? (base.widthPx * 1.0) / base.heightPx : 0;\n            [deltaX, deltaY] = rotateCoordinate(deltaX, deltaY, editInfo.angleRad ?? 0);\n            const horizontalOnly = x == '';\n            const verticalOnly = y == '';\n            const shouldPreserveRatio =\n                !(horizontalOnly || verticalOnly) && (options.preserveRatio || e.shiftKey);\n            let newWidth = horizontalOnly\n                ? base.widthPx\n                : Math.max(base.widthPx + deltaX * (x == 'w' ? -1 : 1), options.minWidth);\n            let newHeight = verticalOnly\n                ? base.heightPx\n                : Math.max(base.heightPx + deltaY * (y == 'n' ? -1 : 1), options.minHeight);\n\n            if (shouldPreserveRatio && ratio > 0) {\n                if (ratio > 1) {\n                    // first sure newHeight is right，calculate newWidth\n                    newWidth = newHeight * ratio;\n                    if (newWidth < options.minWidth) {\n                        newWidth = options.minWidth;\n                        newHeight = newWidth / ratio;\n                    }\n                } else {\n                    // first sure newWidth is right，calculate newHeight\n                    newHeight = newWidth / ratio;\n                    if (newHeight < options.minHeight) {\n                        newHeight = options.minHeight;\n                        newWidth = newHeight * ratio;\n                    }\n                }\n            }\n\n            editInfo.widthPx = newWidth;\n            editInfo.heightPx = newHeight;\n            return true;\n        } else {\n            return false;\n        }\n    },\n};\n"]}

package/lib-amd/imageEdit/Resizer/updateSideHandlesVisibility.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare function updateSideHandlesVisibility(handles: HTMLDivElement[], isSmall: boolean): void;

package/lib-amd/imageEdit/Resizer/updateSideHandlesVisibility.js

@@ -0,0 +1,19 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.updateSideHandlesVisibility = void 0;
+    /**
+     * @internal
+     */
+    function updateSideHandlesVisibility(handles, isSmall) {
+        handles.forEach(function (handle) {
+            var _a = handle.dataset, y = _a.y, x = _a.x;
+            var coordinate = (y !== null && y !== void 0 ? y : '') + (x !== null && x !== void 0 ? x : '');
+            var directions = ['n', 's', 'e', 'w'];
+            var isSideHandle = directions.indexOf(coordinate) > -1;
+            handle.style.display = isSideHandle && isSmall ? 'none' : '';
+        });
+    }
+    exports.updateSideHandlesVisibility = updateSideHandlesVisibility;
+});
+//# sourceMappingURL=updateSideHandlesVisibility.js.map

package/lib-amd/imageEdit/Resizer/updateSideHandlesVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateSideHandlesVisibility.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Resizer/updateSideHandlesVisibility.ts"],"names":[],"mappings":";;;;IAAA;;OAEG;IACH,SAAgB,2BAA2B,CAAC,OAAyB,EAAE,OAAgB;QACnF,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;YACZ,IAAA,KAAW,MAAM,CAAC,OAAO,EAAvB,CAAC,OAAA,EAAE,CAAC,OAAmB,CAAC;YAChC,IAAM,UAAU,GAAG,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,GAAG,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,CAAC;YACzC,IAAM,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACxC,IAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;YACzD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QACjE,CAAC,CAAC,CAAC;IACP,CAAC;IARD,kEAQC","sourcesContent":["/**\n * @internal\n */\nexport function updateSideHandlesVisibility(handles: HTMLDivElement[], isSmall: boolean) {\n    handles.forEach(handle => {\n        const { y, x } = handle.dataset;\n        const coordinate = (y ?? '') + (x ?? '');\n        const directions = ['n', 's', 'e', 'w'];\n        const isSideHandle = directions.indexOf(coordinate) > -1;\n        handle.style.display = isSideHandle && isSmall ? 'none' : '';\n    });\n}\n"]}

package/lib-amd/imageEdit/Rotator/createImageRotator.d.ts

@@ -0,0 +1,6 @@
+import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
+/**
+ * @internal
+ * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
+ */
+export declare function createImageRotator(doc: Document, htmlOptions: ImageHtmlOptions): HTMLDivElement[];