Permit drag out of toolbar (tldraw#4793)

steveruizok · MitjaBezensek · SomeHats · web-flow · commit 0e0fb8bde89d · 2025-07-31T14:35:32.000Z
This PR adds the ability to drag tools out of the toolbar and onto the canvas. ![Kapture 2024-10-26 at 11 11 44](https://github.com/user-attachments/assets/fc1bd904-4174-4a65-87d4-43eddf510ed4) ## Interaction notes A user should be able to interact with the toolbar items in a few ways: 1. Click on the item to select the tool / activate its `onSelect` (on touch start or pointer up). 2. Click and drag to create the shape, begin translating, and display the tool as active; then drop to create the shape and in the case of text and notes begin editing it 3. Click and drag and press Escape to cancel ## Implementation This is very rough and involves a lot of duplication. It's not entirely clear to me what the right API here is, so **I'd love to get some input** on what we could do to make things easier. Some open questions: 1. Should we abstract the "create on drag start" behavior, or provide better information (ie the current page position) as the parameters to that callback? What about behaviors like "select and start editing after drag end"? 2. Is it the right idea to move the pointer move event to the container, so that it occurs in front of the UI? ## Testing Since this technically occurs at the UI layer, we'd have to write e2e tests to verify that things are working the way we expect them to. ### Change type - [x] `improvement` ### Test plan 1. Drag tools from the toolbar onto the canvas. 1. Drag tools from the toolbar overflow menu onto the canvas. ### Release notes - Adds the ability to drag shapes from the toolbar onto the canvas. ### API changes - Adds `onDragFromToolbarToCreateShape`, `OnDragFromToolbarToCreateShapesOpts`, and `onDragStart` on `TldrawUiMenuItem` to facilitate dragging shapes out of a toolbar --------- Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com> Co-authored-by: alex <alex@dytry.ch> Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
diff --git a/apps/examples/e2e/tests/fixtures/menus/Toolbar.ts b/apps/examples/e2e/tests/fixtures/menus/Toolbar.ts
@@ -17,12 +17,12 @@ export class Toolbar {
 		this.tools = {
 			select: this.page.getByTestId('tools.select'),
 			draw: this.page.getByTestId('tools.draw'),
+			text: this.page.getByTestId('tools.text'),
 			arrow: this.page.getByTestId('tools.arrow'),
 			cloud: this.page.getByTestId('tools.cloud'),
 			eraser: this.page.getByTestId('tools.eraser'),
 			rectangle: this.page.getByTestId('tools.rectangle'),
 			hand: this.page.getByTestId('tools.hand'),
-			text: this.page.getByTestId('tools.text'),
 		}
 		this.popOverTools = {
 			popoverCloud: this.page.getByTestId('tools.more.cloud'),
diff --git a/apps/examples/e2e/tests/test-toolbar.spec.ts b/apps/examples/e2e/tests/test-toolbar.spec.ts
@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
-import { setup } from '../shared-e2e'
+import { sleep } from 'tldraw'
+import { getAllShapeTypes, setup } from '../shared-e2e'
 import test from './fixtures/fixtures'
 
 test.describe('when selecting a tool from the toolbar', () => {
@@ -36,3 +37,106 @@ test.describe('when selecting a tool from the toolbar', () => {
 		})
 	})
 })
+
+test.describe('when dragging a tool from the toolbar', () => {
+	test.beforeEach(setup)
+
+	test('dragging from main toolbar creates and positions shapes', async ({
+		page,
+		toolbar,
+		isMobile,
+	}) => {
+		if (isMobile) return
+
+		const { rectangle, arrow, text } = toolbar.tools
+
+		await test.step('dragging rectangle tool creates a rectangle', async () => {
+			const startPoint = { x: 100, y: 100 }
+			const endPoint = { x: 200, y: 200 }
+
+			// Start dragging from the rectangle tool
+			await rectangle.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a rectangle was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(1)
+			expect(shapes).toContain('geo')
+		})
+
+		await sleep(100)
+
+		await test.step('dragging arrow tool creates an arrow', async () => {
+			const startPoint = { x: 300, y: 100 }
+			const endPoint = { x: 400, y: 200 }
+
+			// Start dragging from the arrow tool
+			await arrow.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify an arrow was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(2)
+			expect(shapes).toContain('geo')
+			expect(shapes).toContain('arrow')
+		})
+
+		await sleep(100)
+
+		await test.step('dragging text tool creates editable text', async () => {
+			const startPoint = { x: 500, y: 100 }
+			const endPoint = { x: 600, y: 200 }
+
+			// Start dragging from the text tool
+			await text.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a text shape was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(3)
+			expect(shapes).toContain('geo')
+			expect(shapes).toContain('arrow')
+			expect(shapes).toContain('text')
+
+			// Verify text is in edit mode
+			const hasTextInputFocused = await page.evaluate(() => {
+				return document.activeElement?.classList.contains('tiptap')
+			})
+			expect(hasTextInputFocused).toBe(true)
+		})
+	})
+
+	test('dragging from overflow toolbar creates shapes', async ({ page, toolbar }) => {
+		// Open the overflow menu
+		await toolbar.moreToolsButton.click()
+		await expect(toolbar.moreToolsPopover).toBeVisible()
+
+		const { popoverCloud } = toolbar.popOverTools
+
+		await test.step('dragging cloud tool from overflow creates a cloud', async () => {
+			const startPoint = { x: 100, y: 100 }
+			const endPoint = { x: 200, y: 200 }
+
+			// Start dragging from the cloud tool in overflow
+			await popoverCloud.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a cloud shape was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(1)
+			expect(shapes).toContain('geo')
+		})
+	})
+})
diff --git a/packages/editor/src/lib/TldrawEditor.tsx b/packages/editor/src/lib/TldrawEditor.tsx
@@ -1,9 +1,9 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
-import { Required, annotateError } from '@tldraw/utils'
+import { annotateError, Required } from '@tldraw/utils'
 import React, {
-	ReactNode,
 	memo,
+	ReactNode,
 	useCallback,
 	useEffect,
 	useLayoutEffect,
@@ -15,13 +15,13 @@ import React, {
 
 import classNames from 'classnames'
 import { version } from '../version'
-import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
-import { TLEditorSnapshot } from './config/TLEditorSnapshot'
+import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { TLStoreBaseOptions } from './config/createTLStore'
-import { TLUser, createTLUser } from './config/createTLUser'
+import { createTLUser, TLUser } from './config/createTLUser'
 import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
+import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
diff --git a/packages/editor/src/lib/components/MenuClickCapture.tsx b/packages/editor/src/lib/components/MenuClickCapture.tsx
@@ -50,12 +50,6 @@ export function MenuClickCapture() {
 			// Do nothing unless we're pointing
 			if (!rPointerState.current.isDown) return
 
-			// If we're already dragging, pass on the event as it is
-			if (rPointerState.current.isDragging) {
-				canvasEvents.onPointerMove?.(e)
-				return
-			}
-
 			if (
 				// We're pointing, but are we dragging?
 				Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
@@ -75,8 +69,6 @@ export function MenuClickCapture() {
 					clientY: y,
 					button: 0,
 				})
-				// call the pointer move with the current pointer position
-				canvasEvents.onPointerMove?.(e)
 			}
 		},
 		[canvasEvents, editor]
diff --git a/packages/editor/src/lib/hooks/useCanvasEvents.ts b/packages/editor/src/lib/hooks/useCanvasEvents.ts
@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
 	preventDefault,
@@ -16,9 +16,6 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
-			// Track the last screen point
-			let lastX: number, lastY: number
-
 			function onPointerDown(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 
@@ -44,35 +41,9 @@ export function useCanvasEvents() {
 				})
 			}
 
-			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
-
-				if (e.clientX === lastX && e.clientY === lastY) return
-				lastX = e.clientX
-				lastY = e.clientY
-
-				// For tools that benefit from a higher fidelity of events,
-				// we dispatch the coalesced events.
-				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
-				const events =
-					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
-						? e.nativeEvent.getCoalescedEvents()
-						: [e]
-				for (const singleEvent of events) {
-					editor.dispatch({
-						type: 'pointer',
-						target: 'canvas',
-						name: 'pointer_move',
-						...getPointerInfo(singleEvent),
-					})
-				}
-			}
-
 			function onPointerUp(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
-				lastX = e.clientX
-				lastY = e.clientY
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -158,7 +129,6 @@ export function useCanvasEvents() {
 
 			return {
 				onPointerDown,
-				onPointerMove,
 				onPointerUp,
 				onPointerEnter,
 				onPointerLeave,
@@ -169,8 +139,45 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor, currentTool]
+		[editor]
 	)
 
+	// onPointerMove is special: where we're only interested in the other events when they're
+	// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want
+	// the pointer position to be up to date regardless of whether it's over the tldraw canvas or
+	// not. So instead of returning a listener to be attached to the canvas, we directly attach a
+	// listener to the whole document instead.
+	useEffect(() => {
+		let lastX: number, lastY: number
+
+		function onPointerMove(e: PointerEvent) {
+			if ((e as any).isKilled) return
+			;(e as any).isKilled = true
+
+			if (e.clientX === lastX && e.clientY === lastY) return
+			lastX = e.clientX
+			lastY = e.clientY
+
+			// For tools that benefit from a higher fidelity of events,
+			// we dispatch the coalesced events.
+			// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+			const events =
+				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
+			for (const singleEvent of events) {
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_move',
+					...getPointerInfo(singleEvent),
+				})
+			}
+		}
+
+		document.body.addEventListener('pointermove', onPointerMove)
+		return () => {
+			document.body.removeEventListener('pointermove', onPointerMove)
+		}
+	}, [editor, currentTool])
+
 	return events
 }
