@tldraw/editor 3.16.0-canary.e9c30b532b82 → 3.16.0-canary.ea008b31887f

package/src/lib/TldrawEditor.tsx

@@ -1,6 +1,7 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
 import { annotateError, Required } from '@tldraw/utils'
+import classNames from 'classnames'
 import React, {
 	memo,
 	ReactNode,
@@ -12,8 +13,6 @@ import React, {
 	useState,
 	useSyncExternalStore,
 } from 'react'
-
-import classNames from 'classnames'
 import { version } from '../version'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
@@ -189,13 +188,6 @@ export interface TldrawEditorBaseProps {
 	 */
 	deepLinks?: true | TLDeepLinkOptions
 
-	/**
-	 * 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.
 	 *
@@ -412,8 +404,6 @@ function TldrawEditorWithReadyStore({
 	options,
 	licenseKey,
 	deepLinks: _deepLinks,
-	// eslint-disable-next-line @typescript-eslint/no-deprecated
-	isShapeHidden,
 	getShapeVisibility,
 	assetUrls,
 }: Required<
@@ -473,7 +463,6 @@ function TldrawEditorWithReadyStore({
 				textOptions,
 				options,
 				licenseKey,
-				isShapeHidden,
 				getShapeVisibility,
 				fontAssetUrls: assetUrls?.fonts,
 			})
@@ -509,7 +498,6 @@ function TldrawEditorWithReadyStore({
 			user,
 			setEditor,
 			licenseKey,
-			isShapeHidden,
 			getShapeVisibility,
 			textOptions,
 			assetUrls,
@@ -586,8 +574,13 @@ function TldrawEditorWithReadyStore({
 	if (editor !== fontLoadingState?.editor) {
 		fontLoadingState = null
 	}
-	useEffect(() => {
+	useLayoutEffect(() => {
 		if (!editor) return
+		if (editor.options.maxFontsToLoadBeforeRender === 0) {
+			setFontLoadingState({ editor, isLoaded: true })
+			return
+		}
+
 		let isCancelled = false
 
 		setFontLoadingState({ editor, isLoaded: false })

package/src/lib/components/Shape.tsx

@@ -28,7 +28,6 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
-	dprMultiple,
 }: {
 	id: TLShapeId
 	shape: TLShape
@@ -36,7 +35,6 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
-	dprMultiple: number
 }) {
 	const editor = useEditor()
 
@@ -91,18 +89,14 @@ export const Shape = memo(function Shape({
 			}
 
 			// Width / Height
-			// We round the shape width and height up to the nearest multiple of dprMultiple
-			// to avoid the browser making miscalculations when applying the transform.
-			const widthRemainder = bounds.w % dprMultiple
-			const heightRemainder = bounds.h % dprMultiple
-			const width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)
-			const height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)
+			const width = Math.max(bounds.width, 1)
+			const height = Math.max(bounds.height, 1)
 
 			if (width !== prev.width || height !== prev.height) {
-				setStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
-				setStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
+				setStyleProperty(containerRef.current, 'width', width + 'px')
+				setStyleProperty(containerRef.current, 'height', height + 'px')
+				setStyleProperty(bgContainerRef.current, 'width', width + 'px')
+				setStyleProperty(bgContainerRef.current, 'height', height + 'px')
 				prev.width = width
 				prev.height = height
 			}

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -22,7 +22,6 @@ import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
 import { setStyleProperty } from '../../utils/dom'
-import { nearestMultiple } from '../../utils/nearestMultiple'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -173,10 +172,12 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<LiveCollaborators />
 					</div>
 				</div>
+				<div className="tl-canvas__in-front">
+					<InFrontOfTheCanvasWrapper />
+				</div>
 				<MovingCameraHitTestBlocker />
 			</div>
 			<MenuClickCapture />
-			<InFrontOfTheCanvasWrapper />
 		</>
 	)
 }
@@ -390,18 +391,9 @@ function ShapesWithSVGs() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return renderingShapes.map((result) => (
 		<Fragment key={result.id + '_fragment'}>
-			<Shape {...result} dprMultiple={dprMultiple} />
+			<Shape {...result} />
 			<DebugSvgCopy id={result.id} mode="iframe" />
 		</Fragment>
 	))
@@ -436,19 +428,10 @@ function ShapesToDisplay() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
-	const dprMultiple = useValue(
-		'dpr multiple',
-		() =>
-			// dprMultiple is the smallest number we can multiply dpr by to get an integer
-			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
-			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
-		[editor]
-	)
-
 	return (
 		<>
 			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />
+				<Shape key={result.id + '_shape'} {...result} />
 			))}
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</>

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -75,7 +75,7 @@ export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }
 
 		// if we can't find a theme class from the app or from a parent, we have
 		// to fall back on using a media query:
-		if (typeof window !== 'undefined' && 'matchMedia' in window) {
+		if (typeof window !== 'undefined' && window.matchMedia) {
 			setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
 		}
 	}, [isDarkModeFromApp])

package/src/lib/config/TLUserPreferences.ts

@@ -135,7 +135,7 @@ function getRandomColor() {
 
 /** @internal */
 export function userPrefersReducedMotion() {
-	if (typeof window !== 'undefined' && 'matchMedia' in window) {
+	if (typeof window !== 'undefined' && window.matchMedia) {
 		return window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
 	}
 

package/src/lib/editor/Editor.test.ts

@@ -1,3 +1,4 @@
+import { vi } from 'vitest'
 import {
 	Box,
 	Geometry2d,
@@ -59,8 +60,8 @@ beforeEach(() => {
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })
-	editor.setCamera = jest.fn()
-	editor.user.getAnimationSpeed = jest.fn()
+	editor.setCamera = vi.fn()
+	editor.user.getAnimationSpeed = vi.fn()
 })
 
 describe('centerOnPoint', () => {
@@ -94,13 +95,13 @@ describe('updateShape', () => {
 
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getCurrentPageShapeIds = jest.fn(() => new Set([createShapeId('box1')]))
+		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))
 		editor.zoomToFit({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -144,13 +145,13 @@ describe('zoomOut', () => {
 
 describe('zoomToSelection', () => {
 	it('no-op when isLocked is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection()
 		expect(editor.setCamera).not.toHaveBeenCalled()
 	})
 
 	it('sets camera when isLocked is set and force flag is set', () => {
-		editor.getSelectionPageBounds = jest.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
+		editor.getSelectionPageBounds = vi.fn(() => Box.From({ x: 0, y: 0, w: 100, h: 100 }))
 		editor.zoomToSelection({ force: true })
 		expect(editor.setCamera).toHaveBeenCalled()
 	})
@@ -286,7 +287,7 @@ describe('getShapesAtPoint', () => {
 
 	it('filters out hidden shapes', () => {
 		// Create a spy to mock isShapeHidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockImplementation((shape) => {
 			return typeof shape === 'string' ? shape === ids.shape3 : shape.id === ids.shape3
 		})
@@ -352,7 +353,7 @@ describe('getShapesAtPoint', () => {
 
 	it('returns empty array when all shapes are hidden', () => {
 		// Mock all shapes as hidden
-		const isShapeHiddenSpy = jest.spyOn(editor, 'isShapeHidden')
+		const isShapeHiddenSpy = vi.spyOn(editor, 'isShapeHidden')
 		isShapeHiddenSpy.mockReturnValue(true)
 
 		const shapes = editor.getShapesAtPoint({ x: 50, y: 50 })
@@ -692,7 +693,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -713,7 +714,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = editor.getSelectedShapeIds()
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()
@@ -818,7 +819,7 @@ describe('selectAll', () => {
 		const initialSelectedIds = Array.from(editor.getSelectedShapeIds())
 
 		// Spy on setSelectedShapes to verify it's not called
-		const setSelectedShapesSpy = jest.spyOn(editor, 'setSelectedShapes')
+		const setSelectedShapesSpy = vi.spyOn(editor, 'setSelectedShapes')
 
 		// Call selectAll
 		editor.selectAll()

package/src/lib/editor/Editor.ts

@@ -116,7 +116,6 @@ import {
 } from '../constants'
 import { exportToSvg } from '../exports/exportToSvg'
 import { getSvgAsImage } from '../exports/getSvgAsImage'
-import { tlenv } from '../globals/environment'
 import { tlmenus } from '../globals/menus'
 import { tltime } from '../globals/time'
 import { TldrawOptions, defaultTldrawOptions } from '../options'
@@ -244,16 +243,6 @@ export interface TLEditorOptions {
 	options?: Partial<TldrawOptions>
 	licenseKey?: string
 	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.
 	 *
@@ -309,21 +298,12 @@ 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._getShapeVisibility = isShapeHidden
-			? // eslint-disable-next-line @typescript-eslint/no-deprecated
-				(shape: TLShape, editor: Editor) => (isShapeHidden(shape, editor) ? 'hidden' : 'inherit')
-			: getShapeVisibility
+		this._getShapeVisibility = getShapeVisibility
 
 		this.options = { ...defaultTldrawOptions, ...options }
 
@@ -907,14 +887,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly fonts: FontManager
 
-	/**
-	 * A manager for the editor's environment.
-	 *
-	 * @deprecated This is deprecated and will be removed in a future version. Use the `tlenv` global export instead.
-	 * @public
-	 */
-	readonly environment = tlenv
-
 	/**
 	 * A manager for the editor's scribbles.
 	 *
@@ -1119,35 +1091,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.history.getNumRedos() > 0
 	}
 
-	/**
-	 * Create a new "mark", or stopping point, in the undo redo history. Creating a mark will clear
-	 * any redos.
-	 *
-	 * @example
-	 * ```ts
-	 * editor.mark()
-	 * editor.mark('flip shapes')
-	 * ```
-	 *
-	 * @param markId - The mark's id, usually the reason for adding the mark.
-	 *
-	 * @public
-	 * @deprecated use {@link Editor.markHistoryStoppingPoint} instead
-	 */
-	mark(markId?: string): this {
-		if (typeof markId === 'string') {
-			console.warn(
-				`[tldraw] \`editor.history.mark("${markId}")\` is deprecated. Please use \`const myMarkId = editor.markHistoryStoppingPoint()\` instead.`
-			)
-		} else {
-			console.warn(
-				'[tldraw] `editor.mark()` is deprecated. Use `editor.markHistoryStoppingPoint()` instead.'
-			)
-		}
-		this.history._mark(markId ?? uniqueId())
-		return this
-	}
-
 	/**
 	 * Create a new "mark", or stopping point, in the undo redo history. Creating a mark will clear
 	 * any redos. You typically want to do this just before a user interaction begins or is handled.
@@ -1272,13 +1215,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
-	/**
-	 * @deprecated Use `Editor.run` instead.
-	 */
-	batch(fn: () => void, opts?: TLEditorRunOptions): this {
-		return this.run(fn, opts)
-	}
-
 	/* --------------------- Errors --------------------- */
 
 	/** @internal */
@@ -1580,54 +1516,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	menus = tlmenus.forContext(this.contextId)
 
-	/**
-	 * @deprecated Use `editor.menus.getOpenMenus` instead.
-	 *
-	 * @public
-	 */
-	@computed getOpenMenus(): string[] {
-		return this.menus.getOpenMenus()
-	}
-
-	/**
-	 * @deprecated Use `editor.menus.addOpenMenu` instead.
-	 *
-	 * @public
-	 */
-	addOpenMenu(id: string): this {
-		this.menus.addOpenMenu(id)
-		return this
-	}
-
-	/**
-	 * @deprecated Use `editor.menus.deleteOpenMenu` instead.
-	 *
-	 * @public
-	 */
-	deleteOpenMenu(id: string): this {
-		this.menus.deleteOpenMenu(id)
-		return this
-	}
-
-	/**
-	 * @deprecated Use `editor.menus.clearOpenMenus` instead.
-	 *
-	 * @public
-	 */
-	clearOpenMenus(): this {
-		this.menus.clearOpenMenus()
-		return this
-	}
-
-	/**
-	 * @deprecated Use `editor.menus.hasAnyOpenMenus` instead.
-	 *
-	 * @public
-	 */
-	@computed getIsMenuOpen(): boolean {
-		return this.menus.hasAnyOpenMenus()
-	}
-
 	/* --------------------- Cursor --------------------- */
 
 	/**
@@ -4792,8 +4680,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
 			const pageTransform = this.getShapePageTransform(shape)
 			if (!pageTransform) return undefined
-			const geometry = this.getShapeGeometry(shape)
-			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
+
+			return Box.FromPoints(
+				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+			)
 		})
 	}
 
@@ -4860,27 +4750,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache('pageMaskCache', (shape) => {
 			if (isPageId(shape.parentId)) return undefined
 
-			const frameAncestors = this.getShapeAncestors(shape.id).filter((shape) =>
-				this.isShapeOfType<TLFrameShape>(shape, 'frame')
-			)
-
-			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
-					const geometry = this.getShapeGeometry(s.id)
-					const pageTransform = this.getShapePageTransform(s.id)
-					return pageTransform.applyToPoints(geometry.vertices)
-				})
-				.reduce((acc, b) => {
-					if (!(b && acc)) return undefined
-					const intersection = intersectPolygonPolygon(acc, b)
-					if (intersection) {
-						return intersection.map(Vec.Cast)
-					}
-					return []
-				})
+			const clipPaths: Vec[][] = []
+			// Get all ancestors that can potentially clip this shape
+			for (const ancestor of this.getShapeAncestors(shape.id)) {
+				const util = this.getShapeUtil(ancestor)
+				const clipPath = util.getClipPath?.(ancestor)
+				if (!clipPath) continue
+				if (util.shouldClipChild?.(shape) === false) continue
+				const pageTransform = this.getShapePageTransform(ancestor.id)
+				clipPaths.push(pageTransform.applyToPoints(clipPath))
+			}
+			if (clipPaths.length === 0) return undefined
+
+			const pageMask = clipPaths.reduce((acc, b) => {
+				const intersection = intersectPolygonPolygon(acc, b)
+				if (intersection) {
+					return intersection.map(Vec.Cast)
+				}
+				return []
+			})
 
 			return pageMask
 		})
@@ -5841,11 +5729,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return shapeIds
 	}
 
-	/** @deprecated Use {@link Editor.getDraggingOverShape} instead */
-	getDroppingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
-		return this.getDraggingOverShape(point, droppingShapes)
-	}
-
 	/**
 	 * Get the shape that some shapes should be dropped on at a given point.
 	 *
@@ -6333,7 +6216,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			this.createShapes(shapesToCreate)
 			this.createBindings(bindingsToCreate)
-			this.setSelectedShapes(compact(ids.map((id) => shapeIds.get(id))))
+
+			this.setSelectedShapes(
+				compact(
+					ids.map((oldId) => {
+						const newId = shapeIds.get(oldId)
+						if (!newId) return null
+						if (!this.getShape(newId)) return null
+						return newId
+					})
+				)
+			)
 
 			if (offset !== undefined) {
 				// If we've offset the duplicated shapes, check to see whether their new bounds is entirely
@@ -9451,13 +9344,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 	}
 
-	/** @deprecated Use {@link Editor.getSvgString} or {@link Editor.getSvgElement} instead. */
-	async getSvg(shapes: TLShapeId[] | TLShape[], opts: TLSvgExportOptions = {}) {
-		const result = await this.getSvgElement(shapes, opts)
-		if (!result) return undefined
-		return result.svg
-	}
-
 	/**
 	 * Get an exported image of the given shapes.
 	 *
@@ -9509,6 +9395,24 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 	}
 
+	/**
+	 * Get an exported image of the given shapes as a data URL.
+	 *
+	 * @param shapes - The shapes (or shape ids) to export.
+	 * @param opts - Options for the export.
+	 *
+	 * @returns A data URL of the image.
+	 * @public
+	 */
+	async toImageDataUrl(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+		const { blob, width, height } = await this.toImage(shapes, opts)
+		return {
+			url: await FileHelpers.blobToDataUrl(blob),
+			width,
+			height,
+		}
+	}
+
 	/* --------------------- Events --------------------- */
 
 	/**

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

@@ -7,6 +7,12 @@ function fromScratch(editor: Editor): Set<TLShapeId> {
 	const viewportPageBounds = editor.getViewportPageBounds()
 	const notVisibleShapes = new Set<TLShapeId>()
 	shapesIds.forEach((id) => {
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+		if (!canCull) return
+
 		// If the shape is fully outside of the viewport page bounds, add it to the set.
 		// We'll ignore masks here, since they're more expensive to compute and the overhead is not worth it.
 		const pageBounds = editor.getShapePageBounds(id)