@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -0,0 +1,258 @@
+import {
+	BaseBoxShapeUtil,
+	Geometry2d,
+	Rectangle2d,
+	SVGContainer,
+	SelectionEdge,
+	TLFrameShape,
+	TLGroupShape,
+	TLOnResizeEndHandler,
+	TLOnResizeHandler,
+	TLShape,
+	TLShapeId,
+	canonicalizeRotation,
+	frameShapeMigrations,
+	frameShapeProps,
+	getDefaultColorTheme,
+	last,
+	resizeBox,
+	toDomPrecision,
+	useValue,
+} from '@bigbluebutton/editor'
+import classNames from 'classnames'
+import { useDefaultColorTheme } from '../shared/ShapeFill'
+import { createTextSvgElementFromSpans } from '../shared/createTextSvgElementFromSpans'
+import { FrameHeading } from './components/FrameHeading'
+
+export function defaultEmptyAs(str: string, dflt: string) {
+	if (str.match(/^\s*$/)) {
+		return dflt
+	}
+	return str
+}
+
+/** @public */
+export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
+	static override type = 'frame' as const
+	static override props = frameShapeProps
+	static override migrations = frameShapeMigrations
+
+	override canBind = () => true
+
+	override canEdit = () => true
+
+	override getDefaultProps(): TLFrameShape['props'] {
+		return { w: 160 * 2, h: 90 * 2, name: '' }
+	}
+
+	override getGeometry(shape: TLFrameShape): Geometry2d {
+		return new Rectangle2d({
+			width: shape.props.w,
+			height: shape.props.h,
+			isFilled: false,
+		})
+	}
+
+	override component(shape: TLFrameShape) {
+		const bounds = this.editor.getShapeGeometry(shape).bounds
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const theme = useDefaultColorTheme()
+
+		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const isCreating = useValue(
+			'is creating this shape',
+			() => {
+				const resizingState = this.editor.getStateDescendant('select.resizing')
+				if (!resizingState) return false
+				if (!resizingState.getIsActive()) return false
+				const info = (resizingState as typeof resizingState & { info: { isCreating: boolean } })
+					?.info
+				if (!info) return false
+				return info.isCreating && this.editor.getOnlySelectedShape()?.id === shape.id
+			},
+			[shape.id]
+		)
+
+		return (
+			<>
+				<SVGContainer>
+					<rect
+						className={classNames('tl-frame__body', { 'tl-frame__creating': isCreating })}
+						width={bounds.width}
+						height={bounds.height}
+						fill={theme.solid}
+						stroke={theme.text}
+					/>
+				</SVGContainer>
+				{isCreating ? null : (
+					<FrameHeading
+						id={shape.id}
+						name={shape.props.name}
+						width={bounds.width}
+						height={bounds.height}
+					/>
+				)}
+			</>
+		)
+	}
+
+	override toSvg(shape: TLFrameShape): SVGElement | Promise<SVGElement> {
+		const theme = getDefaultColorTheme({ isDarkMode: this.editor.user.getIsDarkMode() })
+		const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+
+		const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+		rect.setAttribute('width', shape.props.w.toString())
+		rect.setAttribute('height', shape.props.h.toString())
+		rect.setAttribute('fill', theme.solid)
+		rect.setAttribute('stroke', theme.black.solid)
+		rect.setAttribute('stroke-width', '1')
+		rect.setAttribute('rx', '1')
+		rect.setAttribute('ry', '1')
+		g.appendChild(rect)
+
+		// Text label
+		const pageRotation = canonicalizeRotation(
+			this.editor.getShapePageTransform(shape.id)!.rotation()
+		)
+		// rotate right 45 deg
+		const offsetRotation = pageRotation + Math.PI / 4
+		const scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4
+		const labelSide: SelectionEdge = (['top', 'left', 'bottom', 'right'] as const)[
+			Math.floor(scaledRotation)
+		]
+
+		let labelTranslate: string
+		switch (labelSide) {
+			case 'top':
+				labelTranslate = ``
+				break
+			case 'right':
+				labelTranslate = `translate(${toDomPrecision(shape.props.w)}px, 0px) rotate(90deg)`
+				break
+			case 'bottom':
+				labelTranslate = `translate(${toDomPrecision(shape.props.w)}px, ${toDomPrecision(
+					shape.props.h
+				)}px) rotate(180deg)`
+				break
+			case 'left':
+				labelTranslate = `translate(0px, ${toDomPrecision(shape.props.h)}px) rotate(270deg)`
+				break
+			default:
+				labelTranslate = ``
+		}
+
+		// Truncate with ellipsis
+		const opts = {
+			fontSize: 12,
+			fontFamily: 'Inter, sans-serif',
+			textAlign: 'start' as const,
+			width: shape.props.w,
+			height: 32,
+			padding: 0,
+			lineHeight: 1,
+			fontStyle: 'normal',
+			fontWeight: 'normal',
+			overflow: 'truncate-ellipsis' as const,
+			verticalTextAlign: 'middle' as const,
+		}
+
+		const spans = this.editor.textMeasure.measureTextSpans(
+			defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203),
+			opts
+		)
+
+		const firstSpan = spans[0]
+		const lastSpan = last(spans)!
+		const labelTextWidth = lastSpan.box.w + lastSpan.box.x - firstSpan.box.x
+		const text = createTextSvgElementFromSpans(this.editor, spans, {
+			offsetY: -opts.height - 2,
+			...opts,
+		})
+		text.style.setProperty('transform', labelTranslate)
+
+		const textBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
+		textBg.setAttribute('x', '-8px')
+		textBg.setAttribute('y', -opts.height - 4 + 'px')
+		textBg.setAttribute('width', labelTextWidth + 16 + 'px')
+		textBg.setAttribute('height', `${opts.height}px`)
+		textBg.setAttribute('rx', 4 + 'px')
+		textBg.setAttribute('ry', 4 + 'px')
+		textBg.setAttribute('fill', theme.background)
+
+		g.appendChild(textBg)
+		g.appendChild(text)
+
+		return g
+	}
+
+	indicator(shape: TLFrameShape) {
+		const bounds = this.editor.getShapeGeometry(shape).bounds
+
+		return (
+			<rect
+				width={toDomPrecision(bounds.width)}
+				height={toDomPrecision(bounds.height)}
+				className={`tl-frame-indicator`}
+			/>
+		)
+	}
+
+	override canReceiveNewChildrenOfType = (shape: TLShape, _type: TLShape['type']) => {
+		return !shape.isLocked
+	}
+
+	override providesBackgroundForChildren(): boolean {
+		return true
+	}
+
+	override canDropShapes = (shape: TLFrameShape, _shapes: TLShape[]): boolean => {
+		return !shape.isLocked
+	}
+
+	override onDragShapesOver = (frame: TLFrameShape, shapes: TLShape[]): { shouldHint: boolean } => {
+		if (!shapes.every((child) => child.parentId === frame.id)) {
+			this.editor.reparentShapes(
+				shapes.map((shape) => shape.id),
+				frame.id
+			)
+			return { shouldHint: true }
+		}
+		return { shouldHint: false }
+	}
+
+	override onDragShapesOut = (_shape: TLFrameShape, shapes: TLShape[]): void => {
+		const parent = this.editor.getShape(_shape.parentId)
+		const isInGroup = parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')
+
+		// If frame is in a group, keep the shape
+		// moved out in that group
+
+		if (isInGroup) {
+			this.editor.reparentShapes(shapes, parent.id)
+		} else {
+			this.editor.reparentShapes(shapes, this.editor.getCurrentPageId())
+		}
+	}
+
+	override onResizeEnd: TLOnResizeEndHandler<TLFrameShape> = (shape) => {
+		const bounds = this.editor.getShapePageBounds(shape)!
+		const children = this.editor.getSortedChildIdsForParent(shape.id)
+
+		const shapesToReparent: TLShapeId[] = []
+
+		for (const childId of children) {
+			const childBounds = this.editor.getShapePageBounds(childId)!
+			if (!bounds.includes(childBounds)) {
+				shapesToReparent.push(childId)
+			}
+		}
+
+		if (shapesToReparent.length > 0) {
+			this.editor.reparentShapes(shapesToReparent, this.editor.getCurrentPageId())
+		}
+	}
+
+	override onResize: TLOnResizeHandler<any> = (shape, info) => {
+		return resizeBox(shape, info)
+	}
+}

