@tldraw/editor 3.14.0-canary.fd2ad122b803 → 3.14.0-canary.fdbfe5bf2604

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

@@ -1,49 +1,48 @@
 import { computed, isUninitialized } from '@tldraw/state'
 import { TLShapeId } from '@tldraw/tlschema'
-import { Box } from '../../primitives/Box'
 import { Editor } from '../Editor'
 
-function isShapeNotVisible(editor: Editor, id: TLShapeId, viewportPageBounds: Box): boolean {
-	const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
-	// if the shape is fully outside of its parent's clipping bounds...
-	if (maskedPageBounds === undefined) return true
-
-	// if the shape is fully outside of the viewport page bounds...
-	return !viewportPageBounds.includes(maskedPageBounds)
+function fromScratch(editor: Editor): Set<TLShapeId> {
+	const shapesIds = editor.getCurrentPageShapeIds()
+	const viewportPageBounds = editor.getViewportPageBounds()
+	const notVisibleShapes = new Set<TLShapeId>()
+	shapesIds.forEach((id) => {
+		// If the shape is fully outside of the viewport page bounds, add it to the set.
+		// We'll ignore masks here, since they're more expensive to compute and the overhead is not worth it.
+		const pageBounds = editor.getShapePageBounds(id)
+		if (pageBounds === undefined || !viewportPageBounds.includes(pageBounds)) {
+			notVisibleShapes.add(id)
+		}
+	})
+	return notVisibleShapes
 }
 
 /**
  * Incremental derivation of not visible shapes.
- * Non visible shapes are shapes outside of the viewport page bounds and shapes outside of parent's clipping bounds.
+ * Non visible shapes are shapes outside of the viewport page bounds.
  *
  * @param editor - Instance of the tldraw Editor.
  * @returns Incremental derivation of non visible shapes.
  */
-export const notVisibleShapes = (editor: Editor) => {
-	function fromScratch(editor: Editor): Set<TLShapeId> {
-		const shapes = editor.getCurrentPageShapeIds()
-		const viewportPageBounds = editor.getViewportPageBounds()
-		const notVisibleShapes = new Set<TLShapeId>()
-		shapes.forEach((id) => {
-			if (isShapeNotVisible(editor, id, viewportPageBounds)) {
-				notVisibleShapes.add(id)
-			}
-		})
-		return notVisibleShapes
-	}
-	return computed<Set<TLShapeId>>('notVisibleShapes', (prevValue) => {
+export function notVisibleShapes(editor: Editor) {
+	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
+		const nextValue = fromScratch(editor)
+
 		if (isUninitialized(prevValue)) {
-			return fromScratch(editor)
+			return nextValue
 		}
 
-		const nextValue = fromScratch(editor)
-
+		// If there are more or less shapes, we know there's a change
 		if (prevValue.size !== nextValue.size) return nextValue
+
+		// If any of the old shapes are not in the new set, we know there's a change
 		for (const prev of prevValue) {
 			if (!nextValue.has(prev)) {
 				return nextValue
 			}
 		}
+
+		// If we've made it here, we know that the set is the same
 		return prevValue
 	})
 }

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

@@ -1,45 +1,48 @@
-import { computed, isUninitialized, RESET_VALUE } from '@tldraw/state'
-import { RecordsDiff } from '@tldraw/store'
+import { Computed, computed, isUninitialized, RESET_VALUE } from '@tldraw/state'
+import { CollectionDiff, RecordsDiff } from '@tldraw/store'
 import { isShape, TLParentId, TLRecord, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema'
 import { compact, sortByIndex } from '@tldraw/utils'
 
-type Parents2Children = Record<TLParentId, TLShapeId[]>
+type ParentShapeIdsToChildShapeIds = Record<TLParentId, TLShapeId[]>
 
-export const parentsToChildren = (store: TLStore) => {
-	const shapeIdsQuery = store.query.ids<'shape'>('shape')
-	const shapeHistory = store.query.filterHistory('shape')
+function fromScratch(
+	shapeIdsQuery: Computed<Set<TLShapeId>, CollectionDiff<TLShapeId>>,
+	store: TLStore
+) {
+	const result: ParentShapeIdsToChildShapeIds = {}
+	const shapeIds = shapeIdsQuery.get()
+	const shapes = Array(shapeIds.size) as TLShape[]
+	shapeIds.forEach((id) => shapes.push(store.get(id)!))
 
-	function fromScratch() {
-		const result: Parents2Children = {}
-		const shapeIds = shapeIdsQuery.get()
-		const shapes = Array(shapeIds.size) as TLShape[]
-		shapeIds.forEach((id) => shapes.push(store.get(id)!))
+	// Sort the shapes by index
+	shapes.sort(sortByIndex)
 
-		// Sort the shapes by index
-		shapes.sort(sortByIndex)
+	// Populate the result object with an array for each parent.
+	shapes.forEach((shape) => {
+		if (!result[shape.parentId]) {
+			result[shape.parentId] = []
+		}
+		result[shape.parentId].push(shape.id)
+	})
 
-		// Populate the result object with an array for each parent.
-		shapes.forEach((shape) => {
-			if (!result[shape.parentId]) {
-				result[shape.parentId] = []
-			}
-			result[shape.parentId].push(shape.id)
-		})
+	return result
+}
 
-		return result
-	}
+export const parentsToChildren = (store: TLStore) => {
+	const shapeIdsQuery = store.query.ids<'shape'>('shape')
+	const shapeHistory = store.query.filterHistory('shape')
 
-	return computed<Parents2Children>(
+	return computed<ParentShapeIdsToChildShapeIds>(
 		'parentsToChildrenWithIndexes',
 		(lastValue, lastComputedEpoch) => {
 			if (isUninitialized(lastValue)) {
-				return fromScratch()
+				return fromScratch(shapeIdsQuery, store)
 			}
 
 			const diff = shapeHistory.getDiffSince(lastComputedEpoch)
 
 			if (diff === RESET_VALUE) {
-				return fromScratch()
+				return fromScratch(shapeIdsQuery, store)
 			}
 
 			if (diff.length === 0) return lastValue

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 =