@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/creator/index.js

@@ -0,0 +1,136 @@
+import { deepClone, addClassName, removeClassName, updateMaterialInList } from '@idraw/util';
+import { classNameMap, defaultConfig, defaultStyles, getRootClassName, keyStartPoint, keyEndPoint, keyActiveMaterialType, } from './static';
+import { initStyles, destroyStyles, getMiddlewareCreatorStyles } from './styles';
+import { initRoot, resetCreationAreaBox, clearCreationAreaBox } from './dom';
+import { createMaterialByArea, updateMaterialByArea } from './util';
+import { coreEventKeys } from '../../static';
+import { triggerChangeEvent } from '../common';
+export { getMiddlewareCreatorStyles };
+export const MiddlewareCreator = (opts, config) => {
+    const { sharer, viewer, calculator, eventHub } = opts;
+    let innerConfig = Object.assign(Object.assign(Object.assign({}, defaultStyles), defaultConfig), config);
+    const styles = getMiddlewareCreatorStyles(innerConfig);
+    const rootClassName = getRootClassName();
+    let $root = null;
+    let activeMaterial = null;
+    const clear = () => {
+        sharer.setSharedStorage(keyStartPoint, null);
+        sharer.setSharedStorage(keyEndPoint, null);
+        activeMaterial = null;
+    };
+    clear();
+    let creative = false;
+    const createCallback = ({ type }) => {
+        creative = true;
+        if ($root) {
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'plus',
+            });
+            sharer.setSharedStorage(keyActiveMaterialType, type);
+            addClassName($root, [classNameMap.creative]);
+            eventHub.trigger(coreEventKeys.CLEAR_SELECT);
+        }
+    };
+    const clearCreateCallback = () => {
+        eventHub.trigger(coreEventKeys.CURSOR, {
+            type: 'auto',
+        });
+        creative = false;
+        if ($root) {
+            removeClassName($root, [classNameMap.creative]);
+        }
+    };
+    return {
+        name: '@middleware/creator',
+        use() {
+            initStyles(rootClassName, styles);
+            $root = initRoot({ rootClassName, $container: opts.container });
+            eventHub.on(coreEventKeys.CREATE, createCallback);
+            eventHub.on(coreEventKeys.CLEAR_CREATE, clearCreateCallback);
+        },
+        disuse() {
+            destroyStyles(rootClassName);
+            $root === null || $root === void 0 ? void 0 : $root.remove();
+            $root = null;
+            eventHub.trigger(coreEventKeys.CURSOR, {
+                type: 'auto',
+            });
+            eventHub.off(coreEventKeys.CREATE, createCallback);
+            eventHub.off(coreEventKeys.CLEAR_CREATE, clearCreateCallback);
+        },
+        resetConfig(config) {
+            innerConfig = Object.assign(Object.assign({}, innerConfig), config);
+        },
+        pointStart: (e) => {
+            clear();
+            if (!creative) {
+                return;
+            }
+            sharer.setSharedStorage(keyStartPoint, e.point);
+        },
+        pointMove: (e) => {
+            if (!creative) {
+                return;
+            }
+            sharer.setSharedStorage(keyEndPoint, e.point);
+            const activeMaterialType = sharer.getSharedStorage(keyActiveMaterialType);
+            const start = sharer.getSharedStorage(keyStartPoint);
+            const end = sharer.getSharedStorage(keyEndPoint);
+            const viewScaleInfo = sharer.getActiveViewScaleInfo();
+            const viewSizeInfo = sharer.getActiveViewSizeInfo();
+            const data = sharer.getActiveStorage('data');
+            if (activeMaterial && start && end) {
+                activeMaterial = updateMaterialByArea(activeMaterial, { start, end, viewScaleInfo, calculator });
+                updateMaterialInList(activeMaterial.id, activeMaterial, data.materials);
+                calculator.modifyVirtualAttributes(activeMaterial, { viewScaleInfo, viewSizeInfo, groupQueue: [] });
+            }
+            else if (activeMaterialType && start && end) {
+                activeMaterial = createMaterialByArea(activeMaterialType, { start, end, viewScaleInfo, calculator });
+                data.materials.push(activeMaterial);
+                calculator.resetVirtualItemMap(data, { viewScaleInfo, viewSizeInfo });
+            }
+            viewer.drawFrame();
+        },
+        pointEnd: () => {
+            var _a, _b;
+            if (!creative) {
+                return;
+            }
+            if (activeMaterial) {
+                const data = sharer.getActiveStorage('data');
+                const modifyRecord = {
+                    type: 'addMaterial',
+                    time: Date.now(),
+                    content: {
+                        method: 'addMaterial',
+                        id: activeMaterial.id,
+                        position: [(_a = data.materials) === null || _a === void 0 ? void 0 : _a.length],
+                        material: deepClone(activeMaterial),
+                    },
+                };
+                triggerChangeEvent(eventHub, { data, type: 'addMaterial', modifyRecord }, 'all');
+            }
+            if (innerConfig.selectAfterCreated === true && (activeMaterial === null || activeMaterial === void 0 ? void 0 : activeMaterial.id)) {
+                const id = activeMaterial.id;
+                eventHub.trigger(coreEventKeys.SELECT, { ids: [id], type: 'selectMaterial' });
+            }
+            (_b = innerConfig.afterCreated) === null || _b === void 0 ? void 0 : _b.call(innerConfig);
+            clearCreationAreaBox($root);
+            clearCreateCallback();
+            clear();
+        },
+        beforeDrawFrame() {
+            const start = sharer.getSharedStorage(keyStartPoint);
+            const end = sharer.getSharedStorage(keyEndPoint);
+            if (start && end) {
+                resetCreationAreaBox($root, {
+                    start,
+                    end,
+                });
+            }
+            else {
+                clearCreationAreaBox($root);
+            }
+        },
+    };
+};

