roosterjs-content-model-plugins 9.4.1 → 9.5.1

package/lib/imageEdit/Rotator/createImageRotator.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImageRotator = void 0;
+var createElement_1 = require("../../pluginUtils/CreateElement/createElement");
+var ImageEditElementClass_1 = require("../types/ImageEditElementClass");
+var roosterjs_content_model_dom_1 = require("roosterjs-content-model-dom");
+var constants_1 = require("../constants/constants");
+/**
+ * @internal
+ * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
+ */
+function createImageRotator(doc, htmlOptions) {
+    return getRotateHTML(htmlOptions)
+        .map(function (element) {
+        var rotator = (0, createElement_1.createElement)(element, doc);
+        if ((0, roosterjs_content_model_dom_1.isNodeOfType)(rotator, 'ELEMENT_NODE') && (0, roosterjs_content_model_dom_1.isElementOfType)(rotator, 'div')) {
+            return rotator;
+        }
+    })
+        .filter(function (rotator) { return !!rotator; });
+}
+exports.createImageRotator = createImageRotator;
+/**
+ * @internal
+ * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image
+ *
+ */
+function getRotateHTML(_a) {
+    var borderColor = _a.borderColor, rotateHandleBackColor = _a.rotateHandleBackColor;
+    var handleLeft = constants_1.ROTATE_SIZE / 2;
+    return [
+        {
+            tag: 'div',
+            className: ImageEditElementClass_1.ImageEditElementClass.RotateCenter,
+            style: "position:absolute;left:50%;width:1px;background-color:" + borderColor + ";top:" + -constants_1.ROTATE_HANDLE_TOP + "px;height:" + constants_1.ROTATE_GAP + "px;margin-left:" + -constants_1.ROTATE_WIDTH + "px;",
+            children: [
+                {
+                    tag: 'div',
+                    className: ImageEditElementClass_1.ImageEditElementClass.RotateHandle,
+                    style: "position:absolute;background-color:" + rotateHandleBackColor + ";border:solid 1px " + borderColor + ";border-radius:50%;width:" + constants_1.ROTATE_SIZE + "px;height:" + constants_1.ROTATE_SIZE + "px;left:-" + (handleLeft + constants_1.ROTATE_WIDTH) + "px;cursor:move;top:" + -constants_1.ROTATE_SIZE + "px;line-height: 0px;",
+                    children: [getRotateIconHTML(borderColor)],
+                },
+            ],
+        },
+    ];
+}
+function getRotateIconHTML(borderColor) {
+    var _a;
+    return {
+        tag: 'svg',
+        namespace: 'http://www.w3.org/2000/svg',
+        style: "width:16px;height:16px;margin: " + constants_1.ROTATE_ICON_MARGIN + "px " + constants_1.ROTATE_ICON_MARGIN + "px",
+        children: [
+            {
+                tag: 'path',
+                namespace: 'http://www.w3.org/2000/svg',
+                attributes: (_a = {
+                        d: 'M 10.5,10.0 A 3.8,3.8 0 1 1 6.7,6.3',
+                        transform: 'matrix(1.1 1.1 -1.1 1.1 11.6 -10.8)'
+                    },
+                    _a['fill-opacity'] = '0',
+                    _a.stroke = borderColor,
+                    _a),
+            },
+            {
+                tag: 'path',
+                namespace: 'http://www.w3.org/2000/svg',
+                attributes: {
+                    d: 'M12.0 3.648l.884-.884.53 2.298-2.298-.53z',
+                    stroke: borderColor,
+                },
+            },
+        ],
+    };
+}
+//# sourceMappingURL=createImageRotator.js.map

