Render focus point in debug mode

excalidraw-app/components/DebugCanvas.tsx

@@ -8,7 +8,7 @@ import {
   getNormalizedCanvasDimensions,
 } from "@excalidraw/excalidraw/renderer/helpers";
 import { type AppState } from "@excalidraw/excalidraw/types";
-import { arrayToMap, invariant, throttleRAF } from "@excalidraw/common";
+import { arrayToMap, throttleRAF } from "@excalidraw/common";
 import { useCallback } from "react";
 
 import {
@@ -181,12 +181,13 @@ const renderBindings = (
 
     if (isArrowElement(element)) {
       if (element.startBinding) {
-        invariant(
+        if (
-          elementsMap
+          !elementsMap
             .get(element.startBinding.elementId)
-            ?.boundElements?.find((e) => e.id === element.id),
+            ?.boundElements?.find((e) => e.id === element.id)
-          "Missing record in boundElements for arrow",
+        ) {
-        );
+          return;
+        }
 
         _renderBinding(
           context,
@@ -200,6 +201,13 @@ const renderBindings = (
       }
 
       if (element.endBinding) {
+        if (
+          !elementsMap
+            .get(element.endBinding.elementId)
+            ?.boundElements?.find((e) => e.id === element.id)
+        ) {
+          return;
+        }
         _renderBinding(
           context,
           element.endBinding,

packages/element/src/binding.ts

@@ -1,8 +1,10 @@
 import {
   KEYS,
   arrayToMap,
+  debugDrawPoint,
   invariant,
   isAlwaysInsideBinding,
+  isDevEnv,
   tupleToCoors,
 } from "@excalidraw/common";
 
@@ -588,7 +590,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
 
   // Handle new arrow creation separately, as it is special
   if (opts?.newArrow) {
-    return bindingStrategyForNewSimpleArrowEndpointDragging(
+    const { start, end } = bindingStrategyForNewSimpleArrowEndpointDragging(
       arrow,
       draggingPoints,
       elementsMap,
@@ -600,6 +602,17 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       appState,
       globalBindMode,
     );
+
+    if (isDevEnv()) {
+      if (start?.focusPoint) {
+        debugDrawPoint(start.focusPoint);
+      }
+      if (end?.focusPoint) {
+        debugDrawPoint(end.focusPoint);
+      }
+    }
+
+    return { start, end };
   }
 
   // Only the start point is dragged
@@ -621,6 +634,15 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       { appState },
     );
 
+    if (isDevEnv()) {
+      if (current?.focusPoint) {
+        debugDrawPoint(current.focusPoint);
+      }
+      if (other?.focusPoint) {
+        debugDrawPoint(other.focusPoint);
+      }
+    }
+
     return { start: current, end: other };
   }
 
@@ -642,6 +664,15 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = (
       { appState },
     );
 
+    if (isDevEnv()) {
+      if (current?.focusPoint) {
+        debugDrawPoint(current.focusPoint);
+      }
+      if (other?.focusPoint) {
+        debugDrawPoint(other.focusPoint);
+      }
+    }
+
     return { start: other, end: current };
   }