@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/shapes/arrow/components/ArrowTextLabel.tsx

@@ -0,0 +1,87 @@
+import { TLArrowShape, TLShapeId, VecLike, stopEventPropagation } from '@bigbluebutton/editor'
+import * as React from 'react'
+import { TextHelpers } from '../../shared/TextHelpers'
+import { ARROW_LABEL_FONT_SIZES, TEXT_PROPS } from '../../shared/default-shape-constants'
+import { useEditableText } from '../../shared/useEditableText'
+
+export const ArrowTextLabel = React.memo(function ArrowTextLabel({
+	id,
+	text,
+	size,
+	font,
+	position,
+	width,
+	labelColor,
+}: { id: TLShapeId; position: VecLike; width?: number; labelColor: string } & Pick<
+	TLArrowShape['props'],
+	'text' | 'size' | 'font'
+>) {
+	const {
+		rInput,
+		isEditing,
+		handleFocus,
+		handleBlur,
+		handleKeyDown,
+		handleChange,
+		isEmpty,
+		handleInputPointerDown,
+		handleDoubleClick,
+	} = useEditableText(id, 'arrow', text)
+
+	const finalText = TextHelpers.normalizeTextForDom(text)
+	const hasText = finalText.trim().length > 0
+
+	if (!isEditing && !hasText) {
+		return null
+	}
+
+	return (
+		<div
+			className="tl-arrow-label"
+			data-font={font}
+			data-align={'center'}
+			data-hastext={!isEmpty}
+			data-isediting={isEditing}
+			style={{
+				textAlign: 'center',
+				fontSize: ARROW_LABEL_FONT_SIZES[size],
+				lineHeight: ARROW_LABEL_FONT_SIZES[size] * TEXT_PROPS.lineHeight + 'px',
+				transform: `translate(${position.x}px, ${position.y}px)`,
+				color: labelColor,
+			}}
+		>
+			<div className="tl-arrow-label__inner">
+				<p style={{ width: width ? width : '9px' }}>
+					{text ? TextHelpers.normalizeTextForDom(text) : ' '}
+				</p>
+				{isEditing && (
+					// Consider replacing with content-editable
+					<textarea
+						ref={rInput}
+						className="tl-text tl-text-input"
+						name="text"
+						tabIndex={-1}
+						autoComplete="false"
+						autoCapitalize="false"
+						autoCorrect="false"
+						autoSave="false"
+						autoFocus
+						placeholder=""
+						spellCheck="true"
+						wrap="off"
+						dir="auto"
+						datatype="wysiwyg"
+						defaultValue={text}
+						onFocus={handleFocus}
+						onChange={handleChange}
+						onKeyDown={handleKeyDown}
+						onBlur={handleBlur}
+						onContextMenu={stopEventPropagation}
+						onPointerDown={handleInputPointerDown}
+						onDoubleClick={handleDoubleClick}
+					/>
+				)}
+			</div>
+		</div>
+	)
+})

package/src/lib/shapes/arrow/toolStates/Idle.ts

@@ -0,0 +1,37 @@
+import { StateNode, TLEventHandlers } from '@bigbluebutton/editor'
+
+export class Idle extends StateNode {
+	static override id = 'idle'
+
+	override onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
+		this.parent.transition('pointing', info)
+	}
+
+	override onEnter = () => {
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
+	}
+
+	override onCancel = () => {
+		this.editor.setCurrentTool('select')
+	}
+
+	override onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {
+		if (info.key === 'Enter') {
+			if (this.editor.getInstanceState().isReadonly) return null
+			const onlySelectedShape = this.editor.getOnlySelectedShape()
+			// If the only selected shape is editable, start editing it
+			if (
+				onlySelectedShape &&
+				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
+			) {
+				this.editor.setCurrentTool('select')
+				this.editor.setEditingShape(onlySelectedShape.id)
+				this.editor.root.getCurrent()?.transition('editing_shape', {
+					...info,
+					target: 'shape',
+					shape: onlySelectedShape,
+				})
+			}
+		}
+	}
+}

package/src/lib/shapes/arrow/toolStates/Pointing.ts

