@tldraw/editor 3.12.0-canary.e333011facbe → 3.12.0-canary.f5c40cbda19f

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,44 @@
+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'
+
+/** @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 +48,7 @@ export abstract class Geometry2d {
 	isFilled = false
 	isClosed = true
 	isLabel = false
+	isInternal = false
 	debugColor?: string
 	ignore?: boolean
 
@@ -23,20 +56,24 @@ 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) {
+		if (this.isExcludedByFilter(filters)) return false
 		// First check whether the point is inside
 		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
 			return true
@@ -45,17 +82,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 +110,41 @@ 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[] {
+		if (this.isExcludedByFilter(filters)) return []
+
+		const intersections = this.isClosed
+			? intersectLineSegmentPolygon(A, B, this.vertices)
+			: intersectLineSegmentPolyline(A, B, this.vertices)
+
+		return intersections ?? []
+	}
+
+	intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters): VecLike[] {
+		if (this.isExcludedByFilter(filters)) return []
+		const intersections = this.isClosed
+			? intersectCirclePolygon(center, radius, this.vertices)
+			: intersectCirclePolyline(center, radius, this.vertices)
+
+		return intersections ?? []
+	}
+
+	intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[] {
+		if (this.isExcludedByFilter(filters)) return []
+
+		return intersectPolys(polygon, this.vertices, true, this.isClosed)
+	}
+
+	intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[] {
+		if (this.isExcludedByFilter(filters)) return []
+		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.')
+	}
+}

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

@@ -1,6 +1,8 @@
+import { EMPTY_ARRAY } from '@tldraw/state'
 import { Box } from '../Box'
-import { Vec } from '../Vec'
-import { Geometry2d, Geometry2dOptions } from './Geometry2d'
+import { Mat } from '../Mat'
+import { Vec, VecLike } from '../Vec'
+import { Geometry2d, Geometry2dFilters, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Group2d extends Geometry2d {
@@ -25,11 +27,14 @@ export class Group2d extends Geometry2d {
 		if (this.children.length === 0) throw Error('Group2d must have at least one child')
 	}
 
-	override getVertices(): Vec[] {
-		return this.children.filter((c) => !c.isLabel).flatMap((c) => c.vertices)
+	override getVertices(filters: Geometry2dFilters): Vec[] {
+		if (this.isExcludedByFilter(filters)) return []
+		return this.children
+			.filter((c) => !c.isExcludedByFilter(filters))
+			.flatMap((c) => c.getVertices(filters))
 	}
 
-	override nearestPoint(point: Vec): Vec {
+	override nearestPoint(point: Vec, filters?: Geometry2dFilters): Vec {
 		let dist = Infinity
 		let nearest: Vec | undefined
 
@@ -42,7 +47,8 @@ export class Group2d extends Geometry2d {
 		let p: Vec
 		let d: number
 		for (const child of children) {
-			p = child.nearestPoint(point)
+			if (child.isExcludedByFilter(filters)) continue
+			p = child.nearestPoint(point, filters)
 			d = Vec.Dist2(p, point)
 			if (d < dist) {
 				dist = d
@@ -53,18 +59,75 @@ export class Group2d extends Geometry2d {
 		return nearest
 	}
 
-	override distanceToPoint(point: Vec, hitInside = false) {
-		return Math.min(...this.children.map((c, i) => c.distanceToPoint(point, hitInside || i > 0)))
+	override distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
+		let smallestDistance = Infinity
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const distance = child.distanceToPoint(point, hitInside, filters)
+			if (distance < smallestDistance) {
+				smallestDistance = distance
+			}
+		}
+		return smallestDistance
 	}
 
-	override hitTestPoint(point: Vec, margin: number, hitInside: boolean): boolean {
+	override hitTestPoint(
+		point: Vec,
+		margin: number,
+		hitInside: boolean,
+		filters = Geometry2dFilters.EXCLUDE_LABELS
+	): boolean {
 		return !!this.children
-			.filter((c) => !c.isLabel)
+			.filter((c) => !c.isExcludedByFilter(filters))
 			.find((c) => c.hitTestPoint(point, margin, hitInside))
 	}
 
-	override hitTestLineSegment(A: Vec, B: Vec, zoom: number): boolean {
-		return !!this.children.filter((c) => !c.isLabel).find((c) => c.hitTestLineSegment(A, B, zoom))
+	override hitTestLineSegment(
+		A: Vec,
+		B: Vec,
+		zoom: number,
+		filters = Geometry2dFilters.EXCLUDE_LABELS
+	): boolean {
+		return !!this.children
+			.filter((c) => !c.isExcludedByFilter(filters))
+			.find((c) => c.hitTestLineSegment(A, B, zoom))
+	}
+
+	override intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
+		return this.children.flatMap((child) => {
+			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
+			return child.intersectLineSegment(A, B, filters)
+		})
+	}
+
+	override intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters) {
+		return this.children.flatMap((child) => {
+			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
+			return child.intersectCircle(center, radius, filters)
+		})
+	}
+
+	override intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters) {
+		return this.children.flatMap((child) => {
+			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
+			return child.intersectPolygon(polygon, filters)
+		})
+	}
+
+	override intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters) {
+		return this.children.flatMap((child) => {
+			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
+			return child.intersectPolyline(polyline, filters)
+		})
+	}
+
+	override transform(transform: Mat): Geometry2d {
+		return new Group2d({
+			children: this.children.map((c) => c.transform(transform)),
+			isLabel: this.isLabel,
+			debugColor: this.debugColor,
+			ignore: this.ignore,
+		})
 	}
 
 	getArea() {
@@ -102,6 +165,6 @@ export class Group2d extends Geometry2d {
 	}
 
 	getSvgPathData(): string {
-		return this.children.map((c) => (c.isLabel ? '' : c.getSvgPathData(true))).join(' ')
+		return this.children.map((c, i) => (c.isLabel ? '' : c.getSvgPathData(i === 0))).join(' ')
 	}
 }

package/src/lib/primitives/intersect.ts

@@ -293,6 +293,47 @@ export function intersectPolygonPolygon(
 	return orderClockwise([...result.values()])
 }
 
+/**
+ * Find all the points where `polyA` and `polyB` intersect and returns them in an undefined order.
+ * To find the polygon that's the intersection of polyA and polyB, use `intersectPolygonPolygon`
+ * instead, which orders the points and includes internal points.
+ *
+ * @param polyA - The first polygon.
+ * @param polyB - The second polygon.
+ * @param isAClosed - Whether `polyA` is a closed polygon or a polyline.
+ * @param isBClosed - Whether `polyB` is a closed polygon or a polyline.
+ * @public
+ */
+export function intersectPolys(
+	polyA: VecLike[],
+	polyB: VecLike[],
+	isAClosed: boolean,
+	isBClosed: boolean
+): VecLike[] {
+	const result: Map<string, VecLike> = new Map()
+
+	// Add all intersection points to result
+	for (let i = 0, n = isAClosed ? polyA.length : polyA.length - 1; i < n; i++) {
+		const currentA = polyA[i]
+		const nextA = polyA[(i + 1) % polyA.length]
+
+		for (let j = 0, m = isBClosed ? polyB.length : polyB.length - 1; j < m; j++) {
+			const currentB = polyB[j]
+			const nextB = polyB[(j + 1) % polyB.length]
+			const intersection = intersectLineSegmentLineSegment(currentA, nextA, currentB, nextB)
+
+			if (intersection !== null) {
+				const id = getPointId(intersection)
+				if (!result.has(id)) {
+					result.set(id, intersection)
+				}
+			}
+		}
+	}
+
+	return [...result.values()]
+}
+
 function getPointId(point: VecLike) {
 	return `${point.x},${point.y}`
 }

