Fix drag multiple elements bug (excalidraw#2023)

Co-authored-by: dwelle <[email protected]>

src/constants.ts

@@ -11,6 +11,8 @@ export const CURSOR_TYPE = {
   CROSSHAIR: "crosshair",
   GRABBING: "grabbing",
   POINTER: "pointer",
+  MOVE: "move",
+  AUTO: "",
 };
 export const POINTER_BUTTON = {
   MAIN: 0,

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,

src/scene/comparisons.ts

@@ -34,6 +34,8 @@ export const getElementAtPosition = (
 ) => {
   let hitElement = null;
   // We need to to hit testing from front (end of the array) to back (beginning of the array)
+  // because array is ordered from lower z-index to highest and we want element z-index
+  // with higher z-index
   for (let i = elements.length - 1; i >= 0; --i) {
     const element = elements[i];
     if (element.isDeleted) {
@@ -48,6 +50,17 @@ export const getElementAtPosition = (
   return hitElement;
 };
 
+export const getElementsAtPosition = (
+  elements: readonly NonDeletedExcalidrawElement[],
+  isAtPositionFn: (element: NonDeletedExcalidrawElement) => boolean,
+) => {
+  // The parameter elements comes ordered from lower z-index to higher.
+  // We want to preserve that order on the returned array.
+  return elements.filter(
+    (element) => !element.isDeleted && isAtPositionFn(element),
+  );
+};
+
 export const getElementContainingPosition = (
   elements: readonly ExcalidrawElement[],
   x: number,

src/scene/index.ts

@@ -14,5 +14,6 @@ export {
   getElementAtPosition,
   getElementContainingPosition,
   hasText,
+  getElementsAtPosition,
 } from "./comparisons";
 export { getZoomOrigin, getNormalizedZoom } from "./zoom";