@tldraw/editor 3.8.0-canary.ab23d1d97da1 → 3.8.0-canary.ab782583b3ba

package/src/lib/editor/shapes/shared/resizeScaled.ts

@@ -0,0 +1,61 @@
+import { TLBaseShape } from '@tldraw/tlschema'
+import { exhaustiveSwitchError } from '@tldraw/utils'
+import { Vec } from '../../../primitives/Vec'
+import { TLResizeInfo } from '../ShapeUtil'
+
+/**
+ * Resize a shape that has a scale prop.
+ *
+ * @param shape - The shape to resize
+ * @param info - The resize info
+ *
+ * @public */
+export function resizeScaled(
+	shape: TLBaseShape<any, { scale: number }>,
+	{ initialBounds, scaleX, scaleY, newPoint, handle }: TLResizeInfo<any>
+) {
+	let scaleDelta: number
+	switch (handle) {
+		case 'bottom_left':
+		case 'bottom_right':
+		case 'top_left':
+		case 'top_right': {
+			scaleDelta = Math.max(0.01, Math.max(Math.abs(scaleX), Math.abs(scaleY)))
+			break
+		}
+		case 'left':
+		case 'right': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleX))
+			break
+		}
+		case 'bottom':
+		case 'top': {
+			scaleDelta = Math.max(0.01, Math.abs(scaleY))
+			break
+		}
+		default: {
+			throw exhaustiveSwitchError(handle)
+		}
+	}
+
+	// Compute the offset (if flipped X or flipped Y)
+	const offset = new Vec(0, 0)
+
+	if (scaleX < 0) {
+		offset.x = -(initialBounds.width * scaleDelta)
+	}
+	if (scaleY < 0) {
+		offset.y = -(initialBounds.height * scaleDelta)
+	}
+
+	// Apply the offset to the new point
+	const { x, y } = Vec.Add(newPoint, offset.rot(shape.rotation))
+
+	return {
+		x,
+		y,
+		props: {
+			scale: scaleDelta * shape.props.scale,
+		},
+	}
+}

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/options.ts

@@ -66,6 +66,11 @@ export interface TldrawOptions {
 	 * external context providers. By default, this is `React.Fragment`.
 	 */
 	readonly exportProvider: ComponentType<{ children: React.ReactNode }>
+	/**
+	 * How should the note shape resize? By default it does not resize (except automatically based on its text content),
+	 * but you can set it to be user-resizable using scale.
+	 */
+	readonly noteShapeResizeMode: 'none' | 'scale'
 }
 
 /** @public */
@@ -111,4 +116,5 @@ export const defaultTldrawOptions = {
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,
 	exportProvider: Fragment,
+	noteShapeResizeMode: 'none',
 } 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/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.ab23d1d97da1'
+export const version = '3.8.0-canary.ab782583b3ba'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-09T08:29:21.762Z',
-	patch: '2025-01-09T08:29:21.762Z',
+	minor: '2025-01-28T18:43:07.534Z',
+	patch: '2025-01-28T18:43:07.534Z',
 }