@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,234 @@
+import { Editor, preventDefault, useContainer, useEditor, useValue } from '@bigbluebutton/editor'
+import * as _ContextMenu from '@radix-ui/react-context-menu'
+import classNames from 'classnames'
+import { forwardRef, useCallback, useState } from 'react'
+import { TLUiMenuChild } from '../hooks/menuHelpers'
+import { useBreakpoint } from '../hooks/useBreakpoint'
+import { useContextMenuSchema } from '../hooks/useContextMenuSchema'
+import { useMenuIsOpen } from '../hooks/useMenuIsOpen'
+import { useReadonly } from '../hooks/useReadonly'
+import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { TLUiIconType } from '../icon-types'
+import { MoveToPageMenu } from './MoveToPageMenu'
+import { Button } from './primitives/Button'
+import { Icon } from './primitives/Icon'
+import { Kbd } from './primitives/Kbd'
+
+/** @public */
+export interface TLUiContextMenuProps {
+	children: any
+}
+
+/** @public */
+export const ContextMenu = function ContextMenu({ children }: { children: any }) {
+	const editor = useEditor()
+
+	const contextTLUiMenuSchema = useContextMenuSchema()
+
+	const cb = useCallback(
+		(isOpen: boolean) => {
+			if (!isOpen) {
+				const onlySelectedShape = editor.getOnlySelectedShape()
+
+				if (onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)) {
+					editor.setSelectedShapes([])
+				}
+			} else {
+				// Weird route: selecting locked shapes on long press
+				if (editor.getInstanceState().isCoarsePointer) {
+					const selectedShapes = editor.getSelectedShapes()
+					const {
+						inputs: { currentPagePoint },
+					} = editor
+
+					// get all of the shapes under the current pointer
+					const shapesAtPoint = editor.getShapesAtPoint(currentPagePoint)
+
+					if (
+						// if there are no selected shapes
+						!editor.getSelectedShapes().length ||
+						// OR if none of the shapes at the point include the selected shape
+						!shapesAtPoint.some((s) => selectedShapes.includes(s))
+					) {
+						// then are there any locked shapes under the current pointer?
+						const lockedShapes = shapesAtPoint.filter((s) => editor.isShapeOrAncestorLocked(s))
+
+						if (lockedShapes.length) {
+							// nice, let's select them
+							editor.select(...lockedShapes.map((s) => s.id))
+						}
+					}
+				}
+			}
+		},
+		[editor]
+	)
+
+	const container = useContainer()
+
+	const [_, handleOpenChange] = useMenuIsOpen('context menu', cb)
+
+	// If every item in the menu is readonly, then we don't want to show the menu
+	const isReadonly = useReadonly()
+
+	const noItemsToShow =
+		contextTLUiMenuSchema.length === 0 ||
+		(isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk))
+
+	const selectToolActive = useValue(
+		'isSelectToolActive',
+		() => editor.getCurrentToolId() === 'select',
+		[editor]
+	)
+
+	const disabled = !selectToolActive || noItemsToShow
+
+	return (
+		<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange}>
+			<_ContextMenu.Trigger
+				onContextMenu={disabled ? preventDefault : undefined}
+				dir="ltr"
+				disabled={disabled}
+			>
+				{children}
+			</_ContextMenu.Trigger>
+			<_ContextMenu.Portal container={container}>
+				<ContextMenuContent />
+			</_ContextMenu.Portal>
+		</_ContextMenu.Root>
+	)
+}
+
+const ContextMenuContent = forwardRef(function ContextMenuContent() {
+	const editor = useEditor()
+	const msg = useTranslation()
+	const menuSchema = useContextMenuSchema()
+	const [_, handleSubOpenChange] = useMenuIsOpen('context menu sub')
+
+	const isReadonly = useReadonly()
+	const breakpoint = useBreakpoint()
+	const container = useContainer()
+
+	const [disableClicks, setDisableClicks] = useState(false)
+
+	function getContextMenuItem(
+		editor: Editor,
+		item: TLUiMenuChild,
+		parent: TLUiMenuChild | null,
+		depth: number
+	) {
+		if (!item) return null
+		if (isReadonly && !item.readonlyOk) return null
+
+		switch (item.type) {
+			case 'custom': {
+				switch (item.id) {
+					case 'MOVE_TO_PAGE_MENU': {
+						return <MoveToPageMenu key={item.id} />
+					}
+				}
+				break
+			}
+			case 'group': {
+				return (
+					<_ContextMenu.Group
+						dir="ltr"
+						className={classNames('tlui-menu__group', {
+							'tlui-menu__group__small': parent?.type === 'submenu',
+						})}
+						data-testid={`menu-item.${item.id}`}
+						key={item.id}
+					>
+						{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}
+					</_ContextMenu.Group>
+				)
+			}
+			case 'submenu': {
+				return (
+					<_ContextMenu.Sub key={item.id} onOpenChange={handleSubOpenChange}>
+						<_ContextMenu.SubTrigger dir="ltr" disabled={item.disabled} asChild>
+							<Button
+								type="menu"
+								label={item.label as TLUiTranslationKey}
+								data-testid={`menu-item.${item.id}`}
+								icon="chevron-right"
+							/>
+						</_ContextMenu.SubTrigger>
+						<_ContextMenu.Portal container={container}>
+							<_ContextMenu.SubContent className="tlui-menu" sideOffset={-4} collisionPadding={4}>
+								{item.children.map((child) => getContextMenuItem(editor, child, item, depth + 1))}
+							</_ContextMenu.SubContent>
+						</_ContextMenu.Portal>
+					</_ContextMenu.Sub>
+				)
+			}
+			case 'item': {
+				if (isReadonly && !item.readonlyOk) return null
+
+				const { id, checkbox, contextMenuLabel, label, onSelect, kbd, icon } = item.actionItem
+				const labelToUse = contextMenuLabel ?? label
+				const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
+
+				if (checkbox) {
+					// Item is in a checkbox group
+					return (
+						<_ContextMenu.CheckboxItem
+							key={id}
+							className="tlui-button tlui-button__menu tlui-button__checkbox"
+							dir="ltr"
+							disabled={item.disabled}
+							onSelect={(e) => {
+								onSelect('context-menu')
+								preventDefault(e)
+							}}
+							title={labelStr ? labelStr : undefined}
+							checked={item.checked}
+						>
+							<Icon small icon={item.checked ? 'check' : 'checkbox-empty'} />
+							{labelStr && (
+								<span className="tlui-button__label" draggable={false}>
+									{labelStr}
+								</span>
+							)}
+							{kbd && <Kbd>{kbd}</Kbd>}
+						</_ContextMenu.CheckboxItem>
+					)
+				}
+
+				return (
+					<_ContextMenu.Item key={id} dir="ltr" asChild>
+						<Button
+							type="menu"
+							data-testid={`menu-item.${id}`}
+							kbd={kbd}
+							label={labelToUse as TLUiTranslationKey}
+							disabled={item.disabled}
+							iconLeft={breakpoint < 3 && depth > 2 ? (icon as TLUiIconType) : undefined}
+							onClick={() => {
+								if (disableClicks) {
+									setDisableClicks(false)
+								} else {
+									onSelect('context-menu')
+								}
+							}}
+						/>
+					</_ContextMenu.Item>
+				)
+			}
+		}
+	}
+
+	return (
+		<_ContextMenu.Portal container={container}>
+			<_ContextMenu.Content
+				className="tlui-menu scrollable"
+				alignOffset={-4}
+				collisionPadding={4}
+				onContextMenu={preventDefault}
+			>
+				{menuSchema.map((item) => getContextMenuItem(editor, item, null, 0))}
+			</_ContextMenu.Content>
+		</_ContextMenu.Portal>
+	)
+})

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

