@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,129 @@
+import { Editor, useEditor } from '@bigbluebutton/editor'
+import * as React from 'react'
+import { TLUiMenuChild } from '../hooks/menuHelpers'
+import { useBreakpoint } from '../hooks/useBreakpoint'
+import { useMenuSchema } from '../hooks/useMenuSchema'
+import { useReadonly } from '../hooks/useReadonly'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { LanguageMenu } from './LanguageMenu'
+import { Button } from './primitives/Button'
+import * as M from './primitives/DropdownMenu'
+import { Kbd } from './primitives/Kbd'
+
+export const Menu = React.memo(function Menu() {
+	const msg = useTranslation()
+
+	return (
+		<M.Root id="main menu">
+			<M.Trigger>
+				<Button
+					type="icon"
+					className="tlui-menu__trigger"
+					data-testid="main.menu"
+					title={msg('menu.title')}
+					icon="menu"
+					smallIcon
+				/>
+			</M.Trigger>
+			<M.Content alignOffset={0} sideOffset={6}>
+				<MenuContent />
+			</M.Content>
+		</M.Root>
+	)
+})
+
+function MenuContent() {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const menuSchema = useMenuSchema()
+	const breakpoint = useBreakpoint()
+	const isReadonly = useReadonly()
+
+	function getMenuItem(
+		editor: Editor,
+		item: TLUiMenuChild,
+		parent: TLUiMenuChild | null,
+		depth: number
+	) {
+		if (!item) return null
+		switch (item.type) {
+			case 'custom': {
+				if (isReadonly && !item.readonlyOk) return null
+
+				if (item.id === 'LANGUAGE_MENU') {
+					return <LanguageMenu key="item" />
+				}
+
+				return null
+			}
+			case 'group': {
+				if (isReadonly && !item.readonlyOk) return null
+
+				return (
+					<M.Group
+						size={
+							depth <= 1
+								? 'medium'
+								: breakpoint < 3 || (parent?.type === 'submenu' && depth > 2)
+								? 'tiny'
+								: 'medium'
+						}
+						key={item.id}
+					>
+						{item.children.map((child) => getMenuItem(editor, child, item, depth + 1))}
+					</M.Group>
+				)
+			}
+			case 'submenu': {
+				if (isReadonly && !item.readonlyOk) return null
+
+				return (
+					<M.Sub id={`main menu ${parent ? parent.id + ' ' : ''}${item.id}`} key={item.id}>
+						<M.SubTrigger label={item.label} data-testid={`menu-item.${item.id}`} />
+						<M.SubContent sideOffset={-4} alignOffset={-1}>
+							{item.children.map((child) => getMenuItem(editor, child, item, depth + 1))}
+						</M.SubContent>
+					</M.Sub>
+				)
+			}
+			case 'item': {
+				if (isReadonly && !item.readonlyOk) return null
+
+				const { id, checkbox, menuLabel, label, onSelect, kbd } = item.actionItem
+				const labelToUse = menuLabel ?? label
+				const labelStr = labelToUse ? msg(labelToUse) : undefined
+
+				if (checkbox) {
+					// Item is in a checkbox group
+					return (
+						<M.CheckboxItem
+							key={id}
+							onSelect={() => onSelect('menu')}
+							title={labelStr ? labelStr : ''}
+							checked={item.checked}
+							disabled={item.disabled}
+						>
+							{labelStr && <span className="tlui-button__label">{labelStr}</span>}
+							{kbd && <Kbd>{kbd}</Kbd>}
+						</M.CheckboxItem>
+					)
+				}
+
+				// Item is a button
+				return (
+					<M.Item
+						type="menu"
+						key={id}
+						data-testid={`menu-item.${item.id}`}
+						kbd={kbd}
+						label={labelToUse}
+						onClick={() => onSelect('menu')}
+						disabled={item.disabled}
+					/>
+				)
+			}
+		}
+	}
+
+	return <>{menuSchema.map((item) => getMenuItem(editor, item, null, 0))}</>
+}

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

