@tldraw/editor 3.8.0-canary.9dece73524ae → 3.8.0-canary.9ff4b63deedf

package/src/lib/editor/types/external-content.ts

@@ -2,57 +2,97 @@ import { TLAssetId } from '@tldraw/tlschema'
 import { VecLike } from '../../primitives/Vec'
 import { TLContent } from './clipboard-types'
 
+/** @public */
+export interface TLTldrawExternalContentSource {
+	type: 'tldraw'
+	data: TLContent
+}
+
+/** @public */
+export interface TLExcalidrawExternalContentSource {
+	type: 'excalidraw'
+	data: any
+}
+
+/** @public */
+export interface TLTextExternalContentSource {
+	type: 'text'
+	data: string
+	subtype: 'json' | 'html' | 'text' | 'url'
+}
+
+/** @public */
+export interface TLErrorExternalContentSource {
+	type: 'error'
+	data: string | null
+	reason: string
+}
+
 /** @public */
 export type TLExternalContentSource =
-	| {
-			type: 'tldraw'
-			data: TLContent
-	  }
-	| {
-			type: 'excalidraw'
-			data: any
-	  }
-	| {
-			type: 'text'
-			data: string
-			subtype: 'json' | 'html' | 'text' | 'url'
-	  }
-	| {
-			type: 'error'
-			data: string | null
-			reason: string
-	  }
-
-/** @public */
-export type TLExternalContent<EmbedDefinition> = {
+	| TLTldrawExternalContentSource
+	| TLExcalidrawExternalContentSource
+	| TLTextExternalContentSource
+	| TLErrorExternalContentSource
+
+/** @public */
+export interface TLBaseExternalContent {
 	sources?: TLExternalContentSource[]
 	point?: VecLike
-} & (
-	| {
-			type: 'text'
-			text: string
-	  }
-	| {
-			type: 'files'
-			files: File[]
-			ignoreParent: boolean
-	  }
-	| {
-			type: 'url'
-			url: string
-	  }
-	| {
-			type: 'svg-text'
-			text: string
-	  }
-	| {
-			type: 'embed'
-			url: string
-			embed: EmbedDefinition
-	  }
-)
-
-/** @public */
-export type TLExternalAssetContent =
-	| { type: 'file'; file: File; assetId?: TLAssetId }
-	| { type: 'url'; url: string }
+}
+
+/** @public */
+export interface TLTextExternalContent extends TLBaseExternalContent {
+	type: 'text'
+	text: string
+}
+
+/** @public */
+export interface TLFilesExternalContent extends TLBaseExternalContent {
+	type: 'files'
+	files: File[]
+	ignoreParent: boolean
+}
+
+/** @public */
+export interface TLUrlExternalContent extends TLBaseExternalContent {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export interface TLSvgTextExternalContent extends TLBaseExternalContent {
+	type: 'svg-text'
+	text: string
+}
+
+/** @public */
+export interface TLEmbedExternalContent<EmbedDefinition> extends TLBaseExternalContent {
+	type: 'embed'
+	url: string
+	embed: EmbedDefinition
+}
+
+/** @public */
+export type TLExternalContent<EmbedDefinition> =
+	| TLTextExternalContent
+	| TLFilesExternalContent
+	| TLUrlExternalContent
+	| TLSvgTextExternalContent
+	| TLEmbedExternalContent<EmbedDefinition>
+
+/** @public */
+export interface TLFileExternalAsset {
+	type: 'file'
+	file: File
+	assetId?: TLAssetId
+}
+
+/** @public */
+export interface TLUrlExternalAsset {
+	type: 'url'
+	url: string
+}
+
+/** @public */
+export type TLExternalAsset = TLFileExternalAsset | TLUrlExternalAsset

package/src/lib/editor/types/misc-types.ts

@@ -8,17 +8,70 @@ export type RequiredKeys<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T,
 export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 
 /** @public */
-export interface TLImageExportOptions {
+export type TLExportType = 'svg' | 'png' | 'jpeg' | 'webp'
+
+/** @public */
+export interface TLSvgExportOptions {
+	/**
+	 * The bounding box, in page coordinates, of the area being exported.
+	 */
 	bounds?: Box
+	/**
+	 * The logical scale of the export. This scales the resulting size of the SVG being generated.
+	 */
 	scale?: number
-	quality?: number
+	/**
+	 * When exporting an SVG, the expected pixel ratio of the export will be passed in to
+	 * {@link @tldraw/tlschema#TLAssetStore.resolve} as the `dpr` property, so that assets can be
+	 * downscaled to the appropriate resolution.
+	 *
+	 * When exporting to a bitmap image format, the size of the resulting image will be multiplied
+	 * by this number.
+	 *
+	 * For SVG exports, this defaults to undefined - which means we'll request original-quality
+	 * assets. For bitmap exports, this defaults to 2.
+	 */
 	pixelRatio?: number
+
+	/**
+	 * Should the background color be included in the export? If false, the generated image will be
+	 * transparent (if exporting to a format that supports transparency).
+	 */
 	background?: boolean
+
+	/**
+	 * How much padding to include around the bounds of exports? Defaults to 32px.
+	 */
 	padding?: number
+
+	/**
+	 * Should the export be rendered in dark mode (true) or light mode (false)? Defaults to the
+	 * current instance's dark mode setting.
+	 */
 	darkMode?: boolean
+
+	/**
+	 * The
+	 * {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio | `preserveAspectRatio` }
+	 * attribute of the SVG element.
+	 */
 	preserveAspectRatio?: React.SVGAttributes<SVGSVGElement>['preserveAspectRatio']
 }
 
+/** @public */
+export interface TLImageExportOptions extends TLSvgExportOptions {
+	/**
+	 * If the export is being converted to a lossy bitmap format (e.g. jpeg), this is the quality of
+	 * the export. This is a number between 0 and 1.
+	 */
+	quality?: number
+
+	/**
+	 * The format to export as. Defaults to 'png'.
+	 */
+	format?: TLExportType
+}
+
 /**
  * @public
  * @deprecated use {@link TLImageExportOptions} instead

package/src/lib/exports/StyleEmbedder.ts

@@ -54,7 +54,7 @@ export class StyleEmbedder {
 			: NO_STYLES
 
 		const parentStyles = shouldSkipInheritedParentStyles
-			? this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES
+			? (this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES)
 			: NO_STYLES
 
 		const info: ElementStyleInfo = {

package/src/lib/exports/exportToSvg.tsx

@@ -3,7 +3,7 @@ import { assert } from '@tldraw/utils'
 import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Editor } from '../editor/Editor'
-import { TLImageExportOptions } from '../editor/types/misc-types'
+import { TLSvgExportOptions } from '../editor/types/misc-types'
 import { StyleEmbedder } from './StyleEmbedder'
 import { embedMedia } from './embedMedia'
 import { getSvgJsx } from './getSvgJsx'
@@ -13,7 +13,7 @@ let idCounter = 1
 export async function exportToSvg(
 	editor: Editor,
 	shapeIds: TLShapeId[],
-	opts: TLImageExportOptions = {}
+	opts: TLSvgExportOptions = {}
 ) {
 	// when rendering to SVG, we start by creating a JSX representation of the SVG that we can
 	// render with react. Hopefully elements will have a `toSvg` method that renders them to SVG,

package/src/lib/exports/getSvgAsImage.ts

@@ -0,0 +1,92 @@
+import { FileHelpers, Image, PngHelpers, sleep } from '@tldraw/utils'
+import { tlenv } from '../globals/environment'
+import { clampToBrowserMaxCanvasSize } from '../utils/browserCanvasMaxSize'
+import { debugFlags } from '../utils/debug-flags'
+
+/** @public */
+export async function getSvgAsImage(
+	svgString: string,
+	options: {
+		type: 'png' | 'jpeg' | 'webp'
+		width: number
+		height: number
+		quality?: number
+		pixelRatio?: number
+	}
+) {
+	const { type, width, height, quality = 1, pixelRatio = 2 } = options
+
+	let [clampedWidth, clampedHeight] = await clampToBrowserMaxCanvasSize(
+		width * pixelRatio,
+		height * pixelRatio
+	)
+	clampedWidth = Math.floor(clampedWidth)
+	clampedHeight = Math.floor(clampedHeight)
+	const effectiveScale = clampedWidth / width
+
+	// usually we would use `URL.createObjectURL` here, but chrome has a bug where `blob:` URLs of
+	// SVGs that use <foreignObject> mark the canvas as tainted, where data: ones do not.
+	// https://issues.chromium.org/issues/41054640
+	const svgUrl = await FileHelpers.blobToDataUrl(new Blob([svgString], { type: 'image/svg+xml' }))
+
+	const canvas = await new Promise<HTMLCanvasElement | null>((resolve) => {
+		const image = Image()
+		image.crossOrigin = 'anonymous'
+
+		image.onload = async () => {
+			// safari will fire `onLoad` before the fonts in the SVG are
+			// actually loaded. just waiting around a while is brittle, but
+			// there doesn't seem to be any better solution for now :( see
+			// https://bugs.webkit.org/show_bug.cgi?id=219770
+			if (tlenv.isSafari) {
+				await sleep(250)
+			}
+
+			const canvas = document.createElement('canvas') as HTMLCanvasElement
+			const ctx = canvas.getContext('2d')!
+
+			canvas.width = clampedWidth
+			canvas.height = clampedHeight
+
+			ctx.imageSmoothingEnabled = true
+			ctx.imageSmoothingQuality = 'high'
+			ctx.drawImage(image, 0, 0, clampedWidth, clampedHeight)
+
+			URL.revokeObjectURL(svgUrl)
+
+			resolve(canvas)
+		}
+
+		image.onerror = () => {
+			resolve(null)
+		}
+
+		image.src = svgUrl
+	})
+
+	if (!canvas) return null
+
+	const blob = await new Promise<Blob | null>((resolve) =>
+		canvas.toBlob(
+			(blob) => {
+				if (!blob || debugFlags.throwToBlob.get()) {
+					resolve(null)
+				}
+				resolve(blob)
+			},
+			'image/' + type,
+			quality
+		)
+	)
+
+	if (!blob) return null
+
+	if (type === 'png') {
+		const view = new DataView(await blob.arrayBuffer())
+		return PngHelpers.setPhysChunk(view, effectiveScale, {
+			type: 'image/' + type,
+		})
+	} else {
+		return blob
+	}
+}

package/src/lib/exports/getSvgJsx.tsx

@@ -41,7 +41,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 	const {
 		scale = 1,
 		// should we include the background in the export? or is it transparent?
-		background = false,
+		background = editor.getInstanceState().exportBackground,
 		padding = editor.options.defaultSvgPadding,
 		preserveAspectRatio,
 	} = opts
@@ -102,6 +102,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 			editor={editor}
 			preserveAspectRatio={preserveAspectRatio}
 			scale={scale}
+			pixelRatio={opts.pixelRatio ?? null}
 			bbox={bbox}
 			background={background}
 			singleFrameShapeId={singleFrameShapeId}
@@ -121,6 +122,7 @@ function SvgExport({
 	editor,
 	preserveAspectRatio,
 	scale,
+	pixelRatio,
 	bbox,
 	background,
 	singleFrameShapeId,
@@ -132,6 +134,7 @@ function SvgExport({
 	editor: Editor
 	preserveAspectRatio?: string
 	scale: number
+	pixelRatio: number | null
 	bbox: Box
 	background: boolean
 	singleFrameShapeId: TLShapeId | null
@@ -177,8 +180,20 @@ function SvgExport({
 			isDarkMode,
 			waitUntil,
 			addExportDef,
+			scale,
+			pixelRatio,
+			async resolveAssetUrl(assetId, width) {
+				const asset = editor.getAsset(assetId)
+				if (!asset || (asset.type !== 'image' && asset.type !== 'video')) return null
+
+				return await editor.resolveAssetUrl(assetId, {
+					screenScale: scale * (width / asset.props.w),
+					shouldResolveToOriginal: pixelRatio === null,
+					dpr: pixelRatio ?? undefined,
+				})
+			},
 		}),
-		[isDarkMode, waitUntil, addExportDef]
+		[isDarkMode, waitUntil, addExportDef, scale, pixelRatio, editor]
 	)
 
 	const didRenderRef = useRef(false)

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -274,15 +274,6 @@ export function useDocumentEvents() {
 	}, [editor, container, isAppFocused])
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 function areShortcutsDisabled(editor: Editor) {
-	const { activeElement } = document
-
-	return (
-		editor.menus.hasOpenMenus() ||
-		(activeElement &&
-			(activeElement.getAttribute('contenteditable') ||
-				INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1))
-	)
+	return editor.menus.hasOpenMenus() || activeElementShouldCaptureKeys()
 }

package/src/lib/hooks/useLocalStore.ts

@@ -37,7 +37,7 @@ export function useLocalStore(
 		const assets: TLAssetStore = {
 			upload: async (asset, file) => {
 				await client.db.storeAsset(asset.id, file)
-				return asset.id
+				return { src: asset.id }
 			},
 			resolve: async (asset) => {
 				if (!asset.props.src) return null

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -11,6 +11,13 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	useEffect(() => {
 		function onWheel(e: WheelEvent) {
 			if ((e as any).isSpecialRedispatchedEvent) return
+
+			// if the element is scrollable, don't redispatch the event
+			const elm = ref.current
+			if (elm && elm.scrollHeight > elm.clientHeight) {
+				return
+			}
+
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return

package/src/lib/options.ts

@@ -29,7 +29,6 @@ export interface TldrawOptions {
 	readonly dragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
-	readonly maxPointsPerDrawShape: number
 	readonly gridSteps: readonly {
 		readonly min: number
 		readonly mid: number
@@ -66,6 +65,10 @@ export interface TldrawOptions {
 	 * external context providers. By default, this is `React.Fragment`.
 	 */
 	readonly exportProvider: ComponentType<{ children: React.ReactNode }>
+	/**
+	 * By default, the toolbar items are accessible via number shortcuts according to their order. To disable this, set this option to false.
+	 */
+	readonly enableToolbarKeyboardShortcuts: boolean
 }
 
 /** @public */
@@ -81,7 +84,6 @@ export const defaultTldrawOptions = {
 	dragDistanceSquared: 16, // 4 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
-	maxPointsPerDrawShape: 500,
 	gridSteps: [
 		{ min: -1, mid: 0.15, step: 64 },
 		{ min: 0.05, mid: 0.375, step: 16 },
@@ -111,4 +113,5 @@ export const defaultTldrawOptions = {
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
+	enableToolbarKeyboardShortcuts: true,
 } as const satisfies TldrawOptions

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -0,0 +1,65 @@
+import canvasSize from 'canvas-size'
+
+/** @internal */
+export interface CanvasMaxSize {
+	maxWidth: number
+	maxHeight: number
+	maxArea: number
+}
+
+let maxSizePromise: Promise<CanvasMaxSize> | null = null
+
+function getBrowserCanvasMaxSize() {
+	if (!maxSizePromise) {
+		maxSizePromise = calculateBrowserCanvasMaxSize()
+	}
+
+	return maxSizePromise
+}
+
+async function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {
+	const maxWidth = await canvasSize.maxWidth({ usePromise: true })
+	const maxHeight = await canvasSize.maxHeight({ usePromise: true })
+	const maxArea = await canvasSize.maxArea({ usePromise: true })
+	return {
+		maxWidth: maxWidth.width,
+		maxHeight: maxHeight.height,
+		maxArea: maxArea.width * maxArea.height,
+	}
+}
+
+// https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results
+const MAX_SAFE_CANVAS_DIMENSION = 8192
+const MAX_SAFE_CANVAS_AREA = 4096 * 4096
+
+/** @internal */
+export async function clampToBrowserMaxCanvasSize(width: number, height: number) {
+	if (
+		width <= MAX_SAFE_CANVAS_DIMENSION &&
+		height <= MAX_SAFE_CANVAS_DIMENSION &&
+		width * height <= MAX_SAFE_CANVAS_AREA
+	) {
+		return [width, height]
+	}
+
+	const { maxWidth, maxHeight, maxArea } = await getBrowserCanvasMaxSize()
+	const aspectRatio = width / height
+
+	if (width > maxWidth) {
+		width = maxWidth
+		height = width / aspectRatio
+	}
+
+	if (height > maxHeight) {
+		height = maxHeight
+		width = height * aspectRatio
+	}
+
+	if (width * height > maxArea) {
+		const ratio = Math.sqrt(maxArea / (width * height))
+		width *= ratio
+		height *= ratio
+	}
+
+	return [width, height]
+}

package/src/lib/utils/dom.ts

@@ -90,3 +90,15 @@ export const setStyleProperty = (
 	if (!elm) return
 	elm.style.setProperty(property, value as string)
 }
+
+const INPUTS = ['input', 'select', 'button', 'textarea']
+
+/** @internal */
+export function activeElementShouldCaptureKeys() {
+	const { activeElement } = document
+	return !!(
+		activeElement &&
+		(activeElement.getAttribute('contenteditable') ||
+			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+	)
+}

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.8.0-canary.9dece73524ae'
+export const version = '3.8.0-canary.9ff4b63deedf'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-20T12:24:29.264Z',
-	patch: '2025-01-20T12:24:29.264Z',
+	minor: '2025-02-12T11:58:37.581Z',
+	patch: '2025-02-12T11:58:37.581Z',
 }