@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/shapes/shared/freehand/getStrokePoints.ts

@@ -0,0 +1,187 @@
+import { Vec2d, VecLike } from '@bigbluebutton/editor'
+import type { StrokeOptions, StrokePoint } from './types'
+
+const MIN_START_PRESSURE = 0.025
+const MIN_END_PRESSURE = 0.01
+
+/**
+ * ## getStrokePoints
+ *
+ * Get an array of points as objects with an adjusted point, pressure, vector, distance, and
+ * runningLength.
+ *
+ * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is
+ *   optional in both cases.
+ * @param options - An object with options.
+ * @public
+ */
+export function getStrokePoints(
+	rawInputPoints: VecLike[],
+	options: StrokeOptions = {}
+): StrokePoint[] {
+	const { streamline = 0.5, size = 16, simulatePressure = false } = options
+
+	// If we don't have any points, return an empty array.
+	if (rawInputPoints.length === 0) return []
+
+	// Find the interpolation level between points.
+	const t = 0.15 + (1 - streamline) * 0.85
+
+	// Whatever the input is, make sure that the points are in number[][].
+	let pts = rawInputPoints.map(Vec2d.From)
+
+	let pointsRemovedFromNearEnd = 0
+
+	if (!simulatePressure) {
+		// Strip low pressure points from the start of the array.
+		let pt = pts[0]
+		while (pt) {
+			if (pt.z >= MIN_START_PRESSURE) break
+			pts.shift()
+			pt = pts[0]
+		}
+	}
+
+	if (!simulatePressure) {
+		// Strip low pressure points from the end of the array.
+		let pt = pts[pts.length - 1]
+		while (pt) {
+			if (pt.z >= MIN_END_PRESSURE) break
+			pts.pop()
+			pt = pts[pts.length - 1]
+		}
+	}
+
+	if (pts.length === 0)
+		return [
+			{
+				point: Vec2d.From(rawInputPoints[0]),
+				input: Vec2d.From(rawInputPoints[0]),
+				pressure: simulatePressure ? 0.5 : 0.15,
+				vector: new Vec2d(1, 1),
+				distance: 0,
+				runningLength: 0,
+				radius: 1,
+			},
+		]
+
+	// Strip points that are too close to the first point.
+	let pt = pts[1]
+	while (pt) {
+		if (Vec2d.Dist(pt, pts[0]) > size / 3) break
+		pts[0].z = Math.max(pts[0].z, pt.z) // Use maximum pressure
+		pts.splice(1, 1)
+		pt = pts[1]
+	}
+
+	// Strip points that are too close to the last point.
+	const last = pts.pop()!
+	pt = pts[pts.length - 1]
+	while (pt) {
+		if (Vec2d.Dist(pt, last) > size / 3) break
+		pts.pop()
+		pt = pts[pts.length - 1]
+		pointsRemovedFromNearEnd++
+	}
+	pts.push(last)
+
+	const isComplete =
+		options.last ||
+		!options.simulatePressure ||
+		(pts.length > 1 && Vec2d.Dist(pts[pts.length - 1], pts[pts.length - 2]) < size) ||
+		pointsRemovedFromNearEnd > 0
+
+	// Add extra points between the two, to help avoid "dash" lines
+	// for strokes with tapered start and ends. Don't mutate the
+	// input array!
+	if (pts.length === 2 && options.simulatePressure) {
+		const last = pts[1]
+		pts = pts.slice(0, -1)
+		for (let i = 1; i < 5; i++) {
+			const next = Vec2d.Lrp(pts[0], last, i / 4)
+			next.z = ((pts[0].z + (last.z - pts[0].z)) * i) / 4
+			pts.push(next)
+		}
+	}
+
+	// The strokePoints array will hold the points for the stroke.
+	// Start it out with the first point, which needs no adjustment.
+	const strokePoints: StrokePoint[] = [
+		{
+			point: pts[0],
+			input: pts[0],
+			pressure: simulatePressure ? 0.5 : pts[0].z,
+			vector: new Vec2d(1, 1),
+			distance: 0,
+			runningLength: 0,
+			radius: 1,
+		},
+	]
+
+	// We use the totalLength to keep track of the total distance
+	let totalLength = 0
+
+	// We're set this to the latest point, so we can use it to calculate
+	// the distance and vector of the next point.
+	let prev = strokePoints[0]
+
+	// Iterate through all of the points, creating StrokePoints.
+	let point: Vec2d, distance: number
+
+	if (isComplete && streamline > 0) {
+		pts.push(pts[pts.length - 1].clone())
+	}
+
+	for (let i = 1, n = pts.length; i < n; i++) {
+		point =
+			!t || (options.last && i === n - 1) ? pts[i].clone() : pts[i].clone().lrp(prev.point, 1 - t)
+
+		// If the new point is the same as the previous point, skip ahead.
+		if (prev.point.equals(point)) continue
+
+		// How far is the new point from the previous point?
+		distance = Vec2d.Dist(point, prev.point)
+
+		// Add this distance to the total "running length" of the line.
+		totalLength += distance
+
+		// At the start of the line, we wait until the new point is a
+		// certain distance away from the original point, to avoid noise
+
+		if (i < 4 && totalLength < size) {
+			continue
+		}
+
+		// Create a new strokepoint (it will be the new "previous" one).
+		prev = {
+			input: pts[i],
+			// The adjusted point
+			point,
+			// The input pressure (or .5 if not specified)
+			pressure: simulatePressure ? 0.5 : pts[i].z,
+			// The vector from the current point to the previous point
+			vector: Vec2d.Sub(prev.point, point).uni(),
+			// The distance between the current point and the previous point
+			distance,
+			// The total distance so far
+			runningLength: totalLength,
+			// The stroke point's radius
+			radius: 1,
+		}
+
+		// Push it to the strokePoints array.
+		strokePoints.push(prev)
+	}
+
+	// Set the vector of the first point to be the same as the second point.
+	if (strokePoints[1]?.vector) {
+		strokePoints[0].vector = strokePoints[1].vector.clone()
+	}
+
+	if (totalLength < 1) {
+		const maxPressureAmongPoints = Math.max(0.5, ...strokePoints.map((s) => s.pressure))
+		strokePoints.forEach((s) => (s.pressure = maxPressureAmongPoints))
+	}
+
+	return strokePoints
+}

