tldraw 3.16.0-canary.8c74738e06fb → 3.16.0-canary.aa1aff3ffe55

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -1,17 +1,9 @@
-import {
-	exhaustiveSwitchError,
-	getPointerInfo,
-	preventDefault,
-	TLPointerEventInfo,
-	useEditor,
-	Vec,
-} from '@tldraw/editor'
+import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
-import { TLUiToolItem } from '../../../hooks/useTools'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
 import { kbdStr } from '../../../kbd-utils'
@@ -71,10 +63,6 @@ export interface TLUiMenuItemProps<
 	 * Whether the item is selected.
 	 */
 	isSelected?: boolean
-	/**
-	 * The function to call when the item is dragged. If this is provided, the item will be draggable.
-	 */
-	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 }
 
 /** @public @react */
@@ -93,7 +81,6 @@ export function TldrawUiMenuItem<
 	onSelect,
 	noClose,
 	isSelected,
-	onDragStart,
 }: TLUiMenuItemProps<TranslationKey, IconType>) {
 	const { type: menuType, sourceId } = useTldrawUiMenuContext()
 
@@ -220,20 +207,6 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar': {
-			if (onDragStart) {
-				return (
-					<DraggableToolbarButton
-						id={id}
-						icon={icon}
-						onSelect={onSelect}
-						onDragStart={onDragStart}
-						labelToUse={labelToUse}
-						titleStr={titleStr}
-						disabled={disabled}
-						isSelected={isSelected}
-					/>
-				)
-			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -254,21 +227,6 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar-overflow': {
-			if (onDragStart) {
-				return (
-					<DraggableToolbarButton
-						id={id}
-						icon={icon}
-						onSelect={onSelect}
-						onDragStart={onDragStart}
-						labelToUse={labelToUse}
-						titleStr={titleStr}
-						disabled={disabled}
-						isSelected={isSelected}
-						overflow
-					/>
-				)
-			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -291,172 +249,3 @@ export function TldrawUiMenuItem<
 		}
 	}
 }
-
-function useDraggableEvents(
-	onDragStart: TLUiToolItem['onDragStart'],
-	onSelect: TLUiToolItem['onSelect']
-) {
-	const editor = useEditor()
-	const events = useMemo(() => {
-		let state = { name: 'idle' } as
-			| {
-					name: 'idle'
-			  }
-			| {
-					name: 'pointing'
-					start: Vec
-			  }
-			| {
-					name: 'dragging'
-					start: Vec
-			  }
-			| {
-					name: 'dragged'
-			  }
-
-		function handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {
-			state = {
-				name: 'pointing',
-				start: editor.inputs.currentPagePoint.clone(),
-			}
-
-			e.currentTarget.setPointerCapture(e.pointerId)
-		}
-
-		function handlePointerMove(e: React.PointerEvent<HTMLButtonElement>) {
-			if ((e as any).isSpecialRedispatchedEvent) return
-
-			if (state.name === 'pointing') {
-				const distance = Vec.Dist2(state.start, editor.inputs.currentPagePoint)
-				if (
-					distance >
-					(editor.getInstanceState().isCoarsePointer
-						? editor.options.coarseDragDistanceSquared
-						: editor.options.dragDistanceSquared)
-				) {
-					const start = state.start
-					state = {
-						name: 'dragging',
-						start,
-					}
-
-					editor.run(() => {
-						// Set origin point
-						editor.dispatch({
-							type: 'pointer',
-							target: 'canvas',
-							name: 'pointer_down',
-							...getPointerInfo(e),
-							point: start,
-						})
-
-						// Pointer down potentially selects shapes, so we need to deselect them.
-						editor.selectNone()
-
-						// start drag
-						onDragStart?.('toolbar', {
-							type: 'pointer',
-							target: 'canvas',
-							name: 'pointer_move',
-							...getPointerInfo(e),
-						})
-					})
-				}
-			}
-		}
-
-		function handlePointerUp(e: React.PointerEvent<HTMLButtonElement>) {
-			if ((e as any).isSpecialRedispatchedEvent) return
-
-			e.currentTarget.releasePointerCapture(e.pointerId)
-
-			editor.dispatch({
-				type: 'pointer',
-				target: 'canvas',
-				name: 'pointer_up',
-				...getPointerInfo(e),
-			})
-		}
-
-		function handleClick() {
-			if (state.name === 'dragging' || state.name === 'dragged') {
-				state = { name: 'idle' }
-				return true
-			}
-
-			state = { name: 'idle' }
-			onSelect?.('toolbar')
-		}
-
-		return {
-			onPointerDown: handlePointerDown,
-			onPointerMove: handlePointerMove,
-			onPointerUp: handlePointerUp,
-			onClick: handleClick,
-		}
-	}, [onDragStart, editor, onSelect])
-
-	return events
-}
-
-function DraggableToolbarButton({
-	id,
-	labelToUse,
-	titleStr,
-	disabled,
-	isSelected,
-	icon,
-	onSelect,
-	onDragStart,
-	overflow,
-}: {
-	id: string
-	disabled: boolean
-	labelToUse?: string
-	titleStr?: string
-	isSelected?: boolean
-	icon: TLUiMenuItemProps['icon']
-	onSelect: TLUiMenuItemProps['onSelect']
-	onDragStart: TLUiMenuItemProps['onDragStart']
-	overflow?: boolean
-}) {
-	const events = useDraggableEvents(onDragStart, onSelect)
-
-	if (overflow) {
-		return (
-			<TldrawUiToolbarButton
-				aria-label={labelToUse}
-				aria-pressed={isSelected ? 'true' : 'false'}
-				isActive={isSelected}
-				className="tlui-button-grid__button"
-				data-testid={`tools.more.${id}`}
-				data-value={id}
-				disabled={disabled}
-				title={titleStr}
-				type="icon"
-				{...events}
-			>
-				<TldrawUiButtonIcon icon={icon!} />
-			</TldrawUiToolbarButton>
-		)
-	}
-
-	return (
-		<TldrawUiToolbarButton
-			aria-label={labelToUse}
-			aria-pressed={isSelected ? 'true' : 'false'}
-			data-testid={`tools.${id}`}
-			data-value={id}
-			disabled={disabled}
-			onTouchStart={(e) => {
-				preventDefault(e)
-				onSelect('toolbar')
-			}}
-			title={titleStr}
-			type="tool"
-			{...events}
-		>
-			<TldrawUiButtonIcon icon={icon!} />
-		</TldrawUiToolbarButton>
-	)
-}

