roosterjs-content-model-plugins 9.4.1 → 9.5.1

package/lib-mjs/imageEdit/ImageEditPlugin.js

@@ -0,0 +1,325 @@
+import { __read, __spreadArray } from "tslib";
+import { applyChange } from './utils/applyChange';
+import { canRegenerateImage } from './utils/canRegenerateImage';
+import { checkIfImageWasResized, isASmallImage } from './utils/imageEditUtils';
+import { createImageWrapper } from './utils/createImageWrapper';
+import { Cropper } from './Cropper/cropperContext';
+import { getDropAndDragHelpers } from './utils/getDropAndDragHelpers';
+import { getHTMLImageOptions } from './utils/getHTMLImageOptions';
+import { getSelectedImageMetadata } from './utils/updateImageEditInfo';
+import { ImageEditElementClass } from './types/ImageEditElementClass';
+import { Resizer } from './Resizer/resizerContext';
+import { Rotator } from './Rotator/rotatorContext';
+import { updateRotateHandle } from './Rotator/updateRotateHandle';
+import { updateWrapper } from './utils/updateWrapper';
+import { getSelectedSegmentsAndParagraphs, isElementOfType, isNodeOfType, mutateSegment, unwrap, } from 'roosterjs-content-model-dom';
+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 && !isElementOfType(imageSpan, 'span'))) {
+            return;
+        }
+        this.imageEditInfo = getSelectedImageMetadata(editor, image);
+        this.lastSrc = image.getAttribute('src');
+        this.imageHTMLOptions = getHTMLImageOptions(editor, this.options, this.imageEditInfo);
+        var _a = 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 = 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 = __spreadArray(__spreadArray([], __read(getDropAndDragHelpers(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass.ResizeHandle, Resizer, function () {
+                if (_this.imageEditInfo &&
+                    _this.selectedImage &&
+                    _this.wrapper &&
+                    _this.clonedImage) {
+                    updateWrapper(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, _this.resizers);
+                    _this.wasImageResized = true;
+                }
+            }, this.zoomScale)), false), __read(getDropAndDragHelpers(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass.RotateHandle, Rotator, function () {
+                var _a;
+                if (_this.imageEditInfo &&
+                    _this.selectedImage &&
+                    _this.wrapper &&
+                    _this.clonedImage) {
+                    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);
+            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 = isASmallImage(image.width, image.height);
+        if (viewport && rotators && rotators.length > 0) {
+            var rotator = rotators[0];
+            var rotatorHandle = rotator.firstElementChild;
+            if (isNodeOfType(rotatorHandle, 'ELEMENT_NODE') &&
+                isElementOfType(rotatorHandle, 'div')) {
+                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 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 = __spreadArray([], __read(getDropAndDragHelpers(this.wrapper, this.imageEditInfo, this.options, ImageEditElementClass.CropHandle, Cropper, function () {
+            if (_this.imageEditInfo &&
+                _this.selectedImage &&
+                _this.wrapper &&
+                _this.clonedImage) {
+                updateWrapper(_this.imageEditInfo, _this.options, _this.selectedImage, _this.clonedImage, _this.wrapper, undefined, _this.croppers);
+                _this.isCropMode = true;
+            }
+        }, this.zoomScale)), false);
+        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);
+        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 = getSelectedSegmentsAndParagraphs(model, false);
+                if (!selectedSegmentsAndParagraphs[0]) {
+                    return false;
+                }
+                var segment = selectedSegmentsAndParagraphs[0][0];
+                var paragraph = selectedSegmentsAndParagraphs[0][1];
+                if (paragraph && segment.segmentType == 'Image') {
+                    mutateSegment(paragraph, segment, function (image) {
+                        if (_this.lastSrc &&
+                            _this.selectedImage &&
+                            _this.imageEditInfo &&
+                            _this.clonedImage) {
+                            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 &&
+                isNodeOfType(this.shadowSpan.firstElementChild, 'ELEMENT_NODE') &&
+                isElementOfType(this.shadowSpan.firstElementChild, 'img')) {
+                image = this.shadowSpan.firstElementChild;
+            }
+            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;
+}());
+export { ImageEditPlugin };
+//# sourceMappingURL=ImageEditPlugin.js.map

package/lib-mjs/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-mjs/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-mjs/imageEdit/Resizer/createImageResizer.js

@@ -0,0 +1,85 @@
+import { __read, __spreadArray } from "tslib";
+import { createElement } from '../../pluginUtils/CreateElement/createElement';
+import { ImageEditElementClass } from '../types/ImageEditElementClass';
+import { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';
+import { Xs, Ys } from '../constants/constants';
+var RESIZE_HANDLE_MARGIN = 6;
+var RESIZE_HANDLE_SIZE = 10;
+/**
+ * @internal
+ */
+export function createImageResizer(doc, onShowResizeHandle) {
+    var cornerElements = getCornerResizeHTML(onShowResizeHandle);
+    var sideElements = getSideResizeHTML(onShowResizeHandle);
+    var handles = __spreadArray(__spreadArray([], __read(cornerElements), false), __read(sideElements), false).map(function (element) {
+        var handle = createElement(element, doc);
+        if (isNodeOfType(handle, 'ELEMENT_NODE') && isElementOfType(handle, 'div')) {
+            return handle;
+        }
+    })
+        .filter(function (element) { return !!element; });
+    return handles;
+}
+/**
+ * @internal
+ * Get HTML for resize handles at the corners
+ */
+function getCornerResizeHTML(onShowResizeHandle) {
+    var result = [];
+    Xs.forEach(function (x) {
+        return 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 = [];
+    Xs.forEach(function (x) {
+        return 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.ResizeHandle,
+                    dataset: { x: x, y: y },
+                },
+            ],
+        };
+}
+//# sourceMappingURL=createImageResizer.js.map

package/lib-mjs/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-mjs/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-mjs/imageEdit/Resizer/resizerContext.js

@@ -0,0 +1,58 @@
+import { __assign, __read } from "tslib";
+import { rotateCoordinate } from '../utils/imageEditUtils';
+/**
+ * @internal
+ * The resize drag and drop handler
+ */
+export var Resizer = {
+    onDragStart: function (_a) {
+        var editInfo = _a.editInfo;
+        return (__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 = __read(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-mjs/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":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAK3D;;;GAGG;AACH,MAAM,CAAC,IAAM,OAAO,GAAsE;IACtF,WAAW,EAAE,UAAC,EAAY;YAAV,QAAQ,cAAA;QAAO,OAAA,cAAM,QAAQ,EAAG;IAAjB,CAAiB;IAChD,UAAU,EAAE,UAAC,EAA2B,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;;;YAAlD,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;QAClC,IACI,IAAI,CAAC,QAAQ;YACb,IAAI,CAAC,OAAO;YACZ,OAAO,CAAC,QAAQ,KAAK,SAAS;YAC9B,OAAO,CAAC,SAAS,KAAK,SAAS,EACjC;YACE,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;YACrF,KAAA,OAAmB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAA,QAAQ,CAAC,QAAQ,mCAAI,CAAC,CAAC,IAAA,EAA1E,MAAM,QAAA,EAAE,MAAM,QAAA,CAA6D;YAC5E,IAAM,cAAc,GAAG,CAAC,IAAI,EAAE,CAAC;YAC/B,IAAM,YAAY,GAAG,CAAC,IAAI,EAAE,CAAC;YAC7B,IAAM,mBAAmB,GACrB,CAAC,CAAC,cAAc,IAAI,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;YAC/E,IAAI,QAAQ,GAAG,cAAc;gBACzB,CAAC,CAAC,IAAI,CAAC,OAAO;gBACd,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;YAC9E,IAAI,SAAS,GAAG,YAAY;gBACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;gBACf,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;YAEhF,IAAI,mBAAmB,IAAI,KAAK,GAAG,CAAC,EAAE;gBAClC,IAAI,KAAK,GAAG,CAAC,EAAE;oBACX,mDAAmD;oBACnD,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;oBAC7B,IAAI,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAAE;wBAC7B,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;wBAC5B,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;qBAChC;iBACJ;qBAAM;oBACH,mDAAmD;oBACnD,SAAS,GAAG,QAAQ,GAAG,KAAK,CAAC;oBAC7B,IAAI,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE;wBAC/B,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;wBAC9B,QAAQ,GAAG,SAAS,GAAG,KAAK,CAAC;qBAChC;iBACJ;aACJ;YAED,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC5B,QAAQ,CAAC,QAAQ,GAAG,SAAS,CAAC;YAC9B,OAAO,IAAI,CAAC;SACf;aAAM;YACH,OAAO,KAAK,CAAC;SAChB;IACL,CAAC;CACJ,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-mjs/imageEdit/Resizer/updateSideHandlesVisibility.d.ts

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

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

@@ -0,0 +1,13 @@
+/**
+ * @internal
+ */
+export 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' : '';
+    });
+}
+//# sourceMappingURL=updateSideHandlesVisibility.js.map

package/lib-mjs/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":"AAAA;;GAEG;AACH,MAAM,UAAU,2BAA2B,CAAC,OAAyB,EAAE,OAAgB;IACnF,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;QACZ,IAAA,KAAW,MAAM,CAAC,OAAO,EAAvB,CAAC,OAAA,EAAE,CAAC,OAAmB,CAAC;QAChC,IAAM,UAAU,GAAG,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,GAAG,CAAC,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,EAAE,CAAC,CAAC;QACzC,IAAM,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QACxC,IAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;QACzD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;AACP,CAAC","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-mjs/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[];