@tldraw/editor 3.8.0-canary.4569e7d7e9d9 → 3.8.0-canary.4703b6039d91

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/lib/utils/sync/TLLocalSyncClient.ts

@@ -196,7 +196,9 @@ export class TLLocalSyncClient {
 				}
 
 				if (sessionStateSnapshot) {
-					loadSessionStateSnapshotIntoStore(this.store, sessionStateSnapshot)
+					loadSessionStateSnapshotIntoStore(this.store, sessionStateSnapshot, {
+						forceOverwrite: true,
+					})
 				}
 			}
 

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.4569e7d7e9d9'
+export const version = '3.8.0-canary.4703b6039d91'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-08T09:51:01.404Z',
-	patch: '2025-01-08T09:51:01.404Z',
+	minor: '2025-01-28T10:50:55.780Z',
+	patch: '2025-01-28T10:50:55.780Z',
 }