@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,76 @@
+import { SharedStyle, StyleProp, preventDefault } from '@bigbluebutton/editor'
+import { Trigger } from '@radix-ui/react-dropdown-menu'
+import * as React from 'react'
+import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../../icon-types'
+import { Button, TLUiButtonProps } from '../primitives/Button'
+import * as DropdownMenu from '../primitives/DropdownMenu'
+import { StyleValuesForUi } from './styles'
+
+interface DropdownPickerProps<T extends string> {
+	id: string
+	label?: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	uiType: string
+	style: StyleProp<T>
+	value: SharedStyle<T>
+	items: StyleValuesForUi<T>
+	type: TLUiButtonProps['type']
+	onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void
+}
+
+export const DropdownPicker = React.memo(function DropdownPicker<T extends string>({
+	id,
+	label,
+	uiType,
+	style,
+	items,
+	type,
+	value,
+	onValueChange,
+}: DropdownPickerProps<T>) {
+	const msg = useTranslation()
+
+	const icon = React.useMemo(
+		() => items.find((item) => value.type === 'shared' && item.value === value.value)?.icon,
+		[items, value]
+	)
+
+	return (
+		<DropdownMenu.Root id={`style panel ${id}`}>
+			<Trigger
+				asChild
+				// Firefox fix: Stop the dropdown immediately closing after touch
+				onTouchEnd={(e) => preventDefault(e)}
+			>
+				<Button
+					type={type}
+					data-testid={`style.${uiType}`}
+					title={
+						value.type === 'mixed'
+							? msg('style-panel.mixed')
+							: msg(`${uiType}-style.${value.value}` as TLUiTranslationKey)
+					}
+					label={label}
+					icon={(icon as TLUiIconType) ?? 'mixed'}
+				/>
+			</Trigger>
+			<DropdownMenu.Content side="left" align="center" alignOffset={0}>
+				<div className="tlui-buttons__grid">
+					{items.map((item) => {
+						return (
+							<DropdownMenu.Item
+								type="icon"
+								data-testid={`style.${uiType}.${item.value}`}
+								title={msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)}
+								key={item.value}
+								icon={item.icon as TLUiIconType}
+								onClick={() => onValueChange(style, item.value, false)}
+							/>
+						)
+					})}
+				</div>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	)
+})

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

