@idraw/core 0.4.0-beta.15 → 0.4.0-beta.17

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) {

package/dist/esm/middleware/text-editor/index.js

@@ -172,6 +172,19 @@ export const MiddlewareTextEditor = (opts) => {
         }
         hideTextArea();
     });
+    textarea.addEventListener('keydown', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('keypress', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('keyup', (e) => {
+        e.stopPropagation();
+    });
+    textarea.addEventListener('wheel', (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
     const textEditCallback = (e) => {
         var _a;
         if ((e === null || e === void 0 ? void 0 : e.position) && (e === null || e === void 0 ? void 0 : e.element) && ((_a = e === null || e === void 0 ? void 0 : e.element) === null || _a === void 0 ? void 0 : _a.type) === 'text') {