@tldraw/editor 5.4.0 → 5.5.0-canary.04d1e6c4daff

package/src/lib/editor/Editor.ts

@@ -110,6 +110,7 @@ import {
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
+	FRAME_MS_60HZ,
 	INTERNAL_POINTER_IDS,
 	LEFT_MOUSE_BUTTON,
 	MIDDLE_MOUSE_BUTTON,
@@ -2303,8 +2304,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const shapeIds = readingOrderShapes.map((shape) => shape.id)
 
 			const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1
+			// With no current index, stepping from -1 makes 'prev' land one shape
+			// before the last; seed it from 0 so it wraps to the last shape. See #10559.
+			const startIndex = currentIndex === -1 && direction === 'prev' ? 0 : currentIndex
 			const adjacentIndex =
-				(currentIndex + (direction === 'next' ? 1 : -1) + shapeIds.length) % shapeIds.length
+				(startIndex + (direction === 'next' ? 1 : -1) + shapeIds.length) % shapeIds.length
 			adjacentShapeId = shapeIds[adjacentIndex]
 		} else {
 			if (!currentShapeId) return
@@ -3591,6 +3595,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const { isLocked } = this._cameraOptions.__unsafe__getWithoutCapture()
 		if (isLocked && !opts?.force) return this
 
+		const _point = Vec.Cast(point)
+
+		// Reject non-finite values before anything else, so the call is a no-op rather than a
+		// partial one. An animated move writes the camera from a 'tick' listener, and a listener
+		// that throws stops TickManager scheduling the next frame, which kills every frame-driven
+		// behavior for the rest of the session instead of surfacing the error to the caller.
+		if (!Number.isFinite(_point.x) || !Number.isFinite(_point.y) || !Number.isFinite(_point.z)) {
+			throw Error(
+				`Editor.setCamera: expected finite values, got (${_point.x}, ${_point.y}, ${_point.z}).`
+			)
+		}
+
 		// Stop any camera animations
 		this.stopCameraAnimation()
 
@@ -3599,12 +3615,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.stopFollowingUser()
 		}
 
-		const _point = Vec.Cast(point)
-
-		if (!Number.isFinite(_point.x)) _point.x = 0
-		if (!Number.isFinite(_point.y)) _point.y = 0
-		if (_point.z === undefined || !Number.isFinite(_point.z)) point.z = this.getZoomLevel()
-
 		const camera = this.getConstrainedCamera(_point, opts)
 
 		if (opts?.animation) {
@@ -4086,8 +4096,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				newCy += center.y / newCz - center.y / cz
 			}
 
-			// Apply friction
-			currentSpeed *= 1 - friction
+			// Apply friction per unit of elapsed time, not per tick, or a 120 Hz display decays twice as fast
+			currentSpeed *= (1 - friction) ** (elapsed / FRAME_MS_60HZ)
 			if (currentSpeed < speedThreshold) {
 				cancel()
 			} else {

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

@@ -262,15 +262,46 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should adjust scroll speed based on zoom level', () => {
-			editor.getZoomLevel.mockReturnValue(2)
 			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom1 = (editor.setCamera.mock.calls[0][0] as Vec).x
+
+			editor.setCamera.mockClear()
+			edgeScrollManager = new EdgeScrollManager(editor)
+			editor.getZoomLevel.mockReturnValue(2)
+			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom2 = (editor.setCamera.mock.calls[0][0] as Vec).x
 
-			expect(editor.setCamera).toHaveBeenCalled()
-			const callArgs = editor.setCamera.mock.calls[0][0] as Vec
 			// Higher zoom should result in smaller camera movement
-			expect(Math.abs(callArgs.x)).toBeLessThan(25)
+			expect(atZoom2).toBeCloseTo(atZoom1 / 2)
+		})
+
+		it('should move the same distance per second regardless of tick rate', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+
+			// Get past the delay and easing ramp so each tick moves at full speed
+			edgeScrollManager.updateEdgeScrolling(1000)
+			editor.setCamera.mockClear()
+
+			// One second of 60 Hz ticks
+			for (let i = 0; i < 60; i++) edgeScrollManager.updateEdgeScrolling(1000 / 60)
+			const at60Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			editor.setCamera.mockClear()
+
+			// One second of 120 Hz ticks
+			for (let i = 0; i < 120; i++) edgeScrollManager.updateEdgeScrolling(1000 / 120)
+			const at120Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			expect(at60Hz).toBeGreaterThan(0)
+			expect(at120Hz).toBeCloseTo(at60Hz)
 		})
 
 		it('should add scroll delta to current camera position', () => {

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

@@ -1,3 +1,4 @@
+import { FRAME_MS_60HZ } from '../../../constants'
 import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
@@ -51,10 +52,13 @@ export class EdgeScrollManager {
 								)
 							)
 						: 1
-				this.moveCameraWhenCloseToEdge({
-					x: edgeScrollProximityFactor.x * eased,
-					y: edgeScrollProximityFactor.y * eased,
-				})
+				this.moveCameraWhenCloseToEdge(
+					{
+						x: edgeScrollProximityFactor.x * eased,
+						y: edgeScrollProximityFactor.y * eased,
+					},
+					elapsed
+				)
 			}
 		}
 	}
