tldraw 5.3.1 → 5.4.0-canary.042da660fa66

package/src/test/flatten.test.ts

@@ -0,0 +1,135 @@
+import {
+	AssetRecordType,
+	TLImageAsset,
+	TLShapeId,
+	TLShapePartial,
+	createShapeId,
+} from '@tldraw/editor'
+import { vi } from 'vitest'
+import { flattenShapesToImages } from '../lib/ui/hooks/useFlatten'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+let assetCount = 0
+
+function installFlattenMocks(target: TestEditor) {
+	// flattenShapesToImages calls editor.getSvgString and
+	// editor.getAssetForExternalContent. Mock both to bypass the real export
+	// pipeline (jsdom can't render SVGs and we don't need real pixels — these
+	// tests only care about which shapes end up in which group).
+	vi.spyOn(target, 'getSvgString').mockResolvedValue({
+		svg: '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"></svg>',
+		width: 10,
+		height: 10,
+		trimPadding: 0,
+	})
+	vi.spyOn(target, 'getAssetForExternalContent').mockImplementation(async () => {
+		const asset: TLImageAsset = {
+			id: AssetRecordType.createId(`flat-${assetCount++}`),
+			typeName: 'asset',
+			type: 'image',
+			props: {
+				w: 10,
+				h: 10,
+				name: 'asset.svg',
+				isAnimated: false,
+				mimeType: 'image/svg+xml',
+				src: 'data:image/svg+xml;base64,',
+			},
+			meta: {},
+		}
+		return asset
+	})
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	assetCount = 0
+	installFlattenMocks(editor)
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+const box = (id: TLShapeId, x: number, y: number, w = 50, h = 50): TLShapePartial => ({
+	id,
+	type: 'geo',
+	x,
+	y,
+	props: { w, h, fill: 'solid' },
+})
+
+function getImageShapeCount() {
+	return editor.getCurrentPageShapes().filter((s) => s.type === 'image').length
+}
+
+describe('flattenShapesToImages clustering', () => {
+	const expand = 64
+
+	it('groups shapes within the expand threshold into one image', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 30 < 2 * 64 expand, so the expanded boxes intersect
+		editor.createShapes([box(a, 0, 0), box(b, 80, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+
+	it('keeps shapes in separate images when their gap exceeds the expand threshold', async () => {
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		// gap of 200 > 2 * 64 expand, so the expanded boxes do not intersect
+		editor.createShapes([box(a, 0, 0), box(b, 250, 0)])
+
+		await flattenShapesToImages(editor, [a, b], expand)
+
+		expect(getImageShapeCount()).toBe(2)
+	})
+
+	it('merges all shapes into one group when a bridging shape connects them, independent of input order', async () => {
+		// Layout: A — gap — bridge — gap — C. A and C alone do not intersect
+		// each other's expanded bounds, but `bridge` sits in the middle and
+		// should pull them all into a single group regardless of where it
+		// appears in the list. The previous greedy pass would only merge
+		// `bridge` into the first group it touched, leaving C as a separate
+		// cluster when `bridge` came after C in the list — which made the
+		// result depend on selection order.
+		const a = createShapeId('a')
+		const bridge = createShapeId('bridge')
+		const c = createShapeId('c')
+
+		const orders: TLShapeId[][] = [
+			[a, bridge, c],
+			[a, c, bridge],
+			[bridge, a, c],
+			[c, bridge, a],
+		]
+
+		for (const order of orders) {
+			editor.dispose()
+			editor = new TestEditor()
+			assetCount = 0
+			installFlattenMocks(editor)
+			editor.createShapes([box(a, 0, 0), box(bridge, 100, 0), box(c, 200, 0)])
+
+			await flattenShapesToImages(editor, order, expand)
+
+			expect(getImageShapeCount(), `order ${order.join(',')}`).toBe(1)
+		}
+	})
+
+	it('uses a single Box.Common group when no expand value is provided', async () => {
+		// Two shapes far apart should still flatten to one image when called
+		// via the no-expand path (the default useFlatten() hook).
+		const a = createShapeId('a')
+		const b = createShapeId('b')
+		editor.createShapes([box(a, 0, 0), box(b, 1000, 0)])
+
+		await flattenShapesToImages(editor, [a, b])
+
+		expect(getImageShapeCount()).toBe(1)
+	})
+})

package/src/test/modifiers.test.ts

@@ -37,6 +37,110 @@ it('Ctrl Key', () => {
 	expect(editor.inputs.getCtrlKey()).toBe(false)
 })
 
+it('pointer down releases a modifier still in its debounce window', () => {
+	// Collect any synthetic key_up events fired when the release is flushed.
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	// Hold then release meta via pointer events; the release is debounced for 150ms.
+	editor.pointerMove(100, 100, { metaKey: true })
+	editor.pointerMove(100, 100, { metaKey: false })
+	expect(editor.inputs.getMetaKey()).toBe(true) // still held during the debounce window
+
+	// A new interaction starts with the key physically up: the lingering modifier
+	// should be released immediately (same path as the timer), including its
+	// synthetic key_up, without waiting for the timeout.
+	editor.pointerDown(100, 100, { metaKey: false })
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toEqual(['Meta'])
+
+	// The pending timer must have been cancelled, so advancing past it does nothing
+	// and doesn't fire the synthetic key_up a second time.
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toEqual(['Meta'])
+})
+
+it('pointer down releases every modifier still in its debounce window', () => {
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	editor.pointerMove(100, 100, { shiftKey: true, altKey: true, ctrlKey: true, metaKey: true })
+	editor.pointerMove(100, 100, { shiftKey: false, altKey: false, ctrlKey: false, metaKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+	expect(editor.inputs.getAltKey()).toBe(true)
+	expect(editor.inputs.getCtrlKey()).toBe(true)
+	expect(editor.inputs.getMetaKey()).toBe(true)
+
+	editor.pointerDown(100, 100, { shiftKey: false, altKey: false, ctrlKey: false, metaKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+
+	// Each flushed modifier fires its synthetic key_up so tools can react.
+	expect(keyUps).toEqual(expect.arrayContaining(['Shift', 'Alt', 'Ctrl', 'Meta']))
+	expect(keyUps).toHaveLength(4)
+
+	// All four timers were cancelled, so nothing flips back or fires again.
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.getAltKey()).toBe(false)
+	expect(editor.inputs.getCtrlKey()).toBe(false)
+	expect(editor.inputs.getMetaKey()).toBe(false)
+	expect(keyUps).toHaveLength(4)
+})
+
+it('pointer down clears stale key codes when flushing a debounced modifier', () => {
+	// A real key_down records the code, then the release is only seen via pointer
+	// flags (no keyboard key_up), so the code lingers in inputs.keys until flushed.
+	editor.keyDown('Shift')
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(true)
+
+	editor.pointerMove(100, 100, { shiftKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(true) // debounced, still counted as held
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(true) // code not yet cleared
+
+	// The pointer down flushes the debounce through the timer's path, which clears
+	// both the modifier atom and the stale code.
+	editor.pointerDown(100, 100, { shiftKey: false })
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.keys.has('ShiftLeft')).toBe(false)
+})
+
+it('does not re-release a modifier after its natural debounce timer fired', () => {
+	const keyUps: string[] = []
+	editor.on('event', (info) => {
+		if (info.type === 'keyboard' && info.name === 'key_up') keyUps.push(info.key)
+	})
+
+	// Hold then release shift via pointer events and let the 150ms timer fire on its
+	// own, which releases shift with a single synthetic key_up.
+	editor.pointerMove(100, 100, { shiftKey: true })
+	editor.pointerMove(100, 100, { shiftKey: false })
+	vi.advanceTimersByTime(200)
+	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(keyUps).toEqual(['Shift'])
+
+	// A later pointer down must not treat the already-fired timer as an active
+	// debounce and emit another synthetic key_up.
+	editor.pointerDown(100, 100, { shiftKey: false })
+	expect(keyUps).toEqual(['Shift'])
+})
+
+it('pointer down keeps a genuinely held modifier', () => {
+	// Shift is actually held during the pointer down (flag stays true), so it must
+	// not be cleared by the debounce-flush.
+	editor.pointerMove(100, 100, { shiftKey: true })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+	editor.pointerDown(100, 100, { shiftKey: true })
+	expect(editor.inputs.getShiftKey()).toBe(true)
+})
+
 it('keyboard events carry currently-held modifiers', () => {
 	const keyboardEvents: TLKeyboardEventInfo[] = []
 	editor.on('event', (info) => {

package/src/test/ui-outside-editor.test.tsx

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react'
+import { ContainerProvider, EditorProvider, useLicenseContext } from '@tldraw/editor'
+import { vi } from 'vitest'
+import { Tldraw } from '../lib/Tldraw'
+import { DefaultToolbar } from '../lib/ui/components/Toolbar/DefaultToolbar'
+import { TldrawUiContextProvider } from '../lib/ui/context/TldrawUiContextProvider'
+import { useCommentingEnabled } from '../lib/ui/hooks/useCommentingEnabled'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+// Default UI components can be mounted beside <Tldraw /> rather than inside it, wrapped in the
+// providers the caller recreates (container, editor, ui context). The license provider is not
+// among them — it only exists inside <TldrawEditor />.
+describe('default UI mounted outside <Tldraw />', () => {
+	it('renders the default toolbar and resolves license feature flags through the editor', async () => {
+		const { editor } = await renderTldrawComponentWithEditor(
+			(onMount) => <Tldraw onMount={onMount} components={{ Toolbar: null }} />,
+			{ waitForPatterns: true }
+		)
+
+		expect(editor.licenseManager).toBeDefined()
+
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		const result = render(
+			<ContainerProvider container={editor.getContainer()}>
+				<EditorProvider editor={editor}>
+					<TldrawUiContextProvider>
+						<DefaultToolbar />
+						<CommentingProbe />
+					</TldrawUiContextProvider>
+				</EditorProvider>
+			</ContainerProvider>
+		)
+
+		expect(await result.findByTestId('tools.select')).toBeTruthy()
+		// In tests the environment counts as development, where every feature is licensed — so a
+		// `true` here proves the flag resolved via the editor's license manager, not the
+		// fail-closed `false` of having no license manager at all.
+		expect(commentingEnabled).toBe(true)
+	})
+
+	it('license feature flags fail closed with no editor and no license context', () => {
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		render(<CommentingProbe />)
+
+		expect(commentingEnabled).toBe(false)
+	})
+
+	it('useLicenseContext throws when there is no license provider and no editor', () => {
+		function LicenseProbe() {
+			useLicenseContext()
+			return null
+		}
+
+		// silence React's error boundary logging for the expected throw
+		const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+		try {
+			expect(() => render(<LicenseProbe />)).toThrow(
+				'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components'
+			)
+		} finally {
+			consoleError.mockRestore()
+		}
+	})
+})

package/tldraw.css

@@ -3726,7 +3726,8 @@ tldraw? probably.
 	align-items: center;
 }
 
-.tlui-people-menu__user__color {
+.tlui-people-menu__user__color,
+.tlui-people-menu__user__edit {
 	flex-shrink: 0;
 }
 
@@ -3772,7 +3773,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item {
-	position: relative;
+	display: flex;
+	align-items: center;
 }
 
 .tlui-people-menu__item:last-of-type .tlui-button__menu {
@@ -3780,7 +3782,8 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__button {
-	padding: 0 11px;
+	padding-inline-start: 12px;
+	padding-inline-end: 0px;
 	overflow: hidden;
 }
 
@@ -3790,7 +3793,7 @@ tldraw? probably.
 	align-items: auto;
 	justify-content: flex-start;
 	flex-grow: 2;
-	gap: 11px;
+	gap: 12px;
 }
 
 .tlui-people-menu__name {
@@ -3801,18 +3804,9 @@ tldraw? probably.
 }
 
 .tlui-people-menu__item__follow {
-	position: absolute;
-	top: 0px;
-	inset-inline-end: 0px;
-	max-width: 40px;
 	flex-shrink: 0;
 }
 
-.tlui-people-menu__item[data-follow='true'],
-.tlui-people-menu__item:has(.tlui-button:focus-visible) {
-	padding-inline-end: 36px;
-}
-
 .tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
 .tlui-people-menu__item:has(.tlui-button:focus-visible) .tlui-people-menu__item__follow {
 	opacity: 1;
@@ -3823,9 +3817,6 @@ tldraw? probably.
 		opacity: 0;
 	}
 
-	.tlui-people-menu__item:hover {
-		padding-right: 36px;
-	}
 	.tlui-people-menu__item:hover .tlui-people-menu__item__follow {
 		opacity: 1;
 	}