package/src/lib/shapes/shared/freehand/getStrokeRadius.ts

@@ -0,0 +1,13 @@
+/**
+ * Compute a radius based on the pressure.
+ *
+ * @internal
+ */
+export function getStrokeRadius(
+	size: number,
+	thinning: number,
+	pressure: number,
+	easing: (t: number) => number = (t) => t
+) {
+	return size * easing(0.5 - thinning * (0.5 - pressure))
+}

package/src/lib/shapes/shared/freehand/setStrokePointRadii.ts

@@ -0,0 +1,127 @@
+import { EASINGS } from '@bigbluebutton/editor'
+import { StrokeOptions, StrokePoint } from './types'
+
+const { min } = Math
+
+// This is the rate of change for simulated pressure. It could be an option.
+const RATE_OF_PRESSURE_CHANGE = 0.275
+
+/** @public */
+export function setStrokePointRadii(strokePoints: StrokePoint[], options: StrokeOptions) {
+	const {
+		size = 16,
+		thinning = 0.5,
+		simulatePressure = true,
+		easing = (t) => t,
+		start = {},
+		end = {},
+	} = options
+
+	const { easing: taperStartEase = EASINGS.easeOutQuad } = start
+	const { easing: taperEndEase = EASINGS.easeOutCubic } = end
+
+	const totalLength = strokePoints[strokePoints.length - 1].runningLength
+
+	let firstRadius: number | undefined
+	let prevPressure = strokePoints[0].pressure
+	let strokePoint: StrokePoint
+
+	if (!simulatePressure && totalLength < size) {
+		const max = strokePoints.reduce((max, curr) => Math.max(max, curr.pressure), 0.5)
+		strokePoints.forEach((sp) => {
+			sp.pressure = max
+			sp.radius = size * easing(0.5 - thinning * (0.5 - sp.pressure))
+		})
+		return strokePoints
+	} else {
+		// Calculate initial pressure based on the average of the first
+		// n number of points. This prevents "dots" at the start of the
+		// line. Drawn lines almost always start slow!
+		let p: number
+		for (let i = 0, n = strokePoints.length; i < n; i++) {
+			strokePoint = strokePoints[i]
+			if (strokePoint.runningLength > size * 5) break
+			const sp = min(1, strokePoint.distance / size)
+			if (simulatePressure) {
+				const rp = min(1, 1 - sp)
+				p = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))
+			} else {
+				p = min(1, prevPressure + (strokePoint.pressure - prevPressure) * 0.5)
+			}
+			prevPressure = prevPressure + (p - prevPressure) * 0.5
+		}
+
+		// Now calculate pressure and radius for each point
+		for (let i = 0; i < strokePoints.length; i++) {
+			strokePoint = strokePoints[i]
+			if (thinning) {
+				let { pressure } = strokePoint
+				const sp = min(1, strokePoint.distance / size)
+				if (simulatePressure) {
+					// If we're simulating pressure, then do so based on the distance
+					// between the current point and the previous point, and the size
+					// of the stroke.
+					const rp = min(1, 1 - sp)
+					pressure = min(1, prevPressure + (rp - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE))
+				} else {
+					// Otherwise, use the input pressure slightly smoothed based on the
+					// distance between the current point and the previous point.
+					pressure = min(
+						1,
+						prevPressure + (pressure - prevPressure) * (sp * RATE_OF_PRESSURE_CHANGE)
+					)
+				}
+
+				strokePoint.radius = size * easing(0.5 - thinning * (0.5 - pressure))
+
+				prevPressure = pressure
+			} else {
+				strokePoint.radius = size / 2
+			}
+
+			if (firstRadius === undefined) {
+				firstRadius = strokePoint.radius
+			}
+		}
+	}
+
+	const taperStart =
+		start.taper === false
+			? 0
+			: start.taper === true
+			? Math.max(size, totalLength)
+			: (start.taper as number)
+
+	const taperEnd =
+		end.taper === false
+			? 0
+			: end.taper === true
+			? Math.max(size, totalLength)
+			: (end.taper as number)
+
+	if (taperStart || taperEnd) {
+		for (let i = 0; i < strokePoints.length; i++) {
+			strokePoint = strokePoints[i]
+			/*
+				Apply tapering
+
+				If the current length is within the taper distance at either the
+				start or the end, calculate the taper strengths. Apply the smaller 
+				of the two taper strengths to the radius.
+			*/
+
+			const { runningLength } = strokePoint
+
+			const ts = runningLength < taperStart ? taperStartEase(runningLength / taperStart) : 1
+
+			const te =
+				totalLength - runningLength < taperEnd
+					? taperEndEase((totalLength - runningLength) / taperEnd)
+					: 1
+
+			strokePoint.radius = Math.max(0.01, strokePoint.radius * Math.min(ts, te))
+		}
+	}
+
+	return strokePoints
+}

