@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/selector/util.js

@@ -1,4 +1,5 @@
-import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
+import { calcMaterialCenter, rotateMaterialVertexes, calcMaterialVertexesInGroup, calcViewPoint, calcViewMaterialSize, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian, } from '@idraw/util';
+import { ATTR_HANDLER_TYPE } from './static';
 function parseRadian(angle) {
     return (angle * Math.PI) / 180;
 }
@@ -8,12 +9,12 @@ function calcMoveDist(moveX, moveY) {
 function changeMoveDistDirect(moveDist, moveDirect) {
     return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
 }
-export function isPointInViewActiveVertexes(p, opts) {
+function isPointInViewActiveVertexes(p, opts) {
     const { ctx, viewScaleInfo, vertexes } = opts;
-    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo });
-    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo });
-    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo });
-    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo });
+    const v0 = calcViewPoint(vertexes[0], { viewScaleInfo });
+    const v1 = calcViewPoint(vertexes[1], { viewScaleInfo });
+    const v2 = calcViewPoint(vertexes[2], { viewScaleInfo });
+    const v3 = calcViewPoint(vertexes[3], { viewScaleInfo });
     ctx.beginPath();
     ctx.moveTo(v0.x, v0.y);
     ctx.lineTo(v1.x, v1.y);
@@ -26,59 +27,40 @@ export function isPointInViewActiveVertexes(p, opts) {
     }
     return false;
 }
-export function isPointInViewActiveGroup(p, opts) {
-    const { ctx, viewScaleInfo, viewSizeInfo, groupQueue } = opts;
-    if (!groupQueue || !((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0)) {
-        return false;
-    }
-    const vesQueue = calcElementQueueVertexesQueueInGroup(groupQueue);
-    const vertexes = vesQueue[vesQueue.length - 1];
-    if (!vertexes) {
-        return false;
-    }
-    return isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo });
-}
 export function getPointTarget(p, opts) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     const target = {
         type: null,
-        elements: [],
-        elementVertexesList: [],
+        materials: [],
+        materialVertexesList: [],
         groupQueue: [],
-        groupQueueVertexesList: []
     };
