tldraw 3.16.0-canary.cf24aedcd577 → 3.16.0-canary.d98fc0b9bd6a

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
+	isAccelKey,
 	pointInPolygon,
 } from '@tldraw/editor'
 
@@ -15,7 +16,15 @@ export class Erasing extends StateNode {
 	private markId = ''
 	private excludedShapeIds = new Set<TLShapeId>()
 
+	_isHoldingAccelKey = false
+	_firstErasingShapeId: TLShapeId | null = null
+	_erasingShapeIds: TLShapeId[] = []
+
 	override onEnter(info: TLPointerEventInfo) {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this._firstErasingShapeId = this.editor.getErasingShapeIds()[0] // the first one should be the first one we hit... is it?
+		this._erasingShapeIds = this.editor.getErasingShapeIds()
+
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
@@ -76,6 +85,16 @@ export class Erasing extends StateNode {
 		this.complete()
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
 	update() {
 		const { editor, excludedShapeIds } = this
 		const erasingShapeIds = editor.getErasingShapeIds()
@@ -87,6 +106,7 @@ export class Erasing extends StateNode {
 
 		this.pushPointToScribble()
 
+		// Otherwise, erasing shapes are all the shapes that were hit before plus any new shapes that are hit
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
@@ -121,18 +141,31 @@ export class Erasing extends StateNode {
 			if (geometry.hitTestLineSegment(A, B, minDist)) {
 				erasing.add(editor.getOutermostSelectableShape(shape).id)
 			}
+
+			this._erasingShapeIds = [...erasing]
+		}
+
+		// If the user is holding the meta / ctrl key, we should only erase the first shape we hit
+		if (this._isHoldingAccelKey && this._firstErasingShapeId) {
+			const erasingShapeId = this._firstErasingShapeId
+			if (erasingShapeId && this.editor.getShape(erasingShapeId)) {
+				editor.setErasingShapes([erasingShapeId])
+			}
+			return
 		}
 
 		// Remove the hit shapes, except if they're in the list of excluded shapes
 		// (these excluded shapes will be any frames or groups the pointer was inside of
 		// when the user started erasing)
-		this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))
+		this.editor.setErasingShapes(this._erasingShapeIds.filter((id) => !excludedShapeIds.has(id)))
 	}
 
 	complete() {
 		const { editor } = this
 		editor.deleteShapes(editor.getCurrentPageState().erasingShapeIds)
 		this.parent.transition('idle')
+		this._erasingShapeIds = []
+		this._firstErasingShapeId = null
 	}
 
 	cancel() {

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,4 +1,5 @@
 import {
+	isAccelKey,
 	StateNode,
 	TLFrameShape,
 	TLGroupShape,
@@ -9,7 +10,11 @@ import {
 export class Pointing extends StateNode {
 	static override id = 'pointing'
 
+	_isHoldingAccelKey = false
+
 	override onEnter() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
 		const {
@@ -45,12 +50,25 @@ export class Pointing extends StateNode {
 				}
 
 				erasing.add(hitShape.id)
+
+				// If the user is holding the meta / ctrl key, stop after the first shape
+				if (this._isHoldingAccelKey) {
+					break
+				}
 			}
 		}
 
 		this.editor.setErasingShapes([...erasing])
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
 	override onLongPress(info: TLPointerEventInfo) {
 		this.startErasing(info)
 	}
@@ -62,6 +80,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
+		if (this._isHoldingAccelKey) return
+
 		if (this.editor.inputs.isDragging) {
 			this.startErasing(info)
 		}

package/src/lib/ui/assetUrls.ts

@@ -1,4 +1,5 @@
 import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'
+import { useMemo } from 'react'
 import { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'
 import { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'
 import { TLUiIconType, iconTypes } from './icon-types'
@@ -41,15 +42,17 @@ export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 export function useDefaultUiAssetUrlsWithOverrides(
 	overrides?: TLUiAssetUrlOverrides
 ): TLUiAssetUrls {
-	if (!overrides) return defaultUiAssetUrls
+	return useMemo(() => {
+		if (!overrides) return defaultUiAssetUrls
 
-	return {
-		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
-		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
-		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
-		translations: Object.assign(
-			{ ...defaultUiAssetUrls.translations },
-			{ ...overrides?.translations }
-		),
-	}
+		return {
+			fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+			icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+			embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+			translations: Object.assign(
+				{ ...defaultUiAssetUrls.translations },
+				{ ...overrides?.translations }
+			),
+		}
+	}, [overrides])
 }

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -123,7 +123,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="text-header"
 					label="tool.rich-text-header"
-					kbd="cmd+shift+[[1-6]]"
+					kbd="cmd+alt+[[1-6]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -46,10 +46,10 @@ export class MinimapManager {
 		const style = getComputedStyle(this.editor.getContainer())
 
 		return {
-			shapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),
-			selectFill: getRgba(style.getPropertyValue('--color-selected').trim()),
-			viewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),
-			background: getRgba(style.getPropertyValue('--color-low').trim()),
+			shapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),
+			selectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),
+			viewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),
+			background: getRgba(style.getPropertyValue('--tl-color-low').trim()),
 		}
 	}
 

package/src/lib/ui/components/MobileStylePanel.tsx

@@ -57,7 +57,7 @@ export function MobileStylePanel() {
 					type="tool"
 					data-testid="mobile-styles.button"
 					style={{
-						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
+						color: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,
 					}}
 					title={msg('style-panel.title')}
 					disabled={disableStylePanel}

package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx

@@ -272,7 +272,7 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 					type="icon"
 					onClick={onManipulatingEnd}
 					data-testid="tool.image-confirm"
-					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
+					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
 				>
 					<TldrawUiButtonIcon small icon="check" />
 				</TldrawUiButton>

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -1,7 +1,14 @@
-import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
+import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
-import React, { createContext, forwardRef, useContext, useEffect, useRef, useState } from 'react'
-import { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
+import React, {
+	createContext,
+	forwardRef,
+	ReactNode,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react'
 import { useTldrawUiOrientation } from './layout'
 
 const DEFAULT_TOOLTIP_DELAY_MS = 700
@@ -13,19 +20,23 @@ export interface TldrawUiTooltipProps {
 	side?: 'top' | 'right' | 'bottom' | 'left'
 	sideOffset?: number
 	disabled?: boolean
+	showOnMobile?: boolean
+	delayDuration?: number
 }
 
 // Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltipId: string | null = null
-	private currentContent: string | React.ReactNode = ''
-	private currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'
-	private currentSideOffset: number = 5
+	private currentTooltip = atom<{
+		id: string
+		content: ReactNode
+		side: 'top' | 'right' | 'bottom' | 'left'
+		sideOffset: number
+		showOnMobile: boolean
+		targetElement: HTMLElement
+		delayDuration: number | undefined
+	} | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
-	private subscribers: Set<() => void> = new Set()
-	private activeElement: HTMLElement | null = null
-	private editor: Editor | null = null
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -34,25 +45,14 @@ class TooltipManager {
 		return TooltipManager.instance
 	}
 
-	setEditor(editor: Editor | null) {
-		this.editor = editor
-	}
-
-	subscribe(callback: () => void): () => void {
-		this.subscribers.add(callback)
-		return () => this.subscribers.delete(callback)
-	}
-
-	private notify() {
-		this.subscribers.forEach((callback) => callback())
-	}
-
 	showTooltip(
 		tooltipId: string,
 		content: string | React.ReactNode,
-		element: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
-		sideOffset: number = 5
+		targetElement: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number | undefined
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -61,51 +61,57 @@ class TooltipManager {
 		}
 
 		// Update current tooltip
-		this.currentTooltipId = tooltipId
-		this.currentContent = content
-		this.currentSide = side
-		this.currentSideOffset = sideOffset
-		this.activeElement = element
-
-		this.notify()
+		this.currentTooltip.set({
+			id: tooltipId,
+			content,
+			side,
+			sideOffset,
+			showOnMobile,
+			targetElement,
+			delayDuration,
+		})
 	}
 
-	hideTooltip(tooltipId: string, instant: boolean = false) {
+	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
 		const hide = () => {
 			// Only hide if this is the current tooltip
-			if (this.currentTooltipId === tooltipId) {
-				this.currentTooltipId = null
-				this.currentContent = ''
-				this.activeElement = null
+			if (this.currentTooltip.get()?.id === tooltipId) {
+				this.currentTooltip.set(null)
 				this.destroyTimeoutId = null
-				this.notify()
 			}
 		}
 
-		if (instant) {
-			hide()
-		} else if (this.editor) {
+		if (editor && !instant) {
 			// Start destroy timeout (1 second)
-			this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)
+			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
+		} else {
+			hide()
 		}
 	}
 
 	hideAllTooltips() {
-		this.currentTooltipId = null
-		this.currentContent = ''
-		this.activeElement = null
+		this.currentTooltip.set(null)
 		this.destroyTimeoutId = null
-		this.notify()
 	}
 
 	getCurrentTooltipData() {
-		return {
-			id: this.currentTooltipId,
-			content: this.currentContent,
-			side: this.currentSide,
-			sideOffset: this.currentSideOffset,
-			element: this.activeElement,
+		const currentTooltip = this.currentTooltip.get()
+		if (!currentTooltip) return null
+		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
+		return currentTooltip
+	}
+
+	private supportsHoverAtom: Atom<boolean> | null = null
+	supportsHover() {
+		if (!this.supportsHoverAtom) {
+			const mediaQuery = window.matchMedia('(hover: hover)')
+			const supportsHover = atom('has hover', mediaQuery.matches)
+			this.supportsHoverAtom = supportsHover
+			mediaQuery.addEventListener('change', (e) => {
+				supportsHover.set(e.matches)
+			})
 		}
+		return this.supportsHoverAtom.get()
 	}
 }
 
@@ -134,65 +140,30 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
 	const editor = useMaybeEditor()
-	const [, forceUpdate] = useState({})
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
-	const previousPositionRef = useRef<{ x: number; y: number } | null>(null)
-	const prefersReducedMotion = usePrefersReducedMotion()
-	const [shouldAnimate, setShouldAnimate] = useState(false)
 	const isFirstShowRef = useRef(true)
 	const showTimeoutRef = useRef<number | null>(null)
 
-	// Set editor in tooltip manager
-	useEffect(() => {
-		tooltipManager.setEditor(editor)
-	}, [editor])
-
-	// Subscribe to tooltip manager updates
-	useEffect(() => {
-		const unsubscribe = tooltipManager.subscribe(() => {
-			forceUpdate({})
-		})
-		return unsubscribe
-	}, [])
-
-	const tooltipData = tooltipManager.getCurrentTooltipData()
+	const currentTooltip = useValue(
+		'current tooltip',
+		() => tooltipManager.getCurrentTooltipData(),
+		[]
+	)
 
 	// Update open state and trigger position
 	useEffect(() => {
-		const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)
-
 		// Clear any existing show timeout
 		if (showTimeoutRef.current) {
 			clearTimeout(showTimeoutRef.current)
 			showTimeoutRef.current = null
 		}
 
-		if (shouldBeOpen && tooltipData.element && triggerRef.current) {
+		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
-			const activeRect = tooltipData.element.getBoundingClientRect()
+			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
 			const trigger = triggerRef.current
 
-			const newPosition = {
-				x: activeRect.left + activeRect.width / 2,
-				y: activeRect.top + activeRect.height / 2,
-			}
-
-			// Determine if we should animate
-			let shouldAnimateCheck = false
-			if (previousPositionRef.current) {
-				const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)
-				// Only animate if the distance is less than 200px (nearby tooltips)
-				shouldAnimateCheck =
-					!prefersReducedMotion &&
-					isNearPrevious &&
-					Math.abs(newPosition.y - previousPositionRef.current.y) < 50
-			}
-			// Don't animate on initial show (previousPositionRef.current is null)
-
-			setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)
-			previousPositionRef.current = newPosition
-
 			trigger.style.position = 'fixed'
 			trigger.style.left = `${activeRect.left}px`
 			trigger.style.top = `${activeRect.top}px`
@@ -206,23 +177,20 @@ function TooltipSingleton() {
 				showTimeoutRef.current = editor.timers.setTimeout(() => {
 					setIsOpen(true)
 					isFirstShowRef.current = false
-				}, editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
 			}
-		} else if (!shouldBeOpen) {
+		} else {
 			// Hide tooltip immediately
 			setIsOpen(false)
-			// Reset position tracking when tooltip closes
-			previousPositionRef.current = null
-			setShouldAnimate(false)
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])
+	}, [editor, currentTooltip])
 
-	if (!tooltipData.id) {
+	if (!currentTooltip) {
 		return null
 	}
 
@@ -233,14 +201,13 @@ function TooltipSingleton() {
 			</_Tooltip.Trigger>
 			<_Tooltip.Content
 				className="tlui-tooltip"
-				data-should-animate={shouldAnimate}
-				side={tooltipData.side}
-				sideOffset={tooltipData.sideOffset}
+				side={currentTooltip.side}
+				sideOffset={currentTooltip.sideOffset}
 				avoidCollisions
 				collisionPadding={8}
 				dir="ltr"
 			>
-				{tooltipData.content}
+				{currentTooltip.content}
 				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
 			</_Tooltip.Content>
 		</_Tooltip.Root>
@@ -249,7 +216,18 @@ function TooltipSingleton() {
 
 /** @public @react */
 export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
-	({ children, content, side, sideOffset = 5, disabled = false }, ref) => {
+	(
+		{
+			children,
+			content,
+			side,
+			sideOffset = 5,
+			disabled = false,
+			showOnMobile = false,
+			delayDuration,
+		},
+		ref
+	) => {
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
@@ -261,10 +239,10 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			const currentTooltipId = tooltipId.current
 			return () => {
 				if (hasProvider) {
-					tooltipManager.hideTooltip(currentTooltipId, true)
+					tooltipManager.hideTooltip(editor, currentTooltipId, true)
 				}
 			}
-		}, [hasProvider])
+		}, [editor, hasProvider])
 
 		// Don't show tooltip if disabled, no content, or UI labels are disabled
 		if (disabled || !content) {
@@ -275,7 +253,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		if (!hasProvider) {
 			return (
 				<_Tooltip.Root
-					delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
+					delayDuration={
+						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+					}
 					disableHoverableContent
 				>
 					<_Tooltip.Trigger asChild ref={ref}>
@@ -306,13 +286,15 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDuration
 			)
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
 			child.props.onMouseLeave?.(event)
-			tooltipManager.hideTooltip(tooltipId.current)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
@@ -322,13 +304,15 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDuration
 			)
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
 			child.props.onBlur?.(event)
-			tooltipManager.hideTooltip(tooltipId.current)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
 		}
 
 		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {

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

@@ -3,7 +3,6 @@ import { TLUiEventSource } from '../../../context/events'
 
 /** @public */
 export type TLUiMenuContextType =
-	| 'panel'
 	| 'menu'
 	| 'small-icons'
 	| 'context-menu'

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

@@ -27,16 +27,6 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 	const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
 
 	switch (menu.type) {
-		case 'panel': {
-			return (
-				<div
-					className={classNames('tlui-menu__group', className)}
-					data-testid={`${menu.sourceId}-group.${id}`}
-				>
-					{children}
-				</div>
-			)
-		}
 		case 'menu': {
 			return (
 				<TldrawUiDropdownMenuGroup

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

@@ -120,7 +120,6 @@ export function TldrawUiMenuItem<
 						type="menu"
 						data-testid={`${sourceId}.${id}`}
 						disabled={disabled}
-						title={titleStr}
 						onClick={(e) => {
 							if (noClose) {
 								preventDefault(e)
@@ -146,7 +145,6 @@ export function TldrawUiMenuItem<
 			return (
 				<_ContextMenu.Item
 					dir="ltr"
-					title={titleStr}
 					draggable={false}
 					className="tlui-button tlui-button__menu"
 					data-testid={`${sourceId}.${id}`}
@@ -168,20 +166,6 @@ export function TldrawUiMenuItem<
 				</_ContextMenu.Item>
 			)
 		}
-		case 'panel': {
-			return (
-				<TldrawUiButton
-					data-testid={`${sourceId}.${id}`}
-					type="menu"
-					title={titleStr}
-					disabled={disabled}
-					onClick={() => onSelect(sourceId)}
-				>
-					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
-					{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}
-				</TldrawUiButton>
-			)
-		}
 		case 'small-icons':
 		case 'icons': {
 			return (
@@ -332,8 +316,8 @@ function useDraggableEvents(
 				if (
 					distanceSq >
 					(editor.getInstanceState().isCoarsePointer
-						? editor.options.coarseDragDistanceSquared
-						: editor.options.dragDistanceSquared)
+						? editor.options.uiCoarseDragDistanceSquared
+						: editor.options.uiDragDistanceSquared)
 				) {
 					const screenSpaceStart = state.screenSpaceStart
 					state = {
@@ -342,6 +326,8 @@ function useDraggableEvents(
 					}
 
 					editor.run(() => {
+						editor.setCurrentTool('select')
+
 						// Set origin point
 						editor.dispatch({
 							type: 'pointer',
@@ -364,6 +350,7 @@ function useDraggableEvents(
 						})
 
 						tooltipManager.hideAllTooltips()
+						editor.getContainer().focus()
 					})
 				}
 			}