@tldraw/editor 5.5.0-next.b6a9f7cd7be2 → 5.5.0-next.c91b2de0a423

package/src/lib/editor/Editor.ts

@@ -2013,7 +2013,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this._updateInstanceState(partial, { history: 'ignore', ...historyOptions })
 
 		if (partial.isChangingStyle !== undefined) {
-			clearTimeout(this._isChangingStyleTimeout)
+			this.timers.clearTimeout(this._isChangingStyleTimeout)
 			if (partial.isChangingStyle === true) {
 				// If we've set to true, set a new reset timeout to change the value back to false after 1 seconds
 				this._isChangingStyleTimeout = this.timers.setTimeout(() => {
@@ -10797,22 +10797,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const releaseMeta = this._metaKeyTimeout !== -1
 
 		if (releaseShift) {
-			clearTimeout(this._shiftKeyTimeout)
+			this.timers.clearTimeout(this._shiftKeyTimeout)
 			this._shiftKeyTimeout = -1
 			this.inputs.setShiftKey(false)
 		}
 		if (releaseAlt) {
-			clearTimeout(this._altKeyTimeout)
+			this.timers.clearTimeout(this._altKeyTimeout)
 			this._altKeyTimeout = -1
 			this.inputs.setAltKey(false)
 		}
 		if (releaseCtrl) {
-			clearTimeout(this._ctrlKeyTimeout)
+			this.timers.clearTimeout(this._ctrlKeyTimeout)
 			this._ctrlKeyTimeout = -1
 			this.inputs.setCtrlKey(false)
 		}
 		if (releaseMeta) {
-			clearTimeout(this._metaKeyTimeout)
+			this.timers.clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
 			this.inputs.setMetaKey(false)
 		}
@@ -10962,7 +10962,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.shiftKey) {
-			clearTimeout(this._shiftKeyTimeout)
+			this.timers.clearTimeout(this._shiftKeyTimeout)
 			this._shiftKeyTimeout = -1
 			inputs.setShiftKey(true)
 		} else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
@@ -10970,7 +10970,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.altKey) {
-			clearTimeout(this._altKeyTimeout)
+			this.timers.clearTimeout(this._altKeyTimeout)
 			this._altKeyTimeout = -1
 			inputs.setAltKey(true)
 		} else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
@@ -10978,7 +10978,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.ctrlKey) {
-			clearTimeout(this._ctrlKeyTimeout)
+			this.timers.clearTimeout(this._ctrlKeyTimeout)
 			this._ctrlKeyTimeout = -1
 			inputs.setCtrlKey(true)
 		} else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
@@ -10988,7 +10988,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (info.metaKey && info.name !== 'key_up') {
 			// Unlike the other modifiers, the native metaKey property is still true on keyup.
 			// If we don't have this guard, then the metakey will be left true without the timeout.
-			clearTimeout(this._metaKeyTimeout)
+			this.timers.clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
 			inputs.setMetaKey(true)
 		} else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
@@ -11005,8 +11005,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		switch (type) {
 			case 'pinch': {
-				if (cameraOptions.isLocked) return
-				clearTimeout(this._longPressTimeout)
+				this.timers.clearTimeout(this._longPressTimeout)
 				this.inputs.updateFromEvent(info)
 
 				switch (info.name) {
@@ -11043,6 +11042,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 					}
 					case 'pinch': {
 						if (!inputs.getIsPinching()) return
+						// Lock the zoom, not the gesture: skipping pinch_start would send the fingers'
+						// pointer events to the tool, and skipping pinch_end would leave isPinching stuck.
+						if (cameraOptions.isLocked) return
 
 						const {
 							point: { z = 1 },
@@ -11116,8 +11118,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 				let wheelBehavior = cameraOptions.wheelBehavior
 				const inputMode = this.user.getUserPreferences().inputMode
 
-				// If the user has set their input mode preference, then use that to determine the wheel behavior
-				if (inputMode !== null) {
+				// The user's input mode preference picks between pan and zoom, but it must not
+				// re-enable a wheel the app disabled with `wheelBehavior: 'none'`.
+				if (inputMode !== null && wheelBehavior !== 'none') {
 					wheelBehavior = inputMode === 'trackpad' ? 'pan' : 'zoom'
 				}
 
@@ -11191,15 +11194,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// Ignore pointer events while we're pinching
 				if (inputs.getIsPinching()) return
 
-				this.inputs.updateFromEvent(info)
 				const { isPen } = info
 				const { isPenMode } = instanceState
 
+				// In pen mode, reject non-pen input (a resting palm) before it touches any
+				// state: otherwise updateFromEvent moves the origin point out from under the
+				// pen's drag, and a palm pointer_up clears the pen's isPointing/isDragging.
+				if (isPenMode && !isPen) return
+
+				this.inputs.updateFromEvent(info)
+
 				switch (info.name) {
 					case 'pointer_down': {
-						// If we're in pen mode and the input is not a pen type, then stop here
-						if (isPenMode && !isPen) return
-
 						// A pointer down starts a new interaction, so flush any modifier that's
 						// still lingering in its release-debounce window: treat it as released now.
 						this._releaseDebouncedModifiers()
@@ -11255,8 +11261,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 							this.interrupt()
 						}
 
-						// On devices with erasers (like the Surface Pen or Wacom Pen), button 5 is the eraser
-						if (info.button === STYLUS_ERASER_BUTTON) {
+						// On devices with erasers (like the Surface Pen or Wacom Pen), button 5 is the eraser.
+						// Guarded on the eraser tool existing: the bare editor can be configured without
+						// it, and an unguarded transition would throw and crash the editor.
+						if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant('eraser')) {
 							this._restoreToolId = this.getCurrentToolId()
 							this.complete()
 							this.setCurrentTool('eraser')
@@ -11266,10 +11274,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 								this._prevCursor = this.getInstanceState().cursor.type
 							}
 							this.inputs.setIsPanning(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 						} else if (info.button === RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
 							this.inputs.setIsRightPointing(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 							return this
 						}
 
@@ -11284,9 +11292,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 						break
 					}
 					case 'pointer_move': {
-						// If the user is in pen mode, but the pointer is not a pen, stop here.
-						if (!isPen && isPenMode) return
-
 						const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
 
 						// Right-click pointing: waiting to see if this becomes a drag
@@ -11337,7 +11342,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						) {
 							// Start dragging
 							inputs.setIsDragging(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 						}
 						break
 					}
@@ -11345,13 +11350,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// Stop dragging / pointing
 						inputs.setIsDragging(false)
 						inputs.setIsPointing(false)
-						clearTimeout(this._longPressTimeout)
+						this.timers.clearTimeout(this._longPressTimeout)
 						// Remove the button from the buttons set
 						inputs.buttons.delete(info.button)
 
-						// If we're in pen mode and we're not using a pen, stop here
-						if (instanceState.isPenMode && !isPen) return
-
 						// Right-click pointing ended without dragging—this is a static
 						// right-click, so let it through to the state chart as right_click.
 						// Check isPanning first: if we transitioned to panning, isRightPointing
@@ -11421,7 +11423,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 								})
 							}
 						} else {
-							if (info.button === STYLUS_ERASER_BUTTON) {
+							if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant('eraser')) {
 								// If we were erasing with a stylus button, restore the tool we were using before we started erasing
 								this.complete()
 								this.setCurrentTool(this._restoreToolId)
@@ -11461,7 +11463,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 								this.inputs.setIsPanning(true)
 								this.inputs.setIsSpacebarPanning(true)
-								clearTimeout(this._longPressTimeout)
+								this.timers.clearTimeout(this._longPressTimeout)
 								this.setCursor({
 									type: this.inputs.getIsPointing() ? 'grabbing' : 'grab',
 									rotation: 0,
@@ -11489,7 +11491,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 									}
 								}
 
-								if (offset) {
+								// `_animateToViewport` bypasses `setCamera`, so honor the lock here.
+								if (offset && !cameraOptions.isLocked) {
 									const bounds = this.getViewportPageBounds()
 									const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }))
 									this._animateToViewport(next, { animation: { duration: 320 } })
@@ -11551,9 +11554,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				this.setCurrentTool('select')
 			}
 
-			// If a left click pointer event, send the event to the click manager.
+			// Send the event to the click manager. In pen mode only pen clicks count; otherwise
+			// every pointer does, including an indirect tablet stylus (a pen that never enables
+			// pen mode), which would otherwise never produce double-click events.
 			const { isPenMode } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
-			if (info.isPen === isPenMode) {
+			if (!isPenMode || info.isPen) {
 				// The click manager may return a new event, i.e. a double click event
 				// depending on the event coming in and its own state. If the event has
 				// changed then hand both events to the statechart
@@ -11585,7 +11590,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	private maybeTrackPerformance(name: string) {
 		if (debugFlags.measurePerformance.get()) {
 			if (this.performanceTracker.isStarted()) {
-				clearTimeout(this.performanceTrackerTimeout)
+				this.timers.clearTimeout(this.performanceTrackerTimeout)
 			} else {
 				this.performanceTracker.start(name)
 			}

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()