@tldraw/editor 5.4.1 → 5.5.0-canary.003bf5951274

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

@@ -95,6 +95,10 @@ var import_UserPreferencesManager = require("./managers/UserPreferencesManager/U
 var import_OverlayManager = require("./overlays/OverlayManager");
 var import_RootState = require("./tools/RootState");
 const RENDERING_SHAPES_SORT_CACHE_THRESHOLD = 100;
+const AXIS = {
+  horizontal: { val: "x", min: "minX", max: "maxX", dim: "width" },
+  vertical: { val: "y", min: "minY", max: "maxY", dim: "height" }
+};
 class Editor extends import_eventemitter3.default {
   id = (0, import_utils.uniqueId)();
   constructor({
@@ -421,7 +425,7 @@ class Editor extends import_eventemitter3.default {
               }
             }
             if (deleteBindingIds.length) {
-              this.deleteBindings(deleteBindingIds);
+              this.store.remove(deleteBindingIds);
             }
           }
         },
@@ -1381,6 +1385,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    **/
   updateDocumentSettings(settings) {
+    if (this.getIsReadonly()) return this;
     this.run(
       () => {
         this.store.put([{ ...this.getDocumentSettings(), ...settings }]);
@@ -1540,7 +1545,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   select(...shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes);
     this.setSelectedShapes(ids);
     return this;
   }
@@ -1555,7 +1560,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   deselect(...shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes);
     const selectedShapeIds = this.getSelectedShapeIds();
     if (selectedShapeIds.length > 0 && ids.length > 0) {
       this.setSelectedShapes(selectedShapeIds.filter((id) => !ids.includes(id)));
@@ -1593,7 +1598,7 @@ class Editor extends import_eventemitter3.default {
     }
     const ids = this.getSortedChildIdsForParent(parentToSelectWithinId);
     if (ids.length <= 0) return this;
-    this.setSelectedShapes(this._getUnlockedShapeIds(ids));
+    this.setSelectedShapes(ids.filter((id) => !this.getShape(id)?.isLocked));
     return this;
   }
   /**
@@ -1610,14 +1615,18 @@ class Editor extends import_eventemitter3.default {
     const selectedShapeIds = this.getSelectedShapeIds();
     const firstParentId = selectedShapeIds[0] ? this.getShape(selectedShapeIds[0])?.parentId : null;
     const isSelectedWithinContainer = firstParentId && selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) && !(0, import_tlschema.isPageId)(firstParentId);
-    const filteredShapes = isSelectedWithinContainer ? this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId) : this.getCurrentPageShapes().filter((shape2) => (0, import_tlschema.isPageId)(shape2.parentId));
-    const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(filteredShapes) : this.getCurrentPageShapesInReadingOrder();
+    const filteredShapes = this.getCurrentPageShapes().filter(
+      (shape2) => !this.isShapeOrAncestorLocked(shape2) && (isSelectedWithinContainer ? shape2.parentId === firstParentId : (0, import_tlschema.isPageId)(shape2.parentId))
+    );
+    const readingOrderShapes = this._getShapesInReadingOrder(filteredShapes);
     const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
     let adjacentShapeId;
     if (direction === "next" || direction === "prev") {
       const shapeIds = readingOrderShapes.map((shape2) => shape2.id);
+      if (shapeIds.length === 0) return;
       const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1;
-      const adjacentIndex = (currentIndex + (direction === "next" ? 1 : -1) + shapeIds.length) % shapeIds.length;
+      const startIndex = currentIndex === -1 && direction === "prev" ? 0 : currentIndex;
+      const adjacentIndex = (startIndex + (direction === "next" ? 1 : -1) + shapeIds.length) % shapeIds.length;
       adjacentShapeId = shapeIds[adjacentIndex];
     } else {
       if (!currentShapeId) return;
@@ -1716,13 +1725,14 @@ class Editor extends import_eventemitter3.default {
     });
     if (shapesInDirection.length === 0) return currentShapeId;
     const lowestScoringShape = (0, import_utils.minBy)(shapesInDirection, ({ center }) => {
-      const distance = import_Vec.Vec.Dist2(currentCenter, center);
+      const distance = import_Vec.Vec.Dist(currentCenter, center);
       const dirProp = ["left", "right"].includes(direction) ? "x" : "y";
       const directionalDistance = Math.abs(center[dirProp] - currentCenter[dirProp]);
       const offProp = ["left", "right"].includes(direction) ? "y" : "x";
       const offAxisDeviation = Math.abs(center[offProp] - currentCenter[offProp]);
-      const angle = Math.abs(import_Vec.Vec.Angle(currentCenter, center) * (180 / Math.PI));
-      const angleDeviation = Math.abs(angle - directionToAngle[direction]);
+      const angle = (import_Vec.Vec.Angle(currentCenter, center) * (180 / Math.PI) + 360) % 360;
+      const rawAngleDeviation = Math.abs(angle - directionToAngle[direction]);
+      const angleDeviation = Math.min(rawAngleDeviation, 360 - rawAngleDeviation);
       return distance * 1 + // Base distance
       offAxisDeviation * 2 + // Heavy penalty for off-axis deviation
       (distance - directionalDistance) * 1.5 + // Penalty for diagonal distance
@@ -2060,7 +2070,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   setHintingShapes(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes);
     this.run(
       () => {
         this._updateCurrentPageState({ hintingShapeIds: (0, import_utils.dedupe)(ids) });
@@ -2090,7 +2100,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   setErasingShapes(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes.slice() : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes).slice();
     ids.sort();
     const erasingShapeIds = this.getErasingShapeIds();
     this.run(
@@ -2497,14 +2507,16 @@ class Editor extends import_eventemitter3.default {
   setCamera(point, opts) {
     const { isLocked } = this._cameraOptions.__unsafe__getWithoutCapture();
     if (isLocked && !opts?.force) return this;
+    const _point = new import_Vec.Vec(point.x, point.y, point.z ?? this.getZoomLevel());
+    if (!Number.isFinite(_point.x) || !Number.isFinite(_point.y) || !Number.isFinite(_point.z)) {
+      throw Error(
+        `Editor.setCamera: expected finite values, got (${_point.x}, ${_point.y}, ${_point.z}).`
+      );
+    }
     this.stopCameraAnimation();
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
     }
-    const _point = import_Vec.Vec.Cast(point);
-    if (!Number.isFinite(_point.x)) _point.x = 0;
-    if (!Number.isFinite(_point.y)) _point.y = 0;
-    if (_point.z === void 0 || !Number.isFinite(_point.z)) point.z = this.getZoomLevel();
     const camera = this.getConstrainedCamera(_point, opts);
     if (opts?.animation) {
       const { width, height } = this.getViewportScreenBounds();
@@ -2789,11 +2801,14 @@ class Editor extends import_eventemitter3.default {
   _animateViewport(ms) {
     if (!this._viewportAnimation) return;
     this._viewportAnimation.elapsed += ms;
-    const { elapsed, easing, duration, start, end } = this._viewportAnimation;
+    const { elapsed, easing, duration, start, end, opts } = this._viewportAnimation;
     if (elapsed > duration) {
       this.off("tick", this._animateViewport);
       this._viewportAnimation = null;
-      this._setCamera(new import_Vec.Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width));
+      this._setCamera(
+        new import_Vec.Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width),
+        opts
+      );
       return;
     }
     const remaining = duration - elapsed;
@@ -2831,7 +2846,8 @@ class Editor extends import_eventemitter3.default {
       duration: duration / animationSpeed,
       easing,
       start: viewportPageBounds.clone(),
-      end: targetViewportPage.clone()
+      end: targetViewportPage.clone(),
+      opts: rest
     };
     this.once("stop-camera-animation", () => {
       this.off("tick", this._animateViewport);
@@ -2883,7 +2899,7 @@ class Editor extends import_eventemitter3.default {
         newCx += center.x / newCz - center.x / cz;
         newCy += center.y / newCz - center.y / cz;
       }
-      currentSpeed *= 1 - friction;
+      currentSpeed *= (1 - friction) ** (elapsed / import_constants.FRAME_MS_60HZ);
       if (currentSpeed < speedThreshold) {
         cancel();
       } else {
@@ -2917,6 +2933,7 @@ class Editor extends import_eventemitter3.default {
       }
       const isOnSamePage = presence.currentPageId === this.getCurrentPageId();
       if (!isOnSamePage) {
+        this.markHistoryStoppingPoint("change-page");
         this.setCurrentPage(presence.currentPageId);
       }
       if (opts && opts.animation && !isOnSamePage) {
@@ -3748,7 +3765,9 @@ class Editor extends import_eventemitter3.default {
     if (ids.length <= 0) return this;
     this.run(
       () => {
-        this.store.props.assets.remove?.(ids);
+        Promise.resolve(this.store.props.assets.remove?.(ids)).catch(
+          (err) => console.error("Error while removing assets from the asset store:", err)
+        );
         this.store.remove(ids);
       },
       { history: "ignore" }
@@ -4130,7 +4149,7 @@ class Editor extends import_eventemitter3.default {
     if (shapes.length === 0) {
       return;
     }
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const freshShapes = (0, import_utils.compact)(ids.map((id) => this.getShape(id)));
     if (freshShapes.length === 1) {
       const parentId = freshShapes[0].parentId;
@@ -4227,12 +4246,14 @@ class Editor extends import_eventemitter3.default {
    */
   getSelectedShapeAtPoint(point) {
     const selectedShapeIds = this.getSelectedShapeIds();
-    const margin = this.options.hitTestMargin / this.getZoomLevel();
+    if (selectedShapeIds.length === 0) return void 0;
+    const selectedShapeIdSet = new Set(selectedShapeIds);
+    const margin = this.getHitTestMargin();
     const sortedShapes = this.getCurrentPageShapesSorted();
     for (let i = sortedShapes.length - 1; i >= 0; i--) {
       const shape = sortedShapes[i];
       if (shape.type === "group") continue;
-      if (!selectedShapeIds.includes(shape.id)) continue;
+      if (!selectedShapeIdSet.has(shape.id)) continue;
       if (this.getShapeGeometry(shape).hitTestPoint(
         this.getPointInShapeSpace(shape, point),
         margin,
@@ -4330,7 +4351,6 @@ class Editor extends import_eventemitter3.default {
             }
             return inMarginClosestToEdgeHit || shape;
           } else {
-            if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
             if (hitInside ? (
               // On hitInside, the distance will be negative for hits inside
               // If the distance is positive, check against the outer margin
@@ -4347,6 +4367,7 @@ class Editor extends import_eventemitter3.default {
                 inMarginClosestToEdgeHit = shape;
               }
             } else if (!inMarginClosestToEdgeHit) {
+              if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
               const { area } = geometry;
               if (area < inHollowSmallestArea) {
                 inHollowSmallestArea = area;
@@ -4357,6 +4378,9 @@ class Editor extends import_eventemitter3.default {
         }
       } else {
         if (distance < this.getHitTestMargin()) {
+          if (inMarginClosestToEdgeHit && inMarginClosestToEdgeDistance <= distance) {
+            return inMarginClosestToEdgeHit;
+          }
           return shape;
         }
       }
@@ -4633,7 +4657,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   reparentShapes(shapes, parentId, insertIndex) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (ids.length === 0) return this;
     const changes = [];
     const parentTransform = (0, import_tlschema.isPageId)(parentId) ? import_Mat.Mat.Identity() : this.getShapePageTransform(parentId);
@@ -4862,6 +4886,7 @@ class Editor extends import_eventemitter3.default {
    * binding, but the `type`, `toId`, and `fromId` must all be provided.
    */
   createBindings(partials) {
+    if (this.getIsReadonly()) return this;
     const bindings = [];
     for (const partial of partials) {
       const fromShape = this.getShape(partial.fromId);
@@ -4896,6 +4921,7 @@ class Editor extends import_eventemitter3.default {
    * binding is skipped. The changes from the partial are merged into the existing record.
    */
   updateBindings(partials) {
+    if (this.getIsReadonly()) return this;
     const updated = [];
     for (const partial of partials) {
       if (!partial) continue;
@@ -4924,6 +4950,16 @@ class Editor extends import_eventemitter3.default {
    * Delete several bindings by their IDs. If a binding ID doesn't exist, it's ignored.
    */
   deleteBindings(bindings, { isolateShapes = false } = {}) {
+    if (this.getIsReadonly()) return this;
+    return this._deleteBindings(bindings, { isolateShapes });
+  }
+  /**
+   * Unguarded so that withIsolatedShapes can transiently isolate shapes for copy and export in
+   * readonly mode; the public deleteBindings is what readonly blocks.
+   *
+   * @internal
+   */
+  _deleteBindings(bindings, { isolateShapes = false } = {}) {
     const ids = bindings.map((binding) => typeof binding === "string" ? binding : binding.id);
     if (isolateShapes) {
       this.store.atomic(() => {
@@ -4982,7 +5018,7 @@ class Editor extends import_eventemitter3.default {
    * @param opts - The options for the rotation.
    */
   rotateShapesBy(shapes, delta, opts) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (ids.length <= 0) return this;
     const snapshot = (0, import_rotation.getRotationSnapshot)({ editor: this, ids });
     if (!snapshot) return this;
@@ -5019,6 +5055,14 @@ class Editor extends import_eventemitter3.default {
     }
     return workingShape;
   }
+  // Counter-rotates the page-space delta into the parent's space; without that a child of a rotated
+  // frame or group would move along its parent's axes instead of the page's.
+  // todo: a shape laid out together with its own parent moves twice, once with the parent and once
+  // on its own; the layout commands should skip shapes whose ancestors are also being laid out
+  getChangesToTranslateShapeByPageDelta(shape, pageDelta) {
+    const localDelta = import_Vec.Vec.From(pageDelta).rot(-this.getShapeParentTransform(shape).rotation());
+    return this.getChangesToTranslateShape(shape, localDelta.add(shape));
+  }
   /**
    * Move shapes by a delta.
    *
@@ -5031,14 +5075,12 @@ class Editor extends import_eventemitter3.default {
    * @param offset - The offset to apply to the shapes.
    */
   nudgeShapes(shapes, offset) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (ids.length <= 0) return this;
     const changes = [];
     for (const id of ids) {
       const shape = this.getShape(id);
-      const localDelta = import_Vec.Vec.From(offset);
-      localDelta.rot(-this.getShapeParentTransform(shape).rotation());
-      changes.push(this.getChangesToTranslateShape(shape, localDelta.add(shape)));
+      changes.push(this.getChangesToTranslateShapeByPageDelta(shape, offset));
     }
     this.updateShapes(changes);
     return this;
@@ -5059,7 +5101,7 @@ class Editor extends import_eventemitter3.default {
    */
   duplicateShapes(shapes, offset) {
     this.run(() => {
-      const _ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+      const _ids = toShapeIds(shapes);
       const ids = this._shouldIgnoreShapeLock ? _ids : this._getUnlockedShapeIds(_ids);
       if (ids.length <= 0) return this;
       const initialIds = new Set(ids);
@@ -5168,7 +5210,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   moveShapesToPage(shapes, pageId) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (ids.length === 0) return this;
     if (this.getIsReadonly()) return this;
     const currentPageId = this.getCurrentPageId();
@@ -5204,7 +5246,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   toggleLock(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (this.getIsReadonly() || ids.length === 0) return this;
     let allLocked = true;
     const shapesToToggle = [];
@@ -5243,7 +5285,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   sendToBack(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = (0, import_reorderShapes.getReorderingShapesChanges)(this, "toBack", ids, {
       considerAllShapes: true
     });
@@ -5273,7 +5315,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   sendBackward(shapes, opts = {}) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = (0, import_reorderShapes.getReorderingShapesChanges)(this, "backward", ids, opts);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5301,7 +5343,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   bringForward(shapes, opts = {}) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = (0, import_reorderShapes.getReorderingShapesChanges)(this, "forward", ids, opts);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5320,7 +5362,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   bringToFront(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = (0, import_reorderShapes.getReorderingShapesChanges)(this, "toFront", ids);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5332,7 +5374,7 @@ class Editor extends import_eventemitter3.default {
    * @internal
    */
   getShapeClusters(shapes, type, opts) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     let freshShapes = (0, import_utils.compact)(ids.map((id) => this.getShape(id)));
     if (opts?.filterAxisAligned) {
       freshShapes = freshShapes.filter((s) => {
@@ -5357,7 +5399,7 @@ class Editor extends import_eventemitter3.default {
       const shapesMovingTogether = [shape];
       const boundsOfShapesMovingTogether = [shapePageBounds];
       this.collectShapesViaArrowBindings({
-        bindings: this.getBindingsToShape(shape.id, "arrow"),
+        bindings: this.getBindingsInvolvingShape(shape.id, "arrow"),
         initialShapes: freshShapes,
         resultShapes: shapesMovingTogether,
         resultBounds: boundsOfShapesMovingTogether,
@@ -5413,7 +5455,7 @@ class Editor extends import_eventemitter3.default {
    */
   flipShapes(shapes, operation) {
     if (this.getIsReadonly()) return this;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const shapesToFlipFirstPass = (0, import_utils.compact)(ids.map((id) => this.getShape(id)));
     for (const shape of shapesToFlipFirstPass) {
       if (this.isShapeOfType(shape, "group")) {
@@ -5487,21 +5529,7 @@ class Editor extends import_eventemitter3.default {
     const { clusters: shapeClustersToStack } = this.getShapeClusters(shapes, "stack");
     const len = shapeClustersToStack.length;
     if (_gap === 0 && len < 3 || len < 2) return this;
-    let val;
-    let min;
-    let max;
-    let dim;
-    if (operation === "horizontal") {
-      val = "x";
-      min = "minX";
-      max = "maxX";
-      dim = "width";
-    } else {
-      val = "y";
-      min = "minY";
-      max = "maxY";
-      dim = "height";
-    }
+    const { val, min, max, dim } = AXIS[operation];
     let shapeGap = 0;
     shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min]);
     if (_gap === 0) {
@@ -5540,13 +5568,7 @@ class Editor extends import_eventemitter3.default {
       const delta = new import_Vec.Vec();
       delta[val] = v + shapeGap - pageBounds[val];
       for (const shape of shapes2) {
-        const shapeDelta = delta.clone();
-        const parent = this.getShapeParent(shape);
-        if (parent) {
-          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
-        }
-        shapeDelta.add(shape);
-        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+        changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta));
       }
       v += pageBounds[dim] + shapeGap;
     }
@@ -5626,13 +5648,7 @@ class Editor extends import_eventemitter3.default {
     for (const { shapes: shapes2, pageBounds, nextPageBounds } of shapeClustersToPack) {
       const delta = import_Vec.Vec.Sub(nextPageBounds.point, pageBounds.point).add(centerDelta);
       for (const shape of shapes2) {
-        const shapeDelta = delta.clone();
-        const parent = this.getShapeParent(shape);
-        if (parent) {
-          shapeDelta.rot(-this.getShapeParentTransform(shape).rotation());
-        }
-        shapeDelta.add(shape);
-        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+        changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta));
       }
     }
     if (changes.length) {
@@ -5692,13 +5708,7 @@ class Editor extends import_eventemitter3.default {
         }
       }
       for (const shape of shapes2) {
-        const shapeDelta = delta.clone();
-        const parent = this.getShapeParent(shape);
-        if (parent) {
-          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
-        }
-        shapeDelta.add(shape);
-        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+        changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta));
       }
     });
     this.updateShapes(changes);
@@ -5722,27 +5732,13 @@ class Editor extends import_eventemitter3.default {
     if (this.getIsReadonly()) return this;
     const { clusters: shapeClustersToDistribute } = this.getShapeClusters(shapes, "distribute");
     if (shapeClustersToDistribute.length < 3) return this;
-    let val;
-    let min;
-    let max;
-    let dim;
-    if (operation === "horizontal") {
-      val = "x";
-      min = "minX";
-      max = "maxX";
-      dim = "width";
-    } else {
-      val = "y";
-      min = "minY";
-      max = "maxY";
-      dim = "height";
-    }
+    const { val, min, max, dim } = AXIS[operation];
     const changes = [];
     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));
-      const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+      const ids = toShapeIds(shapes);
       return this.distributeShapes(
         ids.filter((id) => !excludedShapeIds.has(id)),
         operation
@@ -5766,13 +5762,7 @@ class Editor extends import_eventemitter3.default {
         delta[val] = last2.pageBounds[max] - pageBounds[max] - 1;
       }
       for (const shape of shapes2) {
-        const shapeDelta = delta.clone();
-        const parent = this.getShapeParent(shape);
-        if (parent) {
-          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
-        }
-        shapeDelta.add(shape);
-        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+        changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta));
       }
       v += pageBounds[dim] + gap;
     }
@@ -5802,32 +5792,17 @@ class Editor extends import_eventemitter3.default {
     );
     if (shapeClustersToStretch.length < 2) return this;
     const commonBounds = import_Box.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";
-    }
+    const { val, min, dim } = AXIS[operation];
     this.run(() => {
       shapeClustersToStretch.forEach(({ shapes: shapes2, pageBounds }) => {
-        const localOffset = new import_Vec.Vec();
-        localOffset[val] = commonBounds[min] - pageBounds[min];
+        const pageOffset = new import_Vec.Vec();
+        pageOffset[val] = commonBounds[min] - pageBounds[min];
         const scaleOrigin = pageBounds.center.clone();
         scaleOrigin[val] = commonBounds[min];
         const scale = new import_Vec.Vec(1, 1);
         scale[val] = commonBounds[dim] / pageBounds[dim];
         for (const shape of shapes2) {
-          const shapeLocalOffset = localOffset.clone();
-          shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation());
-          shapeLocalOffset.add(shape);
-          const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
-          this.updateShape(changes);
+          this.updateShape(this.getChangesToTranslateShapeByPageDelta(shape, pageOffset));
           this.resizeShape(shape.id, scale, {
             initialBounds: this.getShapeGeometry(shape).bounds,
             scaleOrigin,
@@ -5870,7 +5845,7 @@ class Editor extends import_eventemitter3.default {
     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(
+      const pageOffset = new import_Vec.Vec(
         targetBounds.minX - commonBounds.minX + (pageBounds.minX - commonBounds.minX) * (scaleX - 1),
         targetBounds.minY - commonBounds.minY + (pageBounds.minY - commonBounds.minY) * (scaleY - 1)
       );
@@ -5879,11 +5854,7 @@ class Editor extends import_eventemitter3.default {
         targetBounds.minY + (pageBounds.minY - commonBounds.minY) * scaleY
       );
       for (const shape of shapes2) {
-        const shapeLocalOffset = localOffset.clone();
-        shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation());
-        shapeLocalOffset.add(shape);
-        const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
-        this.updateShape(changes);
+        this.updateShape(this.getChangesToTranslateShapeByPageDelta(shape, pageOffset));
         this.resizeShape(shape.id, scale, {
           initialBounds: this.getShapeGeometry(shape).bounds,
           scaleOrigin,
@@ -6302,12 +6273,17 @@ class Editor extends import_eventemitter3.default {
     let remaining = duration;
     let t;
     const animations = [];
+    const ignoreShapeLock = this._shouldIgnoreShapeLock;
     let partial, result;
     for (let i = 0, n = partials.length; i < n; i++) {
       partial = partials[i];
       if (!partial) continue;
       const shape = this.getShape(partial.id);
       if (!shape) continue;
+      const unlocks = shape.isLocked && Object.hasOwn(partial, "isLocked") && !partial.isLocked;
+      if (!ignoreShapeLock && !unlocks && this.isShapeOrAncestorLocked(shape)) {
+        continue;
+      }
       result = {
         start: (0, import_utils.structuredClone)(shape),
         end: applyPartialToRecordWithProps((0, import_utils.structuredClone)(shape), partial)
@@ -6323,7 +6299,7 @@ class Editor extends import_eventemitter3.default {
           (p) => p && animatingShapes2.get(p.id) === animationId
         );
         if (partialsToUpdate.length) {
-          this.updateShapes(partialsToUpdate);
+          this.run(() => this.updateShapes(partialsToUpdate), { ignoreShapeLock });
         }
         this.off("tick", handleTick);
         return;
@@ -6356,13 +6332,13 @@ class Editor extends import_eventemitter3.default {
       throw Error("Editor.groupShapes: must provide an array of shapes or shape ids");
     }
     if (this.getIsReadonly()) return this;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
-    if (ids.length <= 1) return this;
+    const ids = toShapeIds(shapes);
     const shapesToGroup = (0, import_utils.compact)(
       (this._shouldIgnoreShapeLock ? ids : this._getUnlockedShapeIds(ids)).map(
         (id) => this.getShape(id)
       )
     );
+    if (shapesToGroup.length <= 1) return this;
     const sortedShapeIds = shapesToGroup.sort(import_utils.sortByIndex).map((s) => s.id);
     const childBounds = (0, import_utils.compact)(shapesToGroup.map((shape) => this.getShapePageBounds(shape)));
     const pageBounds = import_Box.Box.Common(childBounds);
@@ -6371,8 +6347,11 @@ class Editor extends import_eventemitter3.default {
     }
     const { x, y } = pageBounds.point;
     const parentId = this.findCommonAncestor(shapesToGroup) ?? this.getCurrentPageId();
-    if (this.getCurrentToolId() !== "select") return this;
-    if (!this.isIn("select.idle")) {
+    if (!this.canCreateShapes([groupId])) {
+      alertMaxShapes(this);
+      return this;
+    }
+    if (this.isIn("select") && !this.isIn("select.idle")) {
       this.cancel();
     }
     const shapesWithRootParent = shapesToGroup.filter((shape) => shape.parentId === parentId).sort(import_utils.sortByIndex);
@@ -6400,15 +6379,14 @@ class Editor extends import_eventemitter3.default {
   ungroupShapes(shapes, opts = {}) {
     if (this.getIsReadonly()) return this;
     const { select = true } = opts;
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const shapesToUngroup = (0, import_utils.compact)(
       (this._shouldIgnoreShapeLock ? ids : this._getUnlockedShapeIds(ids)).map(
         (id) => this.getShape(id)
       )
     );
     if (shapesToUngroup.length === 0) return this;
-    if (this.getCurrentToolId() !== "select") return this;
-    if (!this.isIn("select.idle")) {
+    if (this.isIn("select") && !this.isIn("select.idle")) {
       this.cancel();
     }
     const idsToSelect = /* @__PURE__ */ new Set();
@@ -6422,16 +6400,16 @@ class Editor extends import_eventemitter3.default {
     });
     if (groups.length === 0) return this;
     this.run(() => {
-      let group;
       for (let i = 0, n = groups.length; i < n; i++) {
-        group = groups[i];
+        const group = this.getShape(groups[i].id);
+        if (!group) continue;
         const childIds = this.getSortedChildIdsForParent(group.id);
         for (let j = 0, n2 = childIds.length; j < n2; j++) {
           idsToSelect.add(childIds[j]);
         }
         this.reparentShapes(childIds, group.parentId, group.index);
       }
-      this.deleteShapes(groups.map((group2) => group2.id));
+      this.deleteShapes(groups.map((group) => group.id));
       if (select) {
         this.select(...idsToSelect);
       }
@@ -6512,14 +6490,14 @@ class Editor extends import_eventemitter3.default {
   }
   /** @internal */
   _getUnlockedShapeIds(ids) {
-    return ids.filter((id) => !this.getShape(id)?.isLocked);
+    return ids.filter((id) => !this.isShapeOrAncestorLocked(id));
   }
   deleteShapes(_ids) {
     if (this.getIsReadonly()) return this;
     if (!Array.isArray(_ids)) {
       throw Error("Editor.deleteShapes: must provide an array of shapes or shapeIds");
     }
-    const shapeIds = typeof _ids[0] === "string" ? _ids : _ids.map((s) => s.id);
+    const shapeIds = toShapeIds(_ids);
     const shapeIdsToDelete = this._shouldIgnoreShapeLock ? shapeIds : this._getUnlockedShapeIds(shapeIds);
     if (shapeIdsToDelete.length === 0) return this;
     const allShapeIdsToDelete = new Set(shapeIdsToDelete);
@@ -6864,7 +6842,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   getContentFromCurrentPage(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     if (!ids) return;
     if (ids.length === 0) return;
     const shapeIds = this.getShapeAndDescendantIds(ids);
@@ -6932,21 +6910,29 @@ class Editor extends import_eventemitter3.default {
     await Promise.allSettled(
       content.assets.map(async (asset) => {
         if ((asset.type === "image" || asset.type === "video") && !asset.props.src?.startsWith("data:image") && !asset.props.src?.startsWith("data:video") && !asset.props.src?.startsWith("http")) {
-          const assetWithDataUrl = (0, import_utils.structuredClone)(asset);
-          const objectUrl = await this.store.props.assets.resolve(asset, {
-            screenScale: 1,
-            steppedScreenScale: 1,
-            dpr: 1,
-            networkEffectiveType: null,
-            shouldResolveToOriginal: true
-          });
-          assetWithDataUrl.props.src = await import_utils.FileHelpers.blobToDataUrl(
-            await (0, import_utils.fetch)(objectUrl).then((r) => r.blob())
-          );
-          assets.push(assetWithDataUrl);
-        } else {
-          assets.push(asset);
+          try {
+            const objectUrl = await this.store.props.assets.resolve(asset, {
+              screenScale: 1,
+              steppedScreenScale: 1,
+              dpr: 1,
+              networkEffectiveType: null,
+              shouldResolveToOriginal: true
+            });
+            if (objectUrl) {
+              const response = await (0, import_utils.fetch)(objectUrl);
+              if (response.ok) {
+                const assetWithDataUrl = (0, import_utils.structuredClone)(asset);
+                assetWithDataUrl.props.src = await import_utils.FileHelpers.blobToDataUrl(await response.blob());
+                assets.push(assetWithDataUrl);
+                return;
+              }
+              console.warn(`Could not inline asset ${asset.id}: fetch returned ${response.status}`);
+            }
+          } catch (err) {
+            console.warn(`Could not inline asset ${asset.id}`, err);
+          }
         }
+        assets.push(asset);
       })
     );
     content.assets = assets;
@@ -7240,7 +7226,7 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   async getSvgElement(shapes, opts = {}) {
-    const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : toShapeIds(shapes);
     if (ids.length === 0) return void 0;
     await this.fonts.loadRequiredFontsForCurrentPage(this.options.maxFontsToLoadBeforeRender);
     return (0, import_exportToSvg.exportToSvg)(this, ids, opts);
@@ -8158,6 +8144,7 @@ class Editor extends import_eventemitter3.default {
             inputs.buttons.add(info.button);
             inputs.setIsPointing(true);
             inputs.setIsDragging(false);
+            this.stopCameraAnimation();
             if (!isPenMode && info.isPenDirect) {
               this.updateInstanceState({ isPenMode: true });
               this.interrupt();
@@ -8294,8 +8281,8 @@ class Editor extends import_eventemitter3.default {
         break;
       }
       case "keyboard": {
-        if (info.key === "ShiftRight") info.key = "ShiftLeft";
-        if (info.key === "AltRight") info.key = "AltLeft";
+        if (info.code === "ShiftRight") info.code = "ShiftLeft";
+        if (info.code === "AltRight") info.code = "AltLeft";
         if (info.code === "ControlRight") info.code = "ControlLeft";
         if (info.code === "MetaRight") info.code = "MetaLeft";
         switch (info.name) {
@@ -8665,6 +8652,9 @@ function pushShapeWithDescendants(editor, id, result) {
     pushShapeWithDescendants(editor, childIds[i], result);
   }
 }
+function toShapeIds(shapes) {
+  return typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+}
 function withIsolatedShapes(editor, shapeIds, callback) {
   let result;
   editor.run(
@@ -8687,7 +8677,7 @@ function withIsolatedShapes(editor, shapeIds, callback) {
             }
           }
         }
-        editor.deleteBindings([...bindingsToRemove], { isolateShapes: true });
+        editor._deleteBindings([...bindingsToRemove], { isolateShapes: true });
         try {
           result = import_utils.Result.ok(callback(bindingsWithBoth));
         } catch (error) {