feat(core): add isHitElement and isHitSelectedRectangle function (#887)

worktile · May 22, 2024 · 4192c48 · 4192c48
1 parent ce5ee71
commit 4192c48
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 25 deletions.
diff --git a/.changeset/slow-cups-approve.md b/.changeset/slow-cups-approve.md
@@ -0,0 +1,8 @@
+---
+'@plait/core': patch
+'@plait/draw': patch
+---
+
+add isHitElement and isHitSelectedRectangle function
+
+fix rotate error
diff --git a/packages/core/src/plugins/with-moving.ts b/packages/core/src/plugins/with-moving.ts
@@ -141,7 +141,7 @@ export function withMoving(board: PlaitBoard) {
                         x: activeElementsRectangle.x + offsetX,
                         y: activeElementsRectangle.y + offsetY
                     };
-                    const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements)) || newRectangle;
+                    const activeRectangle = getRectangleByAngle(newRectangle, getSelectionAngle(activeElements));
                     const ref = getSnapMovingRef(board, activeRectangle, activeElements);
                     offsetX += ref.deltaX;
                     offsetY += ref.deltaY;

diff --git a/packages/core/src/plugins/with-selection.ts b/packages/core/src/plugins/with-selection.ts
@@ -6,10 +6,9 @@ import { RectangleClient } from '../interfaces/rectangle-client';
 import {
     cacheSelectedElements,
     clearSelectedElement,
-    getHitElementByPoint,
     getHitElementsBySelection,
-    getHitSelectedElements,
     getSelectedElements,
+    isHitElement,
     removeSelectedElement
 } from '../utils/selected-element';
 import { PlaitElement, PlaitPointerType, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR } from '../interfaces';
@@ -66,18 +65,13 @@ export function withSelection(board: PlaitBoard) {
         }
 
         const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const selectedElements = getSelectedElements(board);
-        const hitElement = getHitElementByPoint(board, point);
-        const hitSelectedElements = selectedElements.length > 1 ? getHitSelectedElements(board, point) : [];
-        const isHitTarget = hitElement || hitSelectedElements.length > 0;
+        const isHitTarget = isHitElement(board, point);
         const options = (board as PlaitOptionsBoard).getPluginOptions<WithPluginOptions>(PlaitPluginKey.withSelection);
-
         if (PlaitBoard.isPointer(board, PlaitPointerType.selection) && !isHitTarget && options.isMultiple && !options.isDisabledSelect) {
             preventTouchMove(board, event, true);
             // start rectangle selection
             start = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         }
-
         pointerDown(event);
     };
 

diff --git a/packages/core/src/utils/angle.ts b/packages/core/src/utils/angle.ts
@@ -96,9 +96,8 @@ export const getRectangleByAngle = (rectangle: RectangleClient, angle: number) =
         const cornerPoints = RectangleClient.getCornerPoints(rectangle);
         const centerPoint = RectangleClient.getCenterPoint(rectangle);
         return RectangleClient.getRectangleByPoints(rotatePoints(cornerPoints, centerPoint, angle));
-    } else {
-        return null;
     }
+    return rectangle;
 };
 
 export const isAxisChangedByAngle = (angle: number) => {
@@ -121,7 +120,7 @@ export function rotateElements(board: PlaitBoard, elements: PlaitElement[], angl
         const originAngle = item.angle;
         const points = rotatedDataPoints(item.points!, selectionCenterPoint, normalizeAngle(angle));
         const path = PlaitBoard.findPath(board, item);
-        Transforms.setNode(board, { points, angle: normalizeAngle(originAngle || 0 + angle) }, path);
+        Transforms.setNode(board, { points, angle: normalizeAngle((originAngle || 0) + angle) }, path);
     });
 }
 

