fix: Speculative fixes for arrow invariant failures (#11241)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

packages/element/src/binding.ts

@@ -734,12 +734,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = (
     });
 
   // Handle outside-outside binding to the same element
-  if (otherBinding && otherBinding.elementId === hit?.id) {
+  if (
-    invariant(
+    otherBinding &&
-      !opts?.newArrow || appState.selectedLinearElement?.initialState.origin,
+    otherBinding.elementId === hit?.id &&
-      "appState.selectedLinearElement.initialState.origin must be defined for new arrows",
+    (!opts?.newArrow || appState.selectedLinearElement?.initialState.origin)
-    );
+  ) {
-
     return {
       start: {
         mode: "inside",

packages/element/src/linearElementEditor.ts

@@ -486,7 +486,7 @@ export class LinearElementEditor {
           selectedPointsIndices,
         )}) points(0..${
           element.points.length - 1
-        }) lastClickedPoint(${lastClickedPoint})`,
+        }) lastClickedPoint(${lastClickedPoint}) isElbowArrow: ${elbowed}`,
       );
 
       // Fall back to the actual last point as a last resort.
@@ -2139,13 +2139,13 @@ const pointDraggingUpdates = (
 } => {
   const naiveDraggingPoints = new Map(
     selectedPointsIndices.map((pointIndex) => {
+      // NOTE: Avoid stale point index issue potentially caused by elbow
+      // arrows unpredictably changing the number of points during dragging
+      const point = element.points[pointIndex] ?? element.points.at(-1);
       return [
         pointIndex,
         {
-          point: pointFrom<LocalPoint>(
+          point: pointFrom<LocalPoint>(point[0] + deltaX, point[1] + deltaY),
-            element.points[pointIndex][0] + deltaX,
-            element.points[pointIndex][1] + deltaY,
-          ),
           isDragging: true,
         },
       ];

packages/excalidraw/components/App.tsx

@@ -10408,20 +10408,38 @@ class App extends React.Component<AppProps, AppState> {
           );
 
           let linearElementEditor = this.state.selectedLinearElement;
-          if (!linearElementEditor) {
+
+          if (
+            !linearElementEditor ||
+            linearElementEditor.elementId !== newElement.id
+          ) {
             linearElementEditor = new LinearElementEditor(
               newElement,
               this.scene.getNonDeletedElementsMap(),
             );
+          }
+
+          const lastClickedPointOutOfBounds =
+            linearElementEditor &&
+            (linearElementEditor.initialState.lastClickedPoint < 0 ||
+              linearElementEditor.initialState.lastClickedPoint >=
+                points.length);
+          if (lastClickedPointOutOfBounds) {
+            console.warn(
+              "Last clicked point is out of bounds. Attempting to fix it.",
+            );
             linearElementEditor = {
               ...linearElementEditor,
-              selectedPointsIndices: [1],
+              selectedPointsIndices: [points.length - 1],
               initialState: {
                 ...linearElementEditor.initialState,
-                lastClickedPoint: 1,
+                prevSelectedPointsIndices: null,
+                lastClickedPoint: points.length - 1,
               },
+              hoverPointIndex: points.length - 1,
             };
           }
+
           this.setState({
             newElement,
             ...LinearElementEditor.handlePointDragging(