roosterjs-content-model-plugins 9.45.0 → 9.45.2

package/lib-amd/imageEdit/utils/normalizeImageSelection.d.ts

@@ -1,9 +1,9 @@
-import type { ImageAndParagraph } from '../types/ImageAndParagraph';
-/**
- * Selecting directly on the image will only capture the image segment.
- * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.
- * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.
- * To fix this behavior the extra selection markers are removed.
- * @internal
- */
-export declare function normalizeImageSelection(imageAndParagraph: ImageAndParagraph): ImageAndParagraph | undefined;
+import type { ImageAndParagraph } from '../types/ImageAndParagraph';
+/**
+ * Selecting directly on the image will only capture the image segment.
+ * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.
+ * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.
+ * To fix this behavior the extra selection markers are removed.
+ * @internal
+ */
+export declare function normalizeImageSelection(imageAndParagraph: ImageAndParagraph): ImageAndParagraph | undefined;

package/lib-amd/imageEdit/utils/normalizeImageSelection.js

@@ -1,33 +1,33 @@
-define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.normalizeImageSelection = void 0;
-    /**
-     * Selecting directly on the image will only capture the image segment.
-     * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.
-     * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.
-     * To fix this behavior the extra selection markers are removed.
-     * @internal
-     */
-    function normalizeImageSelection(imageAndParagraph) {
-        var paragraph = imageAndParagraph.paragraph;
-        var index = paragraph.segments.indexOf(imageAndParagraph.image);
-        if (index > 0) {
-            var markerBefore = paragraph.segments[index - 1];
-            var markerAfter = paragraph.segments[index + 1];
-            if (markerBefore &&
-                markerAfter &&
-                markerAfter.segmentType == 'SelectionMarker' &&
-                markerBefore.segmentType == 'SelectionMarker' &&
-                markerAfter.isSelected &&
-                markerBefore.isSelected) {
-                var mutatedParagraph = (0, roosterjs_content_model_dom_1.mutateBlock)(paragraph);
-                mutatedParagraph.segments.splice(index - 1, 1);
-                mutatedParagraph.segments.splice(index, 1);
-            }
-            return imageAndParagraph;
-        }
-    }
-    exports.normalizeImageSelection = normalizeImageSelection;
-});
+define(["require", "exports", "roosterjs-content-model-dom"], function (require, exports, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.normalizeImageSelection = void 0;
+    /**
+     * Selecting directly on the image will only capture the image segment.
+     * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.
+     * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.
+     * To fix this behavior the extra selection markers are removed.
+     * @internal
+     */
+    function normalizeImageSelection(imageAndParagraph) {
+        var paragraph = imageAndParagraph.paragraph;
+        var index = paragraph.segments.indexOf(imageAndParagraph.image);
+        if (index > 0) {
+            var markerBefore = paragraph.segments[index - 1];
+            var markerAfter = paragraph.segments[index + 1];
+            if (markerBefore &&
+                markerAfter &&
+                markerAfter.segmentType == 'SelectionMarker' &&
+                markerBefore.segmentType == 'SelectionMarker' &&
+                markerAfter.isSelected &&
+                markerBefore.isSelected) {
+                var mutatedParagraph = (0, roosterjs_content_model_dom_1.mutateBlock)(paragraph);
+                mutatedParagraph.segments.splice(index - 1, 1);
+                mutatedParagraph.segments.splice(index, 1);
+            }
+            return imageAndParagraph;
+        }
+    }
+    exports.normalizeImageSelection = normalizeImageSelection;
+});
 //# sourceMappingURL=normalizeImageSelection.js.map

