@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/utils/deepLinks.ts

@@ -73,9 +73,15 @@ export function parseDeepLinkString(deepLinkString: string): TLDeepLink {
 		}
 		case 'v': {
 			const [x, y, w, h, pageId] = deepLinkString.slice(1).split('.')
+			const bounds = new Box(Number(x), Number(y), Number(w), Number(h))
+			// Number('abc') is NaN rather than an error, so without this check a malformed
+			// viewport link would bypass the caller's fallback and park the camera at the origin
+			if (![bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite)) {
+				throw Error('Invalid deep link string')
+			}
 			return {
 				type: 'viewport',
-				bounds: new Box(Number(x), Number(y), Number(w), Number(h)),
+				bounds,
 				pageId: pageId ? PageRecordType.createId(decodeURIComponent(pageId)) : undefined,
 			}
 		}

package/src/lib/utils/normalizeWheel.test.ts

@@ -0,0 +1,39 @@
+import { normalizeWheel } from './normalizeWheel'
+
+function wheelEvent(props: Partial<WheelEvent>): WheelEvent {
+	return {
+		deltaX: 0,
+		deltaY: 0,
+		ctrlKey: false,
+		altKey: false,
+		metaKey: false,
+		shiftKey: false,
+		...props,
+	} as WheelEvent
+}
+
+describe('normalizeWheel', () => {
+	it('negates finite deltas for panning', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: 5, deltaY: 10 }))
+		expect(x).toBe(-5)
+		expect(y).toBe(-10)
+	})
+
+	it('coerces a non-finite deltaX to zero movement', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: NaN, deltaY: 10 }))
+		expect(x === 0).toBe(true)
+		expect(y).toBe(-10)
+	})
+
+	it('coerces a non-finite deltaY to zero movement', () => {
+		const { x, y } = normalizeWheel(wheelEvent({ deltaX: 5, deltaY: Infinity }))
+		expect(x).toBe(-5)
+		expect(y === 0).toBe(true)
+	})
+
+	it('does not produce a non-finite zoom delta when wheeling with a bad deltaY', () => {
+		const { z } = normalizeWheel(wheelEvent({ deltaY: NaN, ctrlKey: true }))
+		expect(Number.isFinite(z)).toBe(true)
+		expect(z === 0).toBe(true)
+	})
+})

package/src/lib/utils/normalizeWheel.ts