@@ -0,0 +1,355 @@
+import {
+	createShapeId,
+	DebugFlag,
+	debugFlags,
+	Editor,
+	featureFlags,
+	hardResetEditor,
+	TLShapePartial,
+	track,
+	uniqueId,
+	useEditor,
+	useValue,
+} from '@bigbluebutton/editor'
+import * as React from 'react'
+import { useDialogs } from '../hooks/useDialogsProvider'
+import { useToasts } from '../hooks/useToastsProvider'
+import { untranslated, useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import * as Dialog from './primitives/Dialog'
+import * as DropdownMenu from './primitives/DropdownMenu'
+
+let t = 0
+
+function createNShapes(editor: Editor, n: number) {
+	const shapesToCreate: TLShapePartial[] = Array(n)
+	const cols = Math.floor(Math.sqrt(n))
+
+	for (let i = 0; i < n; i++) {
+		t++
+		shapesToCreate[i] = {
+			id: createShapeId('box' + t),
+			type: 'geo',
+			x: (i % cols) * 132,
+			y: Math.floor(i / cols) * 132,
+		}
+	}
+
+	editor.batch(() => {
+		editor.createShapes(shapesToCreate).setSelectedShapes(shapesToCreate.map((s) => s.id))
+	})
+}
+
+/** @internal */
+export const DebugPanel = React.memo(function DebugPanel({
+	renderDebugMenuItems,
+}: {
+	renderDebugMenuItems: (() => React.ReactNode) | null
+}) {
+	const msg = useTranslation()
+	return (
+		<div className="tlui-debug-panel">
+			<CurrentState />
+			<ShapeCount />
+			<DropdownMenu.Root id="debug">
+				<DropdownMenu.Trigger>
+					<Button type="icon" icon="dots-horizontal" title={msg('debug-panel.more')} />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content side="top" align="end" alignOffset={0}>
+					<DebugMenuContent renderDebugMenuItems={renderDebugMenuItems} />
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</div>
+	)
+})
+
+const CurrentState = track(function CurrentState() {
+	const editor = useEditor()
+	return <div className="tlui-debug-panel__current-state">{editor.getPath()}</div>
+})
+
+const ShapeCount = function ShapeCount() {
+	const editor = useEditor()
+	const count = useValue('rendering shapes count', () => editor.getRenderingShapes().length, [
+		editor,
+	])
+
+	return <div>{count} Shapes</div>
+}
+
+const DebugMenuContent = track(function DebugMenuContent({
+	renderDebugMenuItems,
+}: {
+	renderDebugMenuItems: (() => React.ReactNode) | null
+}) {
+	const editor = useEditor()
+	const { addToast } = useToasts()
+	const { addDialog } = useDialogs()
+	const [error, setError] = React.useState<boolean>(false)
+
+	return (
+		<>
+			<DropdownMenu.Group>
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => {
+						addToast({
+							id: uniqueId(),
+							title: 'Something happened',
+							description: 'Hey, attend to this thing over here. It might be important!',
+							keepOpen: true,
+							// icon?: string
+							// title?: string
+							// description?: string
+							// actions?: TLUiToastAction[]
+						})
+						addToast({
+							id: uniqueId(),
+							title: 'Something happened',
+							description: 'Hey, attend to this thing over here. It might be important!',
+							keepOpen: true,
+							actions: [
+								{
+									label: 'Primary',
+									type: 'primary',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Normal',
+									type: 'normal',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Danger',
+									type: 'danger',
+									onClick: () => {
+										void null
+									},
+								},
+							],
+							// icon?: string
+							// title?: string
+							// description?: string
+							// actions?: TLUiToastAction[]
+						})
+						addToast({
+							id: uniqueId(),
+							title: 'Something happened',
+							description: 'Hey, attend to this thing over here. It might be important!',
+							keepOpen: true,
+							icon: 'twitter',
+							actions: [
+								{
+									label: 'Primary',
+									type: 'primary',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Normal',
+									type: 'normal',
+									onClick: () => {
+										void null
+									},
+								},
+								{
+									label: 'Danger',
+									type: 'danger',
+									onClick: () => {
+										void null
+									},
+								},
+							],
+						})
+					}}
+					label={untranslated('Show toast')}
+				/>
+
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => {
+						addDialog({
+							component: ({ onClose }) => (
+								<ExampleDialog
+									displayDontShowAgain
+									onCancel={() => {
+										onClose()
+									}}
+									onContinue={() => {
+										onClose()
+									}}
+								/>
+							),
+							onClose: () => {
+								void null
+							},
+						})
+					}}
+					label={untranslated('Show dialog')}
+				/>
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => createNShapes(editor, 100)}
+					label={untranslated('Create 100 shapes')}
+				/>
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => {
+						function countDescendants({ children }: HTMLElement) {
+							let count = 0
+							if (!children.length) return 0
+							for (const el of [...(children as any)]) {
+								count++
+								count += countDescendants(el)
+							}
+							return count
+						}
+
+						const selectedShapes = editor.getSelectedShapes()
+
+						const shapes =
+							selectedShapes.length === 0 ? editor.getRenderingShapes() : selectedShapes
+
+						const elms = shapes.map(
+							(shape) => (document.getElementById(shape.id) as HTMLElement)!.parentElement!
+						)
+
+						let descendants = elms.length
+
+						for (const elm of elms) {
+							descendants += countDescendants(elm)
+						}
+
+						window.alert(`Shapes ${shapes.length}, DOM nodes:${descendants}`)
+					}}
+					label={untranslated('Count shapes / nodes')}
+				/>
+				{(() => {
+					if (error) throw Error('oh no!')
+				})()}
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => {
+						setError(true)
+					}}
+					label={untranslated('Throw error')}
+				/>
+				<DropdownMenu.Item
+					type="menu"
+					onClick={() => {
+						hardResetEditor()
+					}}
+					label={untranslated('Hard reset')}
+				/>
+			</DropdownMenu.Group>
+			<DropdownMenu.Group>
+				<DebugFlagToggle flag={debugFlags.debugSvg} />
+				<DebugFlagToggle flag={debugFlags.forceSrgb} />
+				<DebugFlagToggle flag={debugFlags.debugGeometry} />
+				<DebugFlagToggle flag={debugFlags.hideShapes} />
+			</DropdownMenu.Group>
+			<DropdownMenu.Group>
+				{Object.values(featureFlags).map((flag) => {
+					return <DebugFlagToggle key={flag.name} flag={flag} />
+				})}
+			</DropdownMenu.Group>
+			{renderDebugMenuItems?.()}
+		</>
+	)
+})
+
+function Toggle({
+	label,
+	value,
+	onChange,
+}: {
+	label: string
+	value: boolean
+	onChange: (newValue: boolean) => void
+}) {
+	return (
+		<DropdownMenu.CheckboxItem
+			title={untranslated(label)}
+			checked={value}
+			onSelect={() => onChange(!value)}
+		>
+			<span className="tlui-button__label" draggable={false}>
+				{label}
+			</span>
+		</DropdownMenu.CheckboxItem>
+	)
+}
+
+const DebugFlagToggle = track(function DebugFlagToggle({
+	flag,
+	onChange,
+}: {
+	flag: DebugFlag<boolean>
+	onChange?: (newValue: boolean) => void
+}) {
+	return (
+		<Toggle
+			label={flag.name
+				.replace(/([a-z0-9])([A-Z])/g, (m) => `${m[0]} ${m[1].toLowerCase()}`)
+				.replace(/^[a-z]/, (m) => m.toUpperCase())}
+			value={flag.get()}
+			onChange={(newValue) => {
+				flag.set(newValue)
+				onChange?.(newValue)
+			}}
+		/>
+	)
+})
+
+function ExampleDialog({
+	title = 'title',
+	body = 'hello hello hello',
+	cancel = 'Cancel',
+	confirm = 'Continue',
+	displayDontShowAgain = false,
+	onCancel,
+	onContinue,
+}: {
+	title?: string
+	body?: string
+	cancel?: string
+	confirm?: string
+	displayDontShowAgain?: boolean
+	onCancel: () => void
+	onContinue: () => void
+}) {
+	const [dontShowAgain, setDontShowAgain] = React.useState(false)
+
+	return (
+		<>
+			<Dialog.Header>
+				<Dialog.Title>{title}</Dialog.Title>
+				<Dialog.CloseButton />
+			</Dialog.Header>
+			<Dialog.Body style={{ maxWidth: 350 }}>{body}</Dialog.Body>
+			<Dialog.Footer className="tlui-dialog__footer__actions">
+				{displayDontShowAgain && (
+					<Button
+						type="normal"
+						onClick={() => setDontShowAgain(!dontShowAgain)}
+						iconLeft={dontShowAgain ? 'check' : 'checkbox-empty'}
+						style={{ marginRight: 'auto' }}
+					>
+						{`Don't show again`}
+					</Button>
+				)}
+				<Button type="normal" onClick={onCancel}>
+					{cancel}
+				</Button>
+				<Button type="primary" onClick={async () => onContinue()}>
+					{confirm}
+				</Button>
+			</Dialog.Footer>
+		</>
+	)
+}

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