@@ -0,0 +1,332 @@
+import {
+	ArrowShapeArrowheadEndStyle,
+	ArrowShapeArrowheadStartStyle,
+	DefaultColorStyle,
+	DefaultDashStyle,
+	DefaultFillStyle,
+	DefaultFontStyle,
+	DefaultHorizontalAlignStyle,
+	DefaultSizeStyle,
+	DefaultVerticalAlignStyle,
+	GeoShapeGeoStyle,
+	LineShapeSplineStyle,
+	ReadonlySharedStyleMap,
+	SharedStyle,
+	StyleProp,
+	minBy,
+	useEditor,
+} from '@bigbluebutton/editor'
+import React, { useCallback } from 'react'
+import { useRelevantStyles } from '../../hooks/useRevelantStyles'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { Button } from '../primitives/Button'
+import { ButtonPicker } from '../primitives/ButtonPicker'
+import { Slider } from '../primitives/Slider'
+import { DoubleDropdownPicker } from './DoubleDropdownPicker'
+import { DropdownPicker } from './DropdownPicker'
+import { STYLES } from './styles'
+
+interface StylePanelProps {
+	isMobile?: boolean
+}
+
+/** @internal */
+export const StylePanel = function StylePanel({ isMobile }: StylePanelProps) {
+	const editor = useEditor()
+
+	const relevantStyles = useRelevantStyles()
+
+	const handlePointerOut = useCallback(() => {
+		if (!isMobile) {
+			editor.updateInstanceState({ isChangingStyle: false })
+		}
+	}, [editor, isMobile])
+
+	if (!relevantStyles) return null
+
+	const { styles, opacity } = relevantStyles
+	const geo = styles.get(GeoShapeGeoStyle)
+	const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)
+	const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)
+	const spline = styles.get(LineShapeSplineStyle)
+	const font = styles.get(DefaultFontStyle)
+
+	const hideGeo = geo === undefined
+	const hideArrowHeads = arrowheadEnd === undefined && arrowheadStart === undefined
+	const hideSpline = spline === undefined
+	const hideText = font === undefined
+
+	return (
+		<div className="tlui-style-panel" data-ismobile={isMobile} onPointerLeave={handlePointerOut}>
+			<CommonStylePickerSet styles={styles} opacity={opacity} />
+			{!hideText && <TextStylePickerSet styles={styles} />}
+			{!(hideGeo && hideArrowHeads && hideSpline) && (
+				<div className="tlui-style-panel__section" aria-label="style panel styles">
+					<GeoStylePickerSet styles={styles} />
+					<ArrowheadStylePickerSet styles={styles} />
+					<SplineStylePickerSet styles={styles} />
+				</div>
+			)}
+		</div>
+	)
+}
+
+function useStyleChangeCallback() {
+	const editor = useEditor()
+
+	return React.useMemo(() => {
+		return function handleStyleChange<T>(style: StyleProp<T>, value: T, squashing: boolean) {
+			editor.batch(() => {
+				if (editor.isIn('select')) {
+					editor.setStyleForSelectedShapes(style, value, { squashing })
+				}
+				editor.setStyleForNextShapes(style, value, { squashing })
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
+		}
+	}, [editor])
+}
+
+const tldrawSupportedOpacities = [0.1, 0.25, 0.5, 0.75, 1] as const
+
+function CommonStylePickerSet({
+	styles,
+	opacity,
+}: {
+	styles: ReadonlySharedStyleMap
+	opacity: SharedStyle<number>
+}) {
+	const editor = useEditor()
+	const msg = useTranslation()
+
+	const handleValueChange = useStyleChangeCallback()
+
+	const handleOpacityValueChange = React.useCallback(
+		(value: number, ephemeral: boolean) => {
+			const item = tldrawSupportedOpacities[value]
+			editor.batch(() => {
+				if (editor.isIn('select')) {
+					editor.setOpacityForSelectedShapes(item, { ephemeral })
+				}
+				editor.setOpacityForNextShapes(item, { ephemeral })
+				editor.updateInstanceState({ isChangingStyle: true })
+			})
+		},
+		[editor]
+	)
+
+	const color = styles.get(DefaultColorStyle)
+	const fill = styles.get(DefaultFillStyle)
+	const dash = styles.get(DefaultDashStyle)
+	const size = styles.get(DefaultSizeStyle)
+
+	const showPickers = fill !== undefined || dash !== undefined || size !== undefined
+
+	const opacityIndex =
+		opacity.type === 'mixed'
+			? -1
+			: tldrawSupportedOpacities.indexOf(
+					minBy(tldrawSupportedOpacities, (supportedOpacity) =>
+						Math.abs(supportedOpacity - opacity.value)
+					)!
+			  )
+
+	return (
+		<>
+			<div
+				tabIndex={-1}
+				className="tlui-style-panel__section__common"
+				aria-label="style panel styles"
+			>
+				{color === undefined ? null : (
+					<ButtonPicker
+						title={msg('style-panel.color')}
+						uiType="color"
+						style={DefaultColorStyle}
+						items={STYLES.color}
+						value={color}
+						onValueChange={handleValueChange}
+					/>
+				)}
+				{opacity === undefined ? null : (
+					<Slider
+						data-testid="style.opacity"
+						value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
+						label={
+							opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`
+						}
+						onValueChange={handleOpacityValueChange}
+						steps={tldrawSupportedOpacities.length - 1}
+						title={msg('style-panel.opacity')}
+					/>
+				)}
+			</div>
+			{showPickers && (
+				<div className="tlui-style-panel__section" aria-label="style panel styles">
+					{fill === undefined ? null : (
+						<ButtonPicker
+							title={msg('style-panel.fill')}
+							uiType="fill"
+							style={DefaultFillStyle}
+							items={STYLES.fill}
+							value={fill}
+							onValueChange={handleValueChange}
+						/>
+					)}
+					{dash === undefined ? null : (
+						<ButtonPicker
+							title={msg('style-panel.dash')}
+							uiType="dash"
+							style={DefaultDashStyle}
+							items={STYLES.dash}
+							value={dash}
+							onValueChange={handleValueChange}
+						/>
+					)}
+					{size === undefined ? null : (
+						<ButtonPicker
+							title={msg('style-panel.size')}
+							uiType="size"
+							style={DefaultSizeStyle}
+							items={STYLES.size}
+							value={size}
+							onValueChange={handleValueChange}
+						/>
+					)}
+				</div>
+			)}
+		</>
+	)
+}
+
+function TextStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+	const msg = useTranslation()
+	const handleValueChange = useStyleChangeCallback()
+
+	const font = styles.get(DefaultFontStyle)
+	const align = styles.get(DefaultHorizontalAlignStyle)
+	const verticalAlign = styles.get(DefaultVerticalAlignStyle)
+	if (font === undefined && align === undefined) {
+		return null
+	}
+
+	return (
+		<div className="tlui-style-panel__section" aria-label="style panel text">
+			{font === undefined ? null : (
+				<ButtonPicker
+					title={msg('style-panel.font')}
+					uiType="font"
+					style={DefaultFontStyle}
+					items={STYLES.font}
+					value={font}
+					onValueChange={handleValueChange}
+				/>
+			)}
+
+			{align === undefined ? null : (
+				<div className="tlui-style-panel__row">
+					<ButtonPicker
+						title={msg('style-panel.align')}
+						uiType="align"
+						style={DefaultHorizontalAlignStyle}
+						items={STYLES.horizontalAlign}
+						value={align}
+						onValueChange={handleValueChange}
+					/>
+					<div className="tlui-style-panel__row__extra-button">
+						{verticalAlign === undefined ? (
+							<Button
+								type="icon"
+								title={msg('style-panel.vertical-align')}
+								data-testid="vertical-align"
+								icon="vertical-align-center"
+								disabled
+							/>
+						) : (
+							<DropdownPicker
+								type="icon"
+								id="geo-vertical-alignment"
+								uiType="verticalAlign"
+								style={DefaultVerticalAlignStyle}
+								items={STYLES.verticalAlign}
+								value={verticalAlign}
+								onValueChange={handleValueChange}
+							/>
+						)}
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}
+
+function GeoStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+	const handleValueChange = useStyleChangeCallback()
+
+	const geo = styles.get(GeoShapeGeoStyle)
+	if (geo === undefined) {
+		return null
+	}
+
+	return (
+		<DropdownPicker
+			id="geo"
+			type="menu"
+			label={'style-panel.geo'}
+			uiType="geo"
+			style={GeoShapeGeoStyle}
+			items={STYLES.geo}
+			value={geo}
+			onValueChange={handleValueChange}
+		/>
+	)
+}
+
+function SplineStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+	const handleValueChange = useStyleChangeCallback()
+
+	const spline = styles.get(LineShapeSplineStyle)
+	if (spline === undefined) {
+		return null
+	}
+
+	return (
+		<DropdownPicker
+			id="spline"
+			type="menu"
+			label={'style-panel.spline'}
+			uiType="spline"
+			style={LineShapeSplineStyle}
+			items={STYLES.spline}
+			value={spline}
+			onValueChange={handleValueChange}
+		/>
+	)
+}
+
+function ArrowheadStylePickerSet({ styles }: { styles: ReadonlySharedStyleMap }) {
+	const handleValueChange = useStyleChangeCallback()
+
+	const arrowheadEnd = styles.get(ArrowShapeArrowheadEndStyle)
+	const arrowheadStart = styles.get(ArrowShapeArrowheadStartStyle)
+	if (!arrowheadEnd || !arrowheadStart) {
+		return null
+	}
+
+	return (
+		<DoubleDropdownPicker
+			label={'style-panel.arrowheads'}
+			uiTypeA="arrowheadStart"
+			styleA={ArrowShapeArrowheadStartStyle}
+			itemsA={STYLES.arrowheadStart}
+			valueA={arrowheadStart}
+			uiTypeB="arrowheadEnd"
+			styleB={ArrowShapeArrowheadEndStyle}
+			itemsB={STYLES.arrowheadEnd}
+			valueB={arrowheadEnd}
+			onValueChange={handleValueChange}
+			labelA="style-panel.arrowhead-start"
+			labelB="style-panel.arrowhead-end"
+		/>
+	)
+}

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

@@ -0,0 +1,100 @@
+export type StyleValuesForUi<T> = readonly {
+	readonly value: T
+	readonly icon: string
+}[]
+
+export const STYLES = {
+	color: [
+		{ value: 'black', icon: 'color' },
+		{ value: 'grey', icon: 'color' },
+		{ value: 'light-violet', icon: 'color' },
+		{ value: 'violet', icon: 'color' },
+		{ value: 'blue', icon: 'color' },
+		{ value: 'light-blue', icon: 'color' },
+		{ value: 'yellow', icon: 'color' },
+		{ value: 'orange', icon: 'color' },
+		{ value: 'green', icon: 'color' },
+		{ value: 'light-green', icon: 'color' },
+		{ value: 'light-red', icon: 'color' },
+		{ value: 'red', icon: 'color' },
+	],
+	fill: [
+		{ value: 'none', icon: 'fill-none' },
+		{ value: 'semi', icon: 'fill-semi' },
+		{ value: 'solid', icon: 'fill-solid' },
+		{ value: 'pattern', icon: 'fill-pattern' },
+	],
+	dash: [
+		{ value: 'draw', icon: 'dash-draw' },
+		{ value: 'dashed', icon: 'dash-dashed' },
+		{ value: 'dotted', icon: 'dash-dotted' },
+		{ value: 'solid', icon: 'dash-solid' },
+	],
+	size: [
+		{ value: 's', icon: 'size-small' },
+		{ value: 'm', icon: 'size-medium' },
+		{ value: 'l', icon: 'size-large' },
+		{ value: 'xl', icon: 'size-extra-large' },
+	],
+	font: [
+		{ value: 'draw', icon: 'font-draw' },
+		{ value: 'sans', icon: 'font-sans' },
+		{ value: 'serif', icon: 'font-serif' },
+		{ value: 'mono', icon: 'font-mono' },
+	],
+	horizontalAlign: [
+		{ value: 'start', icon: 'text-align-left' },
+		{ value: 'middle', icon: 'text-align-center' },
+		{ value: 'end', icon: 'text-align-right' },
+	],
+	verticalAlign: [
+		{ value: 'start', icon: 'vertical-align-start' },
+		{ value: 'middle', icon: 'vertical-align-center' },
+		{ value: 'end', icon: 'vertical-align-end' },
+	],
+	geo: [
+		{ value: 'rectangle', icon: 'geo-rectangle' },
+		{ value: 'ellipse', icon: 'geo-ellipse' },
+		{ value: 'cloud', icon: 'geo-cloud' },
+		{ value: 'triangle', icon: 'geo-triangle' },
+		{ value: 'diamond', icon: 'geo-diamond' },
+		{ value: 'pentagon', icon: 'geo-pentagon' },
+		{ value: 'hexagon', icon: 'geo-hexagon' },
+		{ value: 'octagon', icon: 'geo-octagon' },
+		{ value: 'star', icon: 'geo-star' },
+		{ value: 'rhombus', icon: 'geo-rhombus' },
+		{ value: 'rhombus-2', icon: 'geo-rhombus-2' },
+		{ value: 'oval', icon: 'geo-oval' },
+		{ value: 'trapezoid', icon: 'geo-trapezoid' },
+		{ value: 'arrow-right', icon: 'geo-arrow-right' },
+		{ value: 'arrow-left', icon: 'geo-arrow-left' },
+		{ value: 'arrow-up', icon: 'geo-arrow-up' },
+		{ value: 'arrow-down', icon: 'geo-arrow-down' },
+		{ value: 'x-box', icon: 'geo-x-box' },
+		{ value: 'check-box', icon: 'geo-check-box' },
+	],
+	arrowheadStart: [
+		{ value: 'none', icon: 'arrowhead-none' },
+		{ value: 'arrow', icon: 'arrowhead-arrow' },
+		{ value: 'triangle', icon: 'arrowhead-triangle' },
+		{ value: 'square', icon: 'arrowhead-square' },
+		{ value: 'dot', icon: 'arrowhead-dot' },
+		{ value: 'diamond', icon: 'arrowhead-diamond' },
+		{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
+		{ value: 'bar', icon: 'arrowhead-bar' },
+	],
+	arrowheadEnd: [
+		{ value: 'none', icon: 'arrowhead-none' },
+		{ value: 'arrow', icon: 'arrowhead-arrow' },
+		{ value: 'triangle', icon: 'arrowhead-triangle' },
+		{ value: 'square', icon: 'arrowhead-square' },
+		{ value: 'dot', icon: 'arrowhead-dot' },
+		{ value: 'diamond', icon: 'arrowhead-diamond' },
+		{ value: 'inverted', icon: 'arrowhead-triangle-inverted' },
+		{ value: 'bar', icon: 'arrowhead-bar' },
+	],
+	spline: [
+		{ value: 'line', icon: 'spline-line' },
+		{ value: 'cubic', icon: 'spline-cubic' },
+	],
+} as const satisfies Record<string, StyleValuesForUi<string>>

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

@@ -0,0 +1,104 @@
+import * as T from '@radix-ui/react-toast'
+import * as React from 'react'
+import { TLUiToast, useToasts } from '../hooks/useToastsProvider'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../icon-types'
+import { Button } from './primitives/Button'
+import { Icon } from './primitives/Icon'
+
+function Toast({ toast }: { toast: TLUiToast }) {
+	const { removeToast } = useToasts()
+	const msg = useTranslation()
+
+	const onOpenChange = (isOpen: boolean) => {
+		if (!isOpen) {
+			removeToast(toast.id)
+		}
+	}
+
+	const hasActions = toast.actions && toast.actions.length > 0
+
+	return (
+		<T.Root
+			onOpenChange={onOpenChange}
+			className="tlui-toast__container"
+			duration={toast.keepOpen ? Infinity : 5000}
+		>
+			{toast.icon && (
+				<div className="tlui-toast__icon">
+					<Icon icon={toast.icon as TLUiIconType} />
+				</div>
+			)}
+			<div className="tlui-toast__main">
+				<div className="tlui-toast__content">
+					{toast.title && <T.Title className="tlui-toast__title">{toast.title}</T.Title>}
+					{toast.description && (
+						<T.Description className="tlui-toast__description">{toast.description}</T.Description>
+					)}
+				</div>
+				{toast.actions && (
+					<div className="tlui-toast__actions">
+						{toast.actions.map((action, i) => (
+							<T.Action key={i} altText={action.label} asChild onClick={action.onClick}>
+								<Button type={action.type}>{action.label}</Button>
+							</T.Action>
+						))}
+						<T.Close asChild>
+							<Button type="normal" className="tlui-toast__close" style={{ marginLeft: 'auto' }}>
+								{toast.closeLabel ?? msg('toast.close')}
+							</Button>
+						</T.Close>
+					</div>
+				)}
+			</div>
+			{!hasActions && (
+				<T.Close asChild>
+					<Button type="normal" className="tlui-toast__close">
+						{toast.closeLabel ?? msg('toast.close')}
+					</Button>
+				</T.Close>
+			)}
+		</T.Root>
+	)
+}
+
+function _Toasts() {
+	const { toasts } = useToasts()
+
+	return (
+		<>
+			{toasts.map((toast) => (
+				<Toast key={toast.id} toast={toast} />
+			))}
+		</>
+	)
+}
+
+export const Toasts = React.memo(_Toasts)
+
+export function ToastViewport() {
+	const { toasts } = useToasts()
+
+	const [hasToasts, setHasToasts] = React.useState(false)
+
+	React.useEffect(() => {
+		let cancelled = false
+		if (toasts.length) {
+			setHasToasts(true)
+		} else {
+			setTimeout(() => {
+				if (!cancelled) {
+					setHasToasts(false)
+				}
+			}, 1000)
+		}
+
+		return () => {
+			cancelled = true
+		}
+	}, [toasts.length, setHasToasts])
+
+	if (!hasToasts) return null
+
+	return <T.ToastViewport className="tlui-toast__viewport" />
+}

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

@@ -0,0 +1,45 @@
+import { useEditor, useValue } from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import { useBreakpoint } from '../../hooks/useBreakpoint'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { Button } from '../primitives/Button'
+
+interface ToggleToolLockedButtonProps {
+	activeToolId?: string
+}
+
+const NOT_LOCKABLE_TOOLS = [
+	'select',
+	'hand',
+	'draw',
+	'eraser',
+	'text',
+	'zoom',
+	'laser',
+	'highlight',
+]
+
+export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonProps) {
+	const editor = useEditor()
+	const breakpoint = useBreakpoint()
+	const msg = useTranslation()
+
+	const isToolLocked = useValue('is tool locked', () => editor.getInstanceState().isToolLocked, [
+		editor,
+	])
+
+	if (!activeToolId || NOT_LOCKABLE_TOOLS.includes(activeToolId)) return null
+
+	return (
+		<Button
+			type="normal"
+			title={msg('action.toggle-tool-lock')}
+			className={classNames('tlui-toolbar__lock-button', {
+				'tlui-toolbar__lock-button__mobile': breakpoint < 5,
+			})}
+			icon={isToolLocked ? 'lock' : 'unlock'}
+			onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
+			smallIcon
+		/>
+	)
+}