roosterjs-content-model-plugins 9.4.0 → 9.5.0

package/lib-mjs/imageEdit/utils/applyChange.js

@@ -0,0 +1,73 @@
+import { checkEditInfoState } from './checkEditInfoState';
+import { generateDataURL } from './generateDataURL';
+import { getGeneratedImageSize } from './generateImageSize';
+import { getSelectedImageMetadata, updateImageEditInfo } from './updateImageEditInfo';
+/**
+ * @internal
+ * Apply changes from the edit info of an image, write result to the image
+ * @param editor The editor object that contains the image
+ * @param image The image to apply the change
+ * @param editInfo Edit info that contains the changed information of the image
+ * @param previousSrc Last src value of the image before the change was made
+ * @param wasResizedOrCropped if the image was resized or cropped apply the new image dimensions
+ * @param editingImage (optional) Image in editing state
+ */
+export function applyChange(editor, image, contentModelImage, editInfo, previousSrc, wasResizedOrCropped, editingImage) {
+    var _a;
+    var newSrc = '';
+    var initEditInfo = (_a = getSelectedImageMetadata(editor, editingImage !== null && editingImage !== void 0 ? editingImage : image)) !== null && _a !== void 0 ? _a : undefined;
+    var state = checkEditInfoState(editInfo, initEditInfo);
+    switch (state) {
+        case 'ResizeOnly':
+            // For resize only case, no need to generate a new image, just reuse the original one
+            newSrc = editInfo.src || '';
+            break;
+        case 'SameWithLast':
+            // For SameWithLast case, image may be resized but the content is still the same with last one,
+            // so no need to create a new image, but just reuse last one
+            newSrc = previousSrc;
+            break;
+        case 'FullyChanged':
+            // For other cases (cropped, rotated, ...) we need to create a new image to reflect the change
+            newSrc = generateDataURL(editingImage !== null && editingImage !== void 0 ? editingImage : image, editInfo);
+            break;
+    }
+    var srcChanged = newSrc != previousSrc;
+    if (srcChanged) {
+        // If the src is changed, fire an EditImage event so that plugins knows that a new image is used, and can
+        // replace the new src with some other string and it will be used and set to the image
+        var event_1 = editor.triggerEvent('editImage', {
+            image: image,
+            originalSrc: editInfo.src || image.src,
+            previousSrc: previousSrc,
+            newSrc: newSrc,
+        });
+        newSrc = event_1.newSrc;
+    }
+    if (newSrc == editInfo.src) {
+        // If newSrc is the same with original one, it means there is only size change, but no rotation, no cropping,
+        // so we don't need to keep edit info, we can delete it
+        updateImageEditInfo(contentModelImage, null);
+    }
+    else {
+        // Otherwise, save the new edit info to the image so that next time when we edit the same image, we know
+        // the edit info
+        updateImageEditInfo(contentModelImage, editInfo);
+    }
+    // Write back the change to image, and set its new size
+    var generatedImageSize = getGeneratedImageSize(editInfo);
+    if (!generatedImageSize) {
+        return;
+    }
+    contentModelImage.src = newSrc;
+    if (wasResizedOrCropped || state == 'FullyChanged') {
+        contentModelImage.format.width = generatedImageSize.targetWidth + 'px';
+        contentModelImage.format.height = generatedImageSize.targetHeight + 'px';
+        // Remove width/height style so that it won't affect the image size, since style width/height has higher priority
+        image.style.removeProperty('width');
+        image.style.removeProperty('height');
+        image.style.removeProperty('max-width');
+        image.style.removeProperty('max-height');
+    }
+}
+//# sourceMappingURL=applyChange.js.map