package/src/lib/utils/reorderShapes.ts

@@ -154,24 +154,17 @@ function reorderToFront(moving: Set<TLShape>, children: TLShape[], changes: TLSh
 	}
 }
 
-function getVerticesInPageSpace(editor: Editor, shape: TLShape) {
-	const geo = editor.getShapeGeometry(shape)
-	const pageTransform = editor.getShapePageTransform(shape)
-	if (!geo || !pageTransform) return null
-	return pageTransform.applyToPoints(geo.vertices)
-}
-
 function getOverlapChecker(editor: Editor, moving: Set<TLShape>) {
 	const movingVertices = Array.from(moving)
 		.map((shape) => {
-			const vertices = getVerticesInPageSpace(editor, shape)
+			const vertices = editor.getShapePageGeometry(shape).vertices
 			if (!vertices) return null
 			return { shape, vertices }
 		})
 		.filter(Boolean) as { shape: TLShape; vertices: Vec[] }[]
 
 	const isOverlapping = (child: TLShape) => {
-		const vertices = getVerticesInPageSpace(editor, child)
+		const vertices = editor.getShapePageGeometry(child).vertices
 		if (!vertices) return false
 		return movingVertices.some((other) => {
 			return polygonsIntersect(other.vertices, vertices)

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.12.0-canary.e333011facbe'
+export const version = '3.12.0-canary.f5c40cbda19f'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-03T09:52:50.298Z',
-	patch: '2025-04-03T09:52:50.298Z',
+	minor: '2025-04-09T21:32:26.195Z',
+	patch: '2025-04-09T21:32:26.195Z',
 }