package/dist/esm/middlewares/creator/static.d.ts

@@ -0,0 +1,14 @@
+import type { MiddlewareCreatorStyles, MiddlewareCreatorConfig } from '@idraw/types';
+export declare const key = "CREATOR";
+export declare const keyStartPoint: unique symbol;
+export declare const keyEndPoint: unique symbol;
+export declare const keyActiveMaterialType: unique symbol;
+export declare const prefix = "idraw-middleware-creator";
+export declare const getRootClassName: () => string;
+export declare const creationAreaBorderWidth = 1.5;
+export declare const defaultStyles: MiddlewareCreatorStyles;
+export declare const defaultConfig: Partial<MiddlewareCreatorConfig>;
+export declare const classNameMap: {
+    creationAreaBox: string;
+    creative: string;
+};

package/dist/esm/middlewares/creator/static.js

@@ -0,0 +1,19 @@
+import { createId } from '@idraw/util';
+export const key = 'CREATOR';
+export const keyStartPoint = Symbol(`${key}_startPoint`);
+export const keyEndPoint = Symbol(`${key}_endPoint`);
+export const keyActiveMaterialType = Symbol(`${key}_activeMaterialType`);
+export const prefix = `idraw-middleware-creator`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const creationAreaBorderWidth = 1.5;
+export const defaultStyles = {
+    zIndex: 2,
+    creationAreaBorderColor: '#1973ba',
+};
+export const defaultConfig = {
+    selectAfterCreated: true,
+};
+export const classNameMap = {
+    creationAreaBox: `${prefix}-creationAreaBox`,
+    creative: `${prefix}-creative`,
+};

package/dist/esm/middlewares/creator/styles.d.ts

