fix: Mobile arrow point drag broken (#9998)

* fix: Mobile bound arrow point drag broken

* fix:Check real point

excalidraw-app/tests/MobileMenu.test.tsx

@@ -36,7 +36,7 @@ describe("Test MobileMenu", () => {
         },
         "isTouchScreen": false,
         "viewport": {
-          "isLandscape": false,
+          "isLandscape": true,
           "isMobile": true,
         },
       }

packages/common/src/constants.ts

@@ -347,15 +347,12 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
 
 // breakpoints
 // -----------------------------------------------------------------------------
-// md screen
-export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
-export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
 
 // mobile: up to 699px
-export const MQ_MAX_WIDTH_MOBILE = 699;
+export const MQ_MAX_MOBILE = 599;
 
 // tablets
-export const MQ_MIN_TABLET = 600; // lower bound (excludes phones)
+export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
 export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
 
 // desktop/laptop

packages/excalidraw/components/App.tsx

@@ -100,9 +100,7 @@ import {
   MINIMUM_ARROW_SIZE,
   DOUBLE_TAP_POSITION_THRESHOLD,
   isMobileOrTablet,
-  MQ_MAX_WIDTH_MOBILE,
-  MQ_MAX_HEIGHT_LANDSCAPE,
-  MQ_MAX_WIDTH_LANDSCAPE,
+  MQ_MAX_MOBILE,
   MQ_MIN_TABLET,
   MQ_MAX_TABLET,
 } from "@excalidraw/common";
@@ -2423,10 +2421,8 @@ class App extends React.Component<AppProps, AppState> {
   };
 
   private isMobileBreakpoint = (width: number, height: number) => {
-    return (
-      width <= MQ_MAX_WIDTH_MOBILE ||
-      (height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
-    );
+    const minSide = Math.min(width, height);
+    return minSide <= MQ_MAX_MOBILE;
   };
 
   private isTabletBreakpoint = (editorWidth: number, editorHeight: number) => {
@@ -2442,14 +2438,14 @@ class App extends React.Component<AppProps, AppState> {
       return;
     }
 
-    const { clientWidth: viewportWidth, clientHeight: viewportHeight } =
-      document.body;
+    const { width: editorWidth, height: editorHeight } =
+      container.getBoundingClientRect();
 
     const prevViewportState = this.device.viewport;
 
     const nextViewportState = updateObject(prevViewportState, {
-      isLandscape: viewportWidth > viewportHeight,
-      isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight),
+      isLandscape: editorWidth > editorHeight,
+      isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
     });
 
     if (prevViewportState !== nextViewportState) {
@@ -7252,6 +7248,16 @@ class App extends React.Component<AppProps, AppState> {
         selectedElements.length === 1 &&
         !this.state.selectedLinearElement?.isEditing &&
         !isElbowArrow(selectedElements[0]) &&
+        !(
+          isLineElement(selectedElements[0]) &&
+          LinearElementEditor.getPointIndexUnderCursor(
+            selectedElements[0],
+            elementsMap,
+            this.state.zoom,
+            pointerDownState.origin.x,
+            pointerDownState.origin.y,
+          ) !== -1
+        ) &&
         !(
           this.state.selectedLinearElement &&
           this.state.selectedLinearElement.hoverPointIndex !== -1