@tldraw/editor 5.2.4 → 5.3.0-canary.00f14de1f81d

package/src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts

@@ -1,6 +1,12 @@
-import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
+import {
+	Computed,
+	RESET_VALUE,
+	computed,
+	isUninitialized,
+	unsafe__withoutCapture,
+} from '@tldraw/state'
 import type { RecordsDiff } from '@tldraw/store'
-import { TLPageId, TLShape, TLShapeId, isShape } from '@tldraw/tlschema'
+import { TLPageId, TLShape, TLShapeId, isBinding, isPageId, isShape } from '@tldraw/tlschema'
 import type { TLRecord } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Box } from '../../../primitives/Box'
@@ -11,16 +17,24 @@ import { RBushIndex, type SpatialElement } from './RBushIndex'
  * Manages spatial indexing for efficient shape location queries.
  *
  * Uses an R-tree (via RBush) to enable O(log n) spatial queries instead of O(n) iteration.
- * Handles shapes with computed bounds (arrows, groups, custom shapes) by checking all shapes'
- * bounds on each update using the reactive bounds cache.
+ * Derived-bounds changes (arrows following bound shapes, groups resizing with children) are
+ * tracked structurally: each record diff is expanded into a dirty set covering the changed
+ * shapes' descendants, ancestors, and binding partners, and only those shapes' bounds are
+ * rechecked — O(affected) per update instead of O(page).
  *
  * Key features:
- * - Incremental updates using filterHistory pattern
- * - Leverages existing bounds cache reactivity for dependency tracking
- * - Works with any custom shape type with computed bounds
+ * - Incremental updates using filterHistory pattern (shape and binding history)
+ * - Dirty-set expansion via parent/child and binding relationships
  * - Per-page index (rebuilds on page change)
  * - Optimized for viewport culling queries
  *
