@tldraw/editor 3.12.0-canary.3acee343372d → 3.12.0-canary.3e2ed74b5e86

package/src/lib/TldrawEditor.tsx

@@ -50,7 +50,7 @@ import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
 /**
  * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a
- * {@link store#TLStore} directly. If you would like tldraw to create a store for you, use
+ * `TLStore` directly. If you would like tldraw to create a store for you, use
  * {@link TldrawEditorWithoutStoreProps}.
  *
  * @public
@@ -64,7 +64,7 @@ export interface TldrawEditorWithStoreProps {
 
 /**
  * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a
- * {@link store#TLStore} directly. If you would like to pass in a store directly, use
+ * `TLStore` directly. If you would like to pass in a store directly, use
  * {@link TldrawEditorWithStoreProps}.
  *
  * @public
@@ -191,11 +191,33 @@ export interface TldrawEditorBaseProps {
 	/**
 	 * Predicate for whether or not a shape should be hidden.
 	 *
+	 * @deprecated Use {@link TldrawEditorBaseProps#getShapeVisibility} instead.
+	 */
+	isShapeHidden?(shape: TLShape, editor: Editor): boolean
+
+	/**
+	 * Provides a way to hide shapes.
+	 *
 	 * Hidden shapes will not render in the editor, and they will not be eligible for hit test via
 	 * {@link Editor#getShapeAtPoint} and {@link Editor#getShapesAtPoint}. But otherwise they will
 	 * remain in the store and participate in all other operations.
+	 *
+	 * @example
+	 * ```ts
+	 * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}
+	 * ```
+	 *
+	 * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.
+	 * - `'hidden'` - The shape will be hidden.
+	 * - `'visible'` - The shape will be visible.
+	 *
+	 * @param shape - The shape to check.
+	 * @param editor - The editor instance.
 	 */
-	isShapeHidden?(shape: TLShape, editor: Editor): boolean
+	getShapeVisibility?(
+		shape: TLShape,
+		editor: Editor
+	): 'visible' | 'hidden' | 'inherit' | null | undefined
 
 	/**
 	 * The URLs for the fonts to use in the editor.
@@ -387,7 +409,9 @@ function TldrawEditorWithReadyStore({
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
+	// eslint-disable-next-line @typescript-eslint/no-deprecated
 	isShapeHidden,
+	getShapeVisibility,
 	assetUrls,
 }: Required<
 	TldrawEditorProps & {
@@ -447,6 +471,7 @@ function TldrawEditorWithReadyStore({
 				options,
 				licenseKey,
 				isShapeHidden,
+				getShapeVisibility,
 				fontAssetUrls: assetUrls?.fonts,
 			})
 
@@ -482,6 +507,7 @@ function TldrawEditorWithReadyStore({
 			setEditor,
 			licenseKey,
 			isShapeHidden,
+			getShapeVisibility,
 			textOptions,
 			assetUrls,
 		]

package/src/lib/components/GeometryDebuggingView.tsx

@@ -114,13 +114,13 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({
 function GeometryStroke({ geometry }: { geometry: Geometry2d }) {
 	if (geometry instanceof Group2d) {
 		return (
-			<>
+			<g stroke={geometry.debugColor}>
 				{[...geometry.children, ...geometry.ignoredChildren].map((child, i) => (
 					<GeometryStroke geometry={child} key={i} />
 				))}
-			</>
+			</g>
 		)
 	}
 
-	return <path d={geometry.toSimpleSvgPath()} />
+	return <path d={geometry.toSimpleSvgPath()} stroke={geometry.debugColor} />
 }

package/src/lib/components/Shape.tsx

@@ -1,7 +1,7 @@
 import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { memo, useCallback, useEffect, useRef } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
@@ -44,10 +44,10 @@ export const Shape = memo(function Shape({
 
 	useEffect(() => {
 		return react('load fonts', () => {
-			const fonts = editor.fonts.getShapeFontFaces(shape)
+			const fonts = editor.fonts.getShapeFontFaces(id)
 			editor.fonts.requestFonts(fonts)
 		})
-	}, [editor, shape])
+	}, [editor, id])
 
 	const memoizedStuffRef = useRef({
 		transform: '',
@@ -104,22 +104,18 @@ export const Shape = memo(function Shape({
 	)
 
 	// This stuff changes pretty infrequently, so we can change them together
-	useQuickReactor(
-		'set opacity and z-index',
-		() => {
-			const container = containerRef.current
-			const bgContainer = bgContainerRef.current
-
-			// Opacity
-			setStyleProperty(container, 'opacity', opacity)
-			setStyleProperty(bgContainer, 'opacity', opacity)
-
-			// Z-Index
-			setStyleProperty(container, 'z-index', index)
-			setStyleProperty(bgContainer, 'z-index', backgroundIndex)
-		},
-		[opacity, index, backgroundIndex]
-	)
+	useLayoutEffect(() => {
+		const container = containerRef.current
+		const bgContainer = bgContainerRef.current
+
+		// Opacity
+		setStyleProperty(container, 'opacity', opacity)
+		setStyleProperty(bgContainer, 'opacity', opacity)
+
+		// Z-Index
+		setStyleProperty(container, 'z-index', index)
+		setStyleProperty(bgContainer, 'z-index', backgroundIndex)
+	}, [opacity, index, backgroundIndex])
 
 	useQuickReactor(
 		'set display',

package/src/lib/editor/Editor.ts

@@ -241,10 +241,33 @@ export interface TLEditorOptions {
 	fontAssetUrls?: { [key: string]: string | undefined }
 	/**
 	 * A predicate that should return true if the given shape should be hidden.
+	 *
+	 * @deprecated Use {@link Editor#getShapeVisibility} instead.
+	 *
 	 * @param shape - The shape to check.
 	 * @param editor - The editor instance.
 	 */
 	isShapeHidden?(shape: TLShape, editor: Editor): boolean
