@tldraw/editor 4.2.2 → 4.2.3

package/src/lib/editor/bindings/BindingUtil.ts

@@ -1,15 +1,9 @@
-import {
-	RecordProps,
-	TLBinding,
-	TLPropsMigrations,
-	TLShape,
-	TLUnknownBinding,
-} from '@tldraw/tlschema'
+import { RecordProps, TLPropsMigrations, TLShape, TLUnknownBinding } from '@tldraw/tlschema'
 import { Editor } from '../Editor'
 
 /** @public */
 export interface TLBindingUtilConstructor<
-	T extends TLBinding,
+	T extends TLUnknownBinding,
 	U extends BindingUtil<T> = BindingUtil<T>,
 > {
 	new (editor: Editor): U
@@ -26,7 +20,7 @@ export interface TLBindingUtilConstructor<
  *
  * @public
  */
-export interface BindingOnCreateOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnCreateOptions<Binding extends TLUnknownBinding> {
 	/** The binding being created. */
 	binding: Binding
 }
@@ -37,7 +31,7 @@ export interface BindingOnCreateOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnChangeOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnChangeOptions<Binding extends TLUnknownBinding> {
 	/** The binding record before the change is made. */
 	bindingBefore: Binding
 	/** The binding record after the change is made. */
@@ -50,7 +44,7 @@ export interface BindingOnChangeOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnDeleteOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnDeleteOptions<Binding extends TLUnknownBinding> {
 	/** The binding being deleted. */
 	binding: Binding
 }
@@ -61,7 +55,7 @@ export interface BindingOnDeleteOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnShapeChangeOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
 	/** The binding record linking these two shapes. */
 	binding: Binding
 	/** The shape record before the change is made. */
@@ -101,7 +95,7 @@ export interface BindingOnShapeChangeOptions<Binding extends TLBinding = TLBindi
  *
  * @public
  */
-export interface BindingOnShapeIsolateOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeIsolateOptions<Binding extends TLUnknownBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/**
@@ -120,7 +114,7 @@ export interface BindingOnShapeIsolateOptions<Binding extends TLBinding = TLBind
  *
  * @public
  */
-export interface BindingOnShapeDeleteOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeDeleteOptions<Binding extends TLUnknownBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/** The shape that is about to be deleted. */
@@ -128,7 +122,7 @@ export interface BindingOnShapeDeleteOptions<Binding extends TLBinding = TLBindi
 }
 
 /** @public */
-export abstract class BindingUtil<Binding extends TLBinding = TLBinding> {
+export abstract class BindingUtil<Binding extends TLUnknownBinding = TLUnknownBinding> {
 	constructor(public editor: Editor) {}
 	static props?: RecordProps<TLUnknownBinding>
 	static migrations?: TLPropsMigrations

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

@@ -1,11 +1,11 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
-import { TLBinding, TLShapeId } from '@tldraw/tlschema'
+import { TLArrowBinding, TLBinding, TLShapeId, TLUnknownBinding } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 
-function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
+function fromScratch(bindingsQuery: Computed<(TLArrowBinding | TLUnknownBinding)[], unknown>) {
 	const allBindings = bindingsQuery.get() as TLBinding[]
 
 	const shapesToBindings: TLBindingsIndex = new Map()

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

@@ -2,7 +2,29 @@ import { computed, isUninitialized } from '@tldraw/state'
 import { TLShapeId } from '@tldraw/tlschema'
 import { Editor } from '../Editor'
 
+function fromScratch(editor: Editor): Set<TLShapeId> {
+	const shapesIds = editor.getCurrentPageShapeIds()
+	const viewportPageBounds = editor.getViewportPageBounds()
+	const notVisibleShapes = new Set<TLShapeId>()
+	shapesIds.forEach((id) => {
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+		if (!canCull) return
+
+		// 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.
  *
  * @param editor - Instance of the tldraw Editor.
@@ -10,43 +32,7 @@ import { Editor } from '../Editor'
  */
 export function notVisibleShapes(editor: Editor) {
 	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
-		const shapeIds = editor.getCurrentPageShapeIds()
-		const nextValue = new Set<TLShapeId>()
-
-		// Extract viewport bounds once to avoid repeated property access
-		const viewportPageBounds = editor.getViewportPageBounds()
-		const viewMinX = viewportPageBounds.minX
-		const viewMinY = viewportPageBounds.minY
-		const viewMaxX = viewportPageBounds.maxX
-		const viewMaxY = viewportPageBounds.maxY
-
-		for (const id of shapeIds) {
-			const pageBounds = editor.getShapePageBounds(id)
-
-			// Hybrid check: if bounds exist and shape overlaps viewport, it's visible.
-			// This inlines Box.Collides to avoid function call overhead and the
-			// redundant Contains check that Box.Includes was doing.
-			if (
-				pageBounds !== undefined &&
-				pageBounds.maxX >= viewMinX &&
-				pageBounds.minX <= viewMaxX &&
-				pageBounds.maxY >= viewMinY &&
-				pageBounds.minY <= viewMaxY
-			) {
-				continue
-			}
-
-			// Shape is outside viewport or has no bounds - check if it can be culled.
-			// We defer getShape and canCull checks until here since most shapes are
-			// typically visible and we can skip these calls for them.
-			const shape = editor.getShape(id)
-			if (!shape) continue
-
-			const canCull = editor.getShapeUtil(shape.type).canCull(shape)
-			if (!canCull) continue
-
-			nextValue.add(id)
-		}
+		const nextValue = fromScratch(editor)
 
 		if (isUninitialized(prevValue)) {
 			return nextValue

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

@@ -1,7 +1,7 @@
 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 { sortByIndex } from '@tldraw/utils'
+import { isShape, TLParentId, TLRecord, TLShapeId, TLStore } from '@tldraw/tlschema'
+import { compact, sortByIndex } from '@tldraw/utils'
 
 type ParentShapeIdsToChildShapeIds = Record<TLParentId, TLShapeId[]>
 
@@ -98,23 +98,12 @@ export const parentsToChildren = (store: TLStore) => {
 				}
 			}
 
-			// Sort the arrays that have been marked for sorting (in-place to avoid intermediate arrays)
+			// Sort the arrays that have been marked for sorting
 			for (const arr of toSort) {
-				// Filter out any deleted shapes in-place
-				let writeIdx = 0
-				for (let readIdx = 0; readIdx < arr.length; readIdx++) {
-					if (store.get(arr[readIdx])) {
-						arr[writeIdx++] = arr[readIdx]
-					}
-				}
-				arr.length = writeIdx
-
-				// Sort in-place by index
-				arr.sort((a, b) => {
-					const shapeA = store.get(a) as TLShape
-					const shapeB = store.get(b) as TLShape
-					return sortByIndex(shapeA, shapeB)
-				})
+				// It's possible that some of the shapes may be deleted. But in which case would this be so?
+				const shapesInArr = compact(arr.map((id) => store.get(id)))
+				shapesInArr.sort(sortByIndex)
+				arr.splice(0, arr.length, ...shapesInArr.map((shape) => shape.id))
 			}
 
 			return newValue ?? lastValue

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

@@ -1,5 +1,4 @@
 import { Mocked, vi } from 'vitest'
-import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 import { ClickManager } from './ClickManager'
@@ -36,8 +35,6 @@ describe('ClickManager', () => {
 			setTimeout: vi.fn((fn, delay) => setTimeout(fn, delay)),
 		}
 
-		const mockCurrentScreenPoint = new Vec(0, 0)
-
 		editor = {
 			timers: mockTimers,
 			dispatch: vi.fn(),
@@ -48,8 +45,7 @@ describe('ClickManager', () => {
 				coarseDragDistanceSquared: 36,
 			},
 			inputs: {
-				getCurrentScreenPoint: vi.fn(() => mockCurrentScreenPoint),
-				currentScreenPoint: mockCurrentScreenPoint, // deprecated getter for compatibility
+				currentScreenPoint: { x: 0, y: 0 },
 			},
 			getInstanceState: vi.fn(() => ({
 				isCoarsePointer: false,
@@ -325,9 +321,8 @@ describe('ClickManager', () => {
 			const downEvent = createPointerEvent('pointer_down', { x: 0, y: 0 })
 			const moveEvent = createPointerEvent('pointer_move', { x: 10, y: 10 })
 
-			const currentScreenPoint = editor.inputs.getCurrentScreenPoint()
-			currentScreenPoint.x = 10
-			currentScreenPoint.y = 10
+			editor.inputs.currentScreenPoint.x = 10
+			editor.inputs.currentScreenPoint.y = 10
 
 			clickManager.handlePointerEvent(downEvent)
 			expect(clickManager.clickState).toBe('pendingDouble')
@@ -352,15 +347,13 @@ describe('ClickManager', () => {
 			expect(clickManager.clickState).toBe('pendingDouble')
 
 			// Should not cancel for coarse pointer with small movement
-			const currentScreenPoint1 = editor.inputs.getCurrentScreenPoint()
-			currentScreenPoint1.x = 1
-			currentScreenPoint1.y = 1
+			editor.inputs.currentScreenPoint.x = 1
+			editor.inputs.currentScreenPoint.y = 1
 			clickManager.handlePointerEvent(moveEvent1)
 			expect(clickManager.clickState).toBe('pendingDouble')
 
-			const currentScreenPoint2 = editor.inputs.getCurrentScreenPoint()
-			currentScreenPoint2.x = 5
-			currentScreenPoint2.y = 5
+			editor.inputs.currentScreenPoint.x = 5
+			editor.inputs.currentScreenPoint.y = 5
 			clickManager.handlePointerEvent(moveEvent2)
 
 			expect(clickManager.clickState).toBe('idle')
@@ -369,9 +362,8 @@ describe('ClickManager', () => {
 		it('should not cancel in idle state', () => {
 			const moveEvent = createPointerEvent('pointer_move', { x: 100, y: 100 })
 
-			const currentScreenPoint = editor.inputs.getCurrentScreenPoint()
-			currentScreenPoint.x = 100
-			currentScreenPoint.y = 100
+			editor.inputs.currentScreenPoint.x = 100
+			editor.inputs.currentScreenPoint.y = 100
 
 			clickManager.handlePointerEvent(moveEvent)
 
@@ -409,6 +401,28 @@ describe('ClickManager', () => {
 	})
 
 	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 })

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

@@ -197,7 +197,7 @@ export class ClickManager {
 				if (
 					this._clickState !== 'idle' &&
 					this._clickScreenPoint &&
-					Vec.Dist2(this._clickScreenPoint, this.editor.inputs.getCurrentScreenPoint()) >
+					Vec.Dist2(this._clickScreenPoint, this.editor.inputs.currentScreenPoint) >
 						(this.editor.getInstanceState().isCoarsePointer
 							? this.editor.options.coarseDragDistanceSquared
 							: this.editor.options.dragDistanceSquared)