@idraw/util 0.4.0-beta.9 → 0.4.0

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,4 @@
+import type { Element, ElementSize, ElementOperations, ModifyRecord } from '@idraw/types';
+export declare function resizeEffectGroupElement(elem: Element<'group'>, size: Partial<ElementSize>, opts?: {
+    resizeEffect?: ElementOperations['resizeEffect'];
+}): ModifyRecord<'resizeElements'> | null;

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

@@ -0,0 +1,255 @@
+import { istype } from '../tool/istype';
+import { formatNumber } from '../tool/number';
+import { toFlattenElement } from '../view/modify-record';
+const doNum = (n) => {
+    return formatNumber(n, { decimalPlaces: 4 });
+};
+function resizeElementBaseDetailByRatio(elem, opts) {
+    const beforeElem = { detail: {} };
+    const afterElem = { detail: {} };
+    const record = {
+        type: 'modifyElement',
+        time: Date.now(),
+        content: {
+            method: 'modifyElement',
+            uuid: elem.uuid,
+            before: null,
+            after: null
+        }
+    };
+    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);
+        beforeElem.detail.borderWidth = borderWidth;
+        afterElem.detail.borderWidth = detail.borderWidth;
+    }
+    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)];
+        beforeElem.detail.borderWidth = [...bw];
+        afterElem.detail.borderWidth = [...detail.borderWidth];
+    }
+    if (typeof borderRadius === 'number') {
+        detail.borderRadius = doNum(borderRadius * middleRatio);
+        beforeElem.detail.borderRadius = borderRadius;
+        afterElem.detail.borderRadius = detail.borderRadius;
+    }
+    else if (Array.isArray(detail.borderRadius)) {
+        const br = borderRadius;
+        detail.borderRadius = [br[0] * xRatio, br[1] * xRatio, br[2] * yRatio, br[3] * yRatio];
+        beforeElem.detail.borderRadius = [...br];
+        afterElem.detail.borderRadius = [...detail.borderRadius];
+    }
+    if (Array.isArray(borderDash)) {
+        borderDash.forEach((dash, i) => {
+            detail.borderDash[i] = doNum(dash * maxRatio);
+        });
+        beforeElem.detail.borderDash = [...borderDash];
+        afterElem.detail.borderDash = [...detail.borderDash];
+    }
+    if (typeof shadowOffsetX === 'number') {
+        detail.shadowOffsetX = doNum(shadowOffsetX * maxRatio);
+        beforeElem.detail.shadowOffsetX = shadowOffsetX;
+        afterElem.detail.shadowOffsetX = detail.shadowOffsetX;
+    }
+    if (typeof shadowOffsetY === 'number') {
+        detail.shadowOffsetY = doNum(shadowOffsetY * maxRatio);
+        beforeElem.detail.shadowOffsetY = shadowOffsetY;
+        afterElem.detail.shadowOffsetY = detail.shadowOffsetY;
+    }
+    if (typeof shadowBlur === 'number') {
+        detail.shadowBlur = doNum(shadowBlur * maxRatio);
+        beforeElem.detail.shadowBlur = shadowBlur;
+        afterElem.detail.shadowBlur = detail.shadowBlur;
+    }
+    record.content.before = toFlattenElement(beforeElem);
+    record.content.after = toFlattenElement(afterElem);
+    return record;
+}
+function resizeElementBaseByRatio(elem, opts) {
+    const { xRatio, yRatio } = opts;
+    const { uuid, 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);
+    const record = {
+        type: 'modifyElement',
+        time: Date.now(),
+        content: {
+            method: 'modifyElement',
+            uuid: uuid,
+            before: { x, y, w, h },
+            after: { x: elem.x, y: elem.y, w: elem.w, h: elem.h }
+        }
+    };
+    const detailRecord = resizeElementBaseDetailByRatio(elem, opts);
+    record.content.before = Object.assign(Object.assign({}, record.content.before), detailRecord.content.before);
+    record.content.after = Object.assign(Object.assign({}, record.content.after), detailRecord.content.after);
+    return record;
+}
+function resizeTextElementDetailByRatio(elem, opts) {
+    const { minRatio, maxRatio } = opts;
+    const { fontSize, lineHeight } = elem.detail;
+    const ratio = (minRatio + maxRatio) / 2;
+    const beforeFlattenElem = {};
+    const afterFlattenElem = {};
+    if (fontSize && fontSize > 0) {
+        elem.detail.fontSize = doNum(fontSize * ratio);
+        beforeFlattenElem['detail.fontSize'] = fontSize;
+        afterFlattenElem['detail.fontSize'] = elem.detail.fontSize;
+    }
+    if (lineHeight && lineHeight > 0) {
+        elem.detail.lineHeight = doNum(lineHeight * ratio);
+        beforeFlattenElem['detail.lineHeight'] = lineHeight;
+        afterFlattenElem['detail.lineHeight'] = elem.detail.lineHeight;
+    }
+    const record = {
+        type: 'modifyElement',
+        time: Date.now(),
+        content: {
+            method: 'modifyElement',
+            uuid: elem.uuid,
+            before: beforeFlattenElem,
+            after: afterFlattenElem
+        }
+    };
+    return record;
+}
+function deepResizeElementByRatio(elem, opts, record) {
+    const { type, uuid } = elem;
+    const rootRecord = resizeElementBaseByRatio(elem, opts);
+    const rootRecordBefore = Object.assign(Object.assign({}, rootRecord.content.before), { uuid });
+    const rootRecordAfter = Object.assign(Object.assign({}, rootRecord.content.after), { uuid });
+    record === null || record === void 0 ? void 0 : record.content.before.push(rootRecordBefore);
+    record === null || record === void 0 ? void 0 : record.content.after.push(rootRecordAfter);
+    if (type === 'circle') {
+    }
+    else if (type === 'text') {
+        const textRecord = resizeTextElementDetailByRatio(elem, opts);
+        Object.keys(textRecord.content.before || {}).forEach((key) => {
+            var _a;
+            rootRecordBefore[key] = (_a = textRecord.content.before) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        Object.keys(textRecord.content.after || {}).forEach((key) => {
+            var _a;
+            rootRecordAfter[key] = (_a = textRecord.content.after) === null || _a === void 0 ? void 0 : _a[key];
+        });
+    }
+    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) => {
+            deepResizeElementByRatio(child, opts, record);
+        });
+    }
+}
+function fixedResizeGroupElementChildren(elem, opts, record) {
+    if (!(elem.type === 'group' && Array.isArray(elem.detail.children))) {
+        return;
+    }
+    const { moveX, moveY, moveH, moveW } = opts;
+    let childChangedX = 0;
+    let childChangedY = 0;
+    let needReszieChildren = false;
+    if ((moveX !== 0 || moveY !== 0) && (moveH !== 0 || moveW !== 0)) {
+        needReszieChildren = true;
+        childChangedX = -moveX;
+        childChangedY = -moveY;
+    }
+    if (needReszieChildren !== true) {
+        return;
+    }
+    elem.detail.children.forEach((child) => {
+        const { uuid, x, y } = child;
+        const afterX = x + childChangedX;
+        const afterY = y + childChangedY;
+        const before = { uuid, x, y };
+        const after = { uuid, x: afterX, y: afterY };
+        child.x = afterX;
+        child.y = afterY;
+        record === null || record === void 0 ? void 0 : record.content.before.push(before);
+        record === null || record === void 0 ? void 0 : record.content.after.push(after);
+    });
+}
+export function resizeEffectGroupElement(elem, size, opts) {
+    const record = {
+        type: 'resizeElements',
+        time: Date.now(),
+        content: {
+            method: 'modifyElements',
+            before: [],
+            after: []
+        }
+    };
+    const uuid = elem.uuid;
+    const originX = elem.x;
+    const originY = elem.y;
+    const originW = elem.w;
+    const originH = elem.h;
+    const resizeX = (istype.number(size.x) ? size.x : elem.x);
+    const resizeY = (istype.number(size.y) ? size.y : elem.y);
+    const resizeW = (size.w && size.w > 0 ? size.w : elem.w) || 0;
+    const resizeH = (size.h && size.h > 0 ? size.h : elem.h) || 0;
+    const beforeGroupElem = { uuid, x: originX, y: originY, w: originW, h: originH };
+    const afterGroupElem = { uuid, x: resizeX, y: resizeY, w: resizeW, h: resizeH };
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === 'deepResize') {
+        record.content.before.push(beforeGroupElem);
+        record.content.after.push(afterGroupElem);
+        const xRatio = resizeW / elem.w;
+        const yRatio = resizeH / elem.h;
+        if (xRatio === yRatio && xRatio === 1) {
+            return record;
+        }
+        const minRatio = Math.min(xRatio, yRatio);
+        const maxRatio = Math.max(xRatio, yRatio);
+        elem.w = resizeW;
+        elem.h = resizeH;
+        const resizeRadioOpts = { xRatio, yRatio, minRatio, maxRatio };
+        if (elem.type === 'group' && Array.isArray(elem.detail.children)) {
+            elem.detail.children.forEach((child) => {
+                deepResizeElementByRatio(child, resizeRadioOpts, record);
+            });
+        }
+        const groupDetailRecord = resizeElementBaseDetailByRatio(elem, resizeRadioOpts);
+        Object.keys(groupDetailRecord.content.before || {}).forEach((key) => {
+            var _a;
+            beforeGroupElem[key] = (_a = groupDetailRecord.content.before) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        Object.keys(groupDetailRecord.content.after || {}).forEach((key) => {
+            var _a;
+            afterGroupElem[key] = (_a = groupDetailRecord.content.after) === null || _a === void 0 ? void 0 : _a[key];
+        });
+        return record;
+    }
+    if ((opts === null || opts === void 0 ? void 0 : opts.resizeEffect) === 'fixed') {
+        record.content.before.push(beforeGroupElem);
+        record.content.after.push(afterGroupElem);
+        const moveX = resizeX - elem.x;
+        const moveY = resizeY - elem.y;
+        const moveW = resizeW - elem.w;
+        const moveH = resizeH - elem.h;
+        fixedResizeGroupElementChildren(elem, { moveX, moveY, moveH, moveW }, record);
+        elem.w = resizeW;
+        elem.h = resizeH;
+        elem.x = resizeX;
+        elem.y = resizeY;
+        return record;
+    }
+    elem.w = resizeW;
+    elem.h = resizeH;
+    elem.x = resizeX;
+    elem.y = resizeY;
+    record.content.before.push(beforeGroupElem);
+    record.content.after.push(afterGroupElem);
+    return record;
+}

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,6 +4,8 @@ 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 (Array.isArray(borderWidth)) {
         borderRadius = 0;
@@ -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 {};