Start grid point arrow align

packages/element/src/linearElementEditor.ts

@@ -238,14 +238,15 @@ export class LinearElementEditor {
     });
   }
 
-  static getOutlineAvoidingPointOrNull(
+  static getOutlineAvoidingPoint(
     element: NonDeleted<ExcalidrawLinearElement>,
-    coords: { x: number; y: number },
+    coords: GlobalPoint,
     pointIndex: number,
     app: AppClassProperties,
-  ) {
+    fallback?: GlobalPoint,
+  ): GlobalPoint {
     const hoveredElement = getHoveredElementForBinding(
-      coords,
+      { x: coords[0], y: coords[1] },
       app.scene.getNonDeletedElements(),
       app.scene.getNonDeletedElementsMap(),
       app.state.zoom,
@@ -254,11 +255,10 @@ export class LinearElementEditor {
     );
 
     if (hoveredElement) {
-      const p = pointFrom<GlobalPoint>(coords.x, coords.y);
       const newPoints = Array.from(element.points);
       newPoints[pointIndex] = pointFrom<LocalPoint>(
-        p[0] - element.x,
+        coords[0] - element.x,
-        p[1] - element.y,
+        coords[1] - element.y,
       );
 
       return bindPointToSnapToElementOutline(
@@ -272,27 +272,7 @@ export class LinearElementEditor {
       );
     }
 
-    return null;
+    return fallback ?? coords;
-  }
-
-  static getOutlineAvoidingPoint(
-    element: NonDeleted<ExcalidrawLinearElement>,
-    coords: { x: number; y: number },
-    pointIndex: number,
-    app: AppClassProperties,
-  ): GlobalPoint {
-    const p = LinearElementEditor.getOutlineAvoidingPointOrNull(
-      element,
-      coords,
-      pointIndex,
-      app,
-    );
-
-    if (p) {
-      return p;
-    }
-
-    return pointFrom<GlobalPoint>(coords.x, coords.y);
   }
 
   /**
@@ -411,10 +391,10 @@ export class LinearElementEditor {
                 globalNewPointPosition =
                   LinearElementEditor.getOutlineAvoidingPoint(
                     element,
-                    {
+                    pointFrom<GlobalPoint>(
-                      x: element.x + element.points[pointIndex][0] + deltaX,
+                      element.x + element.points[pointIndex][0] + deltaX,
-                      y: element.y + element.points[pointIndex][1] + deltaY,
+                      element.y + element.points[pointIndex][1] + deltaY,
-                    },
+                    ),
                     pointIndex,
                     app,
                   );

packages/excalidraw/components/App.tsx

@@ -5966,32 +5966,26 @@ class App extends React.Component<AppProps, AppState> {
           setCursor(this.interactiveCanvas, CURSOR_TYPE.POINTER);
         }
 
-        const outlineGlobalPoint =
-          LinearElementEditor.getOutlineAvoidingPointOrNull(
-            multiElement,
-            {
-              x: scenePointerX,
-              y: scenePointerY,
-            },
-            multiElement.points.length - 1,
-            this,
-          );
-
-        const nextPoint = outlineGlobalPoint
-          ? pointFrom<LocalPoint>(
-              outlineGlobalPoint[0] - rx,
-              outlineGlobalPoint[1] - ry,
-            )
-          : pointFrom<LocalPoint>(
-              lastCommittedX + dxFromLastCommitted,
-              lastCommittedY + dyFromLastCommitted,
-            );
-
         // update last uncommitted point
         mutateElement(
           multiElement,
           {
-            points: [...points.slice(0, -1), nextPoint],
+            points: [
+              ...points.slice(0, -1),
+              pointTranslate<GlobalPoint, LocalPoint>(
+                LinearElementEditor.getOutlineAvoidingPoint(
+                  multiElement,
+                  pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
+                  multiElement.points.length - 1,
+                  this,
+                  pointFrom<GlobalPoint>(
+                    multiElement.x + lastCommittedX + dxFromLastCommitted,
+                    multiElement.y + lastCommittedY + dyFromLastCommitted,
+                  ),
+                ),
+                vector(-multiElement.x, -multiElement.y),
+              ),
+            ],
           },
           false,
           {
@@ -7802,10 +7796,11 @@ class App extends React.Component<AppProps, AppState> {
           ? [currentItemStartArrowhead, currentItemEndArrowhead]
           : [null, null];
 
-      const element =
+      let element: NonDeleted<ExcalidrawLinearElement>;
-        elementType === "arrow"
+      if (elementType === "arrow") {
-          ? newArrowElement({
+        const arrow: Mutable<NonDeleted<ExcalidrawArrowElement>> =
-              type: elementType,
+          newArrowElement({
+            type: "arrow",
             x: gridX,
             y: gridY,
             strokeColor: this.state.currentItemStrokeColor,
@@ -7827,11 +7822,48 @@ class App extends React.Component<AppProps, AppState> {
             frameId: topLayerFrame ? topLayerFrame.id : null,
             elbowed: this.state.currentItemArrowType === ARROW_TYPE.elbow,
             fixedSegments:
-                this.state.currentItemArrowType === ARROW_TYPE.elbow
+              this.state.currentItemArrowType === ARROW_TYPE.elbow ? [] : null,
-                  ? []
+          });
-                  : null,
+
-            })
+        const hoveredElement = getHoveredElementForBinding(
-          : newLinearElement({
+          { x: gridX, y: gridY },
+          this.scene.getNonDeletedElements(),
+          this.scene.getNonDeletedElementsMap(),
+          this.state.zoom,
+          true,
+          this.state.currentItemArrowType === ARROW_TYPE.elbow,
+        );
+
+        if (hoveredElement) {
+          [arrow.x, arrow.y] =
+            intersectElementWithLineSegment(
+              hoveredElement,
+              lineSegment(
+                pointFrom<GlobalPoint>(gridX, gridY),
+                pointFrom<GlobalPoint>(
+                  gridX,
+                  hoveredElement.y + hoveredElement.height / 2,
+                ),
+              ),
+              2 * FIXED_BINDING_DISTANCE,
+            )[0] ??
+            intersectElementWithLineSegment(
+              hoveredElement,
+              lineSegment(
+                pointFrom<GlobalPoint>(gridX, gridY),
+                pointFrom<GlobalPoint>(
+                  hoveredElement.x + hoveredElement.width / 2,
+                  gridY,
+                ),
+              ),
+              2 * FIXED_BINDING_DISTANCE,
+            )[0] ??
+            pointFrom<GlobalPoint>(gridX, gridY);
+        }
+
+        element = arrow;
+      } else {
+        element = newLinearElement({
           type: elementType,
           x: gridX,
           y: gridY,
@@ -7849,6 +7881,8 @@ class App extends React.Component<AppProps, AppState> {
           locked: false,
           frameId: topLayerFrame ? topLayerFrame.id : null,
         });
+      }
+
       this.setState((prevState) => {
         const nextSelectedElementIds = {
           ...prevState.selectedElementIds,
@@ -8163,12 +8197,6 @@ class App extends React.Component<AppProps, AppState> {
         this.laserTrails.addPointToPath(pointerCoords.x, pointerCoords.y);
       }
 
-      const [gridX, gridY] = getGridPoint(
-        pointerCoords.x,
-        pointerCoords.y,
-        event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
-      );
-
       // for arrows/lines, don't start dragging until a given threshold
       // to ensure we don't create a 2-point arrow by mistake when
       // user clicks mouse in a way that it moves a tiny bit (thus
@@ -8610,6 +8638,11 @@ class App extends React.Component<AppProps, AppState> {
         } else if (isLinearElement(newElement)) {
           pointerDownState.drag.hasOccurred = true;
           const points = newElement.points;
+          const [gridX, gridY] = getGridPoint(
+            pointerCoords.x,
+            pointerCoords.y,
+            event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
+          );
           let dx = gridX - newElement.x;
           let dy = gridY - newElement.y;
 
@@ -8626,7 +8659,22 @@ class App extends React.Component<AppProps, AppState> {
             mutateElement(
               newElement,
               {
-                points: [...points, pointFrom<LocalPoint>(dx, dy)],
+                points: [
+                  ...points,
+                  pointTranslate<GlobalPoint, LocalPoint>(
+                    LinearElementEditor.getOutlineAvoidingPoint(
+                      newElement,
+                      pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
+                      newElement.points.length - 1,
+                      this,
+                      pointFrom<GlobalPoint>(
+                        newElement.x + dx,
+                        newElement.y + dy,
+                      ),
+                    ),
+                    vector(-newElement.x, -newElement.y),
+                  ),
+                ],
               },
               false,
             );
@@ -8634,20 +8682,23 @@ class App extends React.Component<AppProps, AppState> {
             points.length === 2 ||
             (points.length > 1 && isElbowArrow(newElement))
           ) {
-            const globalPoint = LinearElementEditor.getOutlineAvoidingPoint(
-              newElement,
-              { x: newElement.x + dx, y: newElement.y + dy },
-              1,
-              this,
-            );
             mutateElement(
               newElement,
               {
                 points: [
                   ...points.slice(0, -1),
-                  pointFrom<LocalPoint>(
+                  pointTranslate<GlobalPoint, LocalPoint>(
-                    globalPoint[0] - newElement.x,
+                    LinearElementEditor.getOutlineAvoidingPoint(
-                    globalPoint[1] - newElement.y,
+                      newElement,
+                      pointFrom<GlobalPoint>(pointerCoords.x, pointerCoords.y),
+                      newElement.points.length - 1,
+                      this,
+                      pointFrom<GlobalPoint>(
+                        newElement.x + dx,
+                        newElement.y + dy,
+                      ),
+                    ),
+                    vector(-newElement.x, -newElement.y),
                   ),
                 ],
               },