@idraw/util 0.3.1 → 0.4.0-alpha.2

package/dist/esm/lib/rotate.js

@@ -0,0 +1,205 @@
+import { calcDistance } from './point';
+export function parseRadianToAngle(radian) {
+    return (radian / Math.PI) * 180;
+}
+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);
+    if (center && (radian > 0 || radian < 0)) {
+        ctx.translate(center.x, center.y);
+        ctx.rotate(radian);
+        ctx.translate(-center.x, -center.y);
+    }
+    callback(ctx);
+    if (center && (radian > 0 || radian < 0)) {
+        ctx.translate(center.x, center.y);
+        ctx.rotate(-radian);
+        ctx.translate(-center.x, -center.y);
+    }
+}
+export function calcElementCenter(elem) {
+    const p = {
+        x: elem.x + elem.w / 2,
+        y: elem.y + elem.h / 2
+    };
+    return p;
+}
+export function calcElementCenterFromVertexes(ves) {
+    const startX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const startY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const endX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const endY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemSize = {
+        x: startX,
+        y: startY,
+        w: endX - startX,
+        h: endY - startY
+    };
+    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;
+        }
+    }
+    else {
+        return 0;
+    }
+}
+function calcLineRadian(center, p) {
+    const x = p.x - center.x;
+    const y = p.y - center.y;
+    if (x === 0) {
+        if (y < 0) {
+            return 0;
+        }
+        else if (y > 0) {
+            return Math.PI;
+        }
+    }
+    else if (y === 0) {
+        if (x < 0) {
+            return (Math.PI * 3) / 2;
+        }
+        else if (x > 0) {
+            return Math.PI / 2;
+        }
+    }
+    if (x > 0 && y < 0) {
+        return Math.atan(Math.abs(x) / Math.abs(y));
+    }
+    else if (x > 0 && y > 0) {
+        return Math.PI - Math.atan(Math.abs(x) / Math.abs(y));
+    }
+    else if (x < 0 && y > 0) {
+        return Math.PI + Math.atan(Math.abs(x) / Math.abs(y));
+    }
+    else if (x < 0 && y < 0) {
+        return 2 * Math.PI - Math.atan(Math.abs(x) / Math.abs(y));
+    }
+    return 0;
+}
+export function rotatePoint(center, start, radian) {
+    const startRadian = calcLineRadian(center, start);
+    const rotateRadian = radian;
+    let endRadian = startRadian + rotateRadian;
+    if (endRadian > Math.PI * 2) {
+        endRadian = endRadian - Math.PI * 2;
+    }
+    else if (endRadian < 0 - Math.PI * 2) {
+        endRadian = endRadian + Math.PI * 2;
+    }
+    if (endRadian < 0) {
+        endRadian = endRadian + Math.PI * 2;
+    }
+    const length = calcDistance(center, start);
+    let x = 0;
+    let y = 0;
+    if (endRadian === 0) {
+        x = 0;
+        y = 0 - length;
+    }
+    else if (endRadian > 0 && endRadian < Math.PI / 2) {
+        x = Math.sin(endRadian) * length;
+        y = 0 - Math.cos(endRadian) * length;
+    }
+    else if (endRadian === Math.PI / 2) {
+        x = length;
+        y = 0;
+    }
+    else if (endRadian > Math.PI / 2 && endRadian < Math.PI) {
+        x = Math.sin(Math.PI - endRadian) * length;
+        y = Math.cos(Math.PI - endRadian) * length;
+    }
+    else if (endRadian === Math.PI) {
+        x = 0;
+        y = length;
+    }
+    else if (endRadian > Math.PI && endRadian < (3 / 2) * Math.PI) {
+        x = 0 - Math.sin(endRadian - Math.PI) * length;
+        y = Math.cos(endRadian - Math.PI) * length;
+    }
+    else if (endRadian === (3 / 2) * Math.PI) {
+        x = 0 - length;
+        y = 0;
+    }
+    else if (endRadian > (3 / 2) * Math.PI && endRadian < 2 * Math.PI) {
+        x = 0 - Math.sin(2 * Math.PI - endRadian) * length;
+        y = 0 - Math.cos(2 * Math.PI - endRadian) * length;
+    }
+    else if (endRadian === 2 * Math.PI) {
+        x = 0;
+        y = 0 - length;
+    }
+    x += center.x;
+    y += center.y;
+    return { x, y };
+}
+export function rotatePointInGroup(point, groupQueue) {
+    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        let resultX = point.x;
+        let resultY = point.y;
+        groupQueue.forEach((group) => {
+            const { x, y, w, h, angle = 0 } = group;
+            const center = calcElementCenter({ x, y, w, h, angle });
+            const temp = rotatePoint(center, { x: resultX, y: resultY }, parseAngleToRadian(angle));
+            resultX = temp.x;
+            resultY = temp.y;
+        });
+        return {
+            x: resultX,
+            y: resultY
+        };
+    }
+    return point;
+}
+export function getElementRotateVertexes(elemSize, center, angle) {
+    const { x, y, w, h } = elemSize;
+    let p1 = { x, y };
+    let p2 = { x: x + w, y };
+    let p3 = { x: x + w, y: y + h };
+    let p4 = { x, y: y + h };
+    if (angle && (angle > 0 || angle < 0)) {
+        const radian = parseAngleToRadian(limitAngle(angle));
+        p1 = rotatePoint(center, p1, radian);
+        p2 = rotatePoint(center, p2, radian);
+        p3 = rotatePoint(center, p3, radian);
+        p4 = rotatePoint(center, p4, radian);
+    }
+    return [p1, p2, p3, p4];
+}
+export function rotateElementVertexes(elemSize) {
+    const { angle = 0 } = elemSize;
+    const center = calcElementCenter(elemSize);
+    return getElementRotateVertexes(elemSize, center, angle);
+}
+export function rotateVertexes(center, ves, radian) {
+    return [
+        rotatePoint(center, { x: ves[0].x, y: ves[0].y }, radian),
+        rotatePoint(center, { x: ves[1].x, y: ves[1].y }, radian),
+        rotatePoint(center, { x: ves[2].x, y: ves[2].y }, radian),
+        rotatePoint(center, { x: ves[3].x, y: ves[3].y }, radian)
+    ];
+}
+export function limitAngle(angle) {
+    if (!(angle > 0 || angle < 0) || angle === 0) {
+        return 0;
+    }
+    let num = angle % 360;
+    if (num < 0) {
+        num += 360;
+    }
+    return num;
+}

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