package/src/lib/shapes/frame/components/FrameHeading.tsx

@@ -0,0 +1,115 @@
+import {
+	SelectionEdge,
+	TLShapeId,
+	canonicalizeRotation,
+	getPointerInfo,
+	toDomPrecision,
+	useEditor,
+	useIsEditing,
+	useValue,
+} from '@bigbluebutton/editor'
+import { useCallback, useEffect, useRef } from 'react'
+import { FrameLabelInput } from './FrameLabelInput'
+
+export const FrameHeading = function FrameHeading({
+	id,
+	name,
+	width,
+	height,
+}: {
+	id: TLShapeId
+	name: string
+	width: number
+	height: number
+}) {
+	const editor = useEditor()
+	const pageRotation = useValue(
+		'shape rotation',
+		() => canonicalizeRotation(editor.getShapePageTransform(id)!.rotation()),
+		[editor, id]
+	)
+
+	const isEditing = useIsEditing(id)
+
+	const rInput = useRef<HTMLInputElement>(null)
+
+	const handlePointerDown = useCallback(
+		(e: React.PointerEvent) => {
+			const event = getPointerInfo(e)
+
+			// If we're editing the frame label, we shouldn't hijack the pointer event
+			if (editor.getEditingShapeId() === id) return
+
+			editor.dispatch({
+				type: 'pointer',
+				name: 'pointer_down',
+				target: 'shape',
+				shape: editor.getShape(id)!,
+				...event,
+			})
+			e.preventDefault()
+		},
+		[editor, id]
+	)
+
+	useEffect(() => {
+		const el = rInput.current
+		if (el && isEditing) {
+			// On iOS, we must focus here
+			el.focus()
+			el.select()
+
+			requestAnimationFrame(() => {
+				// On desktop, the input may have lost focus, so try try try again!
+				if (document.activeElement !== el) {
+					el.focus()
+					el.select()
+				}
+			})
+		}
+	}, [rInput, isEditing])
+
+	// rotate right 45 deg
+	const offsetRotation = pageRotation + Math.PI / 4
+	const scaledRotation = (offsetRotation * (2 / Math.PI) + 4) % 4
+	const labelSide: SelectionEdge = (['top', 'left', 'bottom', 'right'] as const)[
+		Math.floor(scaledRotation)
+	]
+
+	let labelTranslate: string
+	switch (labelSide) {
+		case 'top':
+			labelTranslate = ``
+			break
+		case 'right':
+			labelTranslate = `translate(${toDomPrecision(width)}px, 0px) rotate(90deg)`
+			break
+		case 'bottom':
+			labelTranslate = `translate(${toDomPrecision(width)}px, ${toDomPrecision(
+				height
+			)}px) rotate(180deg)`
+			break
+		case 'left':
+			labelTranslate = `translate(0px, ${toDomPrecision(height)}px) rotate(270deg)`
+			break
+	}
+
+	return (
+		<div
+			className="tl-frame-heading"
+			style={{
+				overflow: isEditing ? 'visible' : 'hidden',
+				maxWidth: `calc(var(--tl-zoom) * ${
+					labelSide === 'top' || labelSide === 'bottom' ? Math.ceil(width) : Math.ceil(height)
+				}px + var(--space-5))`,
+				bottom: '100%',
+				transform: `${labelTranslate} scale(var(--tl-scale)) translateX(calc(-1 * var(--space-3))`,
+			}}
+			onPointerDown={handlePointerDown}
+		>
+			<div className="tl-frame-heading-hit-area">
+				<FrameLabelInput ref={rInput} id={id} name={name} isEditing={isEditing} />
+			</div>
+		</div>
+	)
+}

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -0,0 +1,85 @@
+import { TLFrameShape, TLShapeId, stopEventPropagation, useEditor } from '@bigbluebutton/editor'
+import { forwardRef, useCallback } from 'react'
+import { defaultEmptyAs } from '../FrameShapeUtil'
+
+export const FrameLabelInput = forwardRef<
+	HTMLInputElement,
+	{ id: TLShapeId; name: string; isEditing: boolean }
+>(({ id, name, isEditing }, ref) => {
+	const editor = useEditor()
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+				// need to prevent the enter keydown making it's way up to the Idle state
+				// and sending us back into edit mode
+				stopEventPropagation(e)
+				e.currentTarget.blur()
+				editor.setEditingShape(null)
+			}
+		},
+		[editor]
+	)
+
+	const handleBlur = useCallback(
+		(e: React.FocusEvent<HTMLInputElement>) => {
+			const shape = editor.getShape<TLFrameShape>(id)
+			if (!shape) return
+
+			const name = shape.props.name
+			const value = e.currentTarget.value.trim()
+			if (name === value) return
+
+			editor.updateShapes(
+				[
+					{
+						id,
+						type: 'frame',
+						props: { name: value },
+					},
+				],
+				{ squashing: true }
+			)
+		},
+		[id, editor]
+	)
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const shape = editor.getShape<TLFrameShape>(id)
+			if (!shape) return
+
+			const name = shape.props.name
+			const value = e.currentTarget.value
+			if (name === value) return
+
+			editor.updateShapes(
+				[
+					{
+						id,
+						type: 'frame',
+						props: { name: value },
+					},
+				],
+				{ squashing: true }
+			)
+		},
+		[id, editor]
+	)
+
+	return (
+		<div className={`tl-frame-label ${isEditing ? 'tl-frame-label__editing' : ''}`}>
+			<input
+				className="tl-frame-name-input"
+				ref={ref}
+				style={{ display: isEditing ? undefined : 'none' }}
+				value={name}
+				autoFocus
+				onKeyDown={handleKeyDown}
+				onBlur={handleBlur}
+				onChange={handleChange}
+			/>
+			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}
+		</div>
+	)
+})

