@idraw/util 0.4.2 → 1.0.0-alpha.1

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

@@ -1,10 +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'>[];
+import { StrictMaterial, MaterialSize, ViewRectVertexes } from '@idraw/types';
+export declare function getMaterialVertexes(mtrlSize: MaterialSize): ViewRectVertexes;
+export declare function calcMaterialVertexes(mtrlSize: MaterialSize): ViewRectVertexes;
+export declare function calcMaterialQueueVertexesQueueInGroup(groupQueue: MaterialSize[]): ViewRectVertexes[];
+export declare function calcMaterialVertexesQueueInGroup(targetMtrl: MaterialSize, opts: {
+    groupQueue: StrictMaterial<'group'>[];
 }): ViewRectVertexes[];
-export declare function calcElementVertexesInGroup(targetElem: ElementSize, opts: {
-    groupQueue: Element<'group'>[];
+export declare function calcMaterialVertexesInGroup(targetMtrl: MaterialSize, opts: {
+    groupQueue: StrictMaterial<'group'>[];
 }): ViewRectVertexes | null;

package/dist/esm/view/vertex.js

@@ -1,48 +1,48 @@
-import { getElementRotateVertexes, calcElementCenter, parseAngleToRadian, rotateVertexes, calcElementCenterFromVertexes } from './rotate';
-export function getElementVertexes(elemSize) {
-    const { x, y, h, w } = elemSize;
+import { getMaterialRotateVertexes, calcMaterialCenter, parseAngleToRadian, rotateVertexes, calcMaterialCenterFromVertexes, } from './rotate';
+export function getMaterialVertexes(mtrlSize) {
+    const { x, y, height, width } = mtrlSize;
     return [
         { x, y },
-        { x: x + w, y },
-        { x: x + w, y: y + h },
-        { x, y: y + h }
+        { x: x + width, y },
+        { x: x + width, y: y + height },
+        { x, y: y + height },
     ];
 }
-export function calcElementVertexes(elemSize) {
-    const { x, y, w, h, angle = 0 } = elemSize;
+export function calcMaterialVertexes(mtrlSize) {
+    const { x, y, width, height, angle = 0 } = mtrlSize;
     if (angle === 0) {
-        return getElementVertexes(elemSize);
+        return getMaterialVertexes(mtrlSize);
     }
-    return getElementRotateVertexes(elemSize, calcElementCenter({ x, y, w, h, angle }), angle);
+    return getMaterialRotateVertexes(mtrlSize, calcMaterialCenter({ x, y, width, height, angle }), angle);
 }
-export function calcElementQueueVertexesQueueInGroup(groupQueue) {
+export function calcMaterialQueueVertexesQueueInGroup(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];
+    const mtrlQueue = [...groupQueue];
+    for (let i = 0; i < mtrlQueue.length; i++) {
+        const { x, y, width, height, angle = 0 } = mtrlQueue[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 });
+            const mtrlSize = { x: totalX, y: totalY, width, height, angle };
+            ves = calcMaterialVertexes({ x, y, width, height, angle });
             rotateActionList.push({
-                center: calcElementCenter(elemSize),
+                center: calcMaterialCenter(mtrlSize),
                 angle,
-                radian: parseAngleToRadian(angle)
+                radian: parseAngleToRadian(angle),
             });
         }
         else {
-            const elemSize = { x: totalX, y: totalY, w, h, angle };
-            ves = getElementVertexes(elemSize);
+            const mtrlSize = { x: totalX, y: totalY, width, height, angle };
+            ves = getMaterialVertexes(mtrlSize);
             for (let aIdx = 0; aIdx < rotateActionList.length; aIdx++) {
                 const { center, radian } = rotateActionList[aIdx];
                 ves = rotateVertexes(center, ves, radian);
             }
-            const vesCenter = calcElementCenterFromVertexes(ves);
+            const vesCenter = calcMaterialCenterFromVertexes(ves);
             if (angle > 0 || angle < 0) {
                 const radian = parseAngleToRadian(angle);
                 ves = rotateVertexes(vesCenter, ves, radian);
@@ -50,24 +50,24 @@ export function calcElementQueueVertexesQueueInGroup(groupQueue) {
             rotateActionList.push({
                 center: vesCenter,
                 angle,
-                radian: parseAngleToRadian(angle)
+                radian: parseAngleToRadian(angle),
             });
         }
         vesList.push(ves);
     }
     return vesList;
 }
-export function calcElementVertexesQueueInGroup(targetElem, opts) {
+export function calcMaterialVertexesQueueInGroup(targetMtrl, opts) {
     const { groupQueue } = opts;
     if (!(groupQueue.length > 0)) {
-        return [calcElementVertexes(targetElem)];
+        return [calcMaterialVertexes(targetMtrl)];
     }
-    const elemQueue = [...groupQueue, ...[targetElem]];
-    const vesList = calcElementQueueVertexesQueueInGroup(elemQueue);
+    const mtrlQueue = [...groupQueue, ...[targetMtrl]];
+    const vesList = calcMaterialQueueVertexesQueueInGroup(mtrlQueue);
     return vesList;
 }
-export function calcElementVertexesInGroup(targetElem, opts) {
-    const vesList = calcElementVertexesQueueInGroup(targetElem, opts);
+export function calcMaterialVertexesInGroup(targetMtrl, opts) {
+    const vesList = calcMaterialVertexesQueueInGroup(targetMtrl, opts);
     const ves = vesList.pop();
     return ves || null;
 }

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

@@ -1,6 +1,2 @@
-import type { Data, Element, ElementSize, ViewScaleInfo, ViewSizeInfo, ViewBoxSize } from '@idraw/types';
-export declare function calcViewBoxSize(viewElem: Element, opts: {
-    viewScaleInfo: ViewScaleInfo;
-    viewSizeInfo: ViewSizeInfo;
-}): ViewBoxSize;
-export declare function calcVisiableViewSize(data: Data): Omit<ElementSize, 'angle'>;
+import type { Data, MaterialSize } from '@idraw/types';
+export declare function calcVisiableViewSize(data: Data): Omit<MaterialSize, 'angle'>;

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

@@ -1,75 +1,19 @@
-import { getDefaultElementDetailConfig } from './config';
-import { calcElementListSize } from './element';
-const defaultElemConfig = getDefaultElementDetailConfig();
-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;
-    }
-    let { x, y, w, h } = viewElem;
-    let radiusList = [0, 0, 0, 0];
-    if (typeof borderRadius === 'number') {
-        const br = borderRadius * scale;
-        radiusList = [br, br, br, br];
-    }
-    else if (Array.isArray(borderRadius) && (borderRadius === null || borderRadius === void 0 ? void 0 : borderRadius.length) === 4) {
-        radiusList = [borderRadius[0] * scale, borderRadius[1] * scale, borderRadius[2] * scale, borderRadius[3] * scale];
-    }
-    let bw = 0;
-    if (typeof borderWidth === 'number') {
-        bw = (borderWidth || 0) * scale;
-    }
-    if (boxSizing === 'border-box' && !hasBorderDash) {
-        x = viewElem.x + bw / 2;
-        y = viewElem.y + bw / 2;
-        w = viewElem.w - bw;
-        h = viewElem.h - bw;
-    }
-    else if (boxSizing === 'content-box') {
-        x = viewElem.x - bw / 2;
-        y = viewElem.y - bw / 2;
-        w = viewElem.w + bw;
-        h = viewElem.h + bw;
-    }
-    else {
-        x = viewElem.x;
-        y = viewElem.y;
-        w = viewElem.w;
-        h = viewElem.h;
-    }
-    w = Math.max(w, 1);
-    h = Math.max(h, 1);
-    radiusList = radiusList.map((r) => {
-        return Math.min(r, w / 2, h / 2);
-    });
-    return {
-        x,
-        y,
-        w,
-        h,
-        radiusList
-    };
-}
+import { calcMaterialListSize } from './material';
 export function calcVisiableViewSize(data) {
-    var _a, _b;
-    const outputSize = calcElementListSize(data.elements);
+    var _a;
+    const outputSize = calcMaterialListSize(data.materials);
     if (data.layout) {
-        if (((_b = (_a = data.layout) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.overflow) === 'hidden') {
+        if (((_a = data.layout) === null || _a === void 0 ? void 0 : _a.overflow) === 'hidden') {
             outputSize.x = data.layout.x;
             outputSize.y = data.layout.y;
-            outputSize.w = data.layout.w;
-            outputSize.h = data.layout.h;
+            outputSize.width = data.layout.width;
+            outputSize.height = data.layout.height;
         }
         else {
             outputSize.x = Math.min(outputSize.x, data.layout.x);
             outputSize.y = Math.min(outputSize.y, data.layout.y);
-            outputSize.w = Math.max(outputSize.w, data.layout.w);
-            outputSize.h = Math.max(outputSize.h, data.layout.h);
+            outputSize.width = Math.max(outputSize.width, data.layout.width);
+            outputSize.height = Math.max(outputSize.height, data.layout.height);
         }
     }
     return outputSize;

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

@@ -1,4 +1,4 @@
-import { Point, PointSize, Data, ViewScaleInfo, ViewSizeInfo, Element, ElementType, ElementSize, ViewContext2D, ViewRectVertexes, ViewRectInfo } from '@idraw/types';
+import { Point, Data, ViewScaleInfo, ViewSizeInfo, StrictMaterial, MaterialType, MaterialSize, ViewContext2D, ViewRectVertexes, BoundingInfo } from '@idraw/types';
 export declare function calcViewScaleInfo(info: {
     scale: number;
     offsetX: number;
@@ -8,7 +8,7 @@ export declare function calcViewScaleInfo(info: {
 }): ViewScaleInfo;
 export declare function viewScale(opts: {
     scale: number;
-    point: PointSize;
+    point: Point;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): {
@@ -21,49 +21,52 @@ export declare function viewScroll(opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): ViewScaleInfo;
-export declare function calcViewElementSize(size: ElementSize, opts: {
+export declare function calcViewMaterialSize(size: MaterialSize, opts: {
+    viewScaleInfo: Partial<ViewScaleInfo>;
+}): MaterialSize;
+export declare function calcViewPoint(size: Point, opts: {
     viewScaleInfo: ViewScaleInfo;
-}): ElementSize;
-export declare function calcViewPointSize(size: PointSize, opts: {
+}): Point;
+export declare function calcPointFromView(viewPoint: Point, opts: {
     viewScaleInfo: ViewScaleInfo;
-}): PointSize;
+}): Point;
 export declare function calcViewVertexes(vertexes: ViewRectVertexes, opts: {
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): ViewRectVertexes;
-export declare function isViewPointInElement(p: Point, opts: {
+export declare function isViewPointInMaterial(p: Point, opts: {
     context2d: ViewContext2D;
-    element: ElementSize;
+    material: MaterialSize;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
 }): boolean;
-export declare function isViewPointInElementSize(p: Point, elemSize: ElementSize, opts?: {
+export declare function isViewPointInMaterialSize(p: Point, mtrlSize: MaterialSize, opts?: {
     includeBorder?: boolean;
 }): boolean;
 export declare function isViewPointInVertexes(p: Point, vertexes: ViewRectVertexes, opts?: {
     includeBorder?: boolean;
 }): boolean;
-export declare function getViewPointAtElement(p: Point, opts: {
+export declare function getViewPointAtMaterial(p: Point, opts: {
     context2d: ViewContext2D;
     data: Data;
     viewScaleInfo: ViewScaleInfo;
     viewSizeInfo: ViewSizeInfo;
-    groupQueue?: Element<'group'>[];
+    groupQueue?: StrictMaterial<'group'>[];
 }): {
     index: number;
-    element: null | Element<ElementType>;
+    material: null | StrictMaterial<MaterialType>;
     groupQueueIndex: number;
 };
-export declare function isElementInView(elem: ElementSize, opts: {
+export declare function isMaterialInView(mtrl: MaterialSize, 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'>[];
+export declare function calcMaterialBoundingInfo(mtrlSize: MaterialSize, opts: {
+    groupQueue: StrictMaterial<'group'>[];
+}): BoundingInfo;
+export declare function boundingInfoToRangeBoundingInfo(boundingInfo: BoundingInfo): BoundingInfo;
+export declare function calcMaterialViewBoundingInfo(mtrlSize: MaterialSize, opts: {
+    groupQueue: StrictMaterial<'group'>[];
     viewScaleInfo: ViewScaleInfo;
     range?: boolean;
-}): ViewRectInfo;
+}): BoundingInfo;

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

@@ -1,6 +1,6 @@
-import { rotateElementVertexes } from './rotate';
+import { rotateMaterialVertexes } from './rotate';
 import { checkRectIntersect } from './rect';
-import { calcElementVertexesInGroup, calcElementVertexes } from './vertex';
+import { calcMaterialVertexesInGroup, calcMaterialVertexes } from './vertex';
 import { getCenterFromTwoPoints } from './point';
 export function calcViewScaleInfo(info, opts) {
     const { scale, offsetX, offsetY } = info;
@@ -17,7 +17,7 @@ export function calcViewScaleInfo(info, opts) {
         offsetLeft,
         offsetTop,
         offsetRight,
-        offsetBottom
+        offsetBottom,
     };
     return newScaleInfo;
 }
@@ -31,7 +31,7 @@ export function viewScale(opts) {
     const moveY = y0 - y0 * scaleDiff + (offsetTop * scaleDiff - offsetTop);
     return {
         moveX,
-        moveY
+        moveY,
     };
 }
 export function viewScroll(opts) {
@@ -53,45 +53,56 @@ export function viewScroll(opts) {
         offsetTop,
         offsetLeft,
         offsetRight,
-        offsetBottom
+        offsetBottom,
     };
 }
-export function calcViewElementSize(size, opts) {
+export function calcViewMaterialSize(size, opts) {
     const { viewScaleInfo } = opts;
-    const { x, y, w, h, angle } = size;
-    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const { id, x, y, width, height, angle } = size;
+    const { scale = 1, offsetTop = 0, offsetLeft = 0 } = viewScaleInfo;
     const newSize = {
+        id,
         x: x * scale + offsetLeft,
         y: y * scale + offsetTop,
-        w: w * scale,
-        h: h * scale,
-        angle
+        width: width * scale,
+        height: height * scale,
+        angle,
     };
     return newSize;
 }
-export function calcViewPointSize(size, opts) {
+export function calcViewPoint(size, opts) {
     const { viewScaleInfo } = opts;
     const { x, y } = size;
     const { scale, offsetTop, offsetLeft } = viewScaleInfo;
     const newSize = {
         x: x * scale + offsetLeft,
-        y: y * scale + offsetTop
+        y: y * scale + offsetTop,
+    };
+    return newSize;
+}
+export function calcPointFromView(viewPoint, opts) {
+    const { viewScaleInfo } = opts;
+    const { x, y } = viewPoint;
+    const { scale, offsetTop, offsetLeft } = viewScaleInfo;
+    const newSize = {
+        x: (x - offsetLeft) / scale,
+        y: (y - offsetTop) / scale,
     };
     return newSize;
 }
 export function calcViewVertexes(vertexes, opts) {
     return [
-        calcViewPointSize(vertexes[0], opts),
-        calcViewPointSize(vertexes[1], opts),
-        calcViewPointSize(vertexes[2], opts),
-        calcViewPointSize(vertexes[3], opts)
+        calcViewPoint(vertexes[0], opts),
+        calcViewPoint(vertexes[1], opts),
+        calcViewPoint(vertexes[2], opts),
+        calcViewPoint(vertexes[3], opts),
     ];
 }
-export function isViewPointInElement(p, opts) {
-    const { context2d: ctx, element: elem, viewScaleInfo } = opts;
-    const { angle = 0 } = elem;
-    const { x, y, w, h } = calcViewElementSize(elem, { viewScaleInfo });
-    const vertexes = rotateElementVertexes({ x, y, w, h, angle });
+export function isViewPointInMaterial(p, opts) {
+    const { context2d: ctx, material: mtrl, viewScaleInfo } = opts;
+    const { angle = 0 } = mtrl;
+    const { x, y, width, height } = calcViewMaterialSize(mtrl, { viewScaleInfo });
+    const vertexes = rotateMaterialVertexes({ x, y, width, height, angle });
     if (vertexes.length >= 2) {
         ctx.beginPath();
         ctx.moveTo(vertexes[0].x, vertexes[0].y);
@@ -105,8 +116,8 @@ export function isViewPointInElement(p, opts) {
     }
     return false;
 }
-export function isViewPointInElementSize(p, elemSize, opts) {
-    const vertexes = calcElementVertexes(elemSize);
+export function isViewPointInMaterialSize(p, mtrlSize, opts) {
+    const vertexes = calcMaterialVertexes(mtrlSize);
     return isViewPointInVertexes(p, vertexes, opts);
 }
 export function isViewPointInVertexes(p, vertexes, opts) {
@@ -124,13 +135,13 @@ export function isViewPointInVertexes(p, vertexes, opts) {
     }
     return false;
 }
-export function getViewPointAtElement(p, opts) {
-    var _a, _b, _c;
+export function getViewPointAtMaterial(p, opts) {
+    var _a, _b;
     const { context2d: ctx, data, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
     const result = {
         index: -1,
-        element: null,
-        groupQueueIndex: -1
+        material: 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--) {
@@ -143,22 +154,22 @@ export function getViewPointAtElement(p, opts) {
                 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) {
+            if (lastGroup && lastGroup.type === 'group' && Array.isArray(lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.children)) {
+                for (let i = 0; i < lastGroup.children.length; i++) {
+                    const child = lastGroup.children[i];
+                    if (((_a = child === null || child === void 0 ? void 0 : child.operations) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
                         continue;
                     }
                     if (child) {
-                        const elemSize = {
+                        const mtrlSize = {
                             x: totalX + child.x,
                             y: totalY + child.y,
-                            w: child.w,
-                            h: child.h,
-                            angle: totalAngle + (child.angle || 0)
+                            width: child.width,
+                            height: child.height,
+                            angle: totalAngle + (child.angle || 0),
                         };
-                        if (isViewPointInElement(p, { context2d: ctx, element: elemSize, viewScaleInfo, viewSizeInfo })) {
-                            result.element = child;
+                        if (isViewPointInMaterial(p, { context2d: ctx, material: mtrlSize, viewScaleInfo, viewSizeInfo })) {
+                            result.material = child;
                             if (gIdx < groupQueue.length - 1 || child.type !== 'group') {
                                 result.groupQueueIndex = gIdx;
                             }
@@ -170,44 +181,44 @@ export function getViewPointAtElement(p, opts) {
                     }
                 }
             }
-            if (result.element) {
+            if (result.material) {
                 break;
             }
         }
     }
-    if (result.element) {
+    if (result.material) {
         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) {
+    for (let i = data.materials.length - 1; i >= 0; i--) {
+        const mtrl = data.materials[i];
+        if (((_b = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _b === void 0 ? void 0 : _b.invisible) === true) {
             continue;
         }
-        if (isViewPointInElement(p, { context2d: ctx, element: elem, viewScaleInfo, viewSizeInfo })) {
+        if (isViewPointInMaterial(p, { context2d: ctx, material: mtrl, viewScaleInfo, viewSizeInfo })) {
             result.index = i;
-            result.element = elem;
+            result.material = mtrl;
             break;
         }
     }
     return result;
 }
-export function isElementInView(elem, opts) {
+export function isMaterialInView(mtrl, opts) {
     const { viewSizeInfo, viewScaleInfo } = opts;
     const { width, height } = viewSizeInfo;
-    const { angle } = elem;
-    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);
-    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);
+    const { angle } = mtrl;
+    const { x, y, width: w, height: h } = calcViewMaterialSize(mtrl, { viewScaleInfo });
+    const ves = rotateMaterialVertexes({ x, y, width: w, height: h, angle });
+    const viewSize = { x: 0, y: 0, width, height };
+    const mtrlStartX = Math.min(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const mtrlStartY = Math.min(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const mtrlEndX = Math.max(ves[0].x, ves[1].x, ves[2].x, ves[3].x);
+    const mtrlEndY = Math.max(ves[0].y, ves[1].y, ves[2].y, ves[3].y);
+    const mtrlSize = { x: mtrlStartX, y: mtrlStartY, width: mtrlEndX - mtrlStartX, height: mtrlEndY - mtrlStartY };
+    return checkRectIntersect(viewSize, mtrlSize);
 }
-export function calcElementOriginRectInfo(elemSize, opts) {
+export function calcMaterialBoundingInfo(mtrlSize, opts) {
     const { groupQueue } = opts;
-    const vertexes = calcElementVertexesInGroup(elemSize, { groupQueue });
+    const vertexes = calcMaterialVertexesInGroup(mtrlSize, { groupQueue });
     const top = getCenterFromTwoPoints(vertexes[0], vertexes[1]);
     const right = getCenterFromTwoPoints(vertexes[1], vertexes[2]);
     const bottom = getCenterFromTwoPoints(vertexes[2], vertexes[3]);
@@ -222,9 +233,9 @@ export function calcElementOriginRectInfo(elemSize, opts) {
     const minY = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
     const center = {
         x: (maxX + minX) / 2,
-        y: (maxY + minY) / 2
+        y: (maxY + minY) / 2,
     };
-    const rectInfo = {
+    const boundingBox = {
         center,
         topLeft,
         topRight,
@@ -233,16 +244,16 @@ export function calcElementOriginRectInfo(elemSize, opts) {
         top,
         right,
         left,
-        bottom
+        bottom,
     };
-    return rectInfo;
+    return boundingBox;
 }
-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 };
+export function boundingInfoToRangeBoundingInfo(boundingInfo) {
+    const rangeMaxX = Math.max(boundingInfo.topLeft.x, boundingInfo.topRight.x, boundingInfo.bottomRight.x, boundingInfo.bottomLeft.x);
+    const rangeMaxY = Math.max(boundingInfo.topLeft.y, boundingInfo.topRight.y, boundingInfo.bottomRight.y, boundingInfo.bottomLeft.y);
+    const rangeMinX = Math.min(boundingInfo.topLeft.x, boundingInfo.topRight.x, boundingInfo.bottomRight.x, boundingInfo.bottomLeft.x);
+    const rangeMinY = Math.min(boundingInfo.topLeft.y, boundingInfo.topRight.y, boundingInfo.bottomRight.y, boundingInfo.bottomLeft.y);
+    const rangeCenter = { x: boundingInfo.center.x, y: boundingInfo.center.y };
     const rangeTopLeft = { x: rangeMinX, y: rangeMinY };
     const rangeTopRight = { x: rangeMaxX, y: rangeMinY };
     const rangeBottomRight = { x: rangeMaxX, y: rangeMaxY };
@@ -251,7 +262,7 @@ export function originRectInfoToRangeRectInfo(originRectInfo) {
     const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
     const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
     const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
-    const rangeRectInfo = {
+    const rangeBoundingInfo = {
         center: rangeCenter,
         topLeft: rangeTopLeft,
         topRight: rangeTopRight,
@@ -260,31 +271,31 @@ export function originRectInfoToRangeRectInfo(originRectInfo) {
         top: rangeTop,
         right: rangeRight,
         left: rangeLeft,
-        bottom: rangeBottom
+        bottom: rangeBottom,
     };
-    return rangeRectInfo;
+    return rangeBoundingInfo;
 }
-export function calcElementViewRectInfo(elemSize, opts) {
+export function calcMaterialViewBoundingInfo(mtrlSize, 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 })
+    const boundingInfo = calcMaterialBoundingInfo(mtrlSize, { groupQueue });
+    const { center, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight } = boundingInfo;
+    const viewBoundingInfo = {
+        center: calcViewPoint(center, { viewScaleInfo }),
+        topLeft: calcViewPoint(topLeft, { viewScaleInfo }),
+        topRight: calcViewPoint(topRight, { viewScaleInfo }),
+        bottomLeft: calcViewPoint(bottomLeft, { viewScaleInfo }),
+        bottomRight: calcViewPoint(bottomRight, { viewScaleInfo }),
+        top: calcViewPoint(top, { viewScaleInfo }),
+        right: calcViewPoint(right, { viewScaleInfo }),
+        left: calcViewPoint(left, { viewScaleInfo }),
+        bottom: calcViewPoint(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 viewMaxX = Math.max(viewBoundingInfo.topLeft.x, viewBoundingInfo.topRight.x, viewBoundingInfo.bottomRight.x, viewBoundingInfo.bottomLeft.x);
+        const viewMaxY = Math.max(viewBoundingInfo.topLeft.y, viewBoundingInfo.topRight.y, viewBoundingInfo.bottomRight.y, viewBoundingInfo.bottomLeft.y);
+        const viewMinX = Math.min(viewBoundingInfo.topLeft.x, viewBoundingInfo.topRight.x, viewBoundingInfo.bottomRight.x, viewBoundingInfo.bottomLeft.x);
+        const viewMinY = Math.min(viewBoundingInfo.topLeft.y, viewBoundingInfo.topRight.y, viewBoundingInfo.bottomRight.y, viewBoundingInfo.bottomLeft.y);
+        const rangeCenter = { x: viewBoundingInfo.center.x, y: viewBoundingInfo.center.y };
         const rangeTopLeft = { x: viewMinX, y: viewMinY };
         const rangeTopRight = { x: viewMaxX, y: viewMinY };
         const rangeBottomRight = { x: viewMaxX, y: viewMaxY };
@@ -293,7 +304,7 @@ export function calcElementViewRectInfo(elemSize, opts) {
         const rangeBottom = getCenterFromTwoPoints(rangeBottomLeft, rangeBottomRight);
         const rangeLeft = getCenterFromTwoPoints(rangeTopLeft, rangeBottomLeft);
         const rangeRight = getCenterFromTwoPoints(rangeTopRight, rangeBottomRight);
-        const rangeRectInfo = {
+        const rangeBoundingInfo = {
             center: rangeCenter,
             topLeft: rangeTopLeft,
             topRight: rangeTopRight,
@@ -302,9 +313,9 @@ export function calcElementViewRectInfo(elemSize, opts) {
             top: rangeTop,
             right: rangeRight,
             left: rangeLeft,
-            bottom: rangeBottom
+            bottom: rangeBottom,
         };
-        return rangeRectInfo;
+        return rangeBoundingInfo;
     }
-    return viewRectInfo;
+    return viewBoundingInfo;
 }