package/lib/imageEdit/Rotator/createImageRotator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createImageRotator.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/createImageRotator.ts"],"names":[],"mappings":";;;AAAA,+EAA8E;AAC9E,wEAAuE;AACvE,2EAA4E;AAG5E,oDAMgC;AAEhC;;;GAGG;AACH,SAAgB,kBAAkB,CAAC,GAAa,EAAE,WAA6B;IAC3E,OAAO,aAAa,CAAC,WAAW,CAAC;SAC5B,GAAG,CAAC,UAAA,OAAO;QACR,IAAM,OAAO,GAAG,IAAA,6BAAa,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC5C,IAAI,IAAA,0CAAY,EAAC,OAAO,EAAE,cAAc,CAAC,IAAI,IAAA,6CAAe,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE;YAC1E,OAAO,OAAO,CAAC;SAClB;IACL,CAAC,CAAC;SACD,MAAM,CAAC,UAAA,OAAO,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CAAqB,CAAC;AAC1D,CAAC;AATD,gDASC;AAED;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAGJ;QAFf,WAAW,iBAAA,EACX,qBAAqB,2BAAA;IAErB,IAAM,UAAU,GAAG,uBAAW,GAAG,CAAC,CAAC;IACnC,OAAO;QACH;YACI,GAAG,EAAE,KAAK;YACV,SAAS,EAAE,6CAAqB,CAAC,YAAY;YAC7C,KAAK,EAAE,2DAAyD,WAAW,aAAQ,CAAC,6BAAiB,kBAAa,sBAAU,uBAAkB,CAAC,wBAAY,QAAK;YAChK,QAAQ,EAAE;gBACN;oBACI,GAAG,EAAE,KAAK;oBACV,SAAS,EAAE,6CAAqB,CAAC,YAAY;oBAC7C,KAAK,EAAE,wCAAsC,qBAAqB,0BAAqB,WAAW,iCAA4B,uBAAW,kBAAa,uBAAW,kBAC7J,UAAU,GAAG,wBAAY,4BACP,CAAC,uBAAW,yBAAsB;oBACxD,QAAQ,EAAE,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;iBAC7C;aACJ;SACJ;KACJ,CAAC;AACN,CAAC;AAED,SAAS,iBAAiB,CAAC,WAAmB;;IAC1C,OAAO;QACH,GAAG,EAAE,KAAK;QACV,SAAS,EAAE,4BAA4B;QACvC,KAAK,EAAE,oCAAkC,8BAAkB,WAAM,8BAAkB,OAAI;QACvF,QAAQ,EAAE;YACN;gBACI,GAAG,EAAE,MAAM;gBACX,SAAS,EAAE,4BAA4B;gBACvC,UAAU;wBACN,CAAC,EAAE,qCAAqC;wBACxC,SAAS,EAAE,qCAAqC;;oBAChD,GAAC,cAAc,IAAG,GAAG;oBACrB,SAAM,GAAE,WAAW;uBACtB;aACJ;YACD;gBACI,GAAG,EAAE,MAAM;gBACX,SAAS,EAAE,4BAA4B;gBACvC,UAAU,EAAE;oBACR,CAAC,EAAE,2CAA2C;oBAC9C,MAAM,EAAE,WAAW;iBACtB;aACJ;SACJ;KACJ,CAAC;AACN,CAAC","sourcesContent":["import { createElement } from '../../pluginUtils/CreateElement/createElement';\nimport { ImageEditElementClass } from '../types/ImageEditElementClass';\nimport { isElementOfType, isNodeOfType } from 'roosterjs-content-model-dom';\nimport type { CreateElementData } from '../../pluginUtils/CreateElement/CreateElementData';\nimport type { ImageHtmlOptions } from '../types/ImageHtmlOptions';\nimport {\n    ROTATE_GAP,\n    ROTATE_HANDLE_TOP,\n    ROTATE_ICON_MARGIN,\n    ROTATE_SIZE,\n    ROTATE_WIDTH,\n} from '../constants/constants';\n\n/**\n * @internal\n * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image\n */\nexport function createImageRotator(doc: Document, htmlOptions: ImageHtmlOptions) {\n    return getRotateHTML(htmlOptions)\n        .map(element => {\n            const rotator = createElement(element, doc);\n            if (isNodeOfType(rotator, 'ELEMENT_NODE') && isElementOfType(rotator, 'div')) {\n                return rotator;\n            }\n        })\n        .filter(rotator => !!rotator) as HTMLDivElement[];\n}\n\n/**\n * @internal\n * Get HTML for rotate elements, including the rotate handle with icon, and a line between the handle and the image\n *\n */\nfunction getRotateHTML({\n    borderColor,\n    rotateHandleBackColor,\n}: ImageHtmlOptions): CreateElementData[] {\n    const handleLeft = ROTATE_SIZE / 2;\n    return [\n        {\n            tag: 'div',\n            className: ImageEditElementClass.RotateCenter,\n            style: `position:absolute;left:50%;width:1px;background-color:${borderColor};top:${-ROTATE_HANDLE_TOP}px;height:${ROTATE_GAP}px;margin-left:${-ROTATE_WIDTH}px;`,\n            children: [\n                {\n                    tag: 'div',\n                    className: ImageEditElementClass.RotateHandle,\n                    style: `position:absolute;background-color:${rotateHandleBackColor};border:solid 1px ${borderColor};border-radius:50%;width:${ROTATE_SIZE}px;height:${ROTATE_SIZE}px;left:-${\n                        handleLeft + ROTATE_WIDTH\n                    }px;cursor:move;top:${-ROTATE_SIZE}px;line-height: 0px;`,\n                    children: [getRotateIconHTML(borderColor)],\n                },\n            ],\n        },\n    ];\n}\n\nfunction getRotateIconHTML(borderColor: string): CreateElementData {\n    return {\n        tag: 'svg',\n        namespace: 'http://www.w3.org/2000/svg',\n        style: `width:16px;height:16px;margin: ${ROTATE_ICON_MARGIN}px ${ROTATE_ICON_MARGIN}px`,\n        children: [\n            {\n                tag: 'path',\n                namespace: 'http://www.w3.org/2000/svg',\n                attributes: {\n                    d: 'M 10.5,10.0 A 3.8,3.8 0 1 1 6.7,6.3',\n                    transform: 'matrix(1.1 1.1 -1.1 1.1 11.6 -10.8)',\n                    ['fill-opacity']: '0',\n                    stroke: borderColor,\n                },\n            },\n            {\n                tag: 'path',\n                namespace: 'http://www.w3.org/2000/svg',\n                attributes: {\n                    d: 'M12.0 3.648l.884-.884.53 2.298-2.298-.53z',\n                    stroke: borderColor,\n                },\n            },\n        ],\n    };\n}\n"]}

package/lib/imageEdit/Rotator/rotatorContext.d.ts

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