+
+	/**
+	 * Provides a way to hide shapes.
+	 *
+	 * @example
+	 * ```ts
+	 * getShapeVisibility={(shape, editor) => shape.meta.hidden ? 'hidden' : 'inherit'}
+	 * ```
+	 *
+	 * - `'inherit' | undefined` - (default) The shape will be visible unless its parent is hidden.
+	 * - `'hidden'` - The shape will be hidden.
+	 * - `'visible'` - The shape will be visible.
+	 *
+	 * @param shape - The shape to check.
+	 * @param editor - The editor instance.
+	 */
+	getShapeVisibility?(
+		shape: TLShape,
+		editor: Editor
+	): 'visible' | 'hidden' | 'inherit' | null | undefined
 }
 
 /**
@@ -281,12 +304,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 		autoFocus,
 		inferDarkMode,
 		options,
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
 		isShapeHidden,
+		getShapeVisibility,
 		fontAssetUrls,
 	}: TLEditorOptions) {
 		super()
+		assert(
+			!(isShapeHidden && getShapeVisibility),
+			'Cannot use both isShapeHidden and getShapeVisibility'
+		)
 
-		this._isShapeHiddenPredicate = isShapeHidden
+		this._getShapeVisibility = isShapeHidden
+			? // eslint-disable-next-line @typescript-eslint/no-deprecated
+				(shape: TLShape, editor: Editor) => (isShapeHidden(shape, editor) ? 'hidden' : 'inherit')
+			: getShapeVisibility
 
 		this.options = { ...defaultTldrawOptions, ...options }
 
@@ -773,18 +805,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 	}
 
-	private readonly _isShapeHiddenPredicate?: (shape: TLShape, editor: Editor) => boolean
+	private readonly _getShapeVisibility?: TLEditorOptions['getShapeVisibility']
 	@computed
 	private getIsShapeHiddenCache() {
-		if (!this._isShapeHiddenPredicate) return null
+		if (!this._getShapeVisibility) return null
 		return this.store.createComputedCache<boolean, TLShape>('isShapeHidden', (shape: TLShape) => {
-			const hiddenParent = this.findShapeAncestor(shape, (p) => this.isShapeHidden(p))
-			if (hiddenParent) return true
-			return this._isShapeHiddenPredicate!(shape, this) ?? false
+			const visibility = this._getShapeVisibility!(shape, this)
+			const isParentHidden = PageRecordType.isId(shape.parentId)
+				? false
+				: this.isShapeHidden(shape.parentId)
+
+			if (isParentHidden) return visibility !== 'visible'
+			return visibility === 'hidden'
 		})
 	}
 	isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean {
-		if (!this._isShapeHiddenPredicate) return false
+		if (!this._getShapeVisibility) return false
 		return !!this.getIsShapeHiddenCache!()!.get(
 			typeof shapeOrId === 'string' ? shapeOrId : shapeOrId.id
 		)
@@ -1216,7 +1252,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	run(fn: () => void, opts?: TLEditorRunOptions): this {
 		const previousIgnoreShapeLock = this._shouldIgnoreShapeLock
 		this._shouldIgnoreShapeLock = opts?.ignoreShapeLock ?? previousIgnoreShapeLock
-
 		try {
 			this.history.batch(fn, opts)
 		} finally {
@@ -3712,7 +3747,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const addShapeById = (id: TLShapeId, opacity: number, isAncestorErasing: boolean) => {
 			const shape = this.getShape(id)
 			if (!shape) return
-			if (this.isShapeHidden(shape)) return
+
+			if (this.isShapeHidden(shape)) {
+				// process children just in case they are overriding the hidden state
+				const isErasing = isAncestorErasing || erasingShapeIds.includes(id)
+				for (const childId of this.getSortedChildIdsForParent(id)) {
+					addShapeById(childId, opacity, isErasing)
+				}
+				return
+			}
 
 			opacity *= shape.opacity
 			let isShapeErasing = false
@@ -4287,7 +4330,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	private _shapeGeometryCaches: Record<string, ComputedCache<Geometry2d, TLShape>> = {}
 
 	/**
-	 * Get the geometry of a shape.
+	 * Get the geometry of a shape in shape-space.
 	 *
 	 * @example
 	 * ```ts
@@ -4318,6 +4361,44 @@ export class Editor extends EventEmitter<TLEventMap> {
 		)! as T
 	}
 
+	private _shapePageGeometryCaches: Record<string, ComputedCache<Geometry2d, TLShape>> = {}
+
+	/**
+	 * Get the geometry of a shape in page-space.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.getShapePageGeometry(myShape)
+	 * editor.getShapePageGeometry(myShapeId)
+	 * editor.getShapePageGeometry(myShapeId, { context: "arrow" })
+	 * ```
+	 *
+	 * @param shape - The shape (or shape id) to get the geometry for.
+	 * @param opts - Additional options about the request for geometry. Passed to {@link ShapeUtil.getGeometry}.
+	 *
+	 * @public
+	 */
+	getShapePageGeometry<T extends Geometry2d>(shape: TLShape | TLShapeId, opts?: TLGeometryOpts): T {
+		const context = opts?.context ?? 'none'
+		if (!this._shapePageGeometryCaches[context]) {
+			this._shapePageGeometryCaches[context] = this.store.createComputedCache(
+				'bounds',
+				(shape) => {
+					const geometry = this.getShapeGeometry(shape.id, opts)
+					const pageTransform = this.getShapePageTransform(shape.id)
+					return geometry.transform(pageTransform)
+				},
+				{
+					// we only depend directly on the shape id, and changing geometry/transform will update us anyway
+					areRecordsEqual: () => true,
+				}
+			)
+		}
+		return this._shapePageGeometryCaches[context].get(
+			typeof shape === 'string' ? shape : shape.id
+		)! as T
+	}
+
 	/** @internal */
 	@computed private _getShapeHandlesCache(): ComputedCache<TLHandle[] | undefined, TLShape> {
 		return this.store.createComputedCache('handles', (shape) => {
@@ -4424,15 +4505,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@computed private _getShapePageBoundsCache(): ComputedCache<Box, TLShape> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
-			const pageTransform = this._getShapePageTransformCache().get(shape.id)
-
-			if (!pageTransform) return new Box()
-
-			const result = Box.FromPoints(
-				Mat.applyToPoints(pageTransform, this.getShapeGeometry(shape).vertices)
-			)
-
-			return result
+			return this.getShapePageGeometry(shape).bounds
 		})
 	}
 