package/lib-amd/imageEdit/utils/normalizeImageSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"normalizeImageSelection.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts"],"names":[],"mappings":";;;;IAGA;;;;;;OAMG;IACH,SAAgB,uBAAuB,CAAC,iBAAoC;QACxE,IAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;QAC9C,IAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,KAAK,GAAG,CAAC,EAAE;YACX,IAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACnD,IAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAClD,IACI,YAAY;gBACZ,WAAW;gBACX,WAAW,CAAC,WAAW,IAAI,iBAAiB;gBAC5C,YAAY,CAAC,WAAW,IAAI,iBAAiB;gBAC7C,WAAW,CAAC,UAAU;gBACtB,YAAY,CAAC,UAAU,EACzB;gBACE,IAAM,gBAAgB,GAAG,IAAA,yCAAW,EAAC,SAAS,CAAC,CAAC;gBAChD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC/C,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC9C;YACD,OAAO,iBAAiB,CAAC;SAC5B;IACL,CAAC;IApBD,0DAoBC","sourcesContent":["import { mutateBlock } from 'roosterjs-content-model-dom';\r\nimport type { ImageAndParagraph } from '../types/ImageAndParagraph';\r\n\r\n/**\r\n * Selecting directly on the image will only capture the image segment.\r\n * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.\r\n * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.\r\n * To fix this behavior the extra selection markers are removed.\r\n * @internal\r\n */\r\nexport function normalizeImageSelection(imageAndParagraph: ImageAndParagraph) {\r\n    const paragraph = imageAndParagraph.paragraph;\r\n    const index = paragraph.segments.indexOf(imageAndParagraph.image);\r\n    if (index > 0) {\r\n        const markerBefore = paragraph.segments[index - 1];\r\n        const markerAfter = paragraph.segments[index + 1];\r\n        if (\r\n            markerBefore &&\r\n            markerAfter &&\r\n            markerAfter.segmentType == 'SelectionMarker' &&\r\n            markerBefore.segmentType == 'SelectionMarker' &&\r\n            markerAfter.isSelected &&\r\n            markerBefore.isSelected\r\n        ) {\r\n            const mutatedParagraph = mutateBlock(paragraph);\r\n            mutatedParagraph.segments.splice(index - 1, 1);\r\n            mutatedParagraph.segments.splice(index, 1);\r\n        }\r\n        return imageAndParagraph;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"normalizeImageSelection.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/normalizeImageSelection.ts"],"names":[],"mappings":";;;;IAGA;;;;;;OAMG;IACH,SAAgB,uBAAuB,CAAC,iBAAoC;QACxE,IAAM,SAAS,GAAG,iBAAiB,CAAC,SAAS,CAAC;QAC9C,IAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAClE,IAAI,KAAK,GAAG,CAAC,EAAE;YACX,IAAM,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACnD,IAAM,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YAClD,IACI,YAAY;gBACZ,WAAW;gBACX,WAAW,CAAC,WAAW,IAAI,iBAAiB;gBAC5C,YAAY,CAAC,WAAW,IAAI,iBAAiB;gBAC7C,WAAW,CAAC,UAAU;gBACtB,YAAY,CAAC,UAAU,EACzB;gBACE,IAAM,gBAAgB,GAAG,IAAA,yCAAW,EAAC,SAAS,CAAC,CAAC;gBAChD,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC/C,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;aAC9C;YACD,OAAO,iBAAiB,CAAC;SAC5B;IACL,CAAC;IApBD,0DAoBC","sourcesContent":["import { mutateBlock } from 'roosterjs-content-model-dom';\nimport type { ImageAndParagraph } from '../types/ImageAndParagraph';\n\n/**\n * Selecting directly on the image will only capture the image segment.\n * However, if the selection is made while the image is within a wrapper, it will capture the span that encloses the image.\n * In the last case, the selection will be marked as <---SelectionMarker---><---Image---><---SelectionMarker--->.\n * To fix this behavior the extra selection markers are removed.\n * @internal\n */\nexport function normalizeImageSelection(imageAndParagraph: ImageAndParagraph) {\n    const paragraph = imageAndParagraph.paragraph;\n    const index = paragraph.segments.indexOf(imageAndParagraph.image);\n    if (index > 0) {\n        const markerBefore = paragraph.segments[index - 1];\n        const markerAfter = paragraph.segments[index + 1];\n        if (\n            markerBefore &&\n            markerAfter &&\n            markerAfter.segmentType == 'SelectionMarker' &&\n            markerBefore.segmentType == 'SelectionMarker' &&\n            markerAfter.isSelected &&\n            markerBefore.isSelected\n        ) {\n            const mutatedParagraph = mutateBlock(paragraph);\n            mutatedParagraph.segments.splice(index - 1, 1);\n            mutatedParagraph.segments.splice(index, 1);\n        }\n        return imageAndParagraph;\n    }\n}\n"]}

package/lib-amd/imageEdit/utils/updateHandleCursor.d.ts

@@ -1,7 +1,7 @@
-/**
- * @internal
- * Rotate the resizer and cropper handles according to the image position.
- * @param handles The resizer handles.
- * @param angleRad The angle that the image was rotated.
- */
-export declare function updateHandleCursor(handles: HTMLElement[], angleRad: number): void;
+/**
+ * @internal
+ * Rotate the resizer and cropper handles according to the image position.
+ * @param handles The resizer handles.
+ * @param angleRad The angle that the image was rotated.
+ */
+export declare function updateHandleCursor(handles: HTMLElement[], angleRad: number): void;

package/lib-amd/imageEdit/utils/updateHandleCursor.js

@@ -1,36 +1,36 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.updateHandleCursor = void 0;
-    var PI = Math.PI;
-    var DIRECTIONS = 8;
-    var DirectionRad = (PI * 2) / DIRECTIONS;
-    var DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
-    function handleRadIndexCalculator(angleRad) {
-        var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
-        return idx < 0 ? idx + DIRECTIONS : idx;
-    }
-    function rotateHandles(angleRad, y, x) {
-        if (y === void 0) { y = ''; }
-        if (x === void 0) { x = ''; }
-        var radIndex = handleRadIndexCalculator(angleRad);
-        var originalDirection = y + x;
-        var originalIndex = DirectionOrder.indexOf(originalDirection);
-        var rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
-        return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';
-    }
-    /**
-     * @internal
-     * Rotate the resizer and cropper handles according to the image position.
-     * @param handles The resizer handles.
-     * @param angleRad The angle that the image was rotated.
-     */
-    function updateHandleCursor(handles, angleRad) {
-        handles.forEach(function (handle) {
-            var _a = handle.dataset, y = _a.y, x = _a.x;
-            handle.style.cursor = rotateHandles(angleRad, y, x) + "-resize";
-        });
-    }
-    exports.updateHandleCursor = updateHandleCursor;
-});
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.updateHandleCursor = void 0;
+    var PI = Math.PI;
+    var DIRECTIONS = 8;
+    var DirectionRad = (PI * 2) / DIRECTIONS;
+    var DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+    function handleRadIndexCalculator(angleRad) {
+        var idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;
+        return idx < 0 ? idx + DIRECTIONS : idx;
+    }
+    function rotateHandles(angleRad, y, x) {
+        if (y === void 0) { y = ''; }
+        if (x === void 0) { x = ''; }
+        var radIndex = handleRadIndexCalculator(angleRad);
+        var originalDirection = y + x;
+        var originalIndex = DirectionOrder.indexOf(originalDirection);
+        var rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;
+        return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';
+    }
+    /**
+     * @internal
+     * Rotate the resizer and cropper handles according to the image position.
+     * @param handles The resizer handles.
+     * @param angleRad The angle that the image was rotated.
+     */
+    function updateHandleCursor(handles, angleRad) {
+        handles.forEach(function (handle) {
+            var _a = handle.dataset, y = _a.y, x = _a.x;
+            handle.style.cursor = rotateHandles(angleRad, y, x) + "-resize";
+        });
+    }
+    exports.updateHandleCursor = updateHandleCursor;
+});
 //# sourceMappingURL=updateHandleCursor.js.map

package/lib-amd/imageEdit/utils/updateHandleCursor.js.map

