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

package/src/lib/editor/Editor.ts

@@ -104,6 +104,7 @@ import {
 	ZOOM_TO_FIT_PADDING,
 } 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'
@@ -162,6 +163,7 @@ import {
 	TLCameraMoveOptions,
 	TLCameraOptions,
 	TLImageExportOptions,
+	TLSvgExportOptions,
 } from './types/misc-types'
 import { TLResizeHandle } from './types/selection-types'
 
@@ -4145,20 +4147,24 @@ export class Editor extends EventEmitter<TLEventMap> {
 		context: {
 			screenScale?: number
 			shouldResolveToOriginal?: boolean
+			dpr?: number
 		}
 	): Promise<string | null> {
 		if (!assetId) return null
 		const asset = this.getAsset(assetId)
 		if (!asset) return null
 
-		const { screenScale = 1, shouldResolveToOriginal = false } = context
+		const {
+			screenScale = 1,
+			shouldResolveToOriginal = false,
+			dpr = this.getInstanceState().devicePixelRatio,
+		} = context
 
 		// We only look at the zoom level at powers of 2.
 		const zoomStepFunction = (zoom: number) => Math.pow(2, Math.ceil(Math.log2(zoom)))
-		const steppedScreenScale = Math.max(0.125, zoomStepFunction(screenScale))
+		const steppedScreenScale = zoomStepFunction(screenScale)
 		const networkEffectiveType: string | null =
 			'connection' in navigator ? (navigator as any).connection.effectiveType : null
-		const dpr = this.getInstanceState().devicePixelRatio
 
 		return await this.store.props.assets.resolve(asset, {
 			screenScale: screenScale || 1,
@@ -4172,7 +4178,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
 	 * asset.
 	 */
-	async uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<string> {
+	async uploadAsset(
+		asset: TLAsset,
+		file: File,
+		abortSignal?: AbortSignal
+	): Promise<{ src: string; meta?: JsonObject }> {
 		return await this.store.props.assets.upload(asset, file, abortSignal)
 	}
 
@@ -8564,11 +8574,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	async getSvgElement(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+	async getSvgElement(shapes: TLShapeId[] | TLShape[], opts: TLSvgExportOptions = {}) {
 		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+			shapes.length === 0
+				? this.getCurrentPageShapeIdsSorted()
+				: typeof shapes[0] === 'string'
+					? (shapes as TLShapeId[])
+					: (shapes as TLShape[]).map((s) => s.id)
 
 		if (ids.length === 0) return undefined
 
@@ -8585,7 +8597,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	async getSvgString(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+	async getSvgString(shapes: TLShapeId[] | TLShape[], opts: TLSvgExportOptions = {}) {
 		const result = await this.getSvgElement(shapes, opts)
 		if (!result) return undefined
 
@@ -8598,12 +8610,63 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	/** @deprecated Use {@link Editor.getSvgString} or {@link Editor.getSvgElement} instead. */
-	async getSvg(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+	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.
+	 *
+	 * @param shapes - The shapes (or shape ids) to export.
+	 * @param opts - Options for the export.
+	 *
+	 * @returns A blob of the image.
+	 * @public
+	 */
+	async toImage(shapes: TLShapeId[] | TLShape[], opts: TLImageExportOptions = {}) {
+		const withDefaults = {
+			format: 'png',
+			scale: 1,
+			pixelRatio: opts.format === 'svg' ? undefined : 2,
+			...opts,
+		} satisfies TLImageExportOptions
+		const result = await this.getSvgString(shapes, withDefaults)
+		if (!result) throw new Error('Could not create SVG')
+
+		switch (withDefaults.format) {
+			case 'svg':
+				return {
+					blob: new Blob([result.svg], { type: 'text/plain' }),
+					width: result.width,
+					height: result.height,
+				}
+			case 'jpeg':
+			case 'png':
+			case 'webp': {
+				const blob = await getSvgAsImage(result.svg, {
+					type: withDefaults.format,
+					quality: withDefaults.quality,
+					pixelRatio: withDefaults.pixelRatio,
+					width: result.width,
+					height: result.height,
+				})
+				if (!blob) {
+					throw new Error('Could not construct image.')
+				}
+				return {
+					blob,
+					width: result.width,
+					height: result.height,
+				}
+			}
+			default: {
+				exhaustiveSwitchError(withDefaults.format)
+			}
+		}
+	}
+
 	/* --------------------- Events --------------------- */
 
 	/**

package/src/lib/editor/types/SvgExportContext.tsx

@@ -1,3 +1,4 @@
+import { TLAssetId } from '@tldraw/tlschema'
 import { promiseWithResolve } from '@tldraw/utils'
 import { ReactElement, ReactNode, createContext, useContext, useEffect, useState } from 'react'
 import { ContainerProvider } from '../../hooks/useContainer'
@@ -29,10 +30,30 @@ export interface SvgExportContext {
 	 */
 	waitUntil(promise: Promise<void>): void
 
+	/**
+	 * Resolve an asset URL in the context of this export. Supply the asset ID and the width in
+	 * shape-pixels it'll be displayed at, and this will resolve the asset according to the export
+	 * options.
+	 */
+	resolveAssetUrl(assetId: TLAssetId, width: number): Promise<string | null>
+
 	/**
 	 * Whether the export should be in dark mode.
 	 */
 	readonly isDarkMode: boolean
+
+	/**
+	 * The scale of the export - how much CSS pixels will be scaled up/down by.
+	 */
+	readonly scale: number
+
+	/**
+	 * Use this value to optionally downscale images in the export. If we're exporting directly to
+	 * an SVG, this will usually be null, and you shouldn't downscale images. If the export is to a
+	 * raster format like PNG, this will be the number of raster pixels in the resulting bitmap per
+	 * CSS pixel in the resulting SVG.
+	 */
+	readonly pixelRatio: number | null
 }
 
 const Context = createContext<SvgExportContext | null>(null)

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/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/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/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/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.a70cbfe4fb04'
 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-01-22T14:26:48.010Z',
+	patch: '2025-01-22T14:26:48.010Z',
 }