@@ -0,0 +1,4 @@
+import type { MiddlewareCreatorStyles, MiddlewareCreatorConfig } from '@idraw/types';
+export declare function initStyles(rootClassName: string, styles: MiddlewareCreatorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function getMiddlewareCreatorStyles<C = MiddlewareCreatorConfig, S = MiddlewareCreatorStyles>(config: C): S;

package/dist/esm/middlewares/creator/styles.js

@@ -0,0 +1,32 @@
+import { injectStyles, removeStyles, getMiddlewareValidStyles } from '@idraw/util';
+import { classNameMap, creationAreaBorderWidth } from './static';
+export function initStyles(rootClassName, styles) {
+    const cls = (str) => `.${str}`;
+    const stylesProps = {
+        display: 'none',
+        zIndex: styles.zIndex,
+        position: 'absolute',
+        background: 'transparent',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        overflow: 'hidden',
+        [`&${cls(classNameMap.creative)}`]: {
+            display: 'block',
+        },
+        [cls(classNameMap.creationAreaBox)]: {
+            position: 'absolute',
+            outline: `${creationAreaBorderWidth}px solid ${styles.creationAreaBorderColor}`,
+            background: '#0000ff1f',
+        },
+    };
+    injectStyles({ styles: stylesProps, rootClassName, type: 'element' });
+}
+export function destroyStyles(rootClassName) {
+    removeStyles({ rootClassName, type: 'element' });
+}
+export function getMiddlewareCreatorStyles(config) {
+    const styles = getMiddlewareValidStyles(config, ['zIndex', 'creationAreaBorderColor']);
+    return styles;
+}

package/dist/esm/middlewares/creator/types.d.ts

@@ -0,0 +1,7 @@
+import type { Point, MaterialType } from '@idraw/types';
+import { keyStartPoint, keyEndPoint, keyActiveMaterialType } from './static';
+export type CreatorSharedStorage = {
+    [keyStartPoint]: Point | null;
+    [keyEndPoint]: Point | null;
+    [keyActiveMaterialType]: Exclude<MaterialType, 'path' | 'foreignObject' | 'svgCode'> | null;
+};

package/dist/esm/middlewares/creator/types.js

@@ -0,0 +1 @@
+import { keyStartPoint, keyEndPoint, keyActiveMaterialType } from './static';

package/dist/esm/middlewares/creator/util.d.ts

@@ -0,0 +1,10 @@
+import type { MaterialType, Material, Point, ViewScaleInfo, ViewCalculator } from '@idraw/types';
+type Options = {
+    start: Point;
+    end: Point;
+    viewScaleInfo: ViewScaleInfo;
+    calculator: ViewCalculator;
+};
+export declare function createMaterialByArea(type: Exclude<MaterialType, 'path' | 'foreignObject' | 'svgCode'>, opts: Options): Material;
+export declare function updateMaterialByArea(mtrl: Material, opts: Options): Material;
+export {};

package/dist/esm/middlewares/creator/util.js

@@ -0,0 +1,52 @@
+import { createId, calcPointFromView, getDefaultMaterialAttributes } from '@idraw/util';
+function getMaterialSizeByArea(opts) {
+    const { start, end, viewScaleInfo, calculator } = opts;
+    const startPoint = calcPointFromView(start, { viewScaleInfo });
+    const endPoint = calcPointFromView(end, { viewScaleInfo });
+    const size = {
+        x: calculator.toGridNum(Math.min(startPoint.x, endPoint.x)),
+        y: calculator.toGridNum(Math.min(startPoint.y, endPoint.y)),
+        width: calculator.toGridNum(Math.abs(endPoint.x - startPoint.x)),
+        height: calculator.toGridNum(Math.abs(endPoint.y - startPoint.y)),
+    };
+    return size;
+}
+export function createMaterialByArea(type, opts) {
+    const { fill, text, href } = getDefaultMaterialAttributes();
+    const defaultMtrlAttrs = { fill };
+    if (type === 'circle') {
+        defaultMtrlAttrs.r = 1;
+    }
+    else if (type === 'ellipse') {
+        defaultMtrlAttrs.rx = 1;
+        defaultMtrlAttrs.ry = 1;
+    }
+    else if (type === 'text') {
+        defaultMtrlAttrs.text = text;
+        defaultMtrlAttrs.fontSize = 1;
+    }
+    else if (type === 'image') {
+        defaultMtrlAttrs.href = href;
+    }
+    else if (type === 'group') {
+        defaultMtrlAttrs.children = [];
+    }
+    const mtrl = Object.assign(Object.assign({ id: createId(), type }, defaultMtrlAttrs), getMaterialSizeByArea(opts));
+    return mtrl;
+}
+export function updateMaterialByArea(mtrl, opts) {
+    const size = getMaterialSizeByArea(opts);
+    const { type } = mtrl;
+    const updatedMtrl = Object.assign(Object.assign({}, mtrl), size);
+    if (type === 'circle') {
+        updatedMtrl.r = Math.min(size.width, size.height) / 2;
+    }
+    else if (type === 'ellipse') {
+        updatedMtrl.rx = size.width / 2;
+        updatedMtrl.ry = size.height / 2;
+    }
+    else if (type === 'text') {
+        updatedMtrl.fontSize = Math.min(size.width, size.height);
+    }
+    return updatedMtrl;
+}

package/dist/esm/middlewares/dragger/index.js

@@ -1,4 +1,4 @@
-import { coreEventKeys } from '../../config';
+import { coreEventKeys } from '../../static';
 const key = 'DRAG';
 const keyPrevPoint = Symbol(`${key}_prevPoint`);
 export const MiddlewareDragger = (opts) => {
@@ -11,7 +11,7 @@ export const MiddlewareDragger = (opts) => {
                 return;
             }
             eventHub.trigger(coreEventKeys.CURSOR, {
-                type: 'drag-default'
+                type: 'drag-default',
             });
         },
         pointStart(e) {
@@ -19,7 +19,7 @@ export const MiddlewareDragger = (opts) => {
             sharer.setSharedStorage(keyPrevPoint, point);
             isDragging = true;
             eventHub.trigger(coreEventKeys.CURSOR, {
-                type: 'drag-active'
+                type: 'drag-active',
             });
         },
         pointMove(e) {
@@ -37,8 +37,8 @@ export const MiddlewareDragger = (opts) => {
             isDragging = false;
             sharer.setSharedStorage(keyPrevPoint, null);
             eventHub.trigger(coreEventKeys.CURSOR, {
-                type: 'drag-default'
+                type: 'drag-default',
             });
-        }
+        },
     };
 };