-    const { ctx, data, calculator, selectedElements, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, selectedElementController } = opts;
-    if (selectedElementController) {
-        const { left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight, rotate } = selectedElementController;
-        const ctrls = [left, right, top, bottom, topLeft, topRight, bottomLeft, bottomRight];
-        if ((selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) === 1 && ((_b = (_a = selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.rotatable) !== false) {
-            ctrls.push(rotate);
-        }
-        for (let i = 0; i < ctrls.length; i++) {
-            const ctrl = ctrls[i];
-            if (isPointInViewActiveVertexes(p, { ctx, vertexes: ctrl.vertexes, viewSizeInfo, viewScaleInfo })) {
-                target.type = `resize-${ctrl.type}`;
-                if (selectedElements && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) > 0) {
-                    target.groupQueue = groupQueue || [];
-                    target.elements = [selectedElements[0]];
-                    return target;
-                }
-                break;
+    const { ctx, data, calculator, selectedMaterials, viewScaleInfo, viewSizeInfo, areaSize, groupQueue, nativeEvent } = opts;
+    const $targetElement = nativeEvent.target;
+    if (selectedMaterials && (selectedMaterials === null || selectedMaterials === void 0 ? void 0 : selectedMaterials.length) === 1 && $targetElement) {
+        const $elem = $targetElement;
+        if ($elem === null || $elem === void 0 ? void 0 : $elem.hasAttribute(ATTR_HANDLER_TYPE)) {
+            const handlerType = $elem.getAttribute(ATTR_HANDLER_TYPE);
+            if (typeof handlerType === 'string') {
+                target.type = `resize-${handlerType}`;
+                target.groupQueue = groupQueue || [];
+                target.materials = [selectedMaterials[0]];
+                return target;
             }
         }
     }
     if (groupQueue && Array.isArray(groupQueue) && groupQueue.length > 0) {
         const lastGroup = groupQueue[groupQueue.length - 1];
-        if (((_c = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _c === void 0 ? void 0 : _c.children) && Array.isArray((_d = lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.detail) === null || _d === void 0 ? void 0 : _d.children)) {
-            for (let i = lastGroup.detail.children.length - 1; i >= 0; i--) {
-                const child = lastGroup.detail.children[i];
-                const vertexes = calcElementVertexesInGroup(child, { groupQueue });
+        if ((lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.children) && Array.isArray(lastGroup === null || lastGroup === void 0 ? void 0 : lastGroup.children)) {
+            for (let i = lastGroup.children.length - 1; i >= 0; i--) {
+                const child = lastGroup.children[i];
+                const vertexes = calcMaterialVertexesInGroup(child, { groupQueue });
                 if (vertexes && isPointInViewActiveVertexes(p, { ctx, vertexes, viewScaleInfo, viewSizeInfo })) {
                     if (!target.type) {
-                        target.type = 'over-element';
+                        target.type = 'over-material';
                     }
                     target.groupQueue = groupQueue;
-                    target.elements = [child];
+                    target.materials = [child];
                     return target;
                 }
             }
@@ -88,71 +70,67 @@ export function getPointTarget(p, opts) {
     if (target.type !== null) {
         return target;
     }
-    if (areaSize && Array.isArray(selectedElements) && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.length) > 1) {
-        const { x, y, w, h } = areaSize;
-        if (p.x >= x && p.x <= x + w && p.y >= y && p.y <= y + h) {
+    if (areaSize && Array.isArray(selectedMaterials) && (selectedMaterials === null || selectedMaterials === void 0 ? void 0 : selectedMaterials.length) > 1) {
+        const { x, y, width, height } = areaSize;
+        if (p.x >= x && p.x <= x + width && p.y >= y && p.y <= y + height) {
             target.type = 'list-area';
-            target.elements = selectedElements;
+            target.materials = selectedMaterials;
             return target;
         }
     }
     if (data) {
-        const { index, element } = calculator.getPointElement(p, { data, viewScaleInfo, viewSizeInfo });
-        if (index >= 0 && element && ((_e = element === null || element === void 0 ? void 0 : element.operations) === null || _e === void 0 ? void 0 : _e.invisible) !== true) {
-            target.elements = [element];
-            target.type = 'over-element';
+        const { index, material } = calculator.getPointMaterial(p, { data, viewScaleInfo, viewSizeInfo });
+        if (index >= 0 && material && ((_a = material === null || material === void 0 ? void 0 : material.operations) === null || _a === void 0 ? void 0 : _a.invisible) !== true) {
+            target.materials = [material];
+            target.type = 'over-material';
             return target;
         }
     }
     return target;
 }
-export function resizeElement(elem, opts) {
+export function resizeMaterial(mtrl, opts) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    let { x, y, w, h, angle = 0 } = elem;
-    const elemCenter = calcElementCenter({ x, y, w, h, angle });
+    let { x, y, width, height, angle = 0 } = mtrl;
+    const mtrlCenter = calcMaterialCenter({ x, y, width, height, angle });
     angle = limitAngle(angle);
     const radian = parseAngleToRadian(angle);
-    const limitRatio = !!((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.limitRatio);
-    const { start, end, resizeType, scale } = opts;
+    const limitRatio = !!((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.limitRatio);
+    const { start, end, resizeType, scale, calculator } = opts;
     let start0 = Object.assign({}, start);
     let end0 = Object.assign({}, end);
-    let startHorizontal0 = { x: start0.x, y: elemCenter.y };
-    let endHorizontal0 = { x: end0.x, y: elemCenter.y };
+    let startHorizontal0 = { x: start0.x, y: mtrlCenter.y };
+    let endHorizontal0 = { x: end0.x, y: mtrlCenter.y };
     let startHorizontal = Object.assign({}, startHorizontal0);
     let endHorizontal = Object.assign({}, endHorizontal0);
-    let startVertical0 = { x: elemCenter.x, y: start0.y };
-    let endVertical0 = { x: elemCenter.x, y: end0.y };
+    let startVertical0 = { x: mtrlCenter.x, y: start0.y };
+    let endVertical0 = { x: mtrlCenter.x, y: end0.y };
     let startVertical = Object.assign({}, startVertical0);
     let endVertical = Object.assign({}, endVertical0);
     let moveHorizontalX = (endHorizontal.x - startHorizontal.x) / scale;
     let moveHorizontalY = (endHorizontal.y - startHorizontal.y) / scale;
     let moveHorizontalDist = calcMoveDist(moveHorizontalX, moveHorizontalY);
-    let centerMoveHorizontalDist = 0;
     let moveVerticalX = (endVertical.x - startVertical.x) / scale;
     let moveVerticalY = (endVertical.y - startVertical.y) / scale;
     let moveVerticalDist = calcMoveDist(moveVerticalX, moveVerticalY);
-    let centerMoveVerticalDist = 0;
     if (angle > 0 || angle < 0) {
-        start0 = rotatePoint(elemCenter, start, 0 - radian);
-        end0 = rotatePoint(elemCenter, end, 0 - radian);
-        startHorizontal0 = { x: start0.x, y: elemCenter.y };
-        endHorizontal0 = { x: end0.x, y: elemCenter.y };
-        startHorizontal = rotatePoint(elemCenter, startHorizontal0, radian);
-        endHorizontal = rotatePoint(elemCenter, endHorizontal0, radian);
-        startVertical0 = { x: elemCenter.x, y: start0.y };
-        endVertical0 = { x: elemCenter.x, y: end0.y };
-        startVertical = rotatePoint(elemCenter, startVertical0, radian);
-        endVertical = rotatePoint(elemCenter, endVertical0, radian);
+        start0 = rotatePoint(mtrlCenter, start, 0 - radian);
+        end0 = rotatePoint(mtrlCenter, end, 0 - radian);
+        startHorizontal0 = { x: start0.x, y: mtrlCenter.y };
+        endHorizontal0 = { x: end0.x, y: mtrlCenter.y };
+        startHorizontal = rotatePoint(mtrlCenter, startHorizontal0, radian);
+        endHorizontal = rotatePoint(mtrlCenter, endHorizontal0, radian);
+        startVertical0 = { x: mtrlCenter.x, y: start0.y };
+        endVertical0 = { x: mtrlCenter.x, y: end0.y };
+        startVertical = rotatePoint(mtrlCenter, startVertical0, radian);
+        endVertical = rotatePoint(mtrlCenter, endVertical0, radian);
         moveHorizontalX = (endHorizontal.x - startHorizontal.x) / scale;
         moveHorizontalY = (endHorizontal.y - startHorizontal.y) / scale;
         moveHorizontalDist = calcMoveDist(moveHorizontalX, moveHorizontalY);
         moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
-        centerMoveHorizontalDist = moveHorizontalDist / 2;
         moveVerticalX = (endVertical.x - startVertical.x) / scale;
         moveVerticalY = (endVertical.y - startVertical.y) / scale;
         moveVerticalDist = calcMoveDist(moveVerticalX, moveVerticalY);
         moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
-        centerMoveVerticalDist = moveVerticalDist / 2;
     }
     let moveX = (end.x - start.x) / scale;
     let moveY = (end.y - start.y) / scale;
@@ -160,19 +138,19 @@ export function resizeElement(elem, opts) {
         if (['resize-top', 'resize-bottom', 'resize-left', 'resize-right'].includes(resizeType)) {
             const maxDist = Math.max(Math.abs(moveX), Math.abs(moveY));
             moveX = (moveX >= 0 ? 1 : -1) * maxDist;
-            moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / elem.w) * elem.h;
+            moveY = (((moveY >= 0 ? 1 : -1) * maxDist) / mtrl.width) * mtrl.height;
             const maxVerticalDist = Math.max(Math.abs(moveVerticalX), Math.abs(moveVerticalY));
             moveVerticalX = (moveVerticalX >= 0 ? 1 : -1) * maxVerticalDist;
-            moveVerticalY = (((moveVerticalY >= 0 ? 1 : -1) * maxVerticalDist) / elem.w) * elem.h;
+            moveVerticalY = (((moveVerticalY >= 0 ? 1 : -1) * maxVerticalDist) / mtrl.width) * mtrl.height;
             const maxHorizontalDist = Math.max(Math.abs(moveHorizontalX), Math.abs(moveHorizontalY));
             moveHorizontalX = (moveHorizontalX >= 0 ? 1 : -1) * maxHorizontalDist;
-            moveHorizontalY = (((moveHorizontalY >= 0 ? 1 : -1) * maxHorizontalDist) / elem.w) * elem.h;
+            moveHorizontalY = (((moveHorizontalY >= 0 ? 1 : -1) * maxHorizontalDist) / mtrl.width) * mtrl.height;
         }
         else if (['resize-top-left', 'resize-top-right', 'resize-bottom-left', 'resize-bottom-right'].includes(resizeType)) {
             {
                 const maxDist = Math.abs(moveX);
                 moveX = (moveX >= 0 ? 1 : -1) * maxDist;
-                const moveYLeng = (maxDist / elem.w) * elem.h;
+                const moveYLeng = (maxDist / mtrl.width) * mtrl.height;
                 if (resizeType === 'resize-top-left' || resizeType === 'resize-bottom-right') {
                     moveY = moveX > 0 ? moveYLeng : -moveYLeng;
                 }
@@ -182,25 +160,25 @@ export function resizeElement(elem, opts) {
             }
             {
                 moveHorizontalDist = Math.abs(moveHorizontalDist);
-                moveVerticalDist = (moveHorizontalDist / elem.w) * elem.h;
+                moveVerticalDist = (moveHorizontalDist / mtrl.width) * mtrl.height;
             }
         }
     }
     switch (resizeType) {
         case 'resize-top': {
             if (angle === 0) {
-                if (h - moveY > 0) {
+                if (height - moveY > 0) {
                     y += moveY;
-                    h -= moveY;
-                    if (((_b = elem.operations) === null || _b === void 0 ? void 0 : _b.limitRatio) === true) {
-                        x += ((moveY / elem.h) * elem.w) / 2;
-                        w -= (moveY / elem.h) * elem.w;
+                    height -= moveY;
+                    if (((_b = mtrl.operations) === null || _b === void 0 ? void 0 : _b.limitRatio) === true) {
+                        x += ((moveY / mtrl.height) * mtrl.width) / 2;
+                        width -= (moveY / mtrl.height) * mtrl.width;
                     }
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     const radian = parseRadian(angle);
@@ -229,30 +207,30 @@ export function resizeElement(elem, opts) {
                     centerX = centerX - centerMoveVerticalDist * Math.cos(radian);
                     centerY = centerY - centerMoveVerticalDist * Math.sin(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    if (((_c = elem.operations) === null || _c === void 0 ? void 0 : _c.limitRatio) === true) {
-                        w = w + (moveVerticalDist / elem.h) * elem.w;
+                if (height + moveVerticalDist > 0) {
+                    if (((_c = mtrl.operations) === null || _c === void 0 ? void 0 : _c.limitRatio) === true) {
+                        width = width + (moveVerticalDist / mtrl.height) * mtrl.width;
                     }
-                    h = h + moveVerticalDist;
-                    x = centerX - w / 2;
-                    y = centerY - h / 2;
+                    height = height + moveVerticalDist;
+                    x = centerX - width / 2;
+                    y = centerY - height / 2;
                 }
             }
             break;
         }
         case 'resize-bottom': {
             if (angle === 0) {
-                if (elem.h + moveY > 0) {
-                    h += moveY;
-                    if (((_d = elem.operations) === null || _d === void 0 ? void 0 : _d.limitRatio) === true) {
-                        x -= ((moveY / elem.h) * elem.w) / 2;
-                        w += (moveY / elem.h) * elem.w;
+                if (mtrl.height + moveY > 0) {
+                    height += moveY;
+                    if (((_d = mtrl.operations) === null || _d === void 0 ? void 0 : _d.limitRatio) === true) {
+                        x -= ((moveY / mtrl.height) * mtrl.width) / 2;
+                        width += (moveY / mtrl.height) * mtrl.width;
                     }
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     const radian = parseRadian(angle);
@@ -281,31 +259,31 @@ export function resizeElement(elem, opts) {
                     centerX = centerX + centerMoveDist * Math.cos(radian);
                     centerY = centerY + centerMoveDist * Math.sin(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    if (((_e = elem.operations) === null || _e === void 0 ? void 0 : _e.limitRatio) === true) {
-                        w = w + (moveVerticalDist / elem.h) * elem.w;
+                if (height + moveVerticalDist > 0) {
+                    if (((_e = mtrl.operations) === null || _e === void 0 ? void 0 : _e.limitRatio) === true) {
+                        width = width + (moveVerticalDist / mtrl.height) * mtrl.width;
                     }
-                    h = h + moveVerticalDist;
-                    x = centerX - w / 2;
-                    y = centerY - h / 2;
+                    height = height + moveVerticalDist;
+                    x = centerX - width / 2;
+                    y = centerY - height / 2;
                 }
             }
             break;
         }
         case 'resize-left': {
             if (angle === 0) {
-                if (elem.w - moveX > 0) {
+                if (mtrl.width - moveX > 0) {
                     x += moveX;
-                    w -= moveX;
-                    if (((_f = elem.operations) === null || _f === void 0 ? void 0 : _f.limitRatio) === true) {
-                        h -= (moveX / elem.w) * elem.h;
-                        y += ((moveX / elem.w) * elem.h) / 2;
+                    width -= moveX;
+                    if (((_f = mtrl.operations) === null || _f === void 0 ? void 0 : _f.limitRatio) === true) {
+                        height -= (moveX / mtrl.width) * mtrl.height;
+                        y += ((moveX / mtrl.width) * mtrl.height) / 2;
                     }
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveHorizontalDist = 0 - changeMoveDistDirect(moveHorizontalDist, moveHorizontalX);
                     const radian = parseRadian(angle);
@@ -334,30 +312,30 @@ export function resizeElement(elem, opts) {
                     centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (w + moveHorizontalDist > 0) {
-                    if (((_g = elem.operations) === null || _g === void 0 ? void 0 : _g.limitRatio) === true) {
-                        h = h + (moveHorizontalDist / elem.w) * elem.h;
+                if (width + moveHorizontalDist > 0) {
+                    if (((_g = mtrl.operations) === null || _g === void 0 ? void 0 : _g.limitRatio) === true) {
+                        height = height + (moveHorizontalDist / mtrl.width) * mtrl.height;
                     }
-                    w = w + moveHorizontalDist;
-                    x = centerX - w / 2;
-                    y = centerY - h / 2;
+                    width = width + moveHorizontalDist;
+                    x = centerX - width / 2;
+                    y = centerY - height / 2;
                 }
             }
             break;
         }
         case 'resize-right': {
             if (angle === 0) {
-                if (elem.w + moveX > 0) {
-                    w += moveX;
-                    if (((_h = elem.operations) === null || _h === void 0 ? void 0 : _h.limitRatio) === true) {
-                        y -= (moveX * elem.h) / elem.w / 2;
-                        h += (moveX * elem.h) / elem.w;
+                if (mtrl.width + moveX > 0) {
+                    width += moveX;
+                    if (((_h = mtrl.operations) === null || _h === void 0 ? void 0 : _h.limitRatio) === true) {
+                        y -= (moveX * mtrl.height) / mtrl.width / 2;
+                        height += (moveX * mtrl.height) / mtrl.width;
                     }
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, moveHorizontalY);
                     const radian = parseRadian(angle);
@@ -387,31 +365,31 @@ export function resizeElement(elem, opts) {
                     centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (w + moveHorizontalDist > 0) {
-                    if (((_j = elem.operations) === null || _j === void 0 ? void 0 : _j.limitRatio) === true) {
-                        h = h + (moveHorizontalDist / elem.w) * elem.h;
+                if (width + moveHorizontalDist > 0) {
+                    if (((_j = mtrl.operations) === null || _j === void 0 ? void 0 : _j.limitRatio) === true) {
+                        height = height + (moveHorizontalDist / mtrl.width) * mtrl.height;
                     }
-                    w = w + moveHorizontalDist;
-                    x = centerX - w / 2;
-                    y = centerY - h / 2;
+                    width = width + moveHorizontalDist;
+                    x = centerX - width / 2;
+                    y = centerY - height / 2;
                 }
             }
             break;
         }
         case 'resize-top-left': {
             if (angle === 0) {
-                if (w - moveX > 0) {
+                if (width - moveX > 0) {
                     x += moveX;
-                    w -= moveX;
+                    width -= moveX;
                 }
-                if (h - moveY > 0) {
+                if (height - moveY > 0) {
                     y += moveY;
-                    h -= moveY;
+                    height -= moveY;
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     moveHorizontalDist =
@@ -456,30 +434,30 @@ export function resizeElement(elem, opts) {
                     centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    h = h + moveVerticalDist;
+                if (height + moveVerticalDist > 0) {
+                    height = height + moveVerticalDist;
                 }
-                if (w + moveHorizontalDist > 0) {
-                    w = w + moveHorizontalDist;
+                if (width + moveHorizontalDist > 0) {
+                    width = width + moveHorizontalDist;
                 }
-                x = centerX - w / 2;
-                y = centerY - h / 2;
+                x = centerX - width / 2;
+                y = centerY - height / 2;
             }
             break;
         }
         case 'resize-top-right': {
             if (angle === 0) {
-                if (w + moveX > 0) {
-                    w += moveX;
+                if (width + moveX > 0) {
+                    width += moveX;
                 }
-                if (h - moveY > 0) {
+                if (height - moveY > 0) {
                     y += moveY;
-                    h -= moveY;
+                    height -= moveY;
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = 0 - changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
@@ -524,30 +502,30 @@ export function resizeElement(elem, opts) {
                     centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    h = h + moveVerticalDist;
+                if (height + moveVerticalDist > 0) {
+                    height = height + moveVerticalDist;
                 }
-                if (w + moveHorizontalDist > 0) {
-                    w = w + moveHorizontalDist;
+                if (width + moveHorizontalDist > 0) {
+                    width = width + moveHorizontalDist;
                 }
-                x = centerX - w / 2;
-                y = centerY - h / 2;
+                x = centerX - width / 2;
+                y = centerY - height / 2;
             }
             break;
         }
         case 'resize-bottom-left': {
             if (angle === 0) {
-                if (elem.h + moveY > 0) {
-                    h += moveY;
+                if (mtrl.height + moveY > 0) {
+                    height += moveY;
                 }
-                if (elem.w - moveX > 0) {
+                if (mtrl.width - moveX > 0) {
                     x += moveX;
-                    w -= moveX;
+                    width -= moveX;
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     moveHorizontalDist =
@@ -593,29 +571,29 @@ export function resizeElement(elem, opts) {
                     centerX = centerX - centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY + centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    h = h + moveVerticalDist;
+                if (height + moveVerticalDist > 0) {
+                    height = height + moveVerticalDist;
                 }
-                if (w + moveHorizontalDist > 0) {
-                    w = w + moveHorizontalDist;
+                if (width + moveHorizontalDist > 0) {
+                    width = width + moveHorizontalDist;
                 }
-                x = centerX - w / 2;
-                y = centerY - h / 2;
+                x = centerX - width / 2;
+                y = centerY - height / 2;
             }
             break;
         }
         case 'resize-bottom-right': {
             if (angle === 0) {
-                if (elem.h + moveY > 0) {
-                    h += moveY;
+                if (mtrl.height + moveY > 0) {
+                    height += moveY;
                 }
-                if (elem.w + moveX > 0) {
-                    w += moveX;
+                if (mtrl.width + moveX > 0) {
+                    width += moveX;
                 }
             }
             else if (angle > 0 || angle < 0) {
-                let centerX = elemCenter.x;
-                let centerY = elemCenter.y;
+                let centerX = mtrlCenter.x;
+                let centerY = mtrlCenter.y;
                 if (angle < 90) {
                     moveVerticalDist = changeMoveDistDirect(moveVerticalDist, moveVerticalY);
                     moveHorizontalDist = changeMoveDistDirect(moveHorizontalDist, limitRatio ? moveVerticalDist : moveHorizontalY);
@@ -660,14 +638,14 @@ export function resizeElement(elem, opts) {
                     centerX = centerX + centerMoveHorizontalDist * Math.sin(radian);
                     centerY = centerY - centerMoveHorizontalDist * Math.cos(radian);
                 }
-                if (h + moveVerticalDist > 0) {
-                    h = h + moveVerticalDist;
+                if (height + moveVerticalDist > 0) {
+                    height = height + moveVerticalDist;
                 }
-                if (w + moveHorizontalDist > 0) {
-                    w = w + moveHorizontalDist;
+                if (width + moveHorizontalDist > 0) {
+                    width = width + moveHorizontalDist;
                 }
-                x = centerX - w / 2;
-                y = centerY - h / 2;
+                x = centerX - width / 2;
+                y = centerY - height / 2;
             }
             break;
         }
@@ -675,115 +653,120 @@ export function resizeElement(elem, opts) {
             break;
         }
     }
-    return { x, y, w, h, angle: elem.angle };
+    return {
+        x: calculator.toGridNum(x),
+        y: calculator.toGridNum(y),
+        width: calculator.toGridNum(width),
+        height: calculator.toGridNum(height),
+        angle: calculator.toGridNum(mtrl.angle || 0),
+    };
 }
-export function rotateElement(elem, opts) {
-    const { x, y, w, h, angle = 0 } = elem;
-    const { center, start, end, viewScaleInfo } = opts;
-    const elemCenter = calcViewPointSize(center, {
-        viewScaleInfo
+export function rotateMaterial(mtrl, opts) {
+    const { x, y, width, height, angle = 0 } = mtrl;
+    const { center, start, end, viewScaleInfo, calculator } = opts;
+    const mtrlCenter = calcViewPoint(center, {
+        viewScaleInfo,
     });
     const startAngle = limitAngle(angle);
-    const changedRadian = calcRadian(elemCenter, start, end);
+    const changedRadian = calcRadian(mtrlCenter, start, end);
     const endAngle = limitAngle(startAngle + parseRadianToAngle(changedRadian));
     return {
-        x,
-        y,
-        w,
-        h,
-        angle: endAngle
+        x: calculator.toGridNum(x),
+        y: calculator.toGridNum(y),
+        width: calculator.toGridNum(width),
+        height: calculator.toGridNum(height),
+        angle: calculator.toGridNum(endAngle),
     };
 }
 export function getSelectedListArea(data, opts) {
     var _a;
     const indexes = [];
-    const uuids = [];
-    const elements = [];
+    const ids = [];
+    const materials = [];
     const { viewScaleInfo, start, end } = opts;
-    if (!(Array.isArray(data.elements) && start && end)) {
-        return { indexes, uuids, elements };
+    if (!(Array.isArray(data.materials) && start && end)) {
+        return { indexes, ids, materials };
     }
     const startX = Math.min(start.x, end.x);
     const endX = Math.max(start.x, end.x);
     const startY = Math.min(start.y, end.y);
     const endY = Math.max(start.y, end.y);
-    for (let idx = 0; idx < data.elements.length; idx++) {
-        const elem = data.elements[idx];
-        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.locked) === true) {
+    for (let idx = 0; idx < data.materials.length; idx++) {
+        const mtrl = data.materials[idx];
+        if (((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.locked) === true) {
             continue;
         }
-        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
-        const center = calcElementCenter(elemSize);
+        const mtrlSize = calcViewMaterialSize(mtrl, { viewScaleInfo });
+        const center = calcMaterialCenter(mtrlSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
-            uuids.push(elem.uuid);
-            elements.push(elem);
-            if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
-                const ves = rotateElementVertexes(elemSize);
+            ids.push(mtrl.id);
+            materials.push(mtrl);
+            if (mtrlSize.angle && (mtrlSize.angle > 0 || mtrlSize.angle < 0)) {
+                const ves = rotateMaterialVertexes(mtrlSize);
                 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));
+                    mtrlSize.x = Math.min(...xList);
+                    mtrlSize.y = Math.min(...yList);
+                    mtrlSize.width = Math.abs(Math.max(...xList) - Math.min(...xList));
+                    mtrlSize.height = Math.abs(Math.max(...yList) - Math.min(...yList));
                 }
             }
         }
     }
-    return { indexes, uuids, elements };
+    return { indexes, ids, materials };
 }
-export function calcSelectedElementsArea(elements, opts) {
+export function calcSelectedMaterialsArea(materials, opts) {
     var _a;
-    if (!Array.isArray(elements)) {
+    if (!Array.isArray(materials)) {
         return null;
     }
-    const area = { x: 0, y: 0, w: 0, h: 0 };
+    const area = { x: 0, y: 0, width: 0, height: 0 };
     const { viewScaleInfo } = opts;
-    let prevElemSize = null;
-    for (let i = 0; i < elements.length; i++) {
-        const elem = elements[i];
-        if ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
+    let prevMtrlSize = null;
+    for (let i = 0; i < materials.length; i++) {
+        const mtrl = materials[i];
+        if ((_a = mtrl === null || mtrl === void 0 ? void 0 : mtrl.operations) === null || _a === void 0 ? void 0 : _a.invisible) {
             continue;
         }
-        const elemSize = calcViewElementSize(elem, { viewScaleInfo });
-        if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
-            const ves = rotateElementVertexes(elemSize);
+        const mtrlSize = calcViewMaterialSize(mtrl, { viewScaleInfo });
+        if (mtrlSize.angle && (mtrlSize.angle > 0 || mtrlSize.angle < 0)) {
+            const ves = rotateMaterialVertexes(mtrlSize);
             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));
+                mtrlSize.x = Math.min(...xList);
+                mtrlSize.y = Math.min(...yList);
+                mtrlSize.width = Math.abs(Math.max(...xList) - Math.min(...xList));
+                mtrlSize.height = Math.abs(Math.max(...yList) - Math.min(...yList));
             }
         }
-        if (prevElemSize) {
-            const areaStartX = Math.min(elemSize.x, area.x);
-            const areaStartY = Math.min(elemSize.y, area.y);
-            const areaEndX = Math.max(elemSize.x + elemSize.w, area.x + area.w);
-            const areaEndY = Math.max(elemSize.y + elemSize.h, area.y + area.h);
+        if (prevMtrlSize) {
+            const areaStartX = Math.min(mtrlSize.x, area.x);
+            const areaStartY = Math.min(mtrlSize.y, area.y);
+            const areaEndX = Math.max(mtrlSize.x + mtrlSize.width, area.x + area.width);
+            const areaEndY = Math.max(mtrlSize.y + mtrlSize.height, area.y + area.height);
             area.x = areaStartX;
             area.y = areaStartY;
-            area.w = Math.abs(areaEndX - areaStartX);
-            area.h = Math.abs(areaEndY - areaStartY);
+            area.width = Math.abs(areaEndX - areaStartX);
+            area.height = Math.abs(areaEndY - areaStartY);
         }
         else {
-            area.x = elemSize.x;
-            area.y = elemSize.y;
-            area.w = elemSize.w;
-            area.h = elemSize.h;
+            area.x = mtrlSize.x;
+            area.y = mtrlSize.y;
+            area.width = mtrlSize.width;
+            area.height = mtrlSize.height;
         }
-        prevElemSize = elemSize;
+        prevMtrlSize = mtrlSize;
     }
     return area;
 }
-export function isElementInGroup(elem, group) {
-    var _a;
-    if ((group === null || group === void 0 ? void 0 : group.type) === 'group' && Array.isArray((_a = group === null || group === void 0 ? void 0 : group.detail) === null || _a === void 0 ? void 0 : _a.children)) {
-        for (let i = 0; i < group.detail.children.length; i++) {
-            const child = group.detail.children[i];
-            if (elem.uuid === child.uuid) {
+export function isMaterialInGroup(mtrl, group) {
+    if ((group === null || group === void 0 ? void 0 : group.type) === 'group' && Array.isArray(group === null || group === void 0 ? void 0 : group.children)) {
+        for (let i = 0; i < group.children.length; i++) {
+            const child = group.children[i];
+            if (mtrl.id === child.id) {
                 return true;
             }
         }