fix: aligning and distributing elements and nested groups while editing a group (#9721)

packages/element/src/distribute.ts

@@ -1,7 +1,9 @@
+import type { AppState } from "@excalidraw/excalidraw/types";
+
 import { getCommonBoundingBox } from "./bounds";
 import { newElementWith } from "./mutateElement";
 
-import { getMaximumGroups } from "./groups";
+import { getSelectedElementsByGroup } from "./groups";
 
 import type { ElementsMap, ExcalidrawElement } from "./types";
 
@@ -14,6 +16,7 @@ export const distributeElements = (
   selectedElements: ExcalidrawElement[],
   elementsMap: ElementsMap,
   distribution: Distribution,
+  appState: Readonly<AppState>,
 ): ExcalidrawElement[] => {
   const [start, mid, end, extent] =
     distribution.axis === "x"
@@ -21,7 +24,11 @@ export const distributeElements = (
       : (["minY", "midY", "maxY", "height"] as const);
 
   const bounds = getCommonBoundingBox(selectedElements);
-  const groups = getMaximumGroups(selectedElements, elementsMap)
+  const groups = getSelectedElementsByGroup(
+    selectedElements,
+    elementsMap,
+    appState,
+  )
     .map((group) => [group, getCommonBoundingBox(group)] as const)
     .sort((a, b) => a[1][mid] - b[1][mid]);