package/dist/esm/middlewares/info/draw-info.d.ts

@@ -1,29 +1,29 @@
-import type { PointSize, ViewContext2D } from '@idraw/types';
-import type { MiddlewareInfoStyle } from '@idraw/types';
+import type { Point, ViewContext2D } from '@idraw/types';
+import type { MiddlewareInfoStyles } from '@idraw/types';
 export declare function drawSizeInfoText(ctx: ViewContext2D, opts: {
-    point: PointSize;
-    rotateCenter: PointSize;
+    point: Point;
+    rotateCenter: Point;
     angle: number;
     text: string;
     fontSize: number;
     lineHeight: number;
-    style: MiddlewareInfoStyle;
+    styles: MiddlewareInfoStyles;
 }): void;
 export declare function drawPositionInfoText(ctx: ViewContext2D, opts: {
-    point: PointSize;
-    rotateCenter: PointSize;
+    point: Point;
+    rotateCenter: Point;
     angle: number;
     text: string;
     fontSize: number;
     lineHeight: number;
-    style: MiddlewareInfoStyle;
+    styles: MiddlewareInfoStyles;
 }): void;
 export declare function drawAngleInfoText(ctx: ViewContext2D, opts: {
-    point: PointSize;
-    rotateCenter: PointSize;
+    point: Point;
+    rotateCenter: Point;
     angle: number;
     text: string;
     fontSize: number;
     lineHeight: number;
-    style: MiddlewareInfoStyle;
+    styles: MiddlewareInfoStyles;
 }): void;

package/dist/esm/middlewares/info/draw-info.js

@@ -1,27 +1,27 @@
 import { rotateByCenter } from '@idraw/util';
 const fontFamily = 'monospace';
 export function drawSizeInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
-    const { textColor, textBackground } = style;
+    const { point, rotateCenter, angle, text, styles, fontSize, lineHeight } = opts;
+    const { textColor, textBackground } = styles;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
             fontSize,
-            fontFamily
+            fontFamily,
         });
         const padding = (lineHeight - fontSize) / 2;
         const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
         const bgStart = {
             x: point.x - textWidth / 2 - padding,
-            y: point.y
+            y: point.y,
         };
         const bgEnd = {
             x: bgStart.x + textWidth + padding * 2,
-            y: bgStart.y + fontSize + padding
+            y: bgStart.y + fontSize + padding,
         };
         const textStart = {
             x: point.x - textWidth / 2,
-            y: point.y
+            y: point.y,
         };
         ctx.setLineDash([]);
         ctx.fillStyle = textBackground;
