@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.5.0-canary.078a77321dc3

package/src/lib/hooks/useDocumentEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
 import { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'
@@ -14,6 +14,10 @@ export function useDocumentEvents() {
 	const isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])
 	const isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])
 
+	// `inputs.keys` only stores codes, but tools match `onKeyUp` on `info.key`, so the window
+	// blur release below needs the key remembered per code.
+	const heldKeysRef = useRef(new Map<string, string>())
+
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
 	useEffect(() => {
 		if (!container) return
@@ -29,8 +33,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
@@ -208,6 +216,7 @@ export function useDocumentEvents() {
 				accelKey: isAccelKey(e),
 			}
 
+			heldKeysRef.current.set(e.code, e.key)
 			editor.dispatch(info)
 		}
 
@@ -235,24 +244,26 @@ export function useDocumentEvents() {
 				accelKey: isAccelKey(e),
 			}
 
+			heldKeysRef.current.delete(e.code)
 			editor.dispatch(info)
 		}
 
 		function handleTouchStart(e: TouchEvent) {
 			if (container.contains(e.target as Node)) {
-				// Center point of the touch area
-				const touchXPosition = e.touches[0].pageX
+				// Center point of the touch area, measured from the edge of the window the touch
+				// has to reach to trigger the navigation
+				const touchXPosition = e.touches[0].clientX
 				// Size of the touch area
 				const touchXRadius = e.touches[0].radiusX || 0
 
-				// We set a threshold (10px) on both sizes of the screen,
-				// if the touch area overlaps with the screen edges
-				// it's likely to trigger the navigation. We prevent the
-				// touchstart event in that case.
-				// todo: make this relative to the actual window, not the editor's screen bounds
+				// If the touch area overlaps with the screen edges it's likely to trigger the
+				// navigation. We prevent the touchstart event in that case. The gesture belongs to
+				// the window, so an editor inset from the window's edges — beside a sidebar, say —
+				// is not near an edge the system reacts to.
+				const windowWidth = editor.getContainerWindow().innerWidth
 				if (
 					touchXPosition - touchXRadius < 10 ||
-					touchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10
+					touchXPosition + touchXRadius > windowWidth - 10
 				) {
 					if ((e.target as HTMLElement)?.tagName === 'BUTTON') {
 						// Force a click before bailing
@@ -276,10 +287,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)
@@ -289,14 +303,44 @@ 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)
 		}
 	}, [editor, container, isAppFocused, isEditing])
