@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/shapes/line/components/getLinePath.ts

@@ -0,0 +1,91 @@
+import { CubicSpline2d, Polyline2d, TLLineShape, getSvgPathFromPoints } from '@bigbluebutton/editor'
+import { getStrokeOutlinePoints } from '../../shared/freehand/getStrokeOutlinePoints'
+import { getStrokePoints } from '../../shared/freehand/getStrokePoints'
+import { setStrokePointRadii } from '../../shared/freehand/setStrokePointRadii'
+import { getSvgPathFromStrokePoints } from '../../shared/freehand/svg'
+import { getSvgPathForLineGeometry } from './svg'
+
+export function getLineDrawFreehandOptions(strokeWidth: number) {
+	return {
+		size: strokeWidth,
+		thinning: 0.4,
+		streamline: 0,
+		smoothing: 0.5,
+		simulatePressure: true,
+		last: true,
+	}
+}
+
+export function getLineSolidFreehandOptions(strokeWidth: number) {
+	return {
+		size: strokeWidth,
+		thinning: 0,
+		streamline: 0,
+		smoothing: 0.5,
+		simulatePressure: false,
+		last: true,
+	}
+}
+
+export function getLineStrokePoints(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	// const points = getLinePoints(spline)
+	const points = spline.vertices
+	const options = getLineDrawFreehandOptions(strokeWidth)
+	return getStrokePoints(points, options)
+}
+
+export function getLineDrawStrokeOutlinePoints(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	const options = getLineDrawFreehandOptions(strokeWidth)
+	return getStrokeOutlinePoints(
+		setStrokePointRadii(getLineStrokePoints(shape, spline, strokeWidth), options),
+		options
+	)
+}
+
+export function getLineSolidStrokeOutlinePoints(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	const options = getLineSolidFreehandOptions(strokeWidth)
+	return getStrokeOutlinePoints(getLineStrokePoints(shape, spline, strokeWidth), options)
+}
+
+export function getLineDrawPath(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	const stroke = getLineDrawStrokeOutlinePoints(shape, spline, strokeWidth)
+	return getSvgPathFromPoints(stroke)
+}
+
+export function getLineSolidPath(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	const outlinePoints = getLineSolidStrokeOutlinePoints(shape, spline, strokeWidth)
+	return getSvgPathFromPoints(outlinePoints)
+}
+
+export function getLineIndicatorPath(
+	shape: TLLineShape,
+	spline: CubicSpline2d | Polyline2d,
+	strokeWidth: number
+) {
+	if (shape.props.dash === 'draw') {
+		const strokePoints = getLineStrokePoints(shape, spline, strokeWidth)
+		return getSvgPathFromStrokePoints(strokePoints)
+	}
+
+	return getSvgPathForLineGeometry(spline)
+}

package/src/lib/shapes/line/components/svg.ts

@@ -0,0 +1,62 @@
+import {
+	CubicBezier2d,
+	CubicSpline2d,
+	Edge2d,
+	Polyline2d,
+	Vec2d,
+	toDomPrecision,
+} from '@bigbluebutton/editor'
+
+export function getSvgPathForEdge(edge: Edge2d, first: boolean) {
+	const { start, end } = edge
+	if (first) {
+		return `M${toDomPrecision(start.x)},${toDomPrecision(start.y)} L${toDomPrecision(
+			end.x
+		)},${toDomPrecision(end.y)} `
+	}
+	return `${toDomPrecision(end.x)},${toDomPrecision(end.y)} `
+}
+
+export function getSvgPathForBezierCurve(curve: CubicBezier2d, first: boolean) {
+	const { a, b, c, d } = curve
+
+	if (Vec2d.Equals(a, d)) return ''
+
+	return `${first ? `M${toDomPrecision(a.x)},${toDomPrecision(a.y)}` : ``}C${toDomPrecision(
+		b.x
+	)},${toDomPrecision(b.y)} ${toDomPrecision(c.x)},${toDomPrecision(c.y)} ${toDomPrecision(
+		d.x
+	)},${toDomPrecision(d.y)}`
+}
+
+export function getSvgPathForCubicSpline(spline: CubicSpline2d, isClosed: boolean) {
+	let d = spline.segments.reduce((d, segment, i) => {
+		return d + getSvgPathForBezierCurve(segment, i === 0)
+	}, '')
+
+	if (isClosed) {
+		d += 'Z'
+	}
+
+	return d
+}
+
+export function getSvgPathForPolylineSpline(spline: Polyline2d, isClosed: boolean) {
+	let d = spline.segments.reduce((d, segment, i) => {
+		return d + getSvgPathForEdge(segment, i === 0)
+	}, '')
+
+	if (isClosed) {
+		d += 'Z'
+	}
+
+	return d
+}
+
+export function getSvgPathForLineGeometry(spline: CubicSpline2d | Polyline2d, isClosed = false) {
+	if (spline instanceof Polyline2d) {
+		return getSvgPathForPolylineSpline(spline, isClosed)
+	} else {
+		return getSvgPathForCubicSpline(spline, isClosed)
+	}
+}

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

