@tldraw/editor 5.2.0-next.b91d4a4551c9 → 5.2.0-next.e2b8d10bf10e

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

@@ -122,7 +122,7 @@ describe('ClickManager', () => {
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
 			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 
 		it('should generate double_click up event on pointer_up after double_click down', () => {
@@ -139,12 +139,34 @@ describe('ClickManager', () => {
 			expect(result.phase).toBe('up')
 		})
 
-		it('should dispatch double_click settle event after timeout in pendingTriple', () => {
+		it('should dispatch double_click settle-down event after timeout in pendingOverflow (pointer held)', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
+			// no pointer_up between or after — pointer is still down at settle time
+
+			vi.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'double_click',
+					phase: 'settle-down',
+				})
+			)
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should dispatch double_click settle-up event after timeout in pendingOverflow (pointer released)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
 
 			vi.advanceTimersByTime(350)
 
@@ -152,124 +174,84 @@ describe('ClickManager', () => {
 				expect.objectContaining({
 					type: 'click',
 					name: 'double_click',
-					phase: 'settle',
+					phase: 'settle-up',
 				})
 			)
 			expect(clickManager.clickState).toBe('idle')
 		})
 	})
 
-	describe('triple and quadruple click detection', () => {
-		it('should detect triple click on third pointer_down', () => {
+	describe('overflow click handling', () => {
+		it('should enter overflow on the third pointer_down without emitting another click', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const thirdDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
-			const result = clickManager.handlePointerEvent(thirdDown) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(thirdDown)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingQuadruple')
+			expect(result).toBe(thirdDown)
+			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should detect quadruple click on fourth pointer_down', () => {
+		it('should keep overflow active on further clicks', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second (double_click)
-			clickManager.handlePointerEvent(pointerDown) // third (triple_click)
-			const result = clickManager.handlePointerEvent(pointerDown) as TLClickEventInfo // fourth
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingOverflow')
-		})
-
-		it('should handle overflow state after quadruple click', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerDown) // fifth
+			clickManager.handlePointerEvent(pointerDown) // third (overflow)
+			const result = clickManager.handlePointerEvent(pointerDown) // fourth
 
 			expect(result).toBe(pointerDown)
 			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should generate triple_click up event on pointer_up after triple_click down', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('up')
-		})
-
-		it('should generate quadruple_click up event on pointer_up after quadruple_click down', () => {
+		it('should not emit double_click up events while in overflow', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
 			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(pointerUp)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('up')
+			expect(result).toBe(pointerUp)
+			expect(clickManager.clickState).toBe('overflow')
 		})
-	})
 
-	describe('timeout behavior and settle events', () => {
-		it('should dispatch triple_click settle event after timeout in pendingQuadruple', () => {
+		it('should return to idle after overflow timeout without dispatching a settle event', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
+			clickManager.handlePointerEvent(pointerDown) // third -> overflow
 
 			vi.advanceTimersByTime(350)
 
-			expect(editor.dispatch).toHaveBeenCalledWith(
-				expect.objectContaining({
-					type: 'click',
-					name: 'triple_click',
-					phase: 'settle',
-				})
-			)
+			expect(editor.dispatch).not.toHaveBeenCalled()
 			expect(clickManager.clickState).toBe('idle')
 		})
+	})
 
-		it('should dispatch quadruple_click settle event after timeout in pendingOverflow', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+	describe('timeout behavior and settle events', () => {
+		it('should track press/release state across the pending window (settle-down then release → settle-up)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down) // second press — pointer is down...
+			clickManager.handlePointerEvent(up) // ...but released before timeout
 
 			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
-					type: 'click',
-					name: 'quadruple_click',
-					phase: 'settle',
+					name: 'double_click',
+					phase: 'settle-up',
 				})
 			)
-			expect(clickManager.clickState).toBe('idle')
 		})
 
 		it('should use different timeout durations for different states', () => {
@@ -316,7 +298,7 @@ describe('ClickManager', () => {
 
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 	})
 
@@ -396,7 +378,7 @@ describe('ClickManager', () => {
 
 			clickManager.handlePointerEvent(pointerDown)
 			clickManager.handlePointerEvent(pointerDown) // double click
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 
 			clickManager.cancelDoubleClickTimeout()
 
@@ -416,9 +398,7 @@ describe('ClickManager', () => {
 			// Get to overflow state
 			clickManager.handlePointerEvent(pointerDown) // 1
 			clickManager.handlePointerEvent(pointerDown) // 2
-			clickManager.handlePointerEvent(pointerDown) // 3
-			clickManager.handlePointerEvent(pointerDown) // 4
-			clickManager.handlePointerEvent(pointerDown) // 5 -> overflow
+			clickManager.handlePointerEvent(pointerDown) // 3 -> overflow
 
 			expect(clickManager.clickState).toBe('overflow')
 

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

@@ -4,13 +4,7 @@ import type { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 
 /** @public */
-export type TLClickState =
-	| 'idle'
-	| 'pendingDouble'
-	| 'pendingTriple'
-	| 'pendingQuadruple'
-	| 'pendingOverflow'
-	| 'overflow'
+export type TLClickState = 'idle' | 'pendingDouble' | 'pendingOverflow' | 'overflow'
 
 const MAX_CLICK_DISTANCE = 40
 
@@ -26,6 +20,8 @@ export class ClickManager {
 
 	private _previousScreenPoint?: Vec
 
+	private _isPressingWhilePending = false
+
 	@bind
 	_getClickTimeout(state: TLClickState, id = uniqueId()) {
 		this._clickId = id
@@ -34,30 +30,12 @@ export class ClickManager {
 			() => {
 				if (this._clickState === state && this._clickId === id) {
 					switch (this._clickState) {
-						case 'pendingTriple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'double_click',
-								phase: 'settle',
-							})
-							break
-						}
-						case 'pendingQuadruple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'triple_click',
-								phase: 'settle',
-							})
-							break
-						}
 						case 'pendingOverflow': {
 							this.editor.dispatch({
 								...this.lastPointerInfo,
 								type: 'click',
-								name: 'quadruple_click',
-								phase: 'settle',
+								name: 'double_click',
+								phase: this._isPressingWhilePending ? 'settle-down' : 'settle-up',
 							})
 							break
 						}
@@ -100,6 +78,8 @@ export class ClickManager {
 				if (!this._clickState) return info
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = true
+
 				if (
 					this._previousScreenPoint &&
 					Vec.Dist2(this._previousScreenPoint, this._clickScreenPoint) > MAX_CLICK_DISTANCE ** 2
@@ -113,32 +93,12 @@ export class ClickManager {
 
 				switch (this._clickState) {
 					case 'pendingDouble': {
-						this._clickState = 'pendingTriple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'double_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingTriple': {
-						this._clickState = 'pendingQuadruple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingQuadruple': {
 						this._clickState = 'pendingOverflow'
 						this._clickTimeout = this._getClickTimeout(this._clickState)
 						return {
 							...info,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'down',
 						}
 					}
@@ -159,30 +119,17 @@ export class ClickManager {
 			}
 			case 'pointer_up': {
 				if (!this._clickState) return info
+
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = false
+
 				switch (this._clickState) {
-					case 'pendingTriple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'double_click',
-							phase: 'up',
-						}
-					}
-					case 'pendingQuadruple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'up',
-						}
-					}
 					case 'pendingOverflow': {
 						return {
 							...this.lastPointerInfo,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'up',
 						}
 					}
@@ -219,5 +166,8 @@ export class ClickManager {
 	cancelDoubleClickTimeout() {
 		this._clickTimeout = clearTimeout(this._clickTimeout)
 		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
+		this._isPressingWhilePending = false
 	}
 }

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

@@ -14,7 +14,7 @@ describe('FocusManager', () => {
 			getInstanceState: Mock
 			updateInstanceState: Mock
 			getContainer: Mock
-			isIn: Mock
+			getEditingShapeId: Mock
 			getSelectedShapeIds: Mock
 			complete: Mock
 		}
@@ -51,7 +51,7 @@ describe('FocusManager', () => {
 			updateInstanceState: vi.fn(),
 			getContainer: vi.fn(() => mockContainer),
 			getContainerDocument: vi.fn(() => document),
-			isIn: vi.fn(() => false),
+			getEditingShapeId: vi.fn(() => null),
 			getSelectedShapeIds: vi.fn(() => []),
 			complete: vi.fn(),
 		} as any
@@ -243,7 +243,7 @@ describe('FocusManager', () => {
 		})
 
 		it('should return early when editor is in editing mode', () => {
-			editor.isIn.mockReturnValue(true)
+			editor.getEditingShapeId.mockReturnValue('shape:1')
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 
 			keydownHandler(event)
@@ -407,7 +407,7 @@ describe('FocusManager', () => {
 			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
 			const keydownHandler = keydownCall![1]
 
-			editor.isIn.mockReturnValue(true) // Editing mode
+			editor.getEditingShapeId.mockReturnValue('shape:1') // Editing mode
 
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 			keydownHandler(event)

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

@@ -63,8 +63,7 @@ export class FocusManager {
 		const activeEl = container.ownerDocument.activeElement
 		// Edit mode should remove the focus ring, however if the active element's
 		// parent is the contextual toolbar, then allow it.
-		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
-			return
+		if (this.editor.getEditingShapeId() && !activeEl?.closest('.tlui-contextual-toolbar')) return
 		if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')

package/src/lib/editor/tools/StateNode.ts

@@ -268,8 +268,6 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	onLongPress?(info: TLPointerEventInfo): void
 	onPointerUp?(info: TLPointerEventInfo): void
 	onDoubleClick?(info: TLClickEventInfo): void
-	onTripleClick?(info: TLClickEventInfo): void
-	onQuadrupleClick?(info: TLClickEventInfo): void
 	onRightClick?(info: TLPointerEventInfo): void
 	onMiddleClick?(info: TLPointerEventInfo): void
 	onKeyDown?(info: TLKeyboardEventInfo): void

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

@@ -24,7 +24,7 @@ export type TLPointerEventName =
 	| 'middle_click'
 
 /** @public */
-export type TLCLickEventName = 'double_click' | 'triple_click' | 'quadruple_click'
+export type TLCLickEventName = 'double_click'
 
 /** @public */
 export type TLPinchEventName = 'pinch_start' | 'pinch' | 'pinch_end'
@@ -72,7 +72,7 @@ export type TLClickEventInfo = TLBaseEventInfo & {
 	point: VecLike
 	pointerId: number
 	button: number
-	phase: 'down' | 'up' | 'settle'
+	phase: 'down' | 'up' | 'settle-down' | 'settle-up'
 } & TLPointerEventTarget
 
 /** @public */
@@ -173,8 +173,6 @@ export interface TLEventHandlers {
 	onLongPress: TLPointerEvent
 	onRightClick: TLPointerEvent
 	onDoubleClick: TLClickEvent
-	onTripleClick: TLClickEvent
-	onQuadrupleClick: TLClickEvent
 	onMiddleClick: TLPointerEvent
 	onPointerUp: TLPointerEvent
 	onKeyDown: TLKeyboardEvent
@@ -206,7 +204,5 @@ export const EVENT_NAME_MAP: Record<
 	complete: 'onComplete',
 	interrupt: 'onInterrupt',
 	double_click: 'onDoubleClick',
-	triple_click: 'onTripleClick',
-	quadruple_click: 'onQuadrupleClick',
 	tick: 'onTick',
 }

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.2.0-next.b91d4a4551c9'
+export const version = '5.2.0-next.e2b8d10bf10e'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-06-03T10:38:24.758Z',
-	patch: '2026-06-03T10:38:24.758Z',
+	minor: '2026-06-05T16:06:49.927Z',
+	patch: '2026-06-05T16:06:49.927Z',
 }