package/src/lib/shapes/shared/freehand/svg.ts

@@ -0,0 +1,50 @@
+import { average, precise } from '@bigbluebutton/editor'
+import { StrokePoint } from './types'
+
+/**
+ * Turn an array of stroke points into a path of quadradic curves.
+ *
+ * @param points - The stroke points returned from perfect-freehand
+ * @param closed - Whether the shape is closed
+ */
+export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
+	const len = points.length
+
+	if (len < 2) {
+		return ''
+	}
+
+	let a = points[0].point
+	let b = points[1].point
+
+	if (len === 2) {
+		return `M${precise(a)}L${precise(b)}`
+	}
+
+	let result = ''
+
+	for (let i = 2, max = len - 1; i < max; i++) {
+		a = points[i].point
+		b = points[i + 1].point
+		result += average(a, b)
+	}
+
+	if (closed) {
+		// If closed, draw a curve from the last point to the first
+		return `M${average(points[0].point, points[1].point)}Q${precise(points[1].point)}${average(
+			points[1].point,
+			points[2].point
+		)}T${result}${average(points[len - 1].point, points[0].point)}${average(
+			points[0].point,
+			points[1].point
+		)}Z`
+	} else {
+		// If not closed, draw a curve starting at the first point and
+		// ending at the midpoint of the last and second-last point, then
+		// complete the curve with a line segment to the last point.
+		return `M${precise(points[0].point)}Q${precise(points[1].point)}${average(
+			points[1].point,
+			points[2].point
+		)}${points.length > 3 ? 'T' : ''}${result}L${precise(points[len - 1].point)}`
+	}
+}

package/src/lib/shapes/shared/freehand/svgInk.ts

@@ -0,0 +1,195 @@
+import {
+	Vec2d,
+	VecLike,
+	assert,
+	average,
+	precise,
+	shortAngleDist,
+	toDomPrecision,
+} from '@bigbluebutton/editor'
+import { getStrokeOutlineTracks } from './getStrokeOutlinePoints'
+import { getStrokePoints } from './getStrokePoints'
+import { setStrokePointRadii } from './setStrokePointRadii'
+import { StrokeOptions, StrokePoint } from './types'
+
+export function svgInk(rawInputPoints: VecLike[], options: StrokeOptions = {}) {
+	const { start = {}, end = {} } = options
+	const { cap: capStart = true } = start
+	const { cap: capEnd = true } = end
+	assert(!start.taper && !end.taper, 'cap taper not supported here')
+	assert(!start.easing && !end.easing, 'cap easing not supported here')
+	assert(capStart && capEnd, 'cap must be true')
+
+	const points = getStrokePoints(rawInputPoints, options)
+	setStrokePointRadii(points, options)
+	const partitions = partitionAtElbows(points)
+	let svg = ''
+	for (const partition of partitions) {
+		svg += renderPartition(partition, options)
+	}
+
+	return svg
+}
+
+function partitionAtElbows(points: StrokePoint[]): StrokePoint[][] {
+	if (points.length <= 2) return [points]
+
+	const result: StrokePoint[][] = []
+	let currentPartition: StrokePoint[] = [points[0]]
+	for (let i = 1; i < points.length - 1; i++) {
+		const prevPoint = points[i - 1]
+		const thisPoint = points[i]
+		const nextPoint = points[i + 1]
+		const prevAngle = Vec2d.Angle(prevPoint.point, thisPoint.point)
+		const nextAngle = Vec2d.Angle(thisPoint.point, nextPoint.point)
+		// acuteness is a normalized representation of how acute the angle is.
+		// 1 is an infinitely thin wedge
+		// 0 is a straight line
+		const acuteness = Math.abs(shortAngleDist(prevAngle, nextAngle)) / Math.PI
+		if (acuteness > 0.8) {
+			// always treat such acute angles as elbows
+			// and use the extended .input point as the elbow point for swooshiness in fast zaggy lines
+			const elbowPoint = {
+				...thisPoint,
+				point: thisPoint.input,
+			}
+			currentPartition.push(elbowPoint)
+			result.push(cleanUpPartition(currentPartition))
+			currentPartition = [elbowPoint]
+			continue
+		}
+		currentPartition.push(thisPoint)
+		if (acuteness < 0.25) {
+			// this is not an elbow, bail out
+			continue
+		}
+		// so now we have a reasonably acute angle but it might not be an elbow if it's far
+		// away from it's neighbors
+		const avgRadius = (prevPoint.radius + thisPoint.radius + nextPoint.radius) / 3
+		const incomingNormalizedDist = Vec2d.Dist(prevPoint.point, thisPoint.point) / avgRadius
+		const outgoingNormalizedDist = Vec2d.Dist(thisPoint.point, nextPoint.point) / avgRadius
+		// angular dist is a normalized representation of how far away the point is from it's neighbors
+		// (normalized by the radius)
+		const angularDist = incomingNormalizedDist + outgoingNormalizedDist
+		if (angularDist < 1.5) {
+			// if this point is kinda close to its neighbors and it has a reasonably
+			// acute angle, it's probably a hard elbow
+			currentPartition.push(thisPoint)
+			result.push(cleanUpPartition(currentPartition))
+			currentPartition = [thisPoint]
+			continue
+		}
+	}
+	currentPartition.push(points[points.length - 1])
+	result.push(cleanUpPartition(currentPartition))
+
+	return result
+}
+
+function cleanUpPartition(partition: StrokePoint[]) {
+	// clean up start of partition (remove points that are too close to the start)
+	const startPoint = partition[0]
+	while (partition.length > 2) {
+		const nextPoint = partition[1]
+		const dist = Vec2d.Dist(startPoint.point, nextPoint.point)
+		const avgRadius = (startPoint.radius + nextPoint.radius) / 2
+		if (dist < avgRadius * 0.5) {
+			partition.splice(1, 1)
+		} else {
+			break
+		}
+	}
+	// clean up end of partition in the same fashion
+	const endPoint = partition[partition.length - 1]
+	while (partition.length > 2) {
+		const prevPoint = partition[partition.length - 2]
+		const dist = Vec2d.Dist(endPoint.point, prevPoint.point)
+		const avgRadius = (endPoint.radius + prevPoint.radius) / 2
+		if (dist < avgRadius * 0.5) {
+			partition.splice(partition.length - 2, 1)
+		} else {
+			break
+		}
+	}
+	// now readjust the cap point vectors to point to their nearest neighbors
+	if (partition.length > 1) {
+		partition[0] = {
+			...partition[0],
+			vector: Vec2d.FromAngle(Vec2d.Angle(partition[1].point, partition[0].point)),
+		}
+		partition[partition.length - 1] = {
+			...partition[partition.length - 1],
+			vector: Vec2d.FromAngle(
+				Vec2d.Angle(partition[partition.length - 1].point, partition[partition.length - 2].point)
+			),
+		}
+	}
+	return partition
+}
+
+function circlePath(cx: number, cy: number, r: number) {
+	return (
+		'M ' +
+		cx +
+		' ' +
+		cy +
+		' m -' +
+		r +
+		', 0 a ' +
+		r +
+		',' +
+		r +
+		' 0 1,1 ' +
+		r * 2 +
+		',0 a ' +
+		r +
+		',' +
+		r +
+		' 0 1,1 -' +
+		r * 2 +
+		',0'
+	)
+}
+
+export function renderPartition(strokePoints: StrokePoint[], options: StrokeOptions = {}): string {
+	if (strokePoints.length === 0) return ''
+	if (strokePoints.length === 1) {
+		return circlePath(strokePoints[0].point.x, strokePoints[0].point.y, strokePoints[0].radius)
+	}
+
+	const { left, right } = getStrokeOutlineTracks(strokePoints, options)
+	right.reverse()
+	let svg = `M${precise(left[0])}T`
+
+	// draw left track
+	for (let i = 1; i < left.length; i++) {
+		svg += average(left[i - 1], left[i])
+	}
+	// draw end cap arc
+	{
+		const point = strokePoints[strokePoints.length - 1]
+		const radius = point.radius
+		const direction = point.vector.clone().per().neg()
+		const arcStart = Vec2d.Add(point.point, Vec2d.Mul(direction, radius))
+		const arcEnd = Vec2d.Add(point.point, Vec2d.Mul(direction, -radius))
+		svg += `${precise(arcStart)}A${toDomPrecision(radius)},${toDomPrecision(
+			radius
+		)} 0 0 1 ${precise(arcEnd)}T`
+	}
+	// draw right track
+	for (let i = 1; i < right.length; i++) {
+		svg += average(right[i - 1], right[i])
+	}
+	// draw start cap arc
+	{
+		const point = strokePoints[0]
+		const radius = point.radius
+		const direction = point.vector.clone().per()
+		const arcStart = Vec2d.Add(point.point, Vec2d.Mul(direction, radius))
+		const arcEnd = Vec2d.Add(point.point, Vec2d.Mul(direction, -radius))
+		svg += `${precise(arcStart)}A${toDomPrecision(radius)},${toDomPrecision(
+			radius
+		)} 0 0 1 ${precise(arcEnd)}Z`
+	}
+	return svg
+}

