@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,415 @@
+import {
+	MAX_PAGES,
+	PageRecordType,
+	TLPageId,
+	releasePointerCapture,
+	setPointerCapture,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useBreakpoint } from '../../hooks/useBreakpoint'
+import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
+import { useReadonly } from '../../hooks/useReadonly'
+import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { Button } from '../primitives/Button'
+import { Icon } from '../primitives/Icon'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/Popover'
+import { PageItemInput } from './PageItemInput'
+import { PageItemSubmenu } from './PageItemSubmenu'
+import { onMovePage } from './edit-pages-shared'
+
+export const PageMenu = function PageMenu() {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const breakpoint = useBreakpoint()
+
+	const handleOpenChange = useCallback(() => setIsEditing(false), [])
+
+	const [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)
+
+	const ITEM_HEIGHT = 36
+
+	const rSortableContainer = useRef<HTMLDivElement>(null)
+
+	const pages = useValue('pages', () => editor.getPages(), [editor])
+	const currentPage = useValue('currentPage', () => editor.getCurrentPage(), [editor])
+	const currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor])
+
+	// When in readonly mode, we don't allow a user to edit the pages
+	const isReadonlyMode = useReadonly()
+
+	// If the user has reached the max page count, we disable the "add page" button
+	const maxPageCountReached = useValue(
+		'maxPageCountReached',
+		() => editor.getPages().length >= MAX_PAGES,
+		[editor]
+	)
+
+	const isCoarsePointer = useValue(
+		'isCoarsePointer',
+		() => editor.getInstanceState().isCoarsePointer,
+		[editor]
+	)
+
+	// The component has an "editing state" that may be toggled to expose additional controls
+	const [isEditing, setIsEditing] = useState(false)
+
+	const toggleEditing = useCallback(() => {
+		if (isReadonlyMode) return
+		setIsEditing((s) => !s)
+	}, [isReadonlyMode])
+
+	const rMutables = useRef({
+		isPointing: false,
+		status: 'idle' as 'idle' | 'pointing' | 'dragging',
+		pointing: null as { id: string; index: number } | null,
+		startY: 0,
+		startIndex: 0,
+		dragIndex: 0,
+	})
+
+	const [sortablePositionItems, setSortablePositionItems] = useState(
+		Object.fromEntries(
+			pages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])
+		)
+	)
+
+	// Update the sortable position items when the pages change
+	useLayoutEffect(() => {
+		setSortablePositionItems(
+			Object.fromEntries(
+				pages.map((page, i) => [page.id, { y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false }])
+			)
+		)
+	}, [ITEM_HEIGHT, pages])
+
+	// Scroll the current page into view when the menu opens / when current page changes
+	useEffect(() => {
+		if (!isOpen) return
+		requestAnimationFrame(() => {
+			const elm = document.querySelector(
+				`[data-testid="page-menu-item-${currentPageId}"]`
+			) as HTMLDivElement
+
+			if (elm) {
+				const container = rSortableContainer.current
+				if (!container) return
+				// Scroll into view is slightly borked on iOS Safari
+
+				// if top of less than top cuttoff, scroll into view at top
+				const elmTopPosition = elm.offsetTop
+				const containerScrollTopPosition = container.scrollTop
+				if (elmTopPosition < containerScrollTopPosition) {
+					container.scrollTo({ top: elmTopPosition })
+				}
+				// if bottom position is greater than bottom cutoff, scroll into view at bottom
+				const elmBottomPosition = elmTopPosition + ITEM_HEIGHT
+				const containerScrollBottomPosition = container.scrollTop + container.offsetHeight
+				if (elmBottomPosition > containerScrollBottomPosition) {
+					container.scrollTo({ top: elmBottomPosition - container.offsetHeight })
+				}
+			}
+		})
+	}, [ITEM_HEIGHT, currentPageId, isOpen])
+
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent<HTMLButtonElement>) => {
+			const { clientY, currentTarget } = e
+			const {
+				dataset: { id, index },
+			} = currentTarget
+
+			if (!id || !index) return
+
+			const mut = rMutables.current
+
+			setPointerCapture(e.currentTarget, e)
+
+			mut.status = 'pointing'
+			mut.pointing = { id, index: +index! }
+			const current = sortablePositionItems[id]
+			const dragY = current.y
+
+			mut.startY = clientY
+			mut.startIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))
+		},
+		[ITEM_HEIGHT, pages.length, sortablePositionItems]
+	)
+
+	const handlePointerMove = useCallback(
+		(e: React.PointerEvent<HTMLButtonElement>) => {
+			const mut = rMutables.current
+			if (mut.status === 'pointing') {
+				const { clientY } = e
+				const offset = clientY - mut.startY
+				if (Math.abs(offset) > 5) {
+					mut.status = 'dragging'
+				}
+			}
+
+			if (mut.status === 'dragging') {
+				const { clientY } = e
+				const offsetY = clientY - mut.startY
+				const current = sortablePositionItems[mut.pointing!.id]
+
+				const { startIndex, pointing } = mut
+				const dragY = current.y + offsetY
+				const dragIndex = Math.max(0, Math.min(Math.round(dragY / ITEM_HEIGHT), pages.length - 1))
+
+				const next = { ...sortablePositionItems }
+				next[pointing!.id] = {
+					y: current.y,
+					offsetY,
+					isSelected: true,
+				}
+
+				if (dragIndex !== mut.dragIndex) {
+					mut.dragIndex = dragIndex
+
+					for (let i = 0; i < pages.length; i++) {
+						const item = pages[i]
+						if (item.id === mut.pointing!.id) {
+							continue
+						}
+
+						let { y } = next[item.id]
+
+						if (dragIndex === startIndex) {
+							y = i * ITEM_HEIGHT
+						} else if (dragIndex < startIndex) {
+							if (dragIndex <= i && i < startIndex) {
+								y = (i + 1) * ITEM_HEIGHT
+							} else {
+								y = i * ITEM_HEIGHT
+							}
+						} else if (dragIndex > startIndex) {
+							if (dragIndex >= i && i > startIndex) {
+								y = (i - 1) * ITEM_HEIGHT
+							} else {
+								y = i * ITEM_HEIGHT
+							}
+						}
+
+						if (y !== next[item.id].y) {
+							next[item.id] = { y, offsetY: 0, isSelected: true }
+						}
+					}
+				}
+
+				setSortablePositionItems(next)
+			}
+		},
+		[ITEM_HEIGHT, pages, sortablePositionItems]
+	)
+
+	const handlePointerUp = useCallback(
+		(e: React.PointerEvent<HTMLButtonElement>) => {
+			const mut = rMutables.current
+
+			if (mut.status === 'dragging') {
+				const { id, index } = mut.pointing!
+				onMovePage(editor, id as TLPageId, index, mut.dragIndex)
+			}
+
+			releasePointerCapture(e.currentTarget, e)
+			mut.status = 'idle'
+		},
+		[editor]
+	)
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLButtonElement>) => {
+			const mut = rMutables.current
+			// bail on escape
+			if (e.key === 'Escape') {
+				if (mut.status === 'dragging') {
+					setSortablePositionItems(
+						Object.fromEntries(
+							pages.map((page, i) => [
+								page.id,
+								{ y: i * ITEM_HEIGHT, offsetY: 0, isSelected: false },
+							])
+						)
+					)
+				}
+
+				mut.status = 'idle'
+			}
+		},
+		[ITEM_HEIGHT, pages]
+	)
+
+	const handleCreatePageClick = useCallback(() => {
+		if (isReadonlyMode) return
+
+		editor.batch(() => {
+			editor.mark('creating page')
+			const newPageId = PageRecordType.createId()
+			editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
+			editor.setCurrentPage(newPageId)
+			setIsEditing(true)
+		})
+	}, [editor, msg, isReadonlyMode])
+
+	return (
+		<Popover id="pages" onOpenChange={onOpenChange} open={isOpen}>
+			<PopoverTrigger>
+				<Button
+					className="tlui-page-menu__trigger tlui-menu__trigger"
+					data-testid="main.page-menu"
+					icon="chevron-down"
+					type="menu"
+					title={currentPage.name}
+				>
+					<div className="tlui-page-menu__name">{currentPage.name}</div>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent side="bottom" align="start" sideOffset={6}>
+				<div className="tlui-page-menu__wrapper">
+					<div className="tlui-page-menu__header">
+						<div className="tlui-page-menu__header__title">{msg('page-menu.title')}</div>
+						{!isReadonlyMode && (
+							<div className="tlui-buttons__horizontal">
+								<Button
+									type="icon"
+									data-testid="page-menu.edit"
+									title={msg(isEditing ? 'page-menu.edit-done' : 'page-menu.edit-start')}
+									icon={isEditing ? 'check' : 'edit'}
+									onClick={toggleEditing}
+								/>
+								<Button
+									type="icon"
+									data-testid="page-menu.create"
+									icon="plus"
+									title={msg(
+										maxPageCountReached
+											? 'page-menu.max-page-count-reached'
+											: 'page-menu.create-new-page'
+									)}
+									disabled={maxPageCountReached}
+									onClick={handleCreatePageClick}
+								/>
+							</div>
+						)}
+					</div>
+					<div
+						className="tlui-page-menu__list tlui-menu__group"
+						style={{ height: ITEM_HEIGHT * pages.length + 4 }}
+						ref={rSortableContainer}
+					>
+						{pages.map((page, index) => {
+							const position = sortablePositionItems[page.id] ?? {
+								position: index * 40,
+								offsetY: 0,
+							}
+
+							return isEditing ? (
+								<div
+									key={page.id + '_editing'}
+									data-testid={`page-menu-item-${page.id}`}
+									className="tlui-page_menu__item__sortable"
+									style={{
+										zIndex: page.id === currentPage.id ? 888 : index,
+										transform: `translate(0px, ${position.y + position.offsetY}px)`,
+									}}
+								>
+									<Button
+										type="icon"
+										tabIndex={-1}
+										className="tlui-page_menu__item__sortable__handle"
+										icon="drag-handle-dots"
+										onPointerDown={handlePointerDown}
+										onPointerUp={handlePointerUp}
+										onPointerMove={handlePointerMove}
+										onKeyDown={handleKeyDown}
+										data-id={page.id}
+										data-index={index}
+									/>
+									{breakpoint < 5 && isCoarsePointer ? (
+										// sigh, this is a workaround for iOS Safari
+										// because the device and the radix popover seem
+										// to be fighting over scroll position. Nothing
+										// else seems to work!
+										<Button
+											type="normal"
+											className="tlui-page-menu__item__button"
+											onClick={() => {
+												const name = window.prompt('Rename page', page.name)
+												if (name && name !== page.name) {
+													editor.renamePage(page.id, name)
+												}
+											}}
+											onDoubleClick={toggleEditing}
+											isChecked={page.id === currentPage.id}
+										>
+											<span>{page.name}</span>
+										</Button>
+									) : (
+										<div
+											className="tlui-page_menu__item__sortable__title"
+											style={{ height: ITEM_HEIGHT }}
+										>
+											<PageItemInput
+												id={page.id}
+												name={page.name}
+												isCurrentPage={page.id === currentPage.id}
+											/>
+										</div>
+									)}
+									{!isReadonlyMode && (
+										<div className="tlui-page_menu__item__submenu" data-isediting={isEditing}>
+											<PageItemSubmenu index={index} item={page} listSize={pages.length} />
+										</div>
+									)}
+								</div>
+							) : (
+								<div
+									key={page.id}
+									data-testid={`page-menu-item-${page.id}`}
+									className="tlui-page-menu__item"
+								>
+									<Button
+										type="icon"
+										className="tlui-page-menu__item__button tlui-page-menu__item__button__checkbox"
+										onClick={() => editor.setCurrentPage(page.id)}
+										onDoubleClick={toggleEditing}
+										isChecked={page.id === currentPage.id}
+										title={msg('page-menu.go-to-page')}
+									>
+										<div className="tlui-page-menu__item__button__check">
+											{page.id === currentPage.id && <Icon icon="check" />}
+										</div>
+										<span>{page.name}</span>
+									</Button>
+									{!isReadonlyMode && (
+										<div className="tlui-page_menu__item__submenu">
+											<PageItemSubmenu
+												index={index}
+												item={page}
+												listSize={pages.length}
+												onRename={() => {
+													if (editor.environment.isIos) {
+														const name = window.prompt('Rename page', page.name)
+														if (name && name !== page.name) {
+															editor.renamePage(page.id, name)
+														}
+													} else {
+														editor.batch(() => {
+															setIsEditing(true)
+															editor.setCurrentPage(page.id)
+														})
+													}
+												}}
+											/>
+										</div>
+									)}
+								</div>
+							)
+						})}
+					</div>
+				</div>
+			</PopoverContent>
+		</Popover>
+	)
+}

