@tldraw/editor 3.9.0-canary.d799df28e99e → 3.9.0-canary.d81de7fd0bea

package/dist-esm/lib/editor/Editor.mjs

@@ -92,6 +92,7 @@ import {
   structuredClone,
   uniqueId
 } from "@tldraw/utils";
+import { Number } from "core-js";
 import EventEmitter from "eventemitter3";
 import {
   getSnapshot,
@@ -122,7 +123,7 @@ import { Vec } from "../primitives/Vec.mjs";
 import { EASINGS } from "../primitives/easings.mjs";
 import { Group2d } from "../primitives/geometry/Group2d.mjs";
 import { intersectPolygonPolygon } from "../primitives/intersect.mjs";
-import { PI2, approximately, areAnglesCompatible, clamp, pointInPolygon } from "../primitives/utils.mjs";
+import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from "../primitives/utils.mjs";
 import { SharedStyleMap } from "../utils/SharedStylesMap.mjs";
 import { dataUrlToFile } from "../utils/assets.mjs";
 import { debugFlags } from "../utils/debug-flags.mjs";
@@ -4315,27 +4316,28 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     });
     return this;
   }
+  // Gets a shape partial that includes life cycle changes: on translate start, on translate, on translate end
   getChangesToTranslateShape(initialShape, newShapeCoords) {
     let workingShape = initialShape;
     const util = this.getShapeUtil(initialShape);
-    workingShape = applyPartialToRecordWithProps(
-      workingShape,
-      util.onTranslateStart?.(workingShape) ?? void 0
-    );
+    const afterTranslateStart = util.onTranslateStart?.(workingShape);
+    if (afterTranslateStart) {
+      workingShape = applyPartialToRecordWithProps(workingShape, afterTranslateStart);
+    }
     workingShape = applyPartialToRecordWithProps(workingShape, {
       id: initialShape.id,
       type: initialShape.type,
       x: newShapeCoords.x,
       y: newShapeCoords.y
     });
-    workingShape = applyPartialToRecordWithProps(
-      workingShape,
-      util.onTranslate?.(initialShape, workingShape) ?? void 0
-    );
-    workingShape = applyPartialToRecordWithProps(
-      workingShape,
-      util.onTranslateEnd?.(initialShape, workingShape) ?? void 0
-    );
+    const afterTranslate = util.onTranslate?.(initialShape, workingShape);
+    if (afterTranslate) {
+      workingShape = applyPartialToRecordWithProps(workingShape, afterTranslate);
+    }
+    const afterTranslateEnd = util.onTranslateEnd?.(initialShape, workingShape);
+    if (afterTranslateEnd) {
+      workingShape = applyPartialToRecordWithProps(workingShape, afterTranslateEnd);
+    }
     return workingShape;
   }
   /**
@@ -4642,6 +4644,30 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     if (changes) this.updateShapes(changes);
     return this;
   }
+  /**
+   * @internal
+   */
+  collectShapesViaArrowBindings(info) {
+    const { initialShapes, resultShapes, resultBounds, bindings, visited } = info;
+    for (const binding of bindings) {
+      for (const id of [binding.fromId, binding.toId]) {
+        if (!visited.has(id)) {
+          const aligningShape = initialShapes.find((s) => s.id === id);
+          if (aligningShape && !visited.has(aligningShape.id)) {
+            visited.add(aligningShape.id);
+            const shapePageBounds = this.getShapePageBounds(aligningShape);
+            if (!shapePageBounds) continue;
+            resultShapes.push(aligningShape);
+            resultBounds.push(shapePageBounds);
+            this.collectShapesViaArrowBindings({
+              ...info,
+              bindings: this.getBindingsInvolvingShape(aligningShape, "arrow")
+            });
+          }
+        }
+      }
+    }
+  }
   /**
    * Flip shape positions.
    *
@@ -4657,35 +4683,52 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   flipShapes(shapes, operation) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    let shapesToFlip = compact(ids.map((id) => this.getShape(id)));
+    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const shapesToFlipFirstPass = compact(ids.map((id) => this.getShape(id)));
+    for (const shape of shapesToFlipFirstPass) {
+      if (this.isShapeOfType(shape, "group")) {
+        const childrenOfGroups = compact(
+          this.getSortedChildIdsForParent(shape.id).map((id) => this.getShape(id))
+        );
+        shapesToFlipFirstPass.push(...childrenOfGroups);
+      }
+    }
+    const shapesToFlip = [];
+    const allBounds = [];
+    for (const shape of shapesToFlipFirstPass) {
+      const util = this.getShapeUtil(shape);
+      if (!util.canBeLaidOut(shape, {
+        type: "flip",
+        shapes: shapesToFlipFirstPass
+      })) {
+        continue;
+      }
+      const pageBounds = this.getShapePageBounds(shape);
+      const localBounds = this.getShapeGeometry(shape).bounds;
+      const pageTransform = this.getShapePageTransform(shape.id);
+      if (!(pageBounds && localBounds && pageTransform)) continue;
+      shapesToFlip.push({
+        shape,
+        localBounds,
+        pageTransform,
+        isAspectRatioLocked: util.isAspectRatioLocked(shape)
+      });
+      allBounds.push(pageBounds);
+    }
     if (!shapesToFlip.length) return this;
-    shapesToFlip = compact(
-      shapesToFlip.map((shape) => {
-        if (this.isShapeOfType(shape, "group")) {
-          return this.getSortedChildIdsForParent(shape.id).map((id) => this.getShape(id));
-        }
-        return shape;
-      }).flat()
-    );
-    const scaleOriginPage = Box.Common(
-      compact(shapesToFlip.map((id) => this.getShapePageBounds(id)))
-    ).center;
+    const scaleOriginPage = Box.Common(allBounds).center;
     this.run(() => {
-      for (const shape of shapesToFlip) {
-        const bounds = this.getShapeGeometry(shape).bounds;
-        const initialPageTransform = this.getShapePageTransform(shape.id);
-        if (!initialPageTransform) continue;
+      for (const { shape, localBounds, pageTransform, isAspectRatioLocked } of shapesToFlip) {
         this.resizeShape(
           shape.id,
           { x: operation === "horizontal" ? -1 : 1, y: operation === "vertical" ? -1 : 1 },
           {
-            initialBounds: bounds,
-            initialPageTransform,
+            initialBounds: localBounds,
+            initialPageTransform: pageTransform,
             initialShape: shape,
+            isAspectRatioLocked,
             mode: "scale_shape",
-            isAspectRatioLocked: this.getShapeUtil(shape).isAspectRatioLocked(shape),
             scaleOrigin: scaleOriginPage,
             scaleAxisRotation: 0
           }
@@ -4712,15 +4755,40 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   stackShapes(shapes, operation, gap) {
     const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    const shapesToStack = ids.map((id) => this.getShape(id)).filter((shape) => {
-      if (!shape) return false;
-      return this.getShapeUtil(shape).canBeLaidOut(shape);
-    });
-    const len = shapesToStack.length;
+    const shapesToStackFirstPass = compact(ids.map((id) => this.getShape(id)));
+    const shapeClustersToStack = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of shapesToStackFirstPass) {
+      if (visited.has(shape.id)) continue;
+      visited.add(shape.id);
+      const shapePageBounds = this.getShapePageBounds(shape);
+      if (!shapePageBounds) continue;
+      if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
+        type: "stack",
+        shapes: shapesToStackFirstPass
+      })) {
+        continue;
+      }
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: shapesToStackFirstPass,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      shapeClustersToStack.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds
+      });
+      allBounds.push(commonPageBounds);
+    }
+    const len = shapeClustersToStack.length;
     if (gap === 0 && len < 3 || len < 2) return this;
-    const pageBounds = Object.fromEntries(
-      shapesToStack.map((shape) => [shape.id, this.getShapePageBounds(shape)])
-    );
     let val;
     let min;
     let max;
@@ -4736,57 +4804,55 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       max = "maxY";
       dim = "height";
     }
-    let shapeGap;
+    let shapeGap = 0;
     if (gap === 0) {
-      const gaps = [];
-      shapesToStack.sort((a, b) => pageBounds[a.id][min] - pageBounds[b.id][min]);
+      const gaps = {};
+      shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min]);
       for (let i = 0; i < len - 1; i++) {
-        const shape = shapesToStack[i];
-        const nextShape = shapesToStack[i + 1];
-        const bounds = pageBounds[shape.id];
-        const nextBounds = pageBounds[nextShape.id];
-        const gap2 = nextBounds[min] - bounds[max];
-        const current = gaps.find((g) => g.gap === gap2);
-        if (current) {
-          current.count++;
-        } else {
-          gaps.push({ gap: gap2, count: 1 });
+        const currCluster = shapeClustersToStack[i];
+        const nextCluster = shapeClustersToStack[i + 1];
+        const gap2 = nextCluster.pageBounds[min] - currCluster.pageBounds[max];
+        if (!gaps[gap2]) {
+          gaps[gap2] = 0;
         }
+        gaps[gap2]++;
       }
-      let maxCount = 0;
-      gaps.forEach((g) => {
-        if (g.count > maxCount) {
-          maxCount = g.count;
-          shapeGap = g.gap;
+      let maxCount = 1;
+      for (const [gap2, count] of Object.entries(gaps)) {
+        if (count > maxCount) {
+          maxCount = count;
+          shapeGap = parseFloat(gap2);
         }
-      });
+      }
       if (maxCount === 1) {
-        shapeGap = Math.max(0, gaps.reduce((a, c) => a + c.gap * c.count, 0) / (len - 1));
+        let totalCount = 0;
+        for (const [gap2, count] of Object.entries(gaps)) {
+          shapeGap += parseFloat(gap2) * count;
+          totalCount += count;
+        }
+        shapeGap /= totalCount;
       }
     } else {
       shapeGap = gap;
     }
     const changes = [];
-    let v = pageBounds[shapesToStack[0].id][max];
-    shapesToStack.forEach((shape, i) => {
-      if (i === 0) return;
-      const delta = { x: 0, y: 0 };
-      delta[val] = v + shapeGap - pageBounds[shape.id][val];
-      const parent = this.getShapeParent(shape);
-      const localDelta = parent ? Vec.Rot(delta, -this.getShapePageTransform(parent).decompose().rotation) : delta;
-      const translateStartChanges = this.getShapeUtil(shape).onTranslateStart?.(shape);
-      changes.push(
-        translateStartChanges ? {
-          ...translateStartChanges,
-          [val]: shape[val] + localDelta[val]
-        } : {
-          id: shape.id,
-          type: shape.type,
-          [val]: shape[val] + localDelta[val]
+    let v = shapeClustersToStack[0].pageBounds[max];
+    for (let i = 1; i < shapeClustersToStack.length; i++) {
+      const { shapes: shapes2, pageBounds } = shapeClustersToStack[i];
+      const delta = new Vec();
+      delta[val] = v + shapeGap - pageBounds[val];
+      for (const shape of shapes2) {
+        const shapeDelta = delta.clone();
+        const parent = this.getShapeParent(shape);
+        if (parent) {
+          const parentTransform = this.getShapePageTransform(parent);
+          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
         }
-      );
-      v += pageBounds[shape.id][dim] + shapeGap;
-    });
+        shapeDelta.add(shape);
+        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+      }
+      v += pageBounds[dim] + shapeGap;
+    }
     this.updateShapes(changes);
     return this;
   }
@@ -4804,91 +4870,101 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @param gap - The padding to apply to the packed shapes. Defaults to 16.
    */
   packShapes(shapes, gap) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    if (ids.length < 2) return this;
