tldraw 4.1.0-canary.9c36de6e611c → 4.1.0-canary.a152954244d2

package/src/lib/tools/SelectTool/childStates/Rotating.ts

@@ -19,14 +19,20 @@ export class Rotating extends StateNode {
 
 	snapshot = {} as TLRotationSnapshot
 
-	info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & { onInteractionEnd?: string }
+	info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & {
+		onInteractionEnd?: string | (() => void)
+	}
 
 	markId = ''
 
-	override onEnter(info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string }) {
+	override onEnter(
+		info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string | (() => void) }
+	) {
 		// Store the event information
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 
 		this.markId = this.editor.markHistoryStoppingPoint('rotate start')
 
@@ -121,11 +127,16 @@ export class Rotating extends StateNode {
 		})
 
 		this.editor.bailToMark(this.markId)
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	private complete() {
@@ -139,11 +150,16 @@ export class Rotating extends StateNode {
 			this.editor,
 			this.snapshot.shapeSnapshots.map((s) => s.shape.id)
 		)
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -28,7 +28,7 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class Translating extends StateNode {
@@ -59,7 +59,9 @@ export class Translating extends StateNode {
 		}
 
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.isCreating = isCreating
 
 		this.markId = ''
@@ -190,15 +192,24 @@ export class Translating extends StateNode {
 			this.snapshot.movingShapes.map((s) => s.id)
 		)
 
-		if (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd)
-		} else {
-			if (this.isCreating) {
-				this.onCreate?.(this.editor.getOnlySelectedShape())
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				if (this.editor.getInstanceState().isToolLocked) {
+					this.editor.setCurrentTool(onInteractionEnd)
+					return
+				}
 			} else {
-				this.parent.transition('idle')
+				onInteractionEnd()
+				return
 			}
 		}
+
+		if (this.isCreating) {
+			this.onCreate?.(this.editor.getOnlySelectedShape())
+		} else {
+			this.parent.transition('idle')
+		}
 	}
 
 	private cancel() {
@@ -214,11 +225,16 @@ export class Translating extends StateNode {
 		})
 
 		this.reset()
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	protected handleStart() {

package/src/lib/ui/components/DebugMenu/DefaultDebugMenuContent.tsx

@@ -172,7 +172,7 @@ export function DebugFlags() {
 	const items = Object.values(debugFlags)
 	if (!items.length) return null
 	return (
-		<TldrawUiMenuSubmenu id="debug flags" label="Debug Flags">
+		<TldrawUiMenuSubmenu id="debug flags" label="Debug flags">
 			<TldrawUiMenuGroup id="debug flags">
 				{items.map((flag) => (
 					<DebugFlagToggle key={flag.name} flag={flag} />
@@ -186,7 +186,7 @@ export function FeatureFlags() {
 	const items = Object.values(featureFlags)
 	if (!items.length) return null
 	return (
-		<TldrawUiMenuSubmenu id="feature flags" label="Feature Flags">
+		<TldrawUiMenuSubmenu id="feature flags" label="Feature flags">
 			<TldrawUiMenuGroup id="feature flags">
 				{items.map((flag) => (
 					<DebugFlagToggle key={flag.name} flag={flag} />

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

@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+[[↑→]]"
+					kbd="cmd+shift+[[↑↓]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

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

@@ -249,6 +249,12 @@ export class MinimapManager {
 
 			const len = geometry.length
 
+			const shape = this.editor.getShape(shapeId)
+			if (shape) {
+				const shapeUtil = this.editor.getShapeUtil(shape.type)
+				if (shapeUtil.hideInMinimap?.(shape)) continue
+			}
+
 			if (selectedShapes.has(shapeId)) {
 				appendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)
 				selectedShapeOffset += len

package/src/lib/ui/components/SharePanel/PeopleMenu.tsx

@@ -1,6 +1,8 @@
 import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'
 import { Popover as _Popover } from 'radix-ui'
 import { ReactNode } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
@@ -25,6 +27,8 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 	const userName = useValue('user', () => editor.user.getName(), [editor])
 
 	const [isOpen, onOpenChange] = useMenuIsOpen('people menu')
+	const breakpoint = useBreakpoint()
+	const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5
 
 	if (!userIds.length) return null
 
@@ -33,7 +37,7 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 			<_Popover.Trigger dir="ltr" asChild>
 				<button className="tlui-people-menu__avatars-button" title={msg('people-menu.title')}>
 					<div className="tlui-people-menu__avatars">
-						{userIds.slice(-5).map((userId) => (
+						{userIds.slice(-maxAvatars).map((userId) => (
 							<PeopleMenuAvatar key={userId} userId={userId} />
 						))}
 						{userIds.length > 0 && (
@@ -46,7 +50,7 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 								{userName?.[0] ?? ''}
 							</div>
 						)}
-						{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}
+						{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}
 					</div>
 				</button>
 			</_Popover.Trigger>

package/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx

@@ -25,10 +25,13 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiSlider } from '../primitives/TldrawUiSlider'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
-import { StylePanelButtonPicker } from './StylePanelButtonPicker'
+import { StylePanelButtonPicker, StylePanelButtonPickerInline } from './StylePanelButtonPicker'
 import { useStylePanelContext } from './StylePanelContext'
 import { StylePanelDoubleDropdownPicker } from './StylePanelDoubleDropdownPicker'
-import { StylePanelDropdownPicker } from './StylePanelDropdownPicker'
+import {
+	StylePanelDropdownPicker,
+	StylePanelDropdownPickerInline,
+} from './StylePanelDropdownPicker'
 import { StylePanelSubheading } from './StylePanelSubheading'
 
 /** @public @react */
@@ -225,70 +228,78 @@ export function StylePanelFontPicker() {
 
 /** @public @react */
 export function StylePanelTextAlignPicker() {
-	const { styles } = useStylePanelContext()
+	const { styles, enhancedA11yMode } = useStylePanelContext()
 	const msg = useTranslation()
 	const textAlign = styles.get(DefaultTextAlignStyle)
 	if (textAlign === undefined) return null
+	const title = msg('style-panel.align')
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
-			<StylePanelButtonPicker
-				title={msg('style-panel.align')}
-				uiType="align"
-				style={DefaultTextAlignStyle}
-				items={STYLES.textAlign}
-				value={textAlign}
-			/>
-			<TldrawUiToolbarButton
-				type="icon"
-				title={msg('style-panel.vertical-align')}
-				data-testid="vertical-align"
-				disabled
-			>
-				<TldrawUiButtonIcon icon="vertical-align-middle" />
-			</TldrawUiToolbarButton>
-		</TldrawUiToolbar>
+		<>
+			{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			<TldrawUiToolbar orientation="horizontal" label={title}>
+				<StylePanelButtonPickerInline
+					title={title}
+					uiType="align"
+					style={DefaultTextAlignStyle}
+					items={STYLES.textAlign}
+					value={textAlign}
+				/>
+				<TldrawUiToolbarButton
+					type="icon"
+					title={msg('style-panel.vertical-align')}
+					data-testid="vertical-align"
+					disabled
+				>
+					<TldrawUiButtonIcon icon="vertical-align-middle" />
+				</TldrawUiToolbarButton>
+			</TldrawUiToolbar>
+		</>
 	)
 }
 
 /** @public @react */
 export function StylePanelLabelAlignPicker() {
-	const { styles } = useStylePanelContext()
+	const { styles, enhancedA11yMode } = useStylePanelContext()
 	const msg = useTranslation()
 	const labelAlign = styles.get(DefaultHorizontalAlignStyle)
 	const verticalLabelAlign = styles.get(DefaultVerticalAlignStyle)
 	if (labelAlign === undefined) return null
+	const title = msg('style-panel.label-align')
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
-			<StylePanelButtonPicker
-				title={msg('style-panel.label-align')}
-				uiType="align"
-				style={DefaultHorizontalAlignStyle}
-				items={STYLES.horizontalAlign}
-				value={labelAlign}
-			/>
-			{verticalLabelAlign === undefined ? (
-				<TldrawUiToolbarButton
-					type="icon"
-					title={msg('style-panel.vertical-align')}
-					data-testid="vertical-align"
-					disabled
-				>
-					<TldrawUiButtonIcon icon="vertical-align-middle" />
-				</TldrawUiToolbarButton>
-			) : (
-				<StylePanelDropdownPicker
-					type="icon"
-					id="geo-vertical-alignment"
-					uiType="verticalAlign"
-					stylePanelType="vertical-align"
-					style={DefaultVerticalAlignStyle}
-					items={STYLES.verticalAlign}
-					value={verticalLabelAlign}
+		<>
+			{enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
+			<TldrawUiToolbar orientation="horizontal" label={title}>
+				<StylePanelButtonPickerInline
+					title={title}
+					uiType="align"
+					style={DefaultHorizontalAlignStyle}
+					items={STYLES.horizontalAlign}
+					value={labelAlign}
 				/>
-			)}
-		</TldrawUiToolbar>
+				{verticalLabelAlign === undefined ? (
+					<TldrawUiToolbarButton
+						type="icon"
+						title={msg('style-panel.vertical-align')}
+						data-testid="vertical-align"
+						disabled
+					>
+						<TldrawUiButtonIcon icon="vertical-align-middle" />
+					</TldrawUiToolbarButton>
+				) : (
+					<StylePanelDropdownPickerInline
+						type="icon"
+						id="geo-vertical-alignment"
+						uiType="verticalAlign"
+						stylePanelType="vertical-align"
+						style={DefaultVerticalAlignStyle}
+						items={STYLES.verticalAlign}
+						value={verticalLabelAlign}
+					/>
+				)}
+			</TldrawUiToolbar>
+		</>
 	)
 }
 

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -6,7 +6,7 @@ import {
 	TLDefaultColorStyle,
 	useEditor,
 } from '@tldraw/editor'
-import { memo, ReactElement, useMemo, useRef } from 'react'
+import { memo, useMemo, useRef } from 'react'
 import { useDefaultColorTheme } from '../../../shapes/shared/useDefaultColorTheme'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
@@ -34,8 +34,19 @@ export interface StylePanelButtonPickerProps<T extends string> {
 	onHistoryMark?(id: string): void
 }
 
-/** @public */
-export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T extends string>(
+function StylePanelButtonPickerInner<T extends string>(props: StylePanelButtonPickerProps<T>) {
+	const { enhancedA11yMode } = useStylePanelContext()
+	return (
+		<>
+			{enhancedA11yMode && <StylePanelSubheading>{props.title}</StylePanelSubheading>}
+			<TldrawUiToolbar label={props.title}>
+				<StylePanelButtonPickerInline {...props} />
+			</TldrawUiToolbar>
+		</>
+	)
+}
+
+function StylePanelButtonPickerInlineInner<T extends string>(
 	props: StylePanelButtonPickerProps<T>
 ) {
 	const ctx = useStylePanelContext()
@@ -126,54 +137,60 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 	const Layout = items.length > 4 ? TldrawUiGrid : TldrawUiRow
 
 	return (
-		<>
-			{ctx.enhancedA11yMode && <StylePanelSubheading>{title}</StylePanelSubheading>}
-			<TldrawUiToolbar label={title}>
-				<TldrawUiToolbarToggleGroup
-					data-testid={`style.${uiType}`}
-					type="single"
-					value={value.type === 'shared' ? value.value : undefined}
-					asChild
-				>
-					<Layout>
-						{items.map((item) => {
-							const isActive = value.type === 'shared' && value.value === item.value
-							const label =
-								title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-							return (
-								<TldrawUiToolbarToggleItem
-									type="icon"
-									key={item.value}
-									data-id={item.value}
-									data-testid={`style.${uiType}.${item.value}`}
-									aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
-									tooltip={
-										<>
-											<div>{label}</div>
-											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
-										</>
-									}
-									value={item.value}
-									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-									data-isactive={isActive}
-									title={label}
-									style={
-										style === (DefaultColorStyle as StyleProp<unknown>)
-											? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
-											: undefined
-									}
-									onPointerEnter={handleButtonPointerEnter}
-									onPointerDown={handleButtonPointerDown}
-									onPointerUp={handleButtonPointerUp}
-									onClick={handleButtonClick}
-								>
-									<TldrawUiButtonIcon icon={item.icon} />
-								</TldrawUiToolbarToggleItem>
-							)
-						})}
-					</Layout>
-				</TldrawUiToolbarToggleGroup>
-			</TldrawUiToolbar>
-		</>
+		<TldrawUiToolbarToggleGroup
+			data-testid={`style.${uiType}`}
+			type="single"
+			value={value.type === 'shared' ? value.value : null}
+			asChild
+		>
+			<Layout>
+				{items.map((item) => {
+					const isActive = value.type === 'shared' && value.value === item.value
+					const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+					return (
+						<TldrawUiToolbarToggleItem
+							type="icon"
+							key={item.value}
+							data-id={item.value}
+							data-testid={`style.${uiType}.${item.value}`}
+							aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+							tooltip={
+								<>
+									<div>{label}</div>
+									{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+								</>
+							}
+							value={item.value}
+							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+							data-isactive={isActive}
+							title={label}
+							style={
+								style === (DefaultColorStyle as StyleProp<unknown>)
+									? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
+									: undefined
+							}
+							onPointerEnter={handleButtonPointerEnter}
+							onPointerDown={handleButtonPointerDown}
+							onPointerUp={handleButtonPointerUp}
+							onClick={handleButtonClick}
+						>
+							<TldrawUiButtonIcon icon={item.icon} />
+						</TldrawUiToolbarToggleItem>
+					)
+				})}
+			</Layout>
+		</TldrawUiToolbarToggleGroup>
 	)
-}) as <T extends string>(props: StylePanelButtonPickerProps<T>) => ReactElement
+}
+
+/** @public @react */
+export const StylePanelButtonPicker = memo(StylePanelButtonPickerInner) as <T extends string>(
+	props: StylePanelButtonPickerProps<T>
+) => React.JSX.Element
+
+/** @public @react*/
+export const StylePanelButtonPickerInline = memo(StylePanelButtonPickerInlineInner) as <
+	T extends string,
+>(
+	props: StylePanelButtonPickerProps<T>
+) => React.JSX.Element