+
+	// Alt+Tab / Cmd+Tab away while holding a key delivers the keyup to the other app, so without
+	// this Space-panning (grab cursor, drags pan) stuck until the key was pressed again (#10442).
+	// Replaying a key_up per held key runs the normal release path, including tool onKeyUp.
+	useEffect(() => {
+		const win = editor.getContainerWindow()
+
+		const handleWindowBlur = () => {
+			const heldKeys = heldKeysRef.current
+			for (const code of [...editor.inputs.keys]) {
+				editor.dispatch({
+					type: 'keyboard',
+					name: 'key_up',
+					key: heldKeys.get(code) ?? code,
+					code,
+					shiftKey: false,
+					altKey: false,
+					ctrlKey: false,
+					metaKey: false,
+					accelKey: false,
+				})
+			}
+			heldKeys.clear()
+		}
+
+		win.addEventListener('blur', handleWindowBlur)
+		return () => {
+			win.removeEventListener('blur', handleWindowBlur)
+		}
+	}, [editor])
 }
 
 function areShortcutsDisabled(editor: Editor) {

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/license/LicenseManager.test.ts

@@ -316,6 +316,42 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Fails if the wildcard domain is a prefix of the current hostname', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://sub.example.com.other.io')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
+		it('Fails if the current hostname only ends with the wildcard domain', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://notexample.com')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
 		it('Fails if has a subdomain wildcard isnt for the same base domain', async () => {
 			// @ts-ignore
 			delete window.location
@@ -422,6 +458,107 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Is not development mode on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+				nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+				const nativeLicenseKey = await generateLicenseKey(
+					JSON.stringify(nativeLicenseInfo),
+					keyPair
+				)
+				const nativeLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await nativeLicenseManager.getLicenseFromKey(
+					nativeLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({
+					isLicenseParseable: true,
+					isNativeLicense: true,
+					isDomainValid: true,
+					isDevelopment: false,
+				})
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe('licensed')
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Validates the domain on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const customProtocolLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await customProtocolLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({ isDomainValid: false, isDevelopment: false })
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+					'unlicensed-production'
+				)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Is development mode over http on a non-loopback host', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('http://www.example.com')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const httpLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await httpLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it.each([
+			['http://localhost:5173/', true],
+			['http://127.0.0.1:3000/', true],
+			['https://localhost:8443/', true],
+			['https://[::1]:8443/', true],
+			['http://192.168.1.5:3000/', true],
+			['http://staging-box/', true],
+			['https://www.example.com/', false],
+			['tauri://localhost/index.html', false],
+			['http://tauri.localhost/index.html', false],
+			['app://tauri.localhost/com.example.app', false],
+			['app-bundle://localhost/index.html', false],
+		])('Development mode at %s is %s', async (href, expected) => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL(href)
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const manager = new LicenseManager('', keyPair.publicKey)
+				const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(expected)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
 		it('Fails if it is a native app with the wrong protocol', async () => {
 			// @ts-ignore
 			delete window.location
@@ -437,6 +574,29 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it.each(['tauri://localhost/index.html', 'http://tauri.localhost/index.html'])(
+			'Does not license an unrelated key at %s',
+			async (href) => {
+				process.env.NODE_ENV = 'production'
+				try {
+					// @ts-ignore
+					delete window.location
+					// @ts-ignore
+					window.location = new URL(href)
+
+					const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+					const manager = new LicenseManager('', keyPair.publicKey)
+					const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+					expect(result).toMatchObject({ isDevelopment: false, isDomainValid: false })
+					expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+						'unlicensed-production'
+					)
+				} finally {
+					process.env.NODE_ENV = 'test'
+				}
+			}
+		)
 	})
 
 	describe('License types and flags', () => {

package/src/lib/license/LicenseManager.ts

@@ -174,10 +174,17 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
+		const protocol = window.location.protocol
+		const hostname = window.location.hostname
+
+		// Tauri uses `tauri://localhost` on macOS and Linux and `http://tauri.localhost` on Windows.
+		if (hostname.toLowerCase().endsWith('.localhost')) {
+			return process.env.NODE_ENV !== 'production'
+		}
+
 		return (
-			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
-			this.isLoopbackHost(window.location.hostname) ||
+			protocol === 'http:' ||
+			(protocol === 'https:' && this.isLoopbackHost(hostname)) ||
 			process.env.NODE_ENV !== 'production'
 		)
 	}
@@ -407,7 +414,9 @@ export class LicenseManager {
 
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
-				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
+				const globToRegex = new RegExp(
+					normalizedHostOrUrlRegex.replace(/\./g, '\\.').replace(/\*/g, '.*?') + '$'
+				)
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 

package/src/lib/license/LicenseProvider.tsx

@@ -1,13 +1,34 @@
 import { useValue } from '@tldraw/state-react'
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
-export const LicenseContext = createContext({} as LicenseManager)
+export const LicenseContext = createContext<LicenseManager | null>(null)
 
 /** @internal */
-export function useLicenseContext() {
-	return useContext(LicenseContext)
+export function useLicenseContext(): LicenseManager {
+	const licenseManager = useMaybeLicenseManager()
+	if (!licenseManager) {
+		throw new Error(
+			'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components, or inside an <EditorProvider /> wrapping an editor created by them'
+		)
+	}
+	return licenseManager
+}
+
+/**
+ * Returns the license manager for the current editor, or `null` if there is none. Reads the
+ * license context when inside `<TldrawEditor />`, and otherwise falls back to the license manager
+ * of the nearest editor, so UI mounted outside the editor tree (via `EditorProvider`) resolves the
+ * same license as the editor it belongs to.
+ *
+ * @internal
+ */
+export function useMaybeLicenseManager(): LicenseManager | null {
+	const licenseManager = useContext(LicenseContext)
+	const editor = useMaybeEditor()
+	return licenseManager ?? editor?.licenseManager ?? null
 }
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {

package/src/lib/license/useLicenseManagerState.ts

@@ -8,16 +8,18 @@ export function useLicenseManagerState(licenseManager: LicenseManager): LicenseS
 
 /**
  * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
- * license validation resolves.
+ * license validation resolves. Returns `false` when there is no license manager, so gated UI stays
+ * hidden when mounted without an editor or license context.
  *
  * @internal
  */
 export function useLicenseFeatureFlag(
-	licenseManager: LicenseManager,
+	licenseManager: LicenseManager | null,
 	feature: LicenseFeatureName
 ): boolean {
-	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
-		licenseManager,
-		feature,
-	])
+	return useValue(
+		'licenseFeature',
+		() => (licenseManager ? licenseManager.isFeatureEnabled(feature) : false),
+		[licenseManager, feature]
+	)
 }

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)
 	}