@tldraw/editor 3.9.0-internal.7f0e15f4f7d9 → 3.10.0-canary.d4dfa96478a4

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

@@ -46,15 +46,8 @@ var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var __setMetaKeyTimeout_dec, __setCtrlKeyTimeout_dec, __setAltKeyTimeout_dec, __setShiftKeyTimeout_dec, _getIsReadonly_dec, _getIsFocused_dec, _getSharedOpacity_dec, _getSharedStyles_dec, __getSelectionSharedStyles_dec, __getBindingsIndexCache_dec, _getCurrentPageRenderingShapesSorted_dec, _getCurrentPageShapesSorted_dec, _getCurrentPageShapes_dec, _getCurrentPageBounds_dec, _getCulledShapes_dec, __notVisibleShapes_dec, __getShapeMaskedPageBoundsCache_dec, __getShapeMaskCache_dec, __getShapeClipPathCache_dec, __getShapePageBoundsCache_dec, __getShapePageTransformCache_dec, __getShapeHandlesCache_dec, __getShapeGeometryCache_dec, __getAllAssetsQuery_dec, _getCurrentPageShapeIdsSorted_dec, _getCurrentPageId_dec, _getPages_dec, __getAllPagesQuery_dec, _getRenderingShapes_dec, _getCollaboratorsOnCurrentPage_dec, _getCollaborators_dec, __getCollaboratorsQuery_dec, _getViewportPageBounds_dec, _getViewportScreenCenter_dec, _getViewportScreenBounds_dec, _getZoomLevel_dec, _getCameraForFollowing_dec, _getViewportPageBoundsForFollowing_dec, _getCamera_dec, __unsafe_getCameraId_dec, _getErasingShapes_dec, _getErasingShapeIds_dec, _getHintingShape_dec, _getHintingShapeIds_dec, _getHoveredShape_dec, _getHoveredShapeId_dec, _getRichTextEditor_dec, _getEditingShape_dec, _getEditingShapeId_dec, _getFocusedGroup_dec, _getFocusedGroupId_dec, _getSelectionRotatedScreenBounds_dec, _getSelectionRotatedPageBounds_dec, _getSelectionRotation_dec, _getSelectionPageBounds_dec, _getOnlySelectedShape_dec, _getOnlySelectedShapeId_dec, _getSelectedShapes_dec, _getSelectedShapeIds_dec, __getCurrentPageStateId_dec, _getCurrentPageState_dec, __getPageStatesQuery_dec, _getPageStates_dec, _getIsMenuOpen_dec, _getOpenMenus_dec, _getInstanceState_dec, _getDocumentSettings_dec, _getCurrentToolId_dec, _getCurrentTool_dec, _getPath_dec, _getCanRedo_dec, _getCanUndo_dec, _getIsShapeHiddenCache_dec, _a, _init;
-import {
-  EMPTY_ARRAY,
-  atom,
-  computed,
-  react,
-  transact,
-  unsafe__withoutCapture
-} from "@tldraw/state";
+var __setMetaKeyTimeout_dec, __setCtrlKeyTimeout_dec, __setAltKeyTimeout_dec, __setShiftKeyTimeout_dec, _getIsReadonly_dec, _getIsFocused_dec, _getSharedOpacity_dec, _getSharedStyles_dec, __getSelectionSharedStyles_dec, __getBindingsIndexCache_dec, _getCurrentPageRenderingShapesSorted_dec, _getCurrentPageShapesSorted_dec, _getCurrentPageShapes_dec, _getCurrentPageBounds_dec, _getCulledShapes_dec, __notVisibleShapes_dec, __getShapeMaskedPageBoundsCache_dec, __getShapeMaskCache_dec, __getShapeClipPathCache_dec, __getShapePageBoundsCache_dec, __getShapePageTransformCache_dec, __getShapeHandlesCache_dec, __getAllAssetsQuery_dec, _getCurrentPageShapeIdsSorted_dec, _getCurrentPageId_dec, _getPages_dec, __getAllPagesQuery_dec, _getRenderingShapes_dec, _getCollaboratorsOnCurrentPage_dec, _getCollaborators_dec, __getCollaboratorsQuery_dec, _getViewportPageBounds_dec, _getViewportScreenCenter_dec, _getViewportScreenBounds_dec, _getZoomLevel_dec, _getCameraForFollowing_dec, _getViewportPageBoundsForFollowing_dec, _getCamera_dec, __unsafe_getCameraId_dec, _getErasingShapes_dec, _getErasingShapeIds_dec, _getHintingShape_dec, _getHintingShapeIds_dec, _getHoveredShape_dec, _getHoveredShapeId_dec, _getEditingShape_dec, _getEditingShapeId_dec, _getFocusedGroup_dec, _getFocusedGroupId_dec, _getSelectionRotatedScreenBounds_dec, _getSelectionRotatedPageBounds_dec, _getSelectionRotation_dec, _getSelectionPageBounds_dec, _getOnlySelectedShape_dec, _getOnlySelectedShapeId_dec, _getSelectedShapes_dec, _getSelectedShapeIds_dec, __getCurrentPageStateId_dec, _getCurrentPageState_dec, __getPageStatesQuery_dec, _getPageStates_dec, _getIsMenuOpen_dec, _getOpenMenus_dec, _getInstanceState_dec, _getDocumentSettings_dec, _getCurrentToolId_dec, _getCurrentTool_dec, _getPath_dec, _getCanRedo_dec, _getCanUndo_dec, _getIsShapeHiddenCache_dec, _a, _init;
+import { EMPTY_ARRAY, atom, computed, react, transact, unsafe__withoutCapture } from "@tldraw/state";
 import {
   reverseRecordsDiff
 } from "@tldraw/store";
