@tldraw/editor 4.3.0-next.f4772c19540d → 4.4.0-canary.1e3b436e33e4

package/src/index.ts

@@ -146,6 +146,7 @@ export {
 	type TLFontFaceSource,
 } from './lib/editor/managers/FontManager/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
+export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager'
 export {
 	ScribbleManager,
 	type ScribbleItem,
@@ -163,11 +164,13 @@ export {
 	type SnapData,
 	type SnapIndicator,
 } from './lib/editor/managers/SnapManager/SnapManager'
+export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
 	type TLMeasureTextOpts,
 	type TLMeasureTextSpanOpts,
 } from './lib/editor/managers/TextManager/TextManager'
+export { TickManager } from './lib/editor/managers/TickManager/TickManager'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
@@ -178,6 +181,7 @@ export {
 	type TLDragShapesOutInfo,
 	type TLDragShapesOverInfo,
 	type TLDropShapesOverInfo,
+	type TLEditStartInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
@@ -282,7 +286,7 @@ export {
 	type SvgExportDef,
 } from './lib/editor/types/SvgExportContext'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
-export { tlenv } from './lib/globals/environment'
+export { tlenv, tlenvReactive } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
 export { tltime } from './lib/globals/time'
 export {

package/src/lib/components/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ const initialState = { error: null }
 
 /** @public */
 export class ErrorBoundary extends React.Component<
-	React.PropsWithRef<React.PropsWithChildren<TLErrorBoundaryProps>>,
+	React.PropsWithChildren<TLErrorBoundaryProps>,
 	{ error: Error | null }
 > {
 	static getDerivedStateFromError(error: Error) {

package/src/lib/components/GeometryDebuggingView.tsx

@@ -1,23 +1,9 @@
 import { track } from '@tldraw/state-react'
 import { modulate } from '@tldraw/utils'
-import { useEffect, useState } from 'react'
 import { useEditor } from '../hooks/useEditor'
 import { Geometry2d } from '../primitives/geometry/Geometry2d'
 import { Group2d } from '../primitives/geometry/Group2d'
 
-function useTick(isEnabled = true) {
-	const [_, setTick] = useState(0)
-	const editor = useEditor()
-	useEffect(() => {
-		if (!isEnabled) return
-		const update = () => setTick((tick) => tick + 1)
-		editor.on('tick', update)
-		return () => {
-			editor.off('tick', update)
-		}
-	}, [editor, isEnabled])
-}
-
 export const GeometryDebuggingView = track(function GeometryDebuggingView({
 	showStroke = true,
 	showVertices = true,
@@ -29,13 +15,9 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({
 }) {
 	const editor = useEditor()
 
-	useTick(showClosestPointOnOutline)
-
 	const zoomLevel = editor.getZoomLevel()
 	const renderingShapes = editor.getRenderingShapes()
-	const {
-		inputs: { currentPagePoint },
-	} = editor
+	const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 	return (
 		<svg

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

@@ -86,6 +86,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
 				x + offset
 			)}px,${toDomPrecision(y + offset)}px)`
+
 			setStyleProperty(rHtmlLayer.current, 'transform', transform)
 			setStyleProperty(rHtmlLayer2.current, 'transform', transform)
 		},
@@ -209,7 +210,7 @@ function GridWrapper() {
 function ScribbleWrapper() {
 	const editor = useEditor()
 	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { Scribble } = useEditorComponents()
 
 	if (!(Scribble && scribbles.length)) return null
@@ -242,7 +243,7 @@ function ZoomBrushWrapper() {
 function SnapIndicatorWrapper() {
 	const editor = useEditor()
 	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { SnapIndicator } = useEditorComponents()
 
 	if (!(SnapIndicator && lines.length > 0)) return null
@@ -283,7 +284,7 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
 	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 
 	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
 		editor,
@@ -411,11 +412,7 @@ function ReflowIfNeeded() {
 		'reflow for culled shapes',
 		() => {
 			const culledShapes = editor.getCulledShapes()
-			if (
-				culledShapesRef.current.size === culledShapes.size &&
-				[...culledShapes].every((id) => culledShapesRef.current.has(id))
-			)
-				return
+			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
 			const canvas = document.getElementsByClassName('tl-canvas')

package/src/lib/config/TLUserPreferences.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { defaultUserPreferences, userTypeValidator } from './TLUserPreferences'
+
+describe('TLUserPreferences consistency', () => {
+	// When adding a new user preference, add it to this list AND update:
+	// 1. TLUserPreferences interface
+	// 2. userTypeValidator
+	// 3. defaultUserPreferences
+	// 4. Versions enum and migrateSnapshot()
+	const interfaceKeys = [
+		'name',
+		'color',
+		'locale',
+		'animationSpeed',
+		'areKeyboardShortcutsEnabled',
+		'edgeScrollSpeed',
+		'colorScheme',
+		'isSnapMode',
+		'isWrapMode',
+		'isDynamicSizeMode',
+		'isPasteAtCursorMode',
+		'enhancedA11yMode',
+		'inputMode',
+	] as const
+
+	it('defaultUserPreferences contains all TLUserPreferences keys (except id)', () => {
+		const defaultKeys = Object.keys(defaultUserPreferences).sort()
+		const expected = [...interfaceKeys].sort()
+
+		expect(defaultKeys).toEqual(expected)
+	})
+
+	it('userTypeValidator validates all TLUserPreferences keys', () => {
+		// Access the internal config property to check which keys the validator covers
+		const validatorKeys = Object.keys((userTypeValidator as any).config).sort()
+		const expected = ['id', ...interfaceKeys].sort()
+
+		expect(validatorKeys).toEqual(expected)
+	})
+})

package/src/lib/constants.ts

@@ -31,5 +31,3 @@ export const LEFT_MOUSE_BUTTON = 0
 export const RIGHT_MOUSE_BUTTON = 2
 export const MIDDLE_MOUSE_BUTTON = 1
 export const STYLUS_ERASER_BUTTON = 5
-
-export const ZOOM_TO_FIT_PADDING = 128

package/src/lib/editor/Editor.test.ts

@@ -6,25 +6,25 @@ import {
 	Rectangle2d,
 	ShapeUtil,
 	T,
-	TLBaseShape,
+	TLShape,
 	createShapeId,
 	createTLStore,
 } from '../..'
 import { Editor } from './Editor'
 import { StateNode } from './tools/StateNode'
 
-type ICustomShape = TLBaseShape<
-	'my-custom-shape',
-	{
-		w: number
-		h: number
-		text: string | undefined
-		isFilled: boolean
+const MY_CUSTOM_SHAPE_TYPE = 'my-custom-shape'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[MY_CUSTOM_SHAPE_TYPE]: { w: number; h: number; text: string | undefined; isFilled: boolean }
 	}
->
+}
+
+type ICustomShape = TLShape<typeof MY_CUSTOM_SHAPE_TYPE>
 
 class CustomShape extends ShapeUtil<ICustomShape> {
-	static override type = 'my-custom-shape' as const
+	static override type = MY_CUSTOM_SHAPE_TYPE
 	static override props: RecordProps<ICustomShape> = {
 		w: T.number,
 		h: T.number,
@@ -925,6 +925,146 @@ describe('replaceExternalContent', () => {
 	})
 })
 
+describe('dispatch event emission', () => {
+	let testEditor: Editor
+
+	beforeEach(() => {
+		testEditor = new Editor({
+			shapeUtils: [CustomShape],
+			bindingUtils: [],
+			tools: [],
+			store: createTLStore({ shapeUtils: [CustomShape], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+		// Ensure camera is unlocked so events are processed
+		testEditor.setCameraOptions({ isLocked: false })
+	})
+
+	it('emits wheel events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		const wheelEvent = {
+			type: 'wheel' as const,
+			name: 'wheel' as const,
+			delta: { x: 0, y: 10, z: 0 },
+			point: { x: 100, y: 100, z: 1 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(wheelEvent)
+		// Wheel events are batched for the next tick, so emit a tick to flush them
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(wheelEvent)
+	})
+
+	it('emits pinch_start events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchStartEvent)
+		// Pinch events are batched for the next tick, so emit a tick to flush them
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchStartEvent)
+	})
+
+	it('emits pinch events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		// First dispatch pinch_start to set isPinching
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+		testEditor.dispatch(pinchStartEvent)
+		testEditor.emit('tick', 16)
+
+		eventHandler.mockClear()
+
+		const pinchEvent = {
+			type: 'pinch' as const,
+			name: 'pinch' as const,
+			point: { x: 100, y: 100, z: 1.5 },
+			delta: { x: 10, y: 10, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchEvent)
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchEvent)
+	})
+
+	it('emits pinch_end events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		// First dispatch pinch_start to set isPinching
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+		testEditor.dispatch(pinchStartEvent)
+		testEditor.emit('tick', 16)
+
+		eventHandler.mockClear()
+
+		const pinchEndEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_end' as const,
+			point: { x: 100, y: 100, z: 1.5 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchEndEvent)
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchEndEvent)
+	})
+})
+
 describe('setTool', () => {
 	class CustomToolA extends StateNode {
 		static override id = 'custom-tool-a'