@@ -112,7 +116,7 @@ export class EdgeScrollManager {
 	 * Moves the camera when the mouse is close to the edge of the screen.
 	 * @public
 	 */
-	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
+	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }, elapsed: number) {
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return
 		const { editor } = this
 
@@ -128,9 +132,11 @@ export class EdgeScrollManager {
 				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
 				: 1
 
-		// Determines the base speed of the scroll
+		// Determines the base speed of the scroll. edgeScrollSpeed is px per 60 Hz frame, so scale
+		// by elapsed time or a 120 Hz display scrolls twice as fast.
 		const zoomLevel = editor.getZoomLevel()
-		const pxSpeed = editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed
+		const pxSpeed =
+			editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed * (elapsed / FRAME_MS_60HZ)
 		const scrollDeltaX = (pxSpeed * proximityFactor.x * screenSizeFactorX) / zoomLevel
 		const scrollDeltaY = (pxSpeed * proximityFactor.y * screenSizeFactorY) / zoomLevel
 

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

@@ -0,0 +1,53 @@
+import { TLTheme } from '@tldraw/tlschema'
+import { MockInstance, vi } from 'vitest'
+import { TestEditor } from '../../../test/TestEditor'
+import { DEFAULT_THEME } from './defaultThemes'
+
+// Optional so that other tests' theme objects still satisfy TLThemes.
+declare module '@tldraw/tlschema' {
+	interface TLThemes {
+		ocean?: TLTheme
+		sunset?: TLTheme
+	}
+}
+
+const oceanTheme: TLTheme = { ...DEFAULT_THEME, id: 'ocean' }
+
+let editor: TestEditor
+let warn: MockInstance
+
+beforeEach(() => {
+	editor = new TestEditor({ themes: { ocean: oceanTheme } })
+	warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+	warn.mockRestore()
+	editor.dispose()
+})
+
+describe('setCurrentTheme', () => {
+	it('switches to a registered theme', () => {
+		editor.setCurrentTheme('ocean')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+		expect(warn).not.toHaveBeenCalled()
+	})
+
+	it('warns and keeps the current theme when the id is not registered', () => {
+		editor.setCurrentTheme('sunset')
+
+		expect(warn).toHaveBeenCalledWith("Theme 'sunset' not found. Available themes: default, ocean")
+		expect(editor.getCurrentThemeId()).toBe('default')
+		expect(editor.getCurrentTheme()).toBe(DEFAULT_THEME)
+	})
+
+	it('keeps the previous theme rather than falling back to default', () => {
+		editor.setCurrentTheme('ocean')
+		editor.setCurrentTheme('sunset')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+	})
+})

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

@@ -69,14 +69,20 @@ export class ThemeManager {
 		return this._themes.get()[this.getCurrentThemeId()]!
 	}
 
-	/** Set the current theme by id. The theme must have been previously registered. */
+	/**
+	 * Set the current theme by id. The theme must have been previously registered; an
+	 * unregistered id is ignored and the current theme is kept.
+	 */
 	setCurrentTheme(id: TLThemeId): void {
-		if (process.env.NODE_ENV !== 'production') {
-			if (!(id in this._themes.get())) {
+		// Storing an unregistered id would make getCurrentTheme() return
+		// undefined despite its TLTheme return type.
+		if (!(id in this._themes.get())) {
+			if (process.env.NODE_ENV !== 'production') {
 				console.warn(
 					`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`
 				)
 			}
+			return
 		}
 
 		this._currentThemeId.set(id)

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -39,14 +39,29 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
 		}
 
-		return new Group2d({
-			children: children.map((childId) => {
-				const shape = this.editor.getShape(childId)!
-				return this.editor
-					.getShapeGeometry(childId)
-					.transform(this.editor.getShapeLocalTransform(shape)!, { isLabel: false })
-			}),
-		})
+		// A child id can outlive its record. The children index and the geometry cache are separate
+		// derivations, so inside a transaction that removes a child the index can still name it while
+		// `getShapeGeometry` already answers nothing — its `!` hides that it returns `undefined` for a
+		// record the store no longer holds. Asserting instead of checking threw a `TypeError` out of a
+		// reactive recompute, where no caller could catch it.
+		const geometries: Geometry2d[] = []
+		for (const childId of children) {
+			const child = this.editor.getShape(childId)
+			if (!child) continue
+			const geometry = this.editor.getShapeGeometry(childId)
+			if (!geometry) continue
+			const transform = this.editor.getShapeLocalTransform(child)
+			if (!transform) continue
+			geometries.push(geometry.transform(transform, { isLabel: false }))
+		}
+
+		// Every child resolved to nothing, so there is no meaningful extent to report. Matches the
+		// no-children case above rather than building an empty `Group2d`, whose bounds are `NaN`.
+		if (geometries.length === 0) {
+			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
+		}
+
+		return new Group2d({ children: geometries })
 	}
 
 	component(shape: TLGroupShape) {

package/src/lib/primitives/geometry/Arc2d.test.ts

@@ -225,4 +225,13 @@ describe('Arc2d.getSvgPathData', () => {
 		})
 		expect(arc.getSvgPathData()).toBe('M10, 0 A10 10 0 0 1 7.07, 7.07')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(10, 0)
+		const end = new Vec(10 / Math.SQRT2, 10 / Math.SQRT2)
+		const arc = new Arc2d({ center: new Vec(0, 0), start, end, sweepFlag: 1, largeArcFlag: 0 })
+		arc.getSvgPathData()
+		expect(start).toMatchObject({ x: 10, y: 0 })
+		expect(end).toMatchObject({ x: 10 / Math.SQRT2, y: 10 / Math.SQRT2 })
+	})
 })

