Fix drag multiple elements bug (#2023)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/element/collision.ts

@@ -48,9 +48,33 @@ export const hitTest = (
   const point: Point = [x, y];
 
   if (isElementSelected(appState, element)) {
-    return doesPointHitElementBoundingBox(element, point, threshold);
+    return isPointHittingElementBoundingBox(element, point, threshold);
   }
 
+  return isHittingElementNotConsideringBoundingBox(element, appState, point);
+};
+
+export const isHittingElementBoundingBoxWithoutHittingElement = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+  x: number,
+  y: number,
+): boolean => {
+  const threshold = 10 / appState.zoom;
+
+  return (
+    !isHittingElementNotConsideringBoundingBox(element, appState, [x, y]) &&
+    isPointHittingElementBoundingBox(element, [x, y], threshold)
+  );
+};
+
+const isHittingElementNotConsideringBoundingBox = (
+  element: NonDeletedExcalidrawElement,
+  appState: AppState,
+  point: Point,
+): boolean => {
+  const threshold = 10 / appState.zoom;
+
   const check =
     element.type === "text"
       ? isStrictlyInside
@@ -65,7 +89,7 @@ const isElementSelected = (
   element: NonDeleted<ExcalidrawElement>,
 ) => appState.selectedElementIds[element.id];
 
-const doesPointHitElementBoundingBox = (
+const isPointHittingElementBoundingBox = (
   element: NonDeleted<ExcalidrawElement>,
   [x, y]: Point,
   threshold: number,

src/element/index.ts

@@ -26,7 +26,10 @@ export {
   getTransformHandlesFromCoords,
   getTransformHandles,
 } from "./transformHandles";
-export { hitTest } from "./collision";
+export {
+  hitTest,
+  isHittingElementBoundingBoxWithoutHittingElement,
+} from "./collision";
 export {
   resizeTest,
   getCursorForResizingElement,

src/element/linearElementEditor.ts

@@ -171,7 +171,7 @@ export class LinearElementEditor {
     scenePointer: { x: number; y: number },
   ): {
     didAddPoint: boolean;
-    hitElement: ExcalidrawElement | null;
+    hitElement: NonDeleted<ExcalidrawElement> | null;
   } {
     const ret: ReturnType<typeof LinearElementEditor["handlePointerDown"]> = {
       didAddPoint: false,