@tldraw/editor 3.15.0-canary.84e5eaec2c02 → 3.15.0-canary.8789e24bb6fc

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/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 { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } 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 = getVerticesCountForLength(Math.abs(length)); i < n + 1; i++) {
+		for (let i = 0, n = getVerticesCountForArcLength(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 { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } 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 = getVerticesCountForLength(perimeter); i < n; i++) {
+		for (let i = 0, n = getVerticesCountForArcLength(perimeter); i < n; i++) {
 			const angle = (i / n) * PI2
 			vertices.push(getPointOnCircle(_center, radius, angle))
 		}

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

@@ -8,6 +8,7 @@ export class CubicBezier2d extends Polyline2d {
 	private _b: Vec
 	private _c: Vec
 	private _d: Vec
+	private _resolution: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -15,6 +16,7 @@ export class CubicBezier2d extends Polyline2d {
 			cp1: Vec
 			cp2: Vec
 			end: Vec
+			resolution?: number
 		}
 	) {
 		const { start: a, cp1: b, cp2: c, end: d } = config
@@ -24,13 +26,14 @@ 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 = 10; i <= n; i++) {
+		for (let i = 0, n = this._resolution; 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 { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } 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 = getVerticesCountForLength(p)
+		const len = getVerticesCountForArcLength(p)
 		// Size of step
 		const step = PI2 / len
 

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

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