@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,281 @@
+import { GeoShapeGeoStyle, preventDefault, track, useEditor, useValue } from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import React, { memo } from 'react'
+import { useBreakpoint } from '../../hooks/useBreakpoint'
+import { useReadonly } from '../../hooks/useReadonly'
+import { TLUiToolbarItem, useToolbarSchema } from '../../hooks/useToolbarSchema'
+import { TLUiToolItem } from '../../hooks/useTools'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { ActionsMenu } from '../ActionsMenu'
+import { DuplicateButton } from '../DuplicateButton'
+import { MobileStylePanel } from '../MobileStylePanel'
+import { RedoButton } from '../RedoButton'
+import { TrashButton } from '../TrashButton'
+import { UndoButton } from '../UndoButton'
+import { Button } from '../primitives/Button'
+import * as M from '../primitives/DropdownMenu'
+import { kbdStr } from '../primitives/shared'
+import { ToggleToolLockedButton } from './ToggleToolLockedButton'
+
+/** @public */
+export const Toolbar = memo(function Toolbar() {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const breakpoint = useBreakpoint()
+
+	const rMostRecentlyActiveDropdownItem = React.useRef<TLUiToolbarItem | undefined>(undefined)
+
+	const isReadonly = useReadonly()
+	const toolbarItems = useToolbarSchema()
+	const laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')
+
+	const activeToolId = useValue('current tool id', () => editor.getCurrentToolId(), [editor])
+
+	const geoState = useValue(
+		'geo',
+		() => editor.getSharedStyles().getAsKnownValue(GeoShapeGeoStyle),
+		[editor]
+	)
+
+	const showEditingTools = !isReadonly
+
+	const getTitle = (item: TLUiToolItem) =>
+		item.label ? `${msg(item.label)} ${item.kbd ? kbdStr(item.kbd) : ''}` : ''
+
+	const activeTLUiToolbarItem = toolbarItems.find((item) => {
+		return isActiveTLUiToolItem(item.toolItem, activeToolId, geoState)
+	})
+
+	const { itemsInPanel, itemsInDropdown, dropdownFirstItem } = React.useMemo(() => {
+		const itemsInPanel: TLUiToolbarItem[] = []
+		const itemsInDropdown: TLUiToolbarItem[] = []
+		let dropdownFirstItem: TLUiToolbarItem | undefined
+
+		const overflowIndex = Math.min(8, 5 + breakpoint)
+
+		for (let i = 4; i < toolbarItems.length; i++) {
+			const item = toolbarItems[i]
+			if (i < overflowIndex) {
+				// Items below the overflow index will always be in the panel
+				itemsInPanel.push(item)
+			} else {
+				// Items above will be in the dropdown menu unless the item
+				// is active (or was the most recently selected active item)
+				if (item === activeTLUiToolbarItem) {
+					// If the dropdown item is active, make it the dropdownFirstItem
+					dropdownFirstItem = item
+				}
+				// Otherwise, add it to the items in dropdown menu
+				itemsInDropdown.push(item)
+			}
+		}
+
+		if (dropdownFirstItem) {
+			// noop
+		} else {
+			// If we don't have a currently active dropdown item, use the most
+			// recently active dropdown item as the current dropdown first item.
+
+			// If haven't ever had a most recently active dropdown item, then
+			// make the first item in the dropdown menu the most recently
+			// active dropdown item.
+			if (!rMostRecentlyActiveDropdownItem.current) {
+				rMostRecentlyActiveDropdownItem.current = itemsInDropdown[0]
+			}
+
+			dropdownFirstItem = rMostRecentlyActiveDropdownItem.current
+
+			// If the most recently active dropdown item is no longer in the
+			// dropdown (because the breakpoint has changed) then make the
+			// first item in the dropdown menu the most recently active
+			// dropdown item.
+			if (!itemsInDropdown.includes(dropdownFirstItem)) {
+				dropdownFirstItem = itemsInDropdown[0]
+			}
+		}
+
+		// We want this ref set to remember which item from the current
+		// set of dropdown items was most recently active
+		rMostRecentlyActiveDropdownItem.current = dropdownFirstItem
+
+		if (itemsInDropdown.length <= 2) {
+			itemsInPanel.push(...itemsInDropdown)
+			itemsInDropdown.length = 0
+		}
+
+		return { itemsInPanel, itemsInDropdown, dropdownFirstItem }
+	}, [toolbarItems, activeTLUiToolbarItem, breakpoint])
+
+	return (
+		<div className="tlui-toolbar">
+			<div className="tlui-toolbar__inner">
+				<div className="tlui-toolbar__left">
+					{!isReadonly && (
+						<div className="tlui-toolbar__extras">
+							{breakpoint < 6 && !(activeToolId === 'hand' || activeToolId === 'zoom') && (
+								<div className="tlui-toolbar__extras__controls tlui-buttons__horizontal">
+									<UndoButton />
+									<RedoButton />
+									<TrashButton />
+									<DuplicateButton />
+									<ActionsMenu />
+								</div>
+							)}
+							<ToggleToolLockedButton activeToolId={activeToolId} />
+						</div>
+					)}
+					<div
+						className={classNames('tlui-toolbar__tools', {
+							'tlui-toolbar__tools__mobile': breakpoint < 5,
+						})}
+					>
+						{/* Select / Hand */}
+						{toolbarItems.slice(0, 2).map(({ toolItem }) => {
+							return (
+								<ToolbarButton
+									key={toolItem.id}
+									item={toolItem}
+									title={getTitle(toolItem)}
+									isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}
+								/>
+							)
+						})}
+						{isReadonly && laserTool && (
+							<ToolbarButton
+								key={laserTool.toolItem.id}
+								item={laserTool.toolItem}
+								title={getTitle(laserTool.toolItem)}
+								isSelected={isActiveTLUiToolItem(laserTool.toolItem, activeToolId, geoState)}
+							/>
+						)}
+						{showEditingTools && (
+							<>
+								{/* Draw / Eraser */}
+								{toolbarItems.slice(2, 4).map(({ toolItem }) => (
+									<ToolbarButton
+										key={toolItem.id}
+										item={toolItem}
+										title={getTitle(toolItem)}
+										isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}
+									/>
+								))}
+								{/* Everything Else */}
+								{itemsInPanel.map(({ toolItem }) => (
+									<ToolbarButton
+										key={toolItem.id}
+										item={toolItem}
+										title={getTitle(toolItem)}
+										isSelected={isActiveTLUiToolItem(toolItem, activeToolId, geoState)}
+									/>
+								))}
+								{/* Overflowing Shapes */}
+								{itemsInDropdown.length ? (
+									<>
+										{/* Last selected (or first) item from the overflow */}
+										<ToolbarButton
+											key={dropdownFirstItem.toolItem.id}
+											item={dropdownFirstItem.toolItem}
+											title={getTitle(dropdownFirstItem.toolItem)}
+											isSelected={isActiveTLUiToolItem(
+												dropdownFirstItem.toolItem,
+												activeToolId,
+												geoState
+											)}
+										/>
+										{/* The dropdown to select everything else */}
+										<M.Root id="toolbar overflow" modal={false}>
+											<M.Trigger>
+												<Button
+													className="tlui-toolbar__overflow"
+													icon="chevron-up"
+													type="tool"
+													data-testid="tools.more"
+													title={msg('tool-panel.more')}
+												/>
+											</M.Trigger>
+											<M.Content side="top" align="center">
+												<OverflowToolsContent toolbarItems={itemsInDropdown} />
+											</M.Content>
+										</M.Root>
+									</>
+								) : null}
+							</>
+						)}
+					</div>
+				</div>
+				{breakpoint < 5 && !isReadonly && (
+					<div className="tlui-toolbar__tools">
+						<MobileStylePanel />
+					</div>
+				)}
+			</div>
+		</div>
+	)
+})
+
+const OverflowToolsContent = track(function OverflowToolsContent({
+	toolbarItems,
+}: {
+	toolbarItems: TLUiToolbarItem[]
+}) {
+	const msg = useTranslation()
+
+	return (
+		<div className="tlui-buttons__grid">
+			{toolbarItems.map(({ toolItem: { id, meta, kbd, label, onSelect, icon } }) => {
+				return (
+					<M.Item
+						key={id}
+						type="icon"
+						className="tlui-button-grid__button"
+						data-testid={`tools.more.${id}`}
+						data-tool={id}
+						data-geo={meta?.geo ?? ''}
+						aria-label={label}
+						onClick={() => onSelect('toolbar')}
+						title={label ? `${msg(label)} ${kbd ? kbdStr(kbd) : ''}` : ''}
+						icon={icon}
+					/>
+				)
+			})}
+		</div>
+	)
+})
+
+function ToolbarButton({
+	item,
+	title,
+	isSelected,
+}: {
+	item: TLUiToolItem
+	title: string
+	isSelected: boolean
+}) {
+	return (
+		<Button
+			type="tool"
+			data-testid={`tools.${item.id}`}
+			data-tool={item.id}
+			data-geo={item.meta?.geo ?? ''}
+			aria-label={item.label}
+			title={title}
+			icon={item.icon}
+			data-state={isSelected ? 'selected' : undefined}
+			onClick={() => item.onSelect('toolbar')}
+			onTouchStart={(e) => {
+				preventDefault(e)
+				item.onSelect('toolbar')
+			}}
+		/>
+	)
+}
+
+const isActiveTLUiToolItem = (
+	item: TLUiToolItem,
+	activeToolId: string | undefined,
+	geoState: string | null | undefined
+) => {
+	return item.meta?.geo
+		? activeToolId === 'geo' && geoState === item.meta?.geo
+		: activeToolId === item.id
+}

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