-    const shapesToPack = ids.map((id) => this.getShape(id)).filter((shape2) => {
-      if (!shape2) return false;
-      return this.getShapeUtil(shape2).canBeLaidOut(shape2);
-    });
-    const shapePageBounds = {};
-    const nextShapePageBounds = {};
-    let shape, bounds, area = 0;
-    for (let i = 0; i < shapesToPack.length; i++) {
-      shape = shapesToPack[i];
-      bounds = this.getShapePageBounds(shape);
-      shapePageBounds[shape.id] = bounds;
-      nextShapePageBounds[shape.id] = bounds.clone();
-      area += bounds.width * bounds.height;
-    }
-    const commonBounds = Box.Common(compact(Object.values(shapePageBounds)));
+    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const shapesToPackFirstPass = compact(ids.map((id) => this.getShape(id)));
+    const shapeClustersToPack = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of shapesToPackFirstPass) {
+      if (visited.has(shape.id)) continue;
+      visited.add(shape.id);
+      const shapePageBounds = this.getShapePageBounds(shape);
+      if (!shapePageBounds) continue;
+      if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
+        type: "pack",
+        shapes: shapesToPackFirstPass
+      })) {
+        continue;
+      }
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: shapesToPackFirstPass,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      shapeClustersToPack.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds,
+        nextPageBounds: commonPageBounds.clone()
+      });
+      allBounds.push(commonPageBounds);
+    }
+    if (shapeClustersToPack.length < 2) return this;
+    let area = 0;
+    for (const { pageBounds } of shapeClustersToPack) {
+      area += pageBounds.width * pageBounds.height;
+    }
+    const commonBounds = Box.Common(allBounds);
     const maxWidth = commonBounds.width;