@@ -0,0 +1,52 @@
+import { useContainer } from '@bigbluebutton/editor'
+import * as _Dialog from '@radix-ui/react-dialog'
+import React, { useCallback } from 'react'
+import { TLUiDialog, useDialogs } from '../hooks/useDialogsProvider'
+
+const Dialog = ({ id, component: ModalContent, onClose }: TLUiDialog) => {
+	const { removeDialog } = useDialogs()
+
+	const container = useContainer()
+
+	const handleOpenChange = useCallback(
+		(isOpen: boolean) => {
+			if (!isOpen) {
+				if (onClose) {
+					try {
+						onClose()
+					} catch (err: any) {
+						console.warn(err)
+					}
+				}
+				removeDialog(id)
+			}
+		},
+		[id, onClose, removeDialog]
+	)
+
+	return (
+		<_Dialog.Root onOpenChange={handleOpenChange} defaultOpen>
+			<_Dialog.Portal container={container}>
+				<_Dialog.Overlay dir="ltr" className="tlui-dialog__overlay">
+					<_Dialog.Content dir="ltr" className="tlui-dialog__content">
+						<ModalContent onClose={() => handleOpenChange(false)} />
+					</_Dialog.Content>
+				</_Dialog.Overlay>
+			</_Dialog.Portal>
+		</_Dialog.Root>
+	)
+}
+
+function _Dialogs() {
+	const { dialogs } = useDialogs()
+
+	return (
+		<>
+			{dialogs.map((dialog: TLUiDialog) => (
+				<Dialog key={dialog.id} {...dialog} />
+			))}
+		</>
+	)
+}
+
+export const Dialogs = React.memo(_Dialogs)

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

@@ -0,0 +1,23 @@
+import { track, useEditor } from '@bigbluebutton/editor'
+import { useActions } from '../hooks/useActions'
+import { useTranslation } from '../hooks/useTranslation/useTranslation'
+import { Button } from './primitives/Button'
+import { kbdStr } from './primitives/shared'
+
+export const DuplicateButton = track(function DuplicateButton() {
+	const editor = useEditor()
+	const actions = useActions()
+	const msg = useTranslation()
+	const action = actions['duplicate']
+
+	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
+		/>
+	)
+})