@@ -0,0 +1,12 @@
+export declare class Store<T extends Record<string | symbol, any>> {
+    private _temp;
+    private _backUpDefaultStorage;
+    constructor(opts: {
+        defaultStorage: T;
+    });
+    set<K extends keyof T>(name: K, value: T[K]): void;
+    get<K extends keyof T>(name: K): T[K];
+    getSnapshot(): T;
+    clear(): void;
+    private _createTempStorage;
+}

package/dist/esm/lib/store.js

@@ -0,0 +1,22 @@
+import { deepClone } from './data';
+export class Store {
+    constructor(opts) {
+        this._backUpDefaultStorage = deepClone(opts.defaultStorage);
+        this._temp = this._createTempStorage();
+    }
+    set(name, value) {
+        this._temp[name] = value;
+    }
+    get(name) {
+        return this._temp[name];
+    }
+    getSnapshot() {
+        return deepClone(this._temp);
+    }
+    clear() {
+        this._temp = this._createTempStorage();
+    }
+    _createTempStorage() {
+        return deepClone(this._backUpDefaultStorage);
+    }
+}

package/dist/esm/lib/svg-path.d.ts

@@ -0,0 +1,10 @@
+import type { SVGPathCommand, ElementSize } from '@idraw/types';
+export declare function parseSVGPath(path: string): SVGPathCommand[];
+export declare function generateSVGPath(commands: SVGPathCommand[]): string;
+type FilterSVGPathResult = ElementSize & {
+    detail: {
+        commands: SVGPathCommand[];
+    };
+};
+export declare function filterSVGPath(commands: SVGPathCommand[]): FilterSVGPathResult;
+export {};

package/dist/esm/lib/svg-path.js

