@idraw/util 0.4.0-alpha.3 → 0.4.0-alpha.5

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas } from './lib/file';
-export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex } from './lib/color';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
 export { deepClone, sortDataAsserts } from './lib/data';
 export { istype } from './lib/istype';
@@ -14,13 +14,16 @@ export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
 export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
 export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
-export { rotatePoint, rotateVertexes } from './lib/rotate';
+export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
 export { calcElementSizeController } from './lib/controller';
 export { generateSVGPath, parseSVGPath } from './lib/svg-path';
 export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
 export { formatNumber } from './lib/number';
+export { matrixToAngle, matrixToRadian } from './lib/matrix';
+export { getDefaultElementDetailConfig } from './lib/config';
+export { calcViewBoxSize } from './lib/view-box';

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { delay, compose, throttle } from './lib/time';
-export { downloadImageFromCanvas } from './lib/file';
-export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex } from './lib/color';
+export { downloadImageFromCanvas, parseFileToBase64, pickFile, parseFileToText } from './lib/file';
+export { toColorHexStr, toColorHexNum, isColorStr, colorNameToHex, colorToCSS, colorToLinearGradientCSS, mergeHexColorAlpha } from './lib/color';
 export { createUUID, isAssetId, createAssetId } from './lib/uuid';
 export { deepClone, sortDataAsserts } from './lib/data';
 export { istype } from './lib/istype';
@@ -14,13 +14,16 @@ export { Store } from './lib/store';
 export { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from './lib/middleware';
 export { Context2D } from './lib/context2d';
 export { rotateElement, parseRadianToAngle, parseAngleToRadian, rotateElementVertexes, getElementRotateVertexes, calcElementCenter, calcElementCenterFromVertexes, rotatePointInGroup, limitAngle } from './lib/rotate';
-export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList } from './lib/element';
+export { getSelectedElementUUIDs, validateElements, calcElementsContextSize, calcElementsViewInfo, getElemenetsAssetIds, findElementFromList, findElementsFromList, updateElementInList, getGroupQueueFromList, getElementSize, mergeElementAsset, filterElementAsset, isResourceElement } from './lib/element';
 export { checkRectIntersect } from './lib/rect';
 export { viewScale, viewScroll, calcViewElementSize, calcViewPointSize, calcViewVertexes, isViewPointInElement, getViewPointAtElement, isElementInView } from './lib/view-calc';
-export { rotatePoint, rotateVertexes } from './lib/rotate';
+export { rotatePoint, rotateVertexes, rotateByCenter } from './lib/rotate';
 export { getElementVertexes, calcElementVertexesInGroup, calcElementVertexesQueueInGroup, calcElementQueueVertexesQueueInGroup } from './lib/vertex';
 export { calcElementSizeController } from './lib/controller';
 export { generateSVGPath, parseSVGPath } from './lib/svg-path';
 export { generateHTML, parseHTML } from './lib/html';
 export { compressImage } from './lib/image';
 export { formatNumber } from './lib/number';
+export { matrixToAngle, matrixToRadian } from './lib/matrix';
+export { getDefaultElementDetailConfig } from './lib/config';
+export { calcViewBoxSize } from './lib/view-box';

package/dist/esm/lib/canvas.js

@@ -26,8 +26,10 @@ export function createBoardContexts(ctx, opts) {
     };
     const viewContext = createContext2D(ctxOpts);
     const helperContext = createContext2D(ctxOpts);
+    const underContext = createContext2D(ctxOpts);
     const boardContext = createContext2D(Object.assign({ ctx }, ctxOpts));
     const content = {
+        underContext,
         viewContext,
         helperContext,
         boardContext

package/dist/esm/lib/color.d.ts

@@ -1,4 +1,8 @@
+import type { LinearGradientColor, RadialGradientColor } from '@idraw/types';
 export declare function toColorHexNum(color: string): number;
 export declare function toColorHexStr(color: number): string;
 export declare function isColorStr(color?: string): boolean;
 export declare function colorNameToHex(name: string): string | null;
+export declare function colorToCSS(color?: string | LinearGradientColor | RadialGradientColor): string;
+export declare function colorToLinearGradientCSS(color?: string | LinearGradientColor | RadialGradientColor): string;
+export declare function mergeHexColorAlpha(hex: string, alpha: number): string;

package/dist/esm/lib/color.js

@@ -158,3 +158,75 @@ export function colorNameToHex(name) {
     }
     return null;
 }