@@ -1 +1 @@
-{"version":3,"file":"updateHandleCursor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateHandleCursor.ts"],"names":[],"mappings":";;;;IAAA,IAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACnB,IAAM,UAAU,GAAG,CAAC,CAAC;IACrB,IAAM,YAAY,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;IAC3C,IAAM,cAAc,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IAEpE,SAAS,wBAAwB,CAAC,QAAgB;QAC9C,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC,GAAG,UAAU,CAAC;QAC7D,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5C,CAAC;IAED,SAAS,aAAa,CAAC,QAAgB,EAAE,CAAc,EAAE,CAAc;QAA9B,kBAAA,EAAA,MAAc;QAAE,kBAAA,EAAA,MAAc;QACnE,IAAM,QAAQ,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;QACpD,IAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,CAAC;QAChC,IAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAM,YAAY,GAAG,aAAa,IAAI,CAAC,IAAI,aAAa,GAAG,QAAQ,CAAC;QACpE,OAAO,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,CAAC;IACD;;;;;OAKG;IACH,SAAgB,kBAAkB,CAAC,OAAsB,EAAE,QAAgB;QACvE,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;YACZ,IAAA,KAAW,MAAM,CAAC,OAAO,EAAvB,CAAC,OAAA,EAAE,CAAC,OAAmB,CAAC;YAChC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAM,aAAa,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,YAAS,CAAC;QACpE,CAAC,CAAC,CAAC;IACP,CAAC;IALD,gDAKC","sourcesContent":["const PI = Math.PI;\r\nconst DIRECTIONS = 8;\r\nconst DirectionRad = (PI * 2) / DIRECTIONS;\r\nconst DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];\r\n\r\nfunction handleRadIndexCalculator(angleRad: number): number {\r\n    const idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;\r\n    return idx < 0 ? idx + DIRECTIONS : idx;\r\n}\r\n\r\nfunction rotateHandles(angleRad: number, y: string = '', x: string = ''): string {\r\n    const radIndex = handleRadIndexCalculator(angleRad);\r\n    const originalDirection = y + x;\r\n    const originalIndex = DirectionOrder.indexOf(originalDirection);\r\n    const rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;\r\n    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';\r\n}\r\n/**\r\n * @internal\r\n * Rotate the resizer and cropper handles according to the image position.\r\n * @param handles The resizer handles.\r\n * @param angleRad The angle that the image was rotated.\r\n */\r\nexport function updateHandleCursor(handles: HTMLElement[], angleRad: number) {\r\n    handles.forEach(handle => {\r\n        const { y, x } = handle.dataset;\r\n        handle.style.cursor = `${rotateHandles(angleRad, y, x)}-resize`;\r\n    });\r\n}\r\n"]}
+{"version":3,"file":"updateHandleCursor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateHandleCursor.ts"],"names":[],"mappings":";;;;IAAA,IAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACnB,IAAM,UAAU,GAAG,CAAC,CAAC;IACrB,IAAM,YAAY,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,UAAU,CAAC;IAC3C,IAAM,cAAc,GAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;IAEpE,SAAS,wBAAwB,CAAC,QAAgB;QAC9C,IAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC,GAAG,UAAU,CAAC;QAC7D,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5C,CAAC;IAED,SAAS,aAAa,CAAC,QAAgB,EAAE,CAAc,EAAE,CAAc;QAA9B,kBAAA,EAAA,MAAc;QAAE,kBAAA,EAAA,MAAc;QACnE,IAAM,QAAQ,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;QACpD,IAAM,iBAAiB,GAAG,CAAC,GAAG,CAAC,CAAC;QAChC,IAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAM,YAAY,GAAG,aAAa,IAAI,CAAC,IAAI,aAAa,GAAG,QAAQ,CAAC;QACpE,OAAO,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACzE,CAAC;IACD;;;;;OAKG;IACH,SAAgB,kBAAkB,CAAC,OAAsB,EAAE,QAAgB;QACvE,OAAO,CAAC,OAAO,CAAC,UAAA,MAAM;YACZ,IAAA,KAAW,MAAM,CAAC,OAAO,EAAvB,CAAC,OAAA,EAAE,CAAC,OAAmB,CAAC;YAChC,MAAM,CAAC,KAAK,CAAC,MAAM,GAAM,aAAa,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,YAAS,CAAC;QACpE,CAAC,CAAC,CAAC;IACP,CAAC;IALD,gDAKC","sourcesContent":["const PI = Math.PI;\nconst DIRECTIONS = 8;\nconst DirectionRad = (PI * 2) / DIRECTIONS;\nconst DirectionOrder = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];\n\nfunction handleRadIndexCalculator(angleRad: number): number {\n    const idx = Math.round(angleRad / DirectionRad) % DIRECTIONS;\n    return idx < 0 ? idx + DIRECTIONS : idx;\n}\n\nfunction rotateHandles(angleRad: number, y: string = '', x: string = ''): string {\n    const radIndex = handleRadIndexCalculator(angleRad);\n    const originalDirection = y + x;\n    const originalIndex = DirectionOrder.indexOf(originalDirection);\n    const rotatedIndex = originalIndex >= 0 && originalIndex + radIndex;\n    return rotatedIndex ? DirectionOrder[rotatedIndex % DIRECTIONS] : '';\n}\n/**\n * @internal\n * Rotate the resizer and cropper handles according to the image position.\n * @param handles The resizer handles.\n * @param angleRad The angle that the image was rotated.\n */\nexport function updateHandleCursor(handles: HTMLElement[], angleRad: number) {\n    handles.forEach(handle => {\n        const { y, x } = handle.dataset;\n        handle.style.cursor = `${rotateHandles(angleRad, y, x)}-resize`;\n    });\n}\n"]}

package/lib-amd/imageEdit/utils/updateImageEditInfo.d.ts

@@ -1,10 +1,10 @@
-import type { ContentModelImage, IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';
-/**
- * @internal
- */
-export declare function updateImageEditInfo(contentModelImage: ContentModelImage, image: HTMLImageElement, newImageMetadata?: ImageMetadataFormat | null | undefined): ImageMetadataFormat;
-/**
- * @internal
- * @returns
- */
-export declare function getSelectedImageMetadata(editor: IEditor, image: HTMLImageElement): ImageMetadataFormat;
+import type { ContentModelImage, IEditor, ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function updateImageEditInfo(contentModelImage: ContentModelImage, image: HTMLImageElement, newImageMetadata?: ImageMetadataFormat | null | undefined): ImageMetadataFormat;
+/**
+ * @internal
+ * @returns
+ */
+export declare function getSelectedImageMetadata(editor: IEditor, image: HTMLImageElement): ImageMetadataFormat;

package/lib-amd/imageEdit/utils/updateImageEditInfo.js

@@ -1,52 +1,52 @@
-define(["require", "exports", "tslib", "./getSelectedImage", "roosterjs-content-model-dom"], function (require, exports, tslib_1, getSelectedImage_1, roosterjs_content_model_dom_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getSelectedImageMetadata = exports.updateImageEditInfo = void 0;
-    /**
-     * @internal
-     */
-    function updateImageEditInfo(contentModelImage, image, newImageMetadata) {
-        var contentModelMetadata = (0, roosterjs_content_model_dom_1.updateImageMetadata)(contentModelImage, newImageMetadata !== undefined
-            ? function (format) {
-                format = newImageMetadata;
-                return format;
-            }
-            : undefined);
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, getInitialEditInfo(image)), contentModelMetadata);
-    }
-    exports.updateImageEditInfo = updateImageEditInfo;
-    function getInitialEditInfo(image) {
-        return {
-            src: image.getAttribute('src') || '',
-            widthPx: image.clientWidth,
-            heightPx: image.clientHeight,
-            naturalWidth: image.naturalWidth,
-            naturalHeight: image.naturalHeight,
-            leftPercent: 0,
-            rightPercent: 0,
-            topPercent: 0,
-            bottomPercent: 0,
-            angleRad: 0,
-        };
-    }
-    /**
-     * @internal
-     * @returns
-     */
-    function getSelectedImageMetadata(editor, image) {
-        var imageMetadata = getInitialEditInfo(image);
-        editor.formatContentModel(function (model) {
-            var selectedImage = (0, getSelectedImage_1.getSelectedImage)(model);
-            if (selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image) {
-                (0, roosterjs_content_model_dom_1.mutateSegment)(selectedImage.paragraph, selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image, function (modelImage) {
-                    imageMetadata = updateImageEditInfo(modelImage, image);
-                });
-                return true;
-            }
-            return false;
-        });
-        return imageMetadata;
-    }
-    exports.getSelectedImageMetadata = getSelectedImageMetadata;
-});
+define(["require", "exports", "tslib", "./getSelectedImage", "roosterjs-content-model-dom"], function (require, exports, tslib_1, getSelectedImage_1, roosterjs_content_model_dom_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getSelectedImageMetadata = exports.updateImageEditInfo = void 0;
+    /**
+     * @internal
+     */
+    function updateImageEditInfo(contentModelImage, image, newImageMetadata) {
+        var contentModelMetadata = (0, roosterjs_content_model_dom_1.updateImageMetadata)(contentModelImage, newImageMetadata !== undefined
+            ? function (format) {
+                format = newImageMetadata;
+                return format;
+            }
+            : undefined);
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, getInitialEditInfo(image)), contentModelMetadata);
+    }
+    exports.updateImageEditInfo = updateImageEditInfo;
+    function getInitialEditInfo(image) {
+        return {
+            src: image.getAttribute('src') || '',
+            widthPx: image.clientWidth,
+            heightPx: image.clientHeight,
+            naturalWidth: image.naturalWidth,
+            naturalHeight: image.naturalHeight,
+            leftPercent: 0,
+            rightPercent: 0,
+            topPercent: 0,
+            bottomPercent: 0,
+            angleRad: 0,
+        };
+    }
+    /**
+     * @internal
+     * @returns
+     */
+    function getSelectedImageMetadata(editor, image) {
+        var imageMetadata = getInitialEditInfo(image);
+        editor.formatContentModel(function (model) {
+            var selectedImage = (0, getSelectedImage_1.getSelectedImage)(model);
+            if (selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image) {
+                (0, roosterjs_content_model_dom_1.mutateSegment)(selectedImage.paragraph, selectedImage === null || selectedImage === void 0 ? void 0 : selectedImage.image, function (modelImage) {
+                    imageMetadata = updateImageEditInfo(modelImage, image);
+                });
+                return true;
+            }
+            return false;
+        });
+        return imageMetadata;
+    }
+    exports.getSelectedImageMetadata = getSelectedImageMetadata;
+});
 //# sourceMappingURL=updateImageEditInfo.js.map

