@tldraw/editor 3.12.0-canary.fc675f45caa0 → 3.12.0-canary.fff04afa92e2

package/src/lib/exports/cssRules.ts

@@ -0,0 +1,126 @@
+export type Styles = { [K in string]?: string }
+export type ReadonlyStyles = { readonly [K in string]?: string }
+
+type CanSkipRule = (
+	value: string,
+	property: string,
+	options: {
+		getStyle(property: string): string
+		parentStyles: ReadonlyStyles
+		defaultStyles: ReadonlyStyles
+		currentColor: string
+	}
+) => boolean
+
+const isCoveredByCurrentColor: CanSkipRule = (value, property, { currentColor }) => {
+	return value === 'currentColor' || value === currentColor
+}
+
+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 }) => {
+		const borderWidth = getStyle(`border-${borderDirection}-width`)
+		const borderStyle = getStyle(`border-${borderDirection}-style`)
+
+		if (borderWidth === '0px') return true
+		if (borderStyle === 'none') return true
+		return false
+	}
+
+export const cssRules = {
+	// currentColor properties:
+	'border-block-end-color': isCoveredByCurrentColor,
+	'border-block-start-color': isCoveredByCurrentColor,
+	'border-bottom-color': isCoveredByCurrentColor,
+	'border-inline-end-color': isCoveredByCurrentColor,
+	'border-inline-start-color': isCoveredByCurrentColor,
+	'border-left-color': isCoveredByCurrentColor,
+	'border-right-color': isCoveredByCurrentColor,
+	'border-top-color': isCoveredByCurrentColor,
+	'caret-color': isCoveredByCurrentColor,
+	'column-rule-color': isCoveredByCurrentColor,
+	'outline-color': isCoveredByCurrentColor,
+	'text-decoration': (value, property, { currentColor }) => {
+		return value === 'none solid currentColor' || value === 'none solid ' + currentColor
+	},
+	'text-decoration-color': isCoveredByCurrentColor,
+	'text-emphasis-color': isCoveredByCurrentColor,
+
+	// inherited properties:
+	'border-collapse': isInherited,
+	'border-spacing': isInherited,
+	'caption-side': isInherited,
+	// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
+	// 'color': isInherited,
+	cursor: isInherited,
+	direction: isInherited,
+	'empty-cells': isInherited,
+	'font-family': isInherited,
+	'font-size': isInherited,
+	'font-style': isInherited,
+	'font-variant': isInherited,
+	'font-weight': isInherited,
+	'font-size-adjust': isInherited,
+	'font-stretch': isInherited,
+	font: isInherited,
+	'letter-spacing': isInherited,
+	'line-height': isInherited,
+	'list-style-image': isInherited,
+	'list-style-position': isInherited,
+	'list-style-type': isInherited,
+	'list-style': isInherited,
+	orphans: isInherited,
+	'overflow-wrap': isInherited,
+	quotes: isInherited,
+	'stroke-linecap': isInherited,
+	'stroke-linejoin': isInherited,
+	'tab-size': isInherited,
+	'text-align': isInherited,
+	'text-align-last': isInherited,
+	'text-indent': isInherited,
+	'text-justify': isInherited,
+	'text-shadow': isInherited,
+	'text-transform': isInherited,
+	visibility: isInherited,
+	'white-space': isInherited,
+	'white-space-collapse': isInherited,
+	widows: isInherited,
+	'word-break': isInherited,
+	'word-spacing': isInherited,
+	'word-wrap': isInherited,
+
+	// special border cases - we have a weird case (tailwind seems to trigger this) where all
+	// border-styles sometimes get set to 'solid', but the border-width is 0 so they don't render.
+	// but in SVGs, **sometimes**, the border-width defaults (i think from a UA style-sheet? but
+	// honestly can't tell) to 1.5px so the border displays. we work around this by only including
+	// border styles at all if both the border-width and border-style are set to something that
+	// would show a border.
+	'border-top': isExcludedBorder('top'),
+	'border-right': isExcludedBorder('right'),
+	'border-bottom': isExcludedBorder('bottom'),
+	'border-left': isExcludedBorder('left'),
+	'border-block-end': isExcludedBorder('block-end'),
+	'border-block-start': isExcludedBorder('block-start'),
+	'border-inline-end': isExcludedBorder('inline-end'),
+	'border-inline-start': isExcludedBorder('inline-start'),
+	'border-top-style': isExcludedBorder('top'),
+	'border-right-style': isExcludedBorder('right'),
+	'border-bottom-style': isExcludedBorder('bottom'),
+	'border-left-style': isExcludedBorder('left'),
+	'border-block-end-style': isExcludedBorder('block-end'),
+	'border-block-start-style': isExcludedBorder('block-start'),
+	'border-inline-end-style': isExcludedBorder('inline-end'),
+	'border-inline-start-style': isExcludedBorder('inline-start'),
+	'border-top-width': isExcludedBorder('top'),
+	'border-right-width': isExcludedBorder('right'),
+	'border-bottom-width': isExcludedBorder('bottom'),
+	'border-left-width': isExcludedBorder('left'),
+	'border-block-end-width': isExcludedBorder('block-end'),
+	'border-block-start-width': isExcludedBorder('block-start'),
+	'border-inline-end-width': isExcludedBorder('inline-end'),
+} satisfies Record<string, CanSkipRule>