@@ -99,6 +92,7 @@ import {
   structuredClone,
   uniqueId
 } from "@tldraw/utils";
+import { Number } from "core-js";
 import EventEmitter from "eventemitter3";
 import {
   getSnapshot,
@@ -129,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";
@@ -148,7 +142,6 @@ import { deriveShapeIdsInCurrentPage } from "./derivations/shapeIdsInCurrentPage
 import { ClickManager } from "./managers/ClickManager.mjs";
 import { EdgeScrollManager } from "./managers/EdgeScrollManager.mjs";
 import { FocusManager } from "./managers/FocusManager.mjs";
-import { FontManager } from "./managers/FontManager.mjs";
 import { HistoryManager } from "./managers/HistoryManager.mjs";
 import { ScribbleManager } from "./managers/ScribbleManager.mjs";
 import { SnapManager } from "./managers/SnapManager/SnapManager.mjs";
@@ -156,7 +149,7 @@ import { TextManager } from "./managers/TextManager.mjs";
 import { TickManager } from "./managers/TickManager.mjs";
 import { UserPreferencesManager } from "./managers/UserPreferencesManager.mjs";
 import { RootState } from "./tools/RootState.mjs";
-class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed], _getCanUndo_dec = [computed], _getCanRedo_dec = [computed], _getPath_dec = [computed], _getCurrentTool_dec = [computed], _getCurrentToolId_dec = [computed], _getDocumentSettings_dec = [computed], _getInstanceState_dec = [computed], _getOpenMenus_dec = [computed], _getIsMenuOpen_dec = [computed], _getPageStates_dec = [computed], __getPageStatesQuery_dec = [computed], _getCurrentPageState_dec = [computed], __getCurrentPageStateId_dec = [computed], _getSelectedShapeIds_dec = [computed], _getSelectedShapes_dec = [computed], _getOnlySelectedShapeId_dec = [computed], _getOnlySelectedShape_dec = [computed], _getSelectionPageBounds_dec = [computed], _getSelectionRotation_dec = [computed], _getSelectionRotatedPageBounds_dec = [computed], _getSelectionRotatedScreenBounds_dec = [computed], _getFocusedGroupId_dec = [computed], _getFocusedGroup_dec = [computed], _getEditingShapeId_dec = [computed], _getEditingShape_dec = [computed], _getRichTextEditor_dec = [computed], _getHoveredShapeId_dec = [computed], _getHoveredShape_dec = [computed], _getHintingShapeIds_dec = [computed], _getHintingShape_dec = [computed], _getErasingShapeIds_dec = [computed], _getErasingShapes_dec = [computed], __unsafe_getCameraId_dec = [computed], _getCamera_dec = [computed], _getViewportPageBoundsForFollowing_dec = [computed], _getCameraForFollowing_dec = [computed], _getZoomLevel_dec = [computed], _getViewportScreenBounds_dec = [computed], _getViewportScreenCenter_dec = [computed], _getViewportPageBounds_dec = [computed], __getCollaboratorsQuery_dec = [computed], _getCollaborators_dec = [computed], _getCollaboratorsOnCurrentPage_dec = [computed], _getRenderingShapes_dec = [computed], __getAllPagesQuery_dec = [computed], _getPages_dec = [computed], _getCurrentPageId_dec = [computed], _getCurrentPageShapeIdsSorted_dec = [computed], __getAllAssetsQuery_dec = [computed], __getShapeGeometryCache_dec = [computed], __getShapeHandlesCache_dec = [computed], __getShapePageTransformCache_dec = [computed], __getShapePageBoundsCache_dec = [computed], __getShapeClipPathCache_dec = [computed], __getShapeMaskCache_dec = [computed], __getShapeMaskedPageBoundsCache_dec = [computed], __notVisibleShapes_dec = [computed], _getCulledShapes_dec = [computed], _getCurrentPageBounds_dec = [computed], _getCurrentPageShapes_dec = [computed], _getCurrentPageShapesSorted_dec = [computed], _getCurrentPageRenderingShapesSorted_dec = [computed], __getBindingsIndexCache_dec = [computed], __getSelectionSharedStyles_dec = [computed], _getSharedStyles_dec = [computed({ isEqual: (a, b) => a.equals(b) })], _getSharedOpacity_dec = [computed], _getIsFocused_dec = [computed], _getIsReadonly_dec = [computed], __setShiftKeyTimeout_dec = [bind], __setAltKeyTimeout_dec = [bind], __setCtrlKeyTimeout_dec = [bind], __setMetaKeyTimeout_dec = [bind], _a) {
+class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed], _getCanUndo_dec = [computed], _getCanRedo_dec = [computed], _getPath_dec = [computed], _getCurrentTool_dec = [computed], _getCurrentToolId_dec = [computed], _getDocumentSettings_dec = [computed], _getInstanceState_dec = [computed], _getOpenMenus_dec = [computed], _getIsMenuOpen_dec = [computed], _getPageStates_dec = [computed], __getPageStatesQuery_dec = [computed], _getCurrentPageState_dec = [computed], __getCurrentPageStateId_dec = [computed], _getSelectedShapeIds_dec = [computed], _getSelectedShapes_dec = [computed], _getOnlySelectedShapeId_dec = [computed], _getOnlySelectedShape_dec = [computed], _getSelectionPageBounds_dec = [computed], _getSelectionRotation_dec = [computed], _getSelectionRotatedPageBounds_dec = [computed], _getSelectionRotatedScreenBounds_dec = [computed], _getFocusedGroupId_dec = [computed], _getFocusedGroup_dec = [computed], _getEditingShapeId_dec = [computed], _getEditingShape_dec = [computed], _getHoveredShapeId_dec = [computed], _getHoveredShape_dec = [computed], _getHintingShapeIds_dec = [computed], _getHintingShape_dec = [computed], _getErasingShapeIds_dec = [computed], _getErasingShapes_dec = [computed], __unsafe_getCameraId_dec = [computed], _getCamera_dec = [computed], _getViewportPageBoundsForFollowing_dec = [computed], _getCameraForFollowing_dec = [computed], _getZoomLevel_dec = [computed], _getViewportScreenBounds_dec = [computed], _getViewportScreenCenter_dec = [computed], _getViewportPageBounds_dec = [computed], __getCollaboratorsQuery_dec = [computed], _getCollaborators_dec = [computed], _getCollaboratorsOnCurrentPage_dec = [computed], _getRenderingShapes_dec = [computed], __getAllPagesQuery_dec = [computed], _getPages_dec = [computed], _getCurrentPageId_dec = [computed], _getCurrentPageShapeIdsSorted_dec = [computed], __getAllAssetsQuery_dec = [computed], __getShapeHandlesCache_dec = [computed], __getShapePageTransformCache_dec = [computed], __getShapePageBoundsCache_dec = [computed], __getShapeClipPathCache_dec = [computed], __getShapeMaskCache_dec = [computed], __getShapeMaskedPageBoundsCache_dec = [computed], __notVisibleShapes_dec = [computed], _getCulledShapes_dec = [computed], _getCurrentPageBounds_dec = [computed], _getCurrentPageShapes_dec = [computed], _getCurrentPageShapesSorted_dec = [computed], _getCurrentPageRenderingShapesSorted_dec = [computed], __getBindingsIndexCache_dec = [computed], __getSelectionSharedStyles_dec = [computed], _getSharedStyles_dec = [computed({ isEqual: (a, b) => a.equals(b) })], _getSharedOpacity_dec = [computed], _getIsFocused_dec = [computed], _getIsReadonly_dec = [computed], __setShiftKeyTimeout_dec = [bind], __setAltKeyTimeout_dec = [bind], __setCtrlKeyTimeout_dec = [bind], __setMetaKeyTimeout_dec = [bind], _a) {
   constructor({
     store,
     user,
@@ -165,13 +158,11 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     tools,
     getContainer,
     cameraOptions,
-    textOptions,
     initialState,
     autoFocus,
     inferDarkMode,
     options,
-    isShapeHidden,
-    fontAssetUrls
+    isShapeHidden
   }) {
     super();
     __runInitializers(_init, 5, this);
@@ -229,12 +220,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
      * @public
      */
     __publicField(this, "textMeasure");
-    /**
-     * A utility for managing the set of fonts that should be rendered in the document.
-     *
-     * @public
-     */
-    __publicField(this, "fonts");
     /**
      * A manager for the editor's environment.
      *
@@ -306,9 +291,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     __publicField(this, "_isChangingStyleTimeout", -1);
     // Menus
     __publicField(this, "menus", tlmenus.forContext(this.contextId));
-    // Rich text editor
-    __publicField(this, "_currentRichTextEditor", atom("rich text editor", null));
-    __publicField(this, "_textOptions");
     __publicField(this, "_cameraOptions", atom("camera options", DEFAULT_CAMERA_OPTIONS));
     /** @internal */
     __publicField(this, "_viewportAnimation", null);
@@ -329,6 +311,8 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     __publicField(this, "_cameraStateTimeoutRemaining", 0);
     /* @internal */
     __publicField(this, "_currentPageShapeIds");
+    /* --------------------- Shapes --------------------- */
+    __publicField(this, "_shapeGeometryCaches", {});
     // Parents and children
     /**
      * A cache of parents to children.
@@ -454,12 +438,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this.snaps = new SnapManager(this);
     this.disposables.add(this.timers.dispose);
     this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions });
-    this._textOptions = atom("text options", textOptions ?? null);
     this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false);
     this.disposables.add(() => this.user.dispose());
     this.getContainer = getContainer;
     this.textMeasure = new TextManager(this);
-    this.fonts = new FontManager(this, fontAssetUrls);
     this._tickManager = new TickManager(this);
     class NewRoot extends RootState {
       static initial = initialState ?? "";
@@ -1631,7 +1613,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    */
   setEditingShape(shape) {
     const id = typeof shape === "string" ? shape : shape?.id ?? null;
-    this.setRichTextEditor(null);
     if (id !== this.getEditingShapeId()) {
       if (id) {
         const shape2 = this.getShape(id);
@@ -1648,36 +1629,12 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       this.run(
         () => {
           this._updateCurrentPageState({ editingShapeId: null });
-          this._currentRichTextEditor.set(null);
         },
         { history: "ignore" }
       );
     }
     return this;
   }
-  getRichTextEditor() {
-    return this._currentRichTextEditor.get();
-  }
-  /**
-   * Set the current editing shape's rich text editor.
-   *
-   * @example
-   * ```ts
-   * editor.setRichTextEditor(richTextEditorView)
-   * ```
-   *
-   * @param textEditor - The text editor to set as the current editing shape's text editor.
-   *
-   * @public
-   */
-  setRichTextEditor(textEditor) {
-    const current = this._currentRichTextEditor.__unsafe__getWithoutCapture();
-    if (current !== textEditor) {
-      current?.destroy();
-    }
-    this._currentRichTextEditor.set(textEditor);
-    return this;
-  }
   getHoveredShapeId() {
     return this.getCurrentPageState().hoveredShapeId;
   }
@@ -1823,18 +1780,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     }
     return this;
   }
-  /**
-   * Get the current text options.
-   *
-   * @example
-   * ```ts
-   * editor.getTextOptions()
-   * ```
-   *
-   *  @public */
-  getTextOptions() {
-    return assertExists(this._textOptions.get(), "Cannot use text without setting textOptions");
-  }
   _unsafe_getCameraId() {
     return CameraRecordType.createId(this.getCurrentPageId());
   }
@@ -3279,16 +3224,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   async uploadAsset(asset, file, abortSignal) {
     return await this.store.props.assets.upload(asset, file, abortSignal);
   }
-  _getShapeGeometryCache() {
-    return this.store.createComputedCache(
-      "bounds",
-      (shape) => {
-        this.fonts.trackFontsForShape(shape);
-        return this.getShapeUtil(shape).getGeometry(shape);
-      },
-      { areRecordsEqual: (a, b) => a.props === b.props }
-    );
-  }
   /**
    * Get the geometry of a shape.
    *
@@ -3296,14 +3231,26 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * ```ts
    * editor.getShapeGeometry(myShape)
    * editor.getShapeGeometry(myShapeId)
+   * editor.getShapeGeometry(myShapeId, { context: "arrow" })
    * ```
    *
    * @param shape - The shape (or shape id) to get the geometry for.
+   * @param opts - Additional options about the request for geometry. Passed to {@link ShapeUtil.getGeometry}.
    *
    * @public
    */
-  getShapeGeometry(shape) {
-    return this._getShapeGeometryCache().get(typeof shape === "string" ? shape : shape.id);
+  getShapeGeometry(shape, opts) {
+    const context = opts?.context ?? "none";
+    if (!this._shapeGeometryCaches[context]) {
+      this._shapeGeometryCaches[context] = this.store.createComputedCache(
+        "bounds",
+        (shape2) => this.getShapeUtil(shape2).getGeometry(shape2, opts),
+        { areRecordsEqual: (a, b) => a.props === b.props }
+      );
+    }
+    return this._shapeGeometryCaches[context].get(
+      typeof shape === "string" ? shape : shape.id
+    );
   }
   _getShapeHandlesCache() {
     return this.store.createComputedCache("handles", (shape) => {
@@ -3705,7 +3652,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
       const geometry = this.getShapeGeometry(shape);
       const isGroup = geometry instanceof Group2d;
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
-      if (this.isShapeOfType(shape, "frame") || this.isShapeOfType(shape, "arrow") && shape.props.text.trim() || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && this.getShapeUtil(shape).getText(shape)?.trim()) {
+      if (this.isShapeOfType(shape, "frame") || (this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shape.props.text.trim()) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
@@ -4369,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;
   }
   /**
@@ -4696,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.
    *
@@ -4711,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
           }
@@ -4766,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;
@@ -4790,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;
   }
@@ -4858,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) {
@@ -4965,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;
@@ -5004,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;
@@ -5026,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;
   }
@@ -5087,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;
   }
   /**
@@ -5343,7 +5465,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @example
    * ```ts
    * editor.createShape(myShape)
-   * editor.createShape({ id: 'box1', type: 'text', props: { richText: toRichText("ok") } })
+   * editor.createShape({ id: 'box1', type: 'text', props: { text: "ok" } })
    * ```
    *
    * @param shape - The shape (or shape partial) to create.
@@ -5360,7 +5482,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
    * @example
    * ```ts
    * editor.createShapes([myShape])
-   * editor.createShapes([{ id: 'box1', type: 'text', props: { richText: toRichText("ok") } }])
+   * editor.createShapes([{ id: 'box1', type: 'text', props: { text: "ok" } }])
    * ```
    *
    * @param shapes - The shapes (or shape partials) to create.
@@ -7365,7 +7487,6 @@ __decorateElement(_init, 1, "getFocusedGroupId", _getFocusedGroupId_dec, Editor)
 __decorateElement(_init, 1, "getFocusedGroup", _getFocusedGroup_dec, Editor);
 __decorateElement(_init, 1, "getEditingShapeId", _getEditingShapeId_dec, Editor);
 __decorateElement(_init, 1, "getEditingShape", _getEditingShape_dec, Editor);
-__decorateElement(_init, 1, "getRichTextEditor", _getRichTextEditor_dec, Editor);
 __decorateElement(_init, 1, "getHoveredShapeId", _getHoveredShapeId_dec, Editor);
 __decorateElement(_init, 1, "getHoveredShape", _getHoveredShape_dec, Editor);
 __decorateElement(_init, 1, "getHintingShapeIds", _getHintingShapeIds_dec, Editor);
@@ -7389,7 +7510,6 @@ __decorateElement(_init, 1, "getPages", _getPages_dec, Editor);
 __decorateElement(_init, 1, "getCurrentPageId", _getCurrentPageId_dec, Editor);
 __decorateElement(_init, 1, "getCurrentPageShapeIdsSorted", _getCurrentPageShapeIdsSorted_dec, Editor);
 __decorateElement(_init, 1, "_getAllAssetsQuery", __getAllAssetsQuery_dec, Editor);
-__decorateElement(_init, 1, "_getShapeGeometryCache", __getShapeGeometryCache_dec, Editor);
 __decorateElement(_init, 1, "_getShapeHandlesCache", __getShapeHandlesCache_dec, Editor);
 __decorateElement(_init, 1, "_getShapePageTransformCache", __getShapePageTransformCache_dec, Editor);
 __decorateElement(_init, 1, "_getShapePageBoundsCache", __getShapePageBoundsCache_dec, Editor);
@@ -7479,7 +7599,7 @@ function withIsolatedShapes(editor, shapeIds, callback) {
           result = Result.err(error);
         }
       });
-      editor.store.applyDiff(reverseRecordsDiff(changes));
+      editor.store.applyDiff(reverseRecordsDiff(changes), { runCallbacks: false });
     },
     { history: "ignore" }
   );