@tldraw/editor 3.12.0-internal.34d12af75e37 → 3.12.0

package/src/lib/exports/StyleEmbedder.ts

@@ -1,4 +1,4 @@
-import { assert, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'
+import { assertExists, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'
 import { FontEmbedder } from './FontEmbedder'
 import { ReadonlyStyles, Styles, cssRules } from './cssRules'
 import {
@@ -23,18 +23,6 @@ export class StyleEmbedder {
 	private readonly styles = new Map<Element, ElementStyleInfo>()
 	readonly fonts = new FontEmbedder()
 
-	async collectDefaultStyles(elements: Element[]) {
-		const collected = new Set<string>()
-		const promises = []
-		for (const element of elements) {
-			const tagName = element.tagName.toLowerCase()
-			if (collected.has(tagName)) continue
-			collected.add(tagName)
-			promises.push(populateDefaultStylesForTagName(tagName))
-		}
-		await Promise.all(promises)
-	}
-
 	readRootElementStyles(rootElement: Element) {
 		// when reading a root, we always apply _all_ the styles, even if they match the defaults
 		this.readElementStyles(rootElement, {
@@ -307,92 +295,43 @@ function formatCss(style: ReadonlyStyles) {
 // when we're figuring out the default values for a tag, we need read them from a separate document
 // so they're not affected by the current document's styles
 let defaultStyleFrame:
-	| Promise<{
-			url: string
-			iframe: HTMLIFrameElement
-			foreignObject: SVGForeignObjectElement
-			document: Document
-	  }>
+	| { iframe: HTMLIFrameElement; foreignObject: SVGForeignObjectElement; document: Document }
 	| undefined
-
-const defaultStylesByTagName: Record<
-	string,
-	| { type: 'resolved'; styles: ReadonlyStyles; promise: Promise<ReadonlyStyles> }
-	| { type: 'pending'; promise: Promise<ReadonlyStyles> }
-> = {}
-
+const defaultStylesByTagName: Record<string, ReadonlyStyles> = {}
 function getDefaultStyleFrame() {
 	if (!defaultStyleFrame) {
-		defaultStyleFrame = new Promise((resolve) => {
-			const frame = document.createElement('iframe')
-			Object.assign(frame.style, {
-				position: 'absolute',
-				top: '-10000px',
-				left: '-10000px',
-				width: '1px',
-				height: '1px',
-				opacity: '0',
-				pointerEvents: 'none',
-			})
-
-			const emptyFrameBlob = new Blob(
-				['<svg xmlns="http://www.w3.org/2000/svg"><foreignObject/></svg>'],
-				{ type: 'image/svg+xml' }
-			)
-			const emptyFrameUrl = URL.createObjectURL(emptyFrameBlob)
-
-			frame.onload = () => {
-				const contentDocument = frame.contentDocument!
-				const foreignObject = contentDocument.querySelector('foreignObject')!
-				resolve({ url: emptyFrameUrl, iframe: frame, foreignObject, document: contentDocument })
-			}
-
-			frame.src = emptyFrameUrl
-			document.body.appendChild(frame)
-		})
+		const frame = document.createElement('iframe')
+		frame.style.display = 'none'
+		document.body.appendChild(frame)
+		const frameDocument = assertExists(frame.contentDocument, 'frame must have a document')
+		const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+		const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
+		svg.appendChild(foreignObject)
+		frameDocument.body.appendChild(svg)
+		defaultStyleFrame = { iframe: frame, foreignObject, document: frameDocument }
 	}
 	return defaultStyleFrame
 }
 
 function destroyDefaultStyleFrame() {
 	if (defaultStyleFrame) {
-		defaultStyleFrame.then(({ url, iframe }) => {
-			URL.revokeObjectURL(url)
-			document.body.removeChild(iframe)
-		})
+		document.body.removeChild(defaultStyleFrame.iframe)
 		defaultStyleFrame = undefined
 	}
 }
 
 const defaultStyleReadOptions: ReadStyleOpts = { defaultStyles: NO_STYLES, parentStyles: NO_STYLES }
-function populateDefaultStylesForTagName(tagName: string) {
-	const existing = defaultStylesByTagName[tagName]
-	if (existing && existing.type === 'resolved') {
-		return existing.promise
-	}
-
-	if (existing && existing.type === 'pending') {
-		return existing.promise
-	}
-
-	const promise = getDefaultStyleFrame().then(({ foreignObject, document }) => {
-		const element = document.createElementNS('http://www.w3.org/1999/xhtml', tagName)
-		element.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
+function getDefaultStylesForTagName(tagName: string) {
+	let existing = defaultStylesByTagName[tagName]
+	if (!existing) {
+		const { foreignObject, document } = getDefaultStyleFrame()
+		const element = document.createElement(tagName)
 		foreignObject.appendChild(element)
-		const styles = element.computedStyleMap
+		existing = element.computedStyleMap
 			? styleFromComputedStyleMap(element.computedStyleMap(), defaultStyleReadOptions)
 			: styleFromComputedStyle(getComputedStyle(element), defaultStyleReadOptions)
 		foreignObject.removeChild(element)
-		defaultStylesByTagName[tagName] = { type: 'resolved', styles, promise }
-		return styles
-	})
-
-	defaultStylesByTagName[tagName] = { type: 'pending', promise }
-	return promise
-}
-
-function getDefaultStylesForTagName(tagName: string) {
-	const existing = defaultStylesByTagName[tagName]
-	assert(existing && existing.type === 'resolved', 'default styles must be populated & resolved')
-	return existing.styles
+		defaultStylesByTagName[tagName] = existing
+	}
+	return existing
 }

package/src/lib/exports/cssRules.ts

@@ -20,6 +20,7 @@ const isInherited: CanSkipRule = (value, property, { parentStyles }) => {
 	return parentStyles[property] === value
 }
 
+// see comment below about why we exclude border styles
 const isExcludedBorder =
 	(borderDirection: string): CanSkipRule =>
 	(value, property, { getStyle }) => {

package/src/lib/exports/exportToSvg.tsx

@@ -101,15 +101,11 @@ async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 		// urls, and things like videos will be converted to images.
 		await Promise.all(foreignObjectChildren.map((el) => embedMedia(el as HTMLElement)))
 
-		await styleEmbedder.collectDefaultStyles([
-			...svg.querySelectorAll('foreignObject.tl-export-embed-styles *'),
-		])
-
 		// read the computed styles of every element (+ it's children & pseudo-elements) in the
 		// document. we do this in a single pass before we start embedding any CSS stuff to avoid
 		// constantly forcing the browser to recompute styles & layout.
 		for (const el of foreignObjectChildren) {
-			await styleEmbedder.readRootElementStyles(el as HTMLElement)
+			styleEmbedder.readRootElementStyles(el as HTMLElement)
 		}
 
 		// fetch any resources that we need to embed in the CSS, like background images.

package/src/lib/hooks/useCanvasEvents.ts

@@ -53,7 +53,11 @@ export function useCanvasEvents() {
 
 				// For tools that benefit from a higher fidelity of events,
 				// we dispatch the coalesced events.
-				const events = currentTool.useCoalescedEvents ? e.nativeEvent.getCoalescedEvents() : [e]
+				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+				const events =
+					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
+						? e.nativeEvent.getCoalescedEvents()
+						: [e]
 				for (const singleEvent of events) {
 					editor.dispatch({
 						type: 'pointer',
@@ -107,7 +111,7 @@ export function useCanvasEvents() {
 				if (
 					e.target.tagName !== 'A' &&
 					e.target.tagName !== 'TEXTAREA' &&
-					e.target.isContentEditable &&
+					!e.target.isContentEditable &&
 					// When in EditingShape state, we are actually clicking on a 'DIV'
 					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
 					// for edit mode on mobile we need to not preventDefault.

package/src/lib/hooks/useDocumentEvents.ts

@@ -104,6 +104,7 @@ export function useDocumentEvents() {
 
 			if ((e as any).isKilled) return
 			;(e as any).isKilled = true
+			const hasSelectedShapes = !!editor.getSelectedShapeIds().length
 
 			switch (e.key) {
 				case '=':
@@ -124,6 +125,23 @@ export function useDocumentEvents() {
 					if (areShortcutsDisabled(editor)) {
 						return
 					}
+					if (hasSelectedShapes) {
+						// This is used in tandem with shape navigation.
+						preventDefault(e)
+					}
+					break
+				}
+				case 'ArrowLeft':
+				case 'ArrowRight':
+				case 'ArrowUp':
+				case 'ArrowDown': {
+					if (areShortcutsDisabled(editor)) {
+						return
+					}
+					if (hasSelectedShapes && (e.metaKey || e.ctrlKey)) {
+						// This is used in tandem with shape navigation.
+						preventDefault(e)
+					}
 					break
 				}
 				case ',': {

package/src/lib/license/Watermark.tsx

@@ -1,6 +1,5 @@
 import { useValue } from '@tldraw/state-react'
 import { memo, useRef } from 'react'
-import { tlenv } from '../globals/environment'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useEditor } from '../hooks/useEditor'
 import { usePassThroughWheelEvents } from '../hooks/usePassThroughWheelEvents'
@@ -57,29 +56,17 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 			draggable={false}
 			{...events}
 		>
-			{tlenv.isWebview ? (
-				<a
-					draggable={false}
-					role="button"
-					onPointerDown={(e) => {
-						stopEventPropagation(e)
-						preventDefault(e)
-					}}
-					onClick={() => runtime.openWindow(url, '_blank')}
-					style={{ mask: maskCss, WebkitMask: maskCss }}
-				/>
-			) : (
-				<a
-					href={url}
-					target="_blank"
-					rel="noreferrer"
-					draggable={false}
-					onPointerDown={(e) => {
-						stopEventPropagation(e)
-					}}
-					style={{ mask: maskCss, WebkitMask: maskCss }}
-				/>
-			)}
+			<button
+				draggable={false}
+				role="button"
+				onPointerDown={(e) => {
+					stopEventPropagation(e)
+					preventDefault(e)
+				}}
+				title="made with tldraw"
+				onClick={() => runtime.openWindow(url, '_blank')}
+				style={{ mask: maskCss, WebkitMask: maskCss }}
+			/>
 		</div>
 	)
 })
@@ -115,7 +102,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		box-sizing: content-box;
 	}
 
-	.${className} > a {
+	.${className} > button {
 		position: absolute;
 		width: 96px;
 		height: 32px;
@@ -123,6 +110,8 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		cursor: inherit;
 		color: var(--color-text);
 		opacity: .38;
+		border: 0;
+		padding: 0;
 		background-color: currentColor;
 	}
 
@@ -137,13 +126,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		height: 48px;
 	}
 
-	.${className}[data-mobile='true'] > a {
+	.${className}[data-mobile='true'] > button {
 		width: 8px;
 		height: 32px;
 	}
 
 	@media (hover: hover) {
-		.${className} > a {
+		.${className} > button {
 			pointer-events: none;
 		}
 
@@ -153,12 +142,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
 			transition-delay: 0.32s;
 		}
 
-		.${className}:hover > a {
+		.${className}:hover > button {
 			animation: delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
 
-		.${className} > a:focus-visible {
+		.${className} > button:focus-visible {
 			opacity: 1;
 		}
 	}

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

@@ -1,12 +1,51 @@
+import { assert } from '@tldraw/utils'
 import { Box } from '../Box'
-import { Vec } from '../Vec'
-import { pointInPolygon } from '../utils'
+import { Mat, MatModel } from '../Mat'
+import { Vec, VecLike } from '../Vec'
+import {
+	intersectCirclePolygon,
+	intersectCirclePolyline,
+	intersectLineSegmentPolygon,
+	intersectLineSegmentPolyline,
+	intersectPolys,
+} from '../intersect'
+import { approximately, pointInPolygon } from '../utils'
+
+/**
+ * Filter geometry within a group.
+ *
+ * Filters are ignored when called directly on primitive geometries, but can be used to narrow down
+ * the results of an operation on `Group2d` geometries.
+ *
+ * @public
+ */
+export interface Geometry2dFilters {
+	readonly includeLabels?: boolean
+	readonly includeInternal?: boolean
+}
+
+/** @public */
+export const Geometry2dFilters: {
+	EXCLUDE_NON_STANDARD: Geometry2dFilters
+	INCLUDE_ALL: Geometry2dFilters
+	EXCLUDE_LABELS: Geometry2dFilters
+	EXCLUDE_INTERNAL: Geometry2dFilters
+} = {
+	EXCLUDE_NON_STANDARD: {
+		includeLabels: false,
+		includeInternal: false,
+	},
+	INCLUDE_ALL: { includeLabels: true, includeInternal: true },
+	EXCLUDE_LABELS: { includeLabels: false, includeInternal: true },
+	EXCLUDE_INTERNAL: { includeLabels: true, includeInternal: false },
+}
 
 /** @public */
 export interface Geometry2dOptions {
 	isFilled: boolean
 	isClosed: boolean
 	isLabel?: boolean
+	isInternal?: boolean
 	debugColor?: string
 	ignore?: boolean
 }
@@ -16,6 +55,7 @@ export abstract class Geometry2d {
 	isFilled = false
 	isClosed = true
 	isLabel = false
+	isInternal = false
 	debugColor?: string
 	ignore?: boolean
 
@@ -23,20 +63,23 @@ export abstract class Geometry2d {
 		this.isFilled = opts.isFilled
 		this.isClosed = opts.isClosed
 		this.isLabel = opts.isLabel ?? false
+		this.isInternal = opts.isInternal ?? false
 		this.debugColor = opts.debugColor
 		this.ignore = opts.ignore
 	}
 
-	abstract getVertices(): Vec[]
+	isExcludedByFilter(filters?: Geometry2dFilters) {
+		if (!filters) return false
+		if (this.isLabel && !filters.includeLabels) return true
+		if (this.isInternal && !filters.includeInternal) return true
+		return false
+	}
 
-	abstract nearestPoint(point: Vec): Vec
+	abstract getVertices(filters: Geometry2dFilters): Vec[]
 
-	// hitTestPoint(point: Vec, margin = 0, hitInside = false) {
-	// 	// We've removed the broad phase here; that should be done outside of the call
-	// 	return this.distanceToPoint(point, hitInside) <= margin
-	// }
+	abstract nearestPoint(point: Vec, _filters?: Geometry2dFilters): Vec
 
-	hitTestPoint(point: Vec, margin = 0, hitInside = false) {
+	hitTestPoint(point: Vec, margin = 0, hitInside = false, _filters?: Geometry2dFilters) {
 		// First check whether the point is inside
 		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
 			return true
@@ -45,17 +88,17 @@ export abstract class Geometry2d {
 		return Vec.Dist2(point, this.nearestPoint(point)) <= margin * margin
 	}
 
-	distanceToPoint(point: Vec, hitInside = false) {
+	distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
 		return (
-			point.dist(this.nearestPoint(point)) *
+			point.dist(this.nearestPoint(point, filters)) *
 			(this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)
 				? -1
 				: 1)
 		)
 	}
 
-	distanceToLineSegment(A: Vec, B: Vec) {
-		if (A.equals(B)) return this.distanceToPoint(A)
+	distanceToLineSegment(A: Vec, B: Vec, filters?: Geometry2dFilters) {
+		if (A.equals(B)) return this.distanceToPoint(A, false, filters)
 		const { vertices } = this
 		let nearest: Vec | undefined
 		let dist = Infinity
@@ -73,10 +116,35 @@ export abstract class Geometry2d {
 		return this.isClosed && this.isFilled && pointInPolygon(nearest, this.vertices) ? -dist : dist
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec, distance = 0): boolean {
-		return this.distanceToLineSegment(A, B) <= distance
+	hitTestLineSegment(A: Vec, B: Vec, distance = 0, filters?: Geometry2dFilters): boolean {
+		return this.distanceToLineSegment(A, B, filters) <= distance
+	}
+
+	intersectLineSegment(A: VecLike, B: VecLike, _filters?: Geometry2dFilters): VecLike[] {
+		const intersections = this.isClosed
+			? intersectLineSegmentPolygon(A, B, this.vertices)
+			: intersectLineSegmentPolyline(A, B, this.vertices)
+
+		return intersections ?? []
+	}
+
+	intersectCircle(center: VecLike, radius: number, _filters?: Geometry2dFilters): VecLike[] {
+		const intersections = this.isClosed
+			? intersectCirclePolygon(center, radius, this.vertices)
+			: intersectCirclePolyline(center, radius, this.vertices)
+
+		return intersections ?? []
+	}
+
+	intersectPolygon(polygon: VecLike[], _filters?: Geometry2dFilters): VecLike[] {
+		return intersectPolys(polygon, this.vertices, true, this.isClosed)
+	}
+
+	intersectPolyline(polyline: VecLike[], _filters?: Geometry2dFilters): VecLike[] {
+		return intersectPolys(polyline, this.vertices, false, this.isClosed)
 	}
 
+	/** @deprecated Iterate the vertices instead. */
 	nearestPointOnLineSegment(A: Vec, B: Vec): Vec {
 		const { vertices } = this
 		let nearest: Vec | undefined
@@ -105,12 +173,16 @@ export abstract class Geometry2d {
 		)
 	}
 
+	transform(transform: MatModel): Geometry2d {
+		return new TransformedGeometry2d(this, transform)
+	}
+
 	private _vertices: Vec[] | undefined
 
 	// eslint-disable-next-line no-restricted-syntax
 	get vertices(): Vec[] {
 		if (!this._vertices) {
-			this._vertices = this.getVertices()
+			this._vertices = this.getVertices(Geometry2dFilters.EXCLUDE_LABELS)
 		}
 
 		return this._vertices
@@ -204,3 +276,111 @@ export abstract class Geometry2d {
 
 	abstract getSvgPathData(first: boolean): string
 }
+
+// =================================================================================================
+// Because Geometry2d.transform depends on TransformedGeometry2d, we need to define it here instead
+// of in its own files. This prevents a circular import error.
+// =================================================================================================
+
+/** @public */
+export class TransformedGeometry2d extends Geometry2d {
+	private readonly inverse: MatModel
+	private readonly decomposed
+
+	constructor(
+		private readonly geometry: Geometry2d,
+		private readonly matrix: MatModel
+	) {
+		super(geometry)
+		this.inverse = Mat.Inverse(matrix)
+		this.decomposed = Mat.Decompose(matrix)
+
+		assert(
+			approximately(this.decomposed.scaleX, this.decomposed.scaleY),
+			'non-uniform scaling is not yet supported'
+		)
+	}
+
+	getVertices(filters: Geometry2dFilters): Vec[] {
+		return this.geometry.getVertices(filters).map((v) => Mat.applyToPoint(this.matrix, v))
+	}
+
+	nearestPoint(point: Vec, filters?: Geometry2dFilters): Vec {
+		return Mat.applyToPoint(
+			this.matrix,
+			this.geometry.nearestPoint(Mat.applyToPoint(this.inverse, point), filters)
+		)
+	}
+
+	override hitTestPoint(
+		point: Vec,
+		margin = 0,
+		hitInside?: boolean,
+		filters?: Geometry2dFilters
+	): boolean {
+		return this.geometry.hitTestPoint(
+			Mat.applyToPoint(this.inverse, point),
+			margin / this.decomposed.scaleX,
+			hitInside,
+			filters
+		)
+	}
+
+	override distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
+		return (
+			this.geometry.distanceToPoint(Mat.applyToPoint(this.inverse, point), hitInside, filters) *
+			this.decomposed.scaleX
+		)
+	}
+
+	override distanceToLineSegment(A: Vec, B: Vec, filters?: Geometry2dFilters) {
+		return (
+			this.geometry.distanceToLineSegment(
+				Mat.applyToPoint(this.inverse, A),
+				Mat.applyToPoint(this.inverse, B),
+				filters
+			) * this.decomposed.scaleX
+		)
+	}
+
+	override hitTestLineSegment(A: Vec, B: Vec, distance = 0, filters?: Geometry2dFilters): boolean {
+		return this.geometry.hitTestLineSegment(
+			Mat.applyToPoint(this.inverse, A),
+			Mat.applyToPoint(this.inverse, B),
+			distance / this.decomposed.scaleX,
+			filters
+		)
+	}
+
+	override intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
+		return this.geometry.intersectLineSegment(
+			Mat.applyToPoint(this.inverse, A),
+			Mat.applyToPoint(this.inverse, B),
+			filters
+		)
+	}
+
+	override intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters) {
+		return this.geometry.intersectCircle(
+			Mat.applyToPoint(this.inverse, center),
+			radius / this.decomposed.scaleX,
+			filters
+		)
+	}
+
+	override intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[] {
+		return this.geometry.intersectPolygon(Mat.applyToPoints(this.inverse, polygon), filters)
+	}
+
+	override intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[] {
+		return this.geometry.intersectPolyline(Mat.applyToPoints(this.inverse, polyline), filters)
+	}
+
+	override transform(transform: MatModel): Geometry2d {
+		return new TransformedGeometry2d(this.geometry, Mat.Multiply(transform, this.matrix))
+	}
+
+	getSvgPathData(): string {
+		throw new Error('Cannot get SVG path data for transformed geometry.')
+	}
+}