-    shapesToPack.sort((a, b) => shapePageBounds[b.id].height - shapePageBounds[a.id].height);
+    shapeClustersToPack.sort((a, b) => a.pageBounds.width - b.pageBounds.width).sort((a, b) => a.pageBounds.height - b.pageBounds.height);
     const startWidth = Math.max(Math.ceil(Math.sqrt(area / 0.95)), maxWidth);
     const spaces = [new Box(commonBounds.x, commonBounds.y, startWidth, Infinity)];
     let width = 0;
     let height = 0;
     let space;
     let last2;
-    for (let i = 0; i < shapesToPack.length; i++) {
-      shape = shapesToPack[i];
-      bounds = nextShapePageBounds[shape.id];
-      for (let i2 = spaces.length - 1; i2 >= 0; i2--) {
-        space = spaces[i2];
-        if (bounds.width > space.width || bounds.height > space.height) continue;
-        bounds.x = space.x;
-        bounds.y = space.y;
-        height = Math.max(height, bounds.maxY);
-        width = Math.max(width, bounds.maxX);
-        if (bounds.width === space.width && bounds.height === space.height) {
+    for (const { nextPageBounds } of shapeClustersToPack) {
+      for (let i = spaces.length - 1; i >= 0; i--) {
+        space = spaces[i];
+        if (nextPageBounds.width > space.width || nextPageBounds.height > space.height) continue;
+        nextPageBounds.x = space.x;
+        nextPageBounds.y = space.y;
+        height = Math.max(height, nextPageBounds.maxY);
+        width = Math.max(width, nextPageBounds.maxX);
+        if (nextPageBounds.width === space.width && nextPageBounds.height === space.height) {
           last2 = spaces.pop();
-          if (i2 < spaces.length) spaces[i2] = last2;
-        } else if (bounds.height === space.height) {
-          space.x += bounds.width + gap;
-          space.width -= bounds.width + gap;
-        } else if (bounds.width === space.width) {
-          space.y += bounds.height + gap;
-          space.height -= bounds.height + gap;
+          if (i < spaces.length) spaces[i] = last2;
+        } else if (nextPageBounds.height === space.height) {
+          space.x += nextPageBounds.width + gap;
+          space.width -= nextPageBounds.width + gap;
+        } else if (nextPageBounds.width === space.width) {
+          space.y += nextPageBounds.height + gap;
+          space.height -= nextPageBounds.height + gap;
         } else {
           spaces.push(
             new Box(
-              space.x + (bounds.width + gap),
+              space.x + (nextPageBounds.width + gap),
               space.y,
-              space.width - (bounds.width + gap),
-              bounds.height
+              space.width - (nextPageBounds.width + gap),
+              nextPageBounds.height
             )
           );
-          space.y += bounds.height + gap;
-          space.height -= bounds.height + gap;
+          space.y += nextPageBounds.height + gap;
+          space.height -= nextPageBounds.height + gap;
         }
         break;
       }
     }
-    const commonAfter = Box.Common(Object.values(nextShapePageBounds));
+    const commonAfter = Box.Common(shapeClustersToPack.map((s) => s.nextPageBounds));
     const centerDelta = Vec.Sub(commonBounds.center, commonAfter.center);
-    let nextBounds;
     const changes = [];
-    for (let i = 0; i < shapesToPack.length; i++) {
-      shape = shapesToPack[i];
-      bounds = shapePageBounds[shape.id];
-      nextBounds = nextShapePageBounds[shape.id];
-      const delta = Vec.Sub(nextBounds.point, bounds.point).add(centerDelta);
-      const parentTransform = this.getShapeParentTransform(shape);
-      if (parentTransform) delta.rot(-parentTransform.rotation());
-      const change = {
-        id: shape.id,
-        type: shape.type,
-        x: shape.x + delta.x,
-        y: shape.y + delta.y
-      };
-      const translateStartChange = this.getShapeUtil(shape).onTranslateStart?.({
-        ...shape,
-        ...change
-      });
-      if (translateStartChange) {
-        changes.push({ ...change, ...translateStartChange });
-      } else {
-        changes.push(change);
+    for (const { shapes: shapes2, pageBounds, nextPageBounds } of shapeClustersToPack) {
+      const delta = Vec.Sub(nextPageBounds.point, pageBounds.point).add(centerDelta);
+      for (const shape of shapes2) {
+        const shapeDelta = delta.clone();
+        const parent = this.getShapeParent(shape);
+        if (parent) {
+          const parentTransform = this.getShapeParentTransform(shape);
+          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+        }
+        shapeDelta.add(shape);
+        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
       }
     }
     if (changes.length) {
@@ -4911,19 +4987,45 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   alignShapes(shapes, operation) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    if (ids.length < 2) return this;
-    const shapesToAlign = compact(ids.map((id) => this.getShape(id)));
-    const shapePageBounds = Object.fromEntries(
-      shapesToAlign.map((shape) => [shape.id, this.getShapePageBounds(shape)])
-    );
-    const commonBounds = Box.Common(compact(Object.values(shapePageBounds)));
+    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const shapesToAlignFirstPass = compact(ids.map((id) => this.getShape(id)));
+    const shapeClustersToAlign = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of shapesToAlignFirstPass) {
+      if (visited.has(shape.id)) continue;
+      visited.add(shape.id);
+      const shapePageBounds = this.getShapePageBounds(shape);
+      if (!shapePageBounds) continue;
+      if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
+        type: "align",
+        shapes: shapesToAlignFirstPass
+      })) {
+        continue;
+      }
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: shapesToAlignFirstPass,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      shapeClustersToAlign.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds
+      });
+      allBounds.push(commonPageBounds);
+    }
+    if (shapeClustersToAlign.length < 2) return this;
+    const commonBounds = Box.Common(allBounds);
     const changes = [];