+export function colorToCSS(color) {
+    let css = 'transparent';
+    if (typeof color === 'string') {
+        css = color;
+    }
+    else if ((color === null || color === void 0 ? void 0 : color.type) === 'linear-gradient') {
+        const items = [];
+        if (typeof color.angle === 'number') {
+            items.push(`${color.angle}deg`);
+        }
+        else {
+            items.push(`180deg`);
+        }
+        if (Array.isArray(color.stops)) {
+            color.stops.forEach((stop) => {
+                items.push(`${stop.color} ${stop.offset * 100}%`);
+            });
+        }
+        css = `linear-gradient(${items.join(', ')})`;
+    }
+    else if ((color === null || color === void 0 ? void 0 : color.type) === 'radial-gradient') {
+        const items = [];
+        if (Array.isArray(color.stops)) {
+            color.stops.forEach((stop) => {
+                items.push(`${stop.color} ${stop.offset * 100}%`);
+            });
+        }
+        css = `radial-gradient(circle, ${items.join(', ')})`;
+    }
+    return css;
+}
+export function colorToLinearGradientCSS(color) {
+    let css = 'transparent';
+    if (typeof color === 'string') {
+        css = color;
+    }
+    else if ((color === null || color === void 0 ? void 0 : color.type) === 'radial-gradient' || (color === null || color === void 0 ? void 0 : color.type) === 'linear-gradient') {
+        const items = [];
+        if (Array.isArray(color.stops) && color.stops.length > 0) {
+            color.stops.forEach((stop, i) => {
+                items.push(`${stop.color} ${stop.offset * 100}%`);
+                if (i === color.stops.length - 1 && stop.offset < 1) {
+                    items.push(`${stop.color} ${stop.offset * 100}%`);
+                }
+            });
+            css = `linear-gradient(90deg, ${items.join(', ')})`;
+        }
+    }
+    return css;
+}
+export function mergeHexColorAlpha(hex, alpha) {
+    if (alpha === 1) {
+        return hex;
+    }
+    let hexAlpha = 1;
+    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    let result = hex;
+    if (regHex1.test(hex)) {
+        hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, '0x'));
+    }
+    else if (regHex2.test(hex)) {
+        hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, '0x'));
+        result = hex.substring(0, 7);
+    }
+    hexAlpha = hexAlpha * alpha;
+    if (regHex1.test(result) && hexAlpha > 0 && hexAlpha < 1) {
+        const aHexNum = Math.max(0, Math.min(255, Math.ceil(hexAlpha * 256)));
+        result = `${result.toUpperCase()}${aHexNum.toString(16).toUpperCase()}`;
+    }
+    return result;
+}

package/dist/esm/lib/config.d.ts

@@ -0,0 +1,2 @@
+import type { DefaultElementDetailConfig } from '@idraw/types';
+export declare function getDefaultElementDetailConfig(): DefaultElementDetailConfig;

package/dist/esm/lib/config.js

@@ -0,0 +1,22 @@
+export function getDefaultElementDetailConfig() {
+    const config = {
+        boxSizing: 'center-line',
+        borderWidth: 0,
+        borderColor: '#000000',
+        shadowColor: '#000000',
+        borderRadius: 0,
+        borderDash: [],
+        shadowOffsetX: 0,
+        shadowOffsetY: 0,
+        shadowBlur: 0,
+        opacity: 1,
+        color: '#000000',
+        textAlign: 'left',
+        verticalAlign: 'top',
+        fontSize: 16,
+        lineHeight: 20,
+        fontFamily: 'sans-serif',
+        fontWeight: 400
+    };
+    return config;
+}

package/dist/esm/lib/context2d.js