package/lib-amd/imageEdit/utils/updateImageEditInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"updateImageEditInfo.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateImageEditInfo.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACH,SAAgB,mBAAmB,CAC/B,iBAAoC,EACpC,KAAuB,EACvB,gBAAyD;QAEzD,IAAM,oBAAoB,GAAG,IAAA,iDAAmB,EAC5C,iBAAiB,EACjB,gBAAgB,KAAK,SAAS;YAC1B,CAAC,CAAC,UAAA,MAAM;gBACF,MAAM,GAAG,gBAAgB,CAAC;gBAC1B,OAAO,MAAM,CAAC;YAClB,CAAC;YACH,CAAC,CAAC,SAAS,CAClB,CAAC;QACF,uDAAY,kBAAkB,CAAC,KAAK,CAAC,GAAK,oBAAoB,EAAG;IACrE,CAAC;IAfD,kDAeC;IAED,SAAS,kBAAkB,CAAC,KAAuB;QAC/C,OAAO;YACH,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE;YACpC,OAAO,EAAE,KAAK,CAAC,WAAW;YAC1B,QAAQ,EAAE,KAAK,CAAC,YAAY;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED;;;OAGG;IACH,SAAgB,wBAAwB,CACpC,MAAe,EACf,KAAuB;QAEvB,IAAI,aAAa,GAAwB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACnE,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;YAC3B,IAAM,aAAa,GAAG,IAAA,mCAAgB,EAAC,KAAK,CAAC,CAAC;YAC9C,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE;gBACtB,IAAA,2CAAa,EAAC,aAAa,CAAC,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,UAAA,UAAU;oBACnE,aAAa,GAAG,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;gBAC3D,CAAC,CAAC,CAAC;gBAEH,OAAO,IAAI,CAAC;aACf;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC;IACzB,CAAC;IAlBD,4DAkBC","sourcesContent":["import { getSelectedImage } from './getSelectedImage';\r\nimport { mutateSegment, updateImageMetadata } from 'roosterjs-content-model-dom';\r\n\r\nimport type {\r\n    ContentModelImage,\r\n    IEditor,\r\n    ImageMetadataFormat,\r\n} from 'roosterjs-content-model-types';\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function updateImageEditInfo(\r\n    contentModelImage: ContentModelImage,\r\n    image: HTMLImageElement,\r\n    newImageMetadata?: ImageMetadataFormat | null | undefined\r\n): ImageMetadataFormat {\r\n    const contentModelMetadata = updateImageMetadata(\r\n        contentModelImage,\r\n        newImageMetadata !== undefined\r\n            ? format => {\r\n                  format = newImageMetadata;\r\n                  return format;\r\n              }\r\n            : undefined\r\n    );\r\n    return { ...getInitialEditInfo(image), ...contentModelMetadata };\r\n}\r\n\r\nfunction getInitialEditInfo(image: HTMLImageElement): ImageMetadataFormat {\r\n    return {\r\n        src: image.getAttribute('src') || '',\r\n        widthPx: image.clientWidth,\r\n        heightPx: image.clientHeight,\r\n        naturalWidth: image.naturalWidth,\r\n        naturalHeight: image.naturalHeight,\r\n        leftPercent: 0,\r\n        rightPercent: 0,\r\n        topPercent: 0,\r\n        bottomPercent: 0,\r\n        angleRad: 0,\r\n    };\r\n}\r\n\r\n/**\r\n * @internal\r\n * @returns\r\n */\r\nexport function getSelectedImageMetadata(\r\n    editor: IEditor,\r\n    image: HTMLImageElement\r\n): ImageMetadataFormat {\r\n    let imageMetadata: ImageMetadataFormat = getInitialEditInfo(image);\r\n    editor.formatContentModel(model => {\r\n        const selectedImage = getSelectedImage(model);\r\n        if (selectedImage?.image) {\r\n            mutateSegment(selectedImage.paragraph, selectedImage?.image, modelImage => {\r\n                imageMetadata = updateImageEditInfo(modelImage, image);\r\n            });\r\n\r\n            return true;\r\n        }\r\n        return false;\r\n    });\r\n\r\n    return imageMetadata;\r\n}\r\n"]}
+{"version":3,"file":"updateImageEditInfo.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateImageEditInfo.ts"],"names":[],"mappings":";;;;IASA;;OAEG;IACH,SAAgB,mBAAmB,CAC/B,iBAAoC,EACpC,KAAuB,EACvB,gBAAyD;QAEzD,IAAM,oBAAoB,GAAG,IAAA,iDAAmB,EAC5C,iBAAiB,EACjB,gBAAgB,KAAK,SAAS;YAC1B,CAAC,CAAC,UAAA,MAAM;gBACF,MAAM,GAAG,gBAAgB,CAAC;gBAC1B,OAAO,MAAM,CAAC;YAClB,CAAC;YACH,CAAC,CAAC,SAAS,CAClB,CAAC;QACF,uDAAY,kBAAkB,CAAC,KAAK,CAAC,GAAK,oBAAoB,EAAG;IACrE,CAAC;IAfD,kDAeC;IAED,SAAS,kBAAkB,CAAC,KAAuB;QAC/C,OAAO;YACH,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE;YACpC,OAAO,EAAE,KAAK,CAAC,WAAW;YAC1B,QAAQ,EAAE,KAAK,CAAC,YAAY;YAC5B,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,QAAQ,EAAE,CAAC;SACd,CAAC;IACN,CAAC;IAED;;;OAGG;IACH,SAAgB,wBAAwB,CACpC,MAAe,EACf,KAAuB;QAEvB,IAAI,aAAa,GAAwB,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACnE,MAAM,CAAC,kBAAkB,CAAC,UAAA,KAAK;YAC3B,IAAM,aAAa,GAAG,IAAA,mCAAgB,EAAC,KAAK,CAAC,CAAC;YAC9C,IAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE;gBACtB,IAAA,2CAAa,EAAC,aAAa,CAAC,SAAS,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,EAAE,UAAA,UAAU;oBACnE,aAAa,GAAG,mBAAmB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;gBAC3D,CAAC,CAAC,CAAC;gBAEH,OAAO,IAAI,CAAC;aACf;YACD,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QAEH,OAAO,aAAa,CAAC;IACzB,CAAC;IAlBD,4DAkBC","sourcesContent":["import { getSelectedImage } from './getSelectedImage';\nimport { mutateSegment, updateImageMetadata } from 'roosterjs-content-model-dom';\n\nimport type {\n    ContentModelImage,\n    IEditor,\n    ImageMetadataFormat,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport function updateImageEditInfo(\n    contentModelImage: ContentModelImage,\n    image: HTMLImageElement,\n    newImageMetadata?: ImageMetadataFormat | null | undefined\n): ImageMetadataFormat {\n    const contentModelMetadata = updateImageMetadata(\n        contentModelImage,\n        newImageMetadata !== undefined\n            ? format => {\n                  format = newImageMetadata;\n                  return format;\n              }\n            : undefined\n    );\n    return { ...getInitialEditInfo(image), ...contentModelMetadata };\n}\n\nfunction getInitialEditInfo(image: HTMLImageElement): ImageMetadataFormat {\n    return {\n        src: image.getAttribute('src') || '',\n        widthPx: image.clientWidth,\n        heightPx: image.clientHeight,\n        naturalWidth: image.naturalWidth,\n        naturalHeight: image.naturalHeight,\n        leftPercent: 0,\n        rightPercent: 0,\n        topPercent: 0,\n        bottomPercent: 0,\n        angleRad: 0,\n    };\n}\n\n/**\n * @internal\n * @returns\n */\nexport function getSelectedImageMetadata(\n    editor: IEditor,\n    image: HTMLImageElement\n): ImageMetadataFormat {\n    let imageMetadata: ImageMetadataFormat = getInitialEditInfo(image);\n    editor.formatContentModel(model => {\n        const selectedImage = getSelectedImage(model);\n        if (selectedImage?.image) {\n            mutateSegment(selectedImage.paragraph, selectedImage?.image, modelImage => {\n                imageMetadata = updateImageEditInfo(modelImage, image);\n            });\n\n            return true;\n        }\n        return false;\n    });\n\n    return imageMetadata;\n}\n"]}