@@ -0,0 +1,20 @@
+import { StateNode, TLEventHandlers, TLShapeId } from '@bigbluebutton/editor'
+
+export class Idle extends StateNode {
+	static override id = 'idle'
+
+	private shapeId = '' as TLShapeId
+
+	override onEnter = (info: { shapeId: TLShapeId }) => {
+		this.shapeId = info.shapeId
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
+	}
+
+	override onPointerDown: TLEventHandlers['onPointerDown'] = () => {
+		this.parent.transition('pointing', { shapeId: this.shapeId })
+	}
+
+	override onCancel = () => {
+		this.editor.setCurrentTool('select')
+	}
+}

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

@@ -0,0 +1,165 @@
+import {
+	Matrix2d,
+	StateNode,
+	TLEventHandlers,
+	TLHandle,
+	TLInterruptEvent,
+	TLLineShape,
+	TLShapeId,
+	Vec2d,
+	createShapeId,
+	getIndexAbove,
+	last,
+	sortByIndex,
+	structuredClone,
+} from '@bigbluebutton/editor'
+
+const MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES = 2
+
+export class Pointing extends StateNode {
+	static override id = 'pointing'
+
+	shape = {} as TLLineShape
+
+	markId: string | undefined
+
+	override onEnter = (info: { shapeId?: TLShapeId }) => {
+		const { inputs } = this.editor
+		const { currentPagePoint } = inputs
+
+		this.markId = undefined
+
+		// Previously created line shape that we might be extending
+		const shape = info.shapeId && this.editor.getShape<TLLineShape>(info.shapeId)
+
+		if (shape && inputs.shiftKey) {
+			// Extending a previous shape
+			this.markId = `creating:${shape.id}`
+			this.editor.mark(this.markId)
+			this.shape = shape
+
+			const handles = this.editor.getShapeHandles(this.shape)
+			if (!handles) return
+
+			const vertexHandles = handles.filter((h) => h.type === 'vertex').sort(sortByIndex)
+			const endHandle = vertexHandles[vertexHandles.length - 1]
+			const prevEndHandle = vertexHandles[vertexHandles.length - 2]
+
+			const shapePagePoint = Matrix2d.applyToPoint(
+				this.editor.getShapeParentTransform(this.shape)!,
+				new Vec2d(this.shape.x, this.shape.y)
+			)
+
+			let nextEndHandleIndex: string, nextEndHandleId: string, nextEndHandle: TLHandle
+
+			const nextPoint = Vec2d.Sub(currentPagePoint, shapePagePoint)
+
+			if (
+				Vec2d.Dist(endHandle, prevEndHandle) < MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES ||
+				Vec2d.Dist(nextPoint, endHandle) < MINIMUM_DISTANCE_BETWEEN_SHIFT_CLICKED_HANDLES
+			) {
+				// If the end handle is too close to the previous end handle, we'll just extend the previous end handle
+				nextEndHandleIndex = endHandle.index
+				nextEndHandleId = endHandle.id
+				nextEndHandle = {
+					...endHandle,
+					x: nextPoint.x + 0.1,
+					y: nextPoint.y + 0.1,
+				}
+			} else {
+				// Otherwise, we'll create a new end handle
+				nextEndHandleIndex = getIndexAbove(endHandle.index)
+				nextEndHandleId = 'handle:' + nextEndHandleIndex
+				nextEndHandle = {
+					id: nextEndHandleId,
+					type: 'vertex',
+					index: nextEndHandleIndex,
+					x: nextPoint.x + 0.1,
+					y: nextPoint.y + 0.1,
+					canBind: false,
+				}
+			}
+
+			const nextHandles = structuredClone(this.shape.props.handles)
+
+			nextHandles[nextEndHandle.id] = nextEndHandle
+
+			this.editor.updateShapes([
+				{
+					id: this.shape.id,
+					type: this.shape.type,
+					props: {
+						handles: nextHandles,
+					},
+				},
+			])
+		} else {
+			const id = createShapeId()
+
+			this.markId = `creating:${id}`
+			this.editor.mark(this.markId)
+
+			this.editor.createShapes<TLLineShape>([
+				{
+					id,
+					type: 'line',
+					x: currentPagePoint.x,
+					y: currentPagePoint.y,
+				},
+			])
+
+			this.editor.select(id)
+			this.shape = this.editor.getShape(id)!
+		}
+	}
+
+	override onPointerMove: TLEventHandlers['onPointerMove'] = () => {
+		if (!this.shape) return
+
+		if (this.editor.inputs.isDragging) {
+			const handles = this.editor.getShapeHandles(this.shape)
+			console
+			if (!handles) {
+				if (this.markId) this.editor.bailToMark(this.markId)
+				throw Error('No handles found')
+			}
+			const lastHandle = last(handles)!
+			this.editor.setCurrentTool('select.dragging_handle', {
+				shape: this.shape,
+				isCreating: true,
+				// remove the offset that we added to the handle when we created it
+				handle: { ...lastHandle, x: lastHandle.x - 0.1, y: lastHandle.y - 0.1 },
+				onInteractionEnd: 'line',
+			})
+		}
+	}
+
+	override onPointerUp: TLEventHandlers['onPointerUp'] = () => {
+		this.complete()
+	}
+
+	override onCancel: TLEventHandlers['onCancel'] = () => {
+		this.cancel()
+	}
+
+	override onComplete: TLEventHandlers['onComplete'] = () => {
+		this.complete()
+	}
+
+	override onInterrupt: TLInterruptEvent = () => {
+		this.parent.transition('idle')
+		if (this.markId) this.editor.bailToMark(this.markId)
+		this.editor.snaps.clear()
+	}
+
+	complete() {
+		this.parent.transition('idle', { shapeId: this.shape.id })
+		this.editor.snaps.clear()
+	}
+
+	cancel() {
+		if (this.markId) this.editor.bailToMark(this.markId)
+		this.parent.transition('idle', { shapeId: this.shape.id })
+		this.editor.snaps.clear()
+	}
+}

