@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

package/src/lib/editor/derivations/bindingsIndex.ts

@@ -18,6 +18,8 @@ function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 		} else {
 			bindingsForFromShape.push(binding)
 		}
+		// A binding from a shape to itself belongs in that shape's array once, not twice
+		if (toId === fromId) continue
 		const bindingsForToShape = shapesToBindings.get(toId)
 		if (!bindingsForToShape) {
 			shapesToBindings.set(toId, [binding])
@@ -83,6 +85,7 @@ export function bindingsIndex(editor: Editor): Computed<TLBindingsIndex> {
 
 		function addBinding(binding: TLBinding) {
 			ensureNewArray(binding.fromId).push(binding)
+			if (binding.toId === binding.fromId) return
 			ensureNewArray(binding.toId).push(binding)
 		}
 

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

@@ -34,6 +34,7 @@ describe('ClickManager', () => {
 		vi.useFakeTimers()
 		mockTimers = {
 			setTimeout: vi.fn((fn, delay) => setTimeout(fn, delay)),
+			clearTimeout: vi.fn((id) => clearTimeout(id)),
 		}
 
 		const mockCurrentScreenPoint = new Vec(0, 0)

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

@@ -25,7 +25,7 @@ export class ClickManager {
 	@bind
 	_getClickTimeout(state: TLClickState, id = uniqueId()) {
 		this._clickId = id
-		clearTimeout(this._clickTimeout)
+		this.editor.timers.clearTimeout(this._clickTimeout)
 		this._clickTimeout = this.editor.timers.setTimeout(
 			() => {
 				if (this._clickState === state && this._clickId === id) {
@@ -166,7 +166,8 @@ export class ClickManager {
 	 */
 	@bind
 	cancelDoubleClickTimeout() {
-		this._clickTimeout = clearTimeout(this._clickTimeout)
+		this.editor.timers.clearTimeout(this._clickTimeout)
+		this._clickTimeout = undefined
 		this._clickState = 'idle'
 		// when a double click is cancelled, we are no longer pending any further
 		// clicks, so we set this to false even if the user is still pressing

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

@@ -4,16 +4,24 @@ import { EditorManager } from './EditorManager'
 
 class TestManager extends EditorManager {
 	onTestEvent = vi.fn()
+	removeTestEvent: () => void
 
 	constructor(editor: Editor) {
 		super(editor)
-		this.addEditorEvent('frame', this.onTestEvent)
+		this.removeTestEvent = this.addEditorEvent('frame', this.onTestEvent)
+	}
+
+	detachTestEvent() {
+		this.unregister(this.removeTestEvent)
 	}
 
 	cancelRaf = vi.fn()
 	startRaf() {
 		this.register(this.cancelRaf)
 	}
+	stopRaf() {
+		this.unregister(this.cancelRaf)
+	}
 }
 
 describe('EditorManager', () => {
@@ -48,4 +56,27 @@ describe('EditorManager', () => {
 		manager.dispose()
 		expect(() => manager.dispose()).not.toThrow()
 	})
+
+	it('unregister runs the disposable now and drops it from dispose', () => {
+		manager.startRaf()
+		manager.stopRaf()
+		expect(manager.cancelRaf).toHaveBeenCalledTimes(1)
+		manager.dispose()
+		expect(manager.cancelRaf).toHaveBeenCalledTimes(1)
+	})
+
+	it('unregister ignores a disposable that already ran', () => {
+		manager.startRaf()
+		manager.dispose()
+		manager.stopRaf()
+		expect(manager.cancelRaf).toHaveBeenCalledTimes(1)
+	})
+
+	it('addEditorEvent returns the registered unsubscribe so it can be detached early', () => {
+		manager.detachTestEvent()
+		expect(off).toHaveBeenCalledTimes(1)
+		expect(off).toHaveBeenCalledWith('frame', manager.onTestEvent)
+		manager.dispose()
+		expect(off).toHaveBeenCalledTimes(1)
+	})
 })

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

@@ -16,6 +16,8 @@ import type { TLEventMap } from '../types/emit-types'
  * - Reaction (`react(...)` from `@tldraw/state`): `this.register(react(...))`
  * - DOM listener: `this.register(() => el.removeEventListener(...))`
  * - Other resource (cache, index, child manager): `this.register(() => x.dispose())`
+ * - Resource held only part of the time (a listener attached while subscribers exist):
+ *   `this.register(...)` on attach and `this.unregister(...)` on detach, see `PerformanceManager`
  *
  * For timeouts, intervals, and animation frames prefer `editor.timers` (context-grouped
  * and auto-disposed) over raw `setTimeout`. For cleanup on the editor itself rather than a
@@ -40,16 +42,26 @@ export abstract class EditorManager {
 		return dispose
 	}
 
+	/**
+	 * Run a registered teardown now instead of at `dispose()`. A teardown that is no longer
+	 * registered (already run by `dispose()`, or never registered) is skipped, so nothing is
+	 * torn down twice.
+	 */
+	protected unregister(dispose: () => void): void {
+		if (this.disposables.delete(dispose)) dispose()
+	}
+
 	/**
 	 * Subscribe to an editor bus event and register the matching unsubscribe, so the listener
-	 * is removed automatically on `dispose()`.
+	 * is removed automatically on `dispose()`. Returns that unsubscribe, for passing to
+	 * {@link EditorManager.unregister} to detach it before `dispose()`.
 	 */
 	protected addEditorEvent<E extends keyof TLEventMap>(
 		event: E,
 		fn: (...args: TLEventMap[E]) => void
-	): void {
+	): () => void {
 		this.editor.on(event, fn as any)
-		this.register(() => this.editor.off(event, fn as any))
+		return this.register(() => this.editor.off(event, fn as any))
 	}
 
 	/** @internal */

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

@@ -38,6 +38,7 @@ function createMockEditor() {
 		getViewportScreenBounds: () => ({ w: 1920, h: 1080 }),
 		timers: {
 			setTimeout: (fn: () => void, ms: number) => setTimeout(fn, ms),
+			clearTimeout: (id: number) => clearTimeout(id),
 		},
 		_listeners: listeners,
 	} as any
@@ -94,6 +95,85 @@ describe('PerformanceManager', () => {
 		})
 	})
 
+	describe('dispose()', () => {
+		it('removes every lazily attached editor listener', () => {
+			const editor = createMockEditor()
+			const pm = new PerformanceManager(editor)
+			pm.on('interaction-end', vi.fn())
+			pm.on('shapes-created', vi.fn())
+			pm.on('shapes-updated', vi.fn())
+			pm.on('shapes-deleted', vi.fn())
+			expect(editor._listeners['frame']).toHaveLength(1)
+			expect(editor._listeners['created-shapes']).toHaveLength(1)
+			expect(editor._listeners['edited-shapes']).toHaveLength(1)
+			expect(editor._listeners['deleted-shapes']).toHaveLength(1)
+
+			pm.dispose()
+
+			expect(editor._listeners).toEqual({
+				frame: [],
+				'created-shapes': [],
+				'edited-shapes': [],
+				'deleted-shapes': [],
+			})
+		})
+
+		it('disconnects the LoAF observer', () => {
+			const origPO = globalThis.PerformanceObserver
+			const mockDisconnect = vi.fn()
+			globalThis.PerformanceObserver = class MockPO {
+				constructor(_cb: any) {}
+				observe() {}
+				disconnect = mockDisconnect
+				static supportedEntryTypes = ['long-animation-frame']
+			} as any
+
+			const editor = createMockEditor()
+			const pm = new PerformanceManager(editor)
+			pm.on('interaction-end', vi.fn())
+			expect(mockDisconnect).not.toHaveBeenCalled()
+
+			pm.dispose()
+			expect(mockDisconnect).toHaveBeenCalledTimes(1)
+
+			globalThis.PerformanceObserver = origPO
+		})
+
+		it('does not tear down a listener that was already detached', () => {
+			const editor = createMockEditor()
+			const off = vi.spyOn(editor, 'off')
+			const pm = new PerformanceManager(editor)
+			pm.on('shapes-created', vi.fn())()
+			expect(off).toHaveBeenCalledTimes(1)
+
+			pm.dispose()
+			expect(off).toHaveBeenCalledTimes(1)
+		})
+
+		it('makes a stale unsubscribe a no-op after dispose', () => {
+			const editor = createMockEditor()
+			const off = vi.spyOn(editor, 'off')
+			const pm = new PerformanceManager(editor)
+			const unsub = pm.on('interaction-end', vi.fn())
+
+			pm.dispose()
+			expect(off).toHaveBeenCalledTimes(1)
+			unsub()
+			expect(off).toHaveBeenCalledTimes(1)
+		})
+
+		it('attaches again for a subscriber added after dispose', () => {
+			const editor = createMockEditor()
+			const pm = new PerformanceManager(editor)
+			pm.on('shapes-created', vi.fn())
+			pm.dispose()
+			expect(editor._listeners['created-shapes']).toHaveLength(0)
+
+			pm.on('shapes-created', vi.fn())
+			expect(editor._listeners['created-shapes']).toHaveLength(1)
+		})
+	})
+
 	describe('interaction tracking', () => {
 		it('emits interaction-start when notified', () => {
 			const editor = createMockEditor()

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

@@ -1,7 +1,7 @@
 import type { TLRecord, TLShapeId } from '@tldraw/tlschema'
 import { bind } from '@tldraw/utils'
 import EventEmitter from 'eventemitter3'
-import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 import type {
 	TLCameraEndPerfEvent,
 	TLCameraStartPerfEvent,
@@ -14,6 +14,9 @@ import type {
 	TLUndoRedoPerfEvent,
 } from './perf-types'
 
+// The editor listeners and observer that are attached only while a subscriber needs them
+type LazyListener = 'frame' | 'loaf' | 'shapes-created' | 'shapes-updated' | 'shapes-deleted'
+
 function percentile(sorted: number[], p: number): number {
 	const idx = Math.ceil(p * sorted.length) - 1
 	return sorted[Math.max(0, idx)]
@@ -71,12 +74,10 @@ function toLoafEntry(entry: PerformanceEntry): TLPerfLongAnimationFrame | null {
  *
  * @public
  */
-export class PerformanceManager {
+export class PerformanceManager extends EditorManager {
 	/** @internal */
 	readonly emitter = new EventEmitter<TLPerfEventMap>()
 
-	private editor: Editor
-
 	// Active interaction tracking
 	private activeInteraction: {
 		name: string
@@ -96,18 +97,8 @@ export class PerformanceManager {
 		loafEntries: TLPerfLongAnimationFrame[]
 	} | null = null
 
-	// Lazy listener cleanup functions
-	private frameCleanup: (() => void) | null = null
-	private shapeCreatedCleanup: (() => void) | null = null
-	private shapeEditedCleanup: (() => void) | null = null
-	private shapeDeletedCleanup: (() => void) | null = null
-
-	// LoAF observer
-	private loafObserver: PerformanceObserver | null = null
-
-	constructor(editor: Editor) {
-		this.editor = editor
-	}
+	// Cleanups for whatever is currently attached, keyed so a detach unregisters only its own
+	private readonly lazyCleanups = new Map<LazyListener, () => void>()
 
 	/**
 	 * Subscribe to a performance event. Returns an unsubscribe function.
@@ -158,19 +149,12 @@ export class PerformanceManager {
 
 	/** @internal */
 	dispose() {
-		if (this.activeCamera?.timeout) clearTimeout(this.activeCamera.timeout)
+		if (this.activeCamera?.timeout) this.editor.timers.clearTimeout(this.activeCamera.timeout)
 		this.activeInteraction = null
 		this.activeCamera = null
-		this.frameCleanup?.()
-		this.frameCleanup = null
-		this.shapeCreatedCleanup?.()
-		this.shapeCreatedCleanup = null
-		this.shapeEditedCleanup?.()
-		this.shapeEditedCleanup = null
-		this.shapeDeletedCleanup?.()
-		this.shapeDeletedCleanup = null
-		this._stopLoafObserver()
+		this.lazyCleanups.clear()
 		this.emitter.removeAllListeners()
+		super.dispose()
 	}
 
 	// --- Internal notification methods ---
@@ -259,7 +243,7 @@ export class PerformanceManager {
 		if (this.activeCamera) {
 			// Extend existing camera session
 			if (this.activeCamera.timeout) {
-				clearTimeout(this.activeCamera.timeout)
+				this.editor.timers.clearTimeout(this.activeCamera.timeout)
 			}
 			// If type changed, end old and start new
 			if (this.activeCamera.type !== type) {
@@ -313,7 +297,7 @@ export class PerformanceManager {
 		const camera = this.activeCamera
 		if (!camera) return
 		this.activeCamera = null
-		if (camera.timeout) clearTimeout(camera.timeout)
+		if (camera.timeout) this.editor.timers.clearTimeout(camera.timeout)
 
 		if (this.emitter.listenerCount('camera-end') === 0) return
 
@@ -444,7 +428,7 @@ export class PerformanceManager {
 			return
 		}
 
-		this.loafObserver = new PerformanceObserver((list) => {
+		const observer = new PerformanceObserver((list) => {
 			const isInteractionActive = this.activeInteraction !== null
 			const isCameraActive = this.activeCamera !== null
 
@@ -463,14 +447,11 @@ export class PerformanceManager {
 			}
 		})
 
-		this.loafObserver.observe({ type: 'long-animation-frame', buffered: false })
-	}
-
-	private _stopLoafObserver() {
-		if (this.loafObserver) {
-			this.loafObserver.disconnect()
-			this.loafObserver = null
-		}
+		observer.observe({ type: 'long-animation-frame', buffered: false })
+		this.lazyCleanups.set(
+			'loaf',
+			this.register(() => observer.disconnect())
+		)
 	}
 
 	// --- Lazy listener management ---
@@ -495,7 +476,7 @@ export class PerformanceManager {
 	private _maybeAttachLazyListeners(event: keyof TLPerfEventMap) {
 		// Frame listener needed for frame event + interaction/camera frame time tracking
 		if (
-			!this.frameCleanup &&
+			!this.lazyCleanups.has('frame') &&
 			(event === 'frame' ||
 				event === 'interaction-start' ||
 				event === 'interaction-end' ||
@@ -503,81 +484,73 @@ export class PerformanceManager {
 				event === 'camera-end')
 		) {
 			if (this._needsFrameListener()) {
-				this.editor.on('frame', this._onFrame)
-				this.frameCleanup = () => this.editor.off('frame', this._onFrame)
+				this.lazyCleanups.set('frame', this.addEditorEvent('frame', this._onFrame))
 			}
 		}
 
 		// LoAF observer needed when interaction-end or camera-end listeners exist
-		if (!this.loafObserver && (event === 'interaction-end' || event === 'camera-end')) {
+		if (!this.lazyCleanups.has('loaf') && (event === 'interaction-end' || event === 'camera-end')) {
 			if (this._needsLoafObserver()) {
 				this._startLoafObserver()
 			}
 		}
 
-		if (!this.shapeCreatedCleanup && event === 'shapes-created') {
-			this.editor.on('created-shapes', this._onShapesCreated)
-			this.shapeCreatedCleanup = () => this.editor.off('created-shapes', this._onShapesCreated)
+		if (!this.lazyCleanups.has('shapes-created') && event === 'shapes-created') {
+			this.lazyCleanups.set(
+				'shapes-created',
+				this.addEditorEvent('created-shapes', this._onShapesCreated)
+			)
 		}
 
-		if (!this.shapeEditedCleanup && event === 'shapes-updated') {
-			this.editor.on('edited-shapes', this._onShapesEdited)
-			this.shapeEditedCleanup = () => this.editor.off('edited-shapes', this._onShapesEdited)
+		if (!this.lazyCleanups.has('shapes-updated') && event === 'shapes-updated') {
+			this.lazyCleanups.set(
+				'shapes-updated',
+				this.addEditorEvent('edited-shapes', this._onShapesEdited)
+			)
 		}
 
-		if (!this.shapeDeletedCleanup && event === 'shapes-deleted') {
-			this.editor.on('deleted-shapes', this._onShapesDeleted)
-			this.shapeDeletedCleanup = () => this.editor.off('deleted-shapes', this._onShapesDeleted)
+		if (!this.lazyCleanups.has('shapes-deleted') && event === 'shapes-deleted') {
+			this.lazyCleanups.set(
+				'shapes-deleted',
+				this.addEditorEvent('deleted-shapes', this._onShapesDeleted)
+			)
 		}
 	}
 
 	private _maybeDetachLazyListeners(event: keyof TLPerfEventMap) {
 		if (
-			this.frameCleanup &&
 			(event === 'frame' ||
 				event === 'interaction-start' ||
 				event === 'interaction-end' ||
 				event === 'camera-start' ||
-				event === 'camera-end')
+				event === 'camera-end') &&
+			!this._needsFrameListener()
 		) {
-			if (!this._needsFrameListener()) {
-				this.frameCleanup()
-				this.frameCleanup = null
-			}
+			this._detachLazy('frame')
 		}
 
 		// Stop LoAF observer when no longer needed
-		if (this.loafObserver && (event === 'interaction-end' || event === 'camera-end')) {
-			if (!this._needsLoafObserver()) {
-				this._stopLoafObserver()
-			}
+		if ((event === 'interaction-end' || event === 'camera-end') && !this._needsLoafObserver()) {
+			this._detachLazy('loaf')
 		}
 
-		if (
-			this.shapeCreatedCleanup &&
-			event === 'shapes-created' &&
-			this.emitter.listenerCount('shapes-created') === 0
-		) {
-			this.shapeCreatedCleanup()
-			this.shapeCreatedCleanup = null
+		if (event === 'shapes-created' && this.emitter.listenerCount('shapes-created') === 0) {
+			this._detachLazy('shapes-created')
 		}
 
-		if (
-			this.shapeEditedCleanup &&
-			event === 'shapes-updated' &&
-			this.emitter.listenerCount('shapes-updated') === 0
-		) {
-			this.shapeEditedCleanup()
-			this.shapeEditedCleanup = null
+		if (event === 'shapes-updated' && this.emitter.listenerCount('shapes-updated') === 0) {
+			this._detachLazy('shapes-updated')
 		}
 
-		if (
-			this.shapeDeletedCleanup &&
-			event === 'shapes-deleted' &&
-			this.emitter.listenerCount('shapes-deleted') === 0
-		) {
-			this.shapeDeletedCleanup()
-			this.shapeDeletedCleanup = null
+		if (event === 'shapes-deleted' && this.emitter.listenerCount('shapes-deleted') === 0) {
+			this._detachLazy('shapes-deleted')
 		}
 	}
+
+	private _detachLazy(key: LazyListener) {
+		const cleanup = this.lazyCleanups.get(key)
+		if (!cleanup) return
+		this.unregister(cleanup)
+		this.lazyCleanups.delete(key)
+	}
 }

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

@@ -409,7 +409,7 @@ export class ScribbleManager {
 
 	private clearIdleTimeout(session: Session): void {
 		if (session.idleTimeoutHandle !== undefined) {
-			clearTimeout(session.idleTimeoutHandle)
+			this.editor.timers.clearTimeout(session.idleTimeoutHandle)
 			session.idleTimeoutHandle = undefined
 		}
 	}

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -159,6 +159,22 @@ function findAdjacentGaps(
 	return matches
 }
 
+// Adjacent evenly spaced items produce many center snaps whose gaps cover the
+// same breadth; only the smallest such gap needs showing, so find the one a new
+// gap would be redundant with. Touching breadths don't count as overlapping.
+function findOverlappingCenterSnap(snaps: NearestSnap[], gap: Gap) {
+	return snaps.find(
+		(snap): snap is Extract<NearestSnap, { type: 'gap_center' }> =>
+			snap.type === 'gap_center' &&
+			rangesOverlap(
+				gap.breadthIntersection[0],
+				gap.breadthIntersection[1],
+				snap.gap.breadthIntersection[0],
+				snap.gap.breadthIntersection[1]
+			)
+	)
+}
+
 function dedupeGapSnaps(snaps: Array<Extract<SnapIndicator, { type: 'gaps' }>>) {
 	// sort by descending order of number of gaps
 	snaps.sort((a, b) => b.gaps.length - a.gaps.length)
@@ -597,9 +613,8 @@ export class BoundsSnaps {
 		// which are closest to it in each axis
 		for (const thisSnapPoint of selectionSnapPoints) {
 			for (const otherSnapPoint of otherNodeSnapPoints) {
-				const offset = Vec.Sub(thisSnapPoint, otherSnapPoint)
-				const offsetX = Math.abs(offset.x)
-				const offsetY = Math.abs(offset.y)
+				const offsetX = Math.abs(thisSnapPoint.x - otherSnapPoint.x)
+				const offsetY = Math.abs(thisSnapPoint.y - otherSnapPoint.y)
 
 				if (round(offsetX) <= round(minOffset.x)) {
 					if (round(offsetX) < round(minOffset.x)) {
@@ -718,23 +733,14 @@ export class BoundsSnaps {
 				//              │         │
 				//              └─────────┘
 
-				const otherCenterSnap = nearestSnapsX.find(({ type }) => type === 'gap_center') as
-					| Extract<NearestSnap, { type: 'gap_center' }>
-					| undefined
-
-				const gapBreadthsOverlap =
-					otherCenterSnap &&
-					rangeIntersection(
-						gap.breadthIntersection[0],
-						gap.breadthIntersection[1],
-						otherCenterSnap.gap.breadthIntersection[0],
-						otherCenterSnap.gap.breadthIntersection[1]
-					)
+				const overlappingCenterSnap = findOverlappingCenterSnap(nearestSnapsX, gap)
 
-				// if there is another center snap and it's bigger than this one, and it overlaps with this one, replace it
-				if (otherCenterSnap && otherCenterSnap.gap.length > gap.length && gapBreadthsOverlap) {
-					nearestSnapsX[nearestSnapsX.indexOf(otherCenterSnap)] = snap
-				} else if (!otherCenterSnap || !gapBreadthsOverlap) {
+				// if there is another center snap that overlaps with this one, keep only the smaller gap
+				if (overlappingCenterSnap) {
+					if (overlappingCenterSnap.gap.length > gap.length) {
+						nearestSnapsX[nearestSnapsX.indexOf(overlappingCenterSnap)] = snap
+					}
+				} else {
 					nearestSnapsX.push(snap)
 				}
 			}
@@ -853,26 +859,16 @@ export class BoundsSnaps {
 				//              │         │
 				//              └─────────┘
 
-				const otherCenterSnap = nearestSnapsY.find(({ type }) => type === 'gap_center') as
-					| Extract<NearestSnap, { type: 'gap_center' }>
-					| undefined
-
-				const gapBreadthsOverlap =
-					otherCenterSnap &&
-					rangesOverlap(
-						otherCenterSnap.gap.breadthIntersection[0],
-						otherCenterSnap.gap.breadthIntersection[1],
-						gap.breadthIntersection[0],
-						gap.breadthIntersection[1]
-					)
+				const overlappingCenterSnap = findOverlappingCenterSnap(nearestSnapsY, gap)
 
-				// if there is another center snap and it's bigger than this one, and it overlaps with this one, replace it
-				if (otherCenterSnap && otherCenterSnap.gap.length > gap.length && gapBreadthsOverlap) {
-					nearestSnapsY[nearestSnapsY.indexOf(otherCenterSnap)] = snap
-				} else if (!otherCenterSnap || !gapBreadthsOverlap) {
+				// if there is another center snap that overlaps with this one, keep only the smaller gap
+				if (overlappingCenterSnap) {
+					if (overlappingCenterSnap.gap.length > gap.length) {
+						nearestSnapsY[nearestSnapsY.indexOf(overlappingCenterSnap)] = snap
+					}
+				} else {
 					nearestSnapsY.push(snap)
 				}
-				continue
 			}
 
 			// check for duplication top match

package/src/lib/editor/managers/SnapManager/HandleSnaps.ts

@@ -1,7 +1,8 @@
 import { computed } from '@tldraw/state'
 import { TLHandle, TLShape, TLShapeId, VecModel } from '@tldraw/tlschema'
 import { assertExists, uniqueId } from '@tldraw/utils'
-import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
+import { Geometry2d, Geometry2dFilters } from '../../../primitives/geometry/Geometry2d'
+import { Group2d } from '../../../primitives/geometry/Group2d'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 import type { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
@@ -156,11 +157,21 @@ export class HandleSnaps {
 		let minDistanceForOutline = snapThreshold
 		let nearestPointOnOutline: Vec | null = null
 
+		// Labels and internal detail (a note's label, a geo check mark) are not outlines
+		// to snap to. Group2d.nearestPoint throws when the filter leaves no child, so
+		// skip those groups.
+		const filters = Geometry2dFilters.EXCLUDE_NON_STANDARD
 		for (const { shapeId, outline } of this.iterateSnapOutlines(currentShapeId, handle)) {
+			if (
+				outline instanceof Group2d &&
+				outline.children.every((child) => child.isExcludedByFilter(filters))
+			) {
+				continue
+			}
 			const shapePageTransform = assertExists(this.editor.getShapePageTransform(shapeId))
 			const pointInShapeSpace = this.editor.getPointInShapeSpace(shapeId, handleInPageSpace)
 
-			const nearestShapePointInShapeSpace = outline.nearestPoint(pointInShapeSpace)
+			const nearestShapePointInShapeSpace = outline.nearestPoint(pointInShapeSpace, filters)
 			const nearestInPageSpace = shapePageTransform.applyToPoint(nearestShapePointInShapeSpace)
 
 			if (Vec.DistMin(handleInPageSpace, nearestInPageSpace, minDistanceForOutline)) {

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

@@ -78,6 +78,7 @@ describe('SnapManager', () => {
 			getShapePageBounds: vi.fn(),
 			isShapeOfType: vi.fn(),
 			isShapeFrameLike: vi.fn(() => false),
+			isShapeHidden: vi.fn(() => false),
 		} as any
 
 		editor.getShapeUtil.mockReturnValue({
@@ -337,6 +338,18 @@ describe('SnapManager', () => {
 			expect(result.has(shapeId)).toBe(false)
 		})
 
+		it('should exclude hidden shapes', () => {
+			const shapeId = createShapeId('shape1')
+
+			editor.getSortedChildIdsForParent.mockReturnValue([shapeId])
+			editor.getShape.mockReturnValue(createMockShape(shapeId) as any)
+			editor.getShapePageBounds.mockReturnValue(new Box(10, 10, 50, 50))
+			editor.isShapeHidden.mockReturnValue(true)
+
+			const result = snapManager.getSnappableShapes()
+			expect(result.has(shapeId)).toBe(false)
+		})
+
 		it('should exclude shapes outside viewport bounds', () => {
 			const shapeId = createShapeId('shape1')
 			const shape = createMockShape(shapeId)