@@ -0,0 +1,36 @@
+const cmdReg = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
+const numReg = /(-?\d+(?:\.\d+)?)/gi;
+export function parseSVGPath(path) {
+    const commands = [];
+    path.replace(cmdReg, (match, cmd, paramStr) => {
+        const matchParams = paramStr.match(numReg);
+        const params = matchParams ? matchParams.map(Number) : [];
+        const command = {
+            type: cmd,
+            params
+        };
+        commands.push(command);
+        return match;
+    });
+    return commands;
+}
+export function generateSVGPath(commands) {
+    let path = '';
+    commands.forEach((item) => {
+        path += item.type + item.params.join(' ');
+    });
+    return path;
+}
+export function filterSVGPath(commands) {
+    const filteredCommands = [];
+    const result = {
+        x: 0,
+        y: 0,
+        h: 0,
+        w: 0,
+        detail: {
+            commands: filteredCommands
+        }
+    };
+    return result;
+}

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

@@ -1 +1,3 @@
 export declare function createUUID(): string;
+export declare function createAssetId(assetStr: string): string;
+export declare function isAssetId(id: any | string): boolean;

package/dist/esm/lib/uuid.js

@@ -1,6 +1,31 @@
 export function createUUID() {
-    function str4() {
+    function _createStr() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-    return `${str4()}${str4()}-${str4()}-${str4()}-${str4()}-${str4()}${str4()}${str4()}`;
+    return `${_createStr()}${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}-${_createStr()}${_createStr()}${_createStr()}`;
+}
+function limitHexStr(str) {
+    let count = 0;
+    for (let i = 0; i < str.length; i++) {
+        count += str.charCodeAt(i) * str.charCodeAt(i) * i * i;
+    }
+    return count.toString(16).substring(0, 4);
+}
+export function createAssetId(assetStr) {
+    const len = assetStr.length;
+    const mid = Math.floor(len / 2);
+    const start4 = assetStr.substring(0, 4).padEnd(4, '0');
+    const end4 = assetStr.substring(0, 4).padEnd(4, '0');
+    const str1 = limitHexStr(len.toString(16).padEnd(4, start4));
+    const str2 = limitHexStr(assetStr.substring(mid - 4, mid).padEnd(4, start4)).padEnd(4, 'f');
+    const str3 = limitHexStr(assetStr.substring(mid - 8, mid - 4).padEnd(4, start4)).padEnd(4, 'f');
+    const str4 = limitHexStr(assetStr.substring(mid - 12, mid - 8).padEnd(4, start4)).padEnd(4, 'f');
+    const str5 = limitHexStr(assetStr.substring(mid - 16, mid - 12).padEnd(4, end4)).padEnd(4, 'f');
+    const str6 = limitHexStr(assetStr.substring(mid, mid + 4).padEnd(4, end4)).padEnd(4, 'f');
+    const str7 = limitHexStr(assetStr.substring(mid + 4, mid + 8).padEnd(4, end4)).padEnd(4, 'f');
+    const str8 = limitHexStr(end4.padEnd(4, start4).padEnd(4, end4));
+    return `@assets/${str1}${str2}-${str3}-${str4}-${str5}-${str6}${str7}${str8}`;
+}
+export function isAssetId(id) {
+    return /^@assets\/[0-9a-z]{8,8}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{4,4}\-[0-9a-z]{12,12}$/.test(`${id}`);
 }

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

@@ -0,0 +1,10 @@
+import { Element, ElementSize, ViewRectVertexes } from '@idraw/types';
+export declare function getElementVertexes(elemSize: ElementSize): ViewRectVertexes;
+export declare function calcElementVertexes(elemSize: ElementSize): ViewRectVertexes;
+export declare function calcElementQueueVertexesQueueInGroup(groupQueue: ElementSize[]): ViewRectVertexes[];
+export declare function calcElementVertexesQueueInGroup(targetElem: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+}): ViewRectVertexes[];
+export declare function calcElementVertexesInGroup(targetElem: ElementSize, opts: {
+    groupQueue: Element<'group'>[];
+}): ViewRectVertexes | null;

package/dist/esm/lib/vertex.js