@@ -0,0 +1,28 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import { useActions } from '../hooks/useActions'
+import { useReadonly } from '../hooks/useReadonly'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import { kbdStr } from './primitives/shared'
+
+export const TrashButton = track(function TrashButton() {
+	const editor = useEditor()
+	const actions = useActions()
+	const msg = useTranslation()
+	const action = actions['delete']
+
+	const isReadonly = useReadonly()
+
+	if (isReadonly) return null
+
+	return (
+		<Button
+			icon={action.icon}
+			type="icon"
+			onClick={() => action.onSelect('quick-actions')}
+			disabled={!(editor.isIn('select') && editor.getSelectedShapeIds().length > 0)}
+			title={`${msg(action.label!)} ${kbdStr(action.kbd!)}`}
+			smallIcon
+		/>
+	)
+})

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

@@ -0,0 +1,26 @@
+import { memo } from 'react'
+import { useActions } from '../hooks/useActions'
+import { useCanUndo } from '../hooks/useCanUndo'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import { kbdStr } from './primitives/shared'
+
+export const UndoButton = memo(function UndoButton() {
+	const msg = useTranslation()
+	const canUndo = useCanUndo()
+	const actions = useActions()
+
+	const undo = actions['undo']
+
+	return (
+		<Button
+			data-testid="main.undo"
+			icon={undo.icon}
+			type="icon"
+			title={`${msg(undo.label!)} ${kbdStr(undo.kbd!)}`}
+			disabled={!canUndo}
+			onClick={() => undo.onSelect('quick-actions')}
+			smallIcon
+		/>
+	)
+})

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

