@idraw/util 0.4.0-beta.4 → 0.4.0-beta.41

package/dist/esm/view/modify-record.js

@@ -0,0 +1,10 @@
+import { flatObject } from '../tool/flat-object';
+export function toFlattenElement(elem) {
+    return flatObject(elem, { ignorePaths: ['detail.children'] });
+}
+export function toFlattenLayout(layout) {
+    return flatObject(layout);
+}
+export function toFlattenGlobal(global) {
+    return flatObject(global);
+}

package/dist/esm/view/point-move-element.d.ts

@@ -0,0 +1,5 @@
+import type { PointSize, Element } from '@idraw/types';
+export declare function calcPointMoveElementInGroup(start: PointSize, end: PointSize, groupQueue: Element<'group'>[]): {
+    moveX: number;
+    moveY: number;
+};

package/dist/esm/view/point-move-element.js

@@ -0,0 +1,26 @@
+import { rotatePointInGroup } from './rotate';
+export function calcPointMoveElementInGroup(start, end, groupQueue) {
+    let moveX = end.x - start.x;
+    let moveY = end.y - start.y;
+    const pointGroupQueue = [];
+    groupQueue.forEach((group) => {
+        const { x, y, w, h, angle = 0 } = group;
+        pointGroupQueue.push({
+            x,
+            y,
+            w,
+            h,
+            angle: 0 - angle
+        });
+    });
+    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        const startInGroup = rotatePointInGroup(start, pointGroupQueue);
+        const endInGroup = rotatePointInGroup(end, pointGroupQueue);
+        moveX = endInGroup.x - startInGroup.x;
+        moveY = endInGroup.y - startInGroup.y;
+    }
+    return {
+        moveX,
+        moveY
+    };
+}

package/dist/esm/view/position.d.ts

@@ -0,0 +1,15 @@
+import type { ElementPosition } from '@idraw/types';
+export declare function calcResultMovePosition(opts: {
+    from: ElementPosition;
+    to: ElementPosition;
+}): {
+    from: ElementPosition;
+    to: ElementPosition;
+} | null;
+export declare function calcRevertMovePosition(opts: {
+    from: ElementPosition;
+    to: ElementPosition;
+}): {
+    from: ElementPosition;
+    to: ElementPosition;
+} | null;

package/dist/esm/view/position.js