@@ -4506,11 +4579,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (frameAncestors.length === 0) return undefined
 
 			const pageMask = frameAncestors
-				.map<Vec[] | undefined>((s) =>
-					// Apply the frame transform to the frame outline to get the frame outline in the current page space
-					this._getShapePageTransformCache()
-						.get(s.id)!
-						.applyToPoints(this.getShapeGeometry(s).vertices)
+				.map<Vec[] | undefined>(
+					(s) =>
+						// Apply the frame transform to the frame outline to get the frame outline in the current page space
+						this.getShapePageGeometry(s.id).vertices
 				)
 				.reduce((acc, b) => {
 					if (!(b && acc)) return undefined
@@ -8139,8 +8211,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!currentTool) return styles
 
 		if (currentTool.shapeType) {
-			for (const style of this.styleProps[currentTool.shapeType].keys()) {
-				styles.applyValue(style, this.getStyleForNextShape(style))
+			if (
+				currentTool.shapeType === 'frame' &&
+				!(this.getShapeUtil('frame')!.options as any).showColors
+			) {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					if (style.id === 'tldraw:color') continue
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
+			} else {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
 			}
 		}
 
@@ -9849,12 +9931,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
 
-						const { panSpeed, zoomSpeed } = cameraOptions
+						const { panSpeed } = cameraOptions
 						this._setCamera(
 							new Vec(
-								cx + (dx * panSpeed) / cz - x / cz + x / (z * zoomSpeed),
-								cy + (dy * panSpeed) / cz - y / cz + y / (z * zoomSpeed),
-								z * zoomSpeed
+								cx + (dx * panSpeed) / cz - x / cz + x / z,
+								cy + (dy * panSpeed) / cz - y / cz + y / z,
+								z
 							),
 							{ immediate: true }
 						)
@@ -9929,14 +10011,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}
 
 							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
-							this._setCamera(
-								new Vec(
-									cx + (x / zoom - x) - (x / cz - x),
-									cy + (y / zoom - y) - (y / cz - y),
-									zoom
-								),
-								{ immediate: true }
-							)
+							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
+								immediate: true,
+							})
 							this.maybeTrackPerformance('Zooming')
 							return
 						}

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -31,7 +31,7 @@ export const notVisibleShapes = (editor: Editor) => {
 		})
 		return notVisibleShapes
 	}