-    shapesToAlign.forEach((shape) => {
-      const pageBounds = shapePageBounds[shape.id];
-      if (!pageBounds) return;
-      const delta = { x: 0, y: 0 };
+    shapeClustersToAlign.forEach(({ shapes: shapes2, pageBounds }) => {
+      const delta = new Vec();
       switch (operation) {
         case "top": {
           delta.y = commonBounds.minY - pageBounds.minY;
@@ -4950,9 +5052,16 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
           break;
         }
       }
-      const parent = this.getShapeParent(shape);
-      const localDelta = parent ? Vec.Rot(delta, -this.getShapePageTransform(parent).decompose().rotation) : delta;
-      changes.push(this.getChangesToTranslateShape(shape, Vec.Add(shape, localDelta)));
+      for (const shape of shapes2) {
+        const shapeDelta = delta.clone();
+        const parent = this.getShapeParent(shape);
+        if (parent) {
+          const parentTransform = this.getShapePageTransform(parent);
+          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+        }
+        shapeDelta.add(shape);
+        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+      }
     });
     this.updateShapes(changes);
     return this;
@@ -4972,47 +5081,95 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @public
    */
   distributeShapes(shapes, operation) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    if (ids.length < 3) return this;
-    const len = ids.length;
-    const shapesToDistribute = compact(ids.map((id) => this.getShape(id)));
-    const pageBounds = Object.fromEntries(
-      shapesToDistribute.map((shape) => [shape.id, this.getShapePageBounds(shape)])
-    );
+    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const shapesToDistributeFirstPass = compact(ids.map((id) => this.getShape(id)));
+    const shapeClustersToDistribute = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of shapesToDistributeFirstPass) {
+      if (visited.has(shape.id)) continue;
+      visited.add(shape.id);
+      const shapePageBounds = this.getShapePageBounds(shape);
+      if (!shapePageBounds) continue;
+      if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
+        type: "distribute",
+        shapes: shapesToDistributeFirstPass
+      })) {
+        continue;
+      }
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: shapesToDistributeFirstPass,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      shapeClustersToDistribute.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds
+      });
+      allBounds.push(commonPageBounds);
+    }
+    if (shapeClustersToDistribute.length < 3) return this;
     let val;
     let min;
     let max;
