@tldraw/editor 3.15.0-canary.22a03ce9c171 → 3.15.0-canary.2fa0050cd4a6

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

@@ -1,4 +1,5 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
+import { objectMapKeys } from '@tldraw/utils'
 import { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
@@ -60,10 +61,18 @@ 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')
@@ -73,31 +82,34 @@ export class TextManager {
 		elm.tabIndex = -1
 		this.editor.getContainer().appendChild(elm)
 
-		// 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,
+		this.elm = elm
+
+		for (const key of objectMapKeys(initialDefaultStyles)) {
+			elm.style.setProperty(key, initialDefaultStyles[key])
 		}
+	}
 
-		this.elm = elm
+	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])
+			}
+		}
 	}
 
 	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)
@@ -107,54 +119,36 @@ export class TextManager {
 	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		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)
-				}
-			}
+		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,
 		}
 
-		elm.innerHTML = html
+		const restoreStyles = this.setElementStyles(newStyles)
 
-		// Apply the default styles to the element (for all styles here or that were ever seen in opts.otherStyles)
-		this.resetElmStyles()
+		try {
+			elm.innerHTML = html
 
-		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)
+			const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
+			const rect = elm.getBoundingClientRect()
 
-		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)
+			return {
+				x: 0,
+				y: 0,
+				w: rect.width,
+				h: rect.height,
+				scrollWidth,
 			}
-		}
-
-		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
-		const rect = elm.getBoundingClientRect()
-
-		return {
-			x: 0,
-			y: 0,
-			w: rect.width,
-			h: rect.height,
-			scrollWidth,
+		} finally {
+			restoreStyles()
 		}
 	}
 
@@ -274,82 +268,68 @@ 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'
-
-		if (shouldTruncateToFirstLine) {
-			elm.style.setProperty('overflow-wrap', 'anywhere')
-			elm.style.setProperty('word-break', 'break-all')
-		}
-
-		if (opts.otherStyles) {
-			for (const [key, value] of Object.entries(opts.otherStyles)) {
-				elm.style.setProperty(key, value)
-			}
+		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,
 		}
+		const restoreStyles = this.setElementStyles(newStyles)
 
-		const normalizedText = normalizeTextForDom(textToMeasure)
-
-		// Render the text into the measurement element:
-		elm.textContent = normalizedText
-
-		// actually measure the text:
-		const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
-			shouldTruncateToFirstLine,
-		})
+		try {
+			const normalizedText = normalizeTextForDom(textToMeasure)
 
-		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`)
+			// Render the text into the measurement element:
 			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,
-				},
+
+			// actually measure the text:
+			const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
+				shouldTruncateToFirstLine,
 			})
 
-			return truncatedSpans
-		}
+			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
+			return spans
+		} finally {
+			restoreStyles()
+		}
 	}
 }

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

@@ -181,6 +181,17 @@ 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', () => {
@@ -195,17 +206,6 @@ 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,6 +531,52 @@ 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 { pointInPolygon } from './utils'
+import { approximately, approximatelyLte, pointInPolygon } from './utils'
 import { Vec, VecLike } from './Vec'
 
 // need even more intersections? See https://gist.github.com/steveruizok/35c02d526c707003a5c79761bfb89a52
@@ -17,7 +17,8 @@ export function intersectLineSegmentLineSegment(
 	a1: VecLike,
 	a2: VecLike,
 	b1: VecLike,
-	b2: VecLike
+	b2: VecLike,
+	precision = 1e-10
 ) {
 	const ABx = a1.x - b1.x
 	const ABy = a1.y - b1.y
@@ -29,14 +30,19 @@ export function intersectLineSegmentLineSegment(
 	const ub_t = AVx * ABy - AVy * ABx
 	const u_b = BVy * AVx - BVx * AVy
 
-	if (ua_t === 0 || ub_t === 0) return null // coincident
+	if (approximately(ua_t, 0, precision) || approximately(ub_t, 0, precision)) return null // coincident
 
-	if (u_b === 0) return null // parallel
+	if (approximately(u_b, 0, precision)) return null // parallel
 
 	if (u_b !== 0) {
 		const ua = ua_t / u_b
 		const ub = ub_t / u_b
-		if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
+		if (
+			approximatelyLte(0, ua, precision) &&
+			approximatelyLte(ua, 1, precision) &&
+			approximatelyLte(0, ub, precision) &&
+			approximatelyLte(ub, 1, precision)
+		) {
 			return Vec.AddXY(a1, ua * AVx, ua * AVy)
 		}
 	}
@@ -125,6 +131,7 @@ 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,6 +77,17 @@ 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.22a03ce9c171'
+export const version = '3.15.0-canary.2fa0050cd4a6'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-09T11:27:52.513Z',
-	patch: '2025-07-09T11:27:52.513Z',
+	minor: '2025-07-10T08:17:03.263Z',
+	patch: '2025-07-10T08:17:03.263Z',
 }