tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/ui/ContextMenu.test.tsx

@@ -1,8 +1,11 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { createShapeId } from '@tldraw/editor'
+import { act, fireEvent, screen } from '@testing-library/react'
+import { createShapeId, tlenvReactive } from '@tldraw/editor'
 import { TLComponents, Tldraw } from '../../lib/Tldraw'
 import { DefaultContextMenu } from '../../lib/ui/components/ContextMenu/DefaultContextMenu'
-import { renderTldrawComponent } from '../testutils/renderTldrawComponent'
+import {
+	renderTldrawComponent,
+	renderTldrawComponentWithEditor,
+} from '../testutils/renderTldrawComponent'
 
 it('opens on right-click', async () => {
 	await renderTldrawComponent(
@@ -23,6 +26,146 @@ it('opens on right-click', async () => {
 	expect(screen.queryByTestId('context-menu')).toBeNull()
 })
 
+// A touch long-press (coarse pointer) opens the menu only in the select tool. In any
+// other tool the long-press belongs to that tool's gesture, so the menu stays closed.
+// The instance's isCoarsePointer is synced from tlenv, so flip that to simulate touch.
+describe('on a coarse pointer (touch long-press)', () => {
+	beforeEach(() => {
+		tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: true }))
+	})
+	afterEach(() => {
+		tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: false }))
+	})
+
+	it('opens the menu in the select tool', async () => {
+		await renderTldrawComponent(
+			<Tldraw
+				onMount={(editor) => {
+					editor.createShape({ id: createShapeId(), type: 'geo' })
+				}}
+			/>,
+			{ waitForPatterns: false }
+		)
+		const canvas = await screen.findByTestId('canvas')
+
+		fireEvent.contextMenu(canvas)
+		await screen.findByTestId('context-menu')
+	})
+
+	it.each([
+		'geo',
+		'note',
+		'line',
+		'text',
+		'arrow',
+		'frame',
+		'eraser',
+		'draw',
+		'highlight',
+		'laser',
+		'hand',
+		'zoom',
+	])('does not open the menu in the %s tool', async (tool) => {
+		await renderTldrawComponent(
+			<Tldraw
+				onMount={(editor) => {
+					editor.createShape({ id: createShapeId(), type: 'geo' })
+					editor.setCurrentTool(tool)
+				}}
+			/>,
+			{ waitForPatterns: false }
+		)
+		const canvas = await screen.findByTestId('canvas')
+
+		fireEvent.contextMenu(canvas)
+		expect(screen.queryByTestId('context-menu')).toBeNull()
+	})
+})
+
+// A right-click (fine pointer) opens the menu in any tool — the editor routes the
+// click through the select tool. Regression guard: gating on the tool instead of the
+// pointer type used to suppress this because the switch-to-select lagged the render.
+it.each(['select', 'geo', 'note', 'eraser', 'draw'])(
+	'opens on right-click in the %s tool',
+	async (tool) => {
+		await renderTldrawComponent(
+			<Tldraw
+				onMount={(editor) => {
+					editor.createShape({ id: createShapeId(), type: 'geo' })
+					editor.setCurrentTool(tool)
+				}}
+			/>,
+			{ waitForPatterns: false }
+		)
+		const canvas = await screen.findByTestId('canvas')
+
+		fireEvent.contextMenu(canvas)
+		await screen.findByTestId('context-menu')
+	}
+)
+
+it('right-click in a shape tool reveals shape actions (rightClickPanning off)', async () => {
+	// Regression for #8277: a right-click while a shape-creation tool is active
+	// should switch to the select tool and select the shape under the pointer
+	// *before* the menu opens, so the menu carries the full set of shape actions.
+	// With rightClickPanning off the native contextmenu fires on press, so the
+	// switch must complete synchronously on the pointer-down — this asserts the
+	// switch beats the menu.
+	const id = createShapeId()
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => (
+			<Tldraw
+				options={{ rightClickPanning: false }}
+				onMount={(editor) => {
+					editor.createShape({
+						id,
+						type: 'geo',
+						x: 0,
+						y: 0,
+						props: { w: 100, h: 100, geo: 'rectangle' },
+					})
+					editor.setCurrentTool('geo')
+					onMount(editor)
+				}}
+			/>
+		),
+		{ waitForPatterns: false }
+	)
+
+	const canvas = await screen.findByTestId('canvas')
+
+	// right-click over the shape: the button-2 pointer-down dispatches a
+	// `right_click`, which the geo tool's idle routes through the select tool.
+	act(() => {
+		editor.dispatch({
+			type: 'pointer',
+			name: 'pointer_down',
+			target: 'canvas',
+			point: { x: 50, y: 50, z: 0.5 },
+			pointerId: 1,
+			button: 2,
+			isPen: false,
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		})
+	})
+
+	// the switch beats the menu: select is active and the shape is selected
+	// before the contextmenu event is ever handled
+	expect(editor.getCurrentToolId()).toBe('select')
+	expect(editor.getSelectedShapeIds()).toEqual([id])
+
+	fireEvent.contextMenu(canvas)
+	await screen.findByTestId('context-menu')
+	// shape actions are present because the shape is selected
+	await screen.findByTestId('context-menu.cut')
+	await screen.findByTestId('context-menu.copy')
+	await screen.findByTestId('context-menu.delete')
+})
+
 it('tunnels context menu', async () => {
 	const components: TLComponents = {
 		ContextMenu: (props) => {

package/src/test/ui/Dialogs.test.tsx

@@ -0,0 +1,256 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { Select as _Select } from 'radix-ui'
+import { TLComponents, Tldraw } from '../../lib/Tldraw'
+import { useDialogs } from '../../lib/ui/context/dialogs'
+import { renderTldrawComponent } from '../testutils/renderTldrawComponent'
+
+// jsdom doesn't implement scrollIntoView, which Radix Select calls when it opens.
+Element.prototype.scrollIntoView ??= () => {}
+
+function DialogWithSelect({ onClose }: { onClose(): void }) {
+	return (
+		<div data-testid="dialog-inner">
+			<_Select.Root defaultValue="a">
+				<_Select.Trigger data-testid="select-trigger">
+					<_Select.Value />
+				</_Select.Trigger>
+				<_Select.Portal>
+					<_Select.Content data-testid="select-content">
+						<_Select.Viewport>
+							<_Select.Item value="a" data-testid="select-a">
+								<_Select.ItemText>A</_Select.ItemText>
+							</_Select.Item>
+							<_Select.Item value="b" data-testid="select-b">
+								<_Select.ItemText>B</_Select.ItemText>
+							</_Select.Item>
+						</_Select.Viewport>
+					</_Select.Content>
+				</_Select.Portal>
+			</_Select.Root>
+			<button data-testid="dialog-close" onClick={onClose}>
+				Close
+			</button>
+		</div>
+	)
+}
+
+function OpenDialogButton({ preventBackgroundClose }: { preventBackgroundClose?: boolean }) {
+	const { addDialog } = useDialogs()
+	return (
+		<button
+			data-testid="open-dialog"
+			onClick={() => addDialog({ component: DialogWithSelect, preventBackgroundClose })}
+		>
+			open
+		</button>
+	)
+}
+
+// A confirm-style dialog opened from inside another dialog (e.g. the dotcom workspace
+// settings dialog's regenerate/leave/delete confirmations).
+function NestedConfirmDialog({ onClose }: { onClose(): void }) {
+	return (
+		<div data-testid="nested-dialog">
+			<button data-testid="nested-confirm" onClick={onClose}>
+				Confirm
+			</button>
+		</div>
+	)
+}
+
+function DialogThatOpensNested({ onClose }: { onClose(): void }) {
+	const { addDialog } = useDialogs()
+	return (
+		<div data-testid="parent-dialog">
+			<button
+				data-testid="open-nested"
+				onClick={() => addDialog({ component: NestedConfirmDialog })}
+			>
+				open nested
+			</button>
+			<button data-testid="parent-close" onClick={onClose}>
+				Close
+			</button>
+		</div>
+	)
+}
+
+function OpenParentDialogButton() {
+	const { addDialog } = useDialogs()
+	return (
+		<button
+			data-testid="open-parent"
+			onClick={() => addDialog({ component: DialogThatOpensNested })}
+		>
+			open parent
+		</button>
+	)
+}
+
+function renderWithParentDialog() {
+	const components: TLComponents = {
+		SharePanel: () => <OpenParentDialogButton />,
+	}
+	return renderTldrawComponent(<Tldraw components={components} />, { waitForPatterns: false })
+}
+
+function renderWithDialog(opts: { preventBackgroundClose?: boolean } = {}) {
+	const components: TLComponents = {
+		SharePanel: () => <OpenDialogButton preventBackgroundClose={opts.preventBackgroundClose} />,
+	}
+	return renderTldrawComponent(<Tldraw components={components} />, { waitForPatterns: false })
+}
+
+// A full press on the dialog backdrop. Radix dismisses on pointer-down, but we fire the
+// whole sequence so a layer-blind click handler (the bug this guards against) would be caught.
+function pressBackdrop() {
+	const el = document.querySelector('.tlui-dialog__positioner')
+	if (!el) throw new Error('dialog positioner (backdrop) not found')
+	fireEvent.pointerDown(el, { pointerType: 'mouse' })
+	fireEvent.pointerUp(el, { pointerType: 'mouse' })
+	fireEvent.click(el)
+}
+
+// Press the backdrop of the topmost dialog (the last positioner in the DOM) — used when
+// dialogs are stacked, so the press lands on the layer that should dismiss first.
+function pressTopBackdrop() {
+	const positioners = document.querySelectorAll('.tlui-dialog__positioner')
+	const el = positioners[positioners.length - 1]
+	if (!el) throw new Error('dialog positioner (backdrop) not found')
+	fireEvent.pointerDown(el, { pointerType: 'mouse' })
+	fireEvent.pointerUp(el, { pointerType: 'mouse' })
+	fireEvent.click(el)
+}
+
+it('dismisses a select opened inside a modal before the modal itself', async () => {
+	await renderWithDialog()
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	// Open the select.
+	fireEvent.pointerDown(screen.getByTestId('select-trigger'), { button: 0, pointerType: 'mouse' })
+	await screen.findByTestId('select-content')
+
+	// A press on the dialog backdrop closes only the select; the dialog stays open.
+	pressBackdrop()
+	expect(screen.queryByTestId('select-content')).toBeNull()
+	expect(screen.queryByTestId('dialog-inner')).not.toBeNull()
+
+	// A second press on the backdrop then closes the dialog.
+	pressBackdrop()
+	expect(screen.queryByTestId('dialog-inner')).toBeNull()
+})
+
+it('dismisses a normal dialog on a backdrop press', async () => {
+	await renderWithDialog()
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	pressBackdrop()
+	expect(screen.queryByTestId('dialog-inner')).toBeNull()
+})
+
+it('does not dismiss when a press starts inside the content and ends on the backdrop', async () => {
+	await renderWithDialog()
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	// A press that starts inside the content (e.g. selecting text)...
+	fireEvent.pointerDown(screen.getByTestId('dialog-inner'), { pointerType: 'mouse' })
+	// ...and is released on the backdrop should not dismiss the dialog, since Radix
+	// dismisses on pointer-down and the press began inside the content.
+	const el = document.querySelector('.tlui-dialog__positioner')!
+	fireEvent.pointerUp(el, { pointerType: 'mouse' })
+	fireEvent.click(el)
+
+	expect(screen.queryByTestId('dialog-inner')).not.toBeNull()
+})
+
+it('dismisses a dialog on escape', async () => {
+	await renderWithDialog()
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('dialog-inner')).toBeNull()
+})
+
+it('escape dismisses one stacked layer at a time: the select first, then the dialog', async () => {
+	await renderWithDialog()
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	fireEvent.pointerDown(screen.getByTestId('select-trigger'), { button: 0, pointerType: 'mouse' })
+	await screen.findByTestId('select-content')
+
+	// The first escape closes only the select (the topmost layer); the dialog stays.
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('select-content')).toBeNull()
+	expect(screen.queryByTestId('dialog-inner')).not.toBeNull()
+
+	// The second escape then closes the dialog.
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('dialog-inner')).toBeNull()
+})
+
+it('keeps a preventBackgroundClose dialog open on a backdrop press but still closes on escape', async () => {
+	await renderWithDialog({ preventBackgroundClose: true })
+
+	fireEvent.click(screen.getByTestId('open-dialog'))
+	await screen.findByTestId('dialog-inner')
+
+	// A backdrop press is ignored...
+	pressBackdrop()
+	expect(screen.queryByTestId('dialog-inner')).not.toBeNull()
+
+	// ...but escape still dismisses the dialog.
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('dialog-inner')).toBeNull()
+})
+
+it('backdrop presses dismiss stacked dialogs one layer at a time', async () => {
+	await renderWithParentDialog()
+
+	fireEvent.click(screen.getByTestId('open-parent'))
+	await screen.findByTestId('parent-dialog')
+
+	fireEvent.click(screen.getByTestId('open-nested'))
+	await screen.findByTestId('nested-dialog')
+
+	// Opening the nested dialog (which stacks on top and grabs focus) must not dismiss
+	// the parent — the dialogs stack rather than collapsing together.
+	expect(screen.queryByTestId('parent-dialog')).not.toBeNull()
+
+	// A backdrop press closes only the topmost (nested) dialog; the parent stays open.
+	pressTopBackdrop()
+	expect(screen.queryByTestId('nested-dialog')).toBeNull()
+	expect(screen.queryByTestId('parent-dialog')).not.toBeNull()
+
+	// A second backdrop press then closes the parent.
+	pressTopBackdrop()
+	expect(screen.queryByTestId('parent-dialog')).toBeNull()
+})
+
+it('escape dismisses a nested dialog before its parent', async () => {
+	await renderWithParentDialog()
+
+	fireEvent.click(screen.getByTestId('open-parent'))
+	await screen.findByTestId('parent-dialog')
+
+	fireEvent.click(screen.getByTestId('open-nested'))
+	await screen.findByTestId('nested-dialog')
+
+	// The first escape closes only the nested dialog; the parent stays.
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('nested-dialog')).toBeNull()
+	expect(screen.queryByTestId('parent-dialog')).not.toBeNull()
+
+	// The second escape then closes the parent.
+	fireEvent.keyDown(document.body, { key: 'Escape' })
+	expect(screen.queryByTestId('parent-dialog')).toBeNull()
+})

