@tldraw/editor 5.4.0-canary.042da660fa66 → 5.4.0-canary.059d049864ed

package/src/lib/globals/menus.ts

@@ -106,10 +106,12 @@ export const tlmenus = {
 	 * @public
 	 */
 	hideOpenMenus(contextId?: string) {
+		// ids read back from the store already carry their context suffix, so they are deleted
+		// (and later re-added) as-is rather than suffixed again
 		this._hiddenMenus = [...this.getOpenMenus(contextId)]
 		if (this._hiddenMenus.length === 0) return
 		for (const menu of this._hiddenMenus) {
-			this.deleteOpenMenu(menu, contextId)
+			this.deleteOpenMenu(menu)
 		}
 	},
 
@@ -128,10 +130,15 @@ export const tlmenus = {
 	 */
 	showOpenMenus(contextId?: string) {
 		if (this._hiddenMenus.length === 0) return
+		const stillHidden: string[] = []
 		for (const menu of this._hiddenMenus) {
-			this.addOpenMenu(menu, contextId)
+			if (!contextId || menu.endsWith('-' + contextId)) {
+				this.addOpenMenu(menu)
+			} else {
+				stillHidden.push(menu)
+			}
 		}
-		this._hiddenMenus = []
+		this._hiddenMenus = stillHidden
 	},
 
 	/**
@@ -148,7 +155,7 @@ export const tlmenus = {
 	 * @public
 	 */
 	isMenuOpen(id: string, contextId?: string): boolean {
-		return this.getOpenMenus(contextId).includes(`${id}-${contextId}`)
+		return this.getOpenMenus(contextId).includes(contextId ? `${id}-${contextId}` : id)
 	},
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -153,6 +153,7 @@ export function useCanvasEvents() {
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
 
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'files',
 						files,
@@ -163,6 +164,7 @@ export function useCanvasEvents() {
 
 				const url = e.dataTransfer.getData('url')
 				if (url) {
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'url',
 						url,

package/src/lib/hooks/useDocumentEvents.ts

@@ -29,8 +29,12 @@ export function useDocumentEvents() {
 			// re-dispatched, which would lead to an infinite loop.
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
-			e.stopPropagation()
 			const cvs = container.querySelector('.tl-canvas')
+			// A drop on the canvas itself already reaches the canvas (and any shape's own React
+			// drop handlers) by bubbling; stopping it here would hide it from React, which
+			// delegates from the root above this container.
+			if (cvs?.contains(e.target as Node | null)) return
+			e.stopPropagation()
 			if (!cvs) return
 			const newEvent = new DragEvent(e.type, e)
 			;(newEvent as any).isSpecialRedispatchedEvent = true
@@ -277,10 +281,13 @@ export function useDocumentEvents() {
 
 		container.addEventListener('wheel', handleWheel, { passive: false })
 
+		// Not the shared `preventDefault` reference: the DOM dedupes identical listeners, so with two
+		// editors in one document the first cleanup would otherwise remove it for both.
+		const handleGesture = (e: Event) => preventDefault(e)
 		const ownerDoc = container.ownerDocument
-		ownerDoc.addEventListener('gesturestart', preventDefault)
-		ownerDoc.addEventListener('gesturechange', preventDefault)
-		ownerDoc.addEventListener('gestureend', preventDefault)
+		ownerDoc.addEventListener('gesturestart', handleGesture)
+		ownerDoc.addEventListener('gesturechange', handleGesture)
+		ownerDoc.addEventListener('gestureend', handleGesture)
 
 		container.addEventListener('keydown', handleKeyDown)
 		container.addEventListener('keyup', handleKeyUp)
@@ -290,9 +297,9 @@ export function useDocumentEvents() {
 
 			container.removeEventListener('wheel', handleWheel)
 
-			ownerDoc.removeEventListener('gesturestart', preventDefault)
-			ownerDoc.removeEventListener('gesturechange', preventDefault)
-			ownerDoc.removeEventListener('gestureend', preventDefault)
+			ownerDoc.removeEventListener('gesturestart', handleGesture)
+			ownerDoc.removeEventListener('gesturechange', handleGesture)
+			ownerDoc.removeEventListener('gestureend', handleGesture)
 
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)

package/src/lib/hooks/useLocalStore.ts

@@ -1,5 +1,5 @@
-import { TLAsset, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
-import { WeakCache } from '@tldraw/utils'
+import { TLAssetId, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
+import { noop } from '@tldraw/utils'
 import { useEffect } from 'react'
 import { TLStoreOptions, createTLStore } from '../config/createTLStore'
 import { TLEditorSnapshot } from '../config/TLEditorSnapshot'
@@ -33,7 +33,9 @@ export function useLocalStore(
 
 		setState({ status: 'loading' })
 
-		const objectURLCache = new WeakCache<TLAsset, Promise<string | null>>()
+		// Keyed by asset id rather than record identity so that a record update doesn't mint
+		// another object url for the same blob; every url minted here is revoked on cleanup.
+		const objectURLCache = new Map<TLAssetId, Promise<string | null>>()
 		const assets: TLAssetStore = {
 			upload: async (asset, file) => {
 				await client.db.storeAsset(asset.id, file)
@@ -43,11 +45,14 @@ export function useLocalStore(
 				if (!asset.props.src) return null
 
 				if (asset.props.src.startsWith('asset:')) {
-					return await objectURLCache.get(asset, async () => {
-						const blob = await client.db.getAsset(asset.id)
-						if (!blob) return null
-						return URL.createObjectURL(blob)
-					})
+					let objectURL = objectURLCache.get(asset.id)
+					if (!objectURL) {
+						objectURL = client.db
+							.getAsset(asset.id)
+							.then((blob) => (blob ? URL.createObjectURL(blob) : null))
+						objectURLCache.set(asset.id, objectURL)
+					}
+					return await objectURL
 				}
 
 				return asset.props.src
@@ -78,6 +83,9 @@ export function useLocalStore(
 		return () => {
 			isClosed = true
 			client.close()
+			for (const objectURL of objectURLCache.values()) {
+				objectURL.then((url) => url && URL.revokeObjectURL(url), noop)
+			}
 		}
 	}, [options, setState])
 

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -70,6 +70,9 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 		const newEvent = new WheelEvent('wheel', e as any)
 		;(newEvent as any).isSpecialRedispatchedEvent = true
 		cvs.dispatchEvent(newEvent)
+		// Flag the original too: it keeps bubbling, and an enclosing pass-through root (the
+		// navigation panel around the minimap) would otherwise redispatch it a second time.
+		;(e as any).isSpecialRedispatchedEvent = true
 	})
 
 	// The element the listener is currently on, which isn't necessarily `ref.current`: a `RefObject`

package/src/lib/hooks/usePeerIds.ts

@@ -1,4 +1,5 @@
 import { useComputed, useValue } from '@tldraw/state-react'
+import { areArraysShallowEqual } from '@tldraw/utils'
 import { uniq } from '../utils/uniq'
 import { useEditor } from './useEditor'
 
@@ -17,7 +18,7 @@ export function usePeerIds() {
 	const $userIds = useComputed(
 		'userIds',
 		() => uniq(editor.getVisibleCollaborators().map((p) => p.userId)).sort(),
-		{ isEqual: (a, b) => a.join(',') === b.join?.(',') },
+		{ isEqual: areArraysShallowEqual },
 		[editor]
 	)
 

package/src/lib/primitives/Box.test.ts

@@ -1,4 +1,4 @@
-import { Box } from './Box'
+import { Box, rotateSelectionHandle } from './Box'
 import { Vec } from './Vec'
 
 describe('Box', () => {
@@ -759,3 +759,11 @@ describe('Box', () => {
 		})
 	})
 })
+
+describe('rotateSelectionHandle', () => {
+	it('wraps around for negative rotations', () => {
+		expect(rotateSelectionHandle('top', Math.PI / 2)).toBe('right')
+		expect(rotateSelectionHandle('top', -Math.PI / 2)).toBe('left')
+		expect(rotateSelectionHandle('top_left', -Math.PI)).toBe('bottom_right')
+	})
+})

package/src/lib/primitives/Box.ts

@@ -678,7 +678,9 @@ export function rotateSelectionHandle(handle: SelectionHandle, rotation: number)
 	const numSteps = Math.round(rotation / (PI / 4))
 
 	const currentIndex = ORDERED_SELECTION_HANDLES.indexOf(handle)
-	return ORDERED_SELECTION_HANDLES[(currentIndex + numSteps) % ORDERED_SELECTION_HANDLES.length]
+	// numSteps is negative for negative rotations, so wrap the index into range
+	const n = ORDERED_SELECTION_HANDLES.length
+	return ORDERED_SELECTION_HANDLES[(((currentIndex + numSteps) % n) + n) % n]
 }
 
 /** @public */

package/src/lib/primitives/Vec.test.ts

@@ -336,6 +336,16 @@ describe('Vec.Slope', () => {
 		expect(Vec.Slope(new Vec(0, 0), new Vec(50, 100))).toEqual(2)
 		expect(Vec.Slope(new Vec(0, 0), new Vec(-50, 100))).toEqual(-2)
 		expect(Vec.Slope(new Vec(123, 456), new Vec(789, 24))).toEqual(-0.6486486486486487)
+		// A.x happened to equal B.y here, which used to trip the vertical guard
+		expect(Vec.Slope(new Vec(1, 0), new Vec(0, 1))).toEqual(-1)
+		expect(Vec.Slope(new Vec(5, 0), new Vec(5, 10))).toBeNaN()
+	})
+})
+
+describe('Vec.cross', () => {
+	it('Matches the static Vec.Cross.', () => {
+		expect(Vec.Cross(new Vec(1, 2, 3), new Vec(4, 5, 6))).toMatchObject({ x: -3, y: 6 })
+		expect(new Vec(1, 2, 3).cross(new Vec(4, 5, 6))).toMatchObject({ x: -3, y: 6 })
 	})
 })
 

package/src/lib/primitives/Vec.ts

@@ -164,9 +164,9 @@ export class Vec {
 	}
 
 	cross(V: VecLike) {
-		this.x = this.y * V.z! - this.z * V.y
-		this.y = this.z * V.x - this.x * V.z!
-		// this.z = this.x * V.y - this.y * V.x
+		const { x, y, z } = this
+		this.x = y * V.z! - z * V.y
+		this.y = z * V.x - x * V.z!
 		return this
 	}
 
@@ -497,7 +497,7 @@ export class Vec {
 	}
 
 	static Slope(A: VecLike, B: VecLike): number {
-		if (A.x === B.y) return NaN
+		if (A.x === B.x) return NaN
 		return (A.y - B.y) / (A.x - B.x)
 	}
 

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

@@ -1,4 +1,4 @@
-import { getPointInArcT } from './utils'
+import { areAnglesCompatible, getPointInArcT } from './utils'
 
 describe('getPointInArcT', () => {
 	it('should return 0 for the start of the arc', () => {
@@ -57,3 +57,12 @@ describe('getPointInArcT', () => {
 		expect(getPointInArcT(mAB, A, B, P)).toBe(1)
 	})
 })
+
+describe('areAnglesCompatible', () => {
+	it('treats angles a multiple of PI/2 apart as compatible regardless of sign', () => {
+		expect(areAnglesCompatible(-Math.PI / 4, Math.PI / 4)).toBe(true)
+		expect(areAnglesCompatible(Math.PI / 2 - 1e-9, 0)).toBe(true)
+		expect(areAnglesCompatible(Math.PI, -Math.PI / 2)).toBe(true)
+		expect(areAnglesCompatible(0, Math.PI / 3)).toBe(false)
+	})
+})

package/src/lib/primitives/utils.ts

@@ -189,7 +189,10 @@ export function snapAngle(r: number, segments: number): number {
  * @public
  */
 export function areAnglesCompatible(a: number, b: number) {
-	return a === b || approximately((a % (Math.PI / 2)) - (b % (Math.PI / 2)), 0)
+	// Reduce the difference, not each angle: a sign-preserving % on each made
+	// -PI/4 and PI/4 incompatible. A remainder just under PI/2 is a multiple too.
+	const d = Math.abs(a - b) % (Math.PI / 2)
+	return approximately(d, 0) || approximately(d, Math.PI / 2)
 }
 
 /**

package/src/lib/test/useCanvasEvents.test.tsx

@@ -0,0 +1,74 @@
+import { act, render } from '@testing-library/react'
+import { Editor } from '../editor/Editor'
+import { TldrawEditor } from '../TldrawEditor'
+
+function dropEvent(dataTransfer: { files: File[]; getData(type: string): string }) {
+	const event = new Event('drop', { bubbles: true, cancelable: true })
+	Object.defineProperty(event, 'dataTransfer', { value: dataTransfer })
+	return event
+}
+
+describe('useCanvasEvents drop handling', () => {
+	let editor: Editor
+	let canvas: HTMLElement
+
+	beforeEach(async () => {
+		await act(async () => {
+			render(
+				<TldrawEditor
+					shapeUtils={[]}
+					bindingUtils={[]}
+					onMount={(e) => {
+						editor = e
+					}}
+				/>
+			)
+		})
+		canvas = document.querySelector('[data-testid="canvas"]') as HTMLElement
+
+		// Stand-ins for the default handlers: any undoable change will do.
+		editor.registerExternalContentHandler('files', async () => {
+			editor.createPage({ name: 'dropped' })
+		})
+		editor.registerExternalContentHandler('url', async () => {
+			editor.createPage({ name: 'dropped' })
+		})
+
+		// An unmarked change before the drop, like a stroke the user just drew.
+		editor.createPage({ name: 'before drop' })
+	})
+
+	afterEach(() => {
+		editor?.dispose()
+	})
+
+	function pageNames() {
+		return editor.getPages().map((p) => p.name)
+	}
+
+	it('makes a dropped file its own undo step', async () => {
+		await act(async () => {
+			canvas.dispatchEvent(
+				dropEvent({ files: [new File(['x'], 'x.png', { type: 'image/png' })], getData: () => '' })
+			)
+		})
+		expect(pageNames()).toEqual(['Page 1', 'before drop', 'dropped'])
+
+		editor.undo()
+
+		expect(pageNames()).toEqual(['Page 1', 'before drop'])
+	})
+
+	it('makes a dropped url its own undo step', async () => {
+		await act(async () => {
+			canvas.dispatchEvent(
+				dropEvent({ files: [], getData: (type) => (type === 'url' ? 'https://example.com' : '') })
+			)
+		})
+		expect(pageNames()).toEqual(['Page 1', 'before drop', 'dropped'])
+
+		editor.undo()
+
+		expect(pageNames()).toEqual(['Page 1', 'before drop'])
+	})
+})

package/src/lib/test/useDocumentEvents.test.tsx

@@ -0,0 +1,31 @@
+import { act, render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { createTLStore } from '../config/createTLStore'
+import { TldrawEditor } from '../TldrawEditor'
+
+describe('useDocumentEvents drop handling', () => {
+	// The container's native drop listener used to stop propagation before the event reached
+	// React's root, so React onDrop handlers inside the canvas never fired.
+	it('lets a drop inside the canvas reach React drop handlers there', async () => {
+		const onDrop = vi.fn((e: React.DragEvent) => e.stopPropagation())
+		function DropTarget() {
+			return <div data-testid="drop-target" onDrop={onDrop} />
+		}
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} components={{ OnTheCanvas: DropTarget }} />)
+		})
+
+		const target = document.querySelector('[data-testid="drop-target"]')!
+		expect(target.closest('.tl-canvas')).not.toBeNull()
+		const event = new Event('drop', { bubbles: true, cancelable: true })
+		Object.defineProperty(event, 'dataTransfer', { value: { files: [], getData: () => '' } })
+		act(() => {
+			target.dispatchEvent(event)
+		})
+
+		expect(onDrop).toHaveBeenCalledTimes(1)
+		// the browser default (navigating to the dropped file) is still prevented
+		expect(event.defaultPrevented).toBe(true)
+	})
+})

package/src/lib/test/usePassThroughWheelEvents.test.tsx

@@ -22,11 +22,27 @@ function Culled() {
 	return <button ref={ref} data-testid="marker" />
 }
 
+/**
+ * The shape the navigation panel has: a pass-through root wrapping another pass-through root (the
+ * minimap).
+ */
+function Nested() {
+	const outer = useRef<HTMLDivElement>(null)
+	const inner = useRef<HTMLButtonElement>(null)
+	usePassThroughWheelEvents(outer)
+	usePassThroughWheelEvents(inner)
+	return (
+		<div ref={outer}>
+			<button ref={inner} data-testid="marker" />
+		</div>
+	)
+}
+
 describe('usePassThroughWheelEvents', () => {
-	async function renderEditor() {
+	async function renderEditor(InFrontOfTheCanvas = Culled) {
 		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
 		await act(async () => {
-			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas: Culled }} />)
+			render(<TldrawEditor store={store} components={{ InFrontOfTheCanvas }} />)
 		})
 		return document.querySelector(`.${TL_CONTAINER_CLASS}`)!
 	}
@@ -64,6 +80,13 @@ describe('usePassThroughWheelEvents', () => {
 		expect(wheelOverMarker(container)).toHaveLength(1)
 	})
 
+	// Issue #10441: the original event keeps bubbling after the inner root redispatches it, so
+	// without a flag on it the outer root would redispatch it again.
+	it('redispatches once when the element is inside another pass-through element', async () => {
+		const container = await renderEditor(Nested)
+		expect(wheelOverMarker(container)).toHaveLength(1)
+	})
+
 	it('stops redispatching once the owner unmounts', async () => {
 		const container = await renderEditor()
 		const marker = container.querySelector('[data-testid="marker"]')!

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/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-canary.042da660fa66'
+export const version = '5.4.0-canary.059d049864ed'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-19T12:47:12.111Z',
-	patch: '2026-08-19T12:47:12.111Z',
+	minor: '2026-08-22T06:21:04.451Z',
+	patch: '2026-08-22T06:21:04.451Z',
 }