Do not snap linear elements

Signed-off-by: Mark Tolmacs <[email protected]>

packages/element/src/binding.ts

@@ -525,15 +525,18 @@ export const bindLinearElement = (
     };
   }
   const points = Array.from(linearElement.points);
-  points[edgePointIndex] = toLocalPoint(
-    bindPointToSnapToElementOutline(
+
+  if (isArrowElement(linearElement)) {
+    points[edgePointIndex] = toLocalPoint(
+      bindPointToSnapToElementOutline(
+        linearElement,
+        hoveredElement,
+        startOrEnd,
+        elementsMap,
+      ),
       linearElement,
-      hoveredElement,
-      startOrEnd,
-      elementsMap,
-    ),
-    linearElement,
-  );
+    );
+  }
 
   mutateElement(linearElement, {
     points,

packages/element/src/linearElementEditor.ts

@@ -57,6 +57,7 @@ import { headingIsHorizontal, vectorToHeading } from "./heading";
 import { bumpVersion, mutateElement } from "./mutateElement";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
+  isArrowElement,
   isBindingElement,
   isElbowArrow,
   isFixedPointBinding,
@@ -371,14 +372,17 @@ export class LinearElementEditor {
                 app.scene,
                 app.state.zoom,
               );
+
               newPointPosition = LinearElementEditor.createPointAt(
                 element,
                 elementsMap,
-                avoidancePoint[0] === newGlobalPointPosition[0]
+                !isArrowElement(element) ||
+                  avoidancePoint[0] === newGlobalPointPosition[0]
                   ? newGlobalPointPosition[0] -
                       linearElementEditor.pointerOffset.x
                   : avoidancePoint[0],
-                avoidancePoint[1] === newGlobalPointPosition[1]
+                !isArrowElement(element) ||
+                  avoidancePoint[1] === newGlobalPointPosition[1]
                   ? newGlobalPointPosition[1] -
                       linearElementEditor.pointerOffset.y
                   : avoidancePoint[1],

packages/excalidraw/components/App.tsx

@@ -5991,20 +5991,25 @@ class App extends React.Component<AppProps, AppState> {
           {
             points: [
               ...points.slice(0, -1),
-              toLocalPoint(
-                getOutlineAvoidingPoint(
-                  multiElement,
-                  pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
-                  multiElement.points.length - 1,
-                  this.scene,
-                  this.state.zoom,
-                  pointFrom<GlobalPoint>(
-                    multiElement.x + lastCommittedX + dxFromLastCommitted,
-                    multiElement.y + lastCommittedY + dyFromLastCommitted,
+              isArrowElement(multiElement)
+                ? toLocalPoint(
+                    getOutlineAvoidingPoint(
+                      multiElement,
+                      pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+                      multiElement.points.length - 1,
+                      this.scene,
+                      this.state.zoom,
+                      pointFrom<GlobalPoint>(
+                        multiElement.x + lastCommittedX + dxFromLastCommitted,
+                        multiElement.y + lastCommittedY + dyFromLastCommitted,
+                      ),
+                    ),
+                    multiElement,
+                  )
+                : pointFrom<LocalPoint>(
+                    lastCommittedX + dxFromLastCommitted,
+                    lastCommittedY + dyFromLastCommitted,
                   ),
-                ),
-                multiElement,
-              ),
             ],
           },
           false,
@@ -8711,20 +8716,25 @@ class App extends React.Component<AppProps, AppState> {
               {
                 points: [
                   ...points,
-                  toLocalPoint(
-                    getOutlineAvoidingPoint(
-                      newElement,
-                      pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
-                      newElement.points.length - 1,
-                      this.scene,
-                      this.state.zoom,
-                      pointFrom<GlobalPoint>(
-                        newElement.x + dx,
-                        newElement.y + dy,
-                      ),
-                    ),
-                    newElement,
-                  ),
+                  isArrowElement(newElement)
+                    ? toLocalPoint(
+                        getOutlineAvoidingPoint(
+                          newElement,
+                          pointFrom<GlobalPoint>(
+                            pointerCoords.x,
+                            pointerCoords.y,
+                          ),
+                          newElement.points.length - 1,
+                          this.scene,
+                          this.state.zoom,
+                          pointFrom<GlobalPoint>(
+                            newElement.x + dx,
+                            newElement.y + dy,
+                          ),
+                        ),
+                        newElement,
+                      )
+                    : pointFrom<LocalPoint>(dx, dy),
                 ],
               },
               false,
@@ -8738,20 +8748,25 @@ class App extends React.Component<AppProps, AppState> {
               {
                 points: [
                   ...points.slice(0, -1),
-                  toLocalPoint(
-                    getOutlineAvoidingPoint(
-                      newElement,
-                      pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
-                      newElement.points.length - 1,
-                      this.scene,
-                      this.state.zoom,
-                      pointFrom<GlobalPoint>(
-                        newElement.x + dx,
-                        newElement.y + dy,
-                      ),
-                    ),
-                    newElement,
-                  ),
+                  isArrowElement(newElement)
+                    ? toLocalPoint(
+                        getOutlineAvoidingPoint(
+                          newElement,
+                          pointFrom<GlobalPoint>(
+                            pointerCoords.x,
+                            pointerCoords.y,
+                          ),
+                          newElement.points.length - 1,
+                          this.scene,
+                          this.state.zoom,
+                          pointFrom<GlobalPoint>(
+                            newElement.x + dx,
+                            newElement.y + dy,
+                          ),
+                        ),
+                        newElement,
+                      )
+                    : pointFrom<LocalPoint>(dx, dy),
                 ],
               },
               false,

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -427,7 +427,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id1",
+      "id": "id40",
       "type": "text",
     },
   ],
@@ -435,7 +435,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id3",
+    "elementId": "id42",
     "focus": -0,
     "gap": 5,
   },
@@ -465,7 +465,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id2",
+    "elementId": "id41",
     "focus": 0,
     "gap": 5,
   },
@@ -488,7 +488,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id0",
+  "containerId": "id39",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -529,7 +529,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id0",
+      "id": "id39",
       "type": "arrow",
     },
   ],
@@ -566,7 +566,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id0",
+      "id": "id39",
       "type": "arrow",
     },
   ],
@@ -603,7 +603,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id1",
+      "id": "id44",
       "type": "text",
     },
   ],
@@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id3",
+    "elementId": "id46",
     "focus": -0,
     "gap": 5,
   },
@@ -641,7 +641,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id2",
+    "elementId": "id45",
     "focus": 0,
     "gap": 5,
   },
@@ -664,7 +664,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id0",
+  "containerId": "id43",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -706,7 +706,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id0",
+      "id": "id43",
       "type": "arrow",
     },
   ],
@@ -752,7 +752,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id0",
+      "id": "id43",
       "type": "arrow",
     },
   ],