package/lib/imageEdit/Rotator/rotatorContext.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rotator = void 0;
+var tslib_1 = require("tslib");
+var constants_1 = require("../constants/constants");
+/**
+ * @internal
+ * The rotate drag and drop handler
+ */
+exports.Rotator = {
+    onDragStart: function (_a) {
+        var editInfo = _a.editInfo;
+        return ((0, tslib_1.__assign)({}, editInfo));
+    },
+    onDragging: function (_a, e, base, deltaX, deltaY) {
+        var _b, _c;
+        var editInfo = _a.editInfo, options = _a.options;
+        if (editInfo.heightPx) {
+            var distance = editInfo.heightPx / 2 + constants_1.DEFAULT_ROTATE_HANDLE_HEIGHT;
+            var newX = distance * Math.sin((_b = base.angleRad) !== null && _b !== void 0 ? _b : 0) + deltaX;
+            var newY = distance * Math.cos((_c = base.angleRad) !== null && _c !== void 0 ? _c : 0) - deltaY;
+            var angleInRad = Math.atan2(newX, newY);
+            if (!e.altKey && options && options.minRotateDeg !== undefined) {
+                var angleInDeg = angleInRad * constants_1.DEG_PER_RAD;
+                var adjustedAngleInDeg = Math.round(angleInDeg / options.minRotateDeg) * options.minRotateDeg;
+                angleInRad = adjustedAngleInDeg / constants_1.DEG_PER_RAD;
+            }
+            if (editInfo.angleRad != angleInRad) {
+                editInfo.angleRad = angleInRad;
+                return true;
+            }
+        }
+        return false;
+    },
+};
+//# sourceMappingURL=rotatorContext.js.map

package/lib/imageEdit/Rotator/rotatorContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rotatorContext.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/rotatorContext.ts"],"names":[],"mappings":";;;;AAAA,oDAAmF;AAKnF;;;GAGG;AACU,QAAA,OAAO,GAAsE;IACtF,WAAW,EAAE,UAAC,EAAY;YAAV,QAAQ,cAAA;QAAO,OAAA,2BAAM,QAAQ,EAAG;IAAjB,CAAiB;IAChD,UAAU,EAAE,UAAC,EAAqB,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;;YAA5C,QAAQ,cAAA,EAAE,OAAO,aAAA;QAC5B,IAAI,QAAQ,CAAC,QAAQ,EAAE;YACnB,IAAM,QAAQ,GAAG,QAAQ,CAAC,QAAQ,GAAG,CAAC,GAAG,wCAA4B,CAAC;YACtE,IAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,QAAQ,mCAAI,CAAC,CAAC,GAAG,MAAM,CAAC;YAC9D,IAAM,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,MAAA,IAAI,CAAC,QAAQ,mCAAI,CAAC,CAAC,GAAG,MAAM,CAAC;YAC9D,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAExC,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,YAAY,KAAK,SAAS,EAAE;gBAC5D,IAAM,UAAU,GAAG,UAAU,GAAG,uBAAW,CAAC;gBAC5C,IAAM,kBAAkB,GACpB,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC,GAAG,OAAO,CAAC,YAAY,CAAC;gBACzE,UAAU,GAAG,kBAAkB,GAAG,uBAAW,CAAC;aACjD;YAED,IAAI,QAAQ,CAAC,QAAQ,IAAI,UAAU,EAAE;gBACjC,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;gBAC/B,OAAO,IAAI,CAAC;aACf;SACJ;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ,CAAC","sourcesContent":["import { DEFAULT_ROTATE_HANDLE_HEIGHT, DEG_PER_RAD } from '../constants/constants';\nimport type { ImageRotateMetadataFormat } from 'roosterjs-content-model-types';\nimport type { DragAndDropHandler } from '../../pluginUtils/DragAndDrop/DragAndDropHandler';\nimport type { DragAndDropContext } from '../types/DragAndDropContext';\n\n/**\n * @internal\n * The rotate drag and drop handler\n */\nexport const Rotator: DragAndDropHandler<DragAndDropContext, ImageRotateMetadataFormat> = {\n    onDragStart: ({ editInfo }) => ({ ...editInfo }),\n    onDragging: ({ editInfo, options }, e, base, deltaX, deltaY) => {\n        if (editInfo.heightPx) {\n            const distance = editInfo.heightPx / 2 + DEFAULT_ROTATE_HANDLE_HEIGHT;\n            const newX = distance * Math.sin(base.angleRad ?? 0) + deltaX;\n            const newY = distance * Math.cos(base.angleRad ?? 0) - deltaY;\n            let angleInRad = Math.atan2(newX, newY);\n\n            if (!e.altKey && options && options.minRotateDeg !== undefined) {\n                const angleInDeg = angleInRad * DEG_PER_RAD;\n                const adjustedAngleInDeg =\n                    Math.round(angleInDeg / options.minRotateDeg) * options.minRotateDeg;\n                angleInRad = adjustedAngleInDeg / DEG_PER_RAD;\n            }\n\n            if (editInfo.angleRad != angleInRad) {\n                editInfo.angleRad = angleInRad;\n                return true;\n            }\n        }\n        return false;\n    },\n};\n"]}

package/lib/imageEdit/Rotator/updateRotateHandle.d.ts

@@ -0,0 +1,7 @@
+import type { Rect } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
+ * Fix it by reduce the distance from image to rotate handle
+ */
+export declare function updateRotateHandle(editorRect: Rect, angleRad: number, wrapper: HTMLElement, rotateCenter: HTMLElement, rotateHandle: HTMLElement, isSmallImage: boolean): void;