package/src/lib/exports/parseCss.ts

@@ -110,82 +110,3 @@ export function parseCssValueUrls(value: string) {
 		url: m[1] || m[2] || m[3],
 	}))
 }
-
-const currentColorProperties = new Set([
-	'border-block-end-color',
-	'border-block-start-color',
-	'border-bottom-color',
-	'border-inline-end-color',
-	'border-inline-start-color',
-	'border-left-color',
-	'border-right-color',
-	'border-top-color',
-	'caret-color',
-	'column-rule-color',
-	'outline-color',
-	'text-decoration',
-	'text-decoration-color',
-	'text-emphasis-color',
-])
-
-export function isPropertyCoveredByCurrentColor(
-	currentColor: string,
-	property: string,
-	value: string
-) {
-	if (currentColorProperties.has(property)) {
-		return (
-			value === 'currentColor' ||
-			value === currentColor ||
-			(property === 'text-decoration' && value === `none solid ${currentColor}`)
-		)
-	}
-}
-
-const inheritedProperties = new Set([
-	'border-collapse',
-	'border-spacing',
-	'caption-side',
-	// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
-	// 'color',
-	'cursor',
-	'direction',
-	'empty-cells',
-	'font-family',
-	'font-size',
-	'font-style',
-	'font-variant',
-	'font-weight',
-	'font-size-adjust',
-	'font-stretch',
-	'font',
-	'letter-spacing',
-	'line-height',
-	'list-style-image',
-	'list-style-position',
-	'list-style-type',
-	'list-style',
-	'orphans',
-	'overflow-wrap',
-	'quotes',
-	'stroke-linecap',
-	'stroke-linejoin',
-	'tab-size',
-	'text-align',
-	'text-align-last',
-	'text-indent',
-	'text-justify',
-	'text-shadow',
-	'text-transform',
-	'visibility',
-	'white-space',
-	'white-space-collapse',
-	'widows',
-	'word-break',
-	'word-spacing',
-	'word-wrap',
-])
-
-export function isPropertyInherited(property: string) {
-	return inheritedProperties.has(property)
-}

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,4 +1,3 @@
-import { useValue } from '@tldraw/state-react'
 import React, { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
@@ -12,7 +11,6 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
-	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
 		function canvasEvents() {
@@ -51,17 +49,12 @@ export function useCanvasEvents() {
 				lastX = e.clientX
 				lastY = e.clientY
 
-				// For tools that benefit from a higher fidelity of events,
-				// we dispatch the coalesced events.
-				const events = currentTool.useCoalescedEvents ? e.nativeEvent.getCoalescedEvents() : [e]
-				for (const singleEvent of events) {
-					editor.dispatch({
-						type: 'pointer',
-						target: 'canvas',
-						name: 'pointer_move',
-						...getPointerInfo(singleEvent),
-					})
-				}
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_move',
+					...getPointerInfo(e),
+				})
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
@@ -107,7 +100,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.
@@ -166,7 +159,7 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor, currentTool]
+		[editor]
 	)
 
 	return events

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,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.')
+	}
+}