@tldraw/editor 4.4.0-next.84d68f44c848 → 4.4.0-next.bde73a32273d

package/src/lib/editor/Editor.ts

@@ -153,7 +153,13 @@ import { SpatialIndexManager } from './managers/SpatialIndexManager/SpatialIndex
 import { TextManager } from './managers/TextManager/TextManager'
 import { TickManager } from './managers/TickManager/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
-import { ShapeUtil, TLEditStartInfo, TLGeometryOpts, TLResizeMode } from './shapes/ShapeUtil'
+import {
+	ShapeUtil,
+	TLEditStartInfo,
+	TLGeometryOpts,
+	TLResizeMode,
+	TLShapeUtilCanBindOpts,
+} from './shapes/ShapeUtil'
 import { RootState } from './tools/RootState'
 import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
 import { TLContent } from './types/clipboard-types'
@@ -228,10 +234,17 @@ export interface TLEditorOptions {
 	inferDarkMode?: boolean
 	/**
 	 * Options for the editor's camera.
+	 *
+	 * @deprecated Use `options.cameraOptions` instead. This will be removed in a future release.
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
-	textOptions?: TLTextOptions
 	options?: Partial<TldrawOptions>
+	/**
+	 * Text options for the editor.
+	 *
+	 * @deprecated Use `options.text` instead. This prop will be removed in a future release.
+	 */
+	textOptions?: TLTextOptions
 	licenseKey?: string
 	fontAssetUrls?: { [key: string]: string | undefined }
 	/**
@@ -283,12 +296,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 		bindingUtils,
 		tools,
 		getContainer,
+		// needs to be here for backwards compatibility with TldrawEditor
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
 		cameraOptions,
-		textOptions,
 		initialState,
 		autoFocus,
 		inferDarkMode,
-		options,
+		options: _options,
+		// needs to be here for backwards compatibility with TldrawEditor
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
+		textOptions: _textOptions,
 		getShapeVisibility,
 		fontAssetUrls,
 	}: TLEditorOptions) {
@@ -296,6 +313,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._getShapeVisibility = getShapeVisibility
 
+		// Merge deprecated textOptions prop with options.text
+		// options.text takes precedence over the deprecated textOptions prop
+		const options = _textOptions ? { ..._options, text: _options?.text ?? _textOptions } : _options
+
 		this.options = { ...defaultTldrawOptions, ...options }
 
 		this.store = store
@@ -314,9 +335,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.disposables.add(this.timers.dispose)
 
-		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
+		// Merge camera options: options.cameraOptions takes precedence over deprecated cameraOptions prop
+		this._cameraOptions.set({
+			...DEFAULT_CAMERA_OPTIONS,
+			...cameraOptions,
+			...options?.camera,
+		})
 
-		this._textOptions = atom('text options', textOptions ?? null)
+		this._textOptions = atom('text options', options?.text ?? null)
 
 		this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false)
 		this.disposables.add(() => this.user.dispose())
@@ -443,6 +469,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const deletedShapeIds = new Set<TLShapeId>()
 		const invalidParents = new Set<TLShapeId>()
 		let invalidBindingTypes = new Set<TLBinding['type']>()
+
 		this.disposables.add(
 			this.sideEffects.registerOperationCompleteHandler(() => {
 				// this needs to be cleared here because further effects may delete more shapes
@@ -2772,7 +2799,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/**
-	 * Get the efficient zoom level. This returns the current zoom level if there are less than 300 shapes on the page,
+	 * Get the efficient zoom level. This returns the current zoom level if there are less than a certain number of shapes on the page,
 	 * otherwise it returns the debounced zoom level. This can be used to avoid expensive re-renders during camera movements.
 	 *
 	 * @public
@@ -3225,7 +3252,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	zoomToFit(opts?: TLCameraMoveOptions): this {
-		const ids = [...this.getCurrentPageShapeIds()]
+		const ids = [...this.getCurrentPageShapeIds()].filter((id) => !this.isShapeHidden(id))
 		if (ids.length <= 0) return this
 		const pageBounds = Box.Common(compact(ids.map((id) => this.getShapePageBounds(id))))
 		this.zoomToBounds(pageBounds, opts)
@@ -4180,23 +4207,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 	// unmount / remount in the DOM, which is expensive; and computing visibility is
 	// also expensive in large projects. For this reason, we use a second bounding
 	// box just for rendering, and we only update after the camera stops moving.
-	private _cameraState = atom('camera state', 'idle' as 'idle' | 'moving')
 	private _cameraStateTimeoutRemaining = 0
 	private _decayCameraStateTimeout(elapsed: number) {
 		this._cameraStateTimeoutRemaining -= elapsed
 		if (this._cameraStateTimeoutRemaining > 0) return
 		this.off('tick', this._decayCameraStateTimeout)
-		this._cameraState.set('idle')
+		this._setCameraState('idle')
 	}
 	private _tickCameraState() {
 		// always reset the timeout
 		this._cameraStateTimeoutRemaining = this.options.cameraMovingTimeoutMs
 		// If the state is idle, then start the tick
-		if (this._cameraState.__unsafe__getWithoutCapture() !== 'idle') return
-		this._cameraState.set('moving')
+		if (this.getInstanceState().cameraState !== 'idle') return
+		this._setCameraState('moving')
 		this._debouncedZoomLevel.set(unsafe__withoutCapture(() => this.getCamera().z))
 		this.on('tick', this._decayCameraStateTimeout)
 	}
+	private _setCameraState(cameraState: 'idle' | 'moving') {
+		this.updateInstanceState({ cameraState }, { history: 'ignore' })
+	}
 
 	/**
 	 * Whether the camera is moving or idle.
@@ -4209,7 +4238,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	getCameraState() {
-		return this._cameraState.get()
+		return this.getInstanceState().cameraState
 	}
 
 	/**
@@ -5199,6 +5228,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let commonBounds: Box | undefined
 
 		this.getCurrentPageShapeIdsSorted().forEach((shapeId) => {
+			if (this.isShapeHidden(shapeId)) return
 			const bounds = this.getShapeMaskedPageBounds(shapeId)
 			if (!bounds) return
 			if (!commonBounds) {
@@ -5480,7 +5510,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @param bounds - The bounds to search within.
 	 * @returns Unordered set of shape IDs within the given bounds.
 	 *
-	 * @internal
+	 * @public
 	 */
 	getShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {
 		return this._spatialIndex.getShapeIdsInsideBounds(bounds)
@@ -6245,7 +6275,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const toShapeType = typeof toShape === 'string' ? toShape : toShape.type
 		const bindingType = typeof binding === 'string' ? binding : binding.type
 
-		const canBindOpts = { fromShapeType, toShapeType, bindingType } as const
+		const canBindOpts: TLShapeUtilCanBindOpts = {
+			fromShape: typeof fromShape === 'string' ? { type: fromShape } : fromShape,
+			toShape: typeof toShape === 'string' ? { type: toShape } : toShape,
+			bindingType,
+			fromShapeType,
+			toShapeType,
+		}
 
 		if (fromShapeType === toShapeType) {
 			return this.getShapeUtil(fromShapeType).canBind(canBindOpts)
@@ -7838,6 +7874,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialShape: options.initialShape,
 			initialBounds: options.initialBounds,
 			isAspectRatioLocked: options.isAspectRatioLocked,
+			initialPageTransform: options.initialPageTransform,
 		})
 
 		// then if the shape is flipped in one axis only, we need to apply an extra rotation
@@ -9961,7 +9998,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/**
 	 * Handles navigating to the content specified by the query param in the given URL.
 	 *
-	 * Use {@link Editor#createDeepLink} to create a URL with a deep link query param.
+	 * Use {@link Editor.createDeepLink} to create a URL with a deep link query param.
 	 *
 	 * If no URL is provided, it will look for the param in the current `window.location.href`.
 	 *
@@ -10420,9 +10457,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (inputs.getIsPinching()) return
 
 						if (!inputs.getIsEditing()) {
-							if (!this._selectedShapeIdsAtPointerDown.length) {
-								this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds]
-							}
+							// Always capture the current selection when pinch starts.
+							// This ensures Safari (which uses gesture events instead of wheel)
+							// doesn't restore a stale selection from an earlier pointer_down.
+							this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds]
 
 							this._didPinch = true
 
@@ -10544,7 +10582,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 								}
 							}
 
-							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
+							// because we can't for sure detect whether a user is using a mouse or a trackpad,
+							// we need to check the input mode preference, and only invert the zoom direction
+							// if the user has specifically set it to a mouse.
+							const isZoomDirectionInverted =
+								(this.user.getUserPreferences().isZoomDirectionInverted && inputMode === 'mouse') ??
+								false
+							const deltaValue = delta ?? 0
+							const finalDelta = isZoomDirectionInverted ? -deltaValue : deltaValue
+
+							const zoom = cz + finalDelta * zoomSpeed * cz
 							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
 								immediate: true,
 							})
@@ -10724,6 +10771,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 								this.setCurrentTool(this._restoreToolId)
 							}
 						}
+
+						// Clear the stashed selection so the next pinch captures fresh state.
+						// This fixes Safari pinch zoom restoring outdated selections.
+						this._selectedShapeIdsAtPointerDown = []
+
 						break
 					}
 				}

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

@@ -1,5 +1,5 @@
 import { computed, isUninitialized } from '@tldraw/state'
-import { TLShapeId } from '@tldraw/tlschema'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
 import { Editor } from '../Editor'
 
 /**
@@ -9,34 +9,56 @@ import { Editor } from '../Editor'
  * @returns Incremental derivation of non visible shapes.
  */
 export function notVisibleShapes(editor: Editor) {
+	const emptySet = new Set<TLShapeId>()
+
 	return computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {
-		const allShapeIds = editor.getCurrentPageShapeIds()
+		const allShapes = editor.getCurrentPageShapes()
 		const viewportPageBounds = editor.getViewportPageBounds()
 		const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)
 
-		const nextValue = new Set<TLShapeId>()
-
-		// Non-visible shapes are all shapes minus visible shapes
-		for (const id of allShapeIds) {
-			if (!visibleIds.has(id)) {
-				const shape = editor.getShape(id)
-				if (!shape) continue
+		let shape: TLShape | undefined
 
-				const canCull = editor.getShapeUtil(shape.type).canCull(shape)
-				if (!canCull) continue
-
-				nextValue.add(id)
+		// Fast path: if all shapes are visible, return empty set
+		if (visibleIds.size === allShapes.length) {
+			if (isUninitialized(prevValue) || prevValue.size > 0) {
+				return emptySet
 			}
+			return prevValue
 		}
 
-		if (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {
+		// First run: compute from scratch
+		if (isUninitialized(prevValue)) {
+			const nextValue = new Set<TLShapeId>()
+			for (let i = 0; i < allShapes.length; i++) {
+				shape = allShapes[i]
+				if (visibleIds.has(shape.id)) continue
+				if (!editor.getShapeUtil(shape.type).canCull(shape)) continue
+				nextValue.add(shape.id)
+			}
 			return nextValue
 		}
 
-		for (const prev of prevValue) {
-			if (!nextValue.has(prev)) return nextValue
+		// Subsequent runs: single pass to collect IDs and detect changes
+		const notVisibleIds: TLShapeId[] = []
+		for (let i = 0; i < allShapes.length; i++) {
+			shape = allShapes[i]
+			if (visibleIds.has(shape.id)) continue
+			if (!editor.getShapeUtil(shape.type).canCull(shape)) continue
+			notVisibleIds.push(shape.id)
+		}
+
+		// Check if the result changed
+		if (notVisibleIds.length === prevValue.size) {
+			let same = true
+			for (let i = 0; i < notVisibleIds.length; i++) {
+				if (!prevValue.has(notVisibleIds[i])) {
+					same = false
+					break
+				}
+			}
+			if (same) return prevValue
 		}
 
-		return prevValue
+		return new Set(notVisibleIds)
 	})
 }

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

@@ -240,41 +240,6 @@ describe('EdgeScrollManager', () => {
 		})
 	})
 
-	describe('camera movement conditions', () => {
-		it('should not move camera when not dragging', () => {
-			editor.inputs.setIsDragging(false)
-			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
-
-			edgeScrollManager.updateEdgeScrolling(300)
-
-			expect(editor.setCamera).not.toHaveBeenCalled()
-		})
-
-		it('should not move camera when panning', () => {
-			editor.inputs.setIsPanning(true)
-			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
-
-			edgeScrollManager.updateEdgeScrolling(300)
-
-			expect(editor.setCamera).not.toHaveBeenCalled()
-		})
-
-		it('should not move camera when camera is locked', () => {
-			editor.getCameraOptions.mockReturnValue({
-				isLocked: true,
-				panSpeed: 1,
-				zoomSpeed: 1,
-				zoomSteps: [1],
-				wheelBehavior: 'pan' as const,
-			})
-			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
-
-			edgeScrollManager.updateEdgeScrolling(300)
-
-			expect(editor.setCamera).not.toHaveBeenCalled()
-		})
-	})
-
 	describe('camera movement calculation', () => {
 		it('should calculate scroll speed based on user preference', () => {
 			editor.user.getEdgeScrollSpeed.mockReturnValue(2)

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

@@ -21,6 +21,9 @@ export class EdgeScrollManager {
 	 */
 	updateEdgeScrolling(elapsed: number) {
 		const { editor } = this
+
+		if (editor.getCameraOptions().isLocked) return
+
 		const edgeScrollProximityFactor = this.getEdgeScroll()
 		if (edgeScrollProximityFactor.x === 0 && edgeScrollProximityFactor.y === 0) {
 			if (this._isEdgeScrolling) {
@@ -106,15 +109,8 @@ export class EdgeScrollManager {
 	 * @public
 	 */
 	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
-		const { editor } = this
-		if (
-			!editor.inputs.getIsDragging() ||
-			editor.inputs.getIsPanning() ||
-			editor.getCameraOptions().isLocked
-		)
-			return
-
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return
+		const { editor } = this
 
 		const screenBounds = editor.getViewportScreenBounds()
 

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

@@ -1,12 +1,12 @@
-import { atom, transact } from '@tldraw/state'
+import { atom, EMPTY_ARRAY, transact } from '@tldraw/state'
 import {
-	RecordsDiff,
-	Store,
-	UnknownRecord,
 	createEmptyRecordsDiff,
 	isRecordsDiffEmpty,
+	RecordsDiff,
 	reverseRecordsDiff,
 	squashRecordDiffsMutable,
+	Store,
+	UnknownRecord,
 } from '@tldraw/store'
 import { exhaustiveSwitchError, noop } from '@tldraw/utils'
 import { TLHistoryBatchOptions, TLHistoryEntry } from '../../types/history-types'
@@ -312,8 +312,8 @@ export class HistoryManager<R extends UnknownRecord> {
 	debug() {
 		const { undos, redos } = this.stacks.get()
 		return {
-			undos: undos.toArray(),
-			redos: redos.toArray(),
+			undos: stackToArray(undos),
+			redos: stackToArray(redos),
 			pendingDiff: this.pendingDiff.debug(),
 			state: this.state as string,
 		}
@@ -351,22 +351,13 @@ class PendingDiff<R extends UnknownRecord> {
 	}
 }
 
-import { EMPTY_ARRAY } from '@tldraw/state'
+type Stack<T> = StackItem<T> | EmptyStackItem<T>
 
-export type Stack<T> = StackItem<T> | EmptyStackItem<T>
-
-export function stack<T>(items?: Array<T>): Stack<T> {
-	if (items) {
-		let result = EMPTY_STACK_ITEM as Stack<T>
-		while (items.length) {
-			result = result.push(items.pop()!)
-		}
-		return result
-	}
+function stack<T>(): Stack<T> {
 	return EMPTY_STACK_ITEM as any
 }
 
-class EmptyStackItem<T> implements Iterable<T> {
+class EmptyStackItem<T> {
 	readonly length = 0
 	readonly head = null
 	readonly tail: Stack<T> = this
@@ -374,23 +365,11 @@ class EmptyStackItem<T> implements Iterable<T> {
 	push(head: T): Stack<T> {
 		return new StackItem<T>(head, this)
 	}
-
-	toArray() {
-		return EMPTY_ARRAY
-	}
-
-	[Symbol.iterator]() {
-		return {
-			next() {
-				return { value: undefined, done: true as const }
-			},
-		}
-	}
 }
 
 const EMPTY_STACK_ITEM = new EmptyStackItem()
 
-class StackItem<T> implements Iterable<T> {
+class StackItem<T> {
 	length: number
 	constructor(
 		public readonly head: T,
@@ -402,23 +381,16 @@ class StackItem<T> implements Iterable<T> {
 	push(head: T): Stack<T> {
 		return new StackItem(head, this)
 	}
+}
 
-	toArray() {
-		return Array.from(this)
+function stackToArray<T>(stack: Stack<T>) {
+	if (!stack.length) {
+		return EMPTY_ARRAY
 	}
-
-	[Symbol.iterator]() {
-		let stack = this as Stack<T>
-		return {
-			next() {
-				if (stack.length) {
-					const value = stack.head!
-					stack = stack.tail
-					return { value, done: false as const }
-				} else {
-					return { value: undefined, done: true as const }
-				}
-			},
-		}
+	const arr: T[] = []
+	while (stack.length) {
+		arr.push(stack.head!)
+		stack = stack.tail
 	}
+	return arr
 }