package/lib-mjs/imageEdit/utils/applyChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyChange.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/applyChange.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAOtF;;;;;;;;;GASG;AACH,MAAM,UAAU,WAAW,CACvB,MAAe,EACf,KAAuB,EACvB,iBAAoC,EACpC,QAA6B,EAC7B,WAAmB,EACnB,mBAA4B,EAC5B,YAA+B;;IAE/B,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,IAAM,YAAY,GAAG,MAAA,wBAAwB,CAAC,MAAM,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,mCAAI,SAAS,CAAC;IAC1F,IAAM,KAAK,GAAG,kBAAkB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEzD,QAAQ,KAAK,EAAE;QACX,KAAK,YAAY;YACb,qFAAqF;YACrF,MAAM,GAAG,QAAQ,CAAC,GAAG,IAAI,EAAE,CAAC;YAC5B,MAAM;QACV,KAAK,cAAc;YACf,+FAA+F;YAC/F,4DAA4D;YAC5D,MAAM,GAAG,WAAW,CAAC;YACrB,MAAM;QACV,KAAK,cAAc;YACf,8FAA8F;YAC9F,MAAM,GAAG,eAAe,CAAC,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,EAAE,QAAQ,CAAC,CAAC;YAC1D,MAAM;KACb;IAED,IAAM,UAAU,GAAG,MAAM,IAAI,WAAW,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,yGAAyG;QACzG,sFAAsF;QACtF,IAAM,OAAK,GAAG,MAAM,CAAC,YAAY,CAAC,WAAW,EAAE;YAC3C,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,QAAQ,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG;YACtC,WAAW,aAAA;YACX,MAAM,QAAA;SACT,CAAC,CAAC;QACH,MAAM,GAAG,OAAK,CAAC,MAAM,CAAC;KACzB;IAED,IAAI,MAAM,IAAI,QAAQ,CAAC,GAAG,EAAE;QACxB,6GAA6G;QAC7G,uDAAuD;QACvD,mBAAmB,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;KAChD;SAAM;QACH,wGAAwG;QACxG,gBAAgB;QAChB,mBAAmB,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;KACpD;IAED,uDAAuD;IACvD,IAAM,kBAAkB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC3D,IAAI,CAAC,kBAAkB,EAAE;QACrB,OAAO;KACV;IAED,iBAAiB,CAAC,GAAG,GAAG,MAAM,CAAC;IAE/B,IAAI,mBAAmB,IAAI,KAAK,IAAI,cAAc,EAAE;QAChD,iBAAiB,CAAC,MAAM,CAAC,KAAK,GAAG,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC;QACvE,iBAAiB,CAAC,MAAM,CAAC,MAAM,GAAG,kBAAkB,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzE,iHAAiH;QACjH,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QACpC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACrC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QACxC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;KAC5C;AACL,CAAC","sourcesContent":["import { checkEditInfoState } from './checkEditInfoState';\nimport { generateDataURL } from './generateDataURL';\nimport { getGeneratedImageSize } from './generateImageSize';\nimport { getSelectedImageMetadata, updateImageEditInfo } from './updateImageEditInfo';\nimport type {\n    ContentModelImage,\n    IEditor,\n    ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Apply changes from the edit info of an image, write result to the image\n * @param editor The editor object that contains the image\n * @param image The image to apply the change\n * @param editInfo Edit info that contains the changed information of the image\n * @param previousSrc Last src value of the image before the change was made\n * @param wasResizedOrCropped if the image was resized or cropped apply the new image dimensions\n * @param editingImage (optional) Image in editing state\n */\nexport function applyChange(\n    editor: IEditor,\n    image: HTMLImageElement,\n    contentModelImage: ContentModelImage,\n    editInfo: ImageMetadataFormat,\n    previousSrc: string,\n    wasResizedOrCropped: boolean,\n    editingImage?: HTMLImageElement\n) {\n    let newSrc = '';\n    const initEditInfo = getSelectedImageMetadata(editor, editingImage ?? image) ?? undefined;\n    const state = checkEditInfoState(editInfo, initEditInfo);\n\n    switch (state) {\n        case 'ResizeOnly':\n            // For resize only case, no need to generate a new image, just reuse the original one\n            newSrc = editInfo.src || '';\n            break;\n        case 'SameWithLast':\n            // For SameWithLast case, image may be resized but the content is still the same with last one,\n            // so no need to create a new image, but just reuse last one\n            newSrc = previousSrc;\n            break;\n        case 'FullyChanged':\n            // For other cases (cropped, rotated, ...) we need to create a new image to reflect the change\n            newSrc = generateDataURL(editingImage ?? image, editInfo);\n            break;\n    }\n\n    const srcChanged = newSrc != previousSrc;\n\n    if (srcChanged) {\n        // If the src is changed, fire an EditImage event so that plugins knows that a new image is used, and can\n        // replace the new src with some other string and it will be used and set to the image\n        const event = editor.triggerEvent('editImage', {\n            image: image,\n            originalSrc: editInfo.src || image.src,\n            previousSrc,\n            newSrc,\n        });\n        newSrc = event.newSrc;\n    }\n\n    if (newSrc == editInfo.src) {\n        // If newSrc is the same with original one, it means there is only size change, but no rotation, no cropping,\n        // so we don't need to keep edit info, we can delete it\n        updateImageEditInfo(contentModelImage, null);\n    } else {\n        // Otherwise, save the new edit info to the image so that next time when we edit the same image, we know\n        // the edit info\n        updateImageEditInfo(contentModelImage, editInfo);\n    }\n\n    // Write back the change to image, and set its new size\n    const generatedImageSize = getGeneratedImageSize(editInfo);\n    if (!generatedImageSize) {\n        return;\n    }\n\n    contentModelImage.src = newSrc;\n\n    if (wasResizedOrCropped || state == 'FullyChanged') {\n        contentModelImage.format.width = generatedImageSize.targetWidth + 'px';\n        contentModelImage.format.height = generatedImageSize.targetHeight + 'px';\n\n        // Remove width/height style so that it won't affect the image size, since style width/height has higher priority\n        image.style.removeProperty('width');\n        image.style.removeProperty('height');\n        image.style.removeProperty('max-width');\n        image.style.removeProperty('max-height');\n    }\n}\n"]}

package/lib-mjs/imageEdit/utils/canRegenerateImage.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @internal
+ * Check if we can regenerate edited image from the source image.
+ * An image can't regenerate result when there is CORS issue of the source content.
+ * @param img The image element to test
+ * @returns True when we can regenerate the edited image, otherwise false
+ */
+export declare function canRegenerateImage(img: HTMLImageElement | null): boolean;

package/lib-mjs/imageEdit/utils/canRegenerateImage.js

@@ -0,0 +1,28 @@
+/**
+ * @internal
+ * Check if we can regenerate edited image from the source image.
+ * An image can't regenerate result when there is CORS issue of the source content.
+ * @param img The image element to test
+ * @returns True when we can regenerate the edited image, otherwise false
+ */
+export function canRegenerateImage(img) {
+    if (!img) {
+        return false;
+    }
+    try {
+        var canvas = img.ownerDocument.createElement('canvas');
+        canvas.width = 10;
+        canvas.height = 10;
+        var context = canvas.getContext('2d');
+        if (context) {
+            context.drawImage(img, 0, 0);
+            context.getImageData(0, 0, 1, 1);
+            return true;
+        }
+        return false;
+    }
+    catch (_a) {
+        return false;
+    }
+}
+//# sourceMappingURL=canRegenerateImage.js.map

package/lib-mjs/imageEdit/utils/canRegenerateImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canRegenerateImage.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/canRegenerateImage.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,GAA4B;IAC3D,IAAI,CAAC,GAAG,EAAE;QACN,OAAO,KAAK,CAAC;KAChB;IAED,IAAI;QACA,IAAM,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;QAClB,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC;QACnB,IAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QACxC,IAAI,OAAO,EAAE;YACT,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YAC7B,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;YACjC,OAAO,IAAI,CAAC;SACf;QAED,OAAO,KAAK,CAAC;KAChB;IAAC,WAAM;QACJ,OAAO,KAAK,CAAC;KAChB;AACL,CAAC","sourcesContent":["/**\n * @internal\n * Check if we can regenerate edited image from the source image.\n * An image can't regenerate result when there is CORS issue of the source content.\n * @param img The image element to test\n * @returns True when we can regenerate the edited image, otherwise false\n */\nexport function canRegenerateImage(img: HTMLImageElement | null): boolean {\n    if (!img) {\n        return false;\n    }\n\n    try {\n        const canvas = img.ownerDocument.createElement('canvas');\n        canvas.width = 10;\n        canvas.height = 10;\n        const context = canvas.getContext('2d');\n        if (context) {\n            context.drawImage(img, 0, 0);\n            context.getImageData(0, 0, 1, 1);\n            return true;\n        }\n\n        return false;\n    } catch {\n        return false;\n    }\n}\n"]}

package/lib-mjs/imageEdit/utils/checkEditInfoState.d.ts

@@ -0,0 +1,41 @@
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * State of an edit info object for image editing.
+ * It is returned by checkEditInfoState() function
+ */
+export declare type ImageEditInfoState = 
+/**
+ * Invalid edit info. It means the given edit info object is either null,
+ * or not all its member are of correct type
+ */
+'Invalid'
+/**
+ * The edit info shows that it is only potentially edited by resizing action.
+ * Image is not rotated or cropped, or event not changed at all.
+ */
+ | 'ResizeOnly'
+/**
+ * When compare with another edit info, this value can be returned when both current
+ * edit info and the other one are not been rotated, and they have same cropping
+ * percentages. So that they can share the same image src, only width and height
+ * need to be adjusted.
+ */
+ | 'SameWithLast'
+/**
+ * When this value is returned, it means the image is edited by either cropping or
+ * rotation, or both. Image source can't be reused, need to generate a new image src
+ * data uri.
+ */
+ | 'FullyChanged';
+/**
+ * @internal
+ * Check the state of an edit info
+ * @param editInfo The edit info to check
+ * @param compareTo An optional edit info to compare to
+ * @returns If the source edit info is not valid (wrong type, missing field, ...), returns Invalid.
+ * If the source edit info doesn't contain any rotation or cropping, returns ResizeOnly
+ * If the compare edit info exists, and both of them don't contain rotation, and the have same cropping values,
+ * returns SameWithLast. Otherwise, returns FullyChanged
+ */
+export declare function checkEditInfoState(editInfo: ImageMetadataFormat, compareTo?: ImageMetadataFormat): ImageEditInfoState;

package/lib-mjs/imageEdit/utils/checkEditInfoState.js

@@ -0,0 +1,50 @@
+import { __read, __spreadArray } from "tslib";
+var RESIZE_KEYS = ['widthPx', 'heightPx'];
+var ROTATE_KEYS = ['angleRad'];
+var CROP_KEYS = [
+    'leftPercent',
+    'rightPercent',
+    'topPercent',
+    'bottomPercent',
+];
+var ROTATE_CROP_KEYS = __spreadArray(__spreadArray([], __read(ROTATE_KEYS), false), __read(CROP_KEYS), false);
+var ALL_KEYS = __spreadArray(__spreadArray([], __read(ROTATE_CROP_KEYS), false), __read(RESIZE_KEYS), false);
+/**
+ * @internal
+ * Check the state of an edit info
+ * @param editInfo The edit info to check
+ * @param compareTo An optional edit info to compare to
+ * @returns If the source edit info is not valid (wrong type, missing field, ...), returns Invalid.
+ * If the source edit info doesn't contain any rotation or cropping, returns ResizeOnly
+ * If the compare edit info exists, and both of them don't contain rotation, and the have same cropping values,
+ * returns SameWithLast. Otherwise, returns FullyChanged
+ */
+export function checkEditInfoState(editInfo, compareTo) {
+    if (!editInfo || !editInfo.src || ALL_KEYS.some(function (key) { return !isNumber(editInfo[key]); })) {
+        return 'Invalid';
+    }
+    else if (ROTATE_CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
+        !editInfo.flippedHorizontal &&
+        !editInfo.flippedVertical &&
+        (!compareTo || (compareTo && editInfo.angleRad === compareTo.angleRad))) {
+        return 'ResizeOnly';
+    }
+    else if (compareTo &&
+        ROTATE_KEYS.every(function (key) { return areSameNumber(editInfo[key], 0); }) &&
+        ROTATE_KEYS.every(function (key) { return areSameNumber(compareTo[key], 0); }) &&
+        CROP_KEYS.every(function (key) { return areSameNumber(editInfo[key], compareTo[key]); }) &&
+        compareTo.flippedHorizontal === editInfo.flippedHorizontal &&
+        compareTo.flippedVertical === editInfo.flippedVertical) {
+        return 'SameWithLast';
+    }
+    else {
+        return 'FullyChanged';
+    }
+}
+function isNumber(o) {
+    return typeof o === 'number';
+}
+function areSameNumber(n1, n2) {
+    return n1 != undefined && n2 != undefined && Math.abs(n1 - n2) < 1e-3;
+}
+//# sourceMappingURL=checkEditInfoState.js.map

package/lib-mjs/imageEdit/utils/checkEditInfoState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkEditInfoState.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/checkEditInfoState.ts"],"names":[],"mappings":";AAOA,IAAM,WAAW,GAAwC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AACjF,IAAM,WAAW,GAAwC,CAAC,UAAU,CAAC,CAAC;AACtE,IAAM,SAAS,GAAsC;IACjD,aAAa;IACb,cAAc;IACd,YAAY;IACZ,eAAe;CAClB,CAAC;AACF,IAAM,gBAAgB,0CACf,WAAW,kBACX,SAAS,SACf,CAAC;AACF,IAAM,QAAQ,0CAAO,gBAAgB,kBAAK,WAAW,SAAC,CAAC;AAmCvD;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAC9B,QAA6B,EAC7B,SAA+B;IAE/B,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAxB,CAAwB,CAAC,EAAE;QAC9E,OAAO,SAAS,CAAC;KACpB;SAAM,IACH,gBAAgB,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAA/B,CAA+B,CAAC;QAC9D,CAAC,QAAQ,CAAC,iBAAiB;QAC3B,CAAC,QAAQ,CAAC,eAAe;QACzB,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,CAAC,CAAC,EACzE;QACE,OAAO,YAAY,CAAC;KACvB;SAAM,IACH,SAAS;QACT,WAAW,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAA/B,CAA+B,CAAC;QACzD,WAAW,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAhC,CAAgC,CAAC;QAC1D,SAAS,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC,EAA5C,CAA4C,CAAC;QACpE,SAAS,CAAC,iBAAiB,KAAK,QAAQ,CAAC,iBAAiB;QAC1D,SAAS,CAAC,eAAe,KAAK,QAAQ,CAAC,eAAe,EACxD;QACE,OAAO,cAAc,CAAC;KACzB;SAAM;QACH,OAAO,cAAc,CAAC;KACzB;AACL,CAAC;AAED,SAAS,QAAQ,CAAC,CAAM;IACpB,OAAO,OAAO,CAAC,KAAK,QAAQ,CAAC;AACjC,CAAC;AAED,SAAS,aAAa,CAAC,EAAW,EAAE,EAAW;IAC3C,OAAO,EAAE,IAAI,SAAS,IAAI,EAAE,IAAI,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC;AAC1E,CAAC","sourcesContent":["import type {\n    ImageCropMetadataFormat,\n    ImageMetadataFormat,\n    ImageResizeMetadataFormat,\n    ImageRotateMetadataFormat,\n} from 'roosterjs-content-model-types';\n\nconst RESIZE_KEYS: (keyof ImageResizeMetadataFormat)[] = ['widthPx', 'heightPx'];\nconst ROTATE_KEYS: (keyof ImageRotateMetadataFormat)[] = ['angleRad'];\nconst CROP_KEYS: (keyof ImageCropMetadataFormat)[] = [\n    'leftPercent',\n    'rightPercent',\n    'topPercent',\n    'bottomPercent',\n];\nconst ROTATE_CROP_KEYS: (keyof ImageRotateMetadataFormat | keyof ImageCropMetadataFormat)[] = [\n    ...ROTATE_KEYS,\n    ...CROP_KEYS,\n];\nconst ALL_KEYS = [...ROTATE_CROP_KEYS, ...RESIZE_KEYS];\n\n/**\n * @internal\n * State of an edit info object for image editing.\n * It is returned by checkEditInfoState() function\n */\nexport type ImageEditInfoState =\n    /**\n     * Invalid edit info. It means the given edit info object is either null,\n     * or not all its member are of correct type\n     */\n    | 'Invalid'\n\n    /**\n     * The edit info shows that it is only potentially edited by resizing action.\n     * Image is not rotated or cropped, or event not changed at all.\n     */\n    | 'ResizeOnly'\n\n    /**\n     * When compare with another edit info, this value can be returned when both current\n     * edit info and the other one are not been rotated, and they have same cropping\n     * percentages. So that they can share the same image src, only width and height\n     * need to be adjusted.\n     */\n    | 'SameWithLast'\n\n    /**\n     * When this value is returned, it means the image is edited by either cropping or\n     * rotation, or both. Image source can't be reused, need to generate a new image src\n     * data uri.\n     */\n    | 'FullyChanged';\n\n/**\n * @internal\n * Check the state of an edit info\n * @param editInfo The edit info to check\n * @param compareTo An optional edit info to compare to\n * @returns If the source edit info is not valid (wrong type, missing field, ...), returns Invalid.\n * If the source edit info doesn't contain any rotation or cropping, returns ResizeOnly\n * If the compare edit info exists, and both of them don't contain rotation, and the have same cropping values,\n * returns SameWithLast. Otherwise, returns FullyChanged\n */\nexport function checkEditInfoState(\n    editInfo: ImageMetadataFormat,\n    compareTo?: ImageMetadataFormat\n): ImageEditInfoState {\n    if (!editInfo || !editInfo.src || ALL_KEYS.some(key => !isNumber(editInfo[key]))) {\n        return 'Invalid';\n    } else if (\n        ROTATE_CROP_KEYS.every(key => areSameNumber(editInfo[key], 0)) &&\n        !editInfo.flippedHorizontal &&\n        !editInfo.flippedVertical &&\n        (!compareTo || (compareTo && editInfo.angleRad === compareTo.angleRad))\n    ) {\n        return 'ResizeOnly';\n    } else if (\n        compareTo &&\n        ROTATE_KEYS.every(key => areSameNumber(editInfo[key], 0)) &&\n        ROTATE_KEYS.every(key => areSameNumber(compareTo[key], 0)) &&\n        CROP_KEYS.every(key => areSameNumber(editInfo[key], compareTo[key])) &&\n        compareTo.flippedHorizontal === editInfo.flippedHorizontal &&\n        compareTo.flippedVertical === editInfo.flippedVertical\n    ) {\n        return 'SameWithLast';\n    } else {\n        return 'FullyChanged';\n    }\n}\n\nfunction isNumber(o: any): o is number {\n    return typeof o === 'number';\n}\n\nfunction areSameNumber(n1?: number, n2?: number) {\n    return n1 != undefined && n2 != undefined && Math.abs(n1 - n2) < 1e-3;\n}\n"]}

package/lib-mjs/imageEdit/utils/createImageWrapper.d.ts

@@ -0,0 +1,18 @@
+import type { IEditor, ImageEditOperation, ImageMetadataFormat } from 'roosterjs-content-model-types';
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
+/**
+ * @internal
+ */
+export interface WrapperElements {
+    wrapper: HTMLSpanElement;
+    shadowSpan: HTMLElement;
+    imageClone: HTMLImageElement;
+    resizers: HTMLDivElement[];
+    rotators: HTMLDivElement[];
+    croppers: HTMLDivElement[];
+}
+/**
+ * @internal
+ */
+export declare function createImageWrapper(editor: IEditor, image: HTMLImageElement, imageSpan: HTMLSpanElement, options: ImageEditOptions, editInfo: ImageMetadataFormat, htmlOptions: ImageHtmlOptions, operation?: ImageEditOperation): WrapperElements;

package/lib-mjs/imageEdit/utils/createImageWrapper.js

@@ -0,0 +1,83 @@
+import { createImageCropper } from '../Cropper/createImageCropper';
+import { createImageResizer } from '../Resizer/createImageResizer';
+import { createImageRotator } from '../Rotator/createImageRotator';
+/**
+ * @internal
+ */
+export function createImageWrapper(editor, image, imageSpan, options, editInfo, htmlOptions, operation) {
+    var imageClone = cloneImage(image, editInfo);
+    var doc = editor.getDocument();
+    var rotators = [];
+    if (!options.disableRotate && operation === 'rotate') {
+        rotators = createImageRotator(doc, htmlOptions);
+    }
+    var resizers = [];
+    if (operation === 'resize') {
+        resizers = createImageResizer(doc);
+    }
+    var croppers = [];
+    if (operation === 'crop') {
+        croppers = createImageCropper(doc);
+    }
+    var wrapper = createWrapper(editor, imageClone, options, editInfo, resizers, rotators, croppers);
+    var shadowSpan = createShadowSpan(wrapper, imageSpan);
+    return { wrapper: wrapper, shadowSpan: shadowSpan, imageClone: imageClone, resizers: resizers, rotators: rotators, croppers: croppers };
+}
+var createShadowSpan = function (wrapper, imageSpan) {
+    var shadowRoot = imageSpan.attachShadow({
+        mode: 'open',
+    });
+    imageSpan.style.verticalAlign = 'bottom';
+    shadowRoot.appendChild(wrapper);
+    return imageSpan;
+};
+var createWrapper = function (editor, image, options, editInfo, resizers, rotators, cropper) {
+    var _a;
+    var doc = editor.getDocument();
+    var wrapper = doc.createElement('span');
+    var imageBox = doc.createElement('div');
+    imageBox.setAttribute("style", "position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);");
+    imageBox.appendChild(image);
+    wrapper.setAttribute('style', "max-width: 100%; position: relative; display: inline-flex; font-size: 24px; margin: 0px; transform: rotate(" + ((_a = editInfo.angleRad) !== null && _a !== void 0 ? _a : 0) + "rad); text-align: left;");
+    wrapper.style.display = editor.getEnvironment().isSafari ? 'inline-block' : 'inline-flex';
+    var border = createBorder(editor, options.borderColor);
+    wrapper.appendChild(imageBox);
+    wrapper.appendChild(border);
+    wrapper.style.userSelect = 'none';
+    if (resizers && (resizers === null || resizers === void 0 ? void 0 : resizers.length) > 0) {
+        resizers.forEach(function (resizer) {
+            wrapper.appendChild(resizer);
+        });
+    }
+    if (rotators && rotators.length > 0) {
+        rotators.forEach(function (r) {
+            wrapper.appendChild(r);
+        });
+    }
+    if (cropper && cropper.length > 0) {
+        cropper.forEach(function (c) {
+            wrapper.appendChild(c);
+        });
+    }
+    return wrapper;
+};
+var createBorder = function (editor, borderColor) {
+    var doc = editor.getDocument();
+    var resizeBorder = doc.createElement('div');
+    resizeBorder.setAttribute("style", "position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px " + borderColor + ";pointer-events:none;");
+    return resizeBorder;
+};
+var cloneImage = function (image, editInfo) {
+    var imageClone = image.cloneNode(true);
+    imageClone.style.removeProperty('transform');
+    if (editInfo.src) {
+        imageClone.src = editInfo.src;
+        imageClone.removeAttribute('id');
+        imageClone.style.removeProperty('max-width');
+        imageClone.style.removeProperty('max-height');
+        imageClone.style.width = editInfo.widthPx + 'px';
+        imageClone.style.height = editInfo.heightPx + 'px';
+    }
+    return imageClone;
+};
+//# sourceMappingURL=createImageWrapper.js.map

package/lib-mjs/imageEdit/utils/createImageWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/createImageWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { createImageCropper } from '../Cropper/createImageCropper';\nimport { createImageResizer } from '../Resizer/createImageResizer';\nimport { createImageRotator } from '../Rotator/createImageRotator';\n\nimport type {\n    IEditor,\n    ImageEditOperation,\n    ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\n\n/**\n * @internal\n */\nexport interface WrapperElements {\n    wrapper: HTMLSpanElement;\n    shadowSpan: HTMLElement;\n    imageClone: HTMLImageElement;\n    resizers: HTMLDivElement[];\n    rotators: HTMLDivElement[];\n    croppers: HTMLDivElement[];\n}\n\n/**\n * @internal\n */\nexport function createImageWrapper(\n    editor: IEditor,\n    image: HTMLImageElement,\n    imageSpan: HTMLSpanElement,\n    options: ImageEditOptions,\n    editInfo: ImageMetadataFormat,\n    htmlOptions: ImageHtmlOptions,\n    operation?: ImageEditOperation\n): WrapperElements {\n    const imageClone = cloneImage(image, editInfo);\n    const doc = editor.getDocument();\n\n    let rotators: HTMLDivElement[] = [];\n    if (!options.disableRotate && operation === 'rotate') {\n        rotators = createImageRotator(doc, htmlOptions);\n    }\n    let resizers: HTMLDivElement[] = [];\n    if (operation === 'resize') {\n        resizers = createImageResizer(doc);\n    }\n\n    let croppers: HTMLDivElement[] = [];\n    if (operation === 'crop') {\n        croppers = createImageCropper(doc);\n    }\n\n    const wrapper = createWrapper(\n        editor,\n        imageClone,\n        options,\n        editInfo,\n        resizers,\n        rotators,\n        croppers\n    );\n    const shadowSpan = createShadowSpan(wrapper, imageSpan);\n    return { wrapper, shadowSpan, imageClone, resizers, rotators, croppers };\n}\n\nconst createShadowSpan = (wrapper: HTMLElement, imageSpan: HTMLSpanElement) => {\n    const shadowRoot = imageSpan.attachShadow({\n        mode: 'open',\n    });\n    imageSpan.style.verticalAlign = 'bottom';\n    shadowRoot.appendChild(wrapper);\n    return imageSpan;\n};\n\nconst createWrapper = (\n    editor: IEditor,\n    image: HTMLImageElement,\n    options: ImageEditOptions,\n    editInfo: ImageMetadataFormat,\n    resizers?: HTMLDivElement[],\n    rotators?: HTMLDivElement[],\n    cropper?: HTMLDivElement[]\n) => {\n    const doc = editor.getDocument();\n    const wrapper = doc.createElement('span');\n    const imageBox = doc.createElement('div');\n\n    imageBox.setAttribute(\n        `style`,\n        `position:relative;width:100%;height:100%;overflow:hidden;transform:scale(1);`\n    );\n    imageBox.appendChild(image);\n    wrapper.setAttribute(\n        'style',\n        `max-width: 100%; position: relative; display: inline-flex; font-size: 24px; margin: 0px; transform: rotate(${\n            editInfo.angleRad ?? 0\n        }rad); text-align: left;`\n    );\n    wrapper.style.display = editor.getEnvironment().isSafari ? 'inline-block' : 'inline-flex';\n\n    const border = createBorder(editor, options.borderColor);\n    wrapper.appendChild(imageBox);\n    wrapper.appendChild(border);\n    wrapper.style.userSelect = 'none';\n\n    if (resizers && resizers?.length > 0) {\n        resizers.forEach(resizer => {\n            wrapper.appendChild(resizer);\n        });\n    }\n    if (rotators && rotators.length > 0) {\n        rotators.forEach(r => {\n            wrapper.appendChild(r);\n        });\n    }\n    if (cropper && cropper.length > 0) {\n        cropper.forEach(c => {\n            wrapper.appendChild(c);\n        });\n    }\n\n    return wrapper;\n};\n\nconst createBorder = (editor: IEditor, borderColor?: string) => {\n    const doc = editor.getDocument();\n    const resizeBorder = doc.createElement('div');\n    resizeBorder.setAttribute(\n        `style`,\n        `position:absolute;left:0;right:0;top:0;bottom:0;border:solid 2px ${borderColor};pointer-events:none;`\n    );\n    return resizeBorder;\n};\n\nconst cloneImage = (image: HTMLImageElement, editInfo: ImageMetadataFormat) => {\n    const imageClone = image.cloneNode(true) as HTMLImageElement;\n    imageClone.style.removeProperty('transform');\n    if (editInfo.src) {\n        imageClone.src = editInfo.src;\n        imageClone.removeAttribute('id');\n        imageClone.style.removeProperty('max-width');\n        imageClone.style.removeProperty('max-height');\n        imageClone.style.width = editInfo.widthPx + 'px';\n        imageClone.style.height = editInfo.heightPx + 'px';\n    }\n    return imageClone;\n};\n"]}

package/lib-mjs/imageEdit/utils/doubleCheckResize.d.ts

@@ -0,0 +1,12 @@
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Double check if the changed size can satisfy current width of container.
+ * When resize an image and preserve ratio, its size can be limited by the size of container.
+ * So we need to check the actual size and calculate the size again
+ * @param editInfo Edit info of the image
+ * @param preserveRatio Whether w/h ratio need to be preserved
+ * @param actualWidth Actual width of the image after resize
+ * @param actualHeight Actual height of the image after resize
+ */
+export declare function doubleCheckResize(editInfo: ImageMetadataFormat, preserveRatio: boolean, actualWidth: number, actualHeight: number): void;

package/lib-mjs/imageEdit/utils/doubleCheckResize.js

@@ -0,0 +1,32 @@
+/**
+ * @internal
+ * Double check if the changed size can satisfy current width of container.
+ * When resize an image and preserve ratio, its size can be limited by the size of container.
+ * So we need to check the actual size and calculate the size again
+ * @param editInfo Edit info of the image
+ * @param preserveRatio Whether w/h ratio need to be preserved
+ * @param actualWidth Actual width of the image after resize
+ * @param actualHeight Actual height of the image after resize
+ */
+export function doubleCheckResize(editInfo, preserveRatio, actualWidth, actualHeight) {
+    var widthPx = editInfo.widthPx, heightPx = editInfo.heightPx;
+    if (widthPx == undefined || heightPx == undefined) {
+        return;
+    }
+    var ratio = heightPx > 0 ? widthPx / heightPx : 0;
+    actualWidth = Math.floor(actualWidth);
+    actualHeight = Math.floor(actualHeight);
+    widthPx = Math.floor(widthPx);
+    heightPx = Math.floor(heightPx);
+    editInfo.widthPx = actualWidth;
+    editInfo.heightPx = actualHeight;
+    if (preserveRatio && ratio > 0 && (widthPx !== actualWidth || heightPx !== actualHeight)) {
+        if (actualWidth < widthPx) {
+            editInfo.heightPx = actualWidth / ratio;
+        }
+        else {
+            editInfo.widthPx = actualHeight * ratio;
+        }
+    }
+}
+//# sourceMappingURL=doubleCheckResize.js.map

package/lib-mjs/imageEdit/utils/doubleCheckResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"doubleCheckResize.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/doubleCheckResize.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,MAAM,UAAU,iBAAiB,CAC7B,QAA6B,EAC7B,aAAsB,EACtB,WAAmB,EACnB,YAAoB;IAEd,IAAA,OAAO,GAAe,QAAQ,QAAvB,EAAE,QAAQ,GAAK,QAAQ,SAAb,CAAc;IACrC,IAAI,OAAO,IAAI,SAAS,IAAI,QAAQ,IAAI,SAAS,EAAE;QAC/C,OAAO;KACV;IACD,IAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpD,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;IACtC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACxC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEhC,QAAQ,CAAC,OAAO,GAAG,WAAW,CAAC;IAC/B,QAAQ,CAAC,QAAQ,GAAG,YAAY,CAAC;IAEjC,IAAI,aAAa,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,QAAQ,KAAK,YAAY,CAAC,EAAE;QACtF,IAAI,WAAW,GAAG,OAAO,EAAE;YACvB,QAAQ,CAAC,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAC;SAC3C;aAAM;YACH,QAAQ,CAAC,OAAO,GAAG,YAAY,GAAG,KAAK,CAAC;SAC3C;KACJ;AACL,CAAC","sourcesContent":["import type { ImageMetadataFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Double check if the changed size can satisfy current width of container.\n * When resize an image and preserve ratio, its size can be limited by the size of container.\n * So we need to check the actual size and calculate the size again\n * @param editInfo Edit info of the image\n * @param preserveRatio Whether w/h ratio need to be preserved\n * @param actualWidth Actual width of the image after resize\n * @param actualHeight Actual height of the image after resize\n */\nexport function doubleCheckResize(\n    editInfo: ImageMetadataFormat,\n    preserveRatio: boolean,\n    actualWidth: number,\n    actualHeight: number\n) {\n    let { widthPx, heightPx } = editInfo;\n    if (widthPx == undefined || heightPx == undefined) {\n        return;\n    }\n    const ratio = heightPx > 0 ? widthPx / heightPx : 0;\n\n    actualWidth = Math.floor(actualWidth);\n    actualHeight = Math.floor(actualHeight);\n    widthPx = Math.floor(widthPx);\n    heightPx = Math.floor(heightPx);\n\n    editInfo.widthPx = actualWidth;\n    editInfo.heightPx = actualHeight;\n\n    if (preserveRatio && ratio > 0 && (widthPx !== actualWidth || heightPx !== actualHeight)) {\n        if (actualWidth < widthPx) {\n            editInfo.heightPx = actualWidth / ratio;\n        } else {\n            editInfo.widthPx = actualHeight * ratio;\n        }\n    }\n}\n"]}

package/lib-mjs/imageEdit/utils/generateDataURL.d.ts

@@ -0,0 +1,13 @@
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Generate new dataURL from an image and edit info
+ * @param image The image to generate data URL from. It is supposed to have original src loaded
+ * @param editInfo Edit info of the image
+ * @returns A BASE64 encoded string with image prefix that represents the content of the generated image.
+ * If there are rotate/crop/resize info in the edit info, the generated image will also reflect the result.
+ * It is possible to throw exception since the original image may not be able to read its content from
+ * the code, so better check canRegenerateImage() of the image first.
+ * @throws Exception when fail to generate dataURL from canvas
+ */
+export declare function generateDataURL(image: HTMLImageElement, editInfo: ImageMetadataFormat): string;

package/lib-mjs/imageEdit/utils/generateDataURL.js

@@ -0,0 +1,46 @@
+import { getGeneratedImageSize } from './generateImageSize';
+/**
+ * @internal
+ * Generate new dataURL from an image and edit info
+ * @param image The image to generate data URL from. It is supposed to have original src loaded
+ * @param editInfo Edit info of the image
+ * @returns A BASE64 encoded string with image prefix that represents the content of the generated image.
+ * If there are rotate/crop/resize info in the edit info, the generated image will also reflect the result.
+ * It is possible to throw exception since the original image may not be able to read its content from
+ * the code, so better check canRegenerateImage() of the image first.
+ * @throws Exception when fail to generate dataURL from canvas
+ */
+export function generateDataURL(image, editInfo) {
+    var generatedImageSize = getGeneratedImageSize(editInfo);
+    if (!generatedImageSize) {
+        return '';
+    }
+    var angleRad = editInfo.angleRad, widthPx = editInfo.widthPx, heightPx = editInfo.heightPx, bottomPercent = editInfo.bottomPercent, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, naturalWidth = editInfo.naturalWidth, naturalHeight = editInfo.naturalHeight;
+    var angle = angleRad || 0;
+    var left = leftPercent || 0;
+    var right = rightPercent || 0;
+    var top = topPercent || 0;
+    var bottom = bottomPercent || 0;
+    var nHeight = naturalHeight || image.naturalHeight;
+    var nWidth = naturalWidth || image.naturalHeight;
+    var width = widthPx || image.clientWidth;
+    var height = heightPx || image.clientHeight;
+    var imageWidth = nWidth * (1 - left - right);
+    var imageHeight = nHeight * (1 - top - bottom);
+    // Adjust the canvas size and scaling for high display resolution
+    var devicePixelRatio = window.devicePixelRatio || 1;
+    var canvas = document.createElement('canvas');
+    var targetWidth = generatedImageSize.targetWidth, targetHeight = generatedImageSize.targetHeight;
+    canvas.width = targetWidth * devicePixelRatio;
+    canvas.height = targetHeight * devicePixelRatio;
+    var context = canvas.getContext('2d');
+    if (context) {
+        context.scale(devicePixelRatio, devicePixelRatio);
+        context.translate(targetWidth / 2, targetHeight / 2);
+        context.rotate(angle);
+        context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);
+        context.drawImage(image, nWidth * left, nHeight * top, imageWidth, imageHeight, -width / 2, -height / 2, width, height);
+    }
+    return canvas.toDataURL('image/png', 1.0);
+}
+//# sourceMappingURL=generateDataURL.js.map

package/lib-mjs/imageEdit/utils/generateDataURL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateDataURL.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateDataURL.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAG5D;;;;;;;;;;GAUG;AACH,MAAM,UAAU,eAAe,CAAC,KAAuB,EAAE,QAA6B;IAClF,IAAM,kBAAkB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAC3D,IAAI,CAAC,kBAAkB,EAAE;QACrB,OAAO,EAAE,CAAC;KACb;IAGG,IAAA,QAAQ,GASR,QAAQ,SATA,EACR,OAAO,GAQP,QAAQ,QARD,EACP,QAAQ,GAOR,QAAQ,SAPA,EACR,aAAa,GAMb,QAAQ,cANK,EACb,WAAW,GAKX,QAAQ,YALG,EACX,YAAY,GAIZ,QAAQ,aAJI,EACZ,UAAU,GAGV,QAAQ,WAHE,EACV,YAAY,GAEZ,QAAQ,aAFI,EACZ,aAAa,GACb,QAAQ,cADK,CACJ;IACb,IAAM,KAAK,GAAG,QAAQ,IAAI,CAAC,CAAC;IAC5B,IAAM,IAAI,GAAG,WAAW,IAAI,CAAC,CAAC;IAC9B,IAAM,KAAK,GAAG,YAAY,IAAI,CAAC,CAAC;IAChC,IAAM,GAAG,GAAG,UAAU,IAAI,CAAC,CAAC;IAC5B,IAAM,MAAM,GAAG,aAAa,IAAI,CAAC,CAAC;IAClC,IAAM,OAAO,GAAG,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC;IACrD,IAAM,MAAM,GAAG,YAAY,IAAI,KAAK,CAAC,aAAa,CAAC;IACnD,IAAM,KAAK,GAAG,OAAO,IAAI,KAAK,CAAC,WAAW,CAAC;IAC3C,IAAM,MAAM,GAAG,QAAQ,IAAI,KAAK,CAAC,YAAY,CAAC;IAE9C,IAAM,UAAU,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;IAC/C,IAAM,WAAW,GAAG,OAAO,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC;IAEjD,iEAAiE;IACjE,IAAM,gBAAgB,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC;IACtD,IAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACxC,IAAA,WAAW,GAAmB,kBAAkB,YAArC,EAAE,YAAY,GAAK,kBAAkB,aAAvB,CAAwB;IACzD,MAAM,CAAC,KAAK,GAAG,WAAW,GAAG,gBAAgB,CAAC;IAC9C,MAAM,CAAC,MAAM,GAAG,YAAY,GAAG,gBAAgB,CAAC;IAEhD,IAAM,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,OAAO,EAAE;QACT,OAAO,CAAC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;QAClD,OAAO,CAAC,SAAS,CAAC,WAAW,GAAG,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,CAAC;QACrD,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACtB,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtF,OAAO,CAAC,SAAS,CACb,KAAK,EACL,MAAM,GAAG,IAAI,EACb,OAAO,GAAG,GAAG,EACb,UAAU,EACV,WAAW,EACX,CAAC,KAAK,GAAG,CAAC,EACV,CAAC,MAAM,GAAG,CAAC,EACX,KAAK,EACL,MAAM,CACT,CAAC;KACL;IAED,OAAO,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AAC9C,CAAC","sourcesContent":["import { getGeneratedImageSize } from './generateImageSize';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Generate new dataURL from an image and edit info\n * @param image The image to generate data URL from. It is supposed to have original src loaded\n * @param editInfo Edit info of the image\n * @returns A BASE64 encoded string with image prefix that represents the content of the generated image.\n * If there are rotate/crop/resize info in the edit info, the generated image will also reflect the result.\n * It is possible to throw exception since the original image may not be able to read its content from\n * the code, so better check canRegenerateImage() of the image first.\n * @throws Exception when fail to generate dataURL from canvas\n */\nexport function generateDataURL(image: HTMLImageElement, editInfo: ImageMetadataFormat): string {\n    const generatedImageSize = getGeneratedImageSize(editInfo);\n    if (!generatedImageSize) {\n        return '';\n    }\n\n    const {\n        angleRad,\n        widthPx,\n        heightPx,\n        bottomPercent,\n        leftPercent,\n        rightPercent,\n        topPercent,\n        naturalWidth,\n        naturalHeight,\n    } = editInfo;\n    const angle = angleRad || 0;\n    const left = leftPercent || 0;\n    const right = rightPercent || 0;\n    const top = topPercent || 0;\n    const bottom = bottomPercent || 0;\n    const nHeight = naturalHeight || image.naturalHeight;\n    const nWidth = naturalWidth || image.naturalHeight;\n    const width = widthPx || image.clientWidth;\n    const height = heightPx || image.clientHeight;\n\n    const imageWidth = nWidth * (1 - left - right);\n    const imageHeight = nHeight * (1 - top - bottom);\n\n    // Adjust the canvas size and scaling for high display resolution\n    const devicePixelRatio = window.devicePixelRatio || 1;\n    const canvas = document.createElement('canvas');\n    const { targetWidth, targetHeight } = generatedImageSize;\n    canvas.width = targetWidth * devicePixelRatio;\n    canvas.height = targetHeight * devicePixelRatio;\n\n    const context = canvas.getContext('2d');\n    if (context) {\n        context.scale(devicePixelRatio, devicePixelRatio);\n        context.translate(targetWidth / 2, targetHeight / 2);\n        context.rotate(angle);\n        context.scale(editInfo.flippedHorizontal ? -1 : 1, editInfo.flippedVertical ? -1 : 1);\n        context.drawImage(\n            image,\n            nWidth * left,\n            nHeight * top,\n            imageWidth,\n            imageHeight,\n            -width / 2,\n            -height / 2,\n            width,\n            height\n        );\n    }\n\n    return canvas.toDataURL('image/png', 1.0);\n}\n"]}

package/lib-mjs/imageEdit/utils/generateImageSize.d.ts

@@ -0,0 +1,15 @@
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+import type { GeneratedImageSize } from '../types/GeneratedImageSize';
+/**
+ * @internal
+ * Calculate the target size of an image.
+ * For image that is not rotated, target size is the same with resizing/cropping size.
+ * For image that is rotated, target size is calculated from resizing/cropping size and its rotate angle
+ * Say an image is resized to 100w*100h, cropped 25% on each side, then rotated 45deg, so that cropped size
+ * will be (both height and width) 100*(1-0.25-0,25) = 50px, then final image size will be 50*sqrt(2) = 71px
+ * @param editInfo The edit info to calculate size from
+ * @param beforeCrop True to calculate the full size of original image before crop, false to calculate the size
+ * after crop
+ * @returns A GeneratedImageSize object which contains original, visible and target target width and height of the image
+ */
+export declare function getGeneratedImageSize(editInfo: ImageMetadataFormat, beforeCrop?: boolean): GeneratedImageSize | undefined;

package/lib-mjs/imageEdit/utils/generateImageSize.js

@@ -0,0 +1,42 @@
+/**
+ * @internal
+ * Calculate the target size of an image.
+ * For image that is not rotated, target size is the same with resizing/cropping size.
+ * For image that is rotated, target size is calculated from resizing/cropping size and its rotate angle
+ * Say an image is resized to 100w*100h, cropped 25% on each side, then rotated 45deg, so that cropped size
+ * will be (both height and width) 100*(1-0.25-0,25) = 50px, then final image size will be 50*sqrt(2) = 71px
+ * @param editInfo The edit info to calculate size from
+ * @param beforeCrop True to calculate the full size of original image before crop, false to calculate the size
+ * after crop
+ * @returns A GeneratedImageSize object which contains original, visible and target target width and height of the image
+ */
+export function getGeneratedImageSize(editInfo, beforeCrop) {
+    var width = editInfo.widthPx, height = editInfo.heightPx, angleRad = editInfo.angleRad, left = editInfo.leftPercent, right = editInfo.rightPercent, top = editInfo.topPercent, bottom = editInfo.bottomPercent;
+    if (height == undefined ||
+        width == undefined ||
+        left == undefined ||
+        right == undefined ||
+        top == undefined ||
+        bottom == undefined) {
+        return;
+    }
+    var angle = angleRad !== null && angleRad !== void 0 ? angleRad : 0;
+    // Original image size before crop and rotate
+    var originalWidth = width / (1 - left - right);
+    var originalHeight = height / (1 - top - bottom);
+    // Visible size
+    var visibleWidth = beforeCrop ? originalWidth : width;
+    var visibleHeight = beforeCrop ? originalHeight : height;
+    // Target size after crop and rotate
+    var targetWidth = Math.abs(visibleWidth * Math.cos(angle)) + Math.abs(visibleHeight * Math.sin(angle));
+    var targetHeight = Math.abs(visibleWidth * Math.sin(angle)) + Math.abs(visibleHeight * Math.cos(angle));
+    return {
+        targetWidth: targetWidth,
+        targetHeight: targetHeight,
+        originalWidth: originalWidth,
+        originalHeight: originalHeight,
+        visibleWidth: visibleWidth,
+        visibleHeight: visibleHeight,
+    };
+}
+//# sourceMappingURL=generateImageSize.js.map

package/lib-mjs/imageEdit/utils/generateImageSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateImageSize.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/generateImageSize.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,qBAAqB,CACjC,QAA6B,EAC7B,UAAoB;IAGhB,IAAS,KAAK,GAOd,QAAQ,QAPM,EACJ,MAAM,GAMhB,QAAQ,SANQ,EAChB,QAAQ,GAKR,QAAQ,SALA,EACK,IAAI,GAIjB,QAAQ,YAJS,EACH,KAAK,GAGnB,QAAQ,aAHW,EACP,GAAG,GAEf,QAAQ,WAFO,EACA,MAAM,GACrB,QAAQ,cADa,CACZ;IAEb,IACI,MAAM,IAAI,SAAS;QACnB,KAAK,IAAI,SAAS;QAClB,IAAI,IAAI,SAAS;QACjB,KAAK,IAAI,SAAS;QAClB,GAAG,IAAI,SAAS;QAChB,MAAM,IAAI,SAAS,EACrB;QACE,OAAO;KACV;IAED,IAAM,KAAK,GAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,CAAC;IAE5B,6CAA6C;IAC7C,IAAM,aAAa,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;IACjD,IAAM,cAAc,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC;IAEnD,eAAe;IACf,IAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC;IACxD,IAAM,aAAa,GAAG,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,oCAAoC;IACpC,IAAM,WAAW,GACb,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IACzF,IAAM,YAAY,GACd,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzF,OAAO;QACH,WAAW,aAAA;QACX,YAAY,cAAA;QACZ,aAAa,eAAA;QACb,cAAc,gBAAA;QACd,YAAY,cAAA;QACZ,aAAa,eAAA;KAChB,CAAC;AACN,CAAC","sourcesContent":["import type { ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport type { GeneratedImageSize } from '../types/GeneratedImageSize';\n\n/**\n * @internal\n * Calculate the target size of an image.\n * For image that is not rotated, target size is the same with resizing/cropping size.\n * For image that is rotated, target size is calculated from resizing/cropping size and its rotate angle\n * Say an image is resized to 100w*100h, cropped 25% on each side, then rotated 45deg, so that cropped size\n * will be (both height and width) 100*(1-0.25-0,25) = 50px, then final image size will be 50*sqrt(2) = 71px\n * @param editInfo The edit info to calculate size from\n * @param beforeCrop True to calculate the full size of original image before crop, false to calculate the size\n * after crop\n * @returns A GeneratedImageSize object which contains original, visible and target target width and height of the image\n */\nexport function getGeneratedImageSize(\n    editInfo: ImageMetadataFormat,\n    beforeCrop?: boolean\n): GeneratedImageSize | undefined {\n    const {\n        widthPx: width,\n        heightPx: height,\n        angleRad,\n        leftPercent: left,\n        rightPercent: right,\n        topPercent: top,\n        bottomPercent: bottom,\n    } = editInfo;\n\n    if (\n        height == undefined ||\n        width == undefined ||\n        left == undefined ||\n        right == undefined ||\n        top == undefined ||\n        bottom == undefined\n    ) {\n        return;\n    }\n\n    const angle = angleRad ?? 0;\n\n    // Original image size before crop and rotate\n    const originalWidth = width / (1 - left - right);\n    const originalHeight = height / (1 - top - bottom);\n\n    // Visible size\n    const visibleWidth = beforeCrop ? originalWidth : width;\n    const visibleHeight = beforeCrop ? originalHeight : height;\n\n    // Target size after crop and rotate\n    const targetWidth =\n        Math.abs(visibleWidth * Math.cos(angle)) + Math.abs(visibleHeight * Math.sin(angle));\n    const targetHeight =\n        Math.abs(visibleWidth * Math.sin(angle)) + Math.abs(visibleHeight * Math.cos(angle));\n\n    return {\n        targetWidth,\n        targetHeight,\n        originalWidth,\n        originalHeight,\n        visibleWidth,\n        visibleHeight,\n    };\n}\n"]}

package/lib-mjs/imageEdit/utils/getDropAndDragHelpers.d.ts

@@ -0,0 +1,10 @@
+import { DragAndDropHelper } from '../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import type { ImageEditElementClass } from '../types/ImageEditElementClass';
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';
+import type { DragAndDropContext } from '../types/DragAndDropContext';
+/**
+ * @internal
+ */
+export declare function getDropAndDragHelpers(wrapper: HTMLElement, editInfo: ImageMetadataFormat, options: ImageEditOptions, elementClass: ImageEditElementClass, helper: DragAndDropHandler<DragAndDropContext, any>, updateWrapper: (context: DragAndDropContext, _handle: HTMLElement) => void, zoomScale: number): DragAndDropHelper<DragAndDropContext, any>[];

package/lib-mjs/imageEdit/utils/getDropAndDragHelpers.js

@@ -0,0 +1,20 @@
+import { DragAndDropHelper } from '../../pluginUtils/DragAndDrop/DragAndDropHelper';
+import { toArray } from 'roosterjs-content-model-dom';
+/**
+ * @internal
+ */
+export function getDropAndDragHelpers(wrapper, editInfo, options, elementClass, helper, updateWrapper, zoomScale) {
+    return getEditElements(wrapper, elementClass).map(function (element) {
+        return new DragAndDropHelper(element, {
+            editInfo: editInfo,
+            options: options,
+            elementClass: elementClass,
+            x: element.dataset.x,
+            y: element.dataset.y,
+        }, updateWrapper, helper, zoomScale);
+    });
+}
+function getEditElements(wrapper, elementClass) {
+    return toArray(wrapper.querySelectorAll('.' + elementClass));
+}
+//# sourceMappingURL=getDropAndDragHelpers.js.map

package/lib-mjs/imageEdit/utils/getDropAndDragHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDropAndDragHelpers.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/getDropAndDragHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAOtD;;GAEG;AACH,MAAM,UAAU,qBAAqB,CACjC,OAAoB,EACpB,QAA6B,EAC7B,OAAyB,EACzB,YAAmC,EACnC,MAAmD,EACnD,aAA0E,EAC1E,SAAiB;IAEjB,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAG,CAC7C,UAAA,OAAO;QACH,OAAA,IAAI,iBAAiB,CACjB,OAAO,EACP;YACI,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,YAAY,cAAA;YACZ,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAkB;YACrC,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAkB;SACxC,EACD,aAAa,EACb,MAAM,EACN,SAAS,CACZ;IAZD,CAYC,CACR,CAAC;AACN,CAAC;AAED,SAAS,eAAe,CAAC,OAAoB,EAAE,YAAmC;IAC9E,OAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,GAAG,YAAY,CAAC,CAAkB,CAAC;AAClF,CAAC","sourcesContent":["import { DragAndDropHelper } from '../../pluginUtils/DragAndDrop/DragAndDropHelper';\nimport { toArray } from 'roosterjs-content-model-dom';\nimport type { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { DragAndDropContext, DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';\n\n/**\n * @internal\n */\nexport function getDropAndDragHelpers(\n    wrapper: HTMLElement,\n    editInfo: ImageMetadataFormat,\n    options: ImageEditOptions,\n    elementClass: ImageEditElementClass,\n    helper: DragAndDropHandler<DragAndDropContext, any>,\n    updateWrapper: (context: DragAndDropContext, _handle: HTMLElement) => void,\n    zoomScale: number\n): DragAndDropHelper<DragAndDropContext, any>[] {\n    return getEditElements(wrapper, elementClass).map(\n        element =>\n            new DragAndDropHelper<DragAndDropContext, any>(\n                element,\n                {\n                    editInfo: editInfo,\n                    options: options,\n                    elementClass,\n                    x: element.dataset.x as DNDDirectionX,\n                    y: element.dataset.y as DnDDirectionY,\n                },\n                updateWrapper,\n                helper,\n                zoomScale\n            )\n    );\n}\n\nfunction getEditElements(wrapper: HTMLElement, elementClass: ImageEditElementClass): HTMLElement[] {\n    return toArray(wrapper.querySelectorAll('.' + elementClass)) as HTMLElement[];\n}\n"]}

package/lib-mjs/imageEdit/utils/getHTMLImageOptions.d.ts

@@ -0,0 +1,7 @@
+import type { IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { ImageHtmlOptions } from '../types/ImageHtmlOptions';
+/**
+ * @internal
+ */
+export declare const getHTMLImageOptions: (editor: IEditor, options: ImageEditOptions, editInfo: ImageMetadataFormat) => ImageHtmlOptions;