@tldraw/editor 5.4.0-canary.042da660fa66 → 5.4.0-canary.059d049864ed

package/src/lib/editor/Editor.ts

@@ -72,6 +72,7 @@ import {
 	Result,
 	ZERO_INDEX_KEY,
 	annotateError,
+	areArraysShallowEqual,
 	assert,
 	assertExists,
 	bind,
@@ -129,7 +130,13 @@ import { Geometry2d } from '../primitives/geometry/Geometry2d'
 import { Group2d } from '../primitives/geometry/Group2d'
 import { intersectPolygonPolygon } from '../primitives/intersect'
 import { Mat, MatLike } from '../primitives/Mat'
-import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from '../primitives/utils'
+import {
+	HALF_PI,
+	approximately,
+	areAnglesCompatible,
+	clamp,
+	pointInPolygon,
+} from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { dataUrlToFile } from '../utils/assets'
@@ -187,6 +194,7 @@ import { TLHistoryBatchOptions } from './types/history-types'
 import {
 	OptionalKeys,
 	RequiredKeys,
+	TLCameraConstraints,
 	TLCameraMoveOptions,
 	TLCameraOptions,
 	TLGetShapeAtPointOptions,
@@ -545,6 +553,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 				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)
 			)
@@ -830,10 +846,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						if (prev?.selectedShapeIds !== next?.selectedShapeIds) {
 							// ensure that descendants and ancestors are not selected at the same time
+							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
@@ -938,7 +955,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			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'
+					// only track `mode`, and keep the sync out of the user's undo history
+					unsafe__withoutCapture(() =>
+						this._updateInstanceState({ isReadonly }, { history: 'ignore' })
+					)
 				})
 			)
 		}
@@ -1390,7 +1411,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	getShapeUtil(arg: string | { type: string }) {
 		const type = typeof arg === 'string' ? arg : arg.type
 		const shapeUtil = getOwnProperty(this.shapeUtils, type)
-		assert(shapeUtil, `No shape util found for type "${type}"`)
+		// hot path: avoid building the message (and the assert wrapper) on every successful call
+		if (!shapeUtil) throw new Error(`No shape util found for type "${type}"`)
 		return shapeUtil
 	}
 
@@ -2467,9 +2489,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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) as TLShape[]
+		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])
@@ -2570,20 +2592,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @internal
 	 */
 	getShapesSharedRotation(shapeIds: TLShapeId[]) {
-		let foundFirst = false // annoying but we can't use an i===0 check because we need to skip over undefineds
 		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) {
-					// There are at least 2 different rotations, so the common rotation is zero
-					return 0
-				}
-			} else {
-				// First rotation found
-				foundFirst = true
-				rotation = pageTransform.rotation()
+			const pageRotation = this.getShapePageTransform(shapeIds[i]).rotation()
+			if (i === 0) {
+				rotation = pageRotation
+			} else if (pageRotation !== rotation) {
+				// There are at least 2 different rotations, so the common rotation is zero
+				return 0
 			}
 		}
 
@@ -2615,7 +2631,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (shapeIds.length === 1) {
 			const bounds = this.getShapeGeometry(shapeIds[0]).bounds.clone()
-			const pageTransform = this.getShapePageTransform(shapeIds[0])!
+			const pageTransform = this.getShapePageTransform(shapeIds[0])
 			bounds.point = pageTransform.applyToPoint(bounds.point)
 			return bounds
 		}
@@ -2623,11 +2639,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// need to 'un-rotate' all the outlines of the existing nodes so we can fit them inside a box
 		const boxFromRotatedVertices = Box.FromPoints(
 			shapeIds
-				.flatMap((id) => {
-					const pageTransform = this.getShapePageTransform(id)
-					if (!pageTransform) return []
-					return pageTransform.applyToPoints(this.getShapeGeometry(id).bounds.corners)
-				})
+				.flatMap((id) =>
+					this.getShapePageTransform(id).applyToPoints(this.getShapeGeometry(id).bounds.corners)
+				)
 				.map((p) => p.rot(-selectionRotation))
 		)
 		// now position box so that it's top-left corner is in the right place