@@ -0,0 +1,79 @@
+export function calcResultMovePosition(opts) {
+    const from = [...opts.from];
+    const to = [...opts.to];
+    if (from.length === 0 || to.length === 0) {
+        return null;
+    }
+    if (from.length <= to.length) {
+        for (let i = 0; i < from.length; i++) {
+            if (to[i] === from[i]) {
+                if (i === from.length - 1) {
+                    return null;
+                }
+                continue;
+            }
+        }
+    }
+    let moveDirection = null;
+    if (from.length >= 1 && to.length >= 1) {
+        if (from.length <= to.length) {
+            if (from.length === 1) {
+                if (from[0] < to[0]) {
+                    moveDirection = 'up-down';
+                }
+            }
+            else {
+                for (let i = 0; i < from.length; i++) {
+                    if (from[i] === to[i]) {
+                        if (from.length === from.length - 1) {
+                            moveDirection = 'up-down';
+                            break;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+        }
+        if (from.length >= to.length) {
+            if (to.length === 1) {
+                if (to[0] < from[0]) {
+                    moveDirection = 'down-up';
+                }
+            }
+            else {
+                for (let i = 0; i < to.length; i++) {
+                    if (i === to.length - 1 && to[i] < from[i]) {
+                        moveDirection = 'down-up';
+                    }
+                    if (from[i] === to[i]) {
+                        continue;
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    const startEffectIndex = from.length - 1;
+    const endEffectIndex = to.length - 1;
+    if (moveDirection === 'up-down' && startEffectIndex >= 0) {
+        to[startEffectIndex] -= 1;
+    }
+    else if (moveDirection === 'down-up' && endEffectIndex >= 0) {
+        from[endEffectIndex] += 1;
+    }
+    return { from, to };
+}
+export function calcRevertMovePosition(opts) {
+    const result = calcResultMovePosition(opts);
+    if (!result) {
+        return result;
+    }
+    return {
+        from: [...result.to],
+        to: [...result.from]
+    };
+}

package/dist/esm/view/rect.js

@@ -0,0 +1,11 @@
+export function checkRectIntersect(rect1, rect2) {
+    const rect1MinX = rect1.x;
+    const rect1MinY = rect1.y;
+    const rect1MaxX = rect1.x + rect1.w;
+    const rect1MaxY = rect1.y + rect1.h;
+    const rect2MinX = rect2.x;
+    const rect2MinY = rect2.y;
+    const rect2MaxX = rect2.x + rect2.w;
+    const rect2MaxY = rect2.y + rect2.h;
+    return rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY;
+}

package/dist/esm/view/resize-element.d.ts

@@ -0,0 +1,2 @@
+import type { Element, ElementSize } from '@idraw/types';
+export declare function deepResizeGroupElement(elem: Element<'group'>, size: Pick<Partial<ElementSize>, 'w' | 'h'>): Element<'group'>;

package/dist/esm/view/resize-element.js

@@ -0,0 +1,101 @@
+import { formatNumber } from '../tool/number';
+const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+};
+function resizeElementBaseDetail(elem, opts) {
+    const { detail } = elem;
+    const { xRatio, yRatio, maxRatio } = opts;
+    const middleRatio = (xRatio + yRatio) / 2;
+    const { borderWidth, borderRadius, borderDash, shadowOffsetX, shadowOffsetY, shadowBlur } = detail;
+    if (typeof borderWidth === 'number') {
+        detail.borderWidth = doNum(borderWidth * middleRatio);
+    }
+    else if (Array.isArray(detail.borderWidth)) {
+        const bw = borderWidth;
+        detail.borderWidth = [doNum(bw[0] * yRatio), doNum(bw[1] * xRatio), doNum(bw[2] * yRatio), doNum(bw[3] * xRatio)];
+    }
+    if (typeof borderRadius === 'number') {
+        detail.borderRadius = doNum(borderRadius * middleRatio);
+    }
+    else if (Array.isArray(detail.borderRadius)) {
+        const br = borderRadius;
+        detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+    }
+    if (Array.isArray(borderDash)) {
+        borderDash.forEach((dash, i) => {
+            detail.borderDash[i] = doNum(dash * maxRatio);
+        });
+    }
+    if (typeof shadowOffsetX === 'number') {
+        detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+    }
+    if (typeof shadowOffsetY === 'number') {
+        detail.shadowOffsetX = doNum(shadowOffsetY * maxRatio);
+    }
+    if (typeof shadowBlur === 'number') {
+        detail.shadowOffsetX = doNum(shadowBlur * maxRatio);
+    }
+}
+function resizeElementBase(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { x, y, w, h } = elem;
+    elem.x = doNum(x * xRatio);
+    elem.y = doNum(y * yRatio);
+    elem.w = doNum(w * xRatio);
+    elem.h = doNum(h * yRatio);
+    resizeElementBaseDetail(elem, opts);
+}
+function resizeTextElementDetail(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize, lineHeight } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    if (fontSize && fontSize > 0) {
+        elem.detail.fontSize = doNum(fontSize * ratio);
+    }
+    if (lineHeight && lineHeight > 0) {
+        elem.detail.lineHeight = doNum(lineHeight * ratio);
+    }
+}
+function resizeElement(elem, opts) {
+    const { type } = elem;
+    resizeElementBase(elem, opts);
+    if (type === 'circle') {
+    }
+    else if (type === 'text') {
+        resizeTextElementDetail(elem, opts);
+    }
+    else if (type === 'image') {
+    }
+    else if (type === 'svg') {
+    }
+    else if (type === 'html') {
+    }
+    else if (type === 'path') {
+    }
+    else if (type === 'group' && Array.isArray(elem.detail.children)) {
+        elem.detail.children.forEach((child) => {
+            resizeElement(child, opts);
+        });
+    }
+}
+export function deepResizeGroupElement(elem, size) {
+    const resizeW = size.w && size.w > 0 ? size.w : elem.w;
+    const resizeH = size.h && size.h > 0 ? size.h : elem.h;
+    const xRatio = resizeW / elem.w;
+    const yRatio = resizeH / elem.h;
+    if (xRatio === yRatio && xRatio === 1) {
+        return elem;
+    }
+    const minRatio = Math.min(xRatio, yRatio);
+    const maxRatio = Math.max(xRatio, yRatio);
+    elem.w = resizeW;
+    elem.h = resizeH;
+    const opts = { xRatio, yRatio, minRatio, maxRatio };
+    if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+        elem.detail.children.forEach((child) => {
+            resizeElement(child, opts);
+        });
+    }
+    resizeElementBaseDetail(elem, opts);
+    return elem;
+}

package/dist/esm/{lib → view}/rotate.js

@@ -46,18 +46,10 @@ export function calcElementCenterFromVertexes(ves) {
     return calcElementCenter(elemSize);
 }
 export function calcRadian(center, start, end) {
-    const startAngle = calcLineRadian(center, start);
-    const endAngle = calcLineRadian(center, end);
-    if (endAngle !== null && startAngle !== null) {
-        if (startAngle > (Math.PI * 3) / 2 && endAngle < Math.PI / 2) {
-            return endAngle + (Math.PI * 2 - startAngle);
-        }
-        else if (endAngle > (Math.PI * 3) / 2 && startAngle < Math.PI / 2) {
-            return startAngle + (Math.PI * 2 - endAngle);
-        }
-        else {
-            return endAngle - startAngle;
-        }
+    const startRadian = calcLineRadian(center, start);
+    const endRadian = calcLineRadian(center, end);
+    if (endRadian !== null && startRadian !== null) {
+        return endRadian - startRadian;
     }
     else {
         return 0;
@@ -199,12 +191,15 @@ export function rotateVertexes(center, ves, radian) {
     ];
 }
 export function limitAngle(angle) {
-    if (!(angle > 0 || angle < 0) || angle === 0) {
+    if (!(angle > 0 || angle < 0) || angle === 0 || angle === 360) {
         return 0;
     }
     let num = angle % 360;
     if (num < 0) {
         num += 360;
     }
+    else if (angle === 360) {
+        num = 0;
+    }
     return num;
 }

package/dist/esm/view/text.d.ts

@@ -0,0 +1 @@
+export declare function enhanceFontFamliy(fontFamily?: string): string;

package/dist/esm/view/text.js

@@ -0,0 +1,4 @@
+const baseFontFamilyList = ['-apple-system', '"system-ui"', ' "Segoe UI"', ' Roboto', '"Helvetica Neue"', 'Arial', '"Noto Sans"', ' sans-serif'];
+export function enhanceFontFamliy(fontFamily) {
+    return [fontFamily, ...baseFontFamilyList].join(', ');
+}

package/dist/esm/{lib → view}/view-box.js

@@ -4,8 +4,10 @@ export function calcViewBoxSize(viewElem, opts) {
     const { viewScaleInfo } = opts;
     const { scale } = viewScaleInfo;
     let { borderRadius } = viewElem.detail;
+    const { borderDash } = viewElem.detail;
+    const hasBorderDash = Array.isArray(borderDash) && borderDash.length > 0;
     const { boxSizing = defaultElemConfig.boxSizing, borderWidth } = viewElem.detail;
-    if (typeof borderWidth !== 'number') {
+    if (Array.isArray(borderWidth)) {
         borderRadius = 0;
     }
     let { x, y, w, h } = viewElem;
@@ -21,7 +23,7 @@ export function calcViewBoxSize(viewElem, opts) {
     if (typeof borderWidth === 'number') {
         bw = (borderWidth || 0) * scale;
     }
-    if (boxSizing === 'border-box') {
+    if (boxSizing === 'border-box' && !hasBorderDash) {
         x = viewElem.x + bw / 2;
         y = viewElem.y + bw / 2;
         w = viewElem.w - bw;

package/dist/esm/{lib → view}/view-calc.d.ts

@@ -1,4 +1,4 @@
-import { Point, PointSize, Data, ViewScaleInfo, ViewSizeInfo, Element, ElementType, ElementSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+import { Point, PointSize, Data, ViewScaleInfo, ViewSizeInfo, Element, ElementType, ElementSize, ViewContext2D, ViewRectVertexes, ViewRectInfo } from '@idraw/types';
 export declare function calcViewScaleInfo(info: {
     scale: number;
     offsetX: number;
@@ -23,11 +23,9 @@ export declare function viewScroll(opts: {
 }): ViewScaleInfo;
 export declare function calcViewElementSize(size: ElementSize, opts: {
     viewScaleInfo: ViewScaleInfo;
-    viewSizeInfo: ViewSizeInfo;
 }): ElementSize;
 export declare function calcViewPointSize(size: PointSize, opts: {
     viewScaleInfo: ViewScaleInfo;
-    viewSizeInfo: ViewSizeInfo;
 }): PointSize;
 export declare function calcViewVertexes(vertexes: ViewRectVertexes, opts: {
     viewScaleInfo: ViewScaleInfo;
@@ -39,6 +37,12 @@ export declare function isViewPointInElement(p: Point, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): boolean;
+export declare function isViewPointInElementSize(p: Point, elemSize: ElementSize, opts?: {
+    includeBorder?: boolean;
+}): boolean;
+export declare function isViewPointInVertexes(p: Point, vertexes: ViewRectVertexes, opts?: {
+    includeBorder?: boolean;
+}): boolean;
 export declare function getViewPointAtElement(p: Point, opts: {
     context2d: ViewContext2D;
     data: Data;
@@ -54,3 +58,12 @@ export declare function isElementInView(elem: ElementSize, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): boolean;
+export declare function calcElementOriginRectInfo(elemSize: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+}): ViewRectInfo;
+export declare function originRectInfoToRangeRectInfo(originRectInfo: ViewRectInfo): ViewRectInfo;
+export declare function calcElementViewRectInfo(elemSize: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+    viewScaleInfo: ViewScaleInfo;
+    range?: boolean;
+}): ViewRectInfo;

package/dist/esm/{lib → view}/view-calc.js

@@ -1,5 +1,7 @@
 import { rotateElementVertexes } from './rotate';
 import { checkRectIntersect } from './rect';
+import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
+import { getCenterFromTwoPoints } from './point';
 export function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
     const { viewSizeInfo } = opts;
@@ -86,9 +88,9 @@ export function calcViewVertexes(vertexes, opts) {
     ];
 }
 export function isViewPointInElement(p, opts) {
-    const { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo } = opts;
+    const { context2d: ctx, element: elem, viewScaleInfo } = opts;
     const { angle = 0 } = elem;
-    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo });
     const vertexes = rotateElementVertexes({ x, y, w, h, angle });
     if (vertexes.length >= 2) {
         ctx.beginPath();
@@ -103,6 +105,25 @@ export function isViewPointInElement(p, opts) {
     }
     return false;
 }
+export function isViewPointInElementSize(p, elemSize, opts) {
+    const vertexes = calcElementVertexes(elemSize);
+    return isViewPointInVertexes(p, vertexes, opts);
+}
+export function isViewPointInVertexes(p, vertexes, opts) {
+    const xList = [vertexes[0].x, vertexes[1].x, vertexes[2].x, vertexes[3].x];
+    const yList = [vertexes[0].y, vertexes[1].y, vertexes[2].y, vertexes[3].y];
+    const mixX = Math.min(...xList);
+    const maxX = Math.max(...xList);
+    const mixY = Math.min(...yList);
+    const maxY = Math.max(...yList);
+    if (p.x > mixX && p.x < maxX && p.y > mixY && p.y < maxY) {
+        return true;
+    }
+    if ((opts === null || opts === void 0 ? void 0 : opts.includeBorder) === true && (p.x === mixX || p.x === maxX || p.y === mixY || p.y === maxY)) {
+        return true;
+    }
+    return false;
+}
 export function getViewPointAtElement(p, opts) {
     var _a, _b, _c;
     const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
@@ -174,7 +195,7 @@ export function isElementInView(elem, opts) {
     const { viewSizeInfo, viewScaleInfo } = opts;
     const { width, height } = viewSizeInfo;
     const { angle } = elem;
-    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo });
     const ves = rotateElementVertexes({ x, y, w, h, angle });
     const viewSize = { x: 0, y: 0, w: width, h: height };
     const elemStartX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
@@ -184,3 +205,106 @@ export function isElementInView(elem, opts) {
     const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
     return checkRectIntersect(viewSize, elemSize);
 }
+export function calcElementOriginRectInfo(elemSize, opts) {
+    const { groupQueue } = opts;
+    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
+    const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
+    const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
+    const left = getCenterFromTwoPoints(vertexes[3], vertexes[0]);
+    const topLeft = vertexes[0];
+    const topRight = vertexes[1];
+    const bottomRight = vertexes[2];
+    const bottomLeft = vertexes[3];
+    const maxX = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const maxY = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const minX = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
+    const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
+    const center = {
+        x: (maxX + minX) / 2,
+        y: (maxY + minY) / 2
+    };
+    const rectInfo = {
+        center,
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight,
+        top,
+        right,
+        left,
+        bottom
+    };
+    return rectInfo;
+}
+export function originRectInfoToRangeRectInfo(originRectInfo) {
+    const rangeMaxX = Math.max(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMaxY = Math.max(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeMinX = Math.min(originRectInfo.topLeft.x, originRectInfo.topRight.x, originRectInfo.bottomRight.x, originRectInfo.bottomLeft.x);
+    const rangeMinY = Math.min(originRectInfo.topLeft.y, originRectInfo.topRight.y, originRectInfo.bottomRight.y, originRectInfo.bottomLeft.y);
+    const rangeCenter = { x: originRectInfo.center.x, y: originRectInfo.center.y };
+    const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
+    const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
+    const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
+    const rangeBottomLeft = { x: rangeMinX, y: rangeMaxY };
+    const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+    const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+    const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+    const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+    const rangeRectInfo = {
+        center: rangeCenter,
+        topLeft: rangeTopLeft,
+        topRight: rangeTopRight,
+        bottomLeft: rangeBottomLeft,
+        bottomRight: rangeBottomRight,
+        top: rangeTop,
+        right: rangeRight,
+        left: rangeLeft,
+        bottom: rangeBottom
+    };
+    return rangeRectInfo;
+}
+export function calcElementViewRectInfo(elemSize, opts) {
+    const { groupQueue, viewScaleInfo, range } = opts;
+    const originRectInfo = calcElementOriginRectInfo(elemSize, { groupQueue });
+    const { center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = originRectInfo;
+    const viewRectInfo = {
+        center: calcViewPointSize(center, { viewScaleInfo }),
+        topLeft: calcViewPointSize(topLeft, { viewScaleInfo }),
+        topRight: calcViewPointSize(topRight, { viewScaleInfo }),
+        bottomLeft: calcViewPointSize(bottomLeft, { viewScaleInfo }),
+        bottomRight: calcViewPointSize(bottomRight, { viewScaleInfo }),
+        top: calcViewPointSize(top, { viewScaleInfo }),
+        right: calcViewPointSize(right, { viewScaleInfo }),
+        left: calcViewPointSize(left, { viewScaleInfo }),
+        bottom: calcViewPointSize(bottom, { viewScaleInfo })
+    };
+    if (range === true) {
+        const viewMaxX = Math.max(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
+        const viewMaxY = Math.max(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
+        const viewMinX = Math.min(viewRectInfo.topLeft.x, viewRectInfo.topRight.x, viewRectInfo.bottomRight.x, viewRectInfo.bottomLeft.x);
+        const viewMinY = Math.min(viewRectInfo.topLeft.y, viewRectInfo.topRight.y, viewRectInfo.bottomRight.y, viewRectInfo.bottomLeft.y);
+        const rangeCenter = { x: viewRectInfo.center.x, y: viewRectInfo.center.y };
+        const rangeTopLeft = { x: viewMinX, y: viewMinY };
+        const rangeTopRight = { x: viewMaxX, y: viewMinY };
+        const rangeBottomRight = { x: viewMaxX, y: viewMaxY };
+        const rangeBottomLeft = { x: viewMinX, y: viewMaxY };
+        const rangeTop = getCenterFromTwoPoints(rangeTopLeft, rangeTopRight);
+        const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
+        const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
+        const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
+        const rangeRectInfo = {
+            center: rangeCenter,
+            topLeft: rangeTopLeft,
+            topRight: rangeTopRight,
+            bottomLeft: rangeBottomLeft,
+            bottomRight: rangeBottomRight,
+            top: rangeTop,
+            right: rangeRight,
+            left: rangeLeft,
+            bottom: rangeBottom
+        };
+        return rangeRectInfo;
+    }
+    return viewRectInfo;
+}

package/dist/esm/view/view-content.d.ts

@@ -0,0 +1,14 @@
+import type { Data, ViewSizeInfo, ViewScaleInfo, PointSize } from '@idraw/types';
+interface ViewCenterContentResult {
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+}
+export declare function calcViewCenterContent(data: Data, opts: {
+    viewSizeInfo: ViewSizeInfo;
+}): ViewCenterContentResult;
+export declare function calcViewCenter(opts?: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): PointSize;
+export {};

package/dist/esm/view/view-content.js

@@ -0,0 +1,88 @@
+import { rotateElementVertexes } from './rotate';
+import { formatNumber } from '../tool/number';
+import { is } from './is';
+export function calcViewCenterContent(data, opts) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    let offsetX = 0;
+    let offsetY = 0;
+    let scale = 1;
+    let contentX = ((_b = (_a = data === null || data === void 0 ? void 0 : data.elements) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.x) || 0;
+    let contentY = ((_d = (_c = data === null || data === void 0 ? void 0 : data.elements) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.y) || 0;
+    let contentW = ((_f = (_e = data === null || data === void 0 ? void 0 : data.elements) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.w) || 0;
+    let contentH = ((_h = (_g = data === null || data === void 0 ? void 0 : data.elements) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.h) || 0;
+    const { width, height } = opts.viewSizeInfo;
+    if (data.layout && ((_k = (_j = data.layout) === null || _j === void 0 ? void 0 : _j.detail) === null || _k === void 0 ? void 0 : _k.overflow) === 'hidden') {
+        contentX = 0;
+        contentY = 0;
+        contentW = data.layout.w || 0;
+        contentH = data.layout.h || 0;
+    }
+    else {
+        data.elements.forEach((elem) => {
+            const elemSize = {
+                x: elem.x,
+                y: elem.y,
+                w: elem.w,
+                h: elem.h,
+                angle: elem.angle
+            };
+            if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
+                const ves = rotateElementVertexes(elemSize);
+                if (ves.length === 4) {
+                    const xList = [ves[0].x, ves[1].x, ves[2].x, ves[3].x];
+                    const yList = [ves[0].y, ves[1].y, ves[2].y, ves[3].y];
+                    elemSize.x = Math.min(...xList);
+                    elemSize.y = Math.min(...yList);
+                    elemSize.w = Math.abs(Math.max(...xList) - Math.min(...xList));
+                    elemSize.h = Math.abs(Math.max(...yList) - Math.min(...yList));
+                }
+            }
+            const areaStartX = Math.min(elemSize.x, contentX);
+            const areaStartY = Math.min(elemSize.y, contentY);
+            const areaEndX = Math.max(elemSize.x + elemSize.w, contentX + contentW);
+            const areaEndY = Math.max(elemSize.y + elemSize.h, contentY + contentH);
+            contentX = areaStartX;
+            contentY = areaStartY;
+            contentW = Math.abs(areaEndX - areaStartX);
+            contentH = Math.abs(areaEndY - areaStartY);
+        });
+    }
+    if (data.layout) {
+        const { x, y, w, h } = data.layout;
+        if (is.x(x) && is.y(y) && is.w(w) && is.h(h)) {
+            contentX = Math.min(contentX, x);
+            contentY = Math.min(contentY, y);
+            contentW = Math.max(contentW, w);
+            contentH = Math.max(contentH, h);
+        }
+    }
+    if (contentW > 0 && contentH > 0) {
+        const scaleW = formatNumber(width / contentW, { decimalPlaces: 4 });
+        const scaleH = formatNumber(height / contentH, { decimalPlaces: 4 });
+        scale = Math.min(scaleW, scaleH, 1);
+        offsetX = (contentW * scale - width) / 2 / scale + contentX;
+        offsetY = (contentH * scale - height) / 2 / scale + contentY;
+    }
+    const result = {
+        offsetX: formatNumber(offsetX, { decimalPlaces: 0 }),
+        offsetY: formatNumber(offsetY, { decimalPlaces: 0 }),
+        scale
+    };
+    return result;
+}
+export function calcViewCenter(opts) {
+    let x = 0;
+    let y = 0;
+    if (opts) {
+        const { viewScaleInfo, viewSizeInfo } = opts;
+        const { offsetLeft, offsetTop, scale } = viewScaleInfo;
+        const { width, height } = viewSizeInfo;
+        x = 0 - offsetLeft + width / scale / 2;
+        y = 0 - offsetTop + height / scale / 2;
+    }
+    const p = {
+        x,
+        y
+    };
+    return p;
+}