package/src/lib/shapes/shared/freehand/types.ts

@@ -0,0 +1,49 @@
+import { Vec2d } from '@bigbluebutton/editor'
+
+/**
+ * The options object for `getStroke` or `getStrokePoints`.
+ *
+ * @public
+ */
+export interface StrokeOptions {
+	/** The base size (diameter) of the stroke. */
+	size?: number
+	/** The effect of pressure on the stroke's size. */
+	thinning?: number
+	/** How much to soften the stroke's edges. */
+	smoothing?: number
+	streamline?: number
+	/** An easing function to apply to each point's pressure. */
+	easing?: (pressure: number) => number
+	/** Whether to simulate pressure based on velocity. */
+	simulatePressure?: boolean
+	/** Cap, taper and easing for the start of the line. */
+	start?: {
+		cap?: boolean
+		taper?: number | boolean
+		easing?: (distance: number) => number
+	}
+	/** Cap, taper and easing for the end of the line. */
+	end?: {
+		cap?: boolean
+		taper?: number | boolean
+		easing?: (distance: number) => number
+	}
+	/** Whether to handle the points as a completed stroke. */
+	last?: boolean
+}
+
+/**
+ * The points returned by `getStrokePoints`, and the input for `getStrokeOutlinePoints`
+ *
+ * @public
+ */
+export interface StrokePoint {
+	point: Vec2d
+	input: Vec2d
+	vector: Vec2d
+	pressure: number
+	distance: number
+	runningLength: number
+	radius: number
+}

package/src/lib/shapes/shared/getBrowserCanvasMaxSize.tsx

@@ -0,0 +1,28 @@
+import canvasSize from 'canvas-size'
+
+export type CanvasMaxSize = {
+	maxWidth: number
+	maxHeight: number
+	maxArea: number
+}
+
+let maxSizePromise: Promise<CanvasMaxSize> | null = null
+
+export function getBrowserCanvasMaxSize() {
+	if (!maxSizePromise) {
+		maxSizePromise = calculateBrowserCanvasMaxSize()
+	}
+
+	return maxSizePromise
+}
+
+async function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {
+	const maxWidth = await canvasSize.maxWidth({ usePromise: true })
+	const maxHeight = await canvasSize.maxHeight({ usePromise: true })
+	const maxArea = await canvasSize.maxArea({ usePromise: true })
+	return {
+		maxWidth: maxWidth.width,
+		maxHeight: maxHeight.height,
+		maxArea: maxArea.width * maxArea.height,
+	}
+}