@tldraw/editor 4.3.0-next.82cfddd7ee89 → 4.3.0-next.842fb21476f2

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

@@ -1,9 +1,15 @@
-import { RecordProps, TLPropsMigrations, TLShape, TLUnknownBinding } from '@tldraw/tlschema'
+import {
+	RecordProps,
+	TLBinding,
+	TLPropsMigrations,
+	TLShape,
+	TLUnknownBinding,
+} from '@tldraw/tlschema'
 import { Editor } from '../Editor'
 
 /** @public */
 export interface TLBindingUtilConstructor<
-	T extends TLUnknownBinding,
+	T extends TLBinding,
 	U extends BindingUtil<T> = BindingUtil<T>,
 > {
 	new (editor: Editor): U
@@ -20,7 +26,7 @@ export interface TLBindingUtilConstructor<
  *
  * @public
  */
-export interface BindingOnCreateOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnCreateOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding being created. */
 	binding: Binding
 }
@@ -31,7 +37,7 @@ export interface BindingOnCreateOptions<Binding extends TLUnknownBinding> {
  *
  * @public
  */
-export interface BindingOnChangeOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnChangeOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding record before the change is made. */
 	bindingBefore: Binding
 	/** The binding record after the change is made. */
@@ -44,7 +50,7 @@ export interface BindingOnChangeOptions<Binding extends TLUnknownBinding> {
  *
  * @public
  */
-export interface BindingOnDeleteOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnDeleteOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding being deleted. */
 	binding: Binding
 }
@@ -55,7 +61,7 @@ export interface BindingOnDeleteOptions<Binding extends TLUnknownBinding> {
  *
  * @public
  */
-export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnShapeChangeOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding record linking these two shapes. */
 	binding: Binding
 	/** The shape record before the change is made. */
@@ -95,7 +101,7 @@ export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
  *
  * @public
  */
-export interface BindingOnShapeIsolateOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnShapeIsolateOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/**
@@ -114,7 +120,7 @@ export interface BindingOnShapeIsolateOptions<Binding extends TLUnknownBinding>
  *
  * @public
  */
-export interface BindingOnShapeDeleteOptions<Binding extends TLUnknownBinding> {
+export interface BindingOnShapeDeleteOptions<Binding extends TLBinding = TLBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/** The shape that is about to be deleted. */
@@ -122,7 +128,7 @@ export interface BindingOnShapeDeleteOptions<Binding extends TLUnknownBinding> {
 }
 
 /** @public */
-export abstract class BindingUtil<Binding extends TLUnknownBinding = TLUnknownBinding> {
+export abstract class BindingUtil<Binding extends TLBinding = TLBinding> {
 	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 { TLArrowBinding, TLBinding, TLShapeId, TLUnknownBinding } from '@tldraw/tlschema'
+import { TLBinding, TLShapeId } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 
-function fromScratch(bindingsQuery: Computed<(TLArrowBinding | TLUnknownBinding)[], unknown>) {
+function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 	const allBindings = bindingsQuery.get() as TLBinding[]
 
 	const shapesToBindings: TLBindingsIndex = new Map()

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

@@ -2,29 +2,7 @@ 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.
@@ -32,7 +10,43 @@ function fromScratch(editor: Editor): Set<TLShapeId> {
  */
 export function notVisibleShapes(editor: Editor) {
 	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
-		const nextValue = fromScratch(editor)
+		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)
+		}
 
 		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, TLShapeId, TLStore } from '@tldraw/tlschema'
-import { compact, sortByIndex } from '@tldraw/utils'
+import { isShape, TLParentId, TLRecord, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema'
+import { sortByIndex } from '@tldraw/utils'
 
 type ParentShapeIdsToChildShapeIds = Record<TLParentId, TLShapeId[]>
 
@@ -98,12 +98,23 @@ export const parentsToChildren = (store: TLStore) => {
 				}
 			}
 
-			// Sort the arrays that have been marked for sorting
+			// Sort the arrays that have been marked for sorting (in-place to avoid intermediate arrays)
 			for (const arr of toSort) {
-				// 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))
+				// 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)
+				})
 			}
 
 			return newValue ?? lastValue

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

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