package/src/test/ui/copyHoveredStyles.test.tsx

@@ -0,0 +1,154 @@
+import { act } from '@testing-library/react'
+import { Box, DefaultColorStyle, Editor, createShapeId } from '@tldraw/editor'
+import { useEffect } from 'react'
+import { Tldraw } from '../../lib/Tldraw'
+import { TLUiActionsContextType, useActions } from '../../lib/ui/context/actions'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+function ActionCapturer({ onCapture }: { onCapture(actions: TLUiActionsContextType): void }) {
+	const actions = useActions()
+	useEffect(() => {
+		onCapture(actions)
+	}, [actions, onCapture])
+	return null
+}
+
+// Move the pointer so the editor's current page point is over a given location. The
+// copy-hovered-styles action hit-tests this point, which also drills into groups.
+function movePointerTo(editor: Editor, x: number, y: number) {
+	act(() => {
+		editor.dispatch({
+			type: 'pointer',
+			target: 'canvas',
+			name: 'pointer_move',
+			point: { x, y },
+			pointerId: 1,
+			button: 0,
+			isPen: false,
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		})
+		editor.emit('tick', 16)
+	})
+}
+
+async function setup() {
+	let actions: TLUiActionsContextType | null = null
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => (
+			<Tldraw onMount={onMount}>
+				<ActionCapturer onCapture={(a) => (actions = a)} />
+			</Tldraw>
+		),
+		{ waitForPatterns: false }
+	)
+
+	// The action hit-tests rendering shapes, so give the editor a real viewport.
+	act(() => {
+		editor.updateViewportScreenBounds(new Box(0, 0, 1000, 800))
+	})
+
+	return { editor, copyHoveredStyles: actions!['copy-hovered-styles'] }
+}
+
+describe('copy-hovered-styles action', () => {
+	it('copies styles from the shape under the pointer in any tool idle state', async () => {
+		const { editor, copyHoveredStyles } = await setup()
+
+		const redId = createShapeId()
+		editor.createShapes([
+			{
+				id: redId,
+				type: 'geo',
+				x: 0,
+				y: 0,
+				props: { w: 100, h: 100, color: 'red', fill: 'solid' },
+			},
+		])
+
+		// Point at the red shape.
+		movePointerTo(editor, 50, 50)
+
+		// From the select tool's idle state, the red shape's color is copied to the next shape.
+		editor.setStyleForNextShapes(DefaultColorStyle, 'black')
+		editor.setCurrentTool('select.idle')
+		expect(editor.getPath()).toBe('select.idle')
+		await copyHoveredStyles.onSelect('kbd')
+		expect(editor.getStyleForNextShape(DefaultColorStyle)).toBe('red')
+
+		// It also runs from another tool's idle state, like geo.idle.
+		editor.setStyleForNextShapes(DefaultColorStyle, 'black')
+		editor.setCurrentTool('geo')
+		expect(editor.getPath()).toBe('geo.idle')
+		await copyHoveredStyles.onSelect('kbd')
+		expect(editor.getStyleForNextShape(DefaultColorStyle)).toBe('red')
+	})
+
+	it('does nothing when the tool is not in an idle state', async () => {
+		const { editor, copyHoveredStyles } = await setup()
+
+		const redId = createShapeId()
+		editor.createShapes([
+			{
+				id: redId,
+				type: 'geo',
+				x: 0,
+				y: 0,
+				props: { w: 100, h: 100, color: 'red', fill: 'solid' },
+			},
+		])
+
+		movePointerTo(editor, 50, 50)
+
+		// Brushing is not an idle state, so the action is a no-op.
+		editor.setStyleForNextShapes(DefaultColorStyle, 'black')
+		editor.setCurrentTool('select.brushing')
+		expect(editor.getPath()).toBe('select.brushing')
+		await copyHoveredStyles.onSelect('kbd')
+		expect(editor.getStyleForNextShape(DefaultColorStyle)).toBe('black')
+	})
+
+	it('copies styles from the child under the cursor when pointing inside a group', async () => {
+		const { editor, copyHoveredStyles } = await setup()
+
+		const redId = createShapeId()
+		const blueId = createShapeId()
+		editor.createShapes([
+			{
+				id: redId,
+				type: 'geo',
+				x: 0,
+				y: 0,
+				props: { w: 100, h: 100, color: 'red', fill: 'solid' },
+			},
+			{
+				id: blueId,
+				type: 'geo',
+				x: 200,
+				y: 0,
+				props: { w: 100, h: 100, color: 'blue', fill: 'solid' },
+			},
+		])
+		editor.setSelectedShapes([redId, blueId])
+		editor.groupShapes(editor.getSelectedShapeIds())
+		const groupId = editor.getOnlySelectedShapeId()!
+		expect(editor.isShapeOfType(editor.getShape(groupId)!, 'group')).toBe(true)
+		editor.selectNone()
+		editor.setCurrentTool('select.idle')
+
+		// The whole group is highlighted, but the hit test drills into it: pointing at the
+		// red child copies red, and pointing at the blue child copies blue.
+		editor.setStyleForNextShapes(DefaultColorStyle, 'black')
+		movePointerTo(editor, 50, 50)
+		await copyHoveredStyles.onSelect('kbd')
+		expect(editor.getStyleForNextShape(DefaultColorStyle)).toBe('red')
+
+		editor.setStyleForNextShapes(DefaultColorStyle, 'black')
+		movePointerTo(editor, 250, 50)
+		await copyHoveredStyles.onSelect('kbd')
+		expect(editor.getStyleForNextShape(DefaultColorStyle)).toBe('blue')
+	})
+})