@idraw/core 0.4.0-beta.16 → 0.4.0-beta.18

package/dist/esm/middleware/selector/index.js

@@ -1,8 +1,11 @@
-import { calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
+import { is, calcElementsViewInfo, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcElementSizeController, calcElementCenterFromVertexes, rotatePointInGroup, getGroupQueueFromList, findElementsFromList, findElementsFromListByPositions, getElementPositionFromList, deepResizeGroupElement } from '@idraw/util';
 import { drawHoverVertexesWrapper, drawLockVertexesWrapper, drawArea, drawListArea, drawGroupQueueVertexesWrappers, drawSelectedElementControllersVertexes } from './draw-wrapper';
+import { drawReferenceLines } from './draw-reference';
 import { getPointTarget, resizeElement, rotateElement, getSelectedListArea, calcSelectedElementsArea, isElementInGroup, isPointInViewActiveGroup, calcMoveInGroup } from './util';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, controllerSize } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, controllerSize } from './config';
+import { calcReferenceInfo } from './reference';
 import { middlewareEventTextEdit } from '../text-editor';
+export { keySelectedElementList, keyActionType, keyResizeType, keyGroupQueue };
 export const middlewareEventSelect = '@middleware/select';
 export const middlewareEventSelectClear = '@middleware/select-clear';
 export const MiddlewareSelector = (opts) => {
@@ -46,6 +49,7 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keyHoverElementVertexes, vertexes);
     };
     const updateSelectedElementList = (list, opts) => {
+        var _a;
         sharer.setSharedStorage(keySelectedElementList, list);
         if (list.length === 1) {
             const controller = calcElementSizeController(list[0], {
@@ -54,9 +58,11 @@ export const MiddlewareSelector = (opts) => {
                 viewScaleInfo: sharer.getActiveViewScaleInfo()
             });
             sharer.setSharedStorage(keySelectedElementController, controller);
+            sharer.setSharedStorage(keySelectedElementPosition, getElementPositionFromList(list[0].uuid, ((_a = sharer.getActiveStorage('data')) === null || _a === void 0 ? void 0 : _a.elements) || []));
         }
         else {
             sharer.setSharedStorage(keySelectedElementController, null);
+            sharer.setSharedStorage(keySelectedElementPosition, []);
         }
         if ((opts === null || opts === void 0 ? void 0 : opts.triggerEvent) === true) {
             eventHub.trigger(middlewareEventSelect, { uuids: list.map((elem) => elem.uuid) });
@@ -72,7 +78,8 @@ export const MiddlewareSelector = (opts) => {
             viewSizeInfo: sharer.getActiveViewSizeInfo(),
             groupQueue: sharer.getSharedStorage(keyGroupQueue),
             areaSize: null,
-            selectedElementController: sharer.getSharedStorage(keySelectedElementController)
+            selectedElementController: sharer.getSharedStorage(keySelectedElementController),
+            selectedElementPosition: sharer.getSharedStorage(keySelectedElementPosition)
         };
     };
     const clear = () => {
@@ -87,6 +94,9 @@ export const MiddlewareSelector = (opts) => {
         sharer.setSharedStorage(keySelectedElementList, []);
         sharer.setSharedStorage(keySelectedElementListVertexes, null);
         sharer.setSharedStorage(keySelectedElementController, null);
+        sharer.setSharedStorage(keySelectedElementPosition, []);
+        sharer.setSharedStorage(keySelectedReferenceXLines, []);
+        sharer.setSharedStorage(keySelectedReferenceYLines, []);
         sharer.setSharedStorage(keyIsMoving, null);
     };
     clear();
@@ -285,6 +295,8 @@ export const MiddlewareSelector = (opts) => {
         },
         pointMove: (e) => {
             var _a, _b, _c;
+            sharer.setSharedStorage(keySelectedReferenceXLines, []);
+            sharer.setSharedStorage(keySelectedReferenceYLines, []);
             sharer.setSharedStorage(keyIsMoving, true);
             const data = sharer.getActiveStorage('data');
             const elems = getActiveElements();
@@ -300,9 +312,44 @@ export const MiddlewareSelector = (opts) => {
                 inBusyMode = 'drag';
                 if (data && (elems === null || elems === void 0 ? void 0 : elems.length) === 1 && start && end && ((_b = (_a = elems[0]) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.lock) !== true) {
                     const { moveX, moveY } = calcMoveInGroup(start, end, groupQueue);
-                    elems[0].x += moveX / scale;
-                    elems[0].y += moveY / scale;
+                    let totalMoveX = calculator.toGridNum(moveX / scale);
+                    let totalMoveY = calculator.toGridNum(moveY / scale);
+                    const referenceInfo = calcReferenceInfo(elems[0].uuid, {
+                        calculator,
+                        data,
+                        groupQueue,
+                        viewScaleInfo,
+                        viewSizeInfo
+                    });
+                    try {
+                        if (referenceInfo) {
+                            if (is.x(referenceInfo.offsetX) && referenceInfo.offsetX !== null) {
+                                totalMoveX = calculator.toGridNum(totalMoveX + referenceInfo.offsetX);
+                            }
+                            if (is.y(referenceInfo.offsetY) && referenceInfo.offsetY !== null) {
+                                totalMoveY = calculator.toGridNum(totalMoveY + referenceInfo.offsetY);
+                            }
+                            sharer.setSharedStorage(keySelectedReferenceXLines, referenceInfo.xLines);
+                            sharer.setSharedStorage(keySelectedReferenceYLines, referenceInfo.yLines);
+                        }
+                    }
+                    catch (err) {
+                        console.error(err);
+                    }
+                    elems[0].x = calculator.toGridNum(elems[0].x + totalMoveX);
+                    elems[0].y = calculator.toGridNum(elems[0].y + totalMoveY);
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                 }
                 viewer.drawFrame();
             }
@@ -314,8 +361,19 @@ export const MiddlewareSelector = (opts) => {
                     elems.forEach((elem) => {
                         var _a;
                         if (elem && ((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) !== true) {
-                            elem.x += moveX;
-                            elem.y += moveY;
+                            elem.x = calculator.toGridNum(elem.x + moveX);
+                            elem.y = calculator.toGridNum(elem.y + moveY);
+                            calculator.modifyViewVisibleInfoMap(data, {
+                                modifyOptions: {
+                                    type: 'updateElement',
+                                    content: {
+                                        element: elem,
+                                        position: getElementPositionFromList(elem.uuid, data.elements) || []
+                                    }
+                                },
+                                viewSizeInfo,
+                                viewScaleInfo
+                            });
                         }
                     });
                     sharer.setActiveStorage('data', data);
@@ -360,24 +418,36 @@ export const MiddlewareSelector = (opts) => {
                             resizeType,
                             sharer
                         });
-                        elems[0].angle = resizedElemSize.angle;
+                        elems[0].angle = calculator.toGridNum(resizedElemSize.angle || 0);
                     }
                     else {
                         const resizedElemSize = resizeElement(elems[0], { scale, start: resizeStart, end: resizeEnd, resizeType, sharer });
-                        elems[0].x = resizedElemSize.x;
-                        elems[0].y = resizedElemSize.y;
+                        const calcOpts = { ignore: !!elems[0].angle };
+                        elems[0].x = calculator.toGridNum(resizedElemSize.x, calcOpts);
+                        elems[0].y = calculator.toGridNum(resizedElemSize.y, calcOpts);
                         if (elems[0].type === 'group' && ((_c = elems[0].operations) === null || _c === void 0 ? void 0 : _c.deepResize) === true) {
                             deepResizeGroupElement(elems[0], {
-                                w: resizedElemSize.w,
-                                h: resizedElemSize.h
+                                w: calculator.toGridNum(resizedElemSize.w, calcOpts),
+                                h: calculator.toGridNum(resizedElemSize.h, calcOpts)
                             });
                         }
                         else {
-                            elems[0].w = resizedElemSize.w;
-                            elems[0].h = resizedElemSize.h;
+                            elems[0].w = calculator.toGridNum(resizedElemSize.w, calcOpts);
+                            elems[0].h = calculator.toGridNum(resizedElemSize.h, calcOpts);
                         }
                     }
                     updateSelectedElementList([elems[0]]);
+                    calculator.modifyViewVisibleInfoMap(data, {
+                        modifyOptions: {
+                            type: 'updateElement',
+                            content: {
+                                element: elems[0],
+                                position: sharer.getSharedStorage(keySelectedElementPosition) || []
+                            }
+                        },
+                        viewSizeInfo,
+                        viewScaleInfo
+                    });
                     viewer.drawFrame();
                 }
             }
@@ -390,6 +460,8 @@ export const MiddlewareSelector = (opts) => {
         },
         pointEnd(e) {
             inBusyMode = null;
+            sharer.setSharedStorage(keySelectedReferenceXLines, []);
+            sharer.setSharedStorage(keySelectedReferenceYLines, []);
             sharer.setSharedStorage(keyIsMoving, false);
             const data = sharer.getActiveStorage('data');
             const resizeType = sharer.getSharedStorage(keyResizeType);
@@ -536,7 +608,15 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    if (actionType === 'drag') {
+                        const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
+                        const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
+                        drawReferenceLines(helperContext, {
+                            xLines,
+                            yLines
+                        });
+                    }
                 }
             }
             else {
@@ -553,7 +633,15 @@ export const MiddlewareSelector = (opts) => {
                     }
                 }
                 if (!isLock && elem && ['select', 'drag', 'resize'].includes(actionType)) {
-                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, groupQueue, hideControllers: !!isMoving && actionType === 'drag' }));
+                    drawSelectedElementControllersVertexes(helperContext, selectedElementController, Object.assign(Object.assign({}, drawBaseOpts), { element: elem, calculator, hideControllers: !!isMoving && actionType === 'drag' }));
+                    if (actionType === 'drag') {
+                        const xLines = sharer.getSharedStorage(keySelectedReferenceXLines);
+                        const yLines = sharer.getSharedStorage(keySelectedReferenceYLines);
+                        drawReferenceLines(helperContext, {
+                            xLines,
+                            yLines
+                        });
+                    }
                 }
                 else if (actionType === 'area' && areaStart && areaEnd) {
                     drawArea(helperContext, { start: areaStart, end: areaEnd });

package/dist/esm/middleware/selector/reference.d.ts

@@ -0,0 +1,13 @@
+import type { Data, Element, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator } from '@idraw/types';
+export declare function calcReferenceInfo(uuid: string, opts: {
+    data: Data;
+    groupQueue: Element<'group'>[];
+    calculator: ViewCalculator;
+    viewScaleInfo: ViewScaleInfo;
+    viewSizeInfo: ViewSizeInfo;
+}): {
+    offsetX: number | null;
+    offsetY: number | null;
+    yLines: PointSize[][];
+    xLines: PointSize[][];
+} | null;

package/dist/esm/middleware/selector/reference.js

@@ -0,0 +1,273 @@
+import { is } from '@idraw/util';
+const unitSize = 2;
+function getViewBoxInfo(rectInfo) {
+    const boxInfo = {
+        minX: rectInfo.topLeft.x,
+        minY: rectInfo.topLeft.y,
+        maxX: rectInfo.bottomRight.x,
+        maxY: rectInfo.bottomRight.y,
+        midX: rectInfo.center.x,
+        midY: rectInfo.center.y
+    };
+    return boxInfo;
+}
+const getClosestNumInSortedKeys = (sortedKeys, target) => {
+    if (sortedKeys.length === 0) {
+        throw null;
+    }
+    if (sortedKeys.length === 1) {
+        return sortedKeys[0];
+    }
+    let left = 0;
+    let right = sortedKeys.length - 1;
+    while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        if (sortedKeys[mid] === target) {
+            return sortedKeys[mid];
+        }
+        else if (sortedKeys[mid] < target) {
+            left = mid + 1;
+        }
+        else {
+            right = mid - 1;
+        }
+    }
+    if (left >= sortedKeys.length) {
+        return sortedKeys[right];
+    }
+    if (right < 0) {
+        return sortedKeys[left];
+    }
+    return Math.abs(sortedKeys[right] - target) <= Math.abs(sortedKeys[left] - target) ? sortedKeys[right] : sortedKeys[left];
+};
+const isEqualNum = (a, b) => Math.abs(a - b) < 0.00001;
+export function calcReferenceInfo(uuid, opts) {
+    var _a, _b;
+    const { data, groupQueue, calculator, viewScaleInfo, viewSizeInfo } = opts;
+    let targetElements = data.elements || [];
+    if ((groupQueue === null || groupQueue === void 0 ? void 0 : groupQueue.length) > 0) {
+        targetElements = ((_b = (_a = groupQueue[groupQueue.length - 1]) === null || _a === void 0 ? void 0 : _a.detail) === null || _b === void 0 ? void 0 : _b.children) || [];
+    }
+    const siblingViewRectInfoList = [];
+    targetElements.forEach((elem) => {
+        if (elem.uuid !== uuid) {
+            const info = calculator.calcViewRectInfoFromRange(elem.uuid, { checkVisible: true, viewScaleInfo, viewSizeInfo });
+            if (info) {
+                siblingViewRectInfoList.push(info);
+            }
+        }
+    });
+    const targetRectInfo = calculator.calcViewRectInfoFromRange(uuid, { viewScaleInfo, viewSizeInfo });
+    if (!targetRectInfo) {
+        return null;
+    }
+    const vTargetLineDotMap = {};
+    const hTargetLineDotMap = {};
+    const vRefLineDotMap = {};
+    const hRefLineDotMap = {};
+    const vHelperLineDotMapList = [];
+    const hHelperLineDotMapList = [];
+    let sortedRefXKeys = [];
+    let sortedRefYKeys = [];
+    const targetBox = getViewBoxInfo(targetRectInfo);
+    vTargetLineDotMap[targetBox.minX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    vTargetLineDotMap[targetBox.midX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    vTargetLineDotMap[targetBox.maxX] = [targetBox.minY, targetBox.midY, targetBox.maxY];
+    hTargetLineDotMap[targetBox.minY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    hTargetLineDotMap[targetBox.midY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    hTargetLineDotMap[targetBox.maxY] = [targetBox.minX, targetBox.midX, targetBox.maxX];
+    siblingViewRectInfoList.forEach((info) => {
+        const box = getViewBoxInfo(info);
+        if (!vRefLineDotMap[box.minX]) {
+            vRefLineDotMap[box.minX] = [];
+        }
+        if (!vRefLineDotMap[box.midX]) {
+            vRefLineDotMap[box.midX] = [];
+        }
+        if (!vRefLineDotMap[box.maxX]) {
+            vRefLineDotMap[box.maxX] = [];
+        }
+        if (!hRefLineDotMap[box.minY]) {
+            hRefLineDotMap[box.minY] = [];
+        }
+        if (!hRefLineDotMap[box.midY]) {
+            hRefLineDotMap[box.midY] = [];
+        }
+        if (!hRefLineDotMap[box.maxY]) {
+            hRefLineDotMap[box.maxY] = [];
+        }
+        vRefLineDotMap[box.minX] = [box.minY, box.midY, box.maxY];
+        vRefLineDotMap[box.midX] = [box.minY, box.midY, box.maxY];
+        vRefLineDotMap[box.maxX] = [box.minY, box.midY, box.maxY];
+        sortedRefXKeys.push(box.minX);
+        sortedRefXKeys.push(box.midX);
+        sortedRefXKeys.push(box.maxX);
+        hRefLineDotMap[box.minY] = [box.minX, box.midX, box.maxX];
+        hRefLineDotMap[box.midY] = [box.minX, box.midX, box.maxX];
+        hRefLineDotMap[box.maxY] = [box.minX, box.midX, box.maxX];
+        sortedRefYKeys.push(box.minY);
+        sortedRefYKeys.push(box.midY);
+        sortedRefYKeys.push(box.maxY);
+    });
+    sortedRefXKeys = sortedRefXKeys.sort((a, b) => a - b);
+    sortedRefYKeys = sortedRefYKeys.sort((a, b) => a - b);
+    let offsetX = null;
+    let offsetY = null;
+    let closestMinX = null;
+    let closestMidX = null;
+    let closestMaxX = null;
+    let closestMinY = null;
+    let closestMidY = null;
+    let closestMaxY = null;
+    if (sortedRefXKeys.length > 0) {
+        closestMinX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.minX);
+        closestMidX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.midX);
+        closestMaxX = getClosestNumInSortedKeys(sortedRefXKeys, targetBox.maxX);
+        const distMinX = Math.abs(closestMinX - targetBox.minX);
+        const distMidX = Math.abs(closestMidX - targetBox.midX);
+        const distMaxX = Math.abs(closestMaxX - targetBox.maxX);
+        const closestXDist = Math.min(distMinX, distMidX, distMaxX);
+        if (closestXDist <= unitSize / viewScaleInfo.scale) {
+            if (isEqualNum(closestXDist, distMinX)) {
+                offsetX = closestMinX - targetBox.minX;
+            }
+            else if (isEqualNum(closestXDist, distMidX)) {
+                offsetX = closestMidX - targetBox.midX;
+            }
+            else if (isEqualNum(closestXDist, distMaxX)) {
+                offsetX = closestMaxX - targetBox.maxX;
+            }
+        }
+    }
+    if (sortedRefYKeys.length > 0) {
+        closestMinY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.minY);
+        closestMidY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.midY);
+        closestMaxY = getClosestNumInSortedKeys(sortedRefYKeys, targetBox.maxY);
+        const distMinY = Math.abs(closestMinY - targetBox.minY);
+        const distMidY = Math.abs(closestMidY - targetBox.midY);
+        const distMaxY = Math.abs(closestMaxY - targetBox.maxY);
+        const closestYDist = Math.min(distMinY, distMidY, distMaxY);
+        if (closestYDist <= unitSize / viewScaleInfo.scale) {
+            if (isEqualNum(closestYDist, distMinY)) {
+                offsetY = closestMinY - targetBox.minY;
+            }
+            else if (isEqualNum(closestYDist, distMidY)) {
+                offsetY = closestMidY - targetBox.midY;
+            }
+            else if (isEqualNum(closestYDist, distMaxY)) {
+                offsetY = closestMaxY - targetBox.maxY;
+            }
+        }
+    }
+    const newTargetBox = Object.assign({}, targetBox);
+    if (offsetX !== null) {
+        newTargetBox.minX += offsetX;
+        newTargetBox.midX += offsetX;
+        newTargetBox.maxX += offsetX;
+    }
+    if (offsetY !== null) {
+        newTargetBox.minY += offsetY;
+        newTargetBox.midY += offsetY;
+        newTargetBox.maxY += offsetY;
+    }
+    if (is.x(offsetX) && offsetX !== null && closestMinX !== null && closestMidX !== null && closestMaxX !== null) {
+        if (isEqualNum(offsetX, closestMinX - targetBox.minX)) {
+            const vLine = {
+                x: closestMinX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.midY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMinX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+        if (isEqualNum(offsetX, closestMidX - targetBox.minX)) {
+            const vLine = {
+                x: closestMidX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.midY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMidX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+        if (isEqualNum(offsetX, closestMaxX - targetBox.minX)) {
+            const vLine = {
+                x: closestMaxX,
+                yList: []
+            };
+            vLine.yList.push(newTargetBox.minY);
+            vLine.yList.push(newTargetBox.midY);
+            vLine.yList.push(newTargetBox.maxY);
+            vLine.yList.push(...((hRefLineDotMap === null || hRefLineDotMap === void 0 ? void 0 : hRefLineDotMap[closestMaxX]) || []));
+            vHelperLineDotMapList.push(vLine);
+        }
+    }
+    if (is.y(offsetY) && offsetY !== null && closestMinY !== null && closestMidY !== null && closestMaxY !== null) {
+        if (isEqualNum(offsetY, closestMinY - targetBox.minY)) {
+            const hLine = {
+                y: closestMinY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.midX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMinY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+        if (isEqualNum(offsetY, closestMidY - targetBox.midY)) {
+            const hLine = {
+                y: closestMidY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.midX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMinY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+        if (isEqualNum(offsetY, closestMaxY - targetBox.maxY)) {
+            const hLine = {
+                y: closestMaxY,
+                xList: []
+            };
+            hLine.xList.push(newTargetBox.minX);
+            hLine.xList.push(newTargetBox.midX);
+            hLine.xList.push(newTargetBox.maxX);
+            hLine.xList.push(...((vRefLineDotMap === null || vRefLineDotMap === void 0 ? void 0 : vRefLineDotMap[closestMaxY]) || []));
+            hHelperLineDotMapList.push(hLine);
+        }
+    }
+    const yLines = [];
+    if ((vHelperLineDotMapList === null || vHelperLineDotMapList === void 0 ? void 0 : vHelperLineDotMapList.length) > 0) {
+        vHelperLineDotMapList.forEach((item, i) => {
+            yLines.push([]);
+            item.yList.forEach((y) => {
+                yLines[i].push({
+                    x: item.x,
+                    y
+                });
+            });
+        });
+    }
+    const xLines = [];
+    if ((hHelperLineDotMapList === null || hHelperLineDotMapList === void 0 ? void 0 : hHelperLineDotMapList.length) > 0) {
+        hHelperLineDotMapList.forEach((item, i) => {
+            xLines.push([]);
+            item.xList.forEach((x) => {
+                xLines[i].push({
+                    x,
+                    y: item.y
+                });
+            });
+        });
+    }
+    return {
+        offsetX,
+        offsetY,
+        yLines,
+        xLines
+    };
+}

package/dist/esm/middleware/selector/types.d.ts

@@ -1,6 +1,5 @@
-import type { ElementSizeController } from '@idraw/types';
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
-import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes } from '@idraw/types';
+import { Data, ElementSize, ElementType, Element, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware, ViewRectVertexes, ElementSizeController, ElementPosition } from '@idraw/types';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
 export { Data, ElementType, Element, ElementSize, ViewContext2D, Point, PointSize, ViewScaleInfo, ViewSizeInfo, ViewCalculator, PointWatcherEvent, BoardMiddleware };
 export type ControllerStyle = ElementSize & {
     borderWidth: number;
@@ -31,6 +30,9 @@ export type DeepSelectorSharedStorage = {
     [keySelectedElementList]: Array<Element<ElementType>>;
     [keySelectedElementListVertexes]: ViewRectVertexes | null;
     [keySelectedElementController]: ElementSizeController | null;
+    [keySelectedElementPosition]: ElementPosition;
+    [keySelectedReferenceXLines]: Array<PointSize[]>;
+    [keySelectedReferenceYLines]: Array<PointSize[]>;
     [keyIsMoving]: boolean | null;
     [keyDebugElemCenter]: PointSize | null;
     [keyDebugEnd0]: PointSize | null;

package/dist/esm/middleware/selector/types.js

@@ -1 +1 @@
-import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keyIsMoving, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';
+import { keyActionType, keyResizeType, keyAreaStart, keyAreaEnd, keyGroupQueue, keyGroupQueueVertexesList, keyHoverElement, keyHoverElementVertexes, keySelectedElementList, keySelectedElementListVertexes, keySelectedElementController, keySelectedElementPosition, keySelectedReferenceXLines, keySelectedReferenceYLines, keyIsMoving, keyDebugElemCenter, keyDebugEnd0, keyDebugEndHorizontal, keyDebugEndVertical, keyDebugStartHorizontal, keyDebugStartVertical } from './config';

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

@@ -1,4 +1,4 @@
-import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
+import { calcElementCenter, rotateElementVertexes, calcElementVertexesInGroup, calcElementQueueVertexesQueueInGroup, calcViewPointSize, calcViewElementSize, rotatePointInGroup, rotatePoint, parseAngleToRadian, parseRadianToAngle, limitAngle, calcRadian } from '@idraw/util';
 function parseRadian(angle) {
     return (angle * Math.PI) / 180;
 }
@@ -9,11 +9,11 @@ function changeMoveDistDirect(moveDist, moveDirect) {
     return moveDirect > 0 ? Math.abs(moveDist) : 0 - Math.abs(moveDist);
 }
 export function isPointInViewActiveVertexes(p, opts) {
-    const { ctx, viewScaleInfo, viewSizeInfo, vertexes } = opts;
-    const v0 = calcViewPointSize(vertexes[0], { viewScaleInfo, viewSizeInfo });
-    const v1 = calcViewPointSize(vertexes[1], { viewScaleInfo, viewSizeInfo });
-    const v2 = calcViewPointSize(vertexes[2], { viewScaleInfo, viewSizeInfo });
-    const v3 = calcViewPointSize(vertexes[3], { viewScaleInfo, viewSizeInfo });
+    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 });
     ctx.beginPath();
     ctx.moveTo(v0.x, v0.y);
     ctx.lineTo(v1.x, v1.y);
@@ -673,10 +673,9 @@ export function resizeElement(elem, opts) {
 }
 export function rotateElement(elem, opts) {
     const { x, y, w, h, angle = 0 } = elem;
-    const { center, start, end, viewScaleInfo, viewSizeInfo } = opts;
+    const { center, start, end, viewScaleInfo } = opts;
     const elemCenter = calcViewPointSize(center, {
-        viewScaleInfo,
-        viewSizeInfo
+        viewScaleInfo
     });
     const startAngle = limitAngle(angle);
     const changedRadian = calcRadian(elemCenter, start, end);
@@ -694,7 +693,7 @@ export function getSelectedListArea(data, opts) {
     const indexes = [];
     const uuids = [];
     const elements = [];
-    const { calculator, viewScaleInfo, viewSizeInfo, start, end } = opts;
+    const { viewScaleInfo, viewSizeInfo, start, end } = opts;
     if (!(Array.isArray(data.elements) && start && end)) {
         return { indexes, uuids, elements };
     }
@@ -707,7 +706,7 @@ export function getSelectedListArea(data, opts) {
         if (((_a = elem === null || elem === void 0 ? void 0 : elem.operations) === null || _a === void 0 ? void 0 : _a.lock) === true) {
             continue;
         }
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
         const center = calcElementCenter(elemSize);
         if (center.x >= startX && center.x <= endX && center.y >= startY && center.y <= endY) {
             indexes.push(idx);
@@ -734,14 +733,14 @@ export function calcSelectedElementsArea(elements, opts) {
         return null;
     }
     const area = { x: 0, y: 0, w: 0, h: 0 };
-    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { viewScaleInfo, viewSizeInfo } = 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) {
             continue;
         }
-        const elemSize = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+        const elemSize = calcViewElementSize(elem, { viewScaleInfo, viewSizeInfo });
         if (elemSize.angle && (elemSize.angle > 0 || elemSize.angle < 0)) {
             const ves = rotateElementVertexes(elemSize);
             if (ves.length === 4) {