-	return computed<Set<TLShapeId>>('getCulledShapes', (prevValue) => {
+	return computed<Set<TLShapeId>>('notVisibleShapes', (prevValue) => {
 		if (isUninitialized(prevValue)) {
 			return fromScratch(editor)
 		}

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

@@ -94,7 +94,7 @@ export class FontManager {
 				const shapeUtil = this.editor.getShapeUtil(shape)
 				return shapeUtil.getFontFaces(shape)
 			},
-			{ areResultsEqual: areArraysShallowEqual }
+			{ areResultsEqual: areArraysShallowEqual, areRecordsEqual: (a, b) => a.props === b.props }
 		)
 
 		this.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -2,8 +2,6 @@ import { TLGroupShape, groupShapeMigrations, groupShapeProps } from '@tldraw/tls
 import { SVGContainer } from '../../../components/SVGContainer'
 import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
 import { Group2d } from '../../../primitives/geometry/Group2d'
-import { Polygon2d } from '../../../primitives/geometry/Polygon2d'
-import { Polyline2d } from '../../../primitives/geometry/Polyline2d'
 import { Rectangle2d } from '../../../primitives/geometry/Rectangle2d'
 import { ShapeUtil } from '../ShapeUtil'
 import { DashedOutlineBox } from './DashedOutlineBox'
@@ -35,19 +33,9 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		return new Group2d({
 			children: children.map((childId) => {
 				const shape = this.editor.getShape(childId)!
-				const geometry = this.editor.getShapeGeometry(childId)
-				const points = this.editor.getShapeLocalTransform(shape)!.applyToPoints(geometry.vertices)
-
-				if (geometry.isClosed) {
-					return new Polygon2d({
-						points,
-						isFilled: true,
-					})
-				}
-
-				return new Polyline2d({
-					points,
-				})
+				return this.editor
+					.getShapeGeometry(childId)
+					.transform(this.editor.getShapeLocalTransform(shape)!)
 			}),
 		})
 	}

package/src/lib/editor/tools/StateNode.ts

@@ -38,6 +38,7 @@ export interface TLStateNodeConstructor {
 	initial?: string
 	children?(): TLStateNodeConstructor[]
 	isLockable: boolean
+	useCoalescedEvents: boolean
 }
 
 /** @public */
@@ -47,7 +48,8 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		public editor: Editor,
 		parent?: StateNode
 	) {
-		const { id, children, initial, isLockable } = this.constructor as TLStateNodeConstructor
+		const { id, children, initial, isLockable, useCoalescedEvents } = this
+			.constructor as TLStateNodeConstructor
 
 		this.id = id
 		this._isActive = atom<boolean>('toolIsActive' + this.id, false)
@@ -83,6 +85,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 		}
 		this.isLockable = isLockable
+		this.useCoalescedEvents = useCoalescedEvents
 		this.performanceTracker = new PerformanceTracker()
 	}
 
