@tldraw/editor 5.4.0-next.ebc95cf01337 → 5.4.0

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

@@ -39,6 +39,7 @@ import {
   Result,
   ZERO_INDEX_KEY,
   annotateError,
+  areArraysShallowEqual,
   assert,
   assertExists,
   bind,
@@ -83,6 +84,7 @@ import {
 import { getOwnerWindow } from "../exports/domUtils.mjs";
 import { exportToSvg } from "../exports/exportToSvg.mjs";
 import { getSvgAsImageWithOptions, trimSvgToContent } from "../exports/getSvgAsImage.mjs";
+import { registerMountedEditor, unregisterMountedEditor } from "../globals/editors.mjs";
 import { tlmenus } from "../globals/menus.mjs";
 import { tltime } from "../globals/time.mjs";
 import { defaultTldrawOptions } from "../options.mjs";
@@ -91,7 +93,13 @@ import { EASINGS } from "../primitives/easings.mjs";
 import { Group2d } from "../primitives/geometry/Group2d.mjs";
 import { intersectPolygonPolygon } from "../primitives/intersect.mjs";
 import { Mat } from "../primitives/Mat.mjs";
-import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from "../primitives/utils.mjs";
+import {
+  HALF_PI,
+  approximately,
+  areAnglesCompatible,
+  clamp,
+  pointInPolygon
+} from "../primitives/utils.mjs";
 import { Vec } from "../primitives/Vec.mjs";
 import { areShapesContentEqual } from "../utils/areShapesContentEqual.mjs";
 import { dataUrlToFile } from "../utils/assets.mjs";
@@ -289,6 +297,10 @@ class Editor extends EventEmitter {
         if (!nextPageState) nextPageState = { ...prevPageState };
         nextPageState.editingShapeId = null;
       }
+      if (prevPageState.croppingShapeId && shapesNoLongerInPage.has(prevPageState.croppingShapeId)) {
+        if (!nextPageState) nextPageState = { ...prevPageState };
+        nextPageState.croppingShapeId = null;
+      }
       const hintingShapeIds = prevPageState.hintingShapeIds.filter(
         (id) => !shapesNoLongerInPage.has(id)
       );
@@ -531,10 +543,11 @@ class Editor extends EventEmitter {
               this.cancelDoubleClick();
             }
             if (prev?.selectedShapeIds !== next?.selectedShapeIds) {
+              const selectedShapeIds = new Set(next.selectedShapeIds);
               const filtered = next.selectedShapeIds.filter((id) => {
                 let parentId = this.getShape(id)?.parentId;
                 while (isShapeId(parentId)) {
-                  if (next.selectedShapeIds.includes(parentId)) {
+                  if (selectedShapeIds.has(parentId)) {
                     return false;
                   }
                   parentId = this.getShape(parentId)?.parentId;
@@ -604,9 +617,11 @@ class Editor extends EventEmitter {
     this.on("tick", this._flushEventsForTick);
     this.on("mount", () => {
       this._isMounted.set(true);
+      registerMountedEditor(this);
     });
     this.on("unmount", () => {
       this._isMounted.set(false);
+      unregisterMountedEditor(this);
     });
     this.timers.requestAnimationFrame(() => {
       this._tickManager.start();
@@ -616,7 +631,10 @@ class Editor extends EventEmitter {
       const mode = this.store.props.collaboration.mode;
       this.disposables.add(
         react("update collaboration mode", () => {
-          this.store.put([{ ...this.getInstanceState(), isReadonly: mode.get() === "readonly" }]);
+          const isReadonly = mode.get() === "readonly";
+          unsafe__withoutCapture(
+            () => this._updateInstanceState({ isReadonly }, { history: "ignore" })
+          );
         })
       );
     }
@@ -646,6 +664,14 @@ class Editor extends EventEmitter {
     );
   }
   options;
+  /**
+   * The license manager whose feature flags apply to this editor. Assigned by `<TldrawEditor />`
+   * when it creates the editor, so that UI rendered outside the editor tree can resolve the
+   * editor's license through the editor instance. Undefined for editors created directly.
+   *
+   * @internal
+   */
+  licenseManager;
   contextId = uniqueId();
   /**
    * The editor's store
@@ -840,6 +866,7 @@ class Editor extends EventEmitter {
     if (this._isMounted.get()) {
       this.emit("unmount");
     }
+    unregisterMountedEditor(this);
     this.stopCameraAnimation();
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
@@ -965,7 +992,7 @@ class Editor extends EventEmitter {
   getShapeUtil(arg) {
     const type = typeof arg === "string" ? arg : arg.type;
     const shapeUtil = getOwnProperty(this.shapeUtils, type);
-    assert(shapeUtil, `No shape util found for type "${type}"`);
+    if (!shapeUtil) throw new Error(`No shape util found for type "${type}"`);
     return shapeUtil;
   }
   hasShapeUtil(arg) {
@@ -1754,7 +1781,9 @@ class Editor extends EventEmitter {
     const selectedShapes = this.getSelectedShapes();
     if (!selectedShapes.length) return;
     const selectedShape = selectedShapes[0];
-    const children = this.getSortedChildIdsForParent(selectedShape.id).map((id) => this.getShape(id)).filter((i) => i);
+    const children = compact(
+      this.getSortedChildIdsForParent(selectedShape.id).map((id) => this.getShape(id))
+    );
     const sortedChildren = this._getShapesInReadingOrder(children);
     if (sortedChildren.length === 0) return;
     this._selectShapesAndZoom([sortedChildren[0].id]);
@@ -1821,18 +1850,13 @@ class Editor extends EventEmitter {
    * @internal
    */
   getShapesSharedRotation(shapeIds) {
-    let foundFirst = false;
     let rotation = 0;
     for (let i = 0, n = shapeIds.length; i < n; i++) {
-      const pageTransform = this.getShapePageTransform(shapeIds[i]);
-      if (!pageTransform) continue;
-      if (foundFirst) {
-        if (pageTransform.rotation() !== rotation) {
-          return 0;
-        }
-      } else {
-        foundFirst = true;
-        rotation = pageTransform.rotation();
+      const pageRotation = this.getShapePageTransform(shapeIds[i]).rotation();
+      if (i === 0) {
+        rotation = pageRotation;
+      } else if (pageRotation !== rotation) {
+        return 0;
       }
     }
     return rotation;
@@ -1858,11 +1882,9 @@ class Editor extends EventEmitter {
       return bounds;
     }
     const boxFromRotatedVertices = Box.FromPoints(
-      shapeIds.flatMap((id) => {
-        const pageTransform = this.getShapePageTransform(id);
-        if (!pageTransform) return [];
-        return pageTransform.applyToPoints(this.getShapeGeometry(id).bounds.corners);
-      }).map((p) => p.rot(-selectionRotation))
+      shapeIds.flatMap(
+        (id) => this.getShapePageTransform(id).applyToPoints(this.getShapeGeometry(id).bounds.corners)
+      ).map((p) => p.rot(-selectionRotation))
     );
     boxFromRotatedVertices.point = boxFromRotatedVertices.point.rot(selectionRotation);
     return boxFromRotatedVertices;
@@ -1873,9 +1895,14 @@ class Editor extends EventEmitter {
   getSelectionRotatedScreenBounds() {
     const bounds = this.getSelectionRotatedPageBounds();
     if (!bounds) return void 0;
-    const { x, y } = this.pageToScreen(bounds.point);
-    const zoom = this.getZoomLevel();
-    return new Box(x, y, bounds.width * zoom, bounds.height * zoom);
+    const screenBounds = this.getViewportScreenBounds();
+    const { x: cx, y: cy, z: zoom } = this.getCamera();
+    return new Box(
+      (bounds.x + cx) * zoom + screenBounds.x,
+      (bounds.y + cy) * zoom + screenBounds.y,
+      bounds.width * zoom,
+      bounds.height * zoom
+    );
   }
   getFocusedGroupId() {
     return this.getCurrentPageState().focusedGroupId ?? this.getCurrentPageId();
@@ -1976,42 +2003,28 @@ class Editor extends EventEmitter {
    */
   setEditingShape(shape) {
     const id = typeof shape === "string" ? shape : shape?.id ?? null;
-    if (!id) {
+    if (id && !this.canEditShape(id)) return this;
+    this.run(() => {
+      const prevEditingShapeId = this.getEditingShapeId();
+      if (prevEditingShapeId) {
+        const prevEditingShape = this.getShape(prevEditingShapeId);
+        if (prevEditingShape) {
+          this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
+        }
+      }
       this.run(
         () => {
-          const prevEditingShapeId = this.getEditingShapeId();
-          if (prevEditingShapeId) {
-            const prevEditingShape = this.getShape(prevEditingShapeId);
-            if (prevEditingShape) {
-              this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
-            }
-          }
           this._updateCurrentPageState({ editingShapeId: null });
           this._currentRichTextEditor.set(null);
+          if (!id) return;
+          this.select(id);
+          this._updateCurrentPageState({ editingShapeId: id });
+          const nextEditingShape = this.getShape(id);
+          this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape);
         },
         { history: "ignore" }
       );
-      return this;
-    }
-    if (!this.canEditShape(id)) return this;
-    this.run(
-      () => {
-        const prevEditingShapeId = this.getEditingShapeId();
-        if (prevEditingShapeId) {
-          const prevEditingShape = this.getShape(prevEditingShapeId);
-          if (prevEditingShape) {
-            this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
-          }
-        }
-        this._updateCurrentPageState({ editingShapeId: null });
-        this._currentRichTextEditor.set(null);
-        this.select(id);
-        this._updateCurrentPageState({ editingShapeId: id });
-        const nextEditingShape = this.getShape(id);
-        this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape);
-      },
-      { history: "ignore" }
-    );
+    });
     return this;
   }
   // Rich text editor
@@ -2117,19 +2130,12 @@ class Editor extends EventEmitter {
    * @public
    */
   setErasingShapes(shapes) {
-    const ids = typeof shapes[0] === "string" ? shapes : shapes.map((shape) => shape.id);
+    const ids = typeof shapes[0] === "string" ? shapes.slice() : shapes.map((shape) => shape.id);
     ids.sort();
     const erasingShapeIds = this.getErasingShapeIds();
     this.run(
       () => {
-        if (ids.length === erasingShapeIds.length) {
-          for (let i = 0; i < ids.length; i++) {
-            if (ids[i] !== erasingShapeIds[i]) {
-              this._updateCurrentPageState({ erasingShapeIds: ids });
-              break;
-            }
-          }
-        } else {
+        if (!areArraysShallowEqual(ids, erasingShapeIds)) {
           this._updateCurrentPageState({ erasingShapeIds: ids });
         }
       },
@@ -2162,6 +2168,7 @@ class Editor extends EventEmitter {
     if (!_shape) return false;
     const util = this.getShapeUtil(_shape);
     if (!util.canCrop(_shape)) return false;
+    if (this.getIsReadonly()) return false;
     if (this.isShapeOrAncestorLocked(_shape)) return false;
     return true;
   }
@@ -2226,11 +2233,11 @@ class Editor extends EventEmitter {
     const collaborators = this.getCollaborators();
     let leaderPresence = null;
     while (targetUserId && !visited.includes(targetUserId)) {
-      leaderPresence = collaborators.find((c) => c.userId === targetUserId) ?? null;
-      targetUserId = leaderPresence?.followingUserId ?? null;
-      if (leaderPresence) {
-        visited.push(leaderPresence.userId);
-      }
+      const nextPresence = collaborators.find((c) => c.userId === targetUserId);
+      if (!nextPresence) break;
+      leaderPresence = nextPresence;
+      targetUserId = nextPresence.followingUserId ?? null;
+      visited.push(nextPresence.userId);
     }
     return leaderPresence;
   }
@@ -2293,39 +2300,7 @@ class Editor extends EventEmitter {
    *
    * @public */
   getInitialZoom() {
-    const cameraOptions = this.getCameraOptions();
-    if (!cameraOptions.constraints) return 1;
-    if (cameraOptions.constraints.initialZoom === "default") return 1;
-    const { zx, zy } = getCameraFitXFitY(this, cameraOptions);
-    switch (cameraOptions.constraints.initialZoom) {
-      case "fit-min": {
-        return Math.max(zx, zy);
-      }
-      case "fit-max": {
-        return Math.min(zx, zy);
-      }
-      case "fit-x": {
-        return zx;
-      }
-      case "fit-y": {
-        return zy;
-      }
-      case "fit-min-100": {
-        return Math.min(1, Math.max(zx, zy));
-      }
-      case "fit-max-100": {
-        return Math.min(1, Math.min(zx, zy));
-      }
-      case "fit-x-100": {
-        return Math.min(1, zx);
-      }
-      case "fit-y-100": {
-        return Math.min(1, zy);
-      }
-      default: {
-        throw exhaustiveSwitchError(cameraOptions.constraints.initialZoom);
-      }
-    }
+    return this._getFitZoom(this.getCameraOptions().constraints?.initialZoom ?? "default");
   }
   /**
    * Get the camera's base level for calculating actual zoom levels based on the zoom steps.
@@ -2337,11 +2312,13 @@ class Editor extends EventEmitter {
    *
    * @public */
   getBaseZoom() {
+    return this._getFitZoom(this.getCameraOptions().constraints?.baseZoom ?? "default");
+  }
+  _getFitZoom(fit) {
     const cameraOptions = this.getCameraOptions();
-    if (!cameraOptions.constraints) return 1;
-    if (cameraOptions.constraints.baseZoom === "default") return 1;
+    if (!cameraOptions.constraints || fit === "default") return 1;
     const { zx, zy } = getCameraFitXFitY(this, cameraOptions);
-    switch (cameraOptions.constraints.baseZoom) {
+    switch (fit) {
       case "fit-min": {
         return Math.max(zx, zy);
       }
@@ -2367,7 +2344,7 @@ class Editor extends EventEmitter {
         return Math.min(1, zy);
       }
       default: {
-        throw exhaustiveSwitchError(cameraOptions.constraints.baseZoom);
+        throw exhaustiveSwitchError(fit);
       }
     }
   }
@@ -2401,7 +2378,7 @@ class Editor extends EventEmitter {
       ...this._cameraOptions.__unsafe__getWithoutCapture(),
       ...opts
     });
-    if (next.zoomSteps?.length < 1) next.zoomSteps = [1];
+    if (!next.zoomSteps || next.zoomSteps.length < 1) next.zoomSteps = [1];
     this._cameraOptions.set(next);
     this.setCamera(this.getCamera());
     return this;
@@ -2422,8 +2399,8 @@ class Editor extends EventEmitter {
       const vsb = this.getViewportScreenBounds();
       if (cameraOptions.constraints) {
         const { constraints } = cameraOptions;
-        const py = Math.min(constraints.padding.y, vsb.w / 2);
-        const px = Math.min(constraints.padding.x, vsb.h / 2);
+        const px = Math.min(constraints.padding.x, vsb.w / 2);
+        const py = Math.min(constraints.padding.y, vsb.h / 2);
         const bounds = Box.From(cameraOptions.constraints.bounds);
         const zx = (vsb.w - px * 2) / bounds.w;
         const zy = (vsb.h - py * 2) / bounds.h;
@@ -2462,12 +2439,12 @@ class Editor extends EventEmitter {
               break;
             }
             case "inside": {
-              if (z < zx) x = clamp(x, minX, (vsb.w - px) / z - bounds.w);
+              if (z < zx) x = clamp(x, minX, (vsb.w - px) / z - bounds.w - bounds.x);
               else x = clamp(x, minX + freeW, minX);
               break;
             }
             case "outside": {
-              x = clamp(x, px / z - bounds.w, (vsb.w - px) / z);
+              x = clamp(x, px / z - bounds.w - bounds.x, (vsb.w - px) / z - bounds.x);
               break;
             }
             case "free": {
@@ -2488,12 +2465,12 @@ class Editor extends EventEmitter {
               break;
             }
             case "inside": {
-              if (z < zy) y = clamp(y, minY, (vsb.h - py) / z - bounds.h);
+              if (z < zy) y = clamp(y, minY, (vsb.h - py) / z - bounds.h - bounds.y);
               else y = clamp(y, minY + freeH, minY);
               break;
             }
             case "outside": {
-              y = clamp(y, py / z - bounds.h, (vsb.h - py) / z);
+              y = clamp(y, py / z - bounds.h - bounds.y, (vsb.h - py) / z - bounds.y);
               break;
             }
             case "free": {
@@ -2861,9 +2838,9 @@ class Editor extends EventEmitter {
     }
     const remaining = duration - elapsed;
     const t = easing(1 - remaining / duration);
-    const left = start.minX + (end.minX - start.minX) * t;
-    const top = start.minY + (end.minY - start.minY) * t;
-    const right = start.maxX + (end.maxX - start.maxX) * t;
+    const left = lerp(start.minX, end.minX, t);
+    const top = lerp(start.minY, end.minY, t);
+    const right = lerp(start.maxX, end.maxX, t);
     this._setCamera(new Vec(-left, -top, this.getViewportScreenBounds().width / (right - left)), {
       force: true
     });
@@ -2941,7 +2918,7 @@ class Editor extends EventEmitter {
       let newCy = cy + dy;
       let newCz = cz;
       if (dirZ !== 0) {
-        newCz = cz * (1 + dirZ * currentSpeed * elapsed);
+        newCz = cz * Math.exp(dirZ * currentSpeed * elapsed);
         const center = this.getViewportScreenCenter();
         newCx += center.x / newCz - center.x / cz;
         newCy += center.y / newCz - center.y / cz;
@@ -3379,12 +3356,12 @@ class Editor extends EventEmitter {
     const renderingShapes = [];
     let nextIndex = this.options.maxShapesPerPage * 2;
     let nextBackgroundIndex = this.options.maxShapesPerPage;
-    const erasingShapeIds = this.getErasingShapeIds();
+    const erasingShapeIds = new Set(this.getErasingShapeIds());
     const addShapeById = (id, opacity, isAncestorErasing) => {
       const shape = this.getShape(id);
       if (!shape) return;
       if (this.isShapeHidden(shape)) {
-        const isErasing = isAncestorErasing || erasingShapeIds.includes(id);
+        const isErasing = isAncestorErasing || erasingShapeIds.has(id);
         for (const childId of this.getSortedChildIdsForParent(id)) {
           addShapeById(childId, opacity, isErasing);
         }
@@ -3394,7 +3371,7 @@ class Editor extends EventEmitter {
       let isShapeErasing = false;
       const util = this.getShapeUtil(shape);
       if (useEditorState) {
-        isShapeErasing = !isAncestorErasing && erasingShapeIds.includes(id);
+        isShapeErasing = !isAncestorErasing && erasingShapeIds.has(id);
         if (isShapeErasing) {
           opacity *= 0.32;
         }
@@ -3986,10 +3963,8 @@ class Editor extends EventEmitter {
   }
   _getShapePageBoundsCache() {
     return this.store.createComputedCache("pageBoundsCache", (shape) => {
-      const pageTransform = this.getShapePageTransform(shape);
-      if (!pageTransform) return void 0;
       return Box.FromPoints(
-        pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+        this.getShapePageTransform(shape).applyToPoints(this.getShapeGeometry(shape).boundsVertices)
       );
     });
   }
@@ -4107,7 +4082,9 @@ class Editor extends EventEmitter {
       if (pageMask) {
         if (pageMask.length === 0) return void 0;
         const { corners } = pageBounds;
-        if (corners.every((p, i) => p && Vec.Equals(p, pageMask[i]))) return pageBounds.clone();
+        if (pageMask.length === corners.length && corners.every((p, i) => Vec.Equals(p, pageMask[i]))) {
+          return pageBounds.clone();
+        }
         const intersection = intersectPolygonPolygon(pageMask, corners);
         if (!intersection) return;
         return Box.FromPoints(intersection);
@@ -4346,7 +4323,7 @@ class Editor extends EventEmitter {
       const pointInShapeSpace = this.getPointInShapeSpace(shape, point);
       const shapeUtil = this.getShapeUtil(shape);
       const isShapeFrameLike = this.isShapeFrameLike(shape);
-      if (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim()) {
+      if (isGroup && (isShapeFrameLike || (this.isShapeOfType(shape, "note") || this.isShapeOfType(shape, "arrow") || this.isShapeOfType(shape, "geo") && shape.props.fill === "none") && shapeUtil.getText(shape)?.trim())) {
         for (const childGeometry of geometry.children) {
           if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
             return shape;
@@ -4538,9 +4515,7 @@ class Editor extends EventEmitter {
     const freshShape = this.getShape(id);
     if (!freshShape) return new Vec(0, 0);
     if (isPageId(freshShape.parentId)) return Vec.From(point);
-    const parentTransform = this.getShapePageTransform(freshShape.parentId);
-    if (!parentTransform) return Vec.From(point);
-    return parentTransform.clone().invert().applyToPoint(point);
+    return this.getShapePageTransform(freshShape.parentId).clone().invert().applyToPoint(point);
   }
   getCurrentPageShapes() {
     return Array.from(this.getCurrentPageShapeIds(), (id) => this.store.get(id));
@@ -4652,23 +4627,7 @@ class Editor extends EventEmitter {
    * @public
    */
   isShapeInPage(shape, pageId = this.getCurrentPageId()) {
-    const id = typeof shape === "string" ? shape : shape.id;
-    const shapeToCheck = this.getShape(id);
-    if (!shapeToCheck) return false;
-    let shapeIsInPage = false;
-    if (shapeToCheck.parentId === pageId) {
-      shapeIsInPage = true;
-    } else {
-      let parent = this.getShape(shapeToCheck.parentId);
-      isInPageSearch: while (parent) {
-        if (parent.parentId === pageId) {
-          shapeIsInPage = true;
-          break isInPageSearch;
-        }
-        parent = this.getShape(parent.parentId);
-      }
-    }
-    return shapeIsInPage;
+    return this.getAncestorPageId(shape) === pageId;
   }
   /**
    * Get the id of the containing page for a given shape.
@@ -4749,10 +4708,7 @@ class Editor extends EventEmitter {
         for (let i = 0; i < shapesToReparent.length; i++) {
           const shape = shapesToReparent[i];
           const pageTransform = this.getShapePageTransform(shape);
-          if (!pageTransform) continue;
-          const pagePoint = pageTransform.point();
-          if (!pagePoint) continue;
-          const newPoint = invertedParentTransform.applyToPoint(pagePoint);
+          const newPoint = invertedParentTransform.applyToPoint(pageTransform.point());
           const newRotation = pageTransform.rotation() - parentPageRotation;
           if (shape.id === parentId) {
             throw Error("Attempted to reparent a shape to itself!");
@@ -4841,7 +4797,7 @@ class Editor extends EventEmitter {
    */
   getShapeAndDescendantIds(ids) {
     const shapeIds = /* @__PURE__ */ new Set();
-    for (const shape of ids.map((id) => this.getShape(id)).sort(sortByIndex)) {
+    for (const shape of compact(ids.map((id) => this.getShape(id))).sort(sortByIndex)) {
       shapeIds.add(shape.id);
       this.visitDescendants(shape, (descendantId) => {
         shapeIds.add(descendantId);
@@ -4863,11 +4819,12 @@ class Editor extends EventEmitter {
     const draggingShapes = compact(droppingShapes.map((s) => this.getShape(s))).filter(
       (s) => !s.isLocked && !this.isShapeHidden(s)
     );
+    const excludedIds = this.getShapeAndDescendantIds(draggingShapes.map((s) => s.id));
     const maybeDraggingOverShapes = this.getShapesAtPoint(point, {
       hitInside: true,
       margin: 0
     }).filter(
-      (s) => !droppingShapes.includes(s) && !s.isLocked && !this.isShapeHidden(s) && !draggingShapes.includes(s)
+      (s) => !droppingShapes.includes(s) && !s.isLocked && !this.isShapeHidden(s) && !excludedIds.has(s.id)
     );
     for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
       const shapeUtil = this.getShapeUtil(maybeDraggingOverShape);
@@ -5120,8 +5077,7 @@ class Editor extends EventEmitter {
     for (const id of ids) {
       const shape = this.getShape(id);
       const localDelta = Vec.From(offset);
-      const parentTransform = this.getShapeParentTransform(shape);
-      if (parentTransform) localDelta.rot(-parentTransform.rotation());
+      localDelta.rot(-this.getShapeParentTransform(shape).rotation());
       changes.push(this.getChangesToTranslateShape(shape, localDelta.add(shape)));
     }
     this.updateShapes(changes);
@@ -5176,7 +5132,7 @@ class Editor extends EventEmitter {
             if (!originalShape) continue;
             let ox = 0;
             let oy = 0;
-            if (offset && initialIds.has(originalId)) {
+            if (offset && initialIds.has(originalId) && !shapeIdSet.has(originalShape.parentId)) {
               const parentTransform = this.getShapeParentTransform(originalShape);
               const vec = new Vec(offset.x, offset.y).rot(-parentTransform.rotation());
               ox = vec.x;
@@ -5290,26 +5246,17 @@ class Editor extends EventEmitter {
   toggleLock(shapes) {
     const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     if (this.getIsReadonly() || ids.length === 0) return this;
-    let allLocked = true, allUnlocked = true;
+    let allLocked = true;
     const shapesToToggle = [];
     for (const id of ids) {
       const shape = this.getShape(id);
       if (shape) {
         shapesToToggle.push(shape);
-        if (shape.isLocked) {
-          allUnlocked = false;
-        } else {
-          allLocked = false;
-        }
+        if (!shape.isLocked) allLocked = false;
       }
     }
     this.run(() => {
-      if (allUnlocked) {
-        this.updateShapes(
-          shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: true }))
-        );
-        this.setSelectedShapes([]);
-      } else if (allLocked) {
+      if (allLocked) {
         this.updateShapes(
           shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: false }))
         );
@@ -5317,6 +5264,7 @@ class Editor extends EventEmitter {
         this.updateShapes(
           shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: true }))
         );
+        this.setSelectedShapes([]);
       }
     });
     return this;
@@ -5427,9 +5375,10 @@ class Editor extends EventEmitter {
     const ids = typeof shapes[0] === "string" ? shapes : shapes.map((s) => s.id);
     let freshShapes = compact(ids.map((id) => this.getShape(id)));
     if (opts?.filterAxisAligned) {
-      freshShapes = freshShapes.filter(
-        (s) => this.getShapePageTransform(s)?.rotation() % (PI / 2) === 0
-      );
+      freshShapes = freshShapes.filter((s) => {
+        const remainder = Math.abs(this.getShapePageTransform(s).rotation() % HALF_PI);
+        return Math.min(remainder, HALF_PI - remainder) < 1e-9;
+      });
     }
     const clusters = [];
     const allBounds = [];
@@ -5594,9 +5543,9 @@ class Editor extends EventEmitter {
       dim = "height";
     }
     let shapeGap = 0;
+    shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min]);
     if (_gap === 0) {
       const gaps = {};
-      shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min]);
       for (let i = 0; i < len - 1; i++) {
         const currCluster = shapeClustersToStack[i];
         const nextCluster = shapeClustersToStack[i + 1];
@@ -5634,8 +5583,7 @@ class Editor extends EventEmitter {
         const shapeDelta = delta.clone();
         const parent = this.getShapeParent(shape);
         if (parent) {
-          const parentTransform = this.getShapePageTransform(parent);
-          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
         }
         shapeDelta.add(shape);
         changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
@@ -5673,7 +5621,7 @@ class Editor extends EventEmitter {
     }
     const commonBounds = Box.Common(allBounds);
     const maxWidth = commonBounds.width;
-    shapeClustersToPack.sort((a, b) => a.pageBounds.width - b.pageBounds.width).sort((a, b) => a.pageBounds.height - b.pageBounds.height);
+    shapeClustersToPack.sort((a, b) => b.pageBounds.width - a.pageBounds.width).sort((a, b) => b.pageBounds.height - a.pageBounds.height);
     const startWidth = Math.max(Math.ceil(Math.sqrt(area / 0.95)), maxWidth);
     const spaces = [new Box(commonBounds.x, commonBounds.y, startWidth, Infinity)];
     let width = 0;
@@ -5721,8 +5669,7 @@ class Editor extends EventEmitter {
         const shapeDelta = delta.clone();
         const parent = this.getShapeParent(shape);
         if (parent) {
-          const parentTransform = this.getShapeParentTransform(shape);
-          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+          shapeDelta.rot(-this.getShapeParentTransform(shape).rotation());
         }
         shapeDelta.add(shape);
         changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
@@ -5788,8 +5735,7 @@ class Editor extends EventEmitter {
         const shapeDelta = delta.clone();
         const parent = this.getShapeParent(shape);
         if (parent) {
-          const parentTransform = this.getShapePageTransform(parent);
-          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
         }
         shapeDelta.add(shape);
         changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
@@ -5863,8 +5809,7 @@ class Editor extends EventEmitter {
         const shapeDelta = delta.clone();
         const parent = this.getShapeParent(shape);
         if (parent) {
-          const parentTransform = this.getShapePageTransform(parent);
-          if (parentTransform) shapeDelta.rot(-parentTransform.rotation());
+          shapeDelta.rot(-this.getShapePageTransform(parent).rotation());
         }
         shapeDelta.add(shape);
         changes.push(this.getChangesToTranslateShape(shape, shapeDelta));
@@ -5919,8 +5864,7 @@ class Editor extends EventEmitter {
         scale[val] = commonBounds[dim] / pageBounds[dim];
         for (const shape of shapes2) {
           const shapeLocalOffset = localOffset.clone();
-          const parentTransform = this.getShapeParentTransform(shape);
-          if (parentTransform) shapeLocalOffset.rot(-parentTransform.rotation());
+          shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation());
           shapeLocalOffset.add(shape);
           const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
           this.updateShape(changes);
@@ -5976,8 +5920,7 @@ class Editor extends EventEmitter {
       );
       for (const shape of shapes2) {
         const shapeLocalOffset = localOffset.clone();
-        const parentTransform = this.getShapeParentTransform(shape);
-        if (parentTransform) shapeLocalOffset.rot(-parentTransform.rotation());
+        shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation());
         shapeLocalOffset.add(shape);
         const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset);
         this.updateShape(changes);
@@ -6026,9 +5969,7 @@ class Editor extends EventEmitter {
     const scaleOrigin = opts.scaleOrigin ?? this.getShapePageBounds(id)?.center;
     if (!scaleOrigin) return null;
     const pageTransform = opts.initialPageTransform ? Mat.Cast(opts.initialPageTransform) : this.getShapePageTransform(id);
-    if (!pageTransform) return null;
     const pageRotation = pageTransform.rotation();
-    if (pageRotation == null) return null;
     const scaleAxisRotation = opts.scaleAxisRotation ?? pageRotation;
     const initialBounds = opts.initialBounds ?? this.getShapeGeometry(id).bounds;
     if (!initialBounds) return null;
@@ -6179,7 +6120,6 @@ class Editor extends EventEmitter {
     const currentLocalBounds = this.getShapeGeometry(id).bounds;
     const currentPageCenter = Mat.applyToPoint(pageTransform, currentLocalBounds.center);
     const shapePageTransformOrigin = pageTransform.point();
-    if (!currentPageCenter || !shapePageTransformOrigin) return this;
     const pageDelta = Vec.Sub(postScaleShapePageCenter, currentPageCenter);
     const postScaleShapePagePoint = Vec.Add(shapePageTransformOrigin, pageDelta);
     const { x, y } = this.getPointInParentSpace(id, postScaleShapePagePoint);
@@ -6438,10 +6378,10 @@ class Editor extends EventEmitter {
         if (animationIdForShape !== animationId) continue;
         updates.push({
           ...end,
-          x: start.x + (end.x - start.x) * t,
-          y: start.y + (end.y - start.y) * t,
-          opacity: start.opacity + (end.opacity - start.opacity) * t,
-          rotation: start.rotation + (end.rotation - start.rotation) * t,
+          x: lerp(start.x, end.x, t),
+          y: lerp(start.y, end.y, t),
+          opacity: lerp(start.opacity, end.opacity, t),
+          rotation: lerp(start.rotation, end.rotation, t),
           props: this.getShapeUtil(end).getInterpolatedProps?.(start, end, t) ?? end.props
         });
       }
@@ -6567,7 +6507,7 @@ class Editor extends EventEmitter {
    * @public
    */
   updateShapes(partials) {
-    const compactedPartials = Array(partials.length);
+    const compactedPartials = [];
     for (let i = 0, n = partials.length; i < n; i++) {
       const partial = partials[i];
       if (!partial) continue;
@@ -6638,28 +6578,32 @@ class Editor extends EventEmitter {
   }
   /* --------------------- Styles --------------------- */
   /**
-   * Get all the current styles among the users selected shapes
+   * Groups have no styles of their own: a style read or write on a selection applies to the
+   * non-group shapes beneath each group, however deeply nested. Returns those shapes.
    *
    * @internal
    */
-  _extractSharedStyles(shape, sharedStyleMap) {
-    if (this.isShapeOfType(shape, "group")) {
-      const childIds = this._parentIdsToChildIds.get()[shape.id];
-      if (!childIds) return;
-      for (let i = 0, n = childIds.length; i < n; i++) {
-        this._extractSharedStyles(this.getShape(childIds[i]), sharedStyleMap);
-      }
-    } else {
-      for (const [style, propKey] of this.styleProps[shape.type]) {
-        sharedStyleMap.applyValue(style, getOwnProperty(shape.props, propKey));
+  _getStyleableShapes(shapes) {
+    const result = [];
+    const visit = (shape) => {
+      if (this.isShapeOfType(shape, "group")) {
+        for (const childId of this.getSortedChildIdsForParent(shape.id)) {
+          const child = this.getShape(childId);
+          if (child) visit(child);
+        }
+      } else {
+        result.push(shape);
       }
-    }
+    };
+    for (const shape of shapes) visit(shape);
+    return result;
   }
   _getSelectionSharedStyles() {
-    const selectedShapes = this.getSelectedShapes();
     const sharedStyles = new SharedStyleMap();
-    for (const selectedShape of selectedShapes) {
-      this._extractSharedStyles(selectedShape, sharedStyles);
+    for (const shape of this._getStyleableShapes(this.getSelectedShapes())) {
+      for (const [style, propKey] of this.styleProps[shape.type]) {
+        sharedStyles.applyValue(style, getOwnProperty(shape.props, propKey));
+      }
     }
     return sharedStyles;
   }
@@ -6691,38 +6635,16 @@ class Editor extends EventEmitter {
     const styles = new SharedStyleMap();
     if (!currentTool) return styles;
     if (currentTool.shapeType) {
-      if (currentTool.shapeType === "frame" && !this.getShapeUtil("frame").options.showColors) {
-        for (const style of this.styleProps[currentTool.shapeType].keys()) {
-          if (style.id === "tldraw:color") continue;
-          styles.applyValue(style, this.getStyleForNextShape(style));
-        }
-      } else {
-        for (const style of this.styleProps[currentTool.shapeType].keys()) {
-          styles.applyValue(style, this.getStyleForNextShape(style));
-        }
+      for (const style of this.styleProps[currentTool.shapeType].keys()) {
+        styles.applyValue(style, this.getStyleForNextShape(style));
       }
     }
     return styles;
   }
   getSharedOpacity() {
     if (this.isIn("select") && this.getSelectedShapeIds().length > 0) {
-      const shapesToCheck = [];
-      const addShape = (shapeId) => {
-        const shape = this.getShape(shapeId);
-        if (!shape) return;
-        if (this.isShapeOfType(shape, "group")) {
-          for (const childId of this.getSortedChildIdsForParent(shape.id)) {
-            addShape(childId);
-          }
-        } else {
-          shapesToCheck.push(shape);
-        }
-      };
-      for (const shapeId of this.getSelectedShapeIds()) {
-        addShape(shapeId);
-      }
       let opacity = null;
-      for (const shape of shapesToCheck) {
+      for (const shape of this._getStyleableShapes(this.getSelectedShapes())) {
         if (opacity === null) {
           opacity = shape.opacity;
         } else if (opacity !== shape.opacity) {
@@ -6761,28 +6683,12 @@ class Editor extends EventEmitter {
   setOpacityForSelectedShapes(opacity) {
     const selectedShapes = this.getSelectedShapes();
     if (selectedShapes.length > 0) {
-      const shapesToUpdate = [];
-      const addShapeById = (shape) => {
-        if (this.isShapeOfType(shape, "group")) {
-          const childIds = this.getSortedChildIdsForParent(shape);
-          for (const childId of childIds) {
-            addShapeById(this.getShape(childId));
-          }
-        } else {
-          shapesToUpdate.push(shape);
-        }
-      };
-      for (const id of selectedShapes) {
-        addShapeById(id);
-      }
       this.updateShapes(
-        shapesToUpdate.map((shape) => {
-          return {
-            id: shape.id,
-            type: shape.type,
-            opacity
-          };
-        })
+        this._getStyleableShapes(selectedShapes).map((shape) => ({
+          id: shape.id,
+          type: shape.type,
+          opacity
+        }))
       );
     }
     return this;
@@ -6827,33 +6733,17 @@ class Editor extends EventEmitter {
     const selectedShapes = this.getSelectedShapes();
     if (selectedShapes.length > 0) {
       const updates = [];
-      const addShapeById = (shape) => {
-        if (this.isShapeOfType(shape, "group")) {
-          const childIds = this.getSortedChildIdsForParent(shape.id);
-          for (const childId of childIds) {
-            addShapeById(this.getShape(childId));
-          }
-        } else {
-          const util = this.getShapeUtil(shape);
-          const stylePropKey = this.styleProps[shape.type].get(style);
-          if (stylePropKey) {
-            const shapePartial = {
-              id: shape.id,
-              type: shape.type,
-              props: { [stylePropKey]: value }
-            };
-            updates.push({
-              util,
-              originalShape: shape,
-              updatePartial: shapePartial
-            });
-          }
+      for (const shape of this._getStyleableShapes(selectedShapes)) {
+        const stylePropKey = this.styleProps[shape.type].get(style);
+        if (stylePropKey) {
+          updates.push({
+            id: shape.id,
+            type: shape.type,
+            props: { [stylePropKey]: value }
+          });
         }
-      };
-      for (const shape of selectedShapes) {
-        addShapeById(shape);
       }
-      this.updateShapes(updates.map(({ updatePartial }) => updatePartial));
+      this.updateShapes(updates);
     }
     return this;
   }
@@ -7249,7 +7139,6 @@ class Editor extends EventEmitter {
       if (shapeIdMap.has(newShape.parentId)) {
         newShape.parentId = shapeIdMap.get(oldShape.parentId);
       } else {
-        rootShapeIds.push(newShape.id);
         newShape.index = index;
         index = getIndexAbove(index);
       }
@@ -7274,8 +7163,11 @@ class Editor extends EventEmitter {
         continue;
       }
       if (asset.type === "image" && asset.props.src?.startsWith("data:image") || asset.type === "video" && asset.props.src?.startsWith("data:video")) {
-        assetsToUpdate.push(structuredClone(asset));
-        asset.props.src = null;
+        assetsToUpdate.push(asset);
+        const assetWithoutSrc = structuredClone(asset);
+        assetWithoutSrc.props.src = null;
+        assetsToCreate.push(assetWithoutSrc);
+        continue;
       }
       assetsToCreate.push(asset);
     }
@@ -8102,7 +7994,7 @@ class Editor extends EventEmitter {
     if (info.type === "misc") {
       if (info.name === "cancel" || info.name === "complete") {
         this.inputs.setIsDragging(false);
-        if (this.inputs.getIsPanning()) {
+        if (this.inputs.getIsPanning() && !this.inputs.keys.has("Space")) {
           this.inputs.setIsPanning(false);
           this.inputs.setIsSpacebarPanning(false);
           this.setCursor({ type: this._prevCursor, rotation: 0 });
@@ -8854,10 +8746,9 @@ function withIsolatedShapes(editor, shapeIds, callback) {
 }
 function getCameraFitXFitY(editor, cameraOptions) {
   if (!cameraOptions.constraints) throw Error("Should have constraints here");
-  const {
-    padding: { x: px, y: py }
-  } = cameraOptions.constraints;
   const vsb = editor.getViewportScreenBounds();
+  const px = Math.min(cameraOptions.constraints.padding.x, vsb.w / 2);
+  const py = Math.min(cameraOptions.constraints.padding.y, vsb.h / 2);
   const bounds = Box.From(cameraOptions.constraints.bounds);
   const zx = (vsb.w - px * 2) / bounds.w;
   const zy = (vsb.h - py * 2) / bounds.h;