@@ -0,0 +1,69 @@
+import classnames from 'classnames'
+import * as React from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { Spinner } from '../Spinner'
+import { Icon } from './Icon'
+import { Kbd } from './Kbd'
+
+/** @public */
+export interface TLUiButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+	loading?: boolean // TODO: loading spinner
+	disabled?: boolean
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	icon?: TLUiIconType | Exclude<string, TLUiIconType>
+	spinner?: boolean
+	iconLeft?: TLUiIconType | Exclude<string, TLUiIconType>
+	smallIcon?: boolean
+	kbd?: string
+	isChecked?: boolean
+	invertIcon?: boolean
+	type: 'normal' | 'primary' | 'danger' | 'low' | 'icon' | 'tool' | 'menu' | 'help'
+}
+
+/** @public */
+export const Button = React.forwardRef<HTMLButtonElement, TLUiButtonProps>(function Button(
+	{
+		label,
+		icon,
+		invertIcon,
+		iconLeft,
+		smallIcon,
+		kbd,
+		isChecked = false,
+		type,
+		children,
+		spinner,
+		...props
+	},
+	ref
+) {
+	const msg = useTranslation()
+	const labelStr = label ? msg(label) : ''
+
+	return (
+		<button
+			ref={ref}
+			draggable={false}
+			type="button"
+			{...props}
+			title={props.title ?? labelStr}
+			className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
+		>
+			{iconLeft && <Icon icon={iconLeft} className="tlui-button__icon-left" small />}
+			{children}
+			{label && (
+				<span className="tlui-button__label" draggable={false}>
+					{labelStr}
+					{isChecked && <Icon icon="check" />}
+				</span>
+			)}
+			{kbd && <Kbd>{kbd}</Kbd>}
+			{icon && !spinner && (
+				<Icon icon={icon} small={!!label || smallIcon} invertIcon={invertIcon} />
+			)}
+			{spinner && <Spinner />}
+		</button>
+	)
+})

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