package/src/lib/shapes/note/NoteShapeTool.test.ts

@@ -0,0 +1,146 @@
+import { TestEditor } from '../../../test/TestEditor'
+import { NoteShapeTool } from './NoteShapeTool'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe(NoteShapeTool, () => {
+	it('Creates note shapes on click-and-drag, supports undo and redo', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.pointerUp(100, 100)
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		expect(editor.getCurrentPageShapes()[0]?.type).toBe('note')
+		expect(editor.getSelectedShapeIds()[0]).toBe(editor.getCurrentPageShapes()[0]?.id)
+
+		editor.cancel() // leave edit mode
+
+		editor.undo() // undoes the selection change
+		editor.undo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.redo()
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+
+	it('Creates note shapes on click, supports undo and redo', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		expect(editor.getCurrentPageShapes()[0]?.type).toBe('note')
+		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('note')
+		editor.expectToBeIn('note.idle')
+	})
+})
+
+describe('When in the idle state', () => {
+	it('Enters pointing state on pointer down', () => {
+		editor.setCurrentTool('note')
+		editor.pointerDown(100, 100)
+		editor.expectToBeIn('note.pointing')
+	})
+
+	it('Switches back to select tool on cancel', () => {
+		editor.setCurrentTool('note')
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('Does nothing on interrupt', () => {
+		editor.setCurrentTool('note')
+		editor.interrupt()
+		editor.expectToBeIn('note.idle')
+	})
+})
+
+describe('When in the pointing state', () => {
+	it('Switches back to idle on cancel', () => {
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.expectToBeIn('note.pointing')
+		editor.cancel()
+		editor.expectToBeIn('note.idle')
+	})
+
+	it('Enters the select.translating state on drag start', () => {
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(51, 51) // not far enough!
+		editor.expectToBeIn('note.pointing')
+		editor.pointerMove(55, 55)
+		editor.expectToBeIn('select.translating')
+	})
+
+	it('Returns to the note tool on cancel from translating', () => {
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(55, 55)
+		editor.cancel()
+		editor.expectToBeIn('note.idle')
+	})
+
+	it('Returns to the note tool on complete from translating when tool lock is enabled', () => {
+		editor.updateInstanceState({ isToolLocked: true })
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(55, 55)
+		editor.pointerUp()
+		editor.expectToBeIn('note.idle')
+	})
+
+	it('Returns to the idle state on interrupt', () => {
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.interrupt()
+		editor.expectToBeIn('note.idle')
+	})
+
+	it('Creates a note and begins editing on pointer up', () => {
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+
+	it('Creates a frame and returns to frame.idle on pointer up if tool lock is enabled', () => {
+		editor.updateInstanceState({ isToolLocked: true })
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('note')
+		editor.pointerDown(50, 50)
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('note.idle')
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+})

package/src/lib/shapes/note/NoteShapeTool.ts

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