package/lib/imageEdit/Rotator/updateRotateHandle.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateRotateHandle = void 0;
+var constants_1 = require("../constants/constants");
+/**
+ * @internal
+ * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.
+ * Fix it by reduce the distance from image to rotate handle
+ */
+function updateRotateHandle(editorRect, angleRad, wrapper, rotateCenter, rotateHandle, isSmallImage) {
+    if (isSmallImage) {
+        rotateCenter.style.display = 'none';
+        rotateHandle.style.display = 'none';
+        return;
+    }
+    else {
+        rotateCenter.style.display = '';
+        rotateHandle.style.display = '';
+        var rotateCenterRect = rotateCenter.getBoundingClientRect();
+        var wrapperRect = wrapper.getBoundingClientRect();
+        var ROTATOR_HEIGHT = constants_1.ROTATE_SIZE + constants_1.ROTATE_GAP + constants_1.RESIZE_HANDLE_MARGIN;
+        if (rotateCenterRect && wrapperRect) {
+            var adjustedDistance = Number.MAX_SAFE_INTEGER;
+            var angle = angleRad * constants_1.DEG_PER_RAD;
+            if (angle < 45 && angle > -45 && wrapperRect.top - editorRect.top < ROTATOR_HEIGHT) {
+                var top_1 = rotateCenterRect.top - editorRect.top;
+                adjustedDistance = top_1;
+            }
+            else if (angle <= -80 &&
+                angle >= -100 &&
+                wrapperRect.left - editorRect.left < ROTATOR_HEIGHT) {
+                var left = rotateCenterRect.left - editorRect.left;
+                adjustedDistance = left;
+            }
+            else if (angle >= 80 &&
+                angle <= 100 &&
+                editorRect.right - wrapperRect.right < ROTATOR_HEIGHT) {
+                var right = rotateCenterRect.right - editorRect.right;
+                adjustedDistance = Math.min(editorRect.right - wrapperRect.right, right);
+            }
+            else if ((angle <= -160 || angle >= 160) &&
+                editorRect.bottom - wrapperRect.bottom < ROTATOR_HEIGHT) {
+                var bottom = rotateCenterRect.bottom - editorRect.bottom;
+                adjustedDistance = Math.min(editorRect.bottom - wrapperRect.bottom, bottom);
+            }
+            var rotateGap = Math.max(Math.min(constants_1.ROTATE_GAP, adjustedDistance), 0);
+            var rotateTop = Math.max(Math.min(constants_1.ROTATE_SIZE, adjustedDistance - rotateGap), 0);
+            rotateCenter.style.top = -rotateGap - constants_1.RESIZE_HANDLE_MARGIN + 'px';
+            rotateCenter.style.height = rotateGap + 'px';
+            rotateHandle.style.top = -rotateTop + 'px';
+        }
+    }
+}
+exports.updateRotateHandle = updateRotateHandle;
+//# sourceMappingURL=updateRotateHandle.js.map

package/lib/imageEdit/Rotator/updateRotateHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"updateRotateHandle.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/Rotator/updateRotateHandle.ts"],"names":[],"mappings":"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","sourcesContent":["import { DEG_PER_RAD, RESIZE_HANDLE_MARGIN, ROTATE_GAP, ROTATE_SIZE } from '../constants/constants';\nimport type { Rect } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Move rotate handle. When image is very close to the border of editor, rotate handle may not be visible.\n * Fix it by reduce the distance from image to rotate handle\n */\nexport function updateRotateHandle(\n    editorRect: Rect,\n    angleRad: number,\n    wrapper: HTMLElement,\n    rotateCenter: HTMLElement,\n    rotateHandle: HTMLElement,\n    isSmallImage: boolean\n) {\n    if (isSmallImage) {\n        rotateCenter.style.display = 'none';\n        rotateHandle.style.display = 'none';\n        return;\n    } else {\n        rotateCenter.style.display = '';\n        rotateHandle.style.display = '';\n        const rotateCenterRect = rotateCenter.getBoundingClientRect();\n        const wrapperRect = wrapper.getBoundingClientRect();\n        const ROTATOR_HEIGHT = ROTATE_SIZE + ROTATE_GAP + RESIZE_HANDLE_MARGIN;\n        if (rotateCenterRect && wrapperRect) {\n            let adjustedDistance = Number.MAX_SAFE_INTEGER;\n            const angle = angleRad * DEG_PER_RAD;\n\n            if (angle < 45 && angle > -45 && wrapperRect.top - editorRect.top < ROTATOR_HEIGHT) {\n                const top = rotateCenterRect.top - editorRect.top;\n                adjustedDistance = top;\n            } else if (\n                angle <= -80 &&\n                angle >= -100 &&\n                wrapperRect.left - editorRect.left < ROTATOR_HEIGHT\n            ) {\n                const left = rotateCenterRect.left - editorRect.left;\n                adjustedDistance = left;\n            } else if (\n                angle >= 80 &&\n                angle <= 100 &&\n                editorRect.right - wrapperRect.right < ROTATOR_HEIGHT\n            ) {\n                const right = rotateCenterRect.right - editorRect.right;\n                adjustedDistance = Math.min(editorRect.right - wrapperRect.right, right);\n            } else if (\n                (angle <= -160 || angle >= 160) &&\n                editorRect.bottom - wrapperRect.bottom < ROTATOR_HEIGHT\n            ) {\n                const bottom = rotateCenterRect.bottom - editorRect.bottom;\n                adjustedDistance = Math.min(editorRect.bottom - wrapperRect.bottom, bottom);\n            }\n\n            const rotateGap = Math.max(Math.min(ROTATE_GAP, adjustedDistance), 0);\n            const rotateTop = Math.max(Math.min(ROTATE_SIZE, adjustedDistance - rotateGap), 0);\n            rotateCenter.style.top = -rotateGap - RESIZE_HANDLE_MARGIN + 'px';\n            rotateCenter.style.height = rotateGap + 'px';\n            rotateHandle.style.top = -rotateTop + 'px';\n        }\n    }\n}\n"]}