@@ -0,0 +1,128 @@
+import {
+	DefaultColorStyle,
+	SharedStyle,
+	StyleProp,
+	TLDefaultColorStyle,
+	getDefaultColorTheme,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import * as React from 'react'
+import { useRef } from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { StyleValuesForUi } from '../StylePanel/styles'
+import { Button } from './Button'
+
+/** @internal */
+export interface ButtonPickerProps<T extends string> {
+	title: string
+	uiType: string
+	style: StyleProp<T>
+	value: SharedStyle<T>
+	items: StyleValuesForUi<T>
+	onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void
+}
+
+function _ButtonPicker<T extends string>(props: ButtonPickerProps<T>) {
+	const {
+		uiType,
+		items,
+		title,
+		style,
+		value,
+		// columns = clamp(items.length, 2, 4),
+		onValueChange,
+	} = props
+	const editor = useEditor()
+	const msg = useTranslation()
+
+	const rPointing = useRef(false)
+
+	const {
+		handleButtonClick,
+		handleButtonPointerDown,
+		handleButtonPointerEnter,
+		handleButtonPointerUp,
+	} = React.useMemo(() => {
+		const handlePointerUp = () => {
+			rPointing.current = false
+			window.removeEventListener('pointerup', handlePointerUp)
+		}
+
+		const handleButtonClick = (e: React.PointerEvent<HTMLButtonElement>) => {
+			const { id } = e.currentTarget.dataset
+			if (value.type === 'shared' && value.value === id) return
+
+			editor.mark('point picker item')
+			onValueChange(style, id as T, false)
+		}
+
+		const handleButtonPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+			const { id } = e.currentTarget.dataset
+
+			editor.mark('point picker item')
+			onValueChange(style, id as T, true)
+
+			rPointing.current = true
+			window.addEventListener('pointerup', handlePointerUp) // see TLD-658
+		}
+
+		const handleButtonPointerEnter = (e: React.PointerEvent<HTMLButtonElement>) => {
+			if (!rPointing.current) return
+
+			const { id } = e.currentTarget.dataset
+			onValueChange(style, id as T, true)
+		}
+
+		const handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {
+			const { id } = e.currentTarget.dataset
+			onValueChange(style, id as T, false)
+		}
+
+		return {
+			handleButtonClick,
+			handleButtonPointerDown,
+			handleButtonPointerEnter,
+			handleButtonPointerUp,
+		}
+	}, [value, editor, onValueChange, style])
+
+	const theme = useValue(
+		'theme',
+		() => getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() }),
+		[editor]
+	)
+
+	return (
+		<div className={classNames('tlui-buttons__grid')}>
+			{items.map((item) => (
+				<Button
+					type="icon"
+					key={item.value}
+					data-id={item.value}
+					data-testid={`style.${uiType}.${item.value}`}
+					aria-label={item.value}
+					data-state={value.type === 'shared' && value.value === item.value ? 'hinted' : undefined}
+					title={title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}
+					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}
+					icon={item.icon as TLUiIconType}
+				/>
+			))}
+		</div>
+	)
+}
+
+/** @internal */
+export const ButtonPicker = React.memo(_ButtonPicker) as typeof _ButtonPicker

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

@@ -0,0 +1,57 @@
+import * as _Dialog from '@radix-ui/react-dialog'
+import classNames from 'classnames'
+import { Button } from './Button'
+import { Icon } from './Icon'
+
+/** @public */
+export function Header({ className, children }: { className?: string; children: any }) {
+	return <div className={classNames('tlui-dialog__header', className)}>{children}</div>
+}
+
+/** @public */
+export function Title({ className, children }: { className?: string; children: any }) {
+	return (
+		<_Dialog.DialogTitle dir="ltr" className={classNames('tlui-dialog__header__title', className)}>
+			{children}
+		</_Dialog.DialogTitle>
+	)
+}
+
+/** @public */
+export function CloseButton() {
+	return (
+		<div className="tlui-dialog__header__close">
+			<_Dialog.DialogClose data-testid="dialog.close" dir="ltr" asChild>
+				<Button
+					type="icon"
+					aria-label="Close"
+					onTouchEnd={(e) => (e.target as HTMLButtonElement).click()}
+				>
+					<Icon small icon="cross-2" />
+				</Button>
+			</_Dialog.DialogClose>
+		</div>
+	)
+}
+
+/** @public */
+export function Body({
+	className,
+	children,
+	style,
+}: {
+	className?: string
+	children: any
+	style?: React.CSSProperties
+}) {
+	return (
+		<div className={classNames('tlui-dialog__body', className)} style={style}>
+			{children}
+		</div>
+	)
+}
+
+/** @public */
+export function Footer({ className, children }: { className?: string; children: any }) {
+	return <div className={classNames('tlui-dialog__footer', className)}>{children}</div>
+}