+ * Known limitation: a custom shape whose geometry reads other shapes outside the
+ * parent/child and binding relationships is not rechecked when those shapes change.
+ * Core shapes only depend on other shapes via bindings (arrows) and parent/child
+ * relationships (groups), which are both covered. This narrows the previous
+ * approach, which rechecked every indexed shape on every update and so happened to
+ * cover such shapes; the structural expansion trades that for O(affected) updates.
+ *
  * @internal
  */
 export class SpatialIndexManager {
@@ -52,27 +66,28 @@ export class SpatialIndexManager {
 		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
-			if (isUninitialized(_prevValue)) {
-				return this.rebuildAndBumpEpoch()
-			}
-
+			// These three reads are the computed's only tracked dependencies.
+			// Every input to a shape's page bounds is a shape or binding record,
+			// so the two histories cover all invalidation; the rebuild/update
+			// paths below run without capture to avoid registering a dependency
+			// per checked shape on every update (and ~page-size dependencies on
+			// every rebuild).
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
 			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
-
-			if (shapeDiff === RESET_VALUE || bindingDiff === RESET_VALUE) {
-				return this.rebuildAndBumpEpoch()
-			}
-
 			const currentPageId = this.editor.getCurrentPageId()
-			if (this.lastPageId !== currentPageId) {
-				return this.rebuildAndBumpEpoch()
+
+			if (
+				isUninitialized(_prevValue) ||
+				shapeDiff === RESET_VALUE ||
+				bindingDiff === RESET_VALUE ||
+				this.lastPageId !== currentPageId
+			) {
+				return unsafe__withoutCapture(() => this.rebuildAndBumpEpoch())
 			}
 
 			if (shapeDiff.length === 0 && bindingDiff.length === 0) return this._boundsEpoch
 
-			// A binding-only diff passes an empty shape diff: step 1 is a no-op
-			// and the step-2 sweep re-checks the indexed bounds of every shape.
-			if (this.processIncrementalUpdate(shapeDiff)) {
+			if (unsafe__withoutCapture(() => this.processIncrementalUpdate(shapeDiff, bindingDiff))) {
 				this._boundsEpoch++
 			}
 			return this._boundsEpoch
@@ -101,88 +116,160 @@ export class SpatialIndexManager {
 		this.rbush.bulkLoad(elements)
 	}
 
-	private processIncrementalUpdate(shapeDiff: RecordsDiff<TLRecord>[]): boolean {
-		const processedShapeIds = new Set<TLShapeId>()
-		let changed = false
+	private processIncrementalUpdate(
+		shapeDiff: RecordsDiff<TLRecord>[],
+		bindingDiff: RecordsDiff<TLRecord>[]
+	): boolean {
+		// Rbush mutations are collected and applied as one batch at the end so
+		// large updates can use a bulk rebuild instead of per-item tree ops.
+		const pendingRemoves = new Set<TLShapeId>()
+		const pendingUpserts: SpatialElement[] = []
+
+		// Shapes whose page transform may have moved (their record was added or
+		// updated). Their descendants' transforms move with them.
+		const transformChanged = new Set<TLShapeId>()
+		// Shapes whose page bounds need rechecking against the index.
+		const dirty = new Set<TLShapeId>()
+		// Subset of `dirty` not yet expanded into ancestors/binding partners.
+		const queue: TLShapeId[] = []
 
-		// Step 1: apply diff entries directly. `changed` flips only on real
-		// rbush mutations, so prop-only updates and no-op removes (e.g. shapes
-		// from other pages, or never-indexed shapes with invalid bounds) don't
-		// bump the epoch.
+		const markDirty = (id: TLShapeId) => {
+			if (!dirty.has(id)) {
+				dirty.add(id)
+				queue.push(id)
+			}
+		}
+
+		// Step 1: seed the dirty set from the record diffs.
 		for (const changes of shapeDiff) {
 			for (const shape of objectMapValues(changes.added) as TLShape[]) {
-				if (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {
-					const bounds = this.editor.getShapePageBounds(shape.id)
-					if (bounds && bounds.isValid()) {
-						this.rbush.upsert(shape.id, bounds)
-						changed = true
-					}
-					processedShapeIds.add(shape.id)
-				}
+				if (!isShape(shape)) continue
+				transformChanged.add(shape.id)
+				markDirty(shape.id)
 			}
 
 			for (const shape of objectMapValues(changes.removed) as TLShape[]) {
-				if (isShape(shape)) {
-					if (this.rbush.has(shape.id)) {
-						this.rbush.remove(shape.id)
-						changed = true
-					}
-					processedShapeIds.add(shape.id)
+				if (!isShape(shape)) continue
+				if (this.rbush.has(shape.id)) {
+					pendingRemoves.add(shape.id)
 				}
+				// The old parent's derived bounds (groups) may shrink. Bindings
+				// involving the shape are deleted in the same transaction, so the
+				// binding diff below dirties the other ends.
+				if (!isPageId(shape.parentId)) markDirty(shape.parentId)
 			}
 
-			for (const [, to] of objectMapValues(changes.updated) as [TLShape, TLShape][]) {
+			for (const [from, to] of objectMapValues(changes.updated) as [TLShape, TLShape][]) {
 				if (!isShape(to)) continue
-				processedShapeIds.add(to.id)
-
-				const isOnPage = this.editor.getAncestorPageId(to) === this.lastPageId
-
-				if (isOnPage) {
-					const bounds = this.editor.getShapePageBounds(to.id)
-					if (bounds && bounds.isValid()) {
-						const indexedElement = this.rbush.getElement(to.id)
-						if (!this.areBoundsEqualToSpatialElement(bounds, indexedElement)) {
-							this.rbush.upsert(to.id, bounds)
-							changed = true
-						}
-					} else if (this.rbush.has(to.id)) {
-						this.rbush.remove(to.id)
-						changed = true
-					}
-				} else if (this.rbush.has(to.id)) {
-					this.rbush.remove(to.id)
-					changed = true
+				transformChanged.add(to.id)
+				markDirty(to.id)
+				// On reparent, the old ancestor chain needs rechecking too
+				if (isShape(from) && from.parentId !== to.parentId && !isPageId(from.parentId)) {
+					markDirty(from.parentId)
+				}
+			}
+		}
+
+		for (const changes of bindingDiff) {
+			for (const binding of objectMapValues(changes.added)) {
+				if (!isBinding(binding)) continue
+				markDirty(binding.fromId)
+				markDirty(binding.toId)
+			}
+			for (const binding of objectMapValues(changes.removed)) {
+				if (!isBinding(binding)) continue
+				markDirty(binding.fromId)
+				markDirty(binding.toId)
+			}
+			for (const [from, to] of objectMapValues(changes.updated)) {
+				if (!isBinding(to)) continue
+				markDirty(to.fromId)
+				markDirty(to.toId)
+				// A reassigned binding leaves its old endpoints needing a
+				// recheck too (mirrors the reparent case for shapes above).
+				if (isBinding(from) && (from.fromId !== to.fromId || from.toId !== to.toId)) {
+					markDirty(from.fromId)
+					markDirty(from.toId)
+				}
+			}
+		}
+
+		// Step 2: a moved record moves the page transforms of all its
+		// descendants, so their bounds need rechecking even though their
+		// records never changed. Expand before the fixpoint below so each
+		// descendant also gets its ancestors and binding partners visited.
+		const transformQueue = [...transformChanged]
+		while (transformQueue.length) {
+			const id = transformQueue.pop()!
+			for (const childId of this.editor.getSortedChildIdsForParent(id)) {
+				if (!transformChanged.has(childId)) {
+					transformChanged.add(childId)
+					transformQueue.push(childId)
 				}
+				markDirty(childId)
+			}
+		}
+
+		// Step 3: expand to a fixpoint. Any shape whose bounds may have changed
+		// can resize its ancestor groups and move arrows bound to it. A derived
+		// bounds change does not move the shape's own transform, so descendants
+		// are not affected by this expansion (only by step 2).
+		while (queue.length) {
+			const id = queue.pop()!
+
+			const record = this.editor.store.unsafeGetWithoutCapture(id)
+			if (record && isShape(record) && !isPageId(record.parentId)) {
+				markDirty(record.parentId)
+			}
+
+			for (const binding of this.editor.getBindingsInvolvingShape(id)) {
+				markDirty(binding.fromId)
+				markDirty(binding.toId)
 			}
 		}
 
-		// Step 2: must always run. Diff entries can dirty derived bounds —
-		// arrows bound to moved shapes, groups with moved children — without
-		// touching any record visited in step 1. Also catches outline-only
-		// changes (e.g. geo rectangle→ellipse at the same w/h) that shift a
-		// bound arrow's intersection points: step 1 sees the geo's
-		// axis-aligned bounds unchanged and skips, but the dependent arrow's
-		// bounds have moved.
-		//
-		// Iterating the rbush's element map directly avoids allocating a
-		// shape-id array per pointer move. Mutation here is limited to
-		// upserts of existing keys and deletions, both safe during Map
-		// iteration.
-		for (const [shapeId, indexedElement] of this.rbush.entries()) {
-			if (processedShapeIds.has(shapeId)) continue
-
-			const currentBounds = this.editor.getShapePageBounds(shapeId)
-			if (this.areBoundsEqualToSpatialElement(currentBounds, indexedElement)) continue
-
-			if (currentBounds && currentBounds.isValid()) {
-				this.rbush.upsert(shapeId, currentBounds)
-			} else {
-				this.rbush.remove(shapeId)
+		// Step 4: recheck only the dirty shapes' bounds. The batch stays empty
+		// on prop-only updates with unchanged bounds, so they don't bump the
+		// epoch.
+		for (const id of dirty) {
+			// A shape removed in an earlier diff entry may have been re-added in
+			// a later one; its pending removal means the indexed bounds no
+			// longer count.
+			const indexedElement = pendingRemoves.has(id) ? undefined : this.rbush.getElement(id)
+			const record = this.editor.store.unsafeGetWithoutCapture(id)
+
+			if (
+				!record ||
+				!isShape(record) ||
+				this.editor.getAncestorPageId(record) !== this.lastPageId
+			) {
+				if (this.rbush.has(id)) {
+					pendingRemoves.add(id)
+				}
+				continue
+			}
+
+			const bounds = this.editor.getShapePageBounds(id)
+			if (bounds && bounds.isValid()) {
+				if (!this.areBoundsEqualToSpatialElement(bounds, indexedElement)) {
+					pendingRemoves.delete(id)
+					pendingUpserts.push({
+						minX: bounds.minX,
+						minY: bounds.minY,
+						maxX: bounds.maxX,
+						maxY: bounds.maxY,
+						id,
+					})
+				}
+			} else if (this.rbush.has(id)) {
+				pendingRemoves.add(id)
 			}
-			changed = true
 		}
 
-		return changed
+		if (pendingRemoves.size === 0 && pendingUpserts.length === 0) return false
+
+		this.rbush.applyBatch(pendingRemoves, pendingUpserts)
+		return true
 	}
 
 	private areBoundsEqualToSpatialElement(

package/src/lib/editor/managers/TextManager/TextManager.test.ts

@@ -110,7 +110,6 @@ describe('TextManager', () => {
 	describe('constructor', () => {
 		it('should create a TextManager instance', () => {
 			expect(textManager).toBeInstanceOf(TextManager)
-			expect(textManager.editor).toBe(mockEditor)
 		})
 	})
 
@@ -247,6 +246,67 @@ describe('TextManager', () => {
 			expect(result.spans).toHaveLength(0)
 		})
 
+		it('should skip characters that produce no layout rectangles', () => {
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn(),
+					setEnd: vi.fn(),
+					// simulate a browser returning no rects for a measured character,
+					// which previously crashed with "Cannot read properties of
+					// undefined (reading 'top')". See issue #9112.
+					getClientRects: vi.fn(() => []),
+				}
+			})
+
+			const mockTextNode = {
+				nodeType: 3, // TEXT_NODE
+				textContent: 'Hello',
+			}
+
+			const mockElementWithText = {
+				childNodes: [mockTextNode],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			let result
+			expect(() => {
+				result = textManager.measureElementTextNodeSpans(mockElementWithText as any)
+			}).not.toThrow()
+
+			expect(result!.spans).toHaveLength(0)
+			expect(result!.didTruncate).toBe(false)
+		})
+
+		it('should measure grapheme clusters as a single unit', () => {
+			const startOffsets: number[] = []
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn((_node: any, offset: number) => startOffsets.push(offset)),
+					setEnd: vi.fn(),
+					getClientRects: vi.fn(() => [
+						{ width: 10, height: 16, left: 0, top: 0, right: 10, bottom: 16 },
+					]),
+				}
+			})
+
+			// 👨‍👩‍👧 is 5 code points (8 UTF-16 units) joined by zero-width joiners
+			const family = '\u{1F468}\u{200D}\u{1F469}\u{200D}\u{1F467}'
+			const mockTextNode = { nodeType: 3, textContent: `a${family}b` }
+			const mockElementWithText = {
+				childNodes: [mockTextNode],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockElementWithText as any)
+
+			// the emoji is measured as one grapheme, so the index jumps over all 8 units
+			expect(startOffsets).toEqual([0, 1, 9])
+			// and its code points are kept together in the span text
+			expect(result.spans[0].text).toBe(`a${family}b`)
+		})
+
 		it('should handle truncation option', () => {
 			const mockTextNode = {
 				nodeType: 3, // TEXT_NODE

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -1,6 +1,7 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 /**
  * The whole-pixel line-height for a given font size and tldraw's unitless line-height
@@ -93,6 +94,10 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
+// Iterate by grapheme cluster (e.g. emoji sequences, flags, accented letters)
+// rather than by code point, so a single glyph is measured as one unit.
+const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+
 const initialDefaultStyles = Object.freeze({
 	'overflow-wrap': 'break-word',
 	'word-break': 'auto',
@@ -103,13 +108,21 @@ const initialDefaultStyles = Object.freeze({
 })
 
 /** @public */
-export class TextManager {
+export class TextManager extends EditorManager {
 	private elm: HTMLDivElement
 	private poolElms: PoolItem[] = []
 
-	constructor(public editor: Editor) {
+	constructor(editor: Editor) {
+		super(editor)
 		this.elm = this.createMeasurementEl()
 		this.editor.getContainer().appendChild(this.elm)
+		this.register(() => {
+			this.elm.remove()
+			for (const { el } of this.poolElms) {
+				el.remove()
+			}
+			this.poolElms.length = 0
+		})
 	}
 
 	private createMeasurementEl(): HTMLDivElement {
@@ -170,6 +183,9 @@ export class TextManager {
 			'font-weight': opts.fontWeight,
 			'font-size': opts.fontSize + 'px',
 			'line-height': `${resolveLineHeightPx(opts.fontSize, opts.lineHeight)}px`,
+			// Unitless multiplier consumed by the .tl-rich-text h1–h6 rule (see editor.css),
+			// so heading measurement matches on-canvas rendering.
+			'--tl-rich-text-heading-line-height': `${opts.lineHeight}`,
 			padding: opts.padding,
 			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
 			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
@@ -178,14 +194,6 @@ export class TextManager {
 		}
 	}
 
-	dispose() {
-		this.elm.remove()
-		for (const { el } of this.poolElms) {
-			el.remove()
-		}
-		this.poolElms.length = 0
-	}
-
 	private ensurePoolSize(size: number) {
 		if (this.poolElms.length >= size) return
 
@@ -301,15 +309,24 @@ export class TextManager {
 		for (const childNode of element.childNodes) {
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
-			for (const char of childNode.textContent ?? '') {
-				// place the range around the characters we're interested in
+			for (const { segment } of graphemeSegmenter.segment(childNode.textContent ?? '')) {
+				// place the range around the grapheme we're interested in
 				range.setStart(textNode, idx)
-				range.setEnd(textNode, idx + char.length)
+				range.setEnd(textNode, idx + segment.length)
 				// measure the range. some browsers return multiple rects for the
 				// first char in a new line - one for the line break, and one for
 				// the character itself. we're only interested in the character.
 				const rects = range.getClientRects()
-				const rect = rects[rects.length - 1]!
+				const rect = rects[rects.length - 1]
+
+				// some graphemes produce no layout rectangle (e.g. zero-width
+				// spaces or newlines). skip them rather than crashing, but keep
+				// advancing the index so later graphemes stay aligned.
+				// See https://github.com/tldraw/tldraw/issues/9112.
+				if (!rect) {
+					idx += segment.length
+					continue
+				}
 
 				// calculate the position of the character relative to the element
 				const top = rect.top + offsetY
@@ -317,7 +334,7 @@ export class TextManager {
 				const right = rect.right + offsetX
 				const isRTL = left < prevCharLeftForRTLTest
 
-				const isSpaceCharacter = spaceCharacterRegex.test(char)
+				const isSpaceCharacter = spaceCharacterRegex.test(segment)
 				if (
 					// If we're at a word boundary...
 					isSpaceCharacter !== prevCharWasSpaceCharacter ||
@@ -341,7 +358,7 @@ export class TextManager {
 					// start a new span
 					currentSpan = {
 						box: { x: left, y: top, w: rect.width, h: rect.height },
-						text: char,
+						text: segment,
 					}
 					prevCharLeftForRTLTest = left
 				} else {
@@ -352,16 +369,16 @@ export class TextManager {
 
 					// otherwise we just need to extend the current span with the next character
 					currentSpan.box.w = isRTL ? currentSpan.box.w + rect.width : right - currentSpan.box.x
-					currentSpan.text += char
+					currentSpan.text += segment
 				}
 
-				if (char === '\n') {
+				if (segment === '\n') {
 					prevCharLeftForRTLTest = 0
 				}
 
 				prevCharWasSpaceCharacter = isSpaceCharacter
 				prevCharTop = top
-				idx += char.length
+				idx += segment.length
 			}
 		}
 

package/src/lib/editor/managers/TickManager/TickManager.test.ts

@@ -19,7 +19,6 @@ describe('TickManager', () => {
 	let editor: Mocked<Editor>
 	let tickManager: TickManager
 	let mockEmit: Mock
-	let mockDisposablesAdd: Mock
 
 	beforeEach(() => {
 		vi.clearAllMocks()
@@ -38,13 +37,9 @@ describe('TickManager', () => {
 		mockCancelAnimationFrame.mockImplementation(() => {})
 
 		mockEmit = vi.fn()
-		mockDisposablesAdd = vi.fn()
 
 		editor = {
 			emit: mockEmit,
-			disposables: {
-				add: mockDisposablesAdd,
-			},
 		} as unknown as Mocked<Editor>
 
 		tickManager = new TickManager(editor)
@@ -58,15 +53,10 @@ describe('TickManager', () => {
 
 	describe('constructor and initialization', () => {
 		it('should initialize with correct default values', () => {
-			expect(tickManager.editor).toBe(editor)
 			expect(tickManager.isPaused).toBe(false)
 			expect(tickManager.now).toBe(1000)
 		})
 
-		it('should add dispose method to editor disposables', () => {
-			expect(mockDisposablesAdd).toHaveBeenCalledWith(tickManager.dispose)
-		})
-
 		it('should start the tick loop on construction', () => {
 			expect(mockRequestAnimationFrame).toHaveBeenCalled()
 		})

package/src/lib/editor/managers/TickManager/TickManager.ts

@@ -1,5 +1,6 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 const throttleToNextFrame =
 	typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
@@ -13,9 +14,9 @@ const throttleToNextFrame =
 		: _throttleToNextFrame
 
 /** @internal */
-export class TickManager {
-	constructor(public editor: Editor) {
-		this.editor.disposables.add(this.dispose)
+export class TickManager extends EditorManager {
+	constructor(editor: Editor) {
+		super(editor)
 		this.start()
 	}
 
@@ -45,11 +46,9 @@ export class TickManager {
 		this.cancelRaf = throttleToNextFrame(this.tick)
 	}
 
-	// Clear the listener
-	@bind
 	dispose() {
 		this.isPaused = true
-
 		this.cancelRaf?.()
+		super.dispose()
 	}
 }

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -5,7 +5,7 @@ import { BaseBoxShapeUtil, TLBaseBoxShape } from './BaseBoxShapeUtil'
 import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
 
 /**
- * A base class for frame-like shapes — containers that clip their children,
+ * A base class for frame-like shapes — containers that clip their children except arrows,
  * require full-brush selection, block erasure from inside, and support
  * drag-and-drop reparenting.
  *
@@ -17,6 +17,7 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
  * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
+ * - `shouldClipChild()` clips all children except arrows
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
  *
@@ -69,6 +70,10 @@ export abstract class BaseFrameLikeShapeUtil<
 		return this.editor.getShapeGeometry(shape.id).vertices
 	}
 
+	override shouldClipChild(child: TLShape): boolean {
+		return child.type !== 'arrow'
+	}
+
 	override onDragShapesIn(
 		shape: Shape,
 		draggingShapes: TLShape[],

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -1039,6 +1039,7 @@ export interface TLCropInfo<T extends TLShape> {
 	uncroppedSize: { w: number; h: number }
 	initialShape: T
 	aspectRatioLocked?: boolean
+	isResizingFromCenter?: boolean
 }
 
 /** @public */

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -4,7 +4,6 @@ import { Vec } from '../../../../primitives/Vec'
 import type { Editor } from '../../../Editor'
 import { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'
 import { TLPointerEventInfo } from '../../../types/event-types'
-import { cancelShapeCreationOnLongPress } from '../../cancelShapeCreationOnLongPress'
 import { StateNode } from '../../StateNode'
 import type { BaseBoxShapeTool } from '../BaseBoxShapeTool'
 
@@ -67,7 +66,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onLongPress() {
-		cancelShapeCreationOnLongPress(this.editor, () => this.cancel())
+		// On a touch (coarse pointer) long-press, cancel the pending shape so it leaves nothing behind.
+		if (this.editor.getInstanceState().isCoarsePointer) this.cancel()
 	}
 
 	override onCancel() {

package/src/lib/editor/types/emit-types.ts

@@ -6,6 +6,7 @@ import { TLEventInfo } from './event-types'
 export interface TLEventMap {
 	// Lifecycle / Internal
 	mount: []
+	unmount: []
 	'max-shapes': [{ name: string; pageId: TLPageId; count: number }]
 	change: [HistoryEntry<TLRecord>]
 	update: []