@tldraw/editor 3.12.0-canary.72ffd91308d1 → 3.12.0-canary.81c3581f0bf0

package/src/lib/editor/tools/StateNode.ts

@@ -38,6 +38,7 @@ export interface TLStateNodeConstructor {
 	initial?: string
 	children?(): TLStateNodeConstructor[]
 	isLockable: boolean
+	useCoalescedEvents: boolean
 }
 
 /** @public */
@@ -47,7 +48,8 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		public editor: Editor,
 		parent?: StateNode
 	) {
-		const { id, children, initial, isLockable } = this.constructor as TLStateNodeConstructor
+		const { id, children, initial, isLockable, useCoalescedEvents } = this
+			.constructor as TLStateNodeConstructor
 
 		this.id = id
 		this._isActive = atom<boolean>('toolIsActive' + this.id, false)
@@ -83,6 +85,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 		}
 		this.isLockable = isLockable
+		this.useCoalescedEvents = useCoalescedEvents
 		this.performanceTracker = new PerformanceTracker()
 	}
 
@@ -90,6 +93,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	static initial?: string
 	static children?: () => TLStateNodeConstructor[]
 	static isLockable = true
+	static useCoalescedEvents = false
 
 	id: string
 	type: 'branch' | 'leaf' | 'root'
@@ -97,6 +101,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	initial?: string
 	children?: Record<string, StateNode>
 	isLockable: boolean
+	useCoalescedEvents: boolean
 	parent: StateNode
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,3 +1,4 @@
+import { useValue } from '@tldraw/state-react'
 import React, { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
@@ -11,6 +12,7 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
+	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
 		function canvasEvents() {
@@ -49,12 +51,17 @@ export function useCanvasEvents() {
 				lastX = e.clientX
 				lastY = e.clientY
 
-				editor.dispatch({
-					type: 'pointer',
-					target: 'canvas',
-					name: 'pointer_move',
-					...getPointerInfo(e),
-				})
+				// For tools that benefit from a higher fidelity of events,
+				// we dispatch the coalesced events.
+				const events = currentTool.useCoalescedEvents ? e.nativeEvent.getCoalescedEvents() : [e]
+				for (const singleEvent of events) {
+					editor.dispatch({
+						type: 'pointer',
+						target: 'canvas',
+						name: 'pointer_move',
+						...getPointerInfo(singleEvent),
+					})
+				}
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
@@ -159,7 +166,7 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor]
+		[editor, currentTool]
 	)
 
 	return events

package/src/lib/hooks/useGestureEvents.ts

@@ -135,7 +135,6 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 		let initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts
 		let initZoom = 1 // the browser's zoom level when the pinch starts
-		let currZoom = 1 // the current zoom level according to the pinch gesture recognizer
 		let currDistanceBetweenFingers = 0
 		const initPointBetweenFingers = new Vec()
 		const prevPointBetweenFingers = new Vec()
@@ -239,7 +238,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 			switch (pinchState) {
 				case 'zooming': {
-					currZoom = offset[0]
+					const currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 					editor.dispatch({
 						type: 'pinch',
@@ -278,7 +277,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			if (event instanceof WheelEvent) return
 			if (!(event.target === elm || elm?.contains(event.target as Node))) return
 
-			const scale = offset[0]
+			const scale = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 			pinchState = 'not sure'
 
@@ -309,14 +308,21 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 		target: ref,
 		eventOptions: { passive: false },
 		pinch: {
-			from: () => [editor.getZoomLevel(), 0], // Return the camera z to use when pinch starts
+			from: () => {
+				const { zoomSpeed } = editor.getCameraOptions()
+				const level = editor.getZoomLevel() ** (1 / zoomSpeed)
+				return [level, 0]
+			}, // Return the camera z to use when pinch starts
 			scaleBounds: () => {
 				const baseZoom = editor.getBaseZoom()
-				const zoomSteps = editor.getCameraOptions().zoomSteps
+				const { zoomSteps, zoomSpeed } = editor.getCameraOptions()
 				const zoomMin = zoomSteps[0] * baseZoom
 				const zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom
 
-				return { from: editor.getZoomLevel(), max: zoomMax, min: zoomMin }
+				return {
+					max: zoomMax ** (1 / zoomSpeed),
+					min: zoomMin ** (1 / zoomSpeed),
+				}
 			},
 		},
 	})

package/src/lib/utils/debug-flags.ts

@@ -53,6 +53,7 @@ export const debugFlags = {
 	debugGeometry: createDebugValue('debugGeometry', { defaults: { all: false } }),
 	hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),
 	editOnType: createDebugValue('editOnType', { defaults: { all: false } }),
+	a11y: createDebugValue('a11y', { defaults: { all: false } }),
 } as const
 
 declare global {

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.12.0-canary.72ffd91308d1'
+export const version = '3.12.0-canary.81c3581f0bf0'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-26T16:41:05.568Z',
-	patch: '2025-03-26T16:41:05.568Z',
+	minor: '2025-04-02T14:26:41.813Z',
+	patch: '2025-04-02T14:26:41.813Z',
 }