@tldraw/editor 3.14.0-canary.f8af44c4d1e2 → 3.14.0-canary.f907ed7d9ee5

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

@@ -0,0 +1,442 @@
+import { Editor } from '../../Editor'
+import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
+import { ClickManager } from './ClickManager'
+
+// Mock the Editor class
+jest.mock('../../Editor')
+
+describe('ClickManager', () => {
+	let editor: jest.Mocked<Editor>
+	let clickManager: ClickManager
+	let mockTimers: any
+
+	const createPointerEvent = (
+		name: 'pointer_down' | 'pointer_up' | 'pointer_move',
+		point: { x: number; y: number } = { x: 0, y: 0 }
+	): TLPointerEventInfo => ({
+		type: 'pointer',
+		name,
+		point,
+		pointerId: 1,
+		button: 0,
+		isPen: false,
+		target: 'canvas',
+		shiftKey: false,
+		altKey: false,
+		ctrlKey: false,
+		metaKey: false,
+		accelKey: false,
+	})
+
+	beforeEach(() => {
+		jest.useFakeTimers()
+		mockTimers = {
+			setTimeout: jest.fn((fn, delay) => setTimeout(fn, delay)),
+		}
+
+		editor = {
+			timers: mockTimers,
+			dispatch: jest.fn(),
+			options: {
+				doubleClickDurationMs: 300,
+				multiClickDurationMs: 300,
+				dragDistanceSquared: 16,
+				coarseDragDistanceSquared: 36,
+			},
+			inputs: {
+				currentScreenPoint: { x: 0, y: 0 },
+			},
+			getInstanceState: jest.fn(() => ({
+				isCoarsePointer: false,
+			})),
+		} as any
+
+		clickManager = new ClickManager(editor)
+	})
+
+	afterEach(() => {
+		jest.useRealTimers()
+		jest.clearAllMocks()
+	})
+
+	describe('constructor and initial state', () => {
+		it('should initialize with idle state', () => {
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should store reference to editor', () => {
+			expect(clickManager.editor).toBe(editor)
+		})
+
+		it('should initialize lastPointerInfo as empty object', () => {
+			expect(clickManager.lastPointerInfo).toEqual({})
+		})
+	})
+
+	describe('single click behavior', () => {
+		it('should handle pointer_down in idle state', () => {
+			const pointerEvent = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			const result = clickManager.handlePointerEvent(pointerEvent)
+
+			expect(result).toBe(pointerEvent)
+			expect(clickManager.clickState).toBe('pendingDouble')
+			expect(clickManager.lastPointerInfo).toBe(pointerEvent)
+		})
+
+		it('should handle pointer_up without generating click events in pending state', () => {
+			const downEvent = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const upEvent = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(downEvent)
+			clickManager.handlePointerEvent(upEvent)
+
+			expect(clickManager.clickState).toBe('pendingDouble')
+		})
+
+		it('should return to idle state after timeout in pendingDouble', () => {
+			const pointerEvent = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(pointerEvent)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			jest.advanceTimersByTime(350)
+
+			expect(clickManager.clickState).toBe('idle')
+		})
+	})
+
+	describe('double click detection', () => {
+		it('should detect double click on second pointer_down', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(firstDown)
+			const result = clickManager.handlePointerEvent(secondDown) as TLClickEventInfo
+
+			expect(result.type).toBe('click')
+			expect(result.name).toBe('double_click')
+			expect(result.phase).toBe('down')
+			expect(clickManager.clickState).toBe('pendingTriple')
+		})
+
+		it('should generate double_click up event on pointer_up after double_click down', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const secondUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(firstDown)
+			clickManager.handlePointerEvent(secondDown)
+			const result = clickManager.handlePointerEvent(secondUp) as TLClickEventInfo
+
+			expect(result.type).toBe('click')
+			expect(result.name).toBe('double_click')
+			expect(result.phase).toBe('up')
+		})
+
+		it('should dispatch double_click settle event after timeout in pendingTriple', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(firstDown)
+			clickManager.handlePointerEvent(secondDown)
+
+			jest.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'double_click',
+					phase: 'settle',
+				})
+			)
+			expect(clickManager.clickState).toBe('idle')
+		})
+	})
+
+	describe('triple and quadruple click detection', () => {
+		it('should detect triple click on third pointer_down', () => {
+			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
+
+			expect(result.type).toBe('click')
+			expect(result.name).toBe('triple_click')
+			expect(result.phase).toBe('down')
+			expect(clickManager.clickState).toBe('pendingQuadruple')
+		})
+
+		it('should detect quadruple click on fourth pointer_down', () => {
+			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
+
+			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', () => {
+			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
+
+			expect(result.type).toBe('click')
+			expect(result.name).toBe('quadruple_click')
+			expect(result.phase).toBe('up')
+		})
+	})
+
+	describe('timeout behavior and settle events', () => {
+		it('should dispatch triple_click settle event after timeout in pendingQuadruple', () => {
+			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(pointerDown) // first
+			clickManager.handlePointerEvent(pointerDown) // second
+			clickManager.handlePointerEvent(pointerDown) // third
+
+			jest.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'triple_click',
+					phase: 'settle',
+				})
+			)
+			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 })
+
+			clickManager.handlePointerEvent(pointerDown) // first
+			clickManager.handlePointerEvent(pointerDown) // second
+			clickManager.handlePointerEvent(pointerDown) // third
+			clickManager.handlePointerEvent(pointerDown) // fourth
+
+			jest.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'quadruple_click',
+					phase: 'settle',
+				})
+			)
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should use different timeout durations for different states', () => {
+			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			// First click - should use doubleClickDurationMs
+			clickManager.handlePointerEvent(pointerDown)
+			expect(mockTimers.setTimeout).toHaveBeenCalledWith(
+				expect.any(Function),
+				editor.options.doubleClickDurationMs
+			)
+
+			jest.clearAllMocks()
+
+			// Second click - should use multiClickDurationMs
+			clickManager.handlePointerEvent(pointerDown)
+			expect(mockTimers.setTimeout).toHaveBeenCalledWith(
+				expect.any(Function),
+				editor.options.multiClickDurationMs
+			)
+		})
+	})
+
+	describe('distance-based click cancellation', () => {
+		it('should reset to idle if clicks are too far apart', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 0, y: 0 })
+			const secondDown = createPointerEvent('pointer_down', { x: 50, y: 50 }) // > 40px distance
+
+			clickManager.handlePointerEvent(firstDown)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			const result = clickManager.handlePointerEvent(secondDown)
+
+			expect(result).toBe(secondDown)
+			expect(clickManager.clickState).toBe('pendingDouble') // Reset and started new sequence
+		})
+
+		it('should continue sequence if clicks are close enough', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 0, y: 0 })
+			const secondDown = createPointerEvent('pointer_down', { x: 5, y: 5 }) // < 40px distance
+
+			clickManager.handlePointerEvent(firstDown)
+			const result = clickManager.handlePointerEvent(secondDown) as TLClickEventInfo
+
+			expect(result.type).toBe('click')
+			expect(result.name).toBe('double_click')
+			expect(clickManager.clickState).toBe('pendingTriple')
+		})
+	})
+
+	describe('pointer move cancellation behavior', () => {
+		it('should cancel click sequence on significant pointer move', () => {
+			const downEvent = createPointerEvent('pointer_down', { x: 0, y: 0 })
+			const moveEvent = createPointerEvent('pointer_move', { x: 10, y: 10 })
+
+			editor.inputs.currentScreenPoint.x = 10
+			editor.inputs.currentScreenPoint.y = 10
+
+			clickManager.handlePointerEvent(downEvent)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			const result = clickManager.handlePointerEvent(moveEvent)
+
+			expect(result).toBe(moveEvent)
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should use coarse drag distance for coarse pointers', () => {
+			editor.getInstanceState.mockReturnValue({
+				...editor.getInstanceState(),
+				isCoarsePointer: true,
+			})
+
+			const downEvent = createPointerEvent('pointer_down', { x: 0, y: 0 })
+			const moveEvent1 = createPointerEvent('pointer_move', { x: 1, y: 1 })
+			const moveEvent2 = createPointerEvent('pointer_move', { x: 5, y: 5 }) // 50
+
+			clickManager.handlePointerEvent(downEvent)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			// Should not cancel for coarse pointer with small movement
+			editor.inputs.currentScreenPoint.x = 1
+			editor.inputs.currentScreenPoint.y = 1
+			clickManager.handlePointerEvent(moveEvent1)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			editor.inputs.currentScreenPoint.x = 5
+			editor.inputs.currentScreenPoint.y = 5
+			clickManager.handlePointerEvent(moveEvent2)
+
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should not cancel in idle state', () => {
+			const moveEvent = createPointerEvent('pointer_move', { x: 100, y: 100 })
+
+			editor.inputs.currentScreenPoint.x = 100
+			editor.inputs.currentScreenPoint.y = 100
+
+			clickManager.handlePointerEvent(moveEvent)
+
+			expect(clickManager.clickState).toBe('idle')
+		})
+	})
+
+	describe('cancelDoubleClickTimeout method', () => {
+		it('should clear timeout and reset state to idle', () => {
+			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(pointerDown)
+			expect(clickManager.clickState).toBe('pendingDouble')
+
+			clickManager.cancelDoubleClickTimeout()
+
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should prevent timeout callback from executing after cancellation', () => {
+			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(pointerDown)
+			clickManager.handlePointerEvent(pointerDown) // double click
+			expect(clickManager.clickState).toBe('pendingTriple')
+
+			clickManager.cancelDoubleClickTimeout()
+
+			// Advance time - should not dispatch settle event
+			jest.advanceTimersByTime(350)
+
+			expect(editor.dispatch).not.toHaveBeenCalled()
+			expect(clickManager.clickState).toBe('idle')
+		})
+	})
+
+	describe('edge cases', () => {
+		it('should handle null click state gracefully', () => {
+			// Force null state
+			;(clickManager as any)._clickState = null
+
+			const pointerEvent = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const result = clickManager.handlePointerEvent(pointerEvent)
+
+			expect(result).toBe(pointerEvent)
+		})
+
+		it('should handle missing previous screen point', () => {
+			const firstDown = createPointerEvent('pointer_down', { x: 0, y: 0 })
+
+			// Clear previous point
+			;(clickManager as any)._previousScreenPoint = undefined
+
+			const result = clickManager.handlePointerEvent(firstDown)
+
+			expect(result).toBe(firstDown)
+			expect(clickManager.clickState).toBe('pendingDouble')
+		})
+
+		it('should handle overflow state correctly', () => {
+			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			// 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
+
+			expect(clickManager.clickState).toBe('overflow')
+
+			// pointer_up in overflow should just return the event
+			clickManager.handlePointerEvent(pointerUp)
+		})
+	})
+})

package/src/lib/editor/managers/{ClickManager.ts → ClickManager/ClickManager.ts}

@@ -1,7 +1,7 @@
 import { bind, uniqueId } from '@tldraw/utils'
-import { Vec } from '../../primitives/Vec'
-import type { Editor } from '../Editor'
-import { TLClickEventInfo, TLPointerEventInfo } from '../types/event-types'
+import { Vec } from '../../../primitives/Vec'
+import type { Editor } from '../../Editor'
+import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 
 /** @public */
 export type TLClickState =