@@ -9,6 +9,12 @@ const MAX_ZOOM_STEP = 10
  * @internal */
 export function normalizeWheel(event: WheelEvent | React.WheelEvent<HTMLElement>) {
 	let { deltaY, deltaX } = event
+
+	// Coerce non-finite deltas to no movement so they can't propagate into the camera and
+	// crash validation. Also covers deltaZ below, which is derived from deltaY.
+	if (!Number.isFinite(deltaX)) deltaX = 0
+	if (!Number.isFinite(deltaY)) deltaY = 0
+
 	let deltaZ = 0
 
 	// wheeling

package/src/lib/utils/rotation.ts

@@ -1,7 +1,6 @@
-import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
+import { TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'
 import { compact } from '@tldraw/utils'
 import type { Editor } from '../editor/Editor'
-import { Mat } from '../primitives/Mat'
 import { canonicalizeRotation } from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'
 
@@ -75,18 +74,11 @@ export function applyRotationToSnapshotShapes({
 			// We need to both rotate each shape individually and rotate the shapes
 			// around the pivot point (the average center of all rotating shapes.)
 
-			const parentTransform = isShapeId(shape.parentId)
-				? editor.getShapePageTransform(shape.parentId)!
-				: Mat.Identity()
-
 			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)
 
-			const newLocalPoint = Mat.applyToPoint(
-				// use the current parent transform in case it has moved/resized since the start
-				// (e.g. if rotating a shape at the edge of a group)
-				Mat.Inverse(parentTransform),
-				newPagePoint
-			)
+			// uses the current parent transform in case it has moved/resized since the start
+			// (e.g. if rotating a shape at the edge of a group)
+			const newLocalPoint = editor.getPointInParentSpace(shape.id, newPagePoint)
 			const newRotation = canonicalizeRotation(shape.rotation + delta)
 
 			return {

package/src/lib/utils/sync/TLLocalSyncClient.test.ts

@@ -172,3 +172,59 @@ test('writes that come in during a persist operation will get persisted afterwar
 	await tick()
 	expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
 })
+
+test('pagehide flushes pending changes without waiting for the throttle', async () => {
+	const { client, tick } = testClient()
+	await tick()
+	client.store.put([PageRecordType.create({ name: 'test', index: 'a0' as IndexKey })])
+	await tick()
+	expect(client.db.storeSnapshot).toHaveBeenCalledTimes(1)
+
+	client.store.put([PageRecordType.create({ name: 'test2', index: 'a1' as IndexKey })])
+	expect(client.db.storeChanges).not.toHaveBeenCalled()
+
+	window.dispatchEvent(new Event('pagehide'))
+	expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
+})
+
+test('hiding the tab flushes pending changes without waiting for the throttle', async () => {
+	const { client, tick } = testClient()
+	await tick()
+	client.store.put([PageRecordType.create({ name: 'test', index: 'a0' as IndexKey })])
+	await tick()
+	expect(client.db.storeSnapshot).toHaveBeenCalledTimes(1)
+
+	client.store.put([PageRecordType.create({ name: 'test2', index: 'a1' as IndexKey })])
+	expect(client.db.storeChanges).not.toHaveBeenCalled()
+
+	const visibilityState = vi.spyOn(document, 'visibilityState', 'get')
+	try {
+		visibilityState.mockReturnValue('hidden')
+		document.dispatchEvent(new Event('visibilitychange'))
+		expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
+	} finally {
+		visibilityState.mockRestore()
+	}
+})
+
+test('pagehide does not write before the initial load has completed', async () => {
+	const { client } = testClient()
+	window.dispatchEvent(new Event('pagehide'))
+	expect(client.db.storeSnapshot).not.toHaveBeenCalled()
+	expect(client.db.storeChanges).not.toHaveBeenCalled()
+})
+
+test('pagehide and visibilitychange listeners are removed when the client closes', async () => {
+	const removeWindowListener = vi.spyOn(window, 'removeEventListener')
+	const removeDocumentListener = vi.spyOn(document, 'removeEventListener')
+	try {
+		const { client, tick } = testClient()
+		await tick()
+		client.close()
+		expect(removeWindowListener).toHaveBeenCalledWith('pagehide', expect.any(Function))
+		expect(removeDocumentListener).toHaveBeenCalledWith('visibilitychange', expect.any(Function))
+	} finally {
+		removeWindowListener.mockRestore()
+		removeDocumentListener.mockRestore()
+	}
+})

package/src/lib/utils/sync/TLLocalSyncClient.ts

@@ -68,6 +68,7 @@ export class TLLocalSyncClient {
 	private disposables = new Set<() => void>()
 	private diffQueue: Array<RecordsDiff<UnknownRecord> | typeof UPDATE_INSTANCE_STATE> = []
 	private didDispose = false
+	private didLoad = false
 	private shouldDoFullDBWrite = true
 	private isReloading = false
 	readonly persistenceKey: string
@@ -143,6 +144,28 @@ export class TLLocalSyncClient {
 			)
 		)
 
+		if (typeof window !== 'undefined') {
+			// Persists are throttled, so without this the last PERSIST_THROTTLE_MS of edits are lost
+			// whenever the tab is closed or reloaded. `pagehide` is the last reliable event before
+			// unload on desktop; on mobile the page can be discarded without it firing, so we also
+			// flush when the tab is hidden.
+			const flush = () => {
+				// Before the initial load completes a full write would overwrite the saved
+				// document with an empty store.
+				if (!this.didLoad) return
+				this.persistIfNeeded()
+			}
+			const onVisibilityChange = () => {
+				if (document.visibilityState === 'hidden') flush()
+			}
+			window.addEventListener('pagehide', flush)
+			document.addEventListener('visibilitychange', onVisibilityChange)
+			this.disposables.add(() => {
+				window.removeEventListener('pagehide', flush)
+				document.removeEventListener('visibilitychange', onVisibilityChange)
+			})
+		}
+
 		this.connect(onLoad, onLoadError)
 
 		this.documentTypes = new Set(
@@ -249,6 +272,7 @@ export class TLLocalSyncClient {
 			this.disposables.add(() => {
 				this.channel.close()
 			})
+			this.didLoad = true
 			onLoad(this)
 		} catch (e: any) {
 			this.debug('error loading data from store', e)

package/src/lib/utils/sync/alerts.ts

@@ -12,7 +12,7 @@ Keep seeing this message?
 /** @internal */
 export function showCantReadFromIndexDbAlert() {
 	window.alert(
-		`Oops! We could not access your browser's storage—and the app won't work correctly without that. We now need to reload the page and try again.
+		`Oops! We could not access your browser's storage—and the app won't work correctly without that. Reload the page to try again.
 
 Keep seeing this message?
 • If you're using tldraw in a private or "incognito" window, try loading tldraw in a regular window or in a different browser.`

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-next.ef99ab47e5ce'
+export const version = '5.4.0'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:52:36.664Z',
-	patch: '2026-08-05T11:52:36.664Z',
+	minor: '2026-09-02T11:04:02.901Z',
+	patch: '2026-09-02T11:04:02.901Z',
 }

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

@@ -1,5 +0,0 @@
-describe('Polyline2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
-	})
-})