@@ -139,7 +139,8 @@ export class Context2D {
         return this._ctx.getLineDash();
     }
     setLineDash(nums) {
-        return this._ctx.setLineDash(nums.map((n) => this.$doPixelRatio(n)));
+        const dash = nums.map((n) => this.$doPixelRatio(n));
+        return this._ctx.setLineDash(dash);
     }
     stroke(path) {
         return path ? this._ctx.stroke(path) : this._ctx.stroke();

package/dist/esm/lib/controller.js

@@ -44,54 +44,58 @@ export function calcElementSizeController(elemSize, opts) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
-    const topSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
-    const rightSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
-    const leftSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
     const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
     const sizeController = {
         elementWrapper: vertexes,
         left: {
             type: 'left',
-            vertexes: calcElementVertexes(leftSize),
+            vertexes: leftVertexes,
             center: leftCenter
         },
         right: {
             type: 'right',
-            vertexes: calcElementVertexes(rightSize),
+            vertexes: rightVertexes,
             center: rightCenter
         },
         top: {
             type: 'top',
-            vertexes: calcElementVertexes(topSize),
+            vertexes: topVertexes,
             center: topCenter
         },
         bottom: {
             type: 'bottom',
-            vertexes: calcElementVertexes(bottomSize),
+            vertexes: bottomVertexes,
             center: bottomCenter
         },
         topLeft: {
             type: 'top-left',
-            vertexes: calcElementVertexes(topLeftSize),
+            vertexes: topLeftVertexes,
             center: topLeftCenter
         },
         topRight: {
             type: 'top-right',
-            vertexes: calcElementVertexes(topRightSize),
+            vertexes: topRightVertexes,
             center: topRightCenter
         },
         bottomLeft: {
             type: 'bottom-left',
-            vertexes: calcElementVertexes(bottomLeftSize),
+            vertexes: bottomLeftVertexes,
             center: bottomLeftCenter
         },
         bottomRight: {
             type: 'bottom-right',
-            vertexes: calcElementVertexes(bottomRightSize),
+            vertexes: bottomRightVertexes,
             center: bottomRightCenter
         }
     };

package/dist/esm/lib/element.d.ts

@@ -1,4 +1,4 @@
-import type { Data, Element, Elements, ElementType, ViewContextSize, ViewSizeInfo, RecursivePartial } from '@idraw/types';
+import type { Data, Element, Elements, ElementType, ElementSize, ViewContextSize, ViewSizeInfo, RecursivePartial, ElementAssets, ElementAssetsItem, LoadElementType } from '@idraw/types';
 export declare function getSelectedElementUUIDs(data: Data, indexes: Array<number | string>): string[];
 export declare function validateElements(elements: Array<Element<ElementType>>): boolean;
 export declare function calcElementsContextSize(elements: Array<Element<ElementType>>, opts?: {
@@ -15,4 +15,12 @@ export declare function getElemenetsAssetIds(elements: Elements): string[];
 export declare function findElementFromList(uuid: string, list: Element<ElementType>[]): Element<ElementType> | null;
 export declare function findElementsFromList(uuids: string[], list: Element<ElementType>[]): Element<ElementType>[];
 export declare function getGroupQueueFromList(uuid: string, elements: Element<ElementType>[]): Element<'group'>[];
-export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element<ElementType>[]): Element<ElementType>[];
+export declare function updateElementInList(uuid: string, updateContent: RecursivePartial<Element<ElementType>>, elements: Element[]): Element | null;
+export declare function getElementSize(elem: Element): ElementSize;
+export declare function mergeElementAsset<T extends Element<LoadElementType>>(element: T, assets: ElementAssets): T;
+export declare function filterElementAsset<T extends Element<LoadElementType>>(element: T): {
+    element: T;
+    assetId: string | null;
+    assetItem: ElementAssetsItem | null;
+};
+export declare function isResourceElement(elem: Element): boolean;

package/dist/esm/lib/element.js

@@ -1,5 +1,6 @@
 import { rotateElementVertexes } from './rotate';
-import { isAssetId } from './uuid';
+import { isAssetId, createAssetId } from './uuid';
+import { istype } from './istype';
 function getGroupUUIDs(elements, index) {
     var _a;
     const uuids = [];
@@ -208,6 +209,7 @@ export function getGroupQueueFromList(uuid, elements) {
     return groupQueue;
 }
 function mergeElement(originElem, updateContent) {
+    var _a;
     const commonKeys = Object.keys(updateContent);
     for (let i = 0; i < commonKeys.length; i++) {
         const commonKey = commonKeys[i];
@@ -215,11 +217,24 @@ function mergeElement(originElem, updateContent) {
             originElem[commonKey] = updateContent[commonKey];
         }
         else if (['detail', 'operations'].includes(commonKey)) {
-            if (istype.json(updateContent[commonKey]) && istype.json(originElem[commonKey])) {
-                originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+            if (istype.json(updateContent[commonKey])) {
+                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
+                    originElem[commonKey] = {};
+                }
+                if (istype.json(originElem[commonKey])) {
+                    originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+                }
             }
-            else if (istype.array(updateContent[commonKey]) && istype.array(originElem[commonKey])) {
-                originElem[commonKey] = Object.assign(Object.assign({}, originElem[commonKey]), updateContent[commonKey]);
+            else if (istype.array(updateContent[commonKey])) {
+                if (!(originElem === null || originElem === void 0 ? void 0 : originElem.hasOwnProperty(commonKey))) {
+                    originElem[commonKey] = [];
+                }
+                if (istype.array(originElem[commonKey])) {
+                    (_a = updateContent === null || updateContent === void 0 ? void 0 : updateContent[commonKey]) === null || _a === void 0 ? void 0 : _a.forEach((item, i) => {
+                        originElem[commonKey][i] = item;
+                    });
+                    originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
+                }
             }
         }
     }
@@ -227,15 +242,89 @@ function mergeElement(originElem, updateContent) {
 }
 export function updateElementInList(uuid, updateContent, elements) {
     var _a;
+    let targetElement = null;
     for (let i = 0; i < elements.length; i++) {
         const elem = elements[i];
         if (elem.uuid === uuid) {
             mergeElement(elem, updateContent);
+            targetElement = elem;
             break;
         }
         else if (elem.type === 'group') {
-            updateElementInList(uuid, updateContent, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
+            targetElement = updateElementInList(uuid, updateContent, ((_a = elem === null || elem === void 0 ? void 0 : elem.detail) === null || _a === void 0 ? void 0 : _a.children) || []);
         }
     }
-    return elements;
+    return targetElement;
+}
+export function getElementSize(elem) {
+    const { x, y, w, h, angle } = elem;
+    const size = { x, y, w, h, angle };
+    return size;
+}
+export function mergeElementAsset(element, assets) {
+    const elem = element;
+    let assetId = null;
+    let assetItem = null;
+    if (elem.type === 'image') {
+        assetId = elem.detail.src;
+    }
+    else if (elem.type === 'svg') {
+        assetId = elem.detail.svg;
+    }
+    else if (elem.type === 'html') {
+        assetId = elem.detail.html;
+    }
+    if (assetId && (assetId === null || assetId === void 0 ? void 0 : assetId.startsWith('@assets/'))) {
+        assetItem = assets[assetId];
+    }
+    if ((assetItem === null || assetItem === void 0 ? void 0 : assetItem.type) === elem.type && typeof (assetItem === null || assetItem === void 0 ? void 0 : assetItem.value) === 'string' && (assetItem === null || assetItem === void 0 ? void 0 : assetItem.value)) {
+        if (elem.type === 'image') {
+            elem.detail.src = assetItem.value;
+        }
+        else if (elem.type === 'svg') {
+            elem.detail.svg = assetItem.value;
+        }
+        else if (elem.type === 'html') {
+            elem.detail.html = assetItem.value;
+        }
+    }
+    return elem;
+}
+export function filterElementAsset(element) {
+    let assetId = null;
+    let assetItem = null;
+    let resource = null;
+    if (element.type === 'image') {
+        resource = element.detail.src;
+    }
+    else if (element.type === 'svg') {
+        resource = element.detail.svg;
+    }
+    else if (element.type === 'html') {
+        resource = element.detail.html;
+    }
+    if (typeof resource === 'string' && !isAssetId(resource)) {
+        assetId = createAssetId(resource);
+        assetItem = {
+            type: element.type,
+            value: resource
+        };
+        if (element.type === 'image') {
+            element.detail.src = assetId;
+        }
+        else if (element.type === 'svg') {
+            element.detail.svg = assetId;
+        }
+        else if (element.type === 'html') {
+            element.detail.html = assetId;
+        }
+    }
+    return {
+        element,
+        assetId,
+        assetItem
+    };
+}
+export function isResourceElement(elem) {
+    return ['image', 'svg', 'html'].includes(elem === null || elem === void 0 ? void 0 : elem.type);
 }

package/dist/esm/lib/file.d.ts

@@ -3,4 +3,12 @@ export declare function downloadImageFromCanvas(canvas: HTMLCanvasElement, opts:
     filename: string;
     type: ImageType;
 }): void;
+export declare function pickFile(opts: {
+    success: (data: {
+        file: File;
+    }) => void;
+    error?: (err: ErrorEvent) => void;
+}): void;
+export declare function parseFileToBase64(file: File): Promise<string | ArrayBuffer>;
+export declare function parseFileToText(file: File): Promise<string | ArrayBuffer>;
 export {};

package/dist/esm/lib/file.js

@@ -8,3 +8,59 @@ export function downloadImageFromCanvas(canvas, opts) {
     downloadClickEvent.initEvent('click', true, false);
     downloadLink.dispatchEvent(downloadClickEvent);
 }
+export function pickFile(opts) {
+    const { success, error } = opts;
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.addEventListener('change', function () {
+        var _a;
+        const file = (_a = input.files) === null || _a === void 0 ? void 0 : _a[0];
+        success({
+            file: file
+        });
+        input = null;
+    });
+    input.addEventListener('error', function (err) {
+        if (typeof error === 'function') {
+            error(err);
+        }
+        input = null;
+    });
+    input.click();
+}
+export function parseFileToBase64(file) {
+    return new Promise(function (resolve, reject) {
+        let reader = new FileReader();
+        reader.addEventListener('load', function () {
+            resolve(reader.result);
+            reader = null;
+        });
+        reader.addEventListener('error', function (err) {
+            reject(err);
+            reader = null;
+        });
+        reader.addEventListener('abort', function () {
+            reject(new Error('abort'));
+            reader = null;
+        });
+        reader.readAsDataURL(file);
+    });
+}
+export function parseFileToText(file) {
+    return new Promise(function (resolve, reject) {
+        let reader = new FileReader();
+        reader.addEventListener('load', function () {
+            resolve(reader.result);
+            reader = null;
+        });
+        reader.addEventListener('error', function (err) {
+            reject(err);
+            reader = null;
+        });
+        reader.addEventListener('abort', function () {
+            reject(new Error('abort'));
+            reader = null;
+        });
+        reader.readAsText(file);
+    });
+}

package/dist/esm/lib/matrix.d.ts

@@ -0,0 +1,3 @@
+import type { Matrix } from '@idraw/types';
+export declare function matrixToRadian(matrix: Matrix): number | null;
+export declare function matrixToAngle(matrix: Matrix): number | null;

package/dist/esm/lib/matrix.js

@@ -0,0 +1,16 @@
+export function matrixToRadian(matrix) {
+    if (matrix[1] != -1 * matrix[3] || matrix[4] != matrix[0] || matrix[0] * matrix[4] - matrix[3] * matrix[1] != 1) {
+        return null;
+    }
+    else {
+        return Math.acos(matrix[0]);
+    }
+}
+export function matrixToAngle(matrix) {
+    const radian = matrixToRadian(matrix);
+    if (typeof radian === 'number') {
+        const angle = (radian * 180) / Math.PI;
+        return angle;
+    }
+    return radian;
+}

package/dist/esm/lib/number.js

@@ -1,4 +1,7 @@
 export function formatNumber(num, opts) {
-    const decimalPlaces = (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) || 2;
+    let decimalPlaces = 2;
+    if (typeof (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) !== 'undefined' && (opts === null || opts === void 0 ? void 0 : opts.decimalPlaces) >= 0) {
+        decimalPlaces = opts.decimalPlaces;
+    }
     return parseFloat(num.toFixed(decimalPlaces));
 }

package/dist/esm/lib/rotate.d.ts

@@ -1,6 +1,7 @@
 import type { ViewContext2D, PointSize, ElementSize, ViewRectVertexes, Element } from '@idraw/types';
 export declare function parseRadianToAngle(radian: number): number;
 export declare function parseAngleToRadian(angle: number): number;
+export declare function rotateByCenter(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, angle: number, center: PointSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
 export declare function rotateElement(ctx: ViewContext2D | CanvasRenderingContext2D | ViewContext2D, elemSize: ElementSize, callback: (ctx: ViewContext2D | CanvasRenderingContext2D) => void): void;
 export declare function calcElementCenter(elem: ElementSize): PointSize;
 export declare function calcElementCenterFromVertexes(ves: ViewRectVertexes): PointSize;

package/dist/esm/lib/rotate.js

@@ -5,9 +5,8 @@ export function parseRadianToAngle(radian) {
 export function parseAngleToRadian(angle) {
     return (angle / 180) * Math.PI;
 }
-export function rotateElement(ctx, elemSize, callback) {
-    const center = calcElementCenter(elemSize);
-    const radian = parseAngleToRadian(elemSize.angle || 0);
+export function rotateByCenter(ctx, angle, center, callback) {
+    const radian = parseAngleToRadian(angle || 0);
     if (center && (radian > 0 || radian < 0)) {
         ctx.translate(center.x, center.y);
         ctx.rotate(radian);
@@ -20,6 +19,12 @@ export function rotateElement(ctx, elemSize, callback) {
         ctx.translate(-center.x, -center.y);
     }
 }
+export function rotateElement(ctx, elemSize, callback) {
+    const center = calcElementCenter(elemSize);
+    rotateByCenter(ctx, elemSize.angle || 0, center, () => {
+        callback(ctx);
+    });
+}
 export function calcElementCenter(elem) {
     const p = {
         x: elem.x + elem.w / 2,

package/dist/esm/lib/view-box.d.ts

@@ -0,0 +1,5 @@
+import type { Element, ViewScaleInfo, ViewSizeInfo, ViewBoxSize } from '@idraw/types';
+export declare function calcViewBoxSize(viewElem: Element, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): ViewBoxSize;

package/dist/esm/lib/view-box.js

@@ -0,0 +1,48 @@
+import { getDefaultElementDetailConfig } from './config';
+const defaultElemConfig = getDefaultElementDetailConfig();
+export function calcViewBoxSize(viewElem, opts) {
+    const { viewScaleInfo } = opts;
+    const { scale } = viewScaleInfo;
+    let { borderRadius, boxSizing = defaultElemConfig.boxSizing, borderWidth } = viewElem.detail;
+    if (typeof borderWidth !== 'number') {
+        borderRadius = 0;
+    }
+    let { x, y, w, h } = viewElem;
+    let radiusList = [0, 0, 0, 0];
+    if (typeof borderRadius === 'number') {
+        const br = borderRadius * scale;
+        radiusList = [br, br, br, br];
+    }
+    else if (Array.isArray(borderRadius) && (borderRadius === null || borderRadius === void 0 ? void 0 : borderRadius.length) === 4) {
+        radiusList = [borderRadius[0] * scale, borderRadius[1] * scale, borderRadius[2] * scale, borderRadius[3] * scale];
+    }
+    let bw = 0;
+    if (typeof borderWidth === 'number') {
+        bw = (borderWidth || 1) * scale;
+    }
+    if (boxSizing === 'border-box') {
+        x = viewElem.x + bw / 2;
+        y = viewElem.y + bw / 2;
+        w = viewElem.w - bw;
+        h = viewElem.h - bw;
+    }
+    else if (boxSizing === 'content-box') {
+        x = viewElem.x - bw / 2;
+        y = viewElem.y - bw / 2;
+        w = viewElem.w + bw;
+        h = viewElem.h + bw;
+    }
+    else {
+        x = viewElem.x;
+        y = viewElem.y;
+        w = viewElem.w;
+        h = viewElem.h;
+    }
+    return {
+        x,
+        y,
+        w,
+        h,
+        radiusList
+    };
+}