@tldraw/editor 3.15.0-canary.20472333970a → 3.15.0-canary.22a03ce9c171

package/src/lib/editor/managers/TextManager/TextManager.ts

@@ -1,5 +1,4 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { objectMapKeys } from '@tldraw/utils'
 import { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
@@ -61,18 +60,10 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
-const initialDefaultStyles = Object.freeze({
-	'overflow-wrap': 'break-word',
-	'word-break': 'auto',
-	width: null,
-	height: null,
-	'max-width': null,
-	'min-width': null,
-})
-
 /** @public */
 export class TextManager {
 	private elm: HTMLDivElement
+	private defaultStyles: Record<string, string | null>
 
 	constructor(public editor: Editor) {
 		const elm = document.createElement('div')
@@ -82,34 +73,31 @@ export class TextManager {
 		elm.tabIndex = -1
 		this.editor.getContainer().appendChild(elm)
 
-		this.elm = elm
-
-		for (const key of objectMapKeys(initialDefaultStyles)) {
-			elm.style.setProperty(key, initialDefaultStyles[key])
+		// we need to save the default styles so that we can restore them when we're done
+		// these must be the css names, not the js names for the styles
+		this.defaultStyles = {
+			'overflow-wrap': 'break-word',
+			'word-break': 'auto',
+			width: null,
+			height: null,
+			'max-width': null,
+			'min-width': null,
 		}
-	}
 
-	private setElementStyles(styles: Record<string, string | undefined>) {
-		const stylesToReinstate = {} as any
-		for (const key of objectMapKeys(styles)) {
-			if (typeof styles[key] === 'string') {
-				const oldValue = this.elm.style.getPropertyValue(key)
-				if (oldValue === styles[key]) continue
-				stylesToReinstate[key] = oldValue
-				this.elm.style.setProperty(key, styles[key])
-			}
-		}
-		return () => {
-			for (const key of objectMapKeys(stylesToReinstate)) {
-				this.elm.style.setProperty(key, stylesToReinstate[key])
-			}
-		}
+		this.elm = elm
 	}
 
 	dispose() {
 		return this.elm.remove()
 	}
 
+	private resetElmStyles() {
+		const { elm, defaultStyles } = this
+		for (const key in defaultStyles) {
+			elm.style.setProperty(key, defaultStyles[key])
+		}
+	}
+
 	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const div = document.createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
@@ -119,36 +107,54 @@ export class TextManager {
 	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const { elm } = this
 
-		const newStyles = {
-			'font-family': opts.fontFamily,
-			'font-style': opts.fontStyle,
-			'font-weight': opts.fontWeight,
-			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
-			padding: opts.padding,
-			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
-			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
-			'overflow-wrap': opts.disableOverflowWrapBreaking ? 'normal' : undefined,
-			...opts.otherStyles,
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
 		}
 
-		const restoreStyles = this.setElementStyles(newStyles)
+		elm.innerHTML = html
 
-		try {
-			elm.innerHTML = html
+		// Apply the default styles to the element (for all styles here or that were ever seen in opts.otherStyles)
+		this.resetElmStyles()
 
-			const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
-			const rect = elm.getBoundingClientRect()
+		elm.style.setProperty('font-family', opts.fontFamily)
+		elm.style.setProperty('font-style', opts.fontStyle)
+		elm.style.setProperty('font-weight', opts.fontWeight)
+		elm.style.setProperty('font-size', opts.fontSize + 'px')
+		elm.style.setProperty('line-height', opts.lineHeight.toString())
+		elm.style.setProperty('padding', opts.padding)
 
-			return {
-				x: 0,
-				y: 0,
-				w: rect.width,
-				h: rect.height,
-				scrollWidth,
+		if (opts.maxWidth) {
+			elm.style.setProperty('max-width', opts.maxWidth + 'px')
+		}
+
+		if (opts.minWidth) {
+			elm.style.setProperty('min-width', opts.minWidth + 'px')
+		}
+
+		if (opts.disableOverflowWrapBreaking) {
+			elm.style.setProperty('overflow-wrap', 'normal')
+		}
+
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
 			}
-		} finally {
-			restoreStyles()
+		}
+
+		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
+		const rect = elm.getBoundingClientRect()
+
+		return {
+			x: 0,
+			y: 0,
+			w: rect.width,
+			h: rect.height,
+			scrollWidth,
 		}
 	}
 
@@ -268,68 +274,82 @@ export class TextManager {
 
 		const { elm } = this
 
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
+		}
+
+		this.resetElmStyles()
+
+		elm.style.setProperty('font-family', opts.fontFamily)
+		elm.style.setProperty('font-style', opts.fontStyle)
+		elm.style.setProperty('font-weight', opts.fontWeight)
+		elm.style.setProperty('font-size', opts.fontSize + 'px')
+		elm.style.setProperty('line-height', opts.lineHeight.toString())
+
+		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
+		elm.style.setProperty('width', `${elementWidth}px`)
+		elm.style.setProperty('height', 'min-content')
+		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
+
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
-		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
-		const newStyles = {
-			'font-family': opts.fontFamily,
-			'font-style': opts.fontStyle,
-			'font-weight': opts.fontWeight,
-			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
-			width: `${elementWidth}px`,
-			height: 'min-content',
-			'text-align': textAlignmentsForLtr[opts.textAlign],
-			'overflow-wrap': shouldTruncateToFirstLine ? 'anywhere' : undefined,
-			'word-break': shouldTruncateToFirstLine ? 'break-all' : undefined,
-			...opts.otherStyles,
+
+		if (shouldTruncateToFirstLine) {
+			elm.style.setProperty('overflow-wrap', 'anywhere')
+			elm.style.setProperty('word-break', 'break-all')
 		}
-		const restoreStyles = this.setElementStyles(newStyles)
 
-		try {
-			const normalizedText = normalizeTextForDom(textToMeasure)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
+			}
+		}
 
-			// Render the text into the measurement element:
-			elm.textContent = normalizedText
+		const normalizedText = normalizeTextForDom(textToMeasure)
 
-			// actually measure the text:
-			const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
-				shouldTruncateToFirstLine,
-			})
+		// Render the text into the measurement element:
+		elm.textContent = normalizedText
 
-			if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
-				// we need to measure the ellipsis to know how much space it takes up
-				elm.textContent = '…'
-				const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
-
-				// then, we need to subtract that space from the width we have and measure again:
-				elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
-				elm.textContent = normalizedText
-				const truncatedSpans = this.measureElementTextNodeSpans(elm, {
-					shouldTruncateToFirstLine: true,
-				}).spans
-
-				// Finally, we add in our ellipsis at the end of the last span. We
-				// have to do this after measuring, not before, because adding the
-				// ellipsis changes how whitespace might be getting collapsed by the
-				// browser.
-				const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
-				truncatedSpans.push({
-					text: '…',
-					box: {
-						x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
-						y: lastSpan.box.y,
-						w: ellipsisWidth,
-						h: lastSpan.box.h,
-					},
-				})
-
-				return truncatedSpans
-			}
+		// actually measure the text:
+		const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
+			shouldTruncateToFirstLine,
+		})
 
