@tldraw/editor 4.4.0-canary.afdcafe834b3 → 4.4.0-canary.b56b70f6a630

package/src/lib/components/Shape.tsx

@@ -5,6 +5,7 @@ import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
+import { useShapeCulling } from '../hooks/useShapeCulling'
 import { Mat } from '../primitives/Mat'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { setStyleProperty } from '../utils/dom'
@@ -57,7 +58,6 @@ export const Shape = memo(function Shape({
 		height: 0,
 		x: 0,
 		y: 0,
-		isCulled: false,
 	})
 
 	useQuickReactor(
@@ -118,22 +118,21 @@ export const Shape = memo(function Shape({
 		setStyleProperty(bgContainer, 'z-index', backgroundIndex)
 	}, [opacity, index, backgroundIndex])
 
-	useQuickReactor(
-		'set display',
-		() => {
-			const shape = editor.getShape(id)
-			if (!shape) return // probably the shape was just deleted
+	// Register container refs with the centralized culling context.
+	// This runs on mount and handles initial display state.
+	const { register, unregister } = useShapeCulling()
+	useLayoutEffect(() => {
+		const container = containerRef.current
+		if (!container) return
 
-			const culledShapes = editor.getCulledShapes()
-			const isCulled = culledShapes.has(id)
-			if (isCulled !== memoizedStuffRef.current.isCulled) {
-				setStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')
-				setStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')
-				memoizedStuffRef.current.isCulled = isCulled
-			}
-		},
-		[editor]
-	)
+		// Check initial culling state and register with the context
+		const isCulled = editor.getCulledShapes().has(id)
+		register(id, container, bgContainerRef.current, isCulled)
+
+		return () => {
+			unregister(id)
+		}
+	}, [editor, id, register, unregister])
 	const annotateError = useCallback(
 		(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),
 		[editor]

package/src/lib/components/default-components/CanvasShapeIndicators.tsx

@@ -1,7 +1,7 @@
 import { useComputed, useQuickReactor } from '@tldraw/state-react'
 import { createComputedCache } from '@tldraw/store'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { dedupe, isEqual } from '@tldraw/utils'
+import { dedupe } from '@tldraw/utils'
 import { memo, useEffect, useRef } from 'react'
 import { Editor } from '../../editor/Editor'
 import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
@@ -14,6 +14,50 @@ interface CollaboratorIndicatorData {
 	shapeIds: TLShapeId[]
 }
 
+interface RenderData {
+	idsToDisplay: Set<TLShapeId>
+	renderingShapeIds: Set<TLShapeId>
+	hintingShapeIds: TLShapeId[]
+	collaboratorIndicators: CollaboratorIndicatorData[]
+}
+
+function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
+	if (a.size !== b.size) return false
+	for (const item of a) {
+		if (!b.has(item)) return false
+	}
+	return true
+}
+
+function arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {
+	if (a.length !== b.length) return false
+	for (let i = 0; i < a.length; i++) {
+		if (a[i] !== b[i]) return false
+	}
+	return true
+}
+
+function collaboratorIndicatorsEqual(
+	a: CollaboratorIndicatorData[],
+	b: CollaboratorIndicatorData[]
+): boolean {
+	if (a.length !== b.length) return false
+	for (let i = 0; i < a.length; i++) {
+		if (a[i].color !== b[i].color) return false
+		if (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false
+	}
+	return true
+}
+
+function renderDataEqual(a: RenderData, b: RenderData): boolean {
+	return (
+		setsEqual(a.idsToDisplay, b.idsToDisplay) &&
+		setsEqual(a.renderingShapeIds, b.renderingShapeIds) &&
+		arraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&
+		collaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)
+	)
+}
+
 const indicatorPathCache = createComputedCache(
 	'indicatorPath',
 	(editor: Editor, shape: TLShape) => {
@@ -162,7 +206,7 @@ export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
 				collaboratorIndicators,
 			}
 		},
-		{ isEqual: isEqual },
+		{ isEqual: renderDataEqual },
 		[editor, activePeerIds$]
 	)
 

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -5,17 +5,18 @@ import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
 import { Fragment, JSX, useEffect, useRef, useState } from 'react'
 import { tlenv } from '../../globals/environment'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useCanvasEvents } from '../../hooks/useCanvasEvents'
 import { useCoarsePointer } from '../../hooks/useCoarsePointer'
 import { useContainer } from '../../hooks/useContainer'
 import { useDocumentEvents } from '../../hooks/useDocumentEvents'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'
 import { useGestureEvents } from '../../hooks/useGestureEvents'
 import { useHandleEvents } from '../../hooks/useHandleEvents'
 import { useSharedSafeId } from '../../hooks/useSafeId'
 import { useScreenBounds } from '../../hooks/useScreenBounds'
+import { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'
 import { Box } from '../../primitives/Box'
 import { Mat } from '../../primitives/Mat'
 import { Vec } from '../../primitives/Vec'
@@ -428,18 +429,39 @@ function ReflowIfNeeded() {
 	return null
 }
 
+/**
+ * Centralized culling controller that updates shape container visibility.
+ * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.
+ */
+function CullingController() {
+	const editor = useEditor()
+	const { updateCulling } = useShapeCulling()
+
+	useQuickReactor(
+		'update shape culling',
+		() => {
+			const culledShapes = editor.getCulledShapes()
+			updateCulling(culledShapes)
+		},
+		[editor, updateCulling]
+	)
+
+	return null
+}
+
 function ShapesToDisplay() {
 	const editor = useEditor()
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
 	return (
-		<>
+		<ShapeCullingProvider>
 			{renderingShapes.map((result) => (
 				<Shape key={result.id + '_shape'} {...result} />
 			))}
+			<CullingController />
 			{tlenv.isSafari && <ReflowIfNeeded />}
-		</>
+		</ShapeCullingProvider>
 	)
 }
 

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -3,10 +3,9 @@ import { noop } from '@tldraw/utils'
 import classNames from 'classnames'
 import { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { Editor } from '../../editor/Editor'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { EditorProvider } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
-import { hardResetEditor } from '../../utils/hardResetEditor'
-import { refreshPage } from '../../utils/refreshPage'
+import { hardResetEditor, refreshPage } from '../../utils/runtime'
 import { ErrorBoundary } from '../ErrorBoundary'
 
 const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'

package/src/lib/components/default-components/DefaultLoadingScreen.tsx

@@ -1,5 +1,5 @@
 import { LoadingScreen } from '../../TldrawEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 
 /** @public @react */
 export const DefaultLoadingScreen = () => {

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames'
 import { memo, useLayoutEffect, useRef } from 'react'
 import type { Editor } from '../../editor/Editor'
 import { ShapeUtil } from '../../editor/shapes/ShapeUtil'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render

package/src/lib/components/default-components/DefaultShapeIndicators.tsx

@@ -1,8 +1,8 @@
 import { useValue } from '@tldraw/state-react'
 import { TLShapeId } from '@tldraw/tlschema'
 import { memo, useRef } from 'react'
+import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 import { useEditor } from '../../hooks/useEditor'
-import { useEditorComponents } from '../../hooks/useEditorComponents'
 
 /** @public */
 export interface TLShapeIndicatorsProps {

package/src/lib/editor/Editor.ts

@@ -134,6 +134,7 @@ import {
 } from '../utils/deepLinks'
 import { getIncrementedName } from '../utils/getIncrementedName'
 import { getReorderingShapesChanges } from '../utils/reorderShapes'
+import { getDroppedShapesToNewParents } from '../utils/reparenting'
 import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
 import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
@@ -153,7 +154,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 +235,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 +297,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 +314,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 +336,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 +470,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
@@ -794,6 +822,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private readonly _getShapeVisibility?: TLEditorOptions['getShapeVisibility']
+
 	@computed
 	private getIsShapeHiddenCache() {
 		if (!this._getShapeVisibility) return null
@@ -4180,23 +4209,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 +4240,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	getCameraState() {
-		return this._cameraState.get()
+		return this.getInstanceState().cameraState
 	}
 
 	/**
@@ -5481,7 +5512,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)
@@ -6246,7 +6277,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)
@@ -7839,6 +7876,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
@@ -9595,6 +9633,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 					return { id: s.id, type: s.type, x: s.x + localDelta.x, y: s.y + localDelta.y }
 				})
 			)
+
+			// If shapes were pasted onto the page (not into a specific parent),
+			// check whether they landed inside a frame and reparent if so.
+			if (isPageId(pasteParentId)) {
+				const currentRootShapes = compact(rootShapes.map((s) => this.getShape(s.id)))
+				const { reparenting } = getDroppedShapesToNewParents(this, currentRootShapes)
+				reparenting.forEach((childrenToReparent, newParentId) => {
+					if (childrenToReparent.length === 0) return
+					this.reparentShapes(
+						childrenToReparent.map((s) => s.id),
+						newParentId
+					)
+				})
+			}
 		})
 
 		return this
@@ -10421,9 +10473,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
 
@@ -10734,6 +10787,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/bindings/BindingUtil.ts

@@ -5,7 +5,7 @@ import {
 	TLShape,
 	TLUnknownBinding,
 } from '@tldraw/tlschema'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 /** @public */
 export interface TLBindingUtilConstructor<

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

@@ -1,7 +1,7 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
 import { TLBinding, TLShapeId } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
-import { Editor } from '../Editor'
+import type { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 

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

@@ -1,6 +1,6 @@
 import { computed, isUninitialized } from '@tldraw/state'
-import { TLShapeId } from '@tldraw/tlschema'
-import { Editor } from '../Editor'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
 
 /**
  * Non visible shapes are shapes outside of the viewport page bounds.
@@ -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

@@ -1,6 +1,6 @@
 import { Vec } from '../../../primitives/Vec'
 import { EASINGS } from '../../../primitives/easings'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /** @public */
 export class EdgeScrollManager {
@@ -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/FontManager/FontManager.ts

@@ -8,7 +8,7 @@ import {
 	mapObjectMapValues,
 	objectMapEntries,
 } from '@tldraw/utils'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /**
  * Represents the `src` property of a {@link TLFontFace}.

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

@@ -4,7 +4,7 @@ import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
 import { INTERNAL_POINTER_IDS } from '../../../constants'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 import { TLPinchEventInfo, TLPointerEventInfo, TLWheelEventInfo } from '../../types/event-types'
 
 /** @public */

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

@@ -1,7 +1,7 @@
 import { TLScribble, VecModel } from '@tldraw/tlschema'
 import { uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
-import { Editor } from '../../Editor'
+import type { Editor } from '../../Editor'
 
 /** @public */
 export interface ScribbleItem {

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -12,8 +12,8 @@ import {
 import { Mat } from '../../../primitives/Mat'
 import { Vec } from '../../../primitives/Vec'
 import { rangeIntersection, rangesOverlap } from '../../../primitives/utils'
-import { Editor } from '../../Editor'
-import {
+import type { Editor } from '../../Editor'
+import type {
 	GapsSnapIndicator,
 	PointsSnapIndicator,
 	SnapData,