package/src/lib/shapes/geo/GeoShapeTool.test.ts

@@ -0,0 +1,191 @@
+import { TestEditor } from '../../../test/TestEditor'
+import { GeoShapeTool } from './GeoShapeTool'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe(GeoShapeTool, () => {
+	it('Creates geo shapes on click-and-drag, supports undo and redo', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp()
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		expect(editor.getCurrentPageShapes()[0]?.type).toBe('geo')
+		expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id)
+
+		editor.undo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.redo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+
+	it('Creates geo shapes on click, supports undo and redo', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		expect(editor.getCurrentPageShapes()[0]?.type).toBe('geo')
+		expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id)
+
+		editor.undo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.redo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+})
+
+describe('When selecting the tool', () => {
+	it('selects the tool and enters the idle state', () => {
+		editor.setCurrentTool('geo')
+		editor.expectToBeIn('geo.idle')
+	})
+})
+
+describe('When in the idle state', () => {
+	it('Enters pointing state on pointer down', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(100, 100)
+		editor.expectToBeIn('geo.pointing')
+	})
+
+	it('Switches back to select tool on cancel', () => {
+		editor.setCurrentTool('geo')
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Does nothing on interrupt', () => {
+		editor.setCurrentTool('geo')
+		editor.interrupt()
+		editor.expectToBeIn('geo.idle')
+	})
+
+	it('Enters edit shape state on "Enter" key up when we have one geo shape', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp(100, 100)
+
+		editor.keyUp('Enter')
+		editor.expectToBeIn('select.editing_shape')
+	})
+
+	it('Does not enter edit shape state on "Enter" key up when multiple geo shapes are selected', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp(100, 100)
+
+		editor.setCurrentTool('geo')
+		editor.pointerDown(150, 150)
+		editor.pointerMove(200, 200)
+		editor.pointerUp(200, 200)
+
+		expect(editor.getCurrentPageShapes().length).toBe(2)
+
+		editor.selectAll()
+		expect(editor.getSelectedShapes().length).toBe(2)
+
+		editor.keyUp('Enter')
+		editor.expectToBeIn('select.idle')
+	})
+})
+
+describe('When in the pointing state', () => {
+	it('Switches back to idle on cancel', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.expectToBeIn('geo.pointing')
+		editor.cancel()
+		editor.expectToBeIn('geo.idle')
+	})
+
+	it('Enters the select.resizing state on drag start', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(51, 51) // not far enough!
+		editor.expectToBeIn('geo.pointing')
+		editor.pointerMove(55, 55)
+		editor.expectToBeIn('select.resizing')
+	})
+
+	it('Enters the select.resizing state on pointer move', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.cancel()
+		editor.expectToBeIn('geo.idle')
+	})
+
+	it('Returns to the idle state on interrupt', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.interrupt()
+		editor.expectToBeIn('geo.idle')
+	})
+
+	it('Creates a geo and returns to select tool on pointer up', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+
+	it('Creates a geo and returns to geo.idle on pointer up if tool lock is enabled', () => {
+		editor.updateInstanceState({ isToolLocked: true })
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('geo.idle')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+})
+
+describe('When in the resizing state while creating a geo shape', () => {
+	it('Returns to geo on cancel', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(55, 55)
+		editor.expectToBeIn('select.resizing')
+		editor.cancel()
+		editor.expectToBeIn('geo.idle')
+	})
+
+	it('Returns to select.idle on complete', () => {
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp(100, 100)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Returns to geo.idle on complete if tool lock is enabled', () => {
+		editor.updateInstanceState({ isToolLocked: true })
+		editor.setCurrentTool('geo')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp(100, 100)
+		editor.expectToBeIn('geo.idle')
+	})
+})

package/src/lib/shapes/geo/GeoShapeTool.ts

@@ -0,0 +1,11 @@
+import { StateNode } from '@bigbluebutton/editor'
+import { Idle } from './toolStates/Idle'
+import { Pointing } from './toolStates/Pointing'
+
+/** @public */
+export class GeoShapeTool extends StateNode {
+	static override id = 'geo'
+	static override initial = 'idle'
+	static override children = () => [Idle, Pointing]
+	override shapeType = 'geo'
+}