@@ -0,0 +1,35 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import { useBreakpoint } from '../hooks/useBreakpoint'
+import { useReadonly } from '../hooks/useReadonly'
+import { ActionsMenu } from './ActionsMenu'
+import { DuplicateButton } from './DuplicateButton'
+import { Menu } from './Menu'
+import { PageMenu } from './PageMenu/PageMenu'
+import { RedoButton } from './RedoButton'
+import { TrashButton } from './TrashButton'
+import { UndoButton } from './UndoButton'
+
+export const MenuZone = track(function MenuZone() {
+	const editor = useEditor()
+
+	const breakpoint = useBreakpoint()
+	const isReadonly = useReadonly()
+
+	return (
+		<div className="tlui-menu-zone">
+			<div className="tlui-buttons__horizontal">
+				<Menu />
+				<PageMenu />
+				{breakpoint >= 6 && !isReadonly && !editor.isInAny('hand', 'zoom') && (
+					<>
+						<UndoButton />
+						<RedoButton />
+						<TrashButton />
+						<DuplicateButton />
+						<ActionsMenu />
+					</>
+				)}
+			</div>
+		</div>
+	)
+})

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

@@ -0,0 +1,61 @@
+import {
+	DefaultColorStyle,
+	TLDefaultColorStyle,
+	getDefaultColorTheme,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+import { useCallback } from 'react'
+import { useRelevantStyles } from '../hooks/useRevelantStyles'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { StylePanel } from './StylePanel/StylePanel'
+import { Button } from './primitives/Button'
+import { Icon } from './primitives/Icon'
+import { Popover, PopoverContent, PopoverTrigger } from './primitives/Popover'
+
+export function MobileStylePanel() {
+	const editor = useEditor()
+	const msg = useTranslation()
+
+	const relevantStyles = useRelevantStyles()
+	const color = relevantStyles?.styles.get(DefaultColorStyle)
+	const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })
+	const currentColor = (
+		color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
+	).solid
+
+	const disableStylePanel = useValue(
+		'isHandOrEraserToolActive',
+		() => editor.isInAny('hand', 'zoom', 'eraser', 'laser'),
+		[editor]
+	)
+
+	const handleStylesOpenChange = useCallback(
+		(isOpen: boolean) => {
+			if (!isOpen) {
+				editor.updateInstanceState({ isChangingStyle: false })
+			}
+		},
+		[editor]
+	)
+
+	return (
+		<Popover id="style menu" onOpenChange={handleStylesOpenChange}>
+			<PopoverTrigger disabled={disableStylePanel}>
+				<Button
+					type="tool"
+					data-testid="mobile.styles"
+					style={{
+						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
+					}}
+					title={msg('style-panel.title')}
+				>
+					<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent side="top" align="end">
+				<StylePanel isMobile />
+			</PopoverContent>
+		</Popover>
+	)
+}

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

@@ -0,0 +1,104 @@
+import { PageRecordType, TLPageId, track, useContainer, useEditor } from '@bigbluebutton/editor'
+import * as _ContextMenu from '@radix-ui/react-context-menu'
+import { useToasts } from '../hooks/useToastsProvider'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+
+export const MoveToPageMenu = track(function MoveToPageMenu() {
+	const editor = useEditor()
+	const container = useContainer()
+	const pages = editor.getPages()
+	const currentPageId = editor.getCurrentPageId()
+	const msg = useTranslation()
+	const { addToast } = useToasts()
+
+	return (
+		<_ContextMenu.Sub>
+			<_ContextMenu.SubTrigger dir="ltr" asChild>
+				<Button
+					type="menu"
+					label="context-menu.move-to-page"
+					data-testid="menu-item.move-to-page"
+					icon="chevron-right"
+				/>
+			</_ContextMenu.SubTrigger>
+			<_ContextMenu.Portal container={container}>
+				<_ContextMenu.SubContent className="tlui-menu" sideOffset={-4} collisionPadding={4}>
+					<_ContextMenu.Group
+						dir="ltr"
+						className={'tlui-menu__group'}
+						data-testid={`menu-item.pages`}
+						key="pages"
+					>
+						{pages.map((page) => (
+							<_ContextMenu.Item
+								key={page.id}
+								disabled={currentPageId === page.id}
+								onSelect={() => {
+									editor.mark('move_shapes_to_page')
+									editor.moveShapesToPage(editor.getSelectedShapeIds(), page.id as TLPageId)
+
+									const toPage = editor.getPage(page.id)
+
+									if (toPage) {
+										addToast({
+											title: 'Changed Page',
+											description: `Moved to ${toPage.name}.`,
+											actions: [
+												{
+													label: 'Go Back',
+													type: 'primary',
+													onClick: () => {
+														editor.mark('change-page')
+														editor.setCurrentPage(currentPageId)
+													},
+												},
+											],
+										})
+									}
+								}}
+								asChild
+							>
+								<Button
+									type="menu"
+									title={page.name}
+									className="tlui-context-menu__move-to-page__name"
+								>
+									<span className="tlui-button__label">{page.name}</span>
+								</Button>
+							</_ContextMenu.Item>
+						))}
+					</_ContextMenu.Group>
+					<_ContextMenu.Group
+						dir="ltr"
+						className={'tlui-menu__group'}
+						data-testid={`menu-item.new-page`}
+						key="new-page"
+					>
+						<_ContextMenu.Item
+							key="new-page"
+							onSelect={() => {
+								const newPageId = PageRecordType.createId()
+								const ids = editor.getSelectedShapeIds()
+								editor.batch(() => {
+									editor.mark('move_shapes_to_page')
+									editor.createPage({ name: msg('page-menu.new-page-initial-name'), id: newPageId })
+									editor.moveShapesToPage(ids, newPageId)
+								})
+							}}
+							asChild
+						>
+							<Button
+								type="menu"
+								title={msg('context.pages.new-page')}
+								className="tlui-context-menu__move-to-page__name"
+							>
+								<span className="tlui-button__label">{msg('context.pages.new-page')}</span>
+							</Button>
+						</_ContextMenu.Item>
+					</_ContextMenu.Group>
+				</_ContextMenu.SubContent>
+			</_ContextMenu.Portal>
+		</_ContextMenu.Sub>
+	)
+})

