@tldraw/editor 5.5.2 → 5.6.0-canary.0091c91994d6

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

@@ -41,6 +41,7 @@ export class SpatialIndexManager {
 	private rbush: RBushIndex
 	private spatialIndexComputed: Computed<number>
 	private lastPageId: TLPageId | null = null
+	private lastFontLoadEpoch = -1
 
 	// Bumps only when the rbush content may have changed. Consumers subscribe
 	// via the computed; a stable epoch lets prop-only diffs skip downstream
@@ -66,21 +67,28 @@ export class SpatialIndexManager {
 		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
-			// These three reads are the computed's only tracked dependencies.
-			// Every input to a shape's page bounds is a shape or binding record,
-			// so the two histories cover all invalidation; the rebuild/update
-			// paths below run without capture to avoid registering a dependency
-			// per checked shape on every update (and ~page-size dependencies on
-			// every rebuild).
+			// These four reads are the computed's only tracked dependencies: shape
+			// and binding record changes, plus font loads (measured text resizes
+			// when its font swaps in). Theme changes that resize shapes without a
+			// record diff (e.g. `updateTheme({ fontSize })`) are not tracked, so
+			// the index stays stale for those until the next rebuild.
+			// The rebuild/update paths below run without capture to avoid
+			// registering a dependency per checked shape on every update (and
+			// ~page-size dependencies on every rebuild).
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
 			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
 			const currentPageId = this.editor.getCurrentPageId()
+			const fontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 			if (
 				isUninitialized(_prevValue) ||
 				shapeDiff === RESET_VALUE ||
 				bindingDiff === RESET_VALUE ||
-				this.lastPageId !== currentPageId
+				this.lastPageId !== currentPageId ||
+				// Which shapes a font load resizes isn't known without visiting
+				// every shape, so rebuild; loads are rare and bounded by the
+				// number of distinct fonts.
+				this.lastFontLoadEpoch !== fontLoadEpoch
 			) {
 				return unsafe__withoutCapture(() => this.rebuildAndBumpEpoch())
 			}
@@ -97,6 +105,7 @@ export class SpatialIndexManager {
 	private buildFromScratch(): void {
 		this.rbush.clear()
 		this.lastPageId = this.editor.getCurrentPageId()
+		this.lastFontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 		const elements: SpatialElement[] = []
 		for (const shape of this.editor.getCurrentPageShapes()) {

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -200,6 +200,24 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	createShapeForAsset?(asset: TLAsset, position: VecModel): TLShapePartial | null
 
+	/**
+	 * The shape's name, translated, as a screen reader should announce it.
+	 *
+	 * Return `undefined` — the default — and the shape is announced by its tool's label, under the
+	 * `tool.<type>` convention. Override this when the name isn't that: a geo shape is a "Rectangle"
+	 * or an "Ellipse" rather than a "Shape", so it names itself from its geo style.
+	 *
+	 * Resolve the name through {@link translateMessage} and the editor's `i18n` rather than
+	 * returning English, so it follows the user's locale and still reads as words when an app
+	 * supplies no translations.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	getShapeName(_shape: Shape): string | undefined {
+		return undefined
+	}
+
 	/**
 	 * Get the shape's geometry.
 	 *
@@ -349,6 +367,18 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 		return false
 	}
 
+	/**
+	 * Whether flipping changes the shape itself, by mirroring it or toggling its stored flip. The
+	 * default UI only offers flip for a lone selected shape when this is true; {@link Editor.flipShapes}
+	 * doesn't check it, so shapes that return false still move when flipped as part of a larger
+	 * selection. Use {@link ShapeUtil.canBeLaidOut} to opt out of that.
+	 *
+	 * @public
+	 */
+	canFlip(shape: Shape): boolean {
+		return false
+	}
+
 	/**
 	 * Whether the shape can participate in layout functions such as alignment or distribution.
 	 *

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

@@ -17,6 +17,10 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		return true
 	}
 
+	override canFlip() {
+		return true
+	}
+
 	override canBind() {
 		return false
 	}

package/src/lib/editor/shapes/shared/resizeBox.ts

@@ -1,5 +1,6 @@
 import { VecModel } from '@tldraw/tlschema'
 import { Box } from '../../../primitives/Box'
+import { clamp } from '../../../primitives/utils'
 import { Vec } from '../../../primitives/Vec'
 import { TLResizeHandle } from '../../types/selection-types'
 import type { TLBaseBoxShape } from '../BaseBoxShapeUtil'
@@ -36,29 +37,31 @@ export function resizeBox<T extends TLBaseBoxShape>(
 	const offset = new Vec(0, 0)
 
 	if (w > 0) {
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
 				case 'bottom_left': {
-					offset.x = w - minWidth
+					offset.x = w - clampedW
 					break
 				}
 				case 'top':
 				case 'bottom': {
-					offset.x = (w - minWidth) / 2
+					offset.x = (w - clampedW) / 2
 					break
 				}
 				default: {
 					offset.x = 0
 				}
 			}
-			w = minWidth
+			w = clampedW
 		}
 	} else {
 		offset.x = w
 		w = -w
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
@@ -67,26 +70,27 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.x = -minWidth
+					offset.x = -clampedW
 				}
 			}
 
-			w = minWidth
+			w = clampedW
 		}
 	}
 
 	if (h > 0) {
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
 				case 'top_right': {
-					offset.y = h - minHeight
+					offset.y = h - clampedH
 					break
 				}
 				case 'right':
 				case 'left': {
-					offset.y = (h - minHeight) / 2
+					offset.y = (h - clampedH) / 2
 					break
 				}
 				default: {
@@ -94,12 +98,13 @@ export function resizeBox<T extends TLBaseBoxShape>(
 				}
 			}
 
-			h = minHeight
+			h = clampedH
 		}
 	} else {
 		offset.y = h
 		h = -h
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
@@ -108,10 +113,10 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.y = -minHeight
+					offset.y = -clampedH
 				}
 			}
-			h = minHeight
+			h = clampedH
 		}
 	}
 
@@ -122,8 +127,8 @@ export function resizeBox<T extends TLBaseBoxShape>(
 		x,
 		y,
 		props: {
-			w: Math.min(maxWidth, w),
-			h: Math.min(maxHeight, h),
+			w,
+			h,
 		},
 	}
 }

package/src/lib/hooks/useCursor.ts

@@ -23,8 +23,9 @@ function getCursorCss(
 	const dx = 1 * c - 1 * s
 	const dy = 1 * s + 1 * c
 
+	// A raw '#' in the colour (hex) would end the unencoded data url as a fragment.
 	return (
-		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${color};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
+		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${encodeURIComponent(color)};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
 			r + tr
 		} 16 16)${f ? ` scale(-1,-1) translate(0, -32)` : ''}' filter='url(%23shadow)'>` +
 		svg.replaceAll(`"`, `'`) +
@@ -32,7 +33,8 @@ function getCursorCss(
 	)
 }
 
-const STATIC_CURSORS = [
+// Cursors that map straight to a prerendered `--tl-cursor-*` css variable rather than a runtime svg.
+const STATIC_CURSORS = new Set<TLCursorType>([
 	'default',
 	'pointer',
 	'cross',
@@ -43,11 +45,14 @@ const STATIC_CURSORS = [
 	'text',
 	'zoom-in',
 	'zoom-out',
-]
+	'rotate',
+	'resize-edge',
+	'resize-corner',
+])
 
 type CursorFunction = (rotation: number, flip: boolean, color: string) => string
 
-const CURSORS: Record<TLCursorType, CursorFunction> = {
+const DYNAMIC_CURSORS: Record<TLCursorType, CursorFunction> = {
 	none: () => 'none',
 	'ew-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 0, f, c),
 	'ns-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 90, f, c),
@@ -61,7 +66,8 @@ const CURSORS: Record<TLCursorType, CursorFunction> = {
 
 /** @public */
 export function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {
-	return CURSORS[cursor](radiansToDegrees(rotation), false, color)
+	if (STATIC_CURSORS.has(cursor)) return `var(--tl-cursor-${cursor})`
+	return DYNAMIC_CURSORS[cursor](radiansToDegrees(rotation), false, color)
 }
 
 export function useCursor() {
@@ -73,8 +79,9 @@ export function useCursor() {
 		() => {
 			const { type, rotation } = editor.getInstanceState().cursor
 
-			if (STATIC_CURSORS.includes(type)) {
-				container.style.setProperty('--tl-cursor', `var(--tl-cursor-${type})`)
+			// Static cursors don't need the theme colour, so skip reading it to avoid depending on it.
+			if (STATIC_CURSORS.has(type)) {
+				container.style.setProperty('--tl-cursor', getCursor(type))
 				return
 			}
 

package/src/lib/hooks/useDocumentEvents.ts

@@ -18,6 +18,10 @@ export function useDocumentEvents() {
 	// blur release below needs the key remembered per code.
 	const heldKeysRef = useRef(new Map<string, string>())
 
+	// Non-modifier keys pressed while Meta was down. macOS never delivers their keyup, so
+	// `inputs.keys` would count them as held for good; see the Meta branch in `handleKeyUp`.
+	const keysPressedWithMetaRef = useRef(new Set<string>())
+
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
 	useEffect(() => {
 		if (!container) return
@@ -217,6 +221,12 @@ export function useDocumentEvents() {
 			}
 
 			heldKeysRef.current.set(e.code, e.key)
+			// Only a fresh press counts. A key held from before Meta went down keeps auto-
+			// repeating, and those repeats carry `metaKey` too, which would make it look like
+			// it was pressed during the Meta window.
+			if (!e.repeat && e.metaKey && !MODIFIER_CODES.has(e.code)) {
+				keysPressedWithMetaRef.current.add(e.code)
+			}
 			editor.dispatch(info)
 		}
 
@@ -232,6 +242,13 @@ export function useDocumentEvents() {
 				return
 			}
 
+			// The native `metaKey` is still true on Meta's own keyup. Reported as-is it matches
+			// neither branch of the editor's modifier handling - which ignores `metaKey` on a
+			// key_up, then only arms the 150ms release when it reads false - so a cmd tap left
+			// `getMetaKey()` true until some later event happened to say otherwise.
+			const isMetaRelease = e.code === 'MetaLeft' || e.code === 'MetaRight'
+			const metaKey = isMetaRelease ? false : e.metaKey
+
 			const info: TLKeyboardEventInfo = {
 				type: 'keyboard',
 				name: 'key_up',
@@ -239,13 +256,32 @@ export function useDocumentEvents() {
 				code: e.code,
 				shiftKey: e.shiftKey,
 				altKey: e.altKey,
-				ctrlKey: e.metaKey || e.ctrlKey,
-				metaKey: e.metaKey,
-				accelKey: isAccelKey(e),
+				ctrlKey: metaKey || e.ctrlKey,
+				metaKey,
+				accelKey: isAccelKey({ ctrlKey: e.ctrlKey, metaKey }),
 			}
 
 			heldKeysRef.current.delete(e.code)
+			keysPressedWithMetaRef.current.delete(e.code)
 			editor.dispatch(info)
+
+			// macOS swallows the keyup of a non-modifier key pressed while Meta is held, so a
+			// stuck ArrowUp from Cmd+ArrowUp made every later arrow nudge diagonally: the nudge
+			// sums all held arrows. Anything held from before the Meta window still gets its
+			// own keyup, so only drop what was pressed inside it. That is still one too many -
+			// the key you are *still* holding is not owed anything - and the key_repeat case
+			// in `Editor.dispatch` is what takes that one back.
+			//
+			// Drop them rather than replaying a key_up: a tool's onKeyUp is a real action at
+			// the wrong moment, and a synthetic Enter re-entered shape editing and stole the
+			// focus that cmd+Enter's a11y action had just put on the style toolbar.
+			if (isMetaRelease) {
+				for (const code of keysPressedWithMetaRef.current) {
+					editor.inputs.keys.delete(code)
+					heldKeysRef.current.delete(code)
+				}
+				keysPressedWithMetaRef.current.clear()
+			}
 		}
 
 		function handleTouchStart(e: TouchEvent) {
@@ -334,6 +370,7 @@ export function useDocumentEvents() {
 				})
 			}
 			heldKeys.clear()
+			keysPressedWithMetaRef.current.clear()
 		}
 
 		win.addEventListener('blur', handleWindowBlur)
@@ -343,6 +380,17 @@ export function useDocumentEvents() {
 	}, [editor])
 }
 
+const MODIFIER_CODES = new Set([
+	'ShiftLeft',
+	'ShiftRight',
+	'AltLeft',
+	'AltRight',
+	'ControlLeft',
+	'ControlRight',
+	'MetaLeft',
+	'MetaRight',
+])
+
 function areShortcutsDisabled(editor: Editor) {
 	return (
 		editor.menus.hasOpenMenus() ||

package/src/lib/license/LicenseManager.test.ts

@@ -678,6 +678,226 @@ describe('LicenseManager', () => {
 		)
 	})
 
+	describe('Canonical tldraw hosts', () => {
+		let fetchSpy: ReturnType<typeof vi.fn>
+
+		beforeEach(() => {
+			process.env.NODE_ENV = 'production'
+			fetchSpy = vi.fn(() => Promise.resolve(new Response()))
+			vi.stubGlobal('fetch', fetchSpy)
+		})
+
+		afterEach(() => {
+			vi.unstubAllGlobals()
+			process.env.NODE_ENV = 'test'
+		})
+
+		// The shared licenseManager was built against jsdom's localhost default, so it's in dev mode.
+		// Build one on the host itself so these run the constructor path a real page on our domains
+		// takes: production dev detection, license state, feature flags and the tracking ping.
+		async function createManagerOnHost(url: string, licenseKey = '') {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(url)
+
+			const manager = new LicenseManager(licenseKey, keyPair.publicKey)
+			await vi.waitFor(() => expect(manager.state.get()).not.toBe('pending'))
+			return manager
+		}
+
+		it('Licenses tldraw-owned hosts with a watermark when no key is provided', async () => {
+			const hosts = [
+				'https://tldraw.com',
+				'https://www.tldraw.com',
+				'https://makereal.tldraw.com',
+				'https://tldraw.dev',
+				'https://staging.tldraw.dev',
+				'https://preview.tldraw.club',
+				'https://fairies.tldraw.workers.dev',
+				'https://teach.tldraw.xyz',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(manager.isDevelopment).toBe(false)
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: true,
+					isDomainValid: true,
+					isLicensedWithWatermark: true,
+					isCollaborationEnabled: true,
+					isCommentingEnabled: true,
+					isAnnualLicenseExpired: false,
+					isPerpetualLicenseExpired: false,
+					daysSinceExpiry: 0,
+				})
+				expect(manager.state.get()).toBe('licensed-with-watermark')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: true, commenting: true })
+				manager.dispose()
+			}
+		})
+
+		it('Does not license hosts that merely look like ours', async () => {
+			const hosts = [
+				'https://nottldraw.com',
+				'https://tldraw.com.example.com',
+				'https://eviltldraw.dev',
+				'https://tldraw.co',
+				'https://tldraw.workers.dev.example.com',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: false,
+					reason: 'no-key-provided',
+				})
+				expect(manager.state.get()).toBe('unlicensed-production')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: false, commenting: false })
+				manager.dispose()
+			}
+		})
+
+		it('Licenses our VS Code extension webview when no key is provided', async () => {
+			const manager = await createManagerOnHost(
+				'vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron'
+			)
+
+			expect(await manager.getLicenseFromKey('')).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: true,
+				isLicensedWithWatermark: true,
+			})
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			manager.dispose()
+		})
+
+		it('Does not license other VS Code extension webviews', async () => {
+			const urls = [
+				'vscode-webview://abc/index.html?extensionId=evil-org.evil-vscode&x=tldraw-org.tldraw-vscode',
+				'vscode-webview://tldraw-org.tldraw-vscode/index.html?extensionId=evil-org.evil-vscode',
+			]
+
+			for (const url of urls) {
+				const manager = await createManagerOnHost(url)
+
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: false,
+					reason: 'no-key-provided',
+				})
+				manager.dispose()
+			}
+		})
+
+		it('Never sends a watermark tracking ping for our own domains', async () => {
+			const manager = await createManagerOnHost('https://makereal.tldraw.com')
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).not.toHaveBeenCalled()
+			manager.dispose()
+		})
+
+		it('Still tracks a real watermarked key on one of our domains', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify([
+					'a-real-key',
+					['*.tldraw.com'],
+					FLAGS.ANNUAL_LICENSE | FLAGS.WITH_WATERMARK,
+					expiryDate,
+				]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://makereal.tldraw.com', licenseKey)
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).toHaveBeenCalledTimes(1)
+			const trackUrl = new URL(fetchSpy.mock.calls[0][0] as string)
+			expect(trackUrl.searchParams.get('license_type')).toBe('with_watermark')
+			expect(trackUrl.searchParams.get('license_id')).toBe('a-real-key')
+			manager.dispose()
+		})
+
+		it('Lets an explicitly provided key win over the canonical-host grant', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify(['a-real-key', ['*.tldraw.com'], FLAGS.ANNUAL_LICENSE, expiryDate]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://tldraw.com', licenseKey)
+
+			const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+			expect(result.license.id).toBe('a-real-key')
+			expect(result.isLicensedWithWatermark).toBe(false)
+			expect(manager.state.get()).toBe('licensed')
+			manager.dispose()
+		})
+	})
+
+	describe('Tracked licenses', () => {
+		let fetchSpy: ReturnType<typeof vi.fn>
+
+		beforeEach(() => {
+			process.env.NODE_ENV = 'production'
+			fetchSpy = vi.fn(() => Promise.resolve(new Response()))
+			vi.stubGlobal('fetch', fetchSpy)
+		})
+
+		afterEach(() => {
+			vi.unstubAllGlobals()
+			process.env.NODE_ENV = 'test'
+		})
+
+		async function createManagerOnHost(url: string, flags: number) {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(url)
+
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify(['tracked-key', ['*'], flags, expiryDate]),
+				keyPair
+			)
+			const manager = new LicenseManager(licenseKey, keyPair.publicKey)
+			await vi.waitFor(() => expect(manager.state.get()).not.toBe('pending'))
+			return manager
+		}
+
+		it('Pings for a paid license with the tracked flag', async () => {
+			const manager = await createManagerOnHost(
+				'https://app.example.com',
+				FLAGS.ANNUAL_LICENSE | FLAGS.TRACKED
+			)
+
+			expect(manager.state.get()).toBe('licensed')
+			expect(fetchSpy).toHaveBeenCalledTimes(1)
+			const trackUrl = new URL(fetchSpy.mock.calls[0][0] as string)
+			expect(trackUrl.searchParams.get('license_type')).toBe('tracked')
+			expect(trackUrl.searchParams.get('license_id')).toBe('tracked-key')
+			expect(trackUrl.searchParams.get('sku')).toBe('annual')
+			expect(trackUrl.searchParams.get('url')).toBe('https://app.example.com/')
+			manager.dispose()
+		})
+
+		it('Does not ping for the same paid license without the tracked flag', async () => {
+			const manager = await createManagerOnHost('https://app.example.com', FLAGS.ANNUAL_LICENSE)
+
+			expect(manager.state.get()).toBe('licensed')
+			expect(fetchSpy).not.toHaveBeenCalled()
+			manager.dispose()
+		})
+
+		it('Does not ping for a tracked license in development', async () => {
+			const manager = await createManagerOnHost(
+				'http://localhost:3000',
+				FLAGS.ANNUAL_LICENSE | FLAGS.TRACKED
+			)
+
+			expect(fetchSpy).not.toHaveBeenCalled()
+			manager.dispose()
+		})
+	})
+
 	describe('License types and flags', () => {
 		it('Checks for internal license', async () => {
 			const internalLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)