@idraw/util 0.4.0-beta.3 → 0.4.0-beta.31

package/dist/esm/lib/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,150 @@ 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;
+}
+export function calcElementViewRectInfoMap(elemSize, opts) {
+    const { groupQueue, viewScaleInfo } = 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 })
+    };
+    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 {
+        originRectInfo,
+        rangeRectInfo
+    };
+}

package/dist/esm/lib/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/lib/view-content.js

@@ -0,0 +1,88 @@
+import { rotateElementVertexes } from './rotate';
+import { formatNumber } from './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;
+}

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

@@ -0,0 +1,21 @@
+import { Elements, ViewScaleInfo, ViewSizeInfo, ViewRectInfo, ViewVisibleInfoMap } from '@idraw/types';
+export declare function sortElementsViewVisiableInfoMap(elements: Elements, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    viewVisibleInfoMap: ViewVisibleInfoMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function updateViewVisibleInfoMapStatus(viewVisibleInfoMap: ViewVisibleInfoMap, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    viewVisibleInfoMap: ViewVisibleInfoMap;
+    visibleCount: number;
+    invisibleCount: number;
+};
+export declare function calcVisibleOriginCanvasRectInfo(opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): ViewRectInfo;

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

@@ -0,0 +1,93 @@
+import { calcElementOriginRectInfo, originRectInfoToRangeRectInfo } from './view-calc';
+import { getGroupQueueByElementPosition } from './element';
+import { calcElementCenter } from './rotate';
+import { is } from './is';
+export function sortElementsViewVisiableInfoMap(elements, opts) {
+    const visibleInfoMap = {};
+    const currentPosition = [];
+    const _walk = (elem) => {
+        const baseInfo = {
+            isVisibleInView: true,
+            isGroup: elem.type === 'group',
+            position: [...currentPosition]
+        };
+        let originRectInfo = null;
+        const groupQueue = getGroupQueueByElementPosition(elements, currentPosition);
+        originRectInfo = calcElementOriginRectInfo(elem, {
+            groupQueue: groupQueue || []
+        });
+        visibleInfoMap[elem.uuid] = Object.assign(Object.assign({}, baseInfo), {
+            originRectInfo: originRectInfo,
+            rangeRectInfo: is.angle(elem.angle) ? originRectInfoToRangeRectInfo(originRectInfo) : originRectInfo
+        });
+        if (elem.type === 'group') {
+            elem.detail.children.forEach((ele, i) => {
+                currentPosition.push(i);
+                _walk(ele);
+                currentPosition.pop();
+            });
+        }
+    };
+    elements.forEach((elem, index) => {
+        currentPosition.push(index);
+        _walk(elem);
+        currentPosition.pop();
+    });
+    return updateViewVisibleInfoMapStatus(visibleInfoMap, opts);
+}
+function isRangeRectInfoCollide(info1, info2) {
+    const rect1MinX = Math.min(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MaxX = Math.max(info1.topLeft.x, info1.topRight.x, info1.bottomLeft.x, info1.bottomRight.x);
+    const rect1MinY = Math.min(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect1MaxY = Math.max(info1.topLeft.y, info1.topRight.y, info1.bottomLeft.y, info1.bottomRight.y);
+    const rect2MinX = Math.min(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MaxX = Math.max(info2.topLeft.x, info2.topRight.x, info2.bottomLeft.x, info2.bottomRight.x);
+    const rect2MinY = Math.min(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    const rect2MaxY = Math.max(info2.topLeft.y, info2.topRight.y, info2.bottomLeft.y, info2.bottomRight.y);
+    if ((rect1MinX <= rect2MaxX && rect1MaxX >= rect2MinX && rect1MinY <= rect2MaxY && rect1MaxY >= rect2MinY) ||
+        (rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY && rect2MaxX <= rect1MaxY && rect2MaxX >= rect1MaxY)) {
+        return true;
+    }
+    return false;
+}
+export function updateViewVisibleInfoMapStatus(viewVisibleInfoMap, opts) {
+    const canvasRectInfo = calcVisibleOriginCanvasRectInfo(opts);
+    let visibleCount = 0;
+    let invisibleCount = 0;
+    Object.keys(viewVisibleInfoMap).forEach((uuid) => {
+        const info = viewVisibleInfoMap[uuid];
+        info.isVisibleInView = isRangeRectInfoCollide(info.rangeRectInfo, canvasRectInfo);
+        info.isVisibleInView ? visibleCount++ : invisibleCount++;
+    });
+    return { viewVisibleInfoMap, visibleCount, invisibleCount };
+}
+export function calcVisibleOriginCanvasRectInfo(opts) {
+    const { viewScaleInfo, viewSizeInfo } = opts;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { width, height } = viewSizeInfo;
+    const x = 0 - offsetLeft / scale;
+    const y = 0 - offsetTop / scale;
+    const w = width / scale;
+    const h = height / scale;
+    const center = calcElementCenter({ x, y, w, h });
+    const topLeft = { x, y };
+    const topRight = { x: x + w, y };
+    const bottomLeft = { x, y: y + h };
+    const bottomRight = { x: x + w, y: y + h };
+    const left = { x, y: center.y };
+    const top = { x: center.x, y };
+    const right = { x: x + w, y: center.y };
+    const bottom = { x: center.x, y: y + h };
+    const rectInfo = {
+        center,
+        topLeft,
+        topRight,
+        bottomLeft,
+        bottomRight,
+        left,
+        top,
+        right,
+        bottom
+    };
+    return rectInfo;
+}