package/src/lib/ui/context/events.tsx

@@ -126,7 +126,6 @@ export interface TLUiEventMap {
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null
-	'drag-tool': { id: string }
 	'image-replace': null
 	'video-replace': null
 	'open-kbd-shortcuts': null

package/src/lib/ui/hooks/useTools.tsx

@@ -1,13 +1,4 @@
-import {
-	assertExists,
-	createShapeId,
-	Editor,
-	GeoShapeGeoStyle,
-	TLPointerEventInfo,
-	TLShapeId,
-	toRichText,
-	useMaybeEditor,
-} from '@tldraw/editor'
+import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
@@ -28,7 +19,6 @@ export interface TLUiToolItem<
 	shortcutsLabel?: TranslationKey
 	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
-	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,
 	 * or a combination of keys.
@@ -136,27 +126,21 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onToolSelect(source, this)
 				},
 			},
-			...[...GeoShapeGeoStyle.values].map((geo) => ({
-				id: geo,
-				label: `tool.${geo}` as TLUiTranslationKey,
+			...[...GeoShapeGeoStyle.values].map((id) => ({
+				id,
+				label: `tool.${id}` as TLUiTranslationKey,
 				meta: {
-					geo,
+					geo: id,
 				},
-				kbd: geo === 'rectangle' ? 'r' : geo === 'ellipse' ? 'o' : undefined,
-				icon: ('geo-' + geo) as TLUiIconType,
+				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + id) as TLUiIconType,
 				onSelect(source: TLUiEventSource) {
 					editor.run(() => {
-						editor.setStyleForNextShapes(GeoShapeGeoStyle, geo)
+						editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
 						editor.setCurrentTool('geo')
-						onToolSelect(source, this, `geo-${geo}`)
+						onToolSelect(source, this, `geo-${id}`)
 					})
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
-					})
-					trackEvent('drag-tool', { source, id: 'geo' })
-				},
 			})),
 			{
 				id: 'arrow',
@@ -167,17 +151,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('arrow')
 					onToolSelect(source, this)
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({
-								id,
-								type: 'arrow',
-								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
-							}),
-					})
-					trackEvent('drag-tool', { source, id: 'arrow' })
-				},
 			},
 			{
 				id: 'line',
@@ -198,12 +171,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('frame')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'frame' }),
-					})
-					trackEvent('drag-tool', { source, id: 'frame' })
-				},
 			},
 			{
 				id: 'text',
@@ -214,17 +181,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('text')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'text' })
-				},
 			},
 			{
 				id: 'asset',
@@ -245,16 +201,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('note')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'note' }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'note' })
-				},
 			},
 			{
 				id: 'laser',
@@ -298,7 +244,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 		}
 
 		return tools
-	}, [overrides, editor, helpers, onToolSelect, trackEvent])
+	}, [overrides, editor, helpers, onToolSelect])
 
 	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
 }
@@ -313,57 +259,3 @@ export function useTools() {
 
 	return ctx
 }
-
-/**
- * Options for {@link onDragFromToolbarToCreateShape}.
- * @public
- */
-export interface OnDragFromToolbarToCreateShapesOpts {
-	/**
-	 * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
-	 * immediately updated with the correct position.
-	 */
-	createShape(id: TLShapeId): void
-	/**
-	 * Called once the drag interaction has finished.
-	 */
-	onDragEnd?(id: TLShapeId): void
-}
-
-/**
- * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
- * the toolbar.
- * @public
- */
-export function onDragFromToolbarToCreateShape(
-	editor: Editor,
-	info: TLPointerEventInfo,
-	opts: OnDragFromToolbarToCreateShapesOpts
-) {
-	const { x, y } = editor.inputs.currentPagePoint
-
-	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
-	editor.setCurrentTool('select.translating')
-
-	const id = createShapeId()
-	opts.createShape(id)
-	const shape = assertExists(editor.getShape(id), 'Shape not found')
-
-	const { w, h } = editor.getShapePageBounds(id)!
-	editor.updateShape({ id, type: shape.type, x: x - w / 2, y: y - h / 2 })
-	editor.select(id)
-
-	editor.setCurrentTool('select.translating', {
-		...info,
-		target: 'shape',
-		shape: editor.getShape(id),
-		isCreating: true,
-		creatingMarkId: stoppingPoint,
-		onCreate() {
-			editor.setCurrentTool('select.idle')
-			editor.select(id)
-			opts.onDragEnd?.(id)
-		},
-	})
-	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
-}

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.8c74738e06fb'
+export const version = '3.16.0-canary.aa1aff3ffe55'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-06T08:29:26.797Z',
-	patch: '2025-08-06T08:29:26.797Z',
+	minor: '2025-08-06T11:17:10.614Z',
+	patch: '2025-08-06T11:17:10.614Z',
 }

package/src/test/arrows-megabus.test.tsx

@@ -288,11 +288,13 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 50) // box3 is higher
+		editor.pointerMove(225, 70) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -304,14 +306,18 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front
+		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 50)
+		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })