tldraw 3.16.0-next.34fddf633325 → 3.16.0-next.6611943ca24a

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

@@ -1,5 +1,7 @@
 import {
 	activeElementShouldCaptureKeys,
+	assert,
+	modulate,
 	preventDefault,
 	tlmenus,
 	useEditor,
@@ -7,7 +9,7 @@ import {
 	useUniqueSafeId,
 } from '@tldraw/editor'
 import classNames from 'classnames'
-import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'
@@ -20,6 +22,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -40,10 +43,24 @@ const NUMBERED_SHORTCUT_KEYS: Record<string, number> = {
 /** @public */
 export interface OverflowingToolbarProps {
 	children: React.ReactNode
+	orientation: 'horizontal' | 'vertical'
+	sizingParentClassName: string
+	minItems: number
+	minSizePx: number
+	maxItems: number
+	maxSizePx: number
 }
 
 /** @public @react */
-export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
+export function OverflowingToolbar({
+	children,
+	orientation,
+	sizingParentClassName,
+	minItems,
+	minSizePx,
+	maxItems,
+	maxSizePx,
+}: OverflowingToolbarProps) {
 	const editor = useEditor()
 	const id = useUniqueSafeId()
 	const breakpoint = useBreakpoint()
@@ -51,66 +68,165 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	const rButtons = useRef<HTMLElement[]>([])
 	const [isOpen, setIsOpen] = useState(false)
 
-	const overflowIndex = Math.min(8, 5 + breakpoint)
-
-	const [totalItems, setTotalItems] = useState(0)
 	const mainToolsRef = useRef<HTMLDivElement>(null)
-	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
-
-	const css = useMemo(() => {
-		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
 
-		return `
-			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
-				display: none;
-			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
-				display: none;
-			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
-				margin-top: 0;
-			}
-        `
-	}, [lastActiveOverflowItem, id, overflowIndex])
+	// we have to use state instead of a ref here so that we get
+	// an update when the overflow popover mounts / unmounts
+	const [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)
+	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
+	const [shouldShowOverflow, setShouldShowOverflow] = useState(false)
 
 	const onDomUpdate = useEvent(() => {
 		if (!mainToolsRef.current) return
 
-		const children = Array.from(mainToolsRef.current.children)
-		setTotalItems(children.length)
+		// whenever we get an update, we need to re-calculate the number of items to show and update
+		// the component accordingly.
+		const sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'
 
-		// If the last active overflow item is no longer in the overflow, clear it
-		const lastActiveElementIdx = children.findIndex(
-			(el) => el.getAttribute('data-value') === lastActiveOverflowItem
-		)
-		if (lastActiveElementIdx <= overflowIndex) {
-			setLastActiveOverflowItem(null)
+		// toolbars can contain both single items and groups. we need to keep track of both.
+		type Items = (
+			| { type: 'item'; element: HTMLElement }
+			| { type: 'group'; items: Items; element: HTMLElement }
+		)[]
+
+		// walk through the dom and collect items so we can calculate what to show/hide
+		const mainItems = collectItems(mainToolsRef.current.children)
+		const overflowItems = overflowTools ? collectItems(overflowTools.children) : null
+		function collectItems(collection: HTMLCollection) {
+			const items: Items = []
+			for (const child of collection) {
+				if (child.classList.contains('tlui-main-toolbar__group')) {
+					items.push({
+						type: 'group',
+						items: collectItems(child.children),
+						element: child as HTMLElement,
+					})
+				} else {
+					items.push({ type: 'item', element: child as HTMLElement })
+				}
+			}
+
+			return items
 		}
 
-		// But if there's a new active item...
-		const activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(
-			(el) => el.getAttribute('aria-pressed') === 'true'
+		// the number of items to show is based on the space available to the toolbar.
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const size = sizingParent[sizeProp]
+		const itemsToShow = Math.floor(
+			modulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)
 		)
-		if (activeElementIdx === -1) return
 
-		// ...and it's in the overflow, set it as the last active overflow item
-		if (activeElementIdx >= overflowIndex) {
-			setLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))
-		}
+		// now we know how many items to show, we need to walk through the items we found and show /
+		// hide them accordingly. We need to keep track of:
+		// the number of item's we've shown in the main content so far
+		let mainItemCount = 0
+		// the item that is currently active in the overflow content (if any)
+		let newActiveOverflowItem: string | null = null
+		// whether the last active overflow item is actually still in the overflow content
+		let shouldInvalidateLastActiveOverflowItem = false
+		// the buttons visible in the main content
+		const numberedButtons: HTMLButtonElement[] = []
+		function visitItems(
+			mainItems: Items,
+			overflowItems: Items | null
+		): {
+			// for each group of items we visit, we need to know whether we showed anything in
+			// either section
+			didShowAnyInMain: boolean
+			didShowAnyInOverflow: boolean
+		} {
+			if (overflowItems) assert(mainItems.length === overflowItems.length)
+
+			let didShowAnyInMain = false
+			let didShowAnyInOverflow = false
+
+			for (let i = 0; i < mainItems.length; i++) {
+				const mainItem = mainItems[i]
+				const overflowItem = overflowItems?.[i]
+
+				if (mainItem.type === 'item') {
+					const isLastActiveOverflowItem =
+						mainItem.element.getAttribute('data-value') === lastActiveOverflowItem
+
+					// for single items, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let shouldShowInMain
+					if (lastActiveOverflowItem) {
+						shouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem
+					} else {
+						// we use <= here because if there is no last active overflow item, we want
+						// to show at least one item in the main toolbar.
+						shouldShowInMain = mainItemCount <= itemsToShow
+					}
+					const shouldShowInOverflow = mainItemCount >= itemsToShow
 
-		// Save the buttons that are actually visible
-		rButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(
-			(el): el is HTMLElement => {
-				// only count html elements...
-				if (!(el instanceof HTMLElement)) return false
+					didShowAnyInMain ||= shouldShowInMain
+					didShowAnyInOverflow ||= shouldShowInOverflow
 
-				// ...that are buttons...
-				if (el.tagName.toLowerCase() !== 'button') return false
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						shouldShowInMain ? 'true' : 'false'
+					)
+					if (overflowItem) {
+						assert(overflowItem.type === 'item')
+						setAttribute(
+							overflowItem.element,
+							'data-toolbar-visible',
+							shouldShowInOverflow ? 'true' : 'false'
+						)
+					}
+					if (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {
+						newActiveOverflowItem = mainItem.element.getAttribute('data-value')
+					}
+					if (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {
+						numberedButtons.push(mainItem.element as HTMLButtonElement)
+					}
+					if (!shouldShowInOverflow && isLastActiveOverflowItem) {
+						shouldInvalidateLastActiveOverflowItem = true
+					}
+					mainItemCount++
+				} else {
+					// for groups, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let result, overflowGroup
+					if (overflowItem) {
+						assert(overflowItem.type === 'group')
+						overflowGroup = overflowItem
+						result = visitItems(mainItem.items, overflowGroup.items)
+					} else {
+						result = visitItems(mainItem.items, null)
+					}
 
-				// ...that are actually visible
-				return !!(el.offsetWidth || el.offsetHeight)
+					didShowAnyInMain ||= result.didShowAnyInMain
+					didShowAnyInOverflow ||= result.didShowAnyInOverflow
+
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						result.didShowAnyInMain ? 'true' : 'false'
+					)
+					if (overflowGroup) {
+						setAttribute(
+							overflowGroup.element,
+							'data-toolbar-visible',
+							result.didShowAnyInOverflow ? 'true' : 'false'
+						)
+					}
+				}
 			}
-		)
+			return { didShowAnyInMain, didShowAnyInOverflow }
+		}
+
+		const { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)
+		setShouldShowOverflow(didShowAnyInOverflow)
+		if (newActiveOverflowItem) {
+			setLastActiveOverflowItem(newActiveOverflowItem)
+		} else if (shouldInvalidateLastActiveOverflowItem) {
+			setLastActiveOverflowItem(null)
+		}
+
+		rButtons.current = numberedButtons
 	})
 
 	useLayoutEffect(() => {
@@ -124,20 +240,31 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		mutationObserver.observe(mainToolsRef.current, {
 			childList: true,
 			subtree: true,
-			attributeFilter: ['data-value', 'aria-pressed'],
+			attributes: true,
+			characterData: true,
 		})
 
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const resizeObserver = new ResizeObserver(onDomUpdate)
+		resizeObserver.observe(sizingParent)
+
 		return () => {
 			mutationObserver.disconnect()
+			resizeObserver.disconnect()
 		}
-	}, [onDomUpdate])
+	}, [onDomUpdate, sizingParentClassName])
 
 	useEffect(() => {
 		if (!editor.options.enableToolbarKeyboardShortcuts) return
 
 		function handleKeyDown(event: KeyboardEvent) {
-			if (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))
+			if (
+				areShortcutsDisabled(editor) ||
+				activeElementShouldCaptureKeys(true /* allow buttons */)
+			) {
 				return
+			}
+
 			// no accelerator keys
 			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return
 			const index = NUMBERED_SHORTCUT_KEYS[event.key]
@@ -154,37 +281,45 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	}, [editor])
 
 	const popoverId = 'toolbar overflow'
+
+	const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
 	return (
 		<>
-			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				className={classNames('tlui-toolbar__tools', {
-					'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				orientation={orientation}
+				className={classNames('tlui-main-toolbar__tools', {
+					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<div id={`${id}_main`} ref={mainToolsRef} className="tlui-toolbar__tools__list">
+				<Layout id={`${id}_main`} ref={mainToolsRef}>
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</div>
-				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
-				{totalItems > overflowIndex + 1 && (
+				</Layout>
+				{shouldShowOverflow && (
 					<IsInOverflowContext.Provider value={true}>
 						<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
 							<TldrawUiPopoverTrigger>
 								<TldrawUiToolbarButton
 									title={msg('tool-panel.more')}
 									type="tool"
-									className="tlui-toolbar__overflow"
+									className="tlui-main-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
-									<TldrawUiButtonIcon icon="chevron-up" />
+									<TldrawUiButtonIcon
+										icon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}
+									/>
 								</TldrawUiToolbarButton>
 							</TldrawUiPopoverTrigger>
-							<TldrawUiPopoverContent side="top" align="center">
+							<TldrawUiPopoverContent
+								side={orientation === 'horizontal' ? 'top' : 'right'}
+								align={orientation === 'horizontal' ? 'center' : 'end'}
+							>
 								<TldrawUiToolbar
-									className="tlui-buttons__grid"
+									orientation="grid"
+									className="tlui-main-toolbar__overflow-content"
+									ref={setOverflowTools}
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}
@@ -215,3 +350,19 @@ export const isActiveTLUiToolItem = (
 		? activeToolId === 'geo' && geoState === item.meta?.geo
 		: activeToolId === item.id
 }
+
+function findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {
+	let element: HTMLElement | null = startingElement
+	while (element) {
+		if (element.classList.contains(className)) {
+			return element
+		}
+		element = element.parentElement
+	}
+	throw new Error('Could not find parent with class name ' + className)
+}
+
+function setAttribute(element: HTMLElement, name: string, value: string) {
+	if (element.getAttribute(name) === value) return
+	element.setAttribute(name, value)
+}

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

@@ -31,8 +31,8 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 				type="normal"
 				title={msg('action.toggle-tool-lock')}
 				data-testid="tool-lock"
-				className={classNames('tlui-toolbar__lock-button', {
-					'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				className={classNames('tlui-main-toolbar__lock-button', {
+					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
 			>

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

@@ -1,13 +1,13 @@
 import {
 	DefaultColorStyle,
+	getColorValue,
 	SharedStyle,
 	StyleProp,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
-import classNames from 'classnames'
-import { ReactElement, memo, useMemo, useRef } from 'react'
+import { memo, ReactElement, useMemo, useRef } from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -15,6 +15,7 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
+import { TldrawUiGrid, TldrawUiRow } from './layout'
 
 /** @public */
 export interface TLUiButtonPickerProps<T extends string> {
@@ -116,41 +117,43 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
+	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
+
 	return (
-		<TldrawUiToolbarToggleGroup
-			data-testid={`style.${uiType}`}
-			type="single"
-			className={classNames('tlui-buttons__grid')}
-			value={value.type === 'shared' ? value.value : undefined}
-		>
-			{items.map((item) => {
-				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}
-						value={item.value}
-						data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-						data-isactive={value.type === 'shared' && value.value === item.value}
-						title={label}
-						className={classNames('tlui-button-grid__button')}
-						style={
-							style === (DefaultColorStyle as StyleProp<unknown>)
-								? { color: theme[item.value as TLDefaultColorStyle].solid }
-								: undefined
-						}
-						onPointerEnter={handleButtonPointerEnter}
-						onPointerDown={handleButtonPointerDown}
-						onPointerUp={handleButtonPointerUp}
-						onClick={handleButtonClick}
-					>
-						<TldrawUiButtonIcon icon={item.icon} />
-					</TldrawUiToolbarToggleItem>
-				)
-			})}
-		</TldrawUiToolbarToggleGroup>
+		<Wrapper asChild>
+			<TldrawUiToolbarToggleGroup
+				data-testid={`style.${uiType}`}
+				type="single"
+				value={value.type === 'shared' ? value.value : undefined}
+			>
+				{items.map((item) => {
+					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}
+							value={item.value}
+							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+							data-isactive={value.type === 'shared' && value.value === item.value}
+							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>
+					)
+				})}
+			</TldrawUiToolbarToggleGroup>
+		</Wrapper>
 	)
 }) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement

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

@@ -172,7 +172,7 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar className="tlui-menu tlui-buttons__horizontal" label={label}>
+			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -1,4 +1,5 @@
 import { useContainer } from '@tldraw/editor'
+import classNames from 'classnames'
 import { Popover as _Popover } from 'radix-ui'
 import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
@@ -9,15 +10,16 @@ export interface TLUiPopoverProps {
 	open?: boolean
 	children: React.ReactNode
 	onOpenChange?(isOpen: boolean): void
+	className?: string
 }
 
 /** @public @react */
-export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
+export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {
 	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
 
 	return (
 		<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>
-			<div className="tlui-popover">{children}</div>
+			<div className={classNames('tlui-popover', className)}>{children}</div>
 		</_Popover.Root>
 	)
 }

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

@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'
 import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
@@ -9,20 +10,42 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
+	orientation?: 'horizontal' | 'vertical' | 'grid'
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+const LayoutByOrientation = {
+	horizontal: TldrawUiRow,
+	vertical: TldrawUiColumn,
+	grid: TldrawUiGrid,
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	({ children, className, label, ...props }: TLUiToolbarProps, ref) => {
+	(
+		{
+			children,
+			className,
+			label,
+			orientation = 'horizontal',
+			tooltipSide,
+			...props
+		}: TLUiToolbarProps,
+		ref
+	) => {
+		const Layout = LayoutByOrientation[orientation]
 		return (
-			<_Toolbar.Root
-				ref={ref}
-				{...props}
-				className={classnames('tlui-toolbar-container', className)}
-				aria-label={label}
-			>
-				{children}
-			</_Toolbar.Root>
+			<Layout asChild tooltipSide={tooltipSide}>
+				<_Toolbar.Root
+					ref={ref}
+					{...props}
+					className={classnames('tlui-toolbar', className)}
+					aria-label={label}
+					orientation={orientation === 'grid' ? 'horizontal' : orientation}
+				>
+					{children}
+				</_Toolbar.Root>
+			</Layout>
 		)
 	}
 )