tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

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

@@ -1,8 +1,18 @@
 import { Vec, VecLike } from '@tldraw/editor'
+import {
+	distances,
+	ingest,
+	inputX,
+	inputY,
+	inputZ,
+	pointCount,
+	pointX,
+	pointY,
+	pressures,
+	runningLengths,
+} from './core'
 import type { StrokeOptions, StrokePoint } from './types'
 
-const MIN_PRESSURE = 0.025
-
 /**
  * ## getStrokePoints
  *
@@ -18,160 +28,30 @@ 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(Vec.From)
-
-	let pointsRemovedFromNearEnd = 0
-
-	if (!simulatePressure) {
-		// Clamp any zero/near-zero pressure points to a minimum value.
-		// Some pens or OSes report z=0 even while the pen is touching,
-		// so we clamp rather than strip to avoid removing real input.
-		for (const pt of pts) {
-			if (pt.z < MIN_PRESSURE) {
-				pt.z = MIN_PRESSURE
-			}
-		}
-	}
-
-	if (pts.length === 0)
-		return [
-			{
-				point: Vec.From(rawInputPoints[0]),
-				input: Vec.From(rawInputPoints[0]),
-				pressure: simulatePressure ? 0.5 : 0.15,
-				vector: new Vec(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 (Vec.Dist2(pt, pts[0]) > (size / 3) ** 2) 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 (Vec.Dist2(pt, last) > (size / 3) ** 2) break
-		pts.pop()
-		pt = pts[pts.length - 1]
-		pointsRemovedFromNearEnd++
-	}
-	pts.push(last)
-
-	const isComplete =
-		options.last ||
-		!options.simulatePressure ||
-		(pts.length > 1 && Vec.Dist2(pts[pts.length - 1], pts[pts.length - 2]) < size ** 2) ||
-		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 = Vec.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 Vec(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: Vec, 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 = Vec.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
+	ingest(rawInputPoints, options)
+
+	const n = pointCount
+	const ptX = pointX
+	const ptY = pointY
+	const inX = inputX
+	const inY = inputY
+	const inZ = inputZ
+	const press = pressures
+	const dists = distances
+	const runs = runningLengths
+	const strokePoints: StrokePoint[] = new Array(n)
+	for (let i = 0; i < n; i++) {
+		const input = new Vec(inX[i], inY[i], inZ[i])
+		// The first point needs no adjustment, so its point and input are the same vector.
+		const point = i === 0 ? input : new Vec(ptX[i], ptY[i], inZ[i])
+		strokePoints[i] = {
 			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: Vec.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
+			input,
+			pressure: press[i],
+			distance: dists[i],
+			runningLength: runs[i],
 			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/svg.ts

@@ -1,9 +1,12 @@
-import { average, precise } from '@tldraw/editor'
+import { finishPath, resetPath, toCenti, writeCPair, writeStr } from './fmt'
 import { StrokePoint } from './types'
 
 /**
  * Turn an array of stroke points into a path of quadratic curves.
  *
+ * The path uses relative commands with coordinates rounded to hundredths of a pixel, which
+ * renders identically to the absolute 4-decimal form but is much smaller and faster to build.
+ *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
  *
@@ -16,37 +19,83 @@ export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false
 		return ''
 	}
 
-	let a = points[0].point
-	let b = points[1].point
+	resetPath()
 
 	if (len === 2) {
-		return `M${precise(a)}L${precise(b)}`
+		const a = points[0].point
+		const b = points[1].point
+		const ax = toCenti(a.x)
+		const ay = toCenti(a.y)
+		writeStr('M')
+		writeCPair(ax, ay)
+		writeStr('l')
+		writeCPair(toCenti(b.x) - ax, toCenti(b.y) - ay)
+		return finishPath()
 	}
 
-	let result = ''
+	const first = points[0].point
+	const second = points[1].point
+	const third = points[2].point
+
+	const secondX = toCenti(second.x)
+	const secondY = toCenti(second.y)
+	// midpoint of the first and second points
+	const m01x = Math.round((first.x + second.x) * 50)
+	const m01y = Math.round((first.y + second.y) * 50)
+	// midpoint of the second and third points
+	const m12x = Math.round((second.x + third.x) * 50)
+	const m12y = Math.round((second.y + third.y) * 50)
+
+	// Current position in integer hundredths
+	let cx = m12x
+	let cy = m12y
 
+	if (closed) {
+		// If closed, start at the first midpoint and draw a curve through the second point
+		writeStr('M')
+		writeCPair(m01x, m01y)
+		writeStr('q')
+		writeCPair(secondX - m01x, secondY - m01y)
+		writeCPair(m12x - m01x, m12y - m01y)
+		writeStr('t')
+	} else {
+		// If not closed, draw a curve starting at the first point and
+		// ending at the midpoint of the second and third points.
+		const firstX = toCenti(first.x)
+		const firstY = toCenti(first.y)
+		writeStr('M')
+		writeCPair(firstX, firstY)
+		writeStr('q')
+		writeCPair(secondX - firstX, secondY - firstY)
+		writeCPair(m12x - firstX, m12y - firstY)
+		if (len > 3) writeStr('t')
+	}
+
+	// Continue the smooth quadratic chain through the midpoints of the remaining points
 	for (let i = 2, max = len - 1; i < max; i++) {
-		a = points[i].point
-		b = points[i + 1].point
-		result += average(a, b)
+		const p = points[i].point
+		const q = points[i + 1].point
+		const mx = Math.round((p.x + q.x) * 50)
+		const my = Math.round((p.y + q.y) * 50)
+		writeCPair(mx - cx, my - cy)
+		cx = mx
+		cy = my
 	}
 
+	const last = points[len - 1].point
+
 	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`
+		// Draw a curve from the last-first midpoint back to the first-second midpoint
+		const mLastX = Math.round((last.x + first.x) * 50)
+		const mLastY = Math.round((last.y + first.y) * 50)
+		writeCPair(mLastX - cx, mLastY - cy)
+		writeCPair(m01x - mLastX, m01y - mLastY)
+		writeStr('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)}`
+		// Complete the curve with a line segment to the last point.
+		writeStr('l')
+		writeCPair(toCenti(last.x) - cx, toCenti(last.y) - cy)
 	}
+
+	return finishPath()
 }