@@ -90,6 +93,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	static initial?: string
 	static children?: () => TLStateNodeConstructor[]
 	static isLockable = true
+	static useCoalescedEvents = false
 
 	id: string
 	type: 'branch' | 'leaf' | 'root'
@@ -97,6 +101,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	initial?: string
 	children?: Record<string, StateNode>
 	isLockable: boolean
+	useCoalescedEvents: boolean
 	parent: StateNode
 
 	/**

package/src/lib/exports/StyleEmbedder.ts

@@ -1,5 +1,6 @@
-import { assertExists, objectMapValues, uniqueId } from '@tldraw/utils'
+import { assertExists, getOwnProperty, objectMapValues, uniqueId } from '@tldraw/utils'
 import { FontEmbedder } from './FontEmbedder'
+import { ReadonlyStyles, Styles, cssRules } from './cssRules'
 import {
 	elementStyle,
 	getComputedStyle,
@@ -7,15 +8,8 @@ import {
 	getRenderedChildren,
 } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
-import {
-	isPropertyCoveredByCurrentColor,
-	isPropertyInherited,
-	parseCssValueUrls,
-	shouldIncludeCssProperty,
-} from './parseCss'
-
-type Styles = { [K in string]?: string }
-type ReadonlyStyles = { readonly [K in string]?: string }
+import { parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'
+
 const NO_STYLES = {} as const
 
 interface ElementStyleInfo {
@@ -239,15 +233,22 @@ function styleFromComputedStyleMap(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
+	const currentColor = style.get('color')?.toString() || ''
+	const ruleOptions = {
+		currentColor,
+		parentStyles,
+		defaultStyles,
+		getStyle: (property: string) => style.get(property)?.toString() ?? '',
+	}
 	for (const property of style.keys()) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.get(property)!.toString()
 
 		if (defaultStyles[property] === value) continue
-		if (parentStyles[property] === value && isPropertyInherited(property)) continue
-		if (isPropertyCoveredByCurrentColor(style.get('color')?.toString() || '', property, value))
-			continue
+
+		const rule = getOwnProperty(cssRules, property)
+		if (rule && rule(value, property, ruleOptions)) continue
 
 		styles[property] = value
 	}
@@ -260,14 +261,23 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
+	const currentColor = style.color
+	const ruleOptions = {
+		currentColor,
+		parentStyles,
+		defaultStyles,
+		getStyle: (property: string) => style.getPropertyValue(property),
+	}
+
 	for (const property in style) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)
 
 		if (defaultStyles[property] === value) continue
-		if (parentStyles[property] === value && isPropertyInherited(property)) continue
-		if (isPropertyCoveredByCurrentColor(style.color, property, value)) continue
+
+		const rule = getOwnProperty(cssRules, property)
+		if (rule && rule(value, property, ruleOptions)) continue
 
 		styles[property] = value
 	}