@@ -38,27 +38,27 @@ export function drawSizeInfoText(ctx, opts) {
     });
 }
 export function drawPositionInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
-    const { textBackground, textColor } = style;
+    const { point, rotateCenter, angle, text, styles, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = styles;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
             fontSize,
-            fontFamily
+            fontFamily,
         });
         const padding = (lineHeight - fontSize) / 2;
         const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
         const bgStart = {
             x: point.x,
-            y: point.y
+            y: point.y,
         };
         const bgEnd = {
             x: bgStart.x + textWidth + padding * 2,
-            y: bgStart.y + fontSize + padding
+            y: bgStart.y + fontSize + padding,
         };
         const textStart = {
             x: point.x + padding,
-            y: point.y
+            y: point.y,
         };
         ctx.setLineDash([]);
         ctx.fillStyle = textBackground;
@@ -75,27 +75,27 @@ export function drawPositionInfoText(ctx, opts) {
     });
 }
 export function drawAngleInfoText(ctx, opts) {
-    const { point, rotateCenter, angle, text, style, fontSize, lineHeight } = opts;
-    const { textBackground, textColor } = style;
+    const { point, rotateCenter, angle, text, styles, fontSize, lineHeight } = opts;
+    const { textBackground, textColor } = styles;
     rotateByCenter(ctx, angle, rotateCenter, () => {
         ctx.$setFont({
             fontWeight: '300',
             fontSize,
-            fontFamily
+            fontFamily,
         });
         const padding = (lineHeight - fontSize) / 2;
         const textWidth = ctx.$undoPixelRatio(ctx.measureText(text).width);
         const bgStart = {
             x: point.x,
-            y: point.y
+            y: point.y,
         };
         const bgEnd = {
             x: bgStart.x + textWidth + padding * 2,
-            y: bgStart.y + fontSize + padding
+            y: bgStart.y + fontSize + padding,
         };
         const textStart = {
             x: point.x + padding,
-            y: point.y
+            y: point.y,
         };
         ctx.setLineDash([]);
         ctx.fillStyle = textBackground;

package/dist/esm/middlewares/info/index.d.ts

@@ -1,7 +1,8 @@
 import type { Middleware, MiddlewareInfoConfig, CoreEventMap } from '@idraw/types';
 import type { DeepInfoSharedStorage } from './types';
-import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+import { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, getMiddlewareInfoStyles } from './static';
 export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
+export { getMiddlewareInfoStyles };
 export declare const MiddlewareInfo: Middleware<DeepInfoSharedStorage, CoreEventMap & {
     [MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE]: {
         show: boolean;

package/dist/esm/middlewares/info/index.js

@@ -1,14 +1,16 @@
-import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian } from '@idraw/util';
-import { keySelectedElementList, keyActionType, keyGroupQueue } from '../selector';
+import { formatNumber, getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot, createUUID, limitAngle, rotatePoint, parseAngleToRadian, } from '@idraw/util';
+import { keySelectedMaterialList, keyActionType, keyGroupQueue } from '../selector';
 import { drawSizeInfoText, drawPositionInfoText, drawAngleInfoText } from './draw-info';
-import { defaltStyle, MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE } from './config';
+import { defaltStyle, MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE, getMiddlewareInfoStyles } from './static';
 export { MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE };
 const infoFontSize = 10;
 const infoLineHeight = 16;
+export { getMiddlewareInfoStyles };
 export const MiddlewareInfo = (opts, config) => {
     const { boardContent, calculator, eventHub } = opts;
     const { overlayContext } = boardContent;
     let innerConfig = Object.assign(Object.assign({}, defaltStyle), config);
+    const styles = getMiddlewareInfoStyles(innerConfig);
     let showAngleInfo = true;
     const showInfoAngleCallback = ({ show }) => {
         showAngleInfo = show;
@@ -26,106 +28,101 @@ export const MiddlewareInfo = (opts, config) => {
         },
         beforeDrawFrame({ snapshot }) {
             var _a;
-            const { textBackground, textColor } = innerConfig;
-            const style = {
-                textBackground,
-                textColor
-            };
             const { sharedStore } = snapshot;
-            const selectedElementList = sharedStore[keySelectedElementList];
+            const selectedMaterialList = sharedStore[keySelectedMaterialList];
             const actionType = sharedStore[keyActionType];
             const groupQueue = sharedStore[keyGroupQueue] || [];
-            if (selectedElementList.length === 1) {
-                const elem = selectedElementList[0];
-                if (elem && ['select', 'drag', 'resize'].includes(actionType)) {
+            if ((selectedMaterialList === null || selectedMaterialList === void 0 ? void 0 : selectedMaterialList.length) === 1) {
+                const mtrl = selectedMaterialList[0];
+                if (mtrl && ['select', 'drag', 'resize'].includes(actionType)) {
                     const viewScaleInfo = getViewScaleInfoFromSnapshot(snapshot);
                     const viewSizeInfo = getViewSizeInfoFromSnapshot(snapshot);
-                    const { x, y, w, h, angle } = elem;
+                    const { x, y, width, height, angle } = mtrl;
                     const totalGroupQueue = [
                         ...groupQueue,
                         ...[
                             {
-                                uuid: createUUID(),
+                                id: createUUID(),
                                 x,
                                 y,
-                                w,
-                                h,
+                                width,
+                                height,
                                 angle,
                                 type: 'group',
-                                detail: { children: [] }
-                            }
-                        ]
+                                children: [],
+                            },
+                        ],
                     ];
                     const calcOpts = { viewScaleInfo, viewSizeInfo };
-                    const rangeRectInfo = calculator.calcViewRectInfoFromOrigin(elem.uuid, calcOpts);
+                    const rangeBoundingInfo = calculator.calcViewBoundingInfoFromOrigin(mtrl.id, calcOpts);
                     let totalAngle = 0;
                     totalGroupQueue.forEach((group) => {
                         totalAngle += group.angle || 0;
                     });
                     const totalRadian = parseAngleToRadian(limitAngle(0 - totalAngle));
-                    if (rangeRectInfo) {
-                        const elemCenter = rangeRectInfo === null || rangeRectInfo === void 0 ? void 0 : rangeRectInfo.center;
-                        const rectInfo = {
-                            topLeft: rotatePoint(elemCenter, rangeRectInfo.topLeft, totalRadian),
-                            topRight: rotatePoint(elemCenter, rangeRectInfo.topRight, totalRadian),
-                            bottomRight: rotatePoint(elemCenter, rangeRectInfo.bottomRight, totalRadian),
-                            bottomLeft: rotatePoint(elemCenter, rangeRectInfo.bottomLeft, totalRadian),
-                            center: rotatePoint(elemCenter, rangeRectInfo.center, totalRadian),
-                            top: rotatePoint(elemCenter, rangeRectInfo.top, totalRadian),
-                            right: rotatePoint(elemCenter, rangeRectInfo.right, totalRadian),
-                            bottom: rotatePoint(elemCenter, rangeRectInfo.bottom, totalRadian),
-                            left: rotatePoint(elemCenter, rangeRectInfo.left, totalRadian)
+                    if (rangeBoundingInfo) {
+                        const mtrlCenter = rangeBoundingInfo === null || rangeBoundingInfo === void 0 ? void 0 : rangeBoundingInfo.center;
+                        const boundingBox = {
+                            topLeft: rotatePoint(mtrlCenter, rangeBoundingInfo.topLeft, totalRadian),
+                            topRight: rotatePoint(mtrlCenter, rangeBoundingInfo.topRight, totalRadian),
+                            bottomRight: rotatePoint(mtrlCenter, rangeBoundingInfo.bottomRight, totalRadian),
+                            bottomLeft: rotatePoint(mtrlCenter, rangeBoundingInfo.bottomLeft, totalRadian),
+                            center: rotatePoint(mtrlCenter, rangeBoundingInfo.center, totalRadian),
+                            top: rotatePoint(mtrlCenter, rangeBoundingInfo.top, totalRadian),
+                            right: rotatePoint(mtrlCenter, rangeBoundingInfo.right, totalRadian),
+                            bottom: rotatePoint(mtrlCenter, rangeBoundingInfo.bottom, totalRadian),
+                            left: rotatePoint(mtrlCenter, rangeBoundingInfo.left, totalRadian),
                         };
-                        const x = formatNumber(elem.x, { decimalPlaces: 2 });
-                        const y = formatNumber(elem.y, { decimalPlaces: 2 });
-                        const w = formatNumber(elem.w, { decimalPlaces: 2 });
-                        const h = formatNumber(elem.h, { decimalPlaces: 2 });
+                        const x = formatNumber(mtrl.x, { decimalPlaces: 2 });
+                        const y = formatNumber(mtrl.y, { decimalPlaces: 2 });
+                        const w = formatNumber(mtrl.width, { decimalPlaces: 2 });
+                        const h = formatNumber(mtrl.height, { decimalPlaces: 2 });
                         const xyText = `${formatNumber(x, { decimalPlaces: 0 })},${formatNumber(y, { decimalPlaces: 0 })}`;
                         const whText = `${formatNumber(w, { decimalPlaces: 0 })}x${formatNumber(h, { decimalPlaces: 0 })}`;
-                        const angleText = `${formatNumber(elem.angle || 0, { decimalPlaces: 0 })}°`;
+                        const angleText = `${formatNumber(limitAngle(mtrl.angle || 0), { decimalPlaces: 0 })}°`;
                         drawSizeInfoText(overlayContext, {
                             point: {
-                                x: rectInfo.bottom.x,
-                                y: rectInfo.bottom.y + infoFontSize
+                                x: boundingBox.bottom.x,
+                                y: boundingBox.bottom.y + infoFontSize,
                             },
-                            rotateCenter: rectInfo.center,
+                            rotateCenter: boundingBox.center,
                             angle: totalAngle,
                             text: whText,
                             fontSize: infoFontSize,
                             lineHeight: infoLineHeight,
-                            style
+                            styles,
                         });
                         drawPositionInfoText(overlayContext, {
                             point: {
-                                x: rectInfo.topLeft.x,
-                                y: rectInfo.topLeft.y - infoFontSize * 2
+                                x: boundingBox.topLeft.x,
+                                y: boundingBox.topLeft.y - infoFontSize * 2,
                             },
-                            rotateCenter: rectInfo.center,
+                            rotateCenter: boundingBox.center,
                             angle: totalAngle,
                             text: xyText,
                             fontSize: infoFontSize,
                             lineHeight: infoLineHeight,
-                            style
+                            styles,
                         });
                         if (showAngleInfo) {
-                            if (((_a = elem.operations) === null || _a === void 0 ? void 0 : _a.rotatable) !== false) {
+                            if (((_a = mtrl.operations) === null || _a === void 0 ? void 0 : _a.rotatable) !== false) {
                                 drawAngleInfoText(overlayContext, {
                                     point: {
-                                        x: rectInfo.top.x + infoFontSize + 4,
-                                        y: rectInfo.top.y - infoFontSize * 2 - 18
+                                        x: boundingBox.top.x + infoFontSize + 4,
+                                        y: boundingBox.top.y - infoFontSize * 2 - 18,
                                     },
-                                    rotateCenter: rectInfo.center,
+                                    rotateCenter: boundingBox.center,
                                     angle: totalAngle,
                                     text: angleText,
                                     fontSize: infoFontSize,
                                     lineHeight: infoLineHeight,
-                                    style
+                                    styles,
                                 });
                             }
                         }
                     }
                 }
             }
-        }
+        },
     };
 };

package/dist/esm/middlewares/info/static.d.ts

@@ -0,0 +1,6 @@
+import type { MiddlewareInfoStyles, MiddlewareInfoConfig } from '@idraw/types';
+export declare const infoFontSize = 10;
+export declare const infoLineHeight = 16;
+export declare const MIDDLEWARE_INTERNAL_EVENT_SHOW_INFO_ANGLE = "@middleware/internal-event/show-info-angle";
+export declare const defaltStyle: MiddlewareInfoStyles;
+export declare function getMiddlewareInfoStyles<C = MiddlewareInfoConfig, S = MiddlewareInfoStyles>(config: C): S;