diff --git a/packages/core/src/utils/element.ts b/packages/core/src/utils/element.ts
@@ -48,7 +48,7 @@ export function getRectangleByElements(board: PlaitBoard, elements: PlaitElement
 export function getBoundingRectangleByElements(board: PlaitBoard, elements: PlaitElement[], recursion: boolean): RectangleClient {
     const rectangle = getRectangleByElements(board, elements, recursion)!;
     const angle = getSelectionAngle(elements);
-    return getRectangleByAngle(rectangle, angle) || rectangle;
+    return getRectangleByAngle(rectangle, angle);
 }
 
 export function getBoardRectangle(board: PlaitBoard): RectangleClient {

diff --git a/packages/core/src/utils/selected-element.ts b/packages/core/src/utils/selected-element.ts
@@ -152,3 +152,13 @@ export const temporaryDisableSelection = (board: PlaitOptionsBoard) => {
         board.setPluginOptions<WithPluginOptions>(PlaitPluginKey.withSelection, { ...currentOptions });
     }, 0);
 };
+
+export const isHitSelectedRectangle = (board: PlaitBoard, point: Point) => {
+    const hitSelectedElements = getHitSelectedElements(board, point);
+    return hitSelectedElements.length > 0;
+};
+
+export const isHitElement = (board: PlaitBoard, point: Point) => {
+    const hitElement = getHitElementByPoint(board, point);
+    return !!hitElement || isHitSelectedRectangle(board, point);
+};
diff --git a/packages/core/src/utils/snap/snap.ts b/packages/core/src/utils/snap/snap.ts
@@ -35,7 +35,10 @@ export function getSnapRectangles(board: PlaitBoard, activeElements: PlaitElemen
         recursion: () => true,
         isReverse: false
     });
-    return elements.map(item => getRectangleByAngle(board.getRectangle(item)!, item.angle || 0) || board.getRectangle(item)!);
+    return elements.map(item => {
+        const rectangle = board.getRectangle(item)!;
+        return getRectangleByAngle(rectangle, item.angle || 0);
+    });
 }
 
 export function getBarPoint(point: Point, isHorizontal: boolean) {

diff --git a/packages/draw/src/utils/snap-resizing.ts b/packages/draw/src/utils/snap-resizing.ts
@@ -80,9 +80,8 @@ export function getSnapResizingRefOptions(
     const points = resizeOriginPoint.map(p => {
         return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
     }) as [Point, Point];
-    const activeRectangle =
-        getRectangleByAngle(RectangleClient.getRectangleByPoints(points), getSelectionAngle(activeElements)) ||
-        RectangleClient.getRectangleByPoints(points);
+    const rectangle = RectangleClient.getRectangleByPoints(points);
+    const activeRectangle = getRectangleByAngle(rectangle, getSelectionAngle(activeElements));
     const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
     const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
     return {
@@ -232,10 +231,8 @@ function drawResizingPointSnapLines(
     angle: number
 ) {
     debugGenerator.isDebug() && debugGenerator.clear();
-    const activeRectangle =
-        getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), angle) ||
-        RectangleClient.getRectangleByPoints(activePoints);
-
+    const rectangle = RectangleClient.getRectangleByPoints(activePoints);
+    const activeRectangle = getRectangleByAngle(rectangle, angle);
     const { isAspectRatio, directionFactors } = resizeSnapOptions;
     const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
     const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
@@ -254,9 +251,8 @@ function drawIsometricSnapLines(
 
     const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
     const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
-    const activeRectangle =
-        getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), angle) ||
-        RectangleClient.getRectangleByPoints(activePoints);
+    const rectangle = RectangleClient.getRectangleByPoints(activePoints);
+    const activeRectangle = getRectangleByAngle(rectangle, angle);
     for (let snapRectangle of snapRectangles) {
         if (activeRectangle.width === snapRectangle.width && drawHorizontalLine) {
             widthIsometricPoints.push(getIsometricLinePoints(snapRectangle, true));
@@ -275,4 +271,3 @@ function drawIsometricSnapLines(
     const isometricLines = [...widthIsometricPoints, ...heightIsometricPoints];
     return drawSolidLines(board, isometricLines);
 }
-