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

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

@@ -75,6 +75,7 @@ import {
 import {
   DEFAULT_ANIMATION_OPTIONS,
   DEFAULT_CAMERA_OPTIONS,
+  FRAME_MS_60HZ,
   INTERNAL_POINTER_IDS,
   LEFT_MOUSE_BUTTON,
   MIDDLE_MOUSE_BUTTON,
@@ -135,6 +136,10 @@ import { UserPreferencesManager } from "./managers/UserPreferencesManager/UserPr
 import { OverlayManager } from "./overlays/OverlayManager.mjs";
 import { RootState } from "./tools/RootState.mjs";
 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 EventEmitter {
   id = uniqueId();
   constructor({
@@ -461,7 +466,7 @@ class Editor extends EventEmitter {
               }
             }
             if (deleteBindingIds.length) {
-              this.deleteBindings(deleteBindingIds);
+              this.store.remove(deleteBindingIds);
             }
           }
         },
@@ -1421,6 +1426,7 @@ class Editor extends EventEmitter {
    * @public
    **/
   updateDocumentSettings(settings) {
+    if (this.getIsReadonly()) return this;
     this.run(
       () => {
         this.store.put([{ ...this.getDocumentSettings(), ...settings }]);
@@ -1580,7 +1586,7 @@ class Editor extends EventEmitter {
    * @public
    */
   select(...shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes);
     this.setSelectedShapes(ids);
     return this;
   }
@@ -1595,7 +1601,7 @@ class Editor extends EventEmitter {
    * @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)));
@@ -1633,7 +1639,7 @@ class Editor extends EventEmitter {
     }
     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;
   }
   /**
@@ -1650,14 +1656,18 @@ class Editor extends EventEmitter {
     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) && !isPageId(firstParentId);
-    const filteredShapes = isSelectedWithinContainer ? this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId) : this.getCurrentPageShapes().filter((shape2) => isPageId(shape2.parentId));
-    const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(filteredShapes) : this.getCurrentPageShapesInReadingOrder();
+    const filteredShapes = this.getCurrentPageShapes().filter(
+      (shape2) => !this.isShapeOrAncestorLocked(shape2) && (isSelectedWithinContainer ? shape2.parentId === firstParentId : 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;
@@ -1756,13 +1766,14 @@ class Editor extends EventEmitter {
     });
     if (shapesInDirection.length === 0) return currentShapeId;
     const lowestScoringShape = minBy(shapesInDirection, ({ center }) => {
-      const distance = Vec.Dist2(currentCenter, center);
+      const distance = 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(Vec.Angle(currentCenter, center) * (180 / Math.PI));
-      const angleDeviation = Math.abs(angle - directionToAngle[direction]);
+      const angle = (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
@@ -2100,7 +2111,7 @@ class Editor extends EventEmitter {
    * @public
    */
   setHintingShapes(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = toShapeIds(shapes);
     this.run(
       () => {
         this._updateCurrentPageState({ hintingShapeIds: dedupe(ids) });
@@ -2130,7 +2141,7 @@ class Editor extends EventEmitter {
    * @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(
@@ -2537,14 +2548,16 @@ class Editor extends EventEmitter {
   setCamera(point, opts) {
     const { isLocked } = this._cameraOptions.__unsafe__getWithoutCapture();
     if (isLocked && !opts?.force) return this;
+    const _point = new 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 = 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();
@@ -2829,11 +2842,14 @@ class Editor extends EventEmitter {
   _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 Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width));
+      this._setCamera(
+        new Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width),
+        opts
+      );
       return;
     }
     const remaining = duration - elapsed;
@@ -2871,7 +2887,8 @@ class Editor extends EventEmitter {
       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);
@@ -2923,7 +2940,7 @@ class Editor extends EventEmitter {
         newCx += center.x / newCz - center.x / cz;
         newCy += center.y / newCz - center.y / cz;
       }
-      currentSpeed *= 1 - friction;
+      currentSpeed *= (1 - friction) ** (elapsed / FRAME_MS_60HZ);
       if (currentSpeed < speedThreshold) {
         cancel();
       } else {
@@ -2957,6 +2974,7 @@ class Editor extends EventEmitter {
       }
       const isOnSamePage = presence.currentPageId === this.getCurrentPageId();
       if (!isOnSamePage) {
+        this.markHistoryStoppingPoint("change-page");
         this.setCurrentPage(presence.currentPageId);
       }
       if (opts && opts.animation && !isOnSamePage) {
@@ -3788,7 +3806,9 @@ class Editor extends EventEmitter {
     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" }
@@ -4170,7 +4190,7 @@ class Editor extends EventEmitter {
     if (shapes.length === 0) {
       return;
     }
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const freshShapes = compact(ids.map((id) => this.getShape(id)));
     if (freshShapes.length === 1) {
       const parentId = freshShapes[0].parentId;
@@ -4267,12 +4287,14 @@ class Editor extends EventEmitter {
    */
   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,
@@ -4370,7 +4392,6 @@ class Editor extends EventEmitter {
             }
             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
@@ -4387,6 +4408,7 @@ class Editor extends EventEmitter {
                 inMarginClosestToEdgeHit = shape;
               }
             } else if (!inMarginClosestToEdgeHit) {
+              if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
               const { area } = geometry;
               if (area < inHollowSmallestArea) {
                 inHollowSmallestArea = area;
@@ -4397,6 +4419,9 @@ class Editor extends EventEmitter {
         }
       } else {
         if (distance < this.getHitTestMargin()) {
+          if (inMarginClosestToEdgeHit && inMarginClosestToEdgeDistance <= distance) {
+            return inMarginClosestToEdgeHit;
+          }
           return shape;
         }
       }
@@ -4673,7 +4698,7 @@ class Editor extends EventEmitter {
    * @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 = isPageId(parentId) ? Mat.Identity() : this.getShapePageTransform(parentId);
@@ -4902,6 +4927,7 @@ class Editor extends EventEmitter {
    * 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);
@@ -4936,6 +4962,7 @@ class Editor extends EventEmitter {
    * 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;
@@ -4964,6 +4991,16 @@ class Editor extends EventEmitter {
    * 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(() => {
@@ -5022,7 +5059,7 @@ class Editor extends EventEmitter {
    * @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 = getRotationSnapshot({ editor: this, ids });
     if (!snapshot) return this;
@@ -5059,6 +5096,14 @@ class Editor extends EventEmitter {
     }
     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 = Vec.From(pageDelta).rot(-this.getShapeParentTransform(shape).rotation());
+    return this.getChangesToTranslateShape(shape, localDelta.add(shape));
+  }
   /**
    * Move shapes by a delta.
    *
@@ -5071,14 +5116,12 @@ class Editor extends EventEmitter {
    * @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 = 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;
@@ -5099,7 +5142,7 @@ class Editor extends EventEmitter {
    */
   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);
@@ -5208,7 +5251,7 @@ class Editor extends EventEmitter {
    * @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();
@@ -5244,7 +5287,7 @@ class Editor extends EventEmitter {
    * @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 = [];
@@ -5283,7 +5326,7 @@ class Editor extends EventEmitter {
    * @public
    */
   sendToBack(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = getReorderingShapesChanges(this, "toBack", ids, {
       considerAllShapes: true
     });
@@ -5313,7 +5356,7 @@ class Editor extends EventEmitter {
    * @public
    */
   sendBackward(shapes, opts = {}) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = getReorderingShapesChanges(this, "backward", ids, opts);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5341,7 +5384,7 @@ class Editor extends EventEmitter {
    * @public
    */
   bringForward(shapes, opts = {}) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = getReorderingShapesChanges(this, "forward", ids, opts);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5360,7 +5403,7 @@ class Editor extends EventEmitter {
    * @public
    */
   bringToFront(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     const changes = getReorderingShapesChanges(this, "toFront", ids);
     if (changes) this.updateShapes(changes);
     return this;
@@ -5372,7 +5415,7 @@ class Editor extends EventEmitter {
    * @internal
    */
   getShapeClusters(shapes, type, opts) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
+    const ids = toShapeIds(shapes);
     let freshShapes = compact(ids.map((id) => this.getShape(id)));
     if (opts?.filterAxisAligned) {
       freshShapes = freshShapes.filter((s) => {
@@ -5397,7 +5440,7 @@ class Editor extends EventEmitter {
       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,
@@ -5453,7 +5496,7 @@ class Editor extends EventEmitter {
    */
   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 = compact(ids.map((id) => this.getShape(id)));
     for (const shape of shapesToFlipFirstPass) {
       if (this.isShapeOfType(shape, "group")) {
@@ -5527,21 +5570,7 @@ class Editor extends EventEmitter {
     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) {
@@ -5580,13 +5609,7 @@ class Editor extends EventEmitter {
       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) {
-          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;
     }
@@ -5666,13 +5689,7 @@ class Editor extends EventEmitter {
     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) {
-          shapeDelta.rot(-this.getShapeParentTransform(shape).rotation());
-        }
-        shapeDelta.add(shape);
-        changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
+        changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta));
       }
     }
     if (changes.length) {
@@ -5732,13 +5749,7 @@ class Editor extends EventEmitter {
         }
       }
       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);
@@ -5762,27 +5773,13 @@ class Editor extends EventEmitter {
     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
@@ -5806,13 +5803,7 @@ class Editor extends EventEmitter {
         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;
     }
@@ -5842,32 +5833,17 @@ class Editor extends EventEmitter {
     );
     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";
-    }
+    const { val, min, dim } = AXIS[operation];
     this.run(() => {
       shapeClustersToStretch.forEach(({ shapes: shapes2, pageBounds }) => {
-        const localOffset = new Vec();
-        localOffset[val] = commonBounds[min] - pageBounds[min];
+        const pageOffset = new Vec();
+        pageOffset[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();
-          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,
@@ -5910,7 +5886,7 @@ class Editor extends EventEmitter {
     const scaleY = targetBounds.height / commonBounds.height;
     const scale = new Vec(scaleX, scaleY);
     shapeClusters.forEach(({ shapes: shapes2, pageBounds }) => {
-      const localOffset = new Vec(
+      const pageOffset = new Vec(
         targetBounds.minX - commonBounds.minX + (pageBounds.minX - commonBounds.minX) * (scaleX - 1),
         targetBounds.minY - commonBounds.minY + (pageBounds.minY - commonBounds.minY) * (scaleY - 1)
       );
@@ -5919,11 +5895,7 @@ class Editor extends EventEmitter {
         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,
@@ -6342,12 +6314,17 @@ class Editor extends EventEmitter {
     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: structuredClone(shape),
         end: applyPartialToRecordWithProps(structuredClone(shape), partial)
@@ -6363,7 +6340,7 @@ class Editor extends EventEmitter {
           (p) => p && animatingShapes2.get(p.id) === animationId
         );
         if (partialsToUpdate.length) {
-          this.updateShapes(partialsToUpdate);
+          this.run(() => this.updateShapes(partialsToUpdate), { ignoreShapeLock });
         }
         this.off("tick", handleTick);
         return;
@@ -6396,13 +6373,13 @@ class Editor extends EventEmitter {
       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 = compact(
       (this._shouldIgnoreShapeLock ? ids : this._getUnlockedShapeIds(ids)).map(
         (id) => this.getShape(id)
       )
     );
+    if (shapesToGroup.length <= 1) return this;
     const sortedShapeIds = shapesToGroup.sort(sortByIndex).map((s) => s.id);
     const childBounds = compact(shapesToGroup.map((shape) => this.getShapePageBounds(shape)));
     const pageBounds = Box.Common(childBounds);
@@ -6411,8 +6388,11 @@ class Editor extends EventEmitter {
     }
     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(sortByIndex);
@@ -6440,15 +6420,14 @@ class Editor extends EventEmitter {
   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 = 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();
@@ -6462,16 +6441,16 @@ class Editor extends EventEmitter {
     });
     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);
       }
@@ -6552,14 +6531,14 @@ class Editor extends EventEmitter {
   }
   /** @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);
@@ -6904,7 +6883,7 @@ class Editor extends EventEmitter {
    * @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);
@@ -6972,21 +6951,29 @@ class Editor extends EventEmitter {
     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 = 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 FileHelpers.blobToDataUrl(
-            await 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 fetch(objectUrl);
+              if (response.ok) {
+                const assetWithDataUrl = structuredClone(asset);
+                assetWithDataUrl.props.src = await 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;
@@ -7280,7 +7267,7 @@ class Editor extends EventEmitter {
    * @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 exportToSvg(this, ids, opts);
@@ -8198,6 +8185,7 @@ class Editor extends EventEmitter {
             inputs.buttons.add(info.button);
             inputs.setIsPointing(true);
             inputs.setIsDragging(false);
+            this.stopCameraAnimation();
             if (!isPenMode && info.isPenDirect) {
               this.updateInstanceState({ isPenMode: true });
               this.interrupt();
@@ -8334,8 +8322,8 @@ class Editor extends EventEmitter {
         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) {
@@ -8705,6 +8693,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(
@@ -8727,7 +8718,7 @@ function withIsolatedShapes(editor, shapeIds, callback) {
             }
           }
         }
-        editor.deleteBindings([...bindingsToRemove], { isolateShapes: true });
+        editor._deleteBindings([...bindingsToRemove], { isolateShapes: true });
         try {
           result = Result.ok(callback(bindingsWithBoth));
         } catch (error) {