diff --git a/packages/tldraw/api-report.api.md b/packages/tldraw/api-report.api.md
@@ -2147,6 +2147,15 @@ export function NoteToolbarItem(): JSX_2.Element;
 // @public (undocumented)
 export function OfflineIndicator(): JSX_2.Element;
 
+// @public
+export function onDragFromToolbarToCreateShape(editor: Editor, info: TLPointerEventInfo, opts: OnDragFromToolbarToCreateShapesOpts): void;
+
+// @public
+export interface OnDragFromToolbarToCreateShapesOpts {
+    createShape(id: TLShapeId): void;
+    onDragEnd?(id: TLShapeId): void;
+}
+
 // @public (undocumented)
 export function OpacitySlider(): JSX_2.Element | null;
 
@@ -3049,7 +3058,7 @@ export function TldrawUiMenuContextProvider({ type, sourceId, children, }: TLUiM
 export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
 
 // @public (undocumented)
-export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
+export function TldrawUiMenuItem<TranslationKey extends string = string, IconType extends string = string>({ disabled, spinner, readonlyOk, id, kbd, label, icon, iconLeft, onSelect, noClose, isSelected, onDragStart, }: TLUiMenuItemProps<TranslationKey, IconType>): JSX_2.Element | null;
 
 // @public (undocumented)
 export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, disabled, label, size, children, }: TLUiMenuSubmenuProps<Translation>): boolean | JSX_2.Element | Iterable<ReactNode> | null | number | string | undefined;
