@tldraw/editor 4.5.0-canary.b245c8ea38ef → 4.5.0-canary.b83751dd9949

package/dist-cjs/lib/editor/Editor.js

@@ -4988,6 +4988,53 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     if (changes) this.updateShapes(changes);
     return this;
   }
+  /**
+   * Shared clustering logic for layout methods. Resolves shapes, optionally filters to
+   * axis-aligned shapes, checks canBeLaidOut, and groups shapes into clusters via arrow bindings.
+   *
+   * @internal
+   */
+  getShapeClusters(shapes, type, opts) {
+    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    let freshShapes = (0, import_utils.compact)(ids.map((id) => this.getShape(id)));
+    if (opts?.filterAxisAligned) {
+      freshShapes = freshShapes.filter(
+        (s) => this.getShapePageTransform(s)?.rotation() % (import_utils2.PI / 2) === 0
+      );
+    }
+    const clusters = [];
+    const allBounds = [];
+    const visited = /* @__PURE__ */ new Set();
+    for (const shape of freshShapes) {
+      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,
+        shapes: freshShapes
+      })) {
+        continue;
+      }
+      const shapesMovingTogether = [shape];
+      const boundsOfShapesMovingTogether = [shapePageBounds];
+      this.collectShapesViaArrowBindings({
+        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        initialShapes: freshShapes,
+        resultShapes: shapesMovingTogether,
+        resultBounds: boundsOfShapesMovingTogether,
+        visited
+      });
+      const commonPageBounds = import_Box.Box.Common(boundsOfShapesMovingTogether);
+      if (!commonPageBounds) continue;
+      clusters.push({
+        shapes: shapesMovingTogether,
+        pageBounds: commonPageBounds
+      });
+      allBounds.push(commonPageBounds);
+    }
+    return { clusters, allBounds };
+  }
   /**
    * @internal
    */
@@ -5098,40 +5145,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    */
   stackShapes(shapes, operation, gap) {
     const _gap = gap ?? this.options.adjacentShapeMargin;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    const shapesToStackFirstPass = (0, import_utils.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 = import_Box.Box.Common(boundsOfShapesMovingTogether);
-      if (!commonPageBounds) continue;
-      shapeClustersToStack.push({
-        shapes: shapesMovingTogether,
-        pageBounds: commonPageBounds
-      });
-      allBounds.push(commonPageBounds);
-    }
+    const { clusters: shapeClustersToStack } = this.getShapeClusters(shapes, "stack");
     const len = shapeClustersToStack.length;
     if (_gap === 0 && len < 3 || len < 2) return this;
     let val;
@@ -5217,40 +5232,11 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
   packShapes(shapes, _gap) {
     if (this.getIsReadonly()) return this;
     const gap = _gap ?? this.options.adjacentShapeMargin;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
-    const shapesToPackFirstPass = (0, import_utils.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 = import_Box.Box.Common(boundsOfShapesMovingTogether);
-      if (!commonPageBounds) continue;
-      shapeClustersToPack.push({
-        shapes: shapesMovingTogether,
-        pageBounds: commonPageBounds,
-        nextPageBounds: commonPageBounds.clone()
-      });
-      allBounds.push(commonPageBounds);
-    }
+    const { clusters, allBounds } = this.getShapeClusters(shapes, "pack");
+    const shapeClustersToPack = clusters.map((cluster) => ({
+      ...cluster,
+      nextPageBounds: cluster.pageBounds.clone()
+    }));
     if (shapeClustersToPack.length < 2) return this;
     let area = 0;
     for (const { pageBounds } of shapeClustersToPack) {
@@ -5334,39 +5320,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    */
   alignShapes(shapes, operation) {
     if (this.getIsReadonly()) return this;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
-    const shapesToAlignFirstPass = (0, import_utils.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 = import_Box.Box.Common(boundsOfShapesMovingTogether);
-      if (!commonPageBounds) continue;
-      shapeClustersToAlign.push({
-        shapes: shapesMovingTogether,
-        pageBounds: commonPageBounds
-      });
-      allBounds.push(commonPageBounds);
-    }
+    const { clusters: shapeClustersToAlign, allBounds } = this.getShapeClusters(shapes, "align");
     if (shapeClustersToAlign.length < 2) return this;
     const commonBounds = import_Box.Box.Common(allBounds);
     const changes = [];
@@ -5428,39 +5382,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    */
   distributeShapes(shapes, operation) {
     if (this.getIsReadonly()) return this;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
-    const shapesToDistributeFirstPass = (0, import_utils.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 = import_Box.Box.Common(boundsOfShapesMovingTogether);
-      if (!commonPageBounds) continue;
-      shapeClustersToDistribute.push({
-        shapes: shapesMovingTogether,
-        pageBounds: commonPageBounds
-      });
-      allBounds.push(commonPageBounds);
-    }
+    const { clusters: shapeClustersToDistribute } = this.getShapeClusters(shapes, "distribute");
     if (shapeClustersToDistribute.length < 3) return this;
     let val;
     let min;
@@ -5482,6 +5404,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     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));
+      const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
       return this.distributeShapes(
         ids.filter((id) => !excludedShapeIds.has(id)),
         operation
@@ -5534,41 +5457,12 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    * @public
    */
   stretchShapes(shapes, operation) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly()) return this;
-    const shapesToStretchFirstPass = (0, import_utils.compact)(ids.map((id) => this.getShape(id))).filter(
-      (s) => this.getShapePageTransform(s)?.rotation() % (import_utils2.PI / 2) === 0
+    const { clusters: shapeClustersToStretch, allBounds } = this.getShapeClusters(
+      shapes,
+      "stretch",
+      { filterAxisAligned: true }
     );
-    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"
-      })) {
-        continue;
-      }
-      this.collectShapesViaArrowBindings({
-        bindings: this.getBindingsToShape(shape.id, "arrow"),
-        initialShapes: shapesToStretchFirstPass,
-        resultShapes: shapesMovingTogether,
-        resultBounds: boundsOfShapesMovingTogether,
-        visited
-      });
-      const commonPageBounds = import_Box.Box.Common(boundsOfShapesMovingTogether);
-      if (!commonPageBounds) continue;
-      shapeClustersToStretch.push({
-        shapes: shapesMovingTogether,
-        pageBounds: commonPageBounds
-      });
-      allBounds.push(commonPageBounds);
-    }
     if (shapeClustersToStretch.length < 2) return this;
     const commonBounds = import_Box.Box.Common(allBounds);
     let val;