package/lib/imageEdit/constants/constants.d.ts

@@ -0,0 +1,73 @@
+import type { DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';
+/**
+ * @internal
+ */
+export declare const RESIZE_HANDLE_SIZE = 10;
+/**
+ * @internal
+ */
+export declare const RESIZE_HANDLE_MARGIN = 6;
+/**
+ * @internal
+ */
+export declare const ROTATE_SIZE = 32;
+/**
+ * @internal
+ */
+export declare const ROTATE_GAP = 15;
+/**
+ * @internal
+ */
+export declare const DEG_PER_RAD: number;
+/**
+ * @internal
+ */
+export declare const DEFAULT_ROTATE_HANDLE_HEIGHT: number;
+/**
+ * @internal
+ */
+export declare const ROTATE_ICON_MARGIN = 8;
+/**
+ * @internal
+ */
+export declare const ROTATION: Record<string, number>;
+/**
+ * @internal
+ */
+export declare const Xs: DNDDirectionX[];
+/**
+ * @internal
+ */
+export declare const Ys: DnDDirectionY[];
+/**
+ * @internal
+ */
+export declare const ROTATE_WIDTH = 1;
+/**
+ * @internal
+ */
+export declare const ROTATE_HANDLE_TOP: number;
+/**
+ * @internal
+ */
+export declare const CROP_HANDLE_SIZE = 22;
+/**
+ * @internal
+ */
+export declare const CROP_HANDLE_WIDTH = 7;
+/**
+ * @internal
+ */
+export declare const XS_CROP: DNDDirectionX[];
+/**
+ * @internal
+ */
+export declare const YS_CROP: DnDDirectionY[];
+/**
+ * @internal
+ */
+export declare const MIN_HEIGHT_WIDTH: number;
+/**
+ * @internal
+ */
+export declare const RESIZE_IMAGE = "resizeImage";

package/lib/imageEdit/constants/constants.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RESIZE_IMAGE = exports.MIN_HEIGHT_WIDTH = exports.YS_CROP = exports.XS_CROP = exports.CROP_HANDLE_WIDTH = exports.CROP_HANDLE_SIZE = exports.ROTATE_HANDLE_TOP = exports.ROTATE_WIDTH = exports.Ys = exports.Xs = exports.ROTATION = exports.ROTATE_ICON_MARGIN = exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.DEG_PER_RAD = exports.ROTATE_GAP = exports.ROTATE_SIZE = exports.RESIZE_HANDLE_MARGIN = exports.RESIZE_HANDLE_SIZE = void 0;
+/**
+ * @internal
+ */
+exports.RESIZE_HANDLE_SIZE = 10;
+/**
+ * @internal
+ */
+exports.RESIZE_HANDLE_MARGIN = 6;
+/**
+ * @internal
+ */
+exports.ROTATE_SIZE = 32;
+/**
+ * @internal
+ */
+exports.ROTATE_GAP = 15;
+/**
+ * @internal
+ */
+exports.DEG_PER_RAD = 180 / Math.PI;
+/**
+ * @internal
+ */
+exports.DEFAULT_ROTATE_HANDLE_HEIGHT = exports.ROTATE_SIZE / 2 + exports.ROTATE_GAP;
+/**
+ * @internal
+ */
+exports.ROTATE_ICON_MARGIN = 8;
+/**
+ * @internal
+ */
+exports.ROTATION = {
+    sw: 0,
+    nw: 90,
+    ne: 180,
+    se: 270,
+};
+/**
+ * @internal
+ */
+exports.Xs = ['w', '', 'e'];
+/**
+ * @internal
+ */
+exports.Ys = ['s', '', 'n'];
+/**
+ * @internal
+ */
+exports.ROTATE_WIDTH = 1;
+/**
+ * @internal
+ */
+exports.ROTATE_HANDLE_TOP = exports.ROTATE_GAP + exports.RESIZE_HANDLE_MARGIN;
+/**
+ * @internal
+ */
+exports.CROP_HANDLE_SIZE = 22;
+/**
+ * @internal
+ */
+exports.CROP_HANDLE_WIDTH = 7;
+/**
+ * @internal
+ */
+exports.XS_CROP = ['w', 'e'];
+/**
+ * @internal
+ */
+exports.YS_CROP = ['s', 'n'];
+/**
+ * @internal
+ */
+exports.MIN_HEIGHT_WIDTH = 3 * exports.RESIZE_HANDLE_SIZE + 2 * exports.RESIZE_HANDLE_MARGIN;
+/**
+ * @internal
+ */
+exports.RESIZE_IMAGE = 'resizeImage';
+//# sourceMappingURL=constants.js.map

package/lib/imageEdit/constants/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/constants/constants.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACU,QAAA,kBAAkB,GAAG,EAAE,CAAC;AAErC;;GAEG;AACU,QAAA,oBAAoB,GAAG,CAAC,CAAC;AAEtC;;GAEG;AACU,QAAA,WAAW,GAAG,EAAE,CAAC;AAE9B;;GAEG;AACU,QAAA,UAAU,GAAG,EAAE,CAAC;AAE7B;;GAEG;AACU,QAAA,WAAW,GAAG,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;AAEzC;;GAEG;AACU,QAAA,4BAA4B,GAAG,mBAAW,GAAG,CAAC,GAAG,kBAAU,CAAC;AAEzE;;GAEG;AACU,QAAA,kBAAkB,GAAG,CAAC,CAAC;AAEpC;;GAEG;AACU,QAAA,QAAQ,GAA2B;IAC5C,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;CACV,CAAC;AAEF;;GAEG;AACU,QAAA,EAAE,GAAoB,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACU,QAAA,EAAE,GAAoB,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;AAElD;;GAEG;AACU,QAAA,YAAY,GAAG,CAAC,CAAC;AAE9B;;GAEG;AACU,QAAA,iBAAiB,GAAG,kBAAU,GAAG,4BAAoB,CAAC;AAEnE;;GAEG;AACU,QAAA,gBAAgB,GAAG,EAAE,CAAC;AAEnC;;GAEG;AACU,QAAA,iBAAiB,GAAG,CAAC,CAAC;AAEnC;;GAEG;AACU,QAAA,OAAO,GAAoB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAEnD;;GAEG;AACU,QAAA,OAAO,GAAoB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAEnD;;GAEG;AACU,QAAA,gBAAgB,GAAG,CAAC,GAAG,0BAAkB,GAAG,CAAC,GAAG,4BAAoB,CAAC;AAElF;;GAEG;AACU,QAAA,YAAY,GAAG,aAAa,CAAC","sourcesContent":["import type { DNDDirectionX, DnDDirectionY } from '../types/DragAndDropContext';\n\n/**\n * @internal\n */\nexport const RESIZE_HANDLE_SIZE = 10;\n\n/**\n * @internal\n */\nexport const RESIZE_HANDLE_MARGIN = 6;\n\n/**\n * @internal\n */\nexport const ROTATE_SIZE = 32;\n\n/**\n * @internal\n */\nexport const ROTATE_GAP = 15;\n\n/**\n * @internal\n */\nexport const DEG_PER_RAD = 180 / Math.PI;\n\n/**\n * @internal\n */\nexport const DEFAULT_ROTATE_HANDLE_HEIGHT = ROTATE_SIZE / 2 + ROTATE_GAP;\n\n/**\n * @internal\n */\nexport const ROTATE_ICON_MARGIN = 8;\n\n/**\n * @internal\n */\nexport const ROTATION: Record<string, number> = {\n    sw: 0,\n    nw: 90,\n    ne: 180,\n    se: 270,\n};\n\n/**\n * @internal\n */\nexport const Xs: DNDDirectionX[] = ['w', '', 'e'];\n\n/**\n * @internal\n */\nexport const Ys: DnDDirectionY[] = ['s', '', 'n'];\n\n/**\n * @internal\n */\nexport const ROTATE_WIDTH = 1;\n\n/**\n * @internal\n */\nexport const ROTATE_HANDLE_TOP = ROTATE_GAP + RESIZE_HANDLE_MARGIN;\n\n/**\n * @internal\n */\nexport const CROP_HANDLE_SIZE = 22;\n\n/**\n * @internal\n */\nexport const CROP_HANDLE_WIDTH = 7;\n\n/**\n * @internal\n */\nexport const XS_CROP: DNDDirectionX[] = ['w', 'e'];\n\n/**\n * @internal\n */\nexport const YS_CROP: DnDDirectionY[] = ['s', 'n'];\n\n/**\n * @internal\n */\nexport const MIN_HEIGHT_WIDTH = 3 * RESIZE_HANDLE_SIZE + 2 * RESIZE_HANDLE_MARGIN;\n\n/**\n * @internal\n */\nexport const RESIZE_IMAGE = 'resizeImage';\n"]}

package/lib/imageEdit/types/DragAndDropContext.d.ts

@@ -0,0 +1,39 @@
+import type { ImageEditElementClass } from './ImageEditElementClass';
+import type { ImageEditOptions } from './ImageEditOptions';
+import type { ImageMetadataFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ * Horizontal direction types for image edit
+ */
+export declare type DNDDirectionX = 'w' | '' | 'e';
+/**
+ * @internal
+ * Vertical direction types for image edit
+ */
+export declare type DnDDirectionY = 'n' | '' | 's';
+/**
+ * @internal
+ * Context object of image editing for DragAndDropHelper
+ */
+export interface DragAndDropContext {
+    /**
+     * The CSS class name of this editing element
+     */
+    elementClass: ImageEditElementClass;
+    /**
+     * Edit info of current image, can be modified by handlers
+     */
+    editInfo: ImageMetadataFormat;
+    /**
+     * Horizontal direction
+     */
+    x: DNDDirectionX;
+    /**
+     * Vertical direction
+     */
+    y: DnDDirectionY;
+    /**
+     * Edit options
+     */
+    options: ImageEditOptions;
+}

package/lib/imageEdit/types/DragAndDropContext.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=DragAndDropContext.js.map

package/lib/imageEdit/types/DragAndDropContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragAndDropContext.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/types/DragAndDropContext.ts"],"names":[],"mappings":"","sourcesContent":["import type { ImageEditElementClass } from './ImageEditElementClass';\nimport type { ImageEditOptions } from './ImageEditOptions';\nimport type { ImageMetadataFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n * Horizontal direction types for image edit\n */\nexport type DNDDirectionX = 'w' | '' | 'e';\n\n/**\n * @internal\n * Vertical direction types for image edit\n */\nexport type DnDDirectionY = 'n' | '' | 's';\n\n/**\n * @internal\n * Context object of image editing for DragAndDropHelper\n */\nexport interface DragAndDropContext {\n    /**\n     * The CSS class name of this editing element\n     */\n    elementClass: ImageEditElementClass;\n\n    /**\n     * Edit info of current image, can be modified by handlers\n     */\n    editInfo: ImageMetadataFormat;\n\n    /**\n     * Horizontal direction\n     */\n    x: DNDDirectionX;\n\n    /**\n     * Vertical direction\n     */\n    y: DnDDirectionY;\n\n    /**\n     * Edit options\n     */\n    options: ImageEditOptions;\n}\n"]}

package/lib/imageEdit/types/GeneratedImageSize.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @internal The result structure for getGeneratedImageSize()
+ */
+export interface GeneratedImageSize {
+    /**
+     * Final image width after rotate and crop
+     */
+    targetWidth: number;
+    /**
+     * Final image height after rotate and crop
+     */
+    targetHeight: number;
+    /**
+     * Original width of image before rotate and crop
+     */
+    originalWidth: number;
+    /**
+     * Original height of image before rotate and crop
+     */
+    originalHeight: number;
+    /**
+     * Visible width of image at current state
+     * Depends on if beforeCrop is true passed into getGeneratedImageSize(),
+     * the value can be before or after crop
+     */
+    visibleWidth: number;
+    /**
+     * Visible height of image at current state
+     * Depends on if beforeCrop is true passed into getGeneratedImageSize(),
+     * the value can be before or after crop
+     */
+    visibleHeight: number;
+}

package/lib/imageEdit/types/GeneratedImageSize.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=GeneratedImageSize.js.map

package/lib/imageEdit/types/GeneratedImageSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneratedImageSize.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/types/GeneratedImageSize.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal The result structure for getGeneratedImageSize()\n */\nexport interface GeneratedImageSize {\n    /**\n     * Final image width after rotate and crop\n     */\n    targetWidth: number;\n\n    /**\n     * Final image height after rotate and crop\n     */\n    targetHeight: number;\n\n    /**\n     * Original width of image before rotate and crop\n     */\n    originalWidth: number;\n\n    /**\n     * Original height of image before rotate and crop\n     */\n    originalHeight: number;\n\n    /**\n     * Visible width of image at current state\n     * Depends on if beforeCrop is true passed into getGeneratedImageSize(),\n     * the value can be before or after crop\n     */\n    visibleWidth: number;\n\n    /**\n     * Visible height of image at current state\n     * Depends on if beforeCrop is true passed into getGeneratedImageSize(),\n     * the value can be before or after crop\n     */\n    visibleHeight: number;\n}\n"]}

package/lib/imageEdit/types/ImageEditElementClass.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @internal
+ * CSS class names for image editing elements
+ */
+export declare enum ImageEditElementClass {
+    /**
+     * CSS class name for resize handle
+     */
+    ResizeHandle = "r_resizeH",
+    /**
+     * CSS class name for rotate handle
+     */
+    RotateHandle = "r_rotateH",
+    /**
+     * CSS class name for the container of rotate handle
+     */
+    RotateCenter = "r_rotateC",
+    /**
+     * CSS class name for crop overlay
+     */
+    CropOverlay = "r_cropO",
+    /**
+     * CSS class name for container of crop handle
+     */
+    CropContainer = "r_cropC",
+    /**
+     * CSS class name for crop handle
+     */
+    CropHandle = "r_cropH"
+}

package/lib/imageEdit/types/ImageEditElementClass.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageEditElementClass = void 0;
+/**
+ * @internal
+ * CSS class names for image editing elements
+ */
+var ImageEditElementClass;
+(function (ImageEditElementClass) {
+    /**
+     * CSS class name for resize handle
+     */
+    ImageEditElementClass["ResizeHandle"] = "r_resizeH";
+    /**
+     * CSS class name for rotate handle
+     */
+    ImageEditElementClass["RotateHandle"] = "r_rotateH";
+    /**
+     * CSS class name for the container of rotate handle
+     */
+    ImageEditElementClass["RotateCenter"] = "r_rotateC";
+    /**
+     * CSS class name for crop overlay
+     */
+    ImageEditElementClass["CropOverlay"] = "r_cropO";
+    /**
+     * CSS class name for container of crop handle
+     */
+    ImageEditElementClass["CropContainer"] = "r_cropC";
+    /**
+     * CSS class name for crop handle
+     */
+    ImageEditElementClass["CropHandle"] = "r_cropH";
+})(ImageEditElementClass = exports.ImageEditElementClass || (exports.ImageEditElementClass = {}));
+//# sourceMappingURL=ImageEditElementClass.js.map

package/lib/imageEdit/types/ImageEditElementClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditElementClass.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditElementClass.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,IAAY,qBA8BX;AA9BD,WAAY,qBAAqB;IAC7B;;OAEG;IACH,mDAA0B,CAAA;IAE1B;;OAEG;IACH,mDAA0B,CAAA;IAE1B;;OAEG;IACH,mDAA0B,CAAA;IAE1B;;OAEG;IACH,gDAAuB,CAAA;IAEvB;;OAEG;IACH,kDAAyB,CAAA;IAEzB;;OAEG;IACH,+CAAsB,CAAA;AAC1B,CAAC,EA9BW,qBAAqB,GAArB,6BAAqB,KAArB,6BAAqB,QA8BhC","sourcesContent":["/**\n * @internal\n * CSS class names for image editing elements\n */\nexport enum ImageEditElementClass {\n    /**\n     * CSS class name for resize handle\n     */\n    ResizeHandle = 'r_resizeH',\n\n    /**\n     * CSS class name for rotate handle\n     */\n    RotateHandle = 'r_rotateH',\n\n    /**\n     * CSS class name for the container of rotate handle\n     */\n    RotateCenter = 'r_rotateC',\n\n    /**\n     * CSS class name for crop overlay\n     */\n    CropOverlay = 'r_cropO',\n\n    /**\n     * CSS class name for container of crop handle\n     */\n    CropContainer = 'r_cropC',\n\n    /**\n     * CSS class name for crop handle\n     */\n    CropHandle = 'r_cropH',\n}\n"]}

package/lib/imageEdit/types/ImageEditOptions.d.ts

@@ -0,0 +1,55 @@
+import type { ImageEditOperation } from 'roosterjs-content-model-types';
+/**
+ * Options for customize ImageEdit plugin
+ */
+export interface ImageEditOptions {
+    /**
+     * Color of resize/rotate border, handle and icon
+     * @default #DB626C
+     */
+    borderColor?: string;
+    /**
+     * Minimum resize/crop width
+     * @default 10
+     */
+    minWidth?: number;
+    /**
+     * Minimum resize/crop height
+     * @default 10
+     */
+    minHeight?: number;
+    /**
+     * Whether preserve width/height ratio when resize
+     * Pressing SHIFT key when resize will for preserve ratio even this value is set to false
+     * @default false
+     */
+    preserveRatio?: boolean;
+    /**
+     * Minimum degree increase/decrease when rotate image.
+     * Pressing SHIFT key when rotate will ignore this value and rotate by any degree with mouse moving
+     * @default 5
+     */
+    minRotateDeg?: number;
+    /**
+     * Selector of the image that allows editing
+     * @default img
+     */
+    imageSelector?: string;
+    /**
+     * Whether side resizing (single direction resizing) is disabled. @default false
+     */
+    disableSideResize?: boolean;
+    /**
+     * Whether image rotate is disabled. @default false
+     */
+    disableRotate?: boolean;
+    /**
+     * Whether image crop is disabled. @default false
+     */
+    disableCrop?: boolean;
+    /**
+     * Which operations will be executed when image is selected
+     * @default resizeAndRotate
+     */
+    onSelectState?: ImageEditOperation;
+}

package/lib/imageEdit/types/ImageEditOptions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ImageEditOptions.js.map

package/lib/imageEdit/types/ImageEditOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageEditOptions.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageEditOptions.ts"],"names":[],"mappings":"","sourcesContent":["import type { ImageEditOperation } from 'roosterjs-content-model-types';\n\n/**\n * Options for customize ImageEdit plugin\n */\nexport interface ImageEditOptions {\n    /**\n     * Color of resize/rotate border, handle and icon\n     * @default #DB626C\n     */\n    borderColor?: string;\n\n    /**\n     * Minimum resize/crop width\n     * @default 10\n     */\n    minWidth?: number;\n\n    /**\n     * Minimum resize/crop height\n     * @default 10\n     */\n    minHeight?: number;\n\n    /**\n     * Whether preserve width/height ratio when resize\n     * Pressing SHIFT key when resize will for preserve ratio even this value is set to false\n     * @default false\n     */\n    preserveRatio?: boolean;\n\n    /**\n     * Minimum degree increase/decrease when rotate image.\n     * Pressing SHIFT key when rotate will ignore this value and rotate by any degree with mouse moving\n     * @default 5\n     */\n    minRotateDeg?: number;\n\n    /**\n     * Selector of the image that allows editing\n     * @default img\n     */\n    imageSelector?: string;\n\n    /**\n     * Whether side resizing (single direction resizing) is disabled. @default false\n     */\n    disableSideResize?: boolean;\n\n    /**\n     * Whether image rotate is disabled. @default false\n     */\n    disableRotate?: boolean;\n\n    /**\n     * Whether image crop is disabled. @default false\n     */\n    disableCrop?: boolean;\n\n    /**\n     * Which operations will be executed when image is selected\n     * @default resizeAndRotate\n     */\n    onSelectState?: ImageEditOperation;\n}\n"]}

package/lib/imageEdit/types/ImageHtmlOptions.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @internal
+ * Options for retrieve HTML string for image editing
+ */
+export interface ImageHtmlOptions {
+    /**
+     * Border and handle color of resize and rotate handle
+     */
+    borderColor: string;
+    /**
+     * Background color of the rotate handle
+     */
+    rotateHandleBackColor: string;
+    /**
+     * Verify if the area of the image is less than 10000px, if yes, don't insert the side handles
+     */
+    isSmallImage: boolean;
+}

package/lib/imageEdit/types/ImageHtmlOptions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=ImageHtmlOptions.js.map

package/lib/imageEdit/types/ImageHtmlOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageHtmlOptions.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-plugins/lib/imageEdit/types/ImageHtmlOptions.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * @internal\n * Options for retrieve HTML string for image editing\n */\nexport interface ImageHtmlOptions {\n    /**\n     * Border and handle color of resize and rotate handle\n     */\n    borderColor: string;\n\n    /**\n     * Background color of the rotate handle\n     */\n    rotateHandleBackColor: string;\n\n    /**\n     * Verify if the area of the image is less than 10000px, if yes, don't insert the side handles\n     */\n    isSmallImage: boolean;\n}\n"]}