@@ -0,0 +1,190 @@
+import { StateNode, TLArrowShape, TLEventHandlers, createShapeId } from '@bigbluebutton/editor'
+
+export class Pointing extends StateNode {
+	static override id = 'pointing'
+
+	shape?: TLArrowShape
+
+	markId = ''
+
+	override onEnter = () => {
+		this.didTimeout = false
+
+		const target = this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
+			filter: (targetShape) => {
+				return !targetShape.isLocked && this.editor.getShapeUtil(targetShape).canBind(targetShape)
+			},
+			margin: 0,
+			hitInside: true,
+			renderingOnly: true,
+		})
+
+		if (!target) {
+			this.createArrowShape()
+		} else {
+			this.editor.setHintingShapes([target.id])
+		}
+
+		this.startPreciseTimeout()
+	}
+
+	override onExit = () => {
+		this.shape = undefined
+		this.editor.setHintingShapes([])
+		this.clearPreciseTimeout()
+	}
+
+	override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
+		if (this.editor.inputs.isDragging) {
+			if (!this.shape) {
+				this.createArrowShape()
+			}
+
+			if (!this.shape) throw Error(`expected shape`)
+
+			this.updateArrowShapeEndHandle()
+
+			this.editor.setCurrentTool('select.dragging_handle', {
+				shape: this.shape,
+				handle: this.editor.getShapeHandles(this.shape)!.find((h) => h.id === 'end')!,
+				isCreating: true,
+				onInteractionEnd: 'arrow',
+			})
+		}
+	}
+
+	override onPointerUp: TLEventHandlers['onPointerUp'] = () => {
+		this.cancel()
+	}
+
+	override onCancel: TLEventHandlers['onCancel'] = () => {
+		this.cancel()
+	}
+
+	override onComplete: TLEventHandlers['onComplete'] = () => {
+		this.cancel()
+	}
+
+	override onInterrupt: TLEventHandlers['onInterrupt'] = () => {
+		this.cancel()
+	}
+
+	cancel() {
+		if (this.shape) {
+			// the arrow might not have been created yet!
+			this.editor.bailToMark(this.markId)
+		}
+		this.editor.setHintingShapes([])
+		this.parent.transition('idle')
+	}
+
+	createArrowShape() {
+		const { originPagePoint } = this.editor.inputs
+
+		const id = createShapeId()
+
+		this.markId = `creating:${id}`
+		this.editor.mark(this.markId)
+
+		this.editor.createShapes<TLArrowShape>([
+			{
+				id,
+				type: 'arrow',
+				x: originPagePoint.x,
+				y: originPagePoint.y,
+			},
+		])
+
+		const shape = this.editor.getShape<TLArrowShape>(id)
+		if (!shape) throw Error(`expected shape`)
+
+		const handles = this.editor.getShapeHandles(shape)
+		if (!handles) throw Error(`expected handles for arrow`)
+
+		const util = this.editor.getShapeUtil<TLArrowShape>('arrow')
+		const initial = this.shape
+		const startHandle = handles.find((h) => h.id === 'start')!
+		const change = util.onHandleChange?.(shape, {
+			handle: { ...startHandle, x: 0, y: 0 },
+			isPrecise: true,
+			initial: initial,
+		})
+
+		if (change) {
+			const startTerminal = change.props?.start
+			if (startTerminal?.type === 'binding') {
+				this.editor.setHintingShapes([startTerminal.boundShapeId])
+			}
+			this.editor.updateShapes([change], { squashing: true })
+		}
+
+		// Cache the current shape after those changes
+		this.shape = this.editor.getShape(id)
+		this.editor.select(id)
+	}
+
+	updateArrowShapeEndHandle() {
+		const shape = this.shape
+		if (!shape) throw Error(`expected shape`)
+
+		const handles = this.editor.getShapeHandles(shape)
+		if (!handles) throw Error(`expected handles for arrow`)
+
+		const shapeWithOutEndOffset = {
+			...shape,
+			props: { ...shape.props, end: { ...shape.props.end, x: 0, y: 0 } },
+		}
+
+		// end update
+		{
+			const util = this.editor.getShapeUtil<TLArrowShape>('arrow')
+			const initial = this.shape
+			const point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)
+			const endHandle = handles.find((h) => h.id === 'end')!
+			const change = util.onHandleChange?.(shapeWithOutEndOffset, {
+				handle: { ...endHandle, x: point.x, y: point.y },
+				isPrecise: false, // sure about that?
+				initial: initial,
+			})
+
+			if (change) {
+				const endTerminal = change.props?.end
+				if (endTerminal?.type === 'binding') {
+					this.editor.setHintingShapes([endTerminal.boundShapeId])
+				}
+				this.editor.updateShapes([change], { squashing: true })
+			}
+		}
+
+		// start update
+		{
+			const util = this.editor.getShapeUtil<TLArrowShape>('arrow')
+			const initial = this.shape
+			const startHandle = handles.find((h) => h.id === 'start')!
+			const change = util.onHandleChange?.(shapeWithOutEndOffset, {
+				handle: { ...startHandle, x: 0, y: 0 },
+				isPrecise: this.didTimeout, // sure about that?
+				initial: initial,
+			})
+
+			if (change) {
+				this.editor.updateShapes([change], { squashing: true })
+			}
+		}
+
+		// Cache the current shape after those changes
+		this.shape = this.editor.getShape(shape.id)
+	}
+
+	private preciseTimeout = -1
+	private didTimeout = false
+	private startPreciseTimeout() {
+		this.preciseTimeout = window.setTimeout(() => {
+			if (!this.getIsActive()) return
+			this.didTimeout = true
+		}, 320)
+	}
+	private clearPreciseTimeout() {
+		clearTimeout(this.preciseTimeout)
+	}
+}

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -0,0 +1,196 @@
+import {
+	AssetRecordType,
+	BaseBoxShapeUtil,
+	Editor,
+	HTMLContainer,
+	TLAssetId,
+	TLBookmarkAsset,
+	TLBookmarkShape,
+	TLOnBeforeCreateHandler,
+	TLOnBeforeUpdateHandler,
+	bookmarkShapeMigrations,
+	bookmarkShapeProps,
+	debounce,
+	getHashForString,
+	isValidUrl,
+	stopEventPropagation,
+	toDomPrecision,
+} from '@bigbluebutton/editor'
+import { truncateStringWithEllipsis } from '../../utils/text/text'
+import { HyperlinkButton } from '../shared/HyperlinkButton'
+import { getRotatedBoxShadow } from '../shared/rotated-box-shadow'
+
+/** @public */
+export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
+	static override type = 'bookmark' as const
+	static override props = bookmarkShapeProps
+	static override migrations = bookmarkShapeMigrations
+
+	override canResize = () => false
+
+	override hideSelectionBoundsFg = () => true
+
+	override getDefaultProps(): TLBookmarkShape['props'] {
+		return {
+			url: '',
+			w: 300,
+			h: 320,
+			assetId: null,
+		}
+	}
+
+	override component(shape: TLBookmarkShape) {
+		const asset = (
+			shape.props.assetId ? this.editor.getAsset(shape.props.assetId) : null
+		) as TLBookmarkAsset
+
+		const pageRotation = this.editor.getShapePageTransform(shape)!.rotation()
+
+		const address = getHumanReadableAddress(shape)
+
+		return (
+			<HTMLContainer>
+				<div
+					className="tl-bookmark__container"
+					style={{
+						boxShadow: getRotatedBoxShadow(pageRotation),
+					}}
+				>
+					<div className="tl-bookmark__image_container">
+						{asset?.props.image ? (
+							<img
+								className="tl-bookmark__image"
+								draggable={false}
+								src={asset?.props.image}
+								alt={asset?.props.title || ''}
+							/>
+						) : (
+							<div className="tl-bookmark__placeholder" />
+						)}
+						<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />
+					</div>
+					<div className="tl-bookmark__copy_container">
+						{asset?.props.title && (
+							<h2 className="tl-bookmark__heading">
+								{truncateStringWithEllipsis(asset?.props.title || '', 54)}
+							</h2>
+						)}
+						{asset?.props.description && (
+							<p className="tl-bookmark__description">
+								{truncateStringWithEllipsis(asset?.props.description || '', 128)}
+							</p>
+						)}
+						<a
+							className="tl-bookmark__link"
+							href={shape.props.url || ''}
+							target="_blank"
+							rel="noopener noreferrer"
+							onPointerDown={stopEventPropagation}
+							onPointerUp={stopEventPropagation}
+							onClick={stopEventPropagation}
+						>
+							{truncateStringWithEllipsis(address, 45)}
+						</a>
+					</div>
+				</div>
+			</HTMLContainer>
+		)
+	}
+
+	override indicator(shape: TLBookmarkShape) {
+		return (
+			<rect
+				width={toDomPrecision(shape.props.w)}
+				height={toDomPrecision(shape.props.h)}
+				rx="8"
+				ry="8"
+			/>
+		)
+	}
+
+	override onBeforeCreate?: TLOnBeforeCreateHandler<TLBookmarkShape> = (shape) => {
+		updateBookmarkAssetOnUrlChange(this.editor, shape)
+	}
+
+	override onBeforeUpdate?: TLOnBeforeUpdateHandler<TLBookmarkShape> = (prev, shape) => {
+		if (prev.props.url !== shape.props.url) {
+			if (!isValidUrl(shape.props.url)) {
+				return { ...shape, props: { ...shape.props, url: prev.props.url } }
+			} else {
+				updateBookmarkAssetOnUrlChange(this.editor, shape)
+			}
+		}
+	}
+}
+
+/** @internal */
+export const getHumanReadableAddress = (shape: TLBookmarkShape) => {
+	try {
+		const url = new URL(shape.props.url)
+		const path = url.pathname.replace(/\/*$/, '')
+		return `${url.hostname}${path}`
+	} catch (e) {
+		return shape.props.url
+	}
+}
+
+function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
+	const { url } = shape.props
+
+	// Derive the asset id from the URL
+	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
+
+	if (editor.getAsset(assetId)) {
+		// Existing asset for this URL?
+		if (shape.props.assetId !== assetId) {
+			editor.updateShapes<TLBookmarkShape>([
+				{
+					id: shape.id,
+					type: shape.type,
+					props: { assetId },
+				},
+			])
+		}
+	} else {
+		// No asset for this URL?
+
+		// First, clear out the existing asset reference
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: null },
+			},
+		])
+
+		// Then try to asyncronously create a new one
+		createBookmarkAssetOnUrlChange(editor, shape)
+	}
+}
+
+const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
+	const { url } = shape.props
+
+	// Create the asset using the external content manager's createAssetFromUrl method.
+	// This may be overwritten by the user (for example, we overwrite it on tldraw.com)
+	const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+
+	if (!asset) {
+		// No asset? Just leave the bookmark as a null assetId.
+		return
+	}
+
+	editor.batch(() => {
+		// Create the new asset
+		editor.createAssets([asset])
+
+		// And update the shape
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: asset.id },
+			},
+		])
+	})
+}, 500)

package/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -0,0 +1,52 @@
+import { TestEditor } from '../../../test/TestEditor'
+import { DrawShapeTool } from './DrawShapeTool'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe(DrawShapeTool, () => {
+	return
+})
+
+describe('When in the idle state', () => {
+	it('Returns to select on cancel', () => {
+		editor.setCurrentTool('draw')
+		editor.expectToBeIn('draw.idle')
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Enters the drawing state on pointer down', () => {
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+		editor.expectToBeIn('draw.drawing')
+	})
+})
+
+describe('When in the drawing state', () => {
+	it('Returns to idle on cancel', () => {
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+		editor.cancel()
+		editor.expectToBeIn('draw.idle')
+	})
+
+	it('Returns to idle on complete', () => {
+		editor.setCurrentTool('draw')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('draw.idle')
+
+		editor.pointerDown(50, 50)
+		editor.pointerMove(55, 55)
+		editor.pointerMove(60, 60)
+		editor.pointerUp(60, 60)
+		editor.expectToBeIn('draw.idle')
+	})
+})

package/src/lib/shapes/draw/DrawShapeTool.ts

@@ -0,0 +1,17 @@
+import { StateNode } from '@bigbluebutton/editor'
+import { Drawing } from './toolStates/Drawing'
+import { Idle } from './toolStates/Idle'
+
+/** @public */
+export class DrawShapeTool extends StateNode {
+	static override id = 'draw'
+	static override initial = 'idle'
+	static override children = () => [Idle, Drawing]
+
+	override shapeType = 'draw'
+
+	override onExit = () => {
+		const drawingState = this.children!['drawing'] as Drawing
+		drawingState.initialShape = undefined
+	}
+}