package/src/lib/ui/components/NavigationZone/Minimap.tsx

@@ -0,0 +1,245 @@
+import {
+	ANIMATION_MEDIUM_MS,
+	Box2d,
+	TLPointerEventInfo,
+	TLShapeId,
+	Vec2d,
+	getPointerInfo,
+	intersectPolygonPolygon,
+	normalizeWheel,
+	releasePointerCapture,
+	setPointerCapture,
+	useComputed,
+	useEditor,
+	useIsDarkMode,
+	useQuickReactor,
+} from '@bigbluebutton/editor'
+import * as React from 'react'
+import { MinimapManager } from './MinimapManager'
+
+export interface MinimapProps {
+	shapeFill: string
+	selectFill: string
+	viewportFill: string
+}
+
+export function Minimap({ shapeFill, selectFill, viewportFill }: MinimapProps) {
+	const editor = useEditor()
+
+	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
+	const rPointing = React.useRef(false)
+
+	const isDarkMode = useIsDarkMode()
+	const devicePixelRatio = useComputed('dpr', () => editor.getInstanceState().devicePixelRatio, [
+		editor,
+	])
+	const presences = React.useMemo(() => editor.store.query.records('instance_presence'), [editor])
+
+	const minimap = React.useMemo(() => new MinimapManager(editor), [editor])
+
+	React.useEffect(() => {
+		// Must check after render
+		const raf = requestAnimationFrame(() => {
+			const style = getComputedStyle(editor.getContainer())
+
+			minimap.colors = {
+				shapeFill: style.getPropertyValue(shapeFill).trim(),
+				selectFill: style.getPropertyValue(selectFill).trim(),
+				viewportFill: style.getPropertyValue(viewportFill).trim(),
+			}
+
+			minimap.render()
+		})
+		return () => {
+			cancelAnimationFrame(raf)
+		}
+	}, [editor, selectFill, shapeFill, viewportFill, minimap, isDarkMode])
+
+	const onDoubleClick = React.useCallback(
+		(e: React.MouseEvent<HTMLCanvasElement>) => {
+			if (!editor.getCurrentPageShapeIds().size) return
+
+			const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)
+
+			const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)
+
+			minimap.originPagePoint.setTo(clampedPoint)
+			minimap.originPageCenter.setTo(editor.getViewportPageBounds().center)
+
+			editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
+		},
+		[editor, minimap]
+	)
+
+	const onPointerDown = React.useCallback(
+		(e: React.PointerEvent<HTMLCanvasElement>) => {
+			const elm = e.currentTarget
+			setPointerCapture(elm, e)
+			if (!editor.getCurrentPageShapeIds().size) return
+
+			rPointing.current = true
+
+			minimap.isInViewport = false
+
+			const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, false)
+
+			const clampedPoint = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, false, true)
+
+			const _vpPageBounds = editor.getViewportPageBounds()
+
+			minimap.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
+
+			if (minimap.isInViewport) {
+				minimap.originPagePoint.setTo(clampedPoint)
+				minimap.originPageCenter.setTo(_vpPageBounds.center)
+			} else {
+				const delta = Vec2d.Sub(_vpPageBounds.center, _vpPageBounds.point)
+				const pagePoint = Vec2d.Add(point, delta)
+				minimap.originPagePoint.setTo(pagePoint)
+				minimap.originPageCenter.setTo(point)
+				editor.centerOnPoint(point, { duration: ANIMATION_MEDIUM_MS })
+			}
+
+			function release(e: PointerEvent) {
+				if (elm) {
+					releasePointerCapture(elm, e)
+				}
+				rPointing.current = false
+				document.body.removeEventListener('pointerup', release)
+			}
+
+			document.body.addEventListener('pointerup', release)
+		},
+		[editor, minimap]
+	)
+
+	const onPointerMove = React.useCallback(
+		(e: React.PointerEvent<HTMLCanvasElement>) => {
+			const point = minimap.minimapScreenPointToPagePoint(e.clientX, e.clientY, e.shiftKey, true)
+
+			if (rPointing.current) {
+				if (minimap.isInViewport) {
+					const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)
+					editor.centerOnPoint(Vec2d.Sub(point, delta))
+					return
+				}
+
+				editor.centerOnPoint(point)
+			}
+
+			const pagePoint = minimap.getPagePoint(e.clientX, e.clientY)
+
+			const screenPoint = editor.pageToScreen(pagePoint)
+
+			const info: TLPointerEventInfo = {
+				type: 'pointer',
+				target: 'canvas',
+				name: 'pointer_move',
+				...getPointerInfo(e),
+				point: screenPoint,
+				isPen: editor.getInstanceState().isPenMode,
+			}
+
+			editor.dispatch(info)
+		},
+		[editor, minimap]
+	)
+
+	const onWheel = React.useCallback(
+		(e: React.WheelEvent<HTMLCanvasElement>) => {
+			const offset = normalizeWheel(e)
+
+			editor.dispatch({
+				type: 'wheel',
+				name: 'wheel',
+				delta: offset,
+				point: new Vec2d(e.clientX, e.clientY),
+				shiftKey: e.shiftKey,
+				altKey: e.altKey,
+				ctrlKey: e.metaKey || e.ctrlKey,
+			})
+		},
+		[editor]
+	)
+
+	// Update the minimap's dpr when the dpr changes
+	useQuickReactor(
+		'update when dpr changes',
+		() => {
+			const dpr = devicePixelRatio.get()
+			minimap.setDpr(dpr)
+
+			const canvas = rCanvas.current as HTMLCanvasElement
+			const rect = canvas.getBoundingClientRect()
+			const width = rect.width * dpr
+			const height = rect.height * dpr
+
+			// These must happen in order
+			canvas.width = width
+			canvas.height = height
+			minimap.canvasScreenBounds.set(rect.x, rect.y, width, height)
+
+			minimap.cvs = rCanvas.current
+		},
+		[devicePixelRatio, minimap]
+	)
+
+	useQuickReactor(
+		'minimap render when pagebounds or collaborators changes',
+		() => {
+			const shapeIdsOnCurrentPage = editor.getCurrentPageShapeIds()
+			const commonBoundsOfAllShapesOnCurrentPage = editor.getCurrentPageBounds()
+			const viewportPageBounds = editor.getViewportPageBounds()
+
+			const _dpr = devicePixelRatio.get() // dereference
+
+			minimap.contentPageBounds = commonBoundsOfAllShapesOnCurrentPage
+				? Box2d.Expand(commonBoundsOfAllShapesOnCurrentPage, viewportPageBounds)
+				: viewportPageBounds
+
+			minimap.updateContentScreenBounds()
+
+			// All shape bounds
+
+			const allShapeBounds = [] as (Box2d & { id: TLShapeId })[]
+
+			shapeIdsOnCurrentPage.forEach((id) => {
+				let pageBounds = editor.getShapePageBounds(id) as Box2d & { id: TLShapeId }
+				if (!pageBounds) return
+
+				const pageMask = editor.getShapeMask(id)
+
+				if (pageMask) {
+					const intersection = intersectPolygonPolygon(pageMask, pageBounds.corners)
+					if (!intersection) {
+						return
+					}
+					pageBounds = Box2d.FromPoints(intersection) as Box2d & { id: TLShapeId }
+				}
+
+				if (pageBounds) {
+					pageBounds.id = id // kinda dirty but we want to include the id here
+					allShapeBounds.push(pageBounds)
+				}
+			})
+
+			minimap.pageBounds = allShapeBounds
+			minimap.collaborators = presences.get()
+			minimap.render()
+		},
+		[editor, minimap]
+	)
+
+	return (
+		<div className="tlui-minimap">
+			<canvas
+				ref={rCanvas}
+				className="tlui-minimap__canvas"
+				onDoubleClick={onDoubleClick}
+				onPointerMove={onPointerMove}
+				onPointerDown={onPointerDown}
+				onWheel={onWheel}
+			/>
+		</div>
+	)
+}