feat: Precise hit testing (#9488)

packages/excalidraw/lasso/index.ts

@@ -199,6 +199,7 @@ export class LassoTrail extends AnimatedTrail {
       const { selectedElementIds } = getLassoSelectedElementIds({
         lassoPath,
         elements: this.app.visibleElements,
+        elementsMap: this.app.scene.getNonDeletedElementsMap(),
         elementsSegments: this.elementsSegments,
         intersectedElements: this.intersectedElements,
         enclosedElements: this.enclosedElements,

packages/excalidraw/lasso/utils.ts

@@ -3,20 +3,25 @@ import { simplify } from "points-on-curve";
 import {
   polygonFromPoints,
   lineSegment,
-  lineSegmentIntersectionPoints,
   polygonIncludesPointNonZero,
 } from "@excalidraw/math";
 
-import type {
-  ElementsSegmentsMap,
-  GlobalPoint,
-  LineSegment,
-} from "@excalidraw/math/types";
-import type { ExcalidrawElement } from "@excalidraw/element/types";
+import {
+  type Bounds,
+  computeBoundTextPosition,
+  doBoundsIntersect,
+  getBoundTextElement,
+  getElementBounds,
+  intersectElementWithLineSegment,
+} from "@excalidraw/element";
+
+import type { ElementsSegmentsMap, GlobalPoint } from "@excalidraw/math/types";
+import type { ElementsMap, ExcalidrawElement } from "@excalidraw/element/types";
 
 export const getLassoSelectedElementIds = (input: {
   lassoPath: GlobalPoint[];
   elements: readonly ExcalidrawElement[];
+  elementsMap: ElementsMap;
   elementsSegments: ElementsSegmentsMap;
   intersectedElements: Set<ExcalidrawElement["id"]>;
   enclosedElements: Set<ExcalidrawElement["id"]>;
@@ -27,6 +32,7 @@ export const getLassoSelectedElementIds = (input: {
   const {
     lassoPath,
     elements,
+    elementsMap,
     elementsSegments,
     intersectedElements,
     enclosedElements,
@@ -40,8 +46,26 @@ export const getLassoSelectedElementIds = (input: {
   const unlockedElements = elements.filter((el) => !el.locked);
   // as the path might not enclose a shape anymore, clear before checking
   enclosedElements.clear();
+  intersectedElements.clear();
+  const lassoBounds = lassoPath.reduce(
+    (acc, item) => {
+      return [
+        Math.min(acc[0], item[0]),
+        Math.min(acc[1], item[1]),
+        Math.max(acc[2], item[0]),
+        Math.max(acc[3], item[1]),
+      ];
+    },
+    [Infinity, Infinity, -Infinity, -Infinity],
+  ) as Bounds;
   for (const element of unlockedElements) {
+    // First check if the lasso segment intersects the element's axis-aligned
+    // bounding box as it is much faster than checking intersection against
+    // the element's shape
+    const elementBounds = getElementBounds(element, elementsMap);
+
     if (
+      doBoundsIntersect(lassoBounds, elementBounds) &&
       !intersectedElements.has(element.id) &&
       !enclosedElements.has(element.id)
     ) {
@@ -49,7 +73,7 @@ export const getLassoSelectedElementIds = (input: {
       if (enclosed) {
         enclosedElements.add(element.id);
       } else {
-        const intersects = intersectionTest(path, element, elementsSegments);
+        const intersects = intersectionTest(path, element, elementsMap);
         if (intersects) {
           intersectedElements.add(element.id);
         }
@@ -85,26 +109,34 @@ const enclosureTest = (
 const intersectionTest = (
   lassoPath: GlobalPoint[],
   element: ExcalidrawElement,
-  elementsSegments: ElementsSegmentsMap,
+  elementsMap: ElementsMap,
 ): boolean => {
-  const elementSegments = elementsSegments.get(element.id);
-  if (!elementSegments) {
-    return false;
-  }
+  const lassoSegments = lassoPath
+    .slice(1)
+    .map((point: GlobalPoint, index) => lineSegment(lassoPath[index], point))
+    .concat([lineSegment(lassoPath[lassoPath.length - 1], lassoPath[0])]);
 
-  const lassoSegments = lassoPath.reduce((acc, point, index) => {
-    if (index === 0) {
-      return acc;
-    }
-    acc.push(lineSegment(lassoPath[index - 1], point));
-    return acc;
-  }, [] as LineSegment<GlobalPoint>[]);
+  const boundTextElement = getBoundTextElement(element, elementsMap);
 
-  return lassoSegments.some((lassoSegment) =>
-    elementSegments.some(
-      (elementSegment) =>
-        // introduce a bit of tolerance to account for roughness and simplification of paths
-        lineSegmentIntersectionPoints(lassoSegment, elementSegment, 1) !== null,
-    ),
+  return lassoSegments.some(
+    (lassoSegment) =>
+      intersectElementWithLineSegment(
+        element,
+        elementsMap,
+        lassoSegment,
+        0,
+        true,
+      ).length > 0 ||
+      (!!boundTextElement &&
+        intersectElementWithLineSegment(
+          {
+            ...boundTextElement,
+            ...computeBoundTextPosition(element, boundTextElement, elementsMap),
+          },
+          elementsMap,
+          lassoSegment,
+          0,
+          true,
+        ).length > 0),
   );
 };