@@ -0,0 +1,73 @@
+import { getElementRotateVertexes, calcElementCenter, parseAngleToRadian, rotateVertexes, calcElementCenterFromVertexes } from './rotate';
+export function getElementVertexes(elemSize) {
+    const { x, y, h, w } = elemSize;
+    return [
+        { x, y },
+        { x: x + w, y },
+        { x: x + w, y: y + h },
+        { x, y: y + h }
+    ];
+}
+export function calcElementVertexes(elemSize) {
+    const { x, y, w, h, angle = 0 } = elemSize;
+    if (angle === 0) {
+        return getElementVertexes(elemSize);
+    }
+    return getElementRotateVertexes(elemSize, calcElementCenter({ x, y, w, h, angle }), angle);
+}
+export function calcElementQueueVertexesQueueInGroup(groupQueue) {
+    const vesList = [];
+    let totalX = 0;
+    let totalY = 0;
+    const rotateActionList = [];
+    const elemQueue = [...groupQueue];
+    for (let i = 0; i < elemQueue.length; i++) {
+        const { x, y, w, h, angle = 0 } = elemQueue[i];
+        totalX += x;
+        totalY += y;
+        let ves;
+        if (i === 0) {
+            const elemSize = { x: totalX, y: totalY, w, h, angle };
+            ves = calcElementVertexes({ x, y, w, h, angle });
+            rotateActionList.push({
+                center: calcElementCenter(elemSize),
+                angle,
+                radian: parseAngleToRadian(angle)
+            });
+        }
+        else {
+            const elemSize = { x: totalX, y: totalY, w, h, angle };
+            ves = getElementVertexes(elemSize);
+            for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
+                const { center, radian } = rotateActionList[aIdx];
+                ves = rotateVertexes(center, ves, radian);
+            }
+            const vesCenter = calcElementCenterFromVertexes(ves);
+            if (angle > 0 || angle < 0) {
+                const radian = parseAngleToRadian(angle);
+                ves = rotateVertexes(vesCenter, ves, radian);
+            }
+            rotateActionList.push({
+                center: vesCenter,
+                angle,
+                radian: parseAngleToRadian(angle)
+            });
+        }
+        vesList.push(ves);
+    }
+    return vesList;
+}
+export function calcElementVertexesQueueInGroup(targetElem, opts) {
+    const { groupQueue } = opts;
+    if (!(groupQueue.length > 0)) {
+        return [calcElementVertexes(targetElem)];
+    }
+    const elemQueue = [...groupQueue, ...[targetElem]];
+    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    return vesList;
+}
+export function calcElementVertexesInGroup(targetElem, opts) {
+    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+    const ves = vesList.pop();
+    return ves || null;
+}

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