@@ -5594,7 +5488,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
         for (const shape of shapes2) {
           const shapeLocalOffset = localOffset.clone();
           const parentTransform = this.getShapeParentTransform(shape);
-          if (parentTransform) localOffset.rot(-parentTransform.rotation());
+          if (parentTransform) shapeLocalOffset.rot(-parentTransform.rotation());
           shapeLocalOffset.add(shape);
           const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
           this.updateShape(changes);
@@ -5609,6 +5503,62 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     });
     return this;
   }
+  /**
+   * Resize and reposition a set of shapes so that their combined page bounds matches the given
+   * target bounds.
+   *
+   * @example
+   * ```ts
+   * editor.resizeToBounds([box1, box2], { x: 0, y: 0, w: 500, h: 500 })
+   * editor.resizeToBounds(editor.getSelectedShapeIds(), new Box(0, 0, 500, 500))
+   * ```
+   *
+   * @param shapes - The shapes (or shape ids) to resize.
+   * @param bounds - The target bounding box.
+   *
+   * @public
+   */
+  resizeToBounds(shapes, bounds) {
+    if (this.getIsReadonly()) return this;
+    const targetBounds = import_Box.Box.From(bounds);
+    const { clusters: shapeClusters, allBounds } = this.getShapeClusters(
+      shapes,
+      "resize_to_bounds",
+      { filterAxisAligned: true }
+    );
+    if (shapeClusters.length === 0) return this;
+    const commonBounds = import_Box.Box.Common(allBounds);
+    if (!commonBounds) return this;
+    if (commonBounds.width === 0 || commonBounds.height === 0) return this;
+    const scaleX = targetBounds.width / commonBounds.width;
+    const scaleY = targetBounds.height / commonBounds.height;
+    const scale = new import_Vec.Vec(scaleX, scaleY);
+    shapeClusters.forEach(({ shapes: shapes2, pageBounds }) => {
+      const localOffset = new import_Vec.Vec(
+        targetBounds.minX - commonBounds.minX + (pageBounds.minX - commonBounds.minX) * (scaleX - 1),
+        targetBounds.minY - commonBounds.minY + (pageBounds.minY - commonBounds.minY) * (scaleY - 1)
+      );
+      const scaleOrigin = new import_Vec.Vec(
+        targetBounds.minX + (pageBounds.minX - commonBounds.minX) * scaleX,
+        targetBounds.minY + (pageBounds.minY - commonBounds.minY) * scaleY
+      );
+      for (const shape of shapes2) {
+        const shapeLocalOffset = localOffset.clone();
+        const parentTransform = this.getShapeParentTransform(shape);
+        if (parentTransform) shapeLocalOffset.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;
+  }
   /**
    * Resize a shape.
    *