package/src/lib/primitives/geometry/Arc2d.ts

@@ -105,7 +105,7 @@ export class Arc2d extends Geometry2d {
 			_largeArcFlag: largeArcFlag,
 			_sweepFlag: sweepFlag,
 		} = this
-		return `${first ? `M${start.toFixed()}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.toFixed()}`
+		return `${first ? `M${start}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end}`
 	}
 
 	override getLength() {

package/src/lib/primitives/geometry/CubicBezier2d.test.ts

@@ -172,4 +172,17 @@ describe('CubicBezier2d.getSvgPathData', () => {
 		})
 		expect(b.getSvgPathData()).toBe('M 0.12, 0  C1.01, 2 3, 5 10, 10')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123, 0)
+		const cp1 = new Vec(1.006, 2)
+		const cp2 = new Vec(3, 4.999)
+		const end = new Vec(10, 10.005)
+		const b = new CubicBezier2d({ start, cp1, cp2, end })
+		b.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123, y: 0 })
+		expect(cp1).toMatchObject({ x: 1.006, y: 2 })
+		expect(cp2).toMatchObject({ x: 3, y: 4.999 })
+		expect(end).toMatchObject({ x: 10, y: 10.005 })
+	})
 })

package/src/lib/primitives/geometry/CubicBezier2d.ts

@@ -81,7 +81,7 @@ export class CubicBezier2d extends Polyline2d {
 
 	getSvgPathData(first = true) {
 		const { _a: a, _b: b, _c: c, _d: d } = this
-		return `${first ? `M ${a.toFixed()} ` : ``} C${b.toFixed()} ${c.toFixed()} ${d.toFixed()}`
+		return `${first ? `M ${a} ` : ``} C${b} ${c} ${d}`
 	}
 
 	static GetAtT(segment: CubicBezier2d, t: number) {

package/src/lib/primitives/geometry/Edge2d.test.ts

@@ -1,5 +1,23 @@
-describe('Edge2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Edge2d } from './Edge2d'
+
+describe('Edge2d.getSvgPathData', () => {
+	it('emits a move and a line command, rounded to two decimals', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData()).toBe('M0.12, 0 L10, 10.99')
+	})
+
+	it('omits the move command when not first', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData(false)).toBe(' L10, 10.99')
+	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123456, 0)
+		const end = new Vec(10, 10.987654)
+		const edge = new Edge2d({ start, end })
+		edge.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123456, y: 0 })
+		expect(end).toMatchObject({ x: 10, y: 10.987654 })
 	})
 })

package/src/lib/primitives/geometry/Edge2d.ts

@@ -68,6 +68,6 @@ export class Edge2d extends Geometry2d {
 
 	getSvgPathData(first = true) {
 		const { _start: start, _end: end } = this
-		return `${first ? `M${start.toFixed()}` : ``} L${end.toFixed()}`
+		return `${first ? `M${start}` : ``} L${end}`
 	}
 }

package/src/lib/primitives/geometry/Group2d.test.ts

@@ -340,20 +340,38 @@ describe('Group2d.transform', () => {
 		expect(t.vertices.length).toBe(8)
 	})
 