package/src/lib/ui/components/PageMenu/edit-pages-shared.ts

@@ -0,0 +1,32 @@
+import {
+	Editor,
+	getIndexAbove,
+	getIndexBelow,
+	getIndexBetween,
+	TLPageId,
+} from '@bigbluebutton/editor'
+
+export const onMovePage = (editor: Editor, id: TLPageId, from: number, to: number) => {
+	let index: string
+
+	const pages = editor.getPages()
+
+	const below = from > to ? pages[to - 1] : pages[to]
+	const above = from > to ? pages[to] : pages[to + 1]
+
+	if (below && !above) {
+		index = getIndexAbove(below.index)
+	} else if (!below && above) {
+		index = getIndexBelow(pages[0].index)
+	} else {
+		index = getIndexBetween(below.index, above.index)
+	}
+
+	if (index !== pages[from].index) {
+		editor.mark('moving page')
+		editor.updatePage({
+			id: id as TLPageId,
+			index,
+		})
+	}
+}

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

@@ -0,0 +1,24 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import { useActions } from '../hooks/useActions'
+import { Button } from './primitives/Button'
+
+export const ExitPenMode = track(function ExitPenMode() {
+	const editor = useEditor()
+
+	const isPenMode = editor.getInstanceState().isPenMode
+
+	const actions = useActions()
+
+	if (!isPenMode) return null
+
+	const action = actions['exit-pen-mode']
+
+	return (
+		<Button
+			type="normal"
+			label={action.label}
+			iconLeft={action.icon}
+			onClick={() => action.onSelect('helper-buttons')}
+		/>
+	)
+})

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react'
+
+/** @internal */
+export function Spinner(props: React.SVGProps<SVGSVGElement>) {
+	return (
+		<svg width={16} height={16} viewBox="0 0 16 16" {...props}>
+			<g strokeWidth={2} fill="none" fillRule="evenodd">
+				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</path>
+			</g>
+		</svg>
+	)
+}

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

