feat(core): override isHit method support isStrict param and isHitDra…

…wElement support isStrict to match dblClick editing scene
worktile · Dec 25, 2024 · 4036ede · 4036ede
1 parent 03be33a
commit 4036ede
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 34 deletions.
diff --git a/.changeset/silver-kings-begin.md b/.changeset/silver-kings-begin.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': minor
+---
+
+isHitDrawElement support isStrict mode to match dblClick editing scene(isStrict is false)
diff --git a/.changeset/thick-apricots-scream.md b/.changeset/thick-apricots-scream.md
@@ -0,0 +1,5 @@
+---
+'@plait/core': minor
+---
+
+override isHit method support isStrict param
diff --git a/packages/core/src/interfaces/board.ts b/packages/core/src/interfaces/board.ts
@@ -71,7 +71,7 @@ export interface PlaitBoard {
     drawElement: (context: PlaitPluginElementContext) => ComponentType<ElementFlavour>;
     isRectangleHit: (element: PlaitElement, range: Selection) => boolean;
     // When the element has no fill color, it is considered a hit only if it hits the border.
-    isHit: (element: PlaitElement, point: Point) => boolean;
+    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;

diff --git a/packages/core/src/utils/selected-element.ts b/packages/core/src/utils/selected-element.ts
@@ -33,7 +33,7 @@ export const getHitElementsBySelection = (
     }
     depthFirstRecursion<Ancestor>(
         board,
-        node => {
+        (node) => {
             if (!PlaitBoard.isBoard(node) && match(node)) {
                 let isRectangleHit = false;
                 try {
@@ -57,18 +57,19 @@ export const getHitElementsBySelection = (
 export const getHitElementsByPoint = (
     board: PlaitBoard,
     point: Point,
-    match: (element: PlaitElement) => boolean = () => true
+    match: (element: PlaitElement) => boolean = () => true,
+    isStrict = true
 ): PlaitElement[] => {
     let hitElements: PlaitElement[] = [];
     depthFirstRecursion<Ancestor>(
         board,
-        node => {
+        (node) => {
             if (PlaitBoard.isBoard(node) || !match(node) || !PlaitElement.hasMounted(node)) {
                 return;
             }
             let isHit = false;
             try {
-                isHit = board.isHit(node, point);
+                isHit = board.isHit(node, point, isStrict);
             } catch (error) {
                 if (isDebug()) {
                     console.error('isHit', error, 'node', node);
@@ -88,9 +89,10 @@ export const getHitElementsByPoint = (
 export const getHitElementByPoint = (
     board: PlaitBoard,
     point: Point,
-    match: (element: PlaitElement) => boolean = () => true
+    match: (element: PlaitElement) => boolean = () => true,
+    isStrict = true
 ): undefined | PlaitElement => {
-    const pointHitElements = getHitElementsByPoint(board, point, match);
+    const pointHitElements = getHitElementsByPoint(board, point, match, isStrict);
     const hitElement = board.getOneHitElement(pointHitElements);
     return hitElement;
 };
@@ -133,15 +135,15 @@ export const removeSelectedElement = (board: PlaitBoard, element: PlaitElement,
         if (board.isRecursion(element) && isRemoveChildren) {
             depthFirstRecursion(
                 element,
-                node => {
+                (node) => {
                     targetElements.push(node);
                 },
-                node => board.isRecursion(node)
+                (node) => board.isRecursion(node)
             );
         } else {
             targetElements.push(element);
         }
-        const newSelectedElements = selectedElements.filter(value => !targetElements.includes(value));
+        const newSelectedElements = selectedElements.filter((value) => !targetElements.includes(value));
         cacheSelectedElements(board, newSelectedElements);
     }
 };
@@ -157,7 +159,7 @@ export const clearSelectedElement = (board: PlaitBoard) => {
 
 export const isSelectedElement = (board: PlaitBoard, element: PlaitElement) => {
     const selectedElements = getSelectedElements(board);
-    return !!selectedElements.find(value => value === element);
+    return !!selectedElements.find((value) => value === element);
 };
 
 export const temporaryDisableSelection = (board: PlaitOptionsBoard) => {

diff --git a/packages/draw/src/plugins/with-draw-hotkey.ts b/packages/draw/src/plugins/with-draw-hotkey.ts
@@ -31,12 +31,12 @@ export const withDrawHotkey = (board: PlaitBoard) => {
         event.preventDefault();
         if (!PlaitBoard.isReadonly(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const hitElement = getHitElementByPoint(board, point);
+            const hitElement = getHitElementByPoint(board, point, undefined, false);
             if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
                 if (isMultipleTextGeometry(hitElement)) {
                     const hitText =
                         getHitMultipleGeometryText(hitElement, point) ||
-                        hitElement.texts.find(item => item.id.includes(GeometryCommonTextKeys.content)) ||
+                        hitElement.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content)) ||
                         hitElement.texts[0];
                     editText(board, hitElement, hitText);
                 } else {

diff --git a/packages/draw/src/plugins/with-draw.ts b/packages/draw/src/plugins/with-draw.ts
@@ -85,12 +85,12 @@ export const withDraw = (board: PlaitBoard) => {
         return isRectangleHit(element, selection);
     };
 
-    board.isHit = (element, point) => {
-        const result = isHitDrawElement(board, element, point);
+    board.isHit = (element, point, isStrict?: boolean) => {
+        const result = isHitDrawElement(board, element, point, isStrict);
         if (result !== null) {
             return result;
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
 
     board.getOneHitElement = elements => {

diff --git a/packages/draw/src/plugins/with-table.ts b/packages/draw/src/plugins/with-table.ts
@@ -33,12 +33,12 @@ export const withTable = (board: PlaitBoard) => {
         return drawElement(context);
     };
 
-    tableBoard.isHit = (element, point) => {
+    tableBoard.isHit = (element, point, isStrict?: boolean) => {
         if (PlaitDrawElement.isElementByTable(element)) {
             const client = RectangleClient.getRectangleByPoints(element.points);
             return RectangleClient.isPointInRectangle(client, point);
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
 
     tableBoard.getRectangle = (element: PlaitElement) => {

diff --git a/packages/draw/src/utils/geometry.ts b/packages/draw/src/utils/geometry.ts
@@ -1,4 +1,12 @@
-import { PlaitBoard, PlaitElement, Point, RectangleClient, ThemeColorMode, getSelectedElements, idCreator } from '@plait/core';
+import {
+    PlaitBoard,
+    PlaitElement,
+    Point,
+    RectangleClient,
+    ThemeColorMode,
+    getSelectedElements,
+    idCreator
+} from '@plait/core';
 import { GeometryShapes, BasicShapes, PlaitGeometry, FlowchartSymbols, UMLSymbols } from '../interfaces/geometry';
 import { Element } from 'slate';
 import {
@@ -273,7 +281,7 @@ export const getAutoCompletePoints = (element: PlaitShapeElement) => {
 };
 
 export const getHitIndexOfAutoCompletePoint = (movingPoint: Point, points: Point[]) => {
-    return points.findIndex(point => {
+    return points.findIndex((point) => {
         const movingRectangle = RectangleClient.getRectangleByPoints([movingPoint]);
         let rectangle = RectangleClient.getRectangleByPoints([point]);
         rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
@@ -362,15 +370,8 @@ export const createDefaultGeometry = (board: PlaitBoard, points: [Point, Point],
 export const editText = (board: PlaitBoard, element: PlaitGeometry, text?: DrawTextInfo) => {
     const textManage = text ? getTextManage(board, element, text) : getFirstTextManage(element);
     if (textManage) {
-        textManage.edit(() => {
-            // delay to avoid blinking
-            setTimeout(() => {
-                rerenderGeometryActive(board, element);
-            }, 200);
-        });
+        textManage.edit(() => {});
     }
-
-    rerenderGeometryActive(board, element);
 };
 
 export const rerenderGeometryActive = (board: PlaitBoard, element: PlaitGeometry) => {

diff --git a/packages/draw/src/utils/hit.ts b/packages/draw/src/utils/hit.ts
@@ -187,7 +187,7 @@ export const getFirstTextOrLineElement = (elements: PlaitElement[]) => {
     return null;
 };
 
-export const isHitDrawElement = (board: PlaitBoard, element: PlaitElement, point: Point) => {
+export const isHitDrawElement = (board: PlaitBoard, element: PlaitElement, point: Point, isStrict: boolean = true) => {
     const rectangle = board.getRectangle(element);
     point = rotateAntiPointsByElement(point, element) || point;
     if (PlaitDrawElement.isGeometry(element)) {
@@ -199,7 +199,7 @@ export const isHitDrawElement = (board: PlaitBoard, element: PlaitElement, point
             const textClient = getTextRectangle(element);
             return RectangleClient.isPointInRectangle(textClient, point);
         }
-        if (isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
+        if (!!isStrict && isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
             return false;
         }
         const isHitText = isHitElementText(element, point);

diff --git a/packages/flow/src/plugins/with-flow.ts b/packages/flow/src/plugins/with-flow.ts
@@ -49,7 +49,7 @@ export const withFlow: PlaitPlugin = (board: PlaitBoard) => {
         return isRectangleHit(element, range);
     };
 
-    board.isHit = (element, point) => {
+    board.isHit = (element, point, isStrict?: boolean) => {
         if (!board.options.readonly) {
             if (FlowElement.isFlowElement(element) && PlaitElement.hasMounted(element)) {
                 if (FlowNode.isFlowNodeElement(element)) {
@@ -60,7 +60,7 @@ export const withFlow: PlaitPlugin = (board: PlaitBoard) => {
                 }
             }
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
 
     board.isMovable = element => {

diff --git a/packages/mind/src/plugins/with-mind.ts b/packages/mind/src/plugins/with-mind.ts
@@ -106,13 +106,13 @@ export const withMind = (baseBoard: PlaitBoard) => {
         return isRectangleHit(element, selection);
     };
 
-    board.isHit = (element, point: Point) => {
+    board.isHit = (element, point: Point, isStrict?: boolean) => {
         if (MindElement.isMindElement(board, element)) {
             const client = getRectangleByNode(MindElement.getNode(element));
             const isHit = RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), client);
             return isHit;
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
 
     board.getOneHitElement = elements => {