@@ -3646,6 +3655,10 @@ export interface TLUiEventMap {
     // (undocumented)
     'download-original': null;
     // (undocumented)
+    'drag-tool': {
+        id: string;
+    };
+    // (undocumented)
     'duplicate-page': null;
     // (undocumented)
     'duplicate-shapes': null;
@@ -4020,6 +4033,7 @@ export interface TLUiMenuItemProps<TranslationKey extends string = string, IconT
         [key: string]: TranslationKey;
     } | TranslationKey;
     noClose?: boolean;
+    onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
     onSelect(source: TLUiEventSource): Promise<void> | void;
     readonlyOk?: boolean;
     spinner?: boolean;
@@ -4267,6 +4281,8 @@ export interface TLUiToolItem<TranslationKey extends string = string, IconType e
         [key: string]: any;
     };
     // (undocumented)
+    onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void;
+    // (undocumented)
     onSelect(source: TLUiEventSource): void;
     // (undocumented)
     readonlyOk?: boolean;
diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts
@@ -590,7 +590,9 @@ export { useMenuIsOpen } from './lib/ui/hooks/useMenuIsOpen'
 export { useReadonly } from './lib/ui/hooks/useReadonly'
 export { useRelevantStyles } from './lib/ui/hooks/useRelevantStyles'
 export {
+	onDragFromToolbarToCreateShape,
 	useTools,
+	type OnDragFromToolbarToCreateShapesOpts,
 	type TLUiToolItem,
 	type TLUiToolsContextType,
 	type TLUiToolsProviderProps,
diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Translating.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Translating.ts
@@ -28,7 +28,6 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
-	didStartInPit?: boolean
 	onInteractionEnd?: string
 }
 
diff --git a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
diff --git a/packages/tldraw/src/lib/ui/context/events.tsx b/packages/tldraw/src/lib/ui/context/events.tsx
diff --git a/packages/tldraw/src/lib/ui/hooks/useTools.tsx b/packages/tldraw/src/lib/ui/hooks/useTools.tsx

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,6 @@ export type TranslatingInfo = TLPointerEventInfo & {`
`28`	`28`	`isCreating?: boolean`
`29`	`29`	`creatingMarkId?: string`
`30`	`30`	`onCreate?(): void`
`31`		`- didStartInPit?: boolean`
`32`	`31`	`onInteractionEnd?: string`
`33`	`32`	`}`
`34`	`33`