-	it('carries the label, debug colour and ignore flags forward', () => {
+	it('carries all the flags forward', () => {
 		const g = new Group2d({
 			children: [rectA()],
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 		expect(g.transform(Mat.Identity())).toMatchObject({
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 	})
 
+	it('applies the transform options over the carried flags', () => {
+		const g = new Group2d({ children: [rectA()], isLabel: true, isInternal: true })
+		expect(
+			g.transform(Mat.Identity(), {
+				isLabel: false,
+				isInternal: false,
+				debugColor: 'red',
+				ignore: true,
+			})
+		).toMatchObject({ isLabel: false, isInternal: false, debugColor: 'red', ignore: true })
+	})
+
 	it('scales hit testing with the transform', () => {
 		const t = group().transform(Mat.Scale(2, 2))
 		expect(t.hitTestPoint(new Vec(100, 50), 0, false)).toBe(true)
@@ -361,12 +379,15 @@ describe('Group2d.transform', () => {
 		expect(t.distanceToPoint(new Vec(300, 50))).toBe(100)
 	})
 
-	// Locks in current behaviour, see #10562.
-	it('drops the ignored children', () => {
+	// #10562: transform used to drop the ignored children.
+	it('keeps the transformed ignored children', () => {
 		const ignored = new Rectangle2d({ x: 500, width: 10, height: 10, isFilled: true, ignore: true })
 		const g = new Group2d({ children: [rectA(), ignored] })
-		expect(g.ignoredChildren.length).toBe(1)
-		expect((g.transform(Mat.Identity()) as Group2d).ignoredChildren).toEqual([])
+		const t = g.transform(Mat.Translate(10, 20)) as Group2d
+		expect(t.children.length).toBe(1)
+		expect(t.ignoredChildren.length).toBe(1)
+		expect(t.ignoredChildren[0].ignore).toBe(true)
+		expect(t.ignoredChildren[0].bounds).toMatchObject({ x: 510, y: 20, w: 10, h: 10 })
 	})
 })
 

package/src/lib/primitives/geometry/Group2d.ts

@@ -1,8 +1,13 @@
 import { assert, invLerp, lerp } from '@tldraw/utils'
 import { Box } from '../Box'
-import { Mat } from '../Mat'
+import { MatModel } from '../Mat'
 import { Vec, VecLike } from '../Vec'
-import { Geometry2d, Geometry2dFilters, Geometry2dOptions } from './Geometry2d'
+import {
+	Geometry2d,
+	Geometry2dFilters,
+	Geometry2dOptions,
+	TransformedGeometry2dOptions,
+} from './Geometry2d'
 
 /** @public */
 export class Group2d extends Geometry2d {
@@ -226,12 +231,18 @@ export class Group2d extends Geometry2d {
 		return childTLength / totalLength
 	}
 
-	override transform(transform: Mat): Geometry2d {
+	override transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d {
+		// Each child's own transform preserves its `ignore` flag, so the constructor
+		// re-partitions ignored children back into `ignoredChildren` instead of dropping
+		// them (#10562).
 		return new Group2d({
-			children: this.children.map((c) => c.transform(transform)),
-			isLabel: this.isLabel,
-			debugColor: this.debugColor,
-			ignore: this.ignore,
+			children: [...this.children, ...this.ignoredChildren].map((c) => c.transform(transform)),
+			isLabel: opts?.isLabel ?? this.isLabel,
+			isEmptyLabel: this.isEmptyLabel,
+			isInternal: opts?.isInternal ?? this.isInternal,
+			debugColor: opts?.debugColor ?? this.debugColor,
+			ignore: opts?.ignore ?? this.ignore,
+			excludeFromShapeBounds: this.excludeFromShapeBounds,
 		})
 	}
 

package/src/lib/primitives/geometry/Point2d.test.ts

@@ -1,5 +1,16 @@
-describe('Point2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Point2d } from './Point2d'
+
+describe('Point2d.getSvgPathData', () => {
+	it('emits a move command rounded to two decimals', () => {
+		const point = new Point2d({ margin: 0, point: new Vec(0.123456, 7.891234) })
+		expect(point.getSvgPathData()).toBe('M0.12, 7.89')
+	})
+
+	it('does not mutate the stored point', () => {
+		const vec = new Vec(0.123456, 7.891234)
+		const point = new Point2d({ margin: 0, point: vec })
+		point.getSvgPathData()
+		expect(vec).toMatchObject({ x: 0.123456, y: 7.891234 })
 	})
 })

package/src/lib/primitives/geometry/Point2d.ts

@@ -28,6 +28,6 @@ export class Point2d extends Geometry2d {
 
 	getSvgPathData() {
 		const { _point: point } = this
-		return `M${point.toFixed()}`
+		return `M${point}`
 	}
 }

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 = '5.4.0'
+export const version = '5.5.0-canary.04d1e6c4daff'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-09-02T11:04:02.901Z',
-	patch: '2026-09-02T11:04:02.901Z',
+	minor: '2026-09-04T14:57:28.023Z',
+	patch: '2026-09-04T14:57:28.023Z',
 }