feat(core): getOneHitElement support hitPoint

Author: pubuzhixing8

.changeset/good-rules-brake.md

@@ -0,0 +1,7 @@
+---
+'@plait/core': minor
+'@plait/draw': minor
+'@plait/mind': minor
+---
+
+getOneHitElement support hitPoint

packages/core/src/interfaces/board.ts

@@ -75,7 +75,7 @@ export interface PlaitBoard {
     isHit: (element: PlaitElement, point: Point, isStrict?: boolean) => boolean;
     isInsidePoint: (element: PlaitElement, point: Point) => boolean;
     // the hit element is determined by the plugin
-    getOneHitElement: (hitElements: PlaitElement[]) => PlaitElement;
+    getOneHitElement: (hitElements: PlaitElement[], hitPoint: Point) => PlaitElement;
     isRecursion: (element: PlaitElement) => boolean;
     isMovable: (element: PlaitElement) => boolean;
     getRectangle: (element: PlaitElement) => RectangleClient | null;

packages/core/src/plugins/create-board.ts

@@ -116,7 +116,7 @@ export function createBoard(children: PlaitElement[], options?: PlaitBoardOption
         isRectangleHit: (element) => false,
         isHit: (element) => false,
         isInsidePoint: (element) => false,
-        getOneHitElement: (data: PlaitElement[]) => data[0],
+        getOneHitElement: (data: PlaitElement[], hitPoint: Point) => data[0],
         isRecursion: (element) => true,
         isMovable: (element) => false,
         getRectangle: (element) => null,

packages/core/src/plugins/with-selection.ts

@@ -204,7 +204,7 @@ export function withSelection(board: PlaitBoard) {
                         setSelectedElementsWithGroup(board, elements, isShift);
                     } 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];
                             }

packages/core/src/utils/selected-element.ts

@@ -93,7 +93,7 @@ export const getHitElementByPoint = (
     isStrict = true
 ): undefined | PlaitElement => {
     const pointHitElements = getHitElementsByPoint(board, point, match, isStrict);
-    const hitElement = board.getOneHitElement(pointHitElements);
+    const hitElement = board.getOneHitElement(pointHitElements, point);
     return hitElement;
 };
 

packages/core/src/utils/selection.ts

@@ -6,6 +6,7 @@ import {
     PlaitOperation,
     PlaitPluginKey,
     PlaitPointerType,
+    Point,
     RectangleClient,
     SELECTION_BORDER_COLOR,
     WithSelectionPluginOptions
@@ -112,7 +113,7 @@ export function setSelectedElementsWithGroup(board: PlaitBoard, elements: PlaitE
             if (isShift) {
                 cacheSelectedElementsWithGroupOnShift(board, elements, isSelectGroupElement, elementsInHighestGroup);
             } else {
-                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups);
+                cacheSelectedElementsWithGroup(board, elements, isSelectGroupElement, hitElementGroups, board.selection.anchor);
             }
         }
     }
@@ -154,15 +155,16 @@ export function cacheSelectedElementsWithGroup(
     board: PlaitBoard,
     elements: PlaitElement[],
     isSelectGroupElement: boolean,
-    hitElementGroups: PlaitGroup[]
+    hitElementGroups: PlaitGroup[],
+    hitPoint: Point
 ) {
     let newElements = [...elements];
     const selectedGroups = filterSelectedGroups(board, hitElementGroups);
     if (selectedGroups.length > 0) {
         if (selectedGroups.length > 1) {
             newElements = getAllElementsInGroup(board, selectedGroups[selectedGroups.length - 2], true);
         } else {
-            const element = board.getOneHitElement(elements);
+            const element = board.getOneHitElement(elements, hitPoint);
             if (element) {
                 newElements = [element];
             }
@@ -172,7 +174,7 @@ export function cacheSelectedElementsWithGroup(
         if (!isSelectGroupElement) {
             newElements = elementsInGroup;
         } else {
-            const element = board.getOneHitElement(elements);
+            const element = board.getOneHitElement(elements, hitPoint);
             if (element) {
                 newElements = [element];
             }

packages/draw/src/plugins/with-draw.ts

@@ -84,12 +84,12 @@ export const withDraw = (board: PlaitBoard) => {
         return isHit(element, point, isStrict);
     };
 
-    board.getOneHitElement = (elements) => {
+    board.getOneHitElement = (elements, hitPoint: Point) => {
         const isAllDrawElements = elements.every((item) => PlaitDrawElement.isDrawElement(item));
         if (isAllDrawElements) {
-            return getHitDrawElement(board, elements as PlaitDrawElement[]);
+            return getHitDrawElement(board, elements as PlaitDrawElement[], hitPoint);
         }
-        return getOneHitElement(elements);
+        return getOneHitElement(elements, hitPoint);
     };
 
     board.isInsidePoint = (element: PlaitElement, point: Point) => {

packages/draw/src/utils/hit.ts

@@ -140,7 +140,7 @@ export const isRectangleHitRotatedPoints = (rectangle: RectangleClient, points:
     return isLineHitRectangle(rotatedPoints, rectangle);
 };
 
-export const getHitDrawElement = (board: PlaitBoard, elements: (PlaitDrawElement | PlaitCustomGeometry)[]) => {
+export const getHitDrawElement = (board: PlaitBoard, elements: (PlaitDrawElement | PlaitCustomGeometry)[], hitPoint: Point) => {
     let firstFilledElement = getFirstFilledDrawElement(board, elements);
     let endIndex = elements.length;
     if (firstFilledElement) {

packages/mind/src/plugins/with-mind.ts

@@ -128,12 +128,12 @@ export const withMind = (baseBoard: PlaitBoard) => {
         return isHit(element, point, isStrict);
     };
 
-    board.getOneHitElement = (elements) => {
+    board.getOneHitElement = (elements, hitPoint: Point) => {
         const isAllMindElements = elements.every((item) => MindElement.isMindElement(board, item));
         if (isAllMindElements) {
             return elements[0];
         }
-        return getOneHitElement(elements);
+        return getOneHitElement(elements, hitPoint);
     };
 
     board.isMovable = (element) => {

src/app/plugins/with-common.ts

@@ -1,4 +1,4 @@
-import { PlaitBoard, PlaitElement, PlaitI18nBoard } from '@plait/core';
+import { P, PlaitBoard, PlaitElement, PlaitI18nBoard, Point } from '@plait/core';
 import { ImageProps, isFilled, PlaitImageBoard, sortElementsByArea } from '@plait/common';
 import { AngularBoard } from '@plait/angular-board';
 import { PlaitImageComponent } from '../editor/image/image.component';
@@ -17,13 +17,13 @@ export const withCommonPlugin = (board: PlaitBoard) => {
         return ref;
     };
 
-    newBoard.getOneHitElement = (elements: PlaitElement[]) => {
+    newBoard.getOneHitElement = (elements: PlaitElement[], hitPoint: Point) => {
         const hasMindElements = elements.some((item) => MindElement.isMindElement(board, item));
         const hasDrawElements = elements.some((item) => PlaitDrawElement.isDrawElement(item));
         if (hasMindElements && hasDrawElements) {
             return getCommonHitElement(board, elements);
         }
-        return getOneHitElement(elements);
+        return getOneHitElement(elements, hitPoint);
     };
 
     newBoard.getI18nValue = (key) => {