@@ -0,0 +1,23 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import { useActions } from '../hooks/useActions'
+import { Button } from './primitives/Button'
+
+export const StopFollowing = track(function ExitPenMode() {
+	const editor = useEditor()
+	const actions = useActions()
+
+	if (!editor.getInstanceState().followingUserId) {
+		return null
+	}
+
+	const action = actions['stop-following']
+
+	return (
+		<Button
+			type="normal"
+			label={action.label}
+			iconLeft={action.icon}
+			onClick={() => action.onSelect('people-menu')}
+		/>
+	)
+})

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

@@ -0,0 +1,150 @@
+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 } from '../primitives/Button'
+import * as DropdownMenu from '../primitives/DropdownMenu'
+import { StyleValuesForUi } from './styles'
+
+interface DoubleDropdownPickerProps<T extends string> {
+	uiTypeA: string
+	uiTypeB: string
+	label: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	labelA: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	labelB: TLUiTranslationKey | Exclude<string, TLUiTranslationKey>
+	itemsA: StyleValuesForUi<T>
+	itemsB: StyleValuesForUi<T>
+	styleA: StyleProp<T>
+	styleB: StyleProp<T>
+	valueA: SharedStyle<T>
+	valueB: SharedStyle<T>
+	onValueChange: (style: StyleProp<T>, value: T, squashing: boolean) => void
+}
+
+export const DoubleDropdownPicker = React.memo(function DoubleDropdownPicker<T extends string>({
+	label,
+	uiTypeA,
+	uiTypeB,
+	labelA,
+	labelB,
+	itemsA,
+	itemsB,
+	styleA,
+	styleB,
+	valueA,
+	valueB,
+	onValueChange,
+}: DoubleDropdownPickerProps<T>) {
+	const msg = useTranslation()
+
+	const iconA = React.useMemo(
+		() =>
+			itemsA.find((item) => valueA.type === 'shared' && valueA.value === item.value)?.icon ??
+			'mixed',
+		[itemsA, valueA]
+	)
+	const iconB = React.useMemo(
+		() =>
+			itemsB.find((item) => valueB.type === 'shared' && valueB.value === item.value)?.icon ??
+			'mixed',
+		[itemsB, valueB]
+	)
+
+	if (valueA === undefined && valueB === undefined) return null
+
+	return (
+		<div className="tlui-style-panel__double-select-picker">
+			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
+				{msg(label)}
+			</div>
+			<div className="tlui-buttons__horizontal">
+				<DropdownMenu.Root id={`style panel ${uiTypeA} A`}>
+					<Trigger
+						asChild
+						// Firefox fix: Stop the dropdown immediately closing after touch
+						onTouchEnd={(e) => preventDefault(e)}
+					>
+						<Button
+							type="icon"
+							data-testid={`style.${uiTypeA}`}
+							title={
+								msg(labelA) +
+								' — ' +
+								(valueA === null || valueA.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeA}-style.${valueA.value}` as TLUiTranslationKey))
+							}
+							icon={iconA as any}
+							invertIcon
+							smallIcon
+						/>
+					</Trigger>
+					<DropdownMenu.Content side="bottom" align="end" sideOffset={0} alignOffset={-2}>
+						<div className="tlui-buttons__grid">
+							{itemsA.map((item) => {
+								return (
+									<DropdownMenu.Item
+										type="icon"
+										title={
+											msg(labelA) +
+											' — ' +
+											msg(`${uiTypeA}-style.${item.value}` as TLUiTranslationKey)
+										}
+										data-testid={`style.${uiTypeA}.${item.value}`}
+										key={item.value}
+										icon={item.icon as TLUiIconType}
+										onClick={() => onValueChange(styleA, item.value, false)}
+										invertIcon
+									/>
+								)
+							})}
+						</div>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+				<DropdownMenu.Root id={`style panel ${uiTypeB}`}>
+					<Trigger
+						asChild
+						// Firefox fix: Stop the dropdown immediately closing after touch
+						onTouchEnd={(e) => preventDefault(e)}
+					>
+						<Button
+							type="icon"
+							data-testid={`style.${uiTypeB}`}
+							title={
+								msg(labelB) +
+								' — ' +
+								(valueB === null || valueB.type === 'mixed'
+									? msg('style-panel.mixed')
+									: msg(`${uiTypeB}-style.${valueB.value}` as TLUiTranslationKey))
+							}
+							icon={iconB as any}
+							smallIcon
+						/>
+					</Trigger>
+					<DropdownMenu.Content side="bottom" align="end" sideOffset={0} alignOffset={-2}>
+						<div className="tlui-buttons__grid">
+							{itemsB.map((item) => {
+								return (
+									<DropdownMenu.Item
+										type="icon"
+										title={
+											msg(labelB) +
+											' — ' +
+											msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)
+										}
+										data-testid={`style.${uiTypeB}.${item.value}`}
+										key={item.value}
+										icon={item.icon as TLUiIconType}
+										onClick={() => onValueChange(styleB, item.value, false)}
+									/>
+								)
+							})}
+						</div>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		</div>
+	)
+})