fix: align arrows bound to elements https://github.com/excalidraw/excalidraw/issues/8833

packages/excalidraw/align.ts

@@ -3,6 +3,7 @@ import { newElementWith } from "./element/mutateElement";
 import type { BoundingBox } from "./element/bounds";
 import { getCommonBoundingBox } from "./element/bounds";
 import { getMaximumGroups } from "./groups";
+import { getConnectedArrows } from "./element/binding";
 
 export interface Alignment {
   position: "start" | "center" | "end";
@@ -20,19 +21,44 @@ export const alignElements = (
   );
   const selectionBoundingBox = getCommonBoundingBox(selectedElements);
 
-  return groups.flatMap((group) => {
+  // Track all elements that need to be updated
+  const updatedElements: ExcalidrawElement[] = [];
+
+  // Align the non-arrow elements and their connected arrows
+  groups.forEach((group) => {
     const translation = calculateTranslation(
       group,
       selectionBoundingBox,
       alignment,
     );
-    return group.map((element) =>
-      newElementWith(element, {
-        x: element.x + translation.x,
-        y: element.y + translation.y,
-      }),
-    );
+
+    // Update each element in the group
+    group.forEach((element) => {
+      // Add the translated element
+      updatedElements.push(
+        newElementWith(element, {
+          x: element.x + translation.x,
+          y: element.y + translation.y,
+        }),
+      );
+
+      // Get and update connected arrows
+      const connectedArrows = getConnectedArrows(element, elementsMap);
+      connectedArrows.forEach((arrow) => {
+        // Only update arrow if not already processed
+        if (!updatedElements.some((el) => el.id === arrow.id)) {
+          updatedElements.push(
+            newElementWith(arrow, {
+              x: arrow.x + translation.x,
+              y: arrow.y + translation.y,
+            }),
+          );
+        }
+      });
+    });
   });
+
+  return updatedElements;
 };
 
 const calculateTranslation = (

packages/excalidraw/element/binding.ts

@@ -2280,3 +2280,19 @@ export const normalizeFixedPoint = <T extends FixedPoint | null>(
   }
   return fixedPoint as any as T extends null ? null : FixedPoint;
 };
+
+export const getConnectedArrows = (
+  element: ExcalidrawElement,
+  elementsMap: ElementsMap,
+): ExcalidrawElement[] => {
+  const connectedArrows: ExcalidrawElement[] = [];
+
+  element.boundElements?.forEach((binding) => {
+    const boundElement = elementsMap.get(binding.id);
+    if (isArrowElement(boundElement)) {
+      connectedArrows.push(boundElement);
+    }
+  });
+
+  return connectedArrows;
+};