-    let mid;
     let dim;
     if (operation === "horizontal") {
       val = "x";
       min = "minX";
       max = "maxX";
-      mid = "midX";
       dim = "width";
     } else {
       val = "y";
       min = "minY";
       max = "maxY";
-      mid = "midY";
       dim = "height";
     }
     const changes = [];
-    const first = shapesToDistribute.sort(
-      (a, b) => pageBounds[a.id][min] - pageBounds[b.id][min]
-    )[0];
-    const last2 = shapesToDistribute.sort((a, b) => pageBounds[b.id][max] - pageBounds[a.id][max])[0];
-    const midFirst = pageBounds[first.id][mid];
-    const step = (pageBounds[last2.id][mid] - midFirst) / (len - 1);
-    const v = midFirst + step;
-    shapesToDistribute.filter((shape) => shape !== first && shape !== last2).sort((a, b) => pageBounds[a.id][mid] - pageBounds[b.id][mid]).forEach((shape, i) => {
-      const delta = { x: 0, y: 0 };
-      delta[val] = v + step * i - pageBounds[shape.id][dim] / 2 - pageBounds[shape.id][val];
-      const parent = this.getShapeParent(shape);
-      const localDelta = parent ? Vec.Rot(delta, -this.getShapePageTransform(parent).rotation()) : delta;
-      changes.push(this.getChangesToTranslateShape(shape, Vec.Add(shape, localDelta)));
+    const first = shapeClustersToDistribute.sort((a, b) => a.pageBounds[min] - b.pageBounds[min])[0];
+    const last2 = shapeClustersToDistribute.sort((a, b) => b.pageBounds[max] - a.pageBounds[max])[0];
+    if (first === last2) {
+      const excludedShapeIds = new Set(first.shapes.map((s) => s.id));
+      return this.distributeShapes(
+        ids.filter((id) => !excludedShapeIds.has(id)),
+        operation
+      );
+    }
+    const shapeClustersToMove = shapeClustersToDistribute.filter((shape) => shape !== first && shape !== last2).sort((a, b) => {
+      if (a.pageBounds[min] === b.pageBounds[min]) {
+        return a.shapes[0].id < b.shapes[0].id ? -1 : 1;
+      }
+      return a.pageBounds[min] - b.pageBounds[min];
     });
+    const maxFirst = first.pageBounds[max];
+    const range = last2.pageBounds[min] - maxFirst;
+    const summedShapeDimensions = shapeClustersToMove.reduce((acc, s) => acc + s.pageBounds[dim], 0);
+    const gap = (range - summedShapeDimensions) / (shapeClustersToMove.length + 1);
+    for (let v = maxFirst + gap, i = 0; i < shapeClustersToMove.length; i++) {
+      const { shapes: shapes2, pageBounds } = shapeClustersToMove[i];
+      const delta = new Vec();
+      delta[val] = v - pageBounds[val];
+      if (v + pageBounds[dim] > last2.pageBounds[max] - 1) {
+        delta[val] = last2.pageBounds[max] - pageBounds[max] - 1;
+      }
+      for (const shape of shapes2) {
+        const shapeDelta = delta.clone();
+        const parent = this.getShapeParent(shape);
+        if (parent) {
+          const parentTransform = this.getShapePageTransform(parent);
+          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+        }
+        shapeDelta.add(shape);
+        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+      }
+      v += pageBounds[dim] + gap;
+    }
     this.updateShapes(changes);
     return this;
   }
@@ -5033,59 +5190,78 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   stretchShapes(shapes, operation) {
     const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    if (ids.length < 2) return this;
-    const shapesToStretch = compact(ids.map((id) => this.getShape(id)));
-    const shapeBounds = Object.fromEntries(ids.map((id) => [id, this.getShapeGeometry(id).bounds]));
-    const shapePageBounds = Object.fromEntries(ids.map((id) => [id, this.getShapePageBounds(id)]));
-    const commonBounds = Box.Common(compact(Object.values(shapePageBounds)));
-    switch (operation) {
-      case "vertical": {
-        this.run(() => {
-          for (const shape of shapesToStretch) {
-            const pageRotation = this.getShapePageTransform(shape).rotation();
-            if (pageRotation % PI2) continue;
-            const bounds = shapeBounds[shape.id];
-            const pageBounds = shapePageBounds[shape.id];
-            const localOffset = new Vec(0, commonBounds.minY - pageBounds.minY);
-            const parentTransform = this.getShapeParentTransform(shape);
-            if (parentTransform) localOffset.rot(-parentTransform.rotation());
-            const { x, y } = Vec.Add(localOffset, shape);
-            this.updateShapes([{ id: shape.id, type: shape.type, x, y }]);
-            const scale = new Vec(1, commonBounds.height / pageBounds.height);
-            this.resizeShape(shape.id, scale, {
-              initialBounds: bounds,
-              scaleOrigin: new Vec(pageBounds.center.x, commonBounds.minY),
-              isAspectRatioLocked: this.getShapeUtil(shape).isAspectRatioLocked(shape),
-              scaleAxisRotation: 0
-            });
-          }
-        });
-        break;
-      }
-      case "horizontal": {
-        this.run(() => {
-          for (const shape of shapesToStretch) {
-            const bounds = shapeBounds[shape.id];
-            const pageBounds = shapePageBounds[shape.id];
-            const pageRotation = this.getShapePageTransform(shape).rotation();
-            if (pageRotation % PI2) continue;
-            const localOffset = new Vec(commonBounds.minX - pageBounds.minX, 0);
-            const parentTransform = this.getShapeParentTransform(shape);
-            if (parentTransform) localOffset.rot(-parentTransform.rotation());
-            const { x, y } = Vec.Add(localOffset, shape);
-            this.updateShapes([{ id: shape.id, type: shape.type, x, y }]);
-            const scale = new Vec(commonBounds.width / pageBounds.width, 1);
-            this.resizeShape(shape.id, scale, {
-              initialBounds: bounds,
-              scaleOrigin: new Vec(commonBounds.minX, pageBounds.center.y),
-              isAspectRatioLocked: this.getShapeUtil(shape).isAspectRatioLocked(shape),
-              scaleAxisRotation: 0
-            });
-          }
-        });
-        break;
+    const shapesToStretchFirstPass = compact(ids.map((id) => this.getShape(id))).filter(
+      (s) => this.getShapePageTransform(s)?.rotation() % (PI / 2) === 0
+    );
+    const shapeClustersToStretch = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of shapesToStretchFirstPass) {
+      if (visited.has(shape.id)) continue;
+      visited.add(shape.id);
+      const shapePageBounds = this.getShapePageBounds(shape);
+      if (!shapePageBounds) continue;
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      if (!this.getShapeUtil(shape).canBeLaidOut?.(shape, {
+        type: "stretch",
+        shapes: shapesToStretchFirstPass
+      })) {
+        continue;
       }
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: shapesToStretchFirstPass,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      shapeClustersToStretch.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds
+      });
+      allBounds.push(commonPageBounds);
+    }
+    if (shapeClustersToStretch.length < 2) return this;
+    const commonBounds = Box.Common(allBounds);
+    let val;
+    let min;
+    let dim;
+    if (operation === "horizontal") {
+      val = "x";
+      min = "minX";
+      dim = "width";
+    } else {
+      val = "y";
+      min = "minY";
+      dim = "height";
     }
+    this.run(() => {
+      shapeClustersToStretch.forEach(({ shapes: shapes2, pageBounds }) => {
+        const localOffset = new Vec();
+        localOffset[val] = commonBounds[min] - pageBounds[min];
+        const scaleOrigin = pageBounds.center.clone();
+        scaleOrigin[val] = commonBounds[min];
+        const scale = new Vec(1, 1);
+        scale[val] = commonBounds[dim] / pageBounds[dim];
+        for (const shape of shapes2) {
+          const shapeLocalOffset = localOffset.clone();
+          const parentTransform = this.getShapeParentTransform(shape);
+          if (parentTransform) localOffset.rot(-parentTransform.rotation());
+          shapeLocalOffset.add(shape);
+          const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
+          this.updateShape(changes);
+          this.resizeShape(shape.id, scale, {
+            initialBounds: this.getShapeGeometry(shape).bounds,
+            scaleOrigin,
+            isAspectRatioLocked: this.getShapeUtil(shape).isAspectRatioLocked(shape),
+            scaleAxisRotation: 0
+          });
+        }
+      });
+    });
     return this;
   }
   /**