package/lib-amd/imageEdit/utils/updateWrapper.d.ts

@@ -1,6 +1,6 @@
-import type { ImageEditOptions } from '../types/ImageEditOptions';
-import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
-/**
- * @internal
- */
-export declare function updateWrapper(editInfo: ImageMetadataFormat, options: ImageEditOptions, image: HTMLImageElement, clonedImage: HTMLImageElement, wrapper: HTMLSpanElement, resizers?: HTMLDivElement[], croppers?: HTMLDivElement[], isRTL?: boolean, isRotating?: boolean): void;
+import type { ImageEditOptions } from '../types/ImageEditOptions';
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare function updateWrapper(editInfo: ImageMetadataFormat, options: ImageEditOptions, image: HTMLImageElement, clonedImage: HTMLImageElement, wrapper: HTMLSpanElement, resizers?: HTMLDivElement[], croppers?: HTMLDivElement[], isRTL?: boolean, isRotating?: boolean): void;

package/lib-amd/imageEdit/utils/updateWrapper.js

@@ -1,81 +1,81 @@
-define(["require", "exports", "./doubleCheckResize", "./filterInnerResizerHandles", "./generateImageSize", "../types/ImageEditElementClass", "roosterjs-content-model-dom", "./updateHandleCursor", "../Resizer/updateSideHandlesVisibility", "./imageEditUtils"], function (require, exports, doubleCheckResize_1, filterInnerResizerHandles_1, generateImageSize_1, ImageEditElementClass_1, roosterjs_content_model_dom_1, updateHandleCursor_1, updateSideHandlesVisibility_1, imageEditUtils_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.updateWrapper = void 0;
-    /**
-     * @internal
-     */
-    function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers, croppers, isRTL, isRotating) {
-        var angleRad = editInfo.angleRad, bottomPercent = editInfo.bottomPercent, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, flippedHorizontal = editInfo.flippedHorizontal, flippedVertical = editInfo.flippedVertical;
-        var generateImageSize = (0, generateImageSize_1.getGeneratedImageSize)(editInfo, croppers && (croppers === null || croppers === void 0 ? void 0 : croppers.length) > 0);
-        if (!generateImageSize) {
-            return;
-        }
-        var targetWidth = generateImageSize.targetWidth, targetHeight = generateImageSize.targetHeight, originalWidth = generateImageSize.originalWidth, originalHeight = generateImageSize.originalHeight, visibleWidth = generateImageSize.visibleWidth, visibleHeight = generateImageSize.visibleHeight;
-        var marginHorizontal = (targetWidth - visibleWidth) / 2;
-        var marginVertical = (targetHeight - visibleHeight) / 2;
-        var cropLeftPx = originalWidth * (leftPercent || 0);
-        var cropRightPx = originalWidth * (rightPercent || 0);
-        var cropTopPx = originalHeight * (topPercent || 0);
-        var cropBottomPx = originalHeight * (bottomPercent || 0);
-        // Update size and margin of the wrapper
-        wrapper.style.marginTop = marginVertical + "px";
-        wrapper.style.marginBottom = marginVertical + 5 + "px "; // 5px to adjust the image on top of the handles
-        wrapper.style.marginLeft = marginHorizontal + "px";
-        wrapper.style.marginRight = marginHorizontal + "px";
-        wrapper.style.transform = "rotate(" + angleRad + "rad)";
-        (0, imageEditUtils_1.setWrapperSizeDimensions)(wrapper, image, visibleWidth, visibleHeight, !!isRotating);
-        wrapper.style.verticalAlign = 'text-bottom';
-        // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
-        // or if the direction is Right To Left
-        if (isRTL) {
-            wrapper.style.textAlign = 'right';
-            if (!croppers) {
-                clonedImage.style.left = (0, imageEditUtils_1.getPx)(cropLeftPx);
-                clonedImage.style.right = (0, imageEditUtils_1.getPx)(-cropRightPx);
-            }
-        }
-        else {
-            wrapper.style.textAlign = 'left';
-        }
-        if (!isRotating) {
-            // Update size of the image
-            clonedImage.style.width = (0, imageEditUtils_1.getPx)(originalWidth);
-            clonedImage.style.height = (0, imageEditUtils_1.getPx)(originalHeight);
-        }
-        clonedImage.style.position = 'absolute';
-        //Update flip direction
-        (0, imageEditUtils_1.setFlipped)(clonedImage.parentElement, flippedHorizontal, flippedVertical);
-        var smallImage = (0, imageEditUtils_1.isASmallImage)(visibleWidth, visibleWidth);
-        if (!croppers) {
-            // For rotate/resize, set the margin of the image so that cropped part won't be visible
-            clonedImage.style.margin = -cropTopPx + "px 0 0 " + -cropLeftPx + "px";
-        }
-        if (croppers && croppers.length > 0) {
-            var cropContainer = croppers[0];
-            var cropOverlays = croppers.filter(function (cropper) { return cropper.className === ImageEditElementClass_1.ImageEditElementClass.CropOverlay; });
-            var cropHandles = (0, roosterjs_content_model_dom_1.toArray)(cropContainer.querySelectorAll("." + ImageEditElementClass_1.ImageEditElementClass.CropHandle));
-            (0, imageEditUtils_1.setSize)(cropContainer, cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
-            (0, imageEditUtils_1.setSize)(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);
-            (0, imageEditUtils_1.setSize)(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
-            (0, imageEditUtils_1.setSize)(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
-            (0, imageEditUtils_1.setSize)(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
-            if (angleRad !== undefined) {
-                (0, updateHandleCursor_1.updateHandleCursor)(cropHandles, angleRad);
-            }
-        }
-        if (resizers && !isRotating) {
-            var clientWidth = wrapper.clientWidth;
-            var clientHeight = wrapper.clientHeight;
-            var actualDimensions = (0, imageEditUtils_1.getActualWrapperDimensions)(image, clientWidth, clientHeight);
-            (0, doubleCheckResize_1.doubleCheckResize)(editInfo, options.preserveRatio || false, actualDimensions.width, actualDimensions.height);
-            var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
-            if (angleRad !== undefined) {
-                (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
-            }
-            (0, updateSideHandlesVisibility_1.updateSideHandlesVisibility)(resizeHandles, smallImage);
-        }
-    }
-    exports.updateWrapper = updateWrapper;
-});
+define(["require", "exports", "./doubleCheckResize", "./filterInnerResizerHandles", "./generateImageSize", "../types/ImageEditElementClass", "roosterjs-content-model-dom", "./updateHandleCursor", "../Resizer/updateSideHandlesVisibility", "./imageEditUtils"], function (require, exports, doubleCheckResize_1, filterInnerResizerHandles_1, generateImageSize_1, ImageEditElementClass_1, roosterjs_content_model_dom_1, updateHandleCursor_1, updateSideHandlesVisibility_1, imageEditUtils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.updateWrapper = void 0;
+    /**
+     * @internal
+     */
+    function updateWrapper(editInfo, options, image, clonedImage, wrapper, resizers, croppers, isRTL, isRotating) {
+        var angleRad = editInfo.angleRad, bottomPercent = editInfo.bottomPercent, leftPercent = editInfo.leftPercent, rightPercent = editInfo.rightPercent, topPercent = editInfo.topPercent, flippedHorizontal = editInfo.flippedHorizontal, flippedVertical = editInfo.flippedVertical;
+        var generateImageSize = (0, generateImageSize_1.getGeneratedImageSize)(editInfo, croppers && (croppers === null || croppers === void 0 ? void 0 : croppers.length) > 0);
+        if (!generateImageSize) {
+            return;
+        }
+        var targetWidth = generateImageSize.targetWidth, targetHeight = generateImageSize.targetHeight, originalWidth = generateImageSize.originalWidth, originalHeight = generateImageSize.originalHeight, visibleWidth = generateImageSize.visibleWidth, visibleHeight = generateImageSize.visibleHeight;
+        var marginHorizontal = (targetWidth - visibleWidth) / 2;
+        var marginVertical = (targetHeight - visibleHeight) / 2;
+        var cropLeftPx = originalWidth * (leftPercent || 0);
+        var cropRightPx = originalWidth * (rightPercent || 0);
+        var cropTopPx = originalHeight * (topPercent || 0);
+        var cropBottomPx = originalHeight * (bottomPercent || 0);
+        // Update size and margin of the wrapper
+        wrapper.style.marginTop = marginVertical + "px";
+        wrapper.style.marginBottom = marginVertical + 5 + "px "; // 5px to adjust the image on top of the handles
+        wrapper.style.marginLeft = marginHorizontal + "px";
+        wrapper.style.marginRight = marginHorizontal + "px";
+        wrapper.style.transform = "rotate(" + angleRad + "rad)";
+        (0, imageEditUtils_1.setWrapperSizeDimensions)(wrapper, image, visibleWidth, visibleHeight, !!isRotating);
+        wrapper.style.verticalAlign = 'text-bottom';
+        // Update the text-alignment to avoid the image to overflow if the parent element have align center or right
+        // or if the direction is Right To Left
+        if (isRTL) {
+            wrapper.style.textAlign = 'right';
+            if (!croppers) {
+                clonedImage.style.left = (0, imageEditUtils_1.getPx)(cropLeftPx);
+                clonedImage.style.right = (0, imageEditUtils_1.getPx)(-cropRightPx);
+            }
+        }
+        else {
+            wrapper.style.textAlign = 'left';
+        }
+        if (!isRotating) {
+            // Update size of the image
+            clonedImage.style.width = (0, imageEditUtils_1.getPx)(originalWidth);
+            clonedImage.style.height = (0, imageEditUtils_1.getPx)(originalHeight);
+        }
+        clonedImage.style.position = 'absolute';
+        //Update flip direction
+        (0, imageEditUtils_1.setFlipped)(clonedImage.parentElement, flippedHorizontal, flippedVertical);
+        var smallImage = (0, imageEditUtils_1.isASmallImage)(visibleWidth, visibleWidth);
+        if (!croppers) {
+            // For rotate/resize, set the margin of the image so that cropped part won't be visible
+            clonedImage.style.margin = -cropTopPx + "px 0 0 " + -cropLeftPx + "px";
+        }
+        if (croppers && croppers.length > 0) {
+            var cropContainer = croppers[0];
+            var cropOverlays = croppers.filter(function (cropper) { return cropper.className === ImageEditElementClass_1.ImageEditElementClass.CropOverlay; });
+            var cropHandles = (0, roosterjs_content_model_dom_1.toArray)(cropContainer.querySelectorAll("." + ImageEditElementClass_1.ImageEditElementClass.CropHandle));
+            (0, imageEditUtils_1.setSize)(cropContainer, cropLeftPx, cropTopPx, cropRightPx, cropBottomPx, undefined, undefined);
+            (0, imageEditUtils_1.setSize)(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);
+            (0, imageEditUtils_1.setSize)(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);
+            (0, imageEditUtils_1.setSize)(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);
+            (0, imageEditUtils_1.setSize)(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);
+            if (angleRad !== undefined) {
+                (0, updateHandleCursor_1.updateHandleCursor)(cropHandles, angleRad);
+            }
+        }
+        if (resizers && !isRotating) {
+            var clientWidth = wrapper.clientWidth;
+            var clientHeight = wrapper.clientHeight;
+            var actualDimensions = (0, imageEditUtils_1.getActualWrapperDimensions)(image, clientWidth, clientHeight);
+            (0, doubleCheckResize_1.doubleCheckResize)(editInfo, options.preserveRatio || false, actualDimensions.width, actualDimensions.height);
+            var resizeHandles = (0, filterInnerResizerHandles_1.filterInnerResizerHandles)(resizers);
+            if (angleRad !== undefined) {
+                (0, updateHandleCursor_1.updateHandleCursor)(resizeHandles, angleRad);
+            }
+            (0, updateSideHandlesVisibility_1.updateSideHandlesVisibility)(resizeHandles, smallImage);
+        }
+    }
+    exports.updateWrapper = updateWrapper;
+});
 //# sourceMappingURL=updateWrapper.js.map

package/lib-amd/imageEdit/utils/updateWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"updateWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { doubleCheckResize } from './doubleCheckResize';\r\nimport { filterInnerResizerHandles } from './filterInnerResizerHandles';\r\nimport { getGeneratedImageSize } from './generateImageSize';\r\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\r\nimport { toArray } from 'roosterjs-content-model-dom';\r\nimport { updateHandleCursor } from './updateHandleCursor';\r\nimport { updateSideHandlesVisibility } from '../Resizer/updateSideHandlesVisibility';\r\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\r\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\r\nimport {\r\n    getActualWrapperDimensions,\r\n    getPx,\r\n    isASmallImage,\r\n    setFlipped,\r\n    setSize,\r\n    setWrapperSizeDimensions,\r\n} from './imageEditUtils';\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function updateWrapper(\r\n    editInfo: ImageMetadataFormat,\r\n    options: ImageEditOptions,\r\n    image: HTMLImageElement,\r\n    clonedImage: HTMLImageElement,\r\n    wrapper: HTMLSpanElement,\r\n    resizers?: HTMLDivElement[],\r\n    croppers?: HTMLDivElement[],\r\n    isRTL?: boolean,\r\n    isRotating?: boolean\r\n) {\r\n    const {\r\n        angleRad,\r\n        bottomPercent,\r\n        leftPercent,\r\n        rightPercent,\r\n        topPercent,\r\n        flippedHorizontal,\r\n        flippedVertical,\r\n    } = editInfo;\r\n\r\n    const generateImageSize = getGeneratedImageSize(editInfo, croppers && croppers?.length > 0);\r\n    if (!generateImageSize) {\r\n        return;\r\n    }\r\n    const {\r\n        targetWidth,\r\n        targetHeight,\r\n        originalWidth,\r\n        originalHeight,\r\n        visibleWidth,\r\n        visibleHeight,\r\n    } = generateImageSize;\r\n\r\n    const marginHorizontal = (targetWidth - visibleWidth) / 2;\r\n    const marginVertical = (targetHeight - visibleHeight) / 2;\r\n    const cropLeftPx = originalWidth * (leftPercent || 0);\r\n    const cropRightPx = originalWidth * (rightPercent || 0);\r\n    const cropTopPx = originalHeight * (topPercent || 0);\r\n    const cropBottomPx = originalHeight * (bottomPercent || 0);\r\n\r\n    // Update size and margin of the wrapper\r\n    wrapper.style.marginTop = `${marginVertical}px`;\r\n    wrapper.style.marginBottom = `${marginVertical + 5}px `; // 5px to adjust the image on top of the handles\r\n    wrapper.style.marginLeft = `${marginHorizontal}px`;\r\n    wrapper.style.marginRight = `${marginHorizontal}px`;\r\n\r\n    wrapper.style.transform = `rotate(${angleRad}rad)`;\r\n    setWrapperSizeDimensions(wrapper, image, visibleWidth, visibleHeight, !!isRotating);\r\n    wrapper.style.verticalAlign = 'text-bottom';\r\n\r\n    // Update the text-alignment to avoid the image to overflow if the parent element have align center or right\r\n    // or if the direction is Right To Left\r\n    if (isRTL) {\r\n        wrapper.style.textAlign = 'right';\r\n        if (!croppers) {\r\n            clonedImage.style.left = getPx(cropLeftPx);\r\n            clonedImage.style.right = getPx(-cropRightPx);\r\n        }\r\n    } else {\r\n        wrapper.style.textAlign = 'left';\r\n    }\r\n\r\n    if (!isRotating) {\r\n        // Update size of the image\r\n        clonedImage.style.width = getPx(originalWidth);\r\n        clonedImage.style.height = getPx(originalHeight);\r\n    }\r\n\r\n    clonedImage.style.position = 'absolute';\r\n\r\n    //Update flip direction\r\n    setFlipped(clonedImage.parentElement, flippedHorizontal, flippedVertical);\r\n    const smallImage = isASmallImage(visibleWidth, visibleWidth);\r\n\r\n    if (!croppers) {\r\n        // For rotate/resize, set the margin of the image so that cropped part won't be visible\r\n        clonedImage.style.margin = `${-cropTopPx}px 0 0 ${-cropLeftPx}px`;\r\n    }\r\n\r\n    if (croppers && croppers.length > 0) {\r\n        const cropContainer = croppers[0];\r\n        const cropOverlays = croppers.filter(\r\n            cropper => cropper.className === ImageEditElementClass.CropOverlay\r\n        );\r\n        const cropHandles = toArray<HTMLElement>(\r\n            cropContainer.querySelectorAll(`.${ImageEditElementClass.CropHandle}`)\r\n        );\r\n\r\n        setSize(\r\n            cropContainer,\r\n            cropLeftPx,\r\n            cropTopPx,\r\n            cropRightPx,\r\n            cropBottomPx,\r\n            undefined,\r\n            undefined\r\n        );\r\n        setSize(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);\r\n        setSize(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);\r\n        setSize(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);\r\n        setSize(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);\r\n\r\n        if (angleRad !== undefined) {\r\n            updateHandleCursor(cropHandles, angleRad);\r\n        }\r\n    }\r\n\r\n    if (resizers && !isRotating) {\r\n        const clientWidth = wrapper.clientWidth;\r\n        const clientHeight = wrapper.clientHeight;\r\n\r\n        const actualDimensions = getActualWrapperDimensions(image, clientWidth, clientHeight);\r\n\r\n        doubleCheckResize(\r\n            editInfo,\r\n            options.preserveRatio || false,\r\n            actualDimensions.width,\r\n            actualDimensions.height\r\n        );\r\n\r\n        const resizeHandles = filterInnerResizerHandles(resizers);\r\n\r\n        if (angleRad !== undefined) {\r\n            updateHandleCursor(resizeHandles, angleRad);\r\n        }\r\n\r\n        updateSideHandlesVisibility(resizeHandles, smallImage);\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"updateWrapper.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/utils/updateWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { doubleCheckResize } from './doubleCheckResize';\nimport { filterInnerResizerHandles } from './filterInnerResizerHandles';\nimport { getGeneratedImageSize } from './generateImageSize';\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport { toArray } from 'roosterjs-content-model-dom';\nimport { updateHandleCursor } from './updateHandleCursor';\nimport { updateSideHandlesVisibility } from '../Resizer/updateSideHandlesVisibility';\nimport type { ImageEditOptions } from '../types/ImageEditOptions';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\nimport {\n    getActualWrapperDimensions,\n    getPx,\n    isASmallImage,\n    setFlipped,\n    setSize,\n    setWrapperSizeDimensions,\n} from './imageEditUtils';\n\n/**\n * @internal\n */\nexport function updateWrapper(\n    editInfo: ImageMetadataFormat,\n    options: ImageEditOptions,\n    image: HTMLImageElement,\n    clonedImage: HTMLImageElement,\n    wrapper: HTMLSpanElement,\n    resizers?: HTMLDivElement[],\n    croppers?: HTMLDivElement[],\n    isRTL?: boolean,\n    isRotating?: boolean\n) {\n    const {\n        angleRad,\n        bottomPercent,\n        leftPercent,\n        rightPercent,\n        topPercent,\n        flippedHorizontal,\n        flippedVertical,\n    } = editInfo;\n\n    const generateImageSize = getGeneratedImageSize(editInfo, croppers && croppers?.length > 0);\n    if (!generateImageSize) {\n        return;\n    }\n    const {\n        targetWidth,\n        targetHeight,\n        originalWidth,\n        originalHeight,\n        visibleWidth,\n        visibleHeight,\n    } = generateImageSize;\n\n    const marginHorizontal = (targetWidth - visibleWidth) / 2;\n    const marginVertical = (targetHeight - visibleHeight) / 2;\n    const cropLeftPx = originalWidth * (leftPercent || 0);\n    const cropRightPx = originalWidth * (rightPercent || 0);\n    const cropTopPx = originalHeight * (topPercent || 0);\n    const cropBottomPx = originalHeight * (bottomPercent || 0);\n\n    // Update size and margin of the wrapper\n    wrapper.style.marginTop = `${marginVertical}px`;\n    wrapper.style.marginBottom = `${marginVertical + 5}px `; // 5px to adjust the image on top of the handles\n    wrapper.style.marginLeft = `${marginHorizontal}px`;\n    wrapper.style.marginRight = `${marginHorizontal}px`;\n\n    wrapper.style.transform = `rotate(${angleRad}rad)`;\n    setWrapperSizeDimensions(wrapper, image, visibleWidth, visibleHeight, !!isRotating);\n    wrapper.style.verticalAlign = 'text-bottom';\n\n    // Update the text-alignment to avoid the image to overflow if the parent element have align center or right\n    // or if the direction is Right To Left\n    if (isRTL) {\n        wrapper.style.textAlign = 'right';\n        if (!croppers) {\n            clonedImage.style.left = getPx(cropLeftPx);\n            clonedImage.style.right = getPx(-cropRightPx);\n        }\n    } else {\n        wrapper.style.textAlign = 'left';\n    }\n\n    if (!isRotating) {\n        // Update size of the image\n        clonedImage.style.width = getPx(originalWidth);\n        clonedImage.style.height = getPx(originalHeight);\n    }\n\n    clonedImage.style.position = 'absolute';\n\n    //Update flip direction\n    setFlipped(clonedImage.parentElement, flippedHorizontal, flippedVertical);\n    const smallImage = isASmallImage(visibleWidth, visibleWidth);\n\n    if (!croppers) {\n        // For rotate/resize, set the margin of the image so that cropped part won't be visible\n        clonedImage.style.margin = `${-cropTopPx}px 0 0 ${-cropLeftPx}px`;\n    }\n\n    if (croppers && croppers.length > 0) {\n        const cropContainer = croppers[0];\n        const cropOverlays = croppers.filter(\n            cropper => cropper.className === ImageEditElementClass.CropOverlay\n        );\n        const cropHandles = toArray<HTMLElement>(\n            cropContainer.querySelectorAll(`.${ImageEditElementClass.CropHandle}`)\n        );\n\n        setSize(\n            cropContainer,\n            cropLeftPx,\n            cropTopPx,\n            cropRightPx,\n            cropBottomPx,\n            undefined,\n            undefined\n        );\n        setSize(cropOverlays[0], 0, 0, cropRightPx, undefined, undefined, cropTopPx);\n        setSize(cropOverlays[1], undefined, 0, 0, cropBottomPx, cropRightPx, undefined);\n        setSize(cropOverlays[2], cropLeftPx, undefined, 0, 0, undefined, cropBottomPx);\n        setSize(cropOverlays[3], 0, cropTopPx, undefined, 0, cropLeftPx, undefined);\n\n        if (angleRad !== undefined) {\n            updateHandleCursor(cropHandles, angleRad);\n        }\n    }\n\n    if (resizers && !isRotating) {\n        const clientWidth = wrapper.clientWidth;\n        const clientHeight = wrapper.clientHeight;\n\n        const actualDimensions = getActualWrapperDimensions(image, clientWidth, clientHeight);\n\n        doubleCheckResize(\n            editInfo,\n            options.preserveRatio || false,\n            actualDimensions.width,\n            actualDimensions.height\n        );\n\n        const resizeHandles = filterInnerResizerHandles(resizers);\n\n        if (angleRad !== undefined) {\n            updateHandleCursor(resizeHandles, angleRad);\n        }\n\n        updateSideHandlesVisibility(resizeHandles, smallImage);\n    }\n}\n"]}