@@ -0,0 +1,49 @@
+import { Point, PointSize, Data, ViewScaleInfo, ViewSizeInfo, Element, ElementType, ElementSize, ViewContext2D, ViewRectVertexes } from '@idraw/types';
+export declare function viewScale(opts: {
+    scale: number;
+    point: PointSize;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    moveX: number;
+    moveY: number;
+};
+export declare function viewScroll(opts: {
+    moveX?: number;
+    moveY?: number;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): 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;
+    viewSizeInfo: ViewSizeInfo;
+}): ViewRectVertexes;
+export declare function isViewPointInElement(p: Point, opts: {
+    context2d: ViewContext2D;
+    element: ElementSize;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): boolean;
+export declare function getViewPointAtElement(p: Point, opts: {
+    context2d: ViewContext2D;
+    data: Data;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+    groupQueue?: Element<'group'>[];
+}): {
+    index: number;
+    element: null | Element<ElementType>;
+    groupQueueIndex: number;
+};
+export declare function isElementInView(elem: ElementSize, opts: {
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): boolean;

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

@@ -0,0 +1,167 @@
+import { rotateElementVertexes } from './rotate';
+import { checkRectIntersect } from './rect';
+export function viewScale(opts) {
+    const { scale, point, viewScaleInfo: prevViewScaleInfo } = opts;
+    const { offsetLeft, offsetTop } = prevViewScaleInfo;
+    const scaleDiff = scale / prevViewScaleInfo.scale;
+    const x0 = point.x;
+    const y0 = point.y;
+    const moveX = x0 - x0 * scaleDiff + (offsetLeft * scaleDiff - offsetLeft);
+    const moveY = y0 - y0 * scaleDiff + (offsetTop * scaleDiff - offsetTop);
+    return {
+        moveX,
+        moveY
+    };
+}
+export function viewScroll(opts) {
+    const { moveX = 0, moveY = 0, viewScaleInfo, viewSizeInfo } = opts;
+    const { scale } = viewScaleInfo;
+    const { width, height, contextWidth, contextHeight } = viewSizeInfo;
+    let offsetLeft = viewScaleInfo.offsetLeft;
+    let offsetRight = viewScaleInfo.offsetRight;
+    let offsetTop = viewScaleInfo.offsetTop;
+    let offsetBottom = viewScaleInfo.offsetBottom;
+    offsetLeft += moveX;
+    offsetTop += moveY;
+    const w = contextWidth * scale;
+    const h = contextHeight * scale;
+    offsetRight = width - (w + offsetLeft);
+    offsetBottom = height - (h + offsetTop);
+    return {
+        scale,
+        offsetTop,
+        offsetLeft,
+        offsetRight,
+        offsetBottom
+    };
+}
+export function calcViewElementSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x, y, w, h, angle } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+        x: x * scale + offsetLeft,
+        y: y * scale + offsetTop,
+        w: w * scale,
+        h: h * scale,
+        angle
+    };
+    return newSize;
+}
+export function calcViewPointSize(size, opts) {
+    const { viewScaleInfo } = opts;
+    const { x, y } = size;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+        x: x * scale + offsetLeft,
+        y: y * scale + offsetTop
+    };
+    return newSize;
+}
+export function calcViewVertexes(vertexes, opts) {
+    return [
+        calcViewPointSize(vertexes[0], opts),
+        calcViewPointSize(vertexes[1], opts),
+        calcViewPointSize(vertexes[2], opts),
+        calcViewPointSize(vertexes[3], opts)
+    ];
+}
+export function isViewPointInElement(p, opts) {
+    const { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo } = opts;
+    const { angle = 0 } = elem;
+    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
+    const vertexes = rotateElementVertexes({ x, y, w, h, angle });
+    if (vertexes.length >= 2) {
+        ctx.beginPath();
+        ctx.moveTo(vertexes[0].x, vertexes[0].y);
+        for (let i = 1; i < vertexes.length; i++) {
+            ctx.lineTo(vertexes[i].x, vertexes[i].y);
+        }
+        ctx.closePath();
+    }
+    if (ctx.isPointInPath(p.x, p.y)) {
+        return true;
+    }
+    return false;
+}
+export function getViewPointAtElement(p, opts) {
+    var _a, _b, _c;
+    const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
+    const result = {
+        index: -1,
+        element: null,
+        groupQueueIndex: -1
+    };
+    if (groupQueue && Array.isArray(groupQueue) && (groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        for (let gIdx = groupQueue.length - 1; gIdx >= 0; gIdx--) {
+            let totalX = 0;
+            let totalY = 0;
+            let totalAngle = 0;
+            for (let i = 0; i <= gIdx; i++) {
+                totalX += groupQueue[i].x;
+                totalY += groupQueue[i].y;
+                totalAngle += groupQueue[i].angle || 0;
+            }
+            const lastGroup = groupQueue[gIdx];
+            if (lastGroup && lastGroup.type === 'group' && Array.isArray((_a = lastGroup.detail) === null || _a === void 0 ? void 0 : _a.children)) {
+                for (let i = 0; i < lastGroup.detail.children.length; i++) {
+                    const child = lastGroup.detail.children[i];
+                    if (((_b = child === null || child === void 0 ? void 0 : child.operations) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
+                        continue;
+                    }
+                    if (child) {
+                        const elemSize = {
+                            x: totalX + child.x,
+                            y: totalY + child.y,
+                            w: child.w,
+                            h: child.h,
+                            angle: totalAngle + (child.angle || 0)
+                        };
+                        if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
+                            result.element = child;
+                            if (gIdx < groupQueue.length - 1 || child.type !== 'group') {
+                                result.groupQueueIndex = gIdx;
+                            }
+                            break;
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            if (result.element) {
+                break;
+            }
+        }
+    }
+    if (result.element) {
+        return result;
+    }
+    for (let i = data.elements.length - 1; i >= 0; i--) {
+        const elem = data.elements[i];
+        if (((_c = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _c === void 0 ? void 0 : _c.invisible) === true) {
+            continue;
+        }
+        if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+            result.index = i;
+            result.element = elem;
+            break;
+        }
+    }
+    return result;
+}
+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 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);
+    const elemStartY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemEndX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const elemEndY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const elemSize = { x: elemStartX, y: elemStartY, w: elemEndX - elemStartX, h: elemEndY - elemStartY };
+    return checkRectIntersect(viewSize, elemSize);
+}