-			return spans
-		} finally {
-			restoreStyles()
+		if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
+			// we need to measure the ellipsis to know how much space it takes up
+			elm.textContent = '…'
+			const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
+
+			// then, we need to subtract that space from the width we have and measure again:
+			elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
+			elm.textContent = normalizedText
+			const truncatedSpans = this.measureElementTextNodeSpans(elm, {
+				shouldTruncateToFirstLine: true,
+			}).spans
+
+			// Finally, we add in our ellipsis at the end of the last span. We
+			// have to do this after measuring, not before, because adding the
+			// ellipsis changes how whitespace might be getting collapsed by the
+			// browser.
+			const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
+			truncatedSpans.push({
+				text: '…',
+				box: {
+					x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
+					y: lastSpan.box.y,
+					w: ellipsisWidth,
+					h: lastSpan.box.h,
+				},
+			})
+
+			return truncatedSpans
 		}
+
+		return spans
 	}
 }

package/src/lib/primitives/geometry/Arc2d.ts

@@ -2,7 +2,7 @@ import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Arc2d extends Geometry2d {
@@ -94,7 +94,7 @@ export class Arc2d extends Geometry2d {
 	getVertices(): Vec[] {
 		const { _center, _measure: measure, length, _radius: radius, _angleStart: angleStart } = this
 		const vertices: Vec[] = []
-		for (let i = 0, n = getVerticesCountForArcLength(Math.abs(length)); i < n + 1; i++) {
+		for (let i = 0, n = getVerticesCountForLength(Math.abs(length)); i < n + 1; i++) {
 			const t = (i / n) * measure
 			const angle = angleStart + t
 			vertices.push(getPointOnCircle(_center, radius, angle))

package/src/lib/primitives/geometry/Circle2d.ts

@@ -3,7 +3,7 @@ import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { PI2, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Circle2d extends Geometry2d {
@@ -36,7 +36,7 @@ export class Circle2d extends Geometry2d {
 		const { _center, _radius: radius } = this
 		const perimeter = PI2 * radius
 		const vertices: Vec[] = []
-		for (let i = 0, n = getVerticesCountForArcLength(perimeter); i < n; i++) {
+		for (let i = 0, n = getVerticesCountForLength(perimeter); i < n; i++) {
 			const angle = (i / n) * PI2
 			vertices.push(getPointOnCircle(_center, radius, angle))
 		}

package/src/lib/primitives/geometry/CubicBezier2d.ts

@@ -8,7 +8,6 @@ export class CubicBezier2d extends Polyline2d {
 	private _b: Vec
 	private _c: Vec
 	private _d: Vec
-	private _resolution: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -16,7 +15,6 @@ export class CubicBezier2d extends Polyline2d {
 			cp1: Vec
 			cp2: Vec
 			end: Vec
-			resolution?: number
 		}
 	) {
 		const { start: a, cp1: b, cp2: c, end: d } = config
@@ -26,14 +24,13 @@ export class CubicBezier2d extends Polyline2d {
 		this._b = b
 		this._c = c
 		this._d = d
-		this._resolution = config.resolution ?? 10
 	}
 
 	override getVertices() {
 		const vertices = [] as Vec[]
 		const { _a: a, _b: b, _c: c, _d: d } = this
 		// we'll always use ten vertices for each bezier curve
-		for (let i = 0, n = this._resolution; i <= n; i++) {
+		for (let i = 0, n = 10; i <= n; i++) {
 			const t = i / n
 			vertices.push(
 				new Vec(

package/src/lib/primitives/geometry/Ellipse2d.ts

@@ -3,7 +3,7 @@ import { Vec, VecLike } from '../Vec'
 import { PI, PI2, clamp, perimeterOfEllipse } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Ellipse2d extends Geometry2d {
@@ -47,7 +47,7 @@ export class Ellipse2d extends Geometry2d {
 		const q = Math.pow(cx - cy, 2) / Math.pow(cx + cy, 2)
 		const p = PI * (cx + cy) * (1 + (3 * q) / (10 + Math.sqrt(4 - 3 * q)))
 		// Number of points
-		const len = getVerticesCountForArcLength(p)
+		const len = getVerticesCountForLength(p)
 		// Size of step
 		const step = PI2 / len
 

package/src/lib/primitives/geometry/geometry-constants.ts

@@ -1,7 +1,6 @@
 const SPACING = 20
 const MIN_COUNT = 8
 
-/** @internal */
-export function getVerticesCountForArcLength(length: number, spacing = SPACING) {
+export function getVerticesCountForLength(length: number, spacing = SPACING) {
 	return Math.max(MIN_COUNT, Math.ceil(length / spacing))
 }

package/src/lib/primitives/intersect.test.ts

@@ -181,17 +181,6 @@ describe('intersectLineSegmentLineSegment', () => {
 			expect(result!.x).toBeCloseTo(5, 1)
 			expect(result!.y).toBeCloseTo(5, 1)
 		})
-
-		it('should find intersection when segments cross at endpoints (floating point error case)', () => {
-			const result = intersectLineSegmentLineSegment(
-				{ x: 100, y: 100 },
-				{ x: 20, y: 20 },
-				{ x: 36.141160159025375, y: 31.811740238538057 },
-				{ x: 34.14213562373095, y: 34.14213562373095 }
-			)
-
-			expect(result).not.toBeNull()
-		})
 	})
 
 	describe('edge cases', () => {
@@ -206,6 +195,17 @@ describe('intersectLineSegmentLineSegment', () => {
 			expect(result).not.toBeNull()
 		})
 
+		it('should handle segments with very small coordinates', () => {
+			const a1 = new Vec(1e-10, 1e-10)
+			const a2 = new Vec(1e-9, 1e-9)
+			const b1 = new Vec(1e-10, 1e-9)
+			const b2 = new Vec(1e-9, 1e-10)
+
+			const result = intersectLineSegmentLineSegment(a1, a2, b1, b2)
+
+			expect(result).not.toBeNull()
+		})
+
 		it('should handle segments with very large coordinates', () => {
 			const a1 = new Vec(1e10, 1e10)
 			const a2 = new Vec(1e11, 1e11)
@@ -531,52 +531,6 @@ describe('intersectLineSegmentPolyline', () => {
 		expect(sorted[3].x).toBeCloseTo(18, 5)
 		sorted.forEach((pt) => expect(pt.y).toBeCloseTo(5, 5))
 	})
-
-	// Test cases for vertex intersection issues
-	describe('vertex intersection edge cases', () => {
-		it('should detect intersection when line segment passes through polyline vertex', () => {
-			const a1 = new Vec(0, 5)
-			const a2 = new Vec(10, 5)
-			const points = [new Vec(5, 0), new Vec(5, 10)] // vertical line at x=5
-			const result = intersectLineSegmentPolyline(a1, a2, points)
-			expect(result).not.toBeNull()
-			expect(result!.length).toBe(1)
-			expect(result![0].x).toBeCloseTo(5, 5)
-			expect(result![0].y).toBeCloseTo(5, 5)
-		})
-
-		it('should detect intersection when line segment passes through polyline vertex at angle', () => {
-			const a1 = new Vec(0, 0)
-			const a2 = new Vec(10, 10)
-			const points = [new Vec(5, 0), new Vec(5, 10)] // vertical line at x=5
-			const result = intersectLineSegmentPolyline(a1, a2, points)
-			expect(result).not.toBeNull()
-			expect(result!.length).toBe(1)
-			expect(result![0].x).toBeCloseTo(5, 5)
-			expect(result![0].y).toBeCloseTo(5, 5)
-		})
-
-		it('should detect intersection when line segment passes through polyline vertex at middle', () => {
-			const a1 = new Vec(0, 5)
-			const a2 = new Vec(10, 5)
-			const points = [new Vec(0, 0), new Vec(5, 5), new Vec(10, 0)] // vertex at (5,5)
-			const result = intersectLineSegmentPolyline(a1, a2, points)
-			expect(result).not.toBeNull()
-			expect(result!.length).toBe(1)
-			expect(result![0].x).toBeCloseTo(5, 5)
-			expect(result![0].y).toBeCloseTo(5, 5)
-		})
-
-		it('should detect intersection when line segment passes through a polyline vertext (floating point error case)', () => {
-			const result = intersectLineSegmentPolyline({ x: 100, y: 100 }, { x: 20, y: 20 }, [
-				{ x: 36.141160159025375, y: 31.811740238538057 },
-				{ x: 34.14213562373095, y: 34.14213562373095 },
-				{ x: 31.811740238538057, y: 36.141160159025375 },
-			])
-
-			expect(result).not.toBeNull()
-		})
-	})
 })
 
 describe('intersectLineSegmentPolygon', () => {

package/src/lib/primitives/intersect.ts

@@ -1,5 +1,5 @@
 import { Box } from './Box'
-import { approximately, approximatelyLte, pointInPolygon } from './utils'
+import { pointInPolygon } from './utils'
 import { Vec, VecLike } from './Vec'
 
 // need even more intersections? See https://gist.github.com/steveruizok/35c02d526c707003a5c79761bfb89a52
@@ -17,8 +17,7 @@ export function intersectLineSegmentLineSegment(
 	a1: VecLike,
 	a2: VecLike,
 	b1: VecLike,
-	b2: VecLike,
-	precision = 1e-10
+	b2: VecLike
 ) {
 	const ABx = a1.x - b1.x
 	const ABy = a1.y - b1.y
@@ -30,19 +29,14 @@ export function intersectLineSegmentLineSegment(
 	const ub_t = AVx * ABy - AVy * ABx
 	const u_b = BVy * AVx - BVx * AVy
 
-	if (approximately(ua_t, 0, precision) || approximately(ub_t, 0, precision)) return null // coincident
+	if (ua_t === 0 || ub_t === 0) return null // coincident
 
-	if (approximately(u_b, 0, precision)) return null // parallel
+	if (u_b === 0) return null // parallel
 
 	if (u_b !== 0) {
 		const ua = ua_t / u_b
 		const ub = ub_t / u_b
-		if (
-			approximatelyLte(0, ua, precision) &&
-			approximatelyLte(ua, 1, precision) &&
-			approximatelyLte(0, ub, precision) &&
-			approximatelyLte(ub, 1, precision)
-		) {
+		if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
 			return Vec.AddXY(a1, ua * AVx, ua * AVy)
 		}
 	}
@@ -131,7 +125,6 @@ export function intersectLineSegmentPolygon(a1: VecLike, a2: VecLike, points: Ve
 			points[i - 1],
 			points[i % points.length]
 		)
-
 		if (segmentIntersection) result.push(segmentIntersection)
 	}
 

package/src/lib/primitives/utils.ts

@@ -77,17 +77,6 @@ export function approximately(a: number, b: number, precision = 0.000001) {
 	return Math.abs(a - b) <= precision
 }
 
-/**
- * Whether a number is approximately less than or equal to another number.
- *
- * @param a - The first number.
- * @param b - The second number.
- * @public
- */
-export function approximatelyLte(a: number, b: number, precision = 0.000001) {
-	return a < b || approximately(a, b, precision)
-}
-
 /**
  * Find the approximate perimeter of an ellipse.
  *

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.15.0-canary.20472333970a'
+export const version = '3.15.0-canary.22a03ce9c171'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-10T11:43:07.890Z',
-	patch: '2025-07-10T11:43:07.890Z',
+	minor: '2025-07-09T11:27:52.513Z',
+	patch: '2025-07-09T11:27:52.513Z',
 }