@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

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

@@ -136,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({
@@ -462,7 +466,7 @@ class Editor extends EventEmitter {
               }
             }
             if (deleteBindingIds.length) {
-              this.deleteBindings(deleteBindingIds);
+              this.store.remove(deleteBindingIds);
             }
           }
         },
@@ -1422,6 +1426,7 @@ class Editor extends EventEmitter {
    * @public
    **/
   updateDocumentSettings(settings) {
+    if (this.getIsReadonly()) return this;
     this.run(
       () => {
         this.store.put([{ ...this.getDocumentSettings(), ...settings }]);
@@ -1444,7 +1449,7 @@ class Editor extends EventEmitter {
   updateInstanceState(partial, historyOptions) {
     this._updateInstanceState(partial, { history: "ignore", ...historyOptions });
     if (partial.isChangingStyle !== void 0) {
-      clearTimeout(this._isChangingStyleTimeout);
+      this.timers.clearTimeout(this._isChangingStyleTimeout);
       if (partial.isChangingStyle === true) {
         this._isChangingStyleTimeout = this.timers.setTimeout(() => {
           this._updateInstanceState({ isChangingStyle: false }, { history: "ignore" });
@@ -1581,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;
   }
@@ -1596,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)));
@@ -1634,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;
   }
   /**
@@ -1651,12 +1656,15 @@ 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 startIndex = currentIndex === -1 && direction === "prev" ? 0 : currentIndex;
       const adjacentIndex = (startIndex + (direction === "next" ? 1 : -1) + shapeIds.length) % shapeIds.length;
@@ -1758,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
@@ -2102,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) });
@@ -2132,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(
@@ -2539,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();
@@ -2831,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;
@@ -2873,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);
@@ -2959,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) {
@@ -3790,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" }
@@ -4172,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;
@@ -4269,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,
@@ -4372,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
@@ -4389,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;
@@ -4399,6 +4419,9 @@ class Editor extends EventEmitter {
         }
       } else {
         if (distance < this.getHitTestMargin()) {
+          if (inMarginClosestToEdgeHit && inMarginClosestToEdgeDistance <= distance) {
+            return inMarginClosestToEdgeHit;
+          }
           return shape;
         }
       }
@@ -4675,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);
@@ -4904,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);
@@ -4938,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;
@@ -4966,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(() => {
@@ -5024,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;
@@ -5061,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.
    *
@@ -5073,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;
@@ -5101,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);
@@ -5210,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();
@@ -5246,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 = [];
@@ -5285,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
     });
@@ -5315,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;
@@ -5343,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;
@@ -5362,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;
@@ -5374,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) => {
@@ -5399,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,
@@ -5455,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")) {
@@ -5529,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) {
@@ -5582,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;
     }
@@ -5668,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) {
@@ -5734,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);
@@ -5764,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
@@ -5808,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;
     }
@@ -5844,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,
@@ -5912,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)
       );
@@ -5921,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,
@@ -6344,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)
@@ -6365,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;
@@ -6398,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);
@@ -6413,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);
@@ -6442,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();
@@ -6464,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);
       }
@@ -6554,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);
@@ -6906,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);
@@ -6974,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;
@@ -7282,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);
@@ -7878,22 +7863,22 @@ class Editor extends EventEmitter {
     const releaseCtrl = this._ctrlKeyTimeout !== -1;
     const releaseMeta = this._metaKeyTimeout !== -1;
     if (releaseShift) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       this.inputs.setShiftKey(false);
     }
     if (releaseAlt) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       this.inputs.setAltKey(false);
     }
     if (releaseCtrl) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       this.inputs.setCtrlKey(false);
     }
     if (releaseMeta) {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       this.inputs.setMetaKey(false);
     }
@@ -8007,28 +7992,28 @@ class Editor extends EventEmitter {
       return;
     }
     if (info.shiftKey) {
-      clearTimeout(this._shiftKeyTimeout);
+      this.timers.clearTimeout(this._shiftKeyTimeout);
       this._shiftKeyTimeout = -1;
       inputs.setShiftKey(true);
     } else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
       this._shiftKeyTimeout = this.timers.setTimeout(this._releaseShiftKey, 150);
     }
     if (info.altKey) {
-      clearTimeout(this._altKeyTimeout);
+      this.timers.clearTimeout(this._altKeyTimeout);
       this._altKeyTimeout = -1;
       inputs.setAltKey(true);
     } else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
       this._altKeyTimeout = this.timers.setTimeout(this._releaseAltKey, 150);
     }
     if (info.ctrlKey) {
-      clearTimeout(this._ctrlKeyTimeout);
+      this.timers.clearTimeout(this._ctrlKeyTimeout);
       this._ctrlKeyTimeout = -1;
       inputs.setCtrlKey(true);
     } else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
       this._ctrlKeyTimeout = this.timers.setTimeout(this._releaseCtrlKey, 150);
     }
     if (info.metaKey && info.name !== "key_up") {
-      clearTimeout(this._metaKeyTimeout);
+      this.timers.clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       inputs.setMetaKey(true);
     } else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
@@ -8042,8 +8027,7 @@ class Editor extends EventEmitter {
     const cameraOptions = this._cameraOptions.__unsafe__getWithoutCapture();
     switch (type) {
       case "pinch": {
-        if (cameraOptions.isLocked) return;
-        clearTimeout(this._longPressTimeout);
+        this.timers.clearTimeout(this._longPressTimeout);
         this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pinch_start": {
@@ -8064,6 +8048,7 @@ class Editor extends EventEmitter {
           }
           case "pinch": {
             if (!inputs.getIsPinching()) return;
+            if (cameraOptions.isLocked) return;
             const {
               point: { z = 1 },
               delta: { x: dx, y: dy }
@@ -8119,7 +8104,7 @@ class Editor extends EventEmitter {
         const { panSpeed, zoomSpeed } = cameraOptions;
         let wheelBehavior = cameraOptions.wheelBehavior;
         const inputMode = this.user.getUserPreferences().inputMode;
-        if (inputMode !== null) {
+        if (inputMode !== null && wheelBehavior !== "none") {
           wheelBehavior = inputMode === "trackpad" ? "pan" : "zoom";
         }
         if (wheelBehavior !== "none") {
@@ -8171,12 +8156,12 @@ class Editor extends EventEmitter {
       }
       case "pointer": {
         if (inputs.getIsPinching()) return;
-        this.inputs.updateFromEvent(info);
         const { isPen } = info;
         const { isPenMode } = instanceState;
+        if (isPenMode && !isPen) return;
+        this.inputs.updateFromEvent(info);
         switch (info.name) {
           case "pointer_down": {
-            if (isPenMode && !isPen) return;
             this._releaseDebouncedModifiers();
             if (!this.inputs.getIsPanning()) {
               this._longPressTimeout = this.timers.setTimeout(() => {
@@ -8200,11 +8185,12 @@ 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();
             }
-            if (info.button === STYLUS_ERASER_BUTTON) {
+            if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
               this._restoreToolId = this.getCurrentToolId();
               this.complete();
               this.setCurrentTool("eraser");
@@ -8213,10 +8199,10 @@ class Editor extends EventEmitter {
                 this._prevCursor = this.getInstanceState().cursor.type;
               }
               this.inputs.setIsPanning(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             } else if (info.button === RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
               this.inputs.setIsRightPointing(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
               return this;
             }
             if (this.inputs.getIsPanning()) {
@@ -8227,7 +8213,6 @@ class Editor extends EventEmitter {
             break;
           }
           case "pointer_move": {
-            if (!isPen && isPenMode) return;
             const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera());
             if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
               const currentScreenPoint = this.inputs.getCurrentScreenPoint();
@@ -8258,16 +8243,15 @@ class Editor extends EventEmitter {
             }
             if (inputs.getIsPointing() && !inputs.getIsDragging() && Vec.Dist2(inputs.getOriginPagePoint(), inputs.getCurrentPagePoint()) * this.getZoomLevel() > (instanceState.isCoarsePointer ? this.options.coarseDragDistanceSquared : this.options.dragDistanceSquared) / cz) {
               inputs.setIsDragging(true);
-              clearTimeout(this._longPressTimeout);
+              this.timers.clearTimeout(this._longPressTimeout);
             }
             break;
           }
           case "pointer_up": {
             inputs.setIsDragging(false);
             inputs.setIsPointing(false);
-            clearTimeout(this._longPressTimeout);
+            this.timers.clearTimeout(this._longPressTimeout);
             inputs.buttons.delete(info.button);
-            if (instanceState.isPenMode && !isPen) return;
             if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
               this.inputs.setIsRightPointing(false);
               this._selectedShapeIdsAtPointerDown = [];
@@ -8323,7 +8307,7 @@ class Editor extends EventEmitter {
                 });
               }
             } else {
-              if (info.button === STYLUS_ERASER_BUTTON) {
+              if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant("eraser")) {
                 this.complete();
                 this.setCurrentTool(this._restoreToolId);
               }
@@ -8336,8 +8320,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) {
@@ -8350,7 +8334,7 @@ class Editor extends EventEmitter {
                 }
                 this.inputs.setIsPanning(true);
                 this.inputs.setIsSpacebarPanning(true);
-                clearTimeout(this._longPressTimeout);
+                this.timers.clearTimeout(this._longPressTimeout);
                 this.setCursor({
                   type: this.inputs.getIsPointing() ? "grabbing" : "grab",
                   rotation: 0
@@ -8376,7 +8360,7 @@ class Editor extends EventEmitter {
                     break;
                   }
                 }
-                if (offset) {
+                if (offset && !cameraOptions.isLocked) {
                   const bounds = this.getViewportPageBounds();
                   const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }));
                   this._animateToViewport(next, { animation: { duration: 320 } });
@@ -8416,7 +8400,7 @@ class Editor extends EventEmitter {
         this.setCurrentTool("select");
       }
       const { isPenMode } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID);
-      if (info.isPen === isPenMode) {
+      if (!isPenMode || info.isPen) {
         const clickInfo = this._clickManager.handlePointerEvent(info);
         if (info.name !== clickInfo.name) {
           this.root.handleEvent(info);
@@ -8438,7 +8422,7 @@ class Editor extends EventEmitter {
   maybeTrackPerformance(name) {
     if (debugFlags.measurePerformance.get()) {
       if (this.performanceTracker.isStarted()) {
-        clearTimeout(this.performanceTrackerTimeout);
+        this.timers.clearTimeout(this.performanceTrackerTimeout);
       } else {
         this.performanceTracker.start(name);
       }
@@ -8707,6 +8691,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(
@@ -8729,7 +8716,7 @@ function withIsolatedShapes(editor, shapeIds, callback) {
             }
           }
         }
-        editor.deleteBindings([...bindingsToRemove], { isolateShapes: true });
+        editor._deleteBindings([...bindingsToRemove], { isolateShapes: true });
         try {
           result = Result.ok(callback(bindingsWithBoth));
         } catch (error) {