@plait/core 0.92.2 → 0.93.0

package/fesm2022/plait-core.mjs

@@ -165,7 +165,7 @@ const POINTER_BUTTON = {
 };
 const PRESS_AND_MOVE_BUFFER = 3;
 const DRAG_SELECTION_PRESS_AND_MOVE_BUFFER = 10;
-const HIT_DISTANCE_BUFFER = 5;
+const HIT_DISTANCE_BUFFER = 3;
 
 function hasBeforeContextChange(value) {
     if (value.beforeContextChange) {
@@ -231,7 +231,7 @@ function isContextmenu(event) {
 }
 function uniqueById(elements) {
     const uniqueMap = new Map();
-    elements.forEach(item => {
+    elements.forEach((item) => {
         if (!uniqueMap.has(item.id)) {
             uniqueMap.set(item.id, item);
         }
@@ -714,8 +714,8 @@ const RectangleClient = {
         let xMax = -Infinity;
         let yMax = -Infinity;
         for (const point of points) {
-            const xArray = point.map(ele => ele[0]);
-            const yArray = point.map(ele => ele[1]);
+            const xArray = point.map((ele) => ele[0]);
+            const yArray = point.map((ele) => ele[1]);
             xMin = Math.min(xMin, ...xArray);
             yMin = Math.min(yMin, ...yArray);
             xMax = Math.max(xMax, ...xArray);
@@ -726,8 +726,8 @@ const RectangleClient = {
         return rect;
     },
     getCornerPointsByPoints(points) {
-        const xArray = points.map(ele => ele[0]);
-        const yArray = points.map(ele => ele[1]);
+        const xArray = points.map((ele) => ele[0]);
+        const yArray = points.map((ele) => ele[1]);
         const xMin = Math.min(...xArray);
         const xMax = Math.max(...xArray);
         const yMin = Math.min(...yArray);
@@ -814,7 +814,7 @@ const RectangleClient = {
         let minY = Number.MAX_VALUE;
         let maxX = Number.NEGATIVE_INFINITY;
         let maxY = Number.NEGATIVE_INFINITY;
-        rectangles.forEach(rect => {
+        rectangles.forEach((rect) => {
             minX = Math.min(minX, rect.x);
             minY = Math.min(minY, rect.y);
             maxX = Math.max(maxX, rect.x + rect.width);
@@ -830,7 +830,7 @@ const RectangleClient = {
 };
 function isPointArray(data) {
     return (Array.isArray(data) &&
-        data.every(item => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number'));
+        data.every((item) => Array.isArray(item) && item.length === 2 && typeof item[0] === 'number' && typeof item[1] === 'number'));
 }
 
 // https://stackoverflow.com/a/6853926/232122
@@ -1352,7 +1352,7 @@ const setStrokeLinecap = (g, value) => {
     g.setAttribute('stroke-linecap', value);
 };
 const setPathStrokeLinecap = (g, value) => {
-    g.querySelectorAll('path').forEach(path => {
+    g.querySelectorAll('path').forEach((path) => {
         path.setAttribute('stroke-linecap', value);
     });
 };
@@ -1656,7 +1656,7 @@ function depthFirstRecursion(node, callback, recursion, isReverse) {
     if (node.children && (!recursion || recursion(node))) {
         let children = [...node.children];
         children = isReverse ? children.reverse() : children;
-        children.forEach(child => {
+        children.forEach((child) => {
             depthFirstRecursion(child, callback, recursion);
         });
     }
@@ -1889,7 +1889,7 @@ const getHitElementsByPoint = (board, point, match = () => true, isStrict = true
 };
 const getHitElementByPoint = (board, point, match = () => true, isStrict = true) => {
     const pointHitElements = getHitElementsByPoint(board, point, match, isStrict);
-    const hitElement = board.getOneHitElement(pointHitElements);
+    const hitElement = board.getOneHitElement(pointHitElements, point);
     return hitElement;
 };
 const getHitSelectedElements = (board, point) => {
@@ -2178,7 +2178,7 @@ function fitViewportWidth(board, options) {
 function updateThemeColor(board, mode) {
     mode = mode ?? board.theme.themeColorMode;
     setTheme(board, { themeColorMode: mode });
-    depthFirstRecursion(board, element => {
+    depthFirstRecursion(board, (element) => {
         board.applyTheme(element);
     });
 }
@@ -2627,10 +2627,10 @@ const debounce = (func, wait, options) => {
 const getElementsIndices = (board, elements) => {
     sortElements(board, elements);
     return elements
-        .map(item => {
-        return board.children.map(item => item.id).indexOf(item.id);
+        .map((item) => {
+        return board.children.map((item) => item.id).indexOf(item.id);
     })
-        .filter(item => item >= 0);
+        .filter((item) => item >= 0);
 };
 const getHighestIndexOfElement = (board, elements) => {
     const indices = getElementsIndices(board, elements);
@@ -2638,7 +2638,7 @@ const getHighestIndexOfElement = (board, elements) => {
 };
 const moveElementsToNewPath = (board, moveOptions) => {
     moveOptions
-        .map(item => {
+        .map((item) => {
         const path = PlaitBoard.findPath(board, item.element);
         const ref = board.pathRef(path);
         return () => {
@@ -2646,7 +2646,7 @@ const moveElementsToNewPath = (board, moveOptions) => {
             ref.unref();
         };
     })
-        .forEach(action => {
+        .forEach((action) => {
         action();
     });
 };
@@ -3034,9 +3034,9 @@ const getNavigatorClipboard = async () => {
     if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
         for (const item of clipboardItems) {
             if (isFile(item)) {
-                const clipboardFiles = item.types.filter(type => type.match(/^image\//));
-                const fileBlobs = await Promise.all(clipboardFiles.map(type => item.getType(type)));
-                const urls = fileBlobs.filter(Boolean).map(blob => URL.createObjectURL(blob));
+                const clipboardFiles = item.types.filter((type) => type.match(/^image\//));
+                const fileBlobs = await Promise.all(clipboardFiles.map((type) => item.getType(type)));
+                const urls = fileBlobs.filter(Boolean).map((blob) => URL.createObjectURL(blob));
                 const files = await Promise.all(urls.map(async (url) => {
                     const blob = await (await fetch(url)).blob();
                     return new File([blob], 'plait-file', { type: blob.type });
@@ -3066,7 +3066,7 @@ const getNavigatorClipboard = async () => {
     return clipboardData;
 };
 const isFile = (item) => {
-    return item.types.find(i => i.match(/^image\//));
+    return item.types.find((i) => i.match(/^image\//));
 };
 const blobAsString = (blob) => {
     return new Promise((resolve, reject) => {
@@ -3208,7 +3208,7 @@ function setSelectedElementsWithGroup(board, elements, isShift) {
                 cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
             }
             else {
-                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups);
+                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups, board.selection.anchor);
             }
         }
     }
@@ -3241,7 +3241,7 @@ function cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupEle
     }
     cacheSelectedElements(board, uniqueById(newElements));
 }
-function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups) {
+function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups, hitPoint) {
     let newElements = [...elements];
     const selectedGroups = filterSelectedGroups(board, hitElementGroups);
     if (selectedGroups.length > 0) {
@@ -3249,7 +3249,7 @@ function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, h
             newElements = getAllElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
         }
         else {
-            const element = board.getOneHitElement(elements);
+            const element = board.getOneHitElement(elements, hitPoint);
             if (element) {
                 newElements = [element];
             }
@@ -3261,7 +3261,7 @@ function cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, h
             newElements = elementsInGroup;
         }
         else {
-            const element = board.getOneHitElement(elements);
+            const element = board.getOneHitElement(elements, hitPoint);
             if (element) {
                 newElements = [element];
             }
@@ -3535,11 +3535,11 @@ const SNAP_TOLERANCE = 2;
 const SNAP_SPACING = 24;
 function getSnapRectangles(board, activeElements) {
     const elements = findElements(board, {
-        match: element => board.isAlign(element) && !activeElements.some(item => item.id === element.id),
+        match: (element) => board.isAlign(element) && !activeElements.some((item) => item.id === element.id),
         recursion: () => true,
         isReverse: false
     });
-    return elements.map(item => {
+    return elements.map((item) => {
         const rectangle = board.getRectangle(item);
         return getRectangleByAngle(rectangle, item.angle || 0);
     });
@@ -3557,7 +3557,7 @@ function getBarPoint(point, isHorizontal) {
 }
 function getMinPointDelta(pointRectangles, axis, isHorizontal) {
     let delta = SNAP_TOLERANCE;
-    pointRectangles.forEach(item => {
+    pointRectangles.forEach((item) => {
         const distance = getNearestDelta(axis, item, isHorizontal);
         if (Math.abs(distance) < Math.abs(delta)) {
             delta = distance;
@@ -3567,8 +3567,8 @@ function getMinPointDelta(pointRectangles, axis, isHorizontal) {
 }
 const getNearestDelta = (axis, rectangle, isHorizontal) => {
     const pointAxis = getTripleAxis(rectangle, isHorizontal);
-    const deltas = pointAxis.map(item => item - axis);
-    const absDeltas = deltas.map(item => Math.abs(item));
+    const deltas = pointAxis.map((item) => item - axis);
+    const absDeltas = deltas.map((item) => Math.abs(item));
     const index = absDeltas.indexOf(Math.min(...absDeltas));
     return deltas[index];
 };
@@ -3580,7 +3580,7 @@ const getTripleAxis = (rectangle, isHorizontal) => {
 function getNearestPointRectangle(snapRectangles, activeRectangle) {
     let minDistance = Infinity;
     let nearestRectangle = snapRectangles[0];
-    snapRectangles.forEach(item => {
+    snapRectangles.forEach((item) => {
         const distance = Math.sqrt(Math.pow(activeRectangle.x - item.x, 2) + Math.pow(activeRectangle.y - item.y, 2));
         if (distance < minDistance) {
             minDistance = distance;
@@ -3703,7 +3703,7 @@ function drawPointSnapLines(board, activeRectangle, snapRectangles, drawHorizont
 }
 function drawDashedLines(board, lines) {
     const g = createG();
-    lines.forEach(points => {
+    lines.forEach((points) => {
         if (!points.length)
             return;
         const line = PlaitBoard.getRoughSVG(board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
@@ -3717,7 +3717,7 @@ function drawDashedLines(board, lines) {
 }
 function drawSolidLines(board, lines) {
     const g = createG();
-    lines.forEach(points => {
+    lines.forEach((points) => {
         if (!points.length)
             return;
         let isHorizontal = points[0][1] === points[1][1];
@@ -3726,7 +3726,7 @@ function drawSolidLines(board, lines) {
             strokeWidth: 1
         });
         g.appendChild(line);
-        points.forEach(point => {
+        points.forEach((point) => {
             const barPoint = getBarPoint(point, isHorizontal);
             const bar = PlaitBoard.getRoughSVG(board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
                 stroke: SELECTION_BORDER_COLOR,
@@ -3756,7 +3756,7 @@ const getOneMoveOptions = (board, direction) => {
         if (direction === 'down') {
             indices = indices.reverse();
         }
-        moveContents.push(...indices.map(path => {
+        moveContents.push(...indices.map((path) => {
             return {
                 element: board.children[path],
                 newPath: [targetIndex]
@@ -3772,7 +3772,7 @@ const getAllMoveOptions = (board, direction) => {
     if (direction === 'down') {
         groupedIndices = groupedIndices.reverse();
     }
-    groupedIndices.forEach(indices => {
+    groupedIndices.forEach((indices) => {
         const leadingIndex = indices[0];
         const trailingIndex = indices[indices.length - 1];
         const boundaryIndex = direction === 'down' ? leadingIndex : trailingIndex;
@@ -3789,7 +3789,7 @@ const getAllMoveOptions = (board, direction) => {
         if (direction === 'down') {
             indices = indices.reverse();
         }
-        moveContents.push(...indices.map(path => {
+        moveContents.push(...indices.map((path) => {
             return {
                 element: board.children[path],
                 newPath: [targetIndex]
@@ -3799,7 +3799,7 @@ const getAllMoveOptions = (board, direction) => {
     return moveContents;
 };
 const canSetZIndex = (board) => {
-    const selectedElements = getSelectedElements(board).filter(item => board.canSetZIndex(item));
+    const selectedElements = getSelectedElements(board).filter((item) => board.canSetZIndex(item));
     return selectedElements.length > 0;
 };
 const toContiguousGroups = (board, array) => {
@@ -3853,8 +3853,8 @@ const getTargetIndex = (board, boundaryIndex, direction) => {
         return true;
     };
     const candidateIndex = direction === 'down'
-        ? findLastIndex(board.children, el => indexFilter(el), Math.max(0, boundaryIndex - 1))
-        : findIndex(board.children, el => indexFilter(el), boundaryIndex + 1);
+        ? findLastIndex(board.children, (el) => indexFilter(el), Math.max(0, boundaryIndex - 1))
+        : findIndex(board.children, (el) => indexFilter(el), boundaryIndex + 1);
     const nextElement = board.children[candidateIndex];
     if (!nextElement) {
         return -1;
@@ -3866,7 +3866,7 @@ const getTargetIndex = (board, boundaryIndex, direction) => {
     // candidate element is a sibling in current editing group → return
     if (editingGroup && sourceElement?.groupId !== nextElement?.groupId) {
         // candidate element is outside current editing group → prevent
-        if (!nextElementGroups.find(item => item.id === editingGroup.id)) {
+        if (!nextElementGroups.find((item) => item.id === editingGroup.id)) {
             return -1;
         }
     }
@@ -3884,8 +3884,8 @@ const getTargetIndex = (board, boundaryIndex, direction) => {
         let elementsInSiblingGroup = getElementsInGroup(board, siblingGroup, true, false);
         if (elementsInSiblingGroup.length) {
             elementsInSiblingGroup.sort((a, b) => {
-                const indexA = board.children.findIndex(child => child.id === a.id);
-                const indexB = board.children.findIndex(child => child.id === b.id);
+                const indexA = board.children.findIndex((child) => child.id === a.id);
+                const indexB = board.children.findIndex((child) => child.id === b.id);
                 return indexA - indexB;
             });
             // assumes getElementsInGroup() returned elements are sorted
@@ -3918,7 +3918,7 @@ const addGroup = (board, elements) => {
     const highestSelectedElements = [...selectedGroups, ...selectedIsolatedElements];
     const group = createGroup();
     if (canAddGroup(board)) {
-        highestSelectedElements.forEach(item => {
+        highestSelectedElements.forEach((item) => {
             const path = PlaitBoard.findPath(board, item);
             NodeTransforms.setNode(board, { groupId: group.id }, path);
         });
@@ -3944,18 +3944,18 @@ const addGroup = (board, elements) => {
 const removeGroup = (board, elements) => {
     const selectedGroups = getHighestSelectedGroups(board, elements);
     if (canRemoveGroup(board)) {
-        selectedGroups.forEach(group => {
+        selectedGroups.forEach((group) => {
             const elementsInGroup = findElements(board, {
-                match: item => item.groupId === group.id,
+                match: (item) => item.groupId === group.id,
                 recursion: () => false
             });
-            elementsInGroup.forEach(element => {
+            elementsInGroup.forEach((element) => {
                 const path = PlaitBoard.findPath(board, element);
                 NodeTransforms.setNode(board, { groupId: group.groupId || undefined }, path);
             });
         });
         selectedGroups
-            .map(group => {
+            .map((group) => {
             const groupPath = PlaitBoard.findPath(board, group);
             const groupRef = board.pathRef(groupPath);
             return () => {
@@ -3963,7 +3963,7 @@ const removeGroup = (board, elements) => {
                 groupRef.unref();
             };
         })
-            .forEach(action => {
+            .forEach((action) => {
             action();
         });
     }
@@ -3989,7 +3989,7 @@ function addSelectionWithTemporaryElements(board, elements) {
     if (ref) {
         clearTimeout(ref.timeoutId);
         const currentElements = ref.elements;
-        ref.elements.push(...elements.filter(element => !currentElements.includes(element)));
+        ref.elements.push(...elements.filter((element) => !currentElements.includes(element)));
         ref.timeoutId = timeoutId;
     }
     else {
@@ -4017,7 +4017,7 @@ const ZIndexTransforms = { moveUp, moveDown, moveToTop, moveToBottom };
 
 const removeElements = (board, elements) => {
     elements
-        .map(element => {
+        .map((element) => {
         const path = PlaitBoard.findPath(board, element);
         const ref = board.pathRef(path);
         return () => {
@@ -4026,7 +4026,7 @@ const removeElements = (board, elements) => {
             removeSelectedElement(board, element, true);
         };
     })
-        .forEach(action => {
+        .forEach((action) => {
         action();
     });
 };
@@ -4215,9 +4215,9 @@ function getRectangleByElements(board, elements, recursion) {
             console.error(`can not get rectangle of element:`, node);
         }
     };
-    elements.forEach(element => {
+    elements.forEach((element) => {
         if (recursion) {
-            depthFirstRecursion(element, node => callback(node), node => board.isRecursion(node));
+            depthFirstRecursion(element, (node) => callback(node), (node) => board.isRecursion(node));
         }
         else {
             callback(element);
@@ -4258,9 +4258,9 @@ function getElementById(board, id, dataSource) {
         return cachedElement;
     }
     if (!dataSource) {
-        dataSource = findElements(board, { match: element => true, recursion: element => true });
+        dataSource = findElements(board, { match: (element) => true, recursion: (element) => true });
     }
-    let element = dataSource.find(element => element.id === id);
+    let element = dataSource.find((element) => element.id === id);
     return element;
 }
 function getElementMap(board) {
@@ -4273,7 +4273,7 @@ function getElementMap(board) {
 function findElements(board, options) {
     let elements = [];
     const isReverse = options.isReverse ?? true;
-    depthFirstRecursion(board, node => {
+    depthFirstRecursion(board, (node) => {
         if (!PlaitBoard.isBoard(node) && options.match(node)) {
             elements.push(node);
         }
@@ -4554,13 +4554,13 @@ const Point = {
         return point && otherPoint && Point.isOverHorizontal([point, otherPoint], tolerance);
     },
     isOverHorizontal(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[1] - points[0][1]) <= tolerance);
+        return points.every((point) => Math.abs(point[1] - points[0][1]) <= tolerance);
     },
     isVertical(point, otherPoint, tolerance = 0) {
         return point && otherPoint && Point.isOverVertical([point, otherPoint], tolerance);
     },
     isOverVertical(points, tolerance = 0) {
-        return points.every(point => Math.abs(point[0] - points[0][0]) <= tolerance);
+        return points.every((point) => Math.abs(point[0] - points[0][0]) <= tolerance);
     },
     isAlign(points, tolerance = 0) {
         return Point.isOverHorizontal(points, tolerance) || Point.isOverVertical(points, tolerance);
@@ -4673,12 +4673,9 @@ class DefaultIterableDiffer {
         while (nextIt || nextRemove) {
             // Figure out which is the next record to process
             // Order: remove, add, move
-            const record = !nextRemove ||
-                nextIt &&
-                    nextIt.currentIndex <
-                        getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets) ?
-                nextIt :
-                nextRemove;
+            const record = !nextRemove || (nextIt && nextIt.currentIndex < getPreviousIndex(nextRemove, addRemoveOffset, moveOffsets))
+                ? nextIt
+                : nextRemove;
             const adjPreviousIndex = getPreviousIndex(record, addRemoveOffset, moveOffsets);
             const currentIndex = record.currentIndex;
             // consume the item, and adjust the addRemoveOffset and update moveDistance if necessary
@@ -4813,8 +4810,7 @@ class DefaultIterableDiffer {
      * changes.
      */
     get isDirty() {
-        return this._additionsHead !== null || this._movesHead !== null ||
-            this._removalsHead !== null || this._identityChangesHead !== null;
+        return (this._additionsHead !== null || this._movesHead !== null || this._removalsHead !== null || this._identityChangesHead !== null);
     }
     /**
      * Reset the state of the change objects to show no changes. This means set previousKey to
@@ -4885,8 +4881,7 @@ class DefaultIterableDiffer {
             }
             else {
                 // It is a new item: add it.
-                record =
-                    this._addAfter(new IterableChangeRecord_(item, itemTrackBy), previousRecord, index);
+                record = this._addAfter(new IterableChangeRecord_(item, itemTrackBy), previousRecord, index);
             }
         }
         return record;
@@ -5156,8 +5151,7 @@ class _DuplicateItemRecordList {
     get(trackById, atOrAfterIndex) {
         let record;
         for (record = this._head; record !== null; record = record._nextDup) {
-            if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex) &&
-                Object.is(record.trackById, trackById)) {
+            if ((atOrAfterIndex === null || atOrAfterIndex <= record.currentIndex) && Object.is(record.trackById, trackById)) {
                 return record;
             }
         }
@@ -5304,7 +5298,7 @@ class ListRender {
                     currentIndexForFirstElement = record.currentIndex;
                 }
             });
-            diffResult.forEachOperation(record => {
+            diffResult.forEachOperation((record) => {
                 // removed
                 if (record.currentIndex === null) {
                     const componentRef = this.instances[record.previousIndex];
@@ -5383,7 +5377,7 @@ const getContext = (board, element, index, parent, previousContext) => {
         board: board,
         selected: isSelected,
         index,
-        hasThemeChanged: !!board.operations?.find(op => op.type === 'set_theme')
+        hasThemeChanged: !!board.operations?.find((op) => op.type === 'set_theme')
     };
     return context;
 };
@@ -5593,13 +5587,13 @@ class PlaitBoardContext {
         this.uploadingFiles = [];
     }
     getUploadingFile(url) {
-        return this.uploadingFiles.find(file => file.url === url);
+        return this.uploadingFiles.find((file) => file.url === url);
     }
     setUploadingFile(file) {
         return this.uploadingFiles.push(file);
     }
     removeUploadingFile(fileEntry) {
-        this.uploadingFiles = this.uploadingFiles.filter(file => file.url !== fileEntry.url);
+        this.uploadingFiles = this.uploadingFiles.filter((file) => file.url !== fileEntry.url);
     }
 }
 
@@ -5709,7 +5703,7 @@ function createBoard(children, options) {
         isRectangleHit: (element) => false,
         isHit: (element) => false,
         isInsidePoint: (element) => false,
-        getOneHitElement: (data) => data[0],
+        getOneHitElement: (data, hitPoint) => data[0],
         isRecursion: (element) => true,
         isMovable: (element) => false,
         getRectangle: (element) => null,
@@ -5978,12 +5972,12 @@ const withHotkey = (board) => {
         if (!PlaitBoard.isReadonly(board) && options.isMultipleSelection && isHotkey('mod+a', event)) {
             event.preventDefault();
             let elements = [];
-            depthFirstRecursion(board, node => {
+            depthFirstRecursion(board, (node) => {
                 if (PlaitBoard.isBoard(node)) {
                     return;
                 }
                 elements.push(node);
-            }, node => {
+            }, (node) => {
                 if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
                     return true;
                 }
@@ -6139,7 +6133,7 @@ function getGapLinesAndDelta(activeRectangle, snapRectangles, isHorizontal) {
     const axis = isHorizontal ? 'x' : 'y';
     const side = isHorizontal ? 'width' : 'height';
     const activeRectangleCenter = activeRectangle[axis] + activeRectangle[side] / 2;
-    snapRectangles.forEach(rec => {
+    snapRectangles.forEach((rec) => {
         const isCross = isHorizontal ? isHorizontalCross(rec, activeRectangle) : isVerticalCross(rec, activeRectangle);
         if (isCross && !RectangleClient.isHit(rec, activeRectangle)) {
             rectangles.push(rec);
@@ -6309,7 +6303,7 @@ function withMoving(board) {
         hitTargetElement = getHitElementByPoint(board, point, (el) => board.isMovable(el));
         selectedTargetElements = getSelectedTargetElements(board);
         isHitSelectedTarget = hitTargetElement && selectedTargetElements.includes(hitTargetElement);
-        if (hitTargetElement && isHitSelectedTarget) {
+        if (hitTargetElement && (isHitSelectedTarget || isHitSelectedRectangle(board, point))) {
             startPoint = point;
             pointerId = event.pointerId;
             activeElements = selectedTargetElements;
@@ -6545,7 +6539,7 @@ function drawPendingNodesG(board, activeElements, offsetX, offsetY) {
 const withOptions = (board) => {
     const pluginOptions = new Map();
     const newBoard = board;
-    newBoard.getPluginOptions = key => {
+    newBoard.getPluginOptions = (key) => {
         return pluginOptions.get(key);
     };
     newBoard.setPluginOptions = (key, options) => {
@@ -6561,7 +6555,7 @@ function withRelatedFragment(board) {
         let relatedFragment = board.getRelatedFragment(originData || []);
         if (relatedFragment) {
             if (originData?.length) {
-                relatedFragment = relatedFragment.filter(item => !originData.map(element => element.id).includes(item.id));
+                relatedFragment = relatedFragment.filter((item) => !originData.map((element) => element.id).includes(item.id));
             }
             if (relatedFragment.length) {
                 const addition = {
@@ -6737,7 +6731,7 @@ function withSelection(board) {
                     }
                     else {
                         if (board.selection && Selection.isCollapsed(board.selection)) {
-                            const element = board.getOneHitElement(elements);
+                            const element = board.getOneHitElement(elements, board.selection.anchor);
                             if (element) {
                                 elements = [element];
                             }
@@ -6831,7 +6825,7 @@ const getI18nValue = (board, key, defaultValue = '') => {
  */
 const createTestingBoard = (plugins, children, options = { readonly: false, hideScrollbar: true, disabledScrollOnNonFocus: false }) => {
     let board = createBoard(children, options);
-    plugins.forEach(plugin => {
+    plugins.forEach((plugin) => {
         board = plugin(board);
     });
     KEY_TO_ELEMENT_MAP.set(board, new Map());
@@ -6848,7 +6842,7 @@ const fakeNodeWeakMap = (object) => {
 };
 const clearNodeWeakMap = (object) => {
     const children = object.children || [];
-    children.forEach(value => {
+    children.forEach((value) => {
         NODE_TO_PARENT.delete(value);
         NODE_TO_INDEX.delete(value);
         clearNodeWeakMap(value);