@tldraw/editor 5.4.2 → 5.5.0-canary.003bf5951274

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/lib/test/preserveFocus.test.tsx

@@ -0,0 +1,81 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { TldrawEditor } from '../TldrawEditor'
+
+// The `tldraw_preserve_focus` search param switches the editor into preserve-focus mode, where
+// a pointerdown inside the container focuses the editor and a pointerdown elsewhere blurs it.
+describe('preserve-focus mode', () => {
+	const mounted: Element[] = []
+
+	beforeEach(() => {
+		window.history.replaceState(null, '', '?tldraw_preserve_focus')
+	})
+
+	afterEach(() => {
+		window.history.replaceState(null, '', '/')
+		for (const el of mounted.splice(0)) el.remove()
+	})
+
+	function pointerDown(target: EventTarget) {
+		act(() => {
+			target.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }))
+		})
+	}
+
+	async function mount(root: Element | ShadowRoot) {
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		const container = document.createElement('div')
+		root.appendChild(container)
+		mounted.push(container)
+		let editor: Editor | undefined
+		let unmount = () => {}
+		await act(async () => {
+			unmount = render(
+				<TldrawEditor
+					store={store}
+					onMount={(e) => {
+						editor = e
+					}}
+				/>,
+				{ container }
+			).unmount
+		})
+		return { editor: editor!, unmount }
+	}
+
+	it('focuses on a canvas pointerdown and blurs on a pointerdown outside', async () => {
+		const { editor } = await mount(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('keeps focus when the editor is inside an open shadow root', async () => {
+		// The body listener sees the event retargeted to the shadow host, so a check on
+		// `e.target` alone would blur the editor right after the container focused it.
+		const host = document.createElement('div')
+		document.body.appendChild(host)
+		mounted.push(host)
+		const { editor } = await mount(host.attachShadow({ mode: 'open' }))
+
+		pointerDown(editor.getContainer().querySelector('.tl-canvas')!)
+		expect(editor.getIsFocused()).toBe(true)
+
+		pointerDown(document.body)
+		expect(editor.getIsFocused()).toBe(false)
+	})
+
+	it('removes the body listener on unmount', async () => {
+		const { editor, unmount } = await mount(document.body)
+		const blur = vi.spyOn(editor, 'blur')
+
+		act(() => unmount())
+		pointerDown(document.body)
+		expect(blur).not.toHaveBeenCalled()
+	})
+})

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

@@ -43,12 +43,6 @@ export const debugFlags = {
 	throwToBlob: createDebugValue('throwToBlob', {
 		defaults: { all: false },
 	}),
-	reconnectOnPing: createDebugValue('reconnectOnPing', {
-		defaults: { all: false },
-	}),
-	debugCursors: createDebugValue('debugCursors', {
-		defaults: { all: false },
-	}),
 	forceSrgb: createDebugValue('forceSrgbColors', { defaults: { all: false } }),
 	debugGeometry: createDebugValue('debugGeometry', { defaults: { all: false } }),
 	hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),

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

@@ -81,6 +81,21 @@ describe('parseDeepLinkString', () => {
 		expect(() => parseDeepLinkString('v')).toThrow('Invalid deep link string')
 	})
 
+	it('throws on a viewport link with no area', () => {
+		expect(() => parseDeepLinkString('v0.0.0.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.0.200')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.200.0')).toThrow('Invalid deep link string')
+		expect(() => parseDeepLinkString('v100.100.-200.-100')).toThrow('Invalid deep link string')
+	})
+
+	it('accepts a viewport link positioned at the origin', () => {
+		expect(parseDeepLinkString('v0.0.200.100')).toEqual({
+			type: 'viewport',
+			bounds: new Box(0, 0, 200, 100),
+			pageId: undefined,
+		})
+	})
+
 	it('throws on an unknown link type', () => {
 		expect(() => parseDeepLinkString('xabc')).toThrow('Invalid deep link string')
 	})

package/src/lib/utils/deepLinks.ts

@@ -74,9 +74,14 @@ 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)) {
+			// Number('abc') is NaN rather than an error, and a box with no area parses cleanly but
+			// can only be zoomed to by clamping to max zoom at its corner. Both bypass the caller's
+			// fallback and park the camera at the origin, so both count as an invalid link here.
+			const isUsableViewport =
+				[bounds.x, bounds.y, bounds.w, bounds.h].every(Number.isFinite) &&
+				bounds.w > 0 &&
+				bounds.h > 0
+			if (!isUsableViewport) {
 				throw Error('Invalid deep link string')
 			}
 			return {

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

@@ -10,6 +10,7 @@ describe('LocalIndexedDb', () => {
 		vi.useRealTimers()
 	})
 	afterEach(async () => {
+		vi.restoreAllMocks()
 		await hardReset({ shouldReload: false })
 	})
 	describe('#storeSnapshot', () => {
@@ -106,6 +107,34 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	it('commits a write that is still in flight when the db is closed', async () => {
+		const db = new LocalIndexedDb('test-0')
+		const write = db.storeSnapshot({ schema, snapshot: { 'shape:1': { id: 'shape:1' } } })
+		await db.close()
+		await write
+
+		const reopened = new LocalIndexedDb('test-0')
+		expect((await reopened.load())?.records).toEqual([{ id: 'shape:1' }])
+		await reopened.close()
+	})
+
+	it('rejects a transaction that aborts after its requests succeeded while closing', async () => {
+		const db = new LocalIndexedDb('test-0')
+		let closing: Promise<void> | undefined
+		// A commit can fail after every request succeeded, so the request promises cannot report it.
+		// @ts-expect-error Exercise the transaction boundary directly to inject a commit failure.
+		const write = db.tx('readwrite', ['records'], async (tx) => {
+			await tx.objectStore('records').put({ id: 'shape:1' }, 'shape:1')
+			closing = db.close()
+			tx.abort()
+		})
+		try {
+			await expect(write).rejects.toMatchObject({ name: 'AbortError' })
+		} finally {
+			await closing
+		}
+	})
+
 	describe('#storeChanges', () => {
 		it('allows merging changes into an existing store', async () => {
 			const db = new LocalIndexedDb('test-0')
@@ -174,6 +203,72 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	describe('#pruneSessions', () => {
+		it('keeps the 10 most recent session rows and the current session', async () => {
+			const db = new LocalIndexedDb('test-0')
+			let now = 1000
+			vi.spyOn(Date, 'now').mockImplementation(() => now++)
+
+			// the current session is the oldest row of 14
+			const sessionIds = ['current', ...Array.from({ length: 13 }, (_, i) => `other-${i}`)]
+			for (const sessionId of sessionIds) {
+				await db.storeChanges({
+					schema,
+					changes: { added: {}, updated: {}, removed: {} },
+					sessionId,
+					sessionStateSnapshot: { sessionId } as any,
+				})
+			}
+
+			await db.pruneSessions({ keepSessionId: 'current' })
+
+			const remaining = await Promise.all(
+				sessionIds.map(async (sessionId) => [
+					sessionId,
+					((await db.load({ sessionId })).sessionStateSnapshot as any)?.sessionId === sessionId,
+				])
+			)
+			expect(Object.fromEntries(remaining)).toEqual({
+				current: true,
+				'other-0': false,
+				'other-1': false,
+				'other-2': false,
+				'other-3': true,
+				'other-4': true,
+				'other-5': true,
+				'other-6': true,
+				'other-7': true,
+				'other-8': true,
+				'other-9': true,
+				'other-10': true,
+				'other-11': true,
+				'other-12': true,
+			})
+
+			await db.close()
+		})
+
+		it('is a no-op when there are at most 10 rows', async () => {
+			const db = new LocalIndexedDb('test-0')
+			for (let i = 0; i < 10; i++) {
+				await db.storeChanges({
+					schema,
+					changes: { added: {}, updated: {}, removed: {} },
+					sessionId: `session-${i}`,
+					sessionStateSnapshot: { i } as any,
+				})
+			}
+
+			await db.pruneSessions()
+
+			for (let i = 0; i < 10; i++) {
+				expect((await db.load({ sessionId: `session-${i}` })).sessionStateSnapshot).toEqual({ i })
+			}
+
+			await db.close()
+		})
+	})
+
 	it('migrates legacy asset storage into the new format', async () => {
 		const legacyAssetsDb = await openDB('TLDRAW_ASSET_STORE_v1test-0', 1, {
 			upgrade(database) {

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

@@ -9,6 +9,9 @@ const STORE_PREFIX = 'TLDRAW_DOCUMENT_v2'
 const LEGACY_ASSET_STORE_PREFIX = 'TLDRAW_ASSET_STORE_v1'
 const dbNameIndexKey = 'TLDRAW_DB_NAME_INDEX_v2'
 
+/** How many session state rows (one per tab) to keep per document when pruning. */
+const MAX_SESSION_STATE_ROWS = 10
+
 /** @internal */
 export const Table = {
 	Records: 'records',
@@ -141,26 +144,22 @@ export class LocalIndexedDb {
 			assert(!this.isClosed, 'db is closed')
 			const db = await this.getDb()
 			const tx = db.transaction(names, mode)
-			// need to add a catch here early to prevent unhandled promise rejection
-			// during react-strict-mode where this tx.done promise can be rejected
-			// before we have a chance to await on it
-			const done = tx.done.catch((e: unknown) => {
-				if (!this.isClosed) {
-					throw e
-				}
-			})
+			// Commit failures may arrive before the callback finishes; observe them immediately
+			// while preserving the rejection for the await below.
+			const done = tx.done
+			done.catch(noop)
 			try {
 				return await cb(tx)
 			} finally {
-				if (!this.isClosed) {
-					await done
-				} else {
-					tx.abort()
-				}
+				// let the transaction commit even if close() was called meanwhile, otherwise a
+				// persist racing an unmount is silently rolled back
+				await done
 			}
 		})()
 		this.pendingTransactionSet.add(txPromise)
-		txPromise.finally(() => this.pendingTransactionSet.delete(txPromise))
+		// not `.finally()`: the promise it returns would re-reject with nobody observing it
+		const cleanup = () => this.pendingTransactionSet.delete(txPromise)
+		txPromise.then(cleanup, cleanup)
 		return txPromise
 	}
 
@@ -208,17 +207,19 @@ export class LocalIndexedDb {
 			const schemaStore = tx.objectStore(Table.Schema)
 			const sessionStateStore = tx.objectStore(Table.SessionState)
 
+			const requests: Promise<unknown>[] = []
 			for (const [id, record] of Object.entries(changes.added)) {
-				await recordsStore.put(record, id)
+				requests.push(recordsStore.put(record, id))
 			}
 
 			for (const [_prev, updated] of Object.values(changes.updated)) {
-				await recordsStore.put(updated, updated.id)
+				requests.push(recordsStore.put(updated, updated.id))
 			}
 
 			for (const id of Object.keys(changes.removed)) {
-				await recordsStore.delete(id)
+				requests.push(recordsStore.delete(id))
 			}
+			await Promise.all(requests)
 
 			schemaStore.put(schema.serialize(), Table.Schema)
 			if (sessionStateSnapshot && sessionId) {
@@ -254,9 +255,9 @@ export class LocalIndexedDb {
 
 			await recordsStore.clear()
 
-			for (const [id, record] of Object.entries(snapshot)) {
-				await recordsStore.put(record, id)
-			}
+			await Promise.all(
+				Object.entries(snapshot).map(([id, record]) => recordsStore.put(record, id))
+			)
 
 			schemaStore.put(schema.serialize(), Table.Schema)
 
@@ -275,15 +276,18 @@ export class LocalIndexedDb {
 		})
 	}
 
-	async pruneSessions() {
+	/**
+	 * Drop all but the most recently updated session state rows. The row for `keepSessionId` is never
+	 * deleted: it may be an old row that this tab restored its state from and has not rewritten yet,
+	 * and deleting it would make a later reload fall back to another tab's session state.
+	 */
+	async pruneSessions({ keepSessionId }: { keepSessionId?: string } = {}) {
 		await this.tx('readwrite', [Table.SessionState], async (tx) => {
 			const sessionStateStore = tx.objectStore(Table.SessionState)
-			const all = (await sessionStateStore.getAll()).sort((a, b) => a.updatedAt - b.updatedAt)
-			if (all.length < 10) {
-				await tx.done
-				return
-			}
-			const toDelete = all.slice(0, all.length - 10)
+			const all = ((await sessionStateStore.getAll()) as SessionStateSnapshotRow[])
+				.filter((row) => row.id !== keepSessionId)
+				.sort((a, b) => a.updatedAt - b.updatedAt)
+			const toDelete = all.slice(0, Math.max(0, all.length - MAX_SESSION_STATE_ROWS))
 			for (const { id } of toDelete) {
 				await sessionStateStore.delete(id)
 			}