@@ -2654,9 +2668,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed getSelectionRotatedScreenBounds(): Box | undefined {
 		const bounds = this.getSelectionRotatedPageBounds()
 		if (!bounds) return undefined
-		const { x, y } = this.pageToScreen(bounds.point)
-		const zoom = this.getZoomLevel()
-		return new Box(x, y, bounds.width * zoom, bounds.height * zoom)
+		// Don't use pageToScreen here: it reads the screen bounds without capturing them, so this
+		// computed would never invalidate when the container moves
+		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
+		)
 	}
 
 	// Focus Group
@@ -2796,57 +2817,38 @@ export class Editor extends EventEmitter<TLEventMap> {
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 
-		if (!id) {
-			// setting the editing shape to null
+		// id was provided but the next editing shape was not editable or didn't exist, so do nothing
+		if (id && !this.canEditShape(id)) return this
+
+		this.run(() => {
+			// Clean up the previous editing shape. This runs outside the history-ignored batch below,
+			// otherwise document changes made by onEditEnd (e.g. deleting an empty text shape) are
+			// never recorded and leave a phantom undo entry whose redo resurrects the shape.
+			const prevEditingShapeId = this.getEditingShapeId()
+			if (prevEditingShapeId) {
+				const prevEditingShape = this.getShape(prevEditingShapeId)
+				if (prevEditingShape) {
+					this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+				}
+			}
+
 			this.run(
 				() => {
-					// Clean up the previous editing shape
-					const prevEditingShapeId = this.getEditingShapeId()
-					if (prevEditingShapeId) {
-						const prevEditingShape = this.getShape(prevEditingShapeId)
-						if (prevEditingShape) {
-							this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
-						}
-					}
-
 					// Clean up the editing shape state and rich text editor
 					this._updateCurrentPageState({ editingShapeId: null })
 					this._currentRichTextEditor.set(null)
-				},
-				{ history: 'ignore' }
-			)
-
-			return this
-		}
 
-		// id was provided but the next editing shape was not editable or didn't exist, so do nothing
-		if (!this.canEditShape(id)) return this
-
-		// id was provided and the next editing shape is editable, so set the rich text editor to null
-		this.run(
-			() => {
-				// Clean up the previous editing shape
-				const prevEditingShapeId = this.getEditingShapeId()
-				if (prevEditingShapeId) {
-					const prevEditingShape = this.getShape(prevEditingShapeId)
-					if (prevEditingShape) {
-						this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
-					}
-				}
-
-				// Clean up the editing shape state and rich text editor
-				this._updateCurrentPageState({ editingShapeId: null })
-				this._currentRichTextEditor.set(null)
+					if (!id) return
 
-				// Set the new editing shape
-				this.select(id)
-				this._updateCurrentPageState({ editingShapeId: id })
+					this.select(id)
+					this._updateCurrentPageState({ editingShapeId: id })
 
-				const nextEditingShape = this.getShape(id)! // shape should be there because canEditShape checked it. Possible small chance that onEditEnd deleted it?
-				this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape)
-			},
-			{ history: 'ignore' }
-		)
+					const nextEditingShape = this.getShape(id)! // shape should be there because canEditShape checked it. Possible small chance that onEditEnd deleted it?
+					this.getShapeUtil(nextEditingShape).onEditStart?.(nextEditingShape)
+				},
+				{ history: 'ignore' }
+			)
+		})
 
 		return this
 	}
@@ -3011,26 +3013,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setErasingShapes(shapes: TLShapeId[] | TLShape[]): this {
+		// copy before sorting: the caller may pass a store-owned (frozen) array
 		const ids =
 			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
+				? (shapes as TLShapeId[]).slice()
 				: (shapes as TLShape[]).map((shape) => shape.id)
 		ids.sort() // sort the incoming ids
 		const erasingShapeIds = this.getErasingShapeIds()
 		this.run(
 			() => {
-				if (ids.length === erasingShapeIds.length) {
-					// if the new ids are the same length as the current ids, they might be the same.
-					// presuming the current ids are also sorted, check each item to see if it's the same;
-					// if we find any unequal, then we know the new ids are different.
-					for (let i = 0; i < ids.length; i++) {
-						if (ids[i] !== erasingShapeIds[i]) {
-							this._updateCurrentPageState({ erasingShapeIds: ids })
-							break
-						}
-					}
-				} else {
-					// if the ids are a different length, then we know they're different.
+				// the current ids are also sorted, so a shallow comparison tells us whether they changed
+				if (!areArraysShallowEqual(ids, erasingShapeIds)) {
 					this._updateCurrentPageState({ erasingShapeIds: ids })
 				}
 			},
@@ -3067,6 +3060,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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
 	}
@@ -3146,11 +3140,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const collaborators = this.getCollaborators()
 		let leaderPresence = null as null | TLInstancePresence
 		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)
+			// Stop at the last resolvable presence, otherwise a leader whose own leader has left
+			// (or whose presence hasn't arrived yet) can't be followed at all
+			if (!nextPresence) break
+			leaderPresence = nextPresence
+			targetUserId = nextPresence.followingUserId ?? null
+			visited.push(nextPresence.userId)
 		}
 		return leaderPresence
 	}
@@ -3268,44 +3264,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public */
 	getInitialZoom() {
-		const cameraOptions = this.getCameraOptions()
-		// If no camera constraints are provided, the default zoom is 100%
-		if (!cameraOptions.constraints) return 1
-
-		// When defaultZoom is default, the default zoom is 100%
-		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')
 	}
 
 	/**
@@ -3318,16 +3277,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public */
 	getBaseZoom() {
-		const cameraOptions = this.getCameraOptions()
-		// If no camera constraints are provided, the default zoom is 100%
-		if (!cameraOptions.constraints) return 1
+		return this._getFitZoom(this.getCameraOptions().constraints?.baseZoom ?? 'default')
+	}
 
-		// When defaultZoom is default, the default zoom is 100%
-		if (cameraOptions.constraints.baseZoom === 'default') return 1
+	private _getFitZoom(fit: TLCameraConstraints['initialZoom']): number {
+		const cameraOptions = this.getCameraOptions()
+		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)
 			}
@@ -3353,7 +3312,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				return Math.min(1, zy)
 			}
 			default: {
-				throw exhaustiveSwitchError(cameraOptions.constraints.baseZoom)
+				throw exhaustiveSwitchError(fit)
 			}
 		}
 	}
@@ -3390,7 +3349,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			...this._cameraOptions.__unsafe__getWithoutCapture(),
 			...opts,
 		})
-		if (next.zoomSteps?.length < 1) next.zoomSteps = [1]
+		// `undefined < 1` is false, so an explicit `zoomSteps: undefined` would otherwise get through
+		// and make every later camera move throw
+		if (!next.zoomSteps || next.zoomSteps.length < 1) next.zoomSteps = [1]
 		this._cameraOptions.set(next)
 		this.setCamera(this.getCamera())
 		return this
@@ -3998,9 +3959,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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,
@@ -4115,9 +4076,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			let newCy = cy + dy
 			let newCz = cz
 
-			// animate zoom if z direction is passed in
+			// animate zoom if z direction is passed in. Use an exponential factor so that a single
+			// long frame can't drive the zoom to zero or negative (which would give NaN coordinates)
 			if (dirZ !== 0) {
-				newCz = cz * (1 + dirZ * currentSpeed * elapsed)
+				newCz = cz * Math.exp(dirZ * currentSpeed * elapsed)
 				// Adjust x/y to keep the viewport center fixed while zooming
 				const center = this.getViewportScreenCenter()
 				newCx += center.x / newCz - center.x / cz
@@ -4702,7 +4664,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let nextIndex = this.options.maxShapesPerPage * 2
 		let nextBackgroundIndex = this.options.maxShapesPerPage
 
-		const erasingShapeIds = this.getErasingShapeIds()
+		const erasingShapeIds = new Set(this.getErasingShapeIds())
 
 		const addShapeById = (id: TLShapeId, opacity: number, isAncestorErasing: boolean) => {
 			const shape = this.getShape(id)
@@ -4710,7 +4672,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			if (this.isShapeHidden(shape)) {
 				// process children just in case they are overriding the hidden state
-				const isErasing = isAncestorErasing || erasingShapeIds.includes(id)
+				const isErasing = isAncestorErasing || erasingShapeIds.has(id)
 				for (const childId of this.getSortedChildIdsForParent(id)) {
 					addShapeById(childId, opacity, isErasing)
 				}
@@ -4722,7 +4684,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const util = this.getShapeUtil(shape)
 
 			if (useEditorState) {
-				isShapeErasing = !isAncestorErasing && erasingShapeIds.includes(id)
+				isShapeErasing = !isAncestorErasing && erasingShapeIds.has(id)
 				if (isShapeErasing) {
 					opacity *= 0.32
 				}
@@ -5481,11 +5443,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@computed private _getShapePageBoundsCache(): ComputedCache<Box, TLShape> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
-			const pageTransform = this.getShapePageTransform(shape)
-			if (!pageTransform) return undefined
-
 			return Box.FromPoints(
-				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+				this.getShapePageTransform(shape).applyToPoints(this.getShapeGeometry(shape).boundsVertices)
 			)
 		})
 	}
@@ -6239,9 +6198,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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)
 	}
 
 	/**
@@ -6408,26 +6365,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	isShapeInPage(shape: TLShape | TLShapeId, pageId = this.getCurrentPageId()): boolean {
-		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
 	}
 
 	/**
@@ -6538,13 +6476,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				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 pageTransform = this.getShapePageTransform(shape)
+					const newPoint = invertedParentTransform.applyToPoint(pageTransform.point())
 					const newRotation = pageTransform.rotation() - parentPageRotation
 
 					if (shape.id === parentId) {
@@ -6645,7 +6578,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getShapeAndDescendantIds(ids: TLShapeId[]): Set<TLShapeId> {
 		const shapeIds = new Set<TLShapeId>()
-		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)
@@ -6669,6 +6602,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const draggingShapes = compact(droppingShapes.map((s) => this.getShape(s))).filter(
 			(s) => !s.isLocked && !this.isShapeHidden(s)
 		)
+		// Descendants of the dragged shapes can't be the target, otherwise dragging a frame out of
+		// its parent reports a nested child as the target and the parent never sees the drag leave
+		const excludedIds = this.getShapeAndDescendantIds(draggingShapes.map((s) => s.id))
 
 		const maybeDraggingOverShapes = this.getShapesAtPoint(point, {
 			hitInside: true,
@@ -6678,7 +6614,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				!droppingShapes.includes(s) &&
 				!s.isLocked &&
 				!this.isShapeHidden(s) &&
-				!draggingShapes.includes(s)
+				!excludedIds.has(s.id)
 		)
 
 		for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
@@ -7052,8 +6988,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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)))
 		}
@@ -7123,7 +7058,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 						let ox = 0
 						let oy = 0
 
-						if (offset && initialIds.has(originalId)) {
+						// Only offset the roots of the duplicated tree: a descendant that was also passed in
+						// follows its duplicated parent, so offsetting it too would move it twice
+						if (
+							offset &&
+							initialIds.has(originalId) &&
+							!shapeIdSet.has(originalShape.parentId as TLShapeId)
+						) {
 							const parentTransform = this.getShapeParentTransform(originalShape)
 							const vec = new Vec(offset.x, offset.y).rot(-parentTransform!.rotation())
 							ox = vec.x
@@ -7289,27 +7230,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (this.getIsReadonly() || ids.length === 0) return this
 
-		let allLocked = true,
-			allUnlocked = true
+		let allLocked = true
 		const shapesToToggle: TLShape[] = []
 		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 }))
 				)
@@ -7317,6 +7248,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				this.updateShapes(
 					shapesToToggle.map((shape) => ({ id: shape.id, type: shape.type, isLocked: true }))
 				)
+				this.setSelectedShapes([])
 			}
 		})
 
@@ -7456,9 +7388,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		// optionally filter to axis-aligned shapes (rotation is a multiple of 90 degrees)
 		if (opts?.filterAxisAligned) {
-			freshShapes = freshShapes.filter(
-				(s) => this.getShapePageTransform(s)?.rotation() % (PI / 2) === 0
-			)
+			freshShapes = freshShapes.filter((s) => {
+				// Page rotations come back through atan2 on a composed matrix, so a 270° shape can land
+				// a hair either side of the multiple; an exact === 0 check drops it
+				const remainder = Math.abs(this.getShapePageTransform(s).rotation() % HALF_PI)
+				return Math.min(remainder, HALF_PI - remainder) < 1e-9
+			})
 		}
 
 		const clusters: { shapes: TLShape[]; pageBounds: Box }[] = []
@@ -7679,13 +7614,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		let shapeGap: number = 0
 
+		// Stack in spatial order rather than input (z) order, otherwise shapes swap places
+		shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min])
+
 		if (_gap === 0) {
 			// note: this is not used in the current tldraw.com; there we use a specified stack
 
 			const gaps: Record<number, number> = {}
 
-			shapeClustersToStack.sort((a, b) => a.pageBounds[min] - b.pageBounds[min])
-
 			// Collect all of the gaps between shapes. We want to find
 			// patterns (equal gaps between shapes) and use the most common
 			// one as the gap for all of the shapes.
@@ -7738,8 +7674,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// todo: ensure that the parent isn't being aligned together with its children
 				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) // add the shape's x and y to the delta
@@ -7789,10 +7724,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const maxWidth = commonBounds.width
 
-		// sort the shape clusters by width and then height, descending
+		// sort the shape clusters by width and then height, descending: potpack fills each row's
+		// right-hand space with the shapes that follow, so they must be no taller than the row
 		shapeClustersToPack
-			.sort((a, b) => a.pageBounds.width - b.pageBounds.width)
-			.sort((a, b) => a.pageBounds.height - b.pageBounds.height)
+			.sort((a, b) => b.pageBounds.width - a.pageBounds.width)
+			.sort((a, b) => b.pageBounds.height - a.pageBounds.height)
 
 		// Start with is (sort of) the square of the area
 		const startWidth = Math.max(Math.ceil(Math.sqrt(area / 0.95)), maxWidth)
@@ -7862,8 +7798,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 				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)
@@ -7953,8 +7888,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// todo: ensure that the parent isn't being aligned together with its children
 				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) // add the shape's x and y to the delta
@@ -8054,8 +7988,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// todo: ensure that the parent isn't being aligned together with its children
 				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) // add the shape's x and y to the delta
@@ -8123,8 +8056,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				for (const shape of shapes) {
 					// First translate
 					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)
@@ -8195,8 +8127,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			for (const shape of shapes) {
 				// First translate
 				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)
@@ -8260,12 +8191,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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
@@ -8502,7 +8430,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		)
 
 		// now calculate how far away the shape is from where it needs to be
-		const pageTransform = this.getShapePageTransform(id)!
+		const pageTransform = this.getShapePageTransform(id)
 		// We need to use the local bounds center transformed to page space, not the axis-aligned
 		// page bounds center. This is because the page bounds are axis-aligned and their center
 		// changes when the rotation changes, but we want to use the same reference point as
@@ -8510,7 +8438,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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)
 
 		// and finally figure out what the shape's new position should be
@@ -8898,10 +8825,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 				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,
 				})
 			}
@@ -9117,7 +9044,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	updateShapes<T extends TLShape>(partials: (TLShapePartial<T> | null | undefined)[]) {
-		const compactedPartials: TLShapePartial<T>[] = Array(partials.length)
+		const compactedPartials: TLShapePartial<T>[] = []
 
 		for (let i = 0, n = partials.length; i < n; i++) {
 			const partial = partials[i]
@@ -9263,26 +9190,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/* --------------------- 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
 	 */
-	private _extractSharedStyles(shape: TLShape, sharedStyleMap: SharedStyleMap) {
-		if (this.isShapeOfType(shape, 'group')) {
-			// For groups, ignore the styles of the group shape and instead include the styles of the
-			// group's children. These are the shapes that would have their styles changed if the
-			// user called `setStyle` on the current selection.
-			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))
+	private _getStyleableShapes(shapes: TLShape[]): TLShape[] {
+		const result: TLShape[] = []
+		const visit = (shape: TLShape) => {
+			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
 	}
 
 	/**
@@ -9292,11 +9218,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	@computed
 	private _getSelectionSharedStyles(): ReadonlySharedStyleMap {
-		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
@@ -9354,18 +9280,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!currentTool) return styles
 
 		if (currentTool.shapeType) {
-			if (
-				currentTool.shapeType === 'frame' &&
-				!(this.getShapeUtil('frame')!.options as any).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))
 			}
 		}
 
@@ -9381,27 +9297,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	@computed getSharedOpacity(): SharedStyle<number> {
 		if (this.isIn('select') && this.getSelectedShapeIds().length > 0) {
-			const shapesToCheck: TLShape[] = []
-			const addShape = (shapeId: TLShapeId) => {
-				const shape = this.getShape(shapeId)
-				if (!shape) return
-				// For groups, ignore the opacity of the group shape and instead include
-				// the opacity of the group's children. These are the shapes that would have
-				// their opacity changed if the user called `setOpacity` on the current selection.
-				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: number | null = 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) {
@@ -9444,33 +9341,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const selectedShapes = this.getSelectedShapes()
 
 		if (selectedShapes.length > 0) {
-			const shapesToUpdate: TLShape[] = []
-
-			// We can have many deep levels of grouped shape
-			// Making a recursive function to look through all the levels
-			const addShapeById = (shape: TLShape) => {
-				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,
+				}))
 			)
 		}
 
@@ -9524,43 +9400,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const selectedShapes = this.getSelectedShapes()
 
 		if (selectedShapes.length > 0) {
-			const updates: {
-				util: ShapeUtil
-				originalShape: TLShape
-				updatePartial: TLShapePartial
-			}[] = []
-
-			// We can have many deep levels of grouped shape
-			// Making a recursive function to look through all the levels
-			const addShapeById = (shape: TLShape) => {
-				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: TLShapePartial = {
-							id: shape.id,
-							type: shape.type,
-							props: { [stylePropKey]: value },
-						}
-						updates.push({
-							util,
-							originalShape: shape,
-							updatePartial: shapePartial,
-						})
-					}
+			const updates: TLShapePartial[] = []
+			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
@@ -10092,7 +9944,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (shapeIdMap.has(newShape.parentId)) {
 				newShape.parentId = shapeIdMap.get(oldShape.parentId)!
 			} else {
-				rootShapeIds.push(newShape.id)
 				// newShape.parentId = pasteParentId
 				newShape.index = index
 				index = getIndexAbove(index)
@@ -10135,10 +9986,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 				(asset.type === 'video' && asset.props.src?.startsWith('data:video'))
 			) {
 				// it's src is a base64 image or video; we need to create a new asset without the src,
-				// then create a new asset from the original src. So we save a copy of the original asset,
-				// then delete the src from the original asset.
-				assetsToUpdate.push(structuredClone(asset as TLImageAsset | TLVideoAsset))
-				asset.props.src = null
+				// then create a new asset from the original src. So we keep the original asset for the
+				// upload and create a copy with its src removed. Copy rather than mutate: when no
+				// migration applies, migrateStoreSnapshot hands back the caller's own record objects.
+				assetsToUpdate.push(asset as TLImageAsset | TLVideoAsset)
+				const assetWithoutSrc = structuredClone(asset as TLImageAsset | TLVideoAsset)
+				assetWithoutSrc.props.src = null
+				assetsToCreate.push(assetWithoutSrc)
+				continue
 			}
 
 			// Add the asset to the list of assets to create