@tldraw/editor 3.8.0-canary.61db77736050 → 3.8.0-canary.80294e641ad6

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

@@ -8,70 +8,17 @@ 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 type TLExportType = 'svg' | 'png' | 'jpeg' | 'webp'
-
-/** @public */
-export interface TLSvgExportOptions {
-	/**
-	 * The bounding box, in page coordinates, of the area being exported.
-	 */
+export interface TLImageExportOptions {
 	bounds?: Box
-	/**
-	 * The logical scale of the export. This scales the resulting size of the SVG being generated.
-	 */
 	scale?: 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.
-	 */
+	quality?: number
 	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 { TLSvgExportOptions } from '../editor/types/misc-types'
+import { TLImageExportOptions } 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: TLSvgExportOptions = {}
+	opts: TLImageExportOptions = {}
 ) {
 	// 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/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 = editor.getInstanceState().exportBackground,
+		background = false,
 		padding = editor.options.defaultSvgPadding,
 		preserveAspectRatio,
 	} = opts
@@ -102,7 +102,6 @@ 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}
@@ -122,7 +121,6 @@ function SvgExport({
 	editor,
 	preserveAspectRatio,
 	scale,
-	pixelRatio,
 	bbox,
 	background,
 	singleFrameShapeId,
@@ -134,7 +132,6 @@ function SvgExport({
 	editor: Editor
 	preserveAspectRatio?: string
 	scale: number
-	pixelRatio: number | null
 	bbox: Box
 	background: boolean
 	singleFrameShapeId: TLShapeId | null
@@ -180,20 +177,8 @@ 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, scale, pixelRatio, editor]
+		[isDarkMode, waitUntil, addExportDef]
 	)
 
 	const didRenderRef = useRef(false)

package/src/lib/utils/sync/TLLocalSyncClient.ts

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

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.61db77736050'
+export const version = '3.8.0-canary.80294e641ad6'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-01-21T09:06:10.847Z',
-	patch: '2025-01-21T09:06:10.847Z',
+	minor: '2025-01-20T09:29:17.935Z',
+	patch: '2025-01-20T09:29:17.935Z',
 }

package/dist-cjs/lib/exports/getSvgAsImage.js

@@ -1,83 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var getSvgAsImage_exports = {};
-__export(getSvgAsImage_exports, {
-  getSvgAsImage: () => getSvgAsImage
-});
-module.exports = __toCommonJS(getSvgAsImage_exports);
-var import_utils = require("@tldraw/utils");
-var import_environment = require("../globals/environment");
-var import_browserCanvasMaxSize = require("../utils/browserCanvasMaxSize");
-var import_debug_flags = require("../utils/debug-flags");
-async function getSvgAsImage(svgString, options) {
-  const { type, width, height, quality = 1, pixelRatio = 2 } = options;
-  let [clampedWidth, clampedHeight] = await (0, import_browserCanvasMaxSize.clampToBrowserMaxCanvasSize)(
-    width * pixelRatio,
-    height * pixelRatio
-  );
-  clampedWidth = Math.floor(clampedWidth);
-  clampedHeight = Math.floor(clampedHeight);
-  const effectiveScale = clampedWidth / width;
-  const svgUrl = await import_utils.FileHelpers.blobToDataUrl(new Blob([svgString], { type: "image/svg+xml" }));
-  const canvas = await new Promise((resolve) => {
-    const image = (0, import_utils.Image)();
-    image.crossOrigin = "anonymous";
-    image.onload = async () => {
-      if (import_environment.tlenv.isSafari) {
-        await (0, import_utils.sleep)(250);
-      }
-      const canvas2 = document.createElement("canvas");
-      const ctx = canvas2.getContext("2d");
-      canvas2.width = clampedWidth;
-      canvas2.height = clampedHeight;
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(image, 0, 0, clampedWidth, clampedHeight);
-      URL.revokeObjectURL(svgUrl);
-      resolve(canvas2);
-    };
-    image.onerror = () => {
-      resolve(null);
-    };
-    image.src = svgUrl;
-  });
-  if (!canvas) return null;
-  const blob = await new Promise(
-    (resolve) => canvas.toBlob(
-      (blob2) => {
-        if (!blob2 || import_debug_flags.debugFlags.throwToBlob.get()) {
-          resolve(null);
-        }
-        resolve(blob2);
-      },
-      "image/" + type,
-      quality
-    )
-  );
-  if (!blob) return null;
-  if (type === "png") {
-    const view = new DataView(await blob.arrayBuffer());
-    return import_utils.PngHelpers.setPhysChunk(view, effectiveScale, {
-      type: "image/" + type
-    });
-  } else {
-    return blob;
-  }
-}
-//# sourceMappingURL=getSvgAsImage.js.map

package/dist-cjs/lib/exports/getSvgAsImage.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/exports/getSvgAsImage.ts"],
-  "sourcesContent": ["import { FileHelpers, Image, PngHelpers, sleep } from '@tldraw/utils'\nimport { tlenv } from '../globals/environment'\nimport { clampToBrowserMaxCanvasSize } from '../utils/browserCanvasMaxSize'\nimport { debugFlags } from '../utils/debug-flags'\n\n/** @public */\nexport async function getSvgAsImage(\n\tsvgString: string,\n\toptions: {\n\t\ttype: 'png' | 'jpeg' | 'webp'\n\t\twidth: number\n\t\theight: number\n\t\tquality?: number\n\t\tpixelRatio?: number\n\t}\n) {\n\tconst { type, width, height, quality = 1, pixelRatio = 2 } = options\n\n\tlet [clampedWidth, clampedHeight] = await clampToBrowserMaxCanvasSize(\n\t\twidth * pixelRatio,\n\t\theight * pixelRatio\n\t)\n\tclampedWidth = Math.floor(clampedWidth)\n\tclampedHeight = Math.floor(clampedHeight)\n\tconst effectiveScale = clampedWidth / width\n\n\t// usually we would use `URL.createObjectURL` here, but chrome has a bug where `blob:` URLs of\n\t// SVGs that use <foreignObject> mark the canvas as tainted, where data: ones do not.\n\t// https://issues.chromium.org/issues/41054640\n\tconst svgUrl = await FileHelpers.blobToDataUrl(new Blob([svgString], { type: 'image/svg+xml' }))\n\n\tconst canvas = await new Promise<HTMLCanvasElement | null>((resolve) => {\n\t\tconst image = Image()\n\t\timage.crossOrigin = 'anonymous'\n\n\t\timage.onload = async () => {\n\t\t\t// safari will fire `onLoad` before the fonts in the SVG are\n\t\t\t// actually loaded. just waiting around a while is brittle, but\n\t\t\t// there doesn't seem to be any better solution for now :( see\n\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=219770\n\t\t\tif (tlenv.isSafari) {\n\t\t\t\tawait sleep(250)\n\t\t\t}\n\n\t\t\tconst canvas = document.createElement('canvas') as HTMLCanvasElement\n\t\t\tconst ctx = canvas.getContext('2d')!\n\n\t\t\tcanvas.width = clampedWidth\n\t\t\tcanvas.height = clampedHeight\n\n\t\t\tctx.imageSmoothingEnabled = true\n\t\t\tctx.imageSmoothingQuality = 'high'\n\t\t\tctx.drawImage(image, 0, 0, clampedWidth, clampedHeight)\n\n\t\t\tURL.revokeObjectURL(svgUrl)\n\n\t\t\tresolve(canvas)\n\t\t}\n\n\t\timage.onerror = () => {\n\t\t\tresolve(null)\n\t\t}\n\n\t\timage.src = svgUrl\n\t})\n\n\tif (!canvas) return null\n\n\tconst blob = await new Promise<Blob | null>((resolve) =>\n\t\tcanvas.toBlob(\n\t\t\t(blob) => {\n\t\t\t\tif (!blob || debugFlags.throwToBlob.get()) {\n\t\t\t\t\tresolve(null)\n\t\t\t\t}\n\t\t\t\tresolve(blob)\n\t\t\t},\n\t\t\t'image/' + type,\n\t\t\tquality\n\t\t)\n\t)\n\n\tif (!blob) return null\n\n\tif (type === 'png') {\n\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\treturn PngHelpers.setPhysChunk(view, effectiveScale, {\n\t\t\ttype: 'image/' + type,\n\t\t})\n\t} else {\n\t\treturn blob\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsD;AACtD,yBAAsB;AACtB,kCAA4C;AAC5C,yBAA2B;AAG3B,eAAsB,cACrB,WACA,SAOC;AACD,QAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,GAAG,aAAa,EAAE,IAAI;AAE7D,MAAI,CAAC,cAAc,aAAa,IAAI,UAAM;AAAA,IACzC,QAAQ;AAAA,IACR,SAAS;AAAA,EACV;AACA,iBAAe,KAAK,MAAM,YAAY;AACtC,kBAAgB,KAAK,MAAM,aAAa;AACxC,QAAM,iBAAiB,eAAe;AAKtC,QAAM,SAAS,MAAM,yBAAY,cAAc,IAAI,KAAK,CAAC,SAAS,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAE/F,QAAM,SAAS,MAAM,IAAI,QAAkC,CAAC,YAAY;AACvE,UAAM,YAAQ,oBAAM;AACpB,UAAM,cAAc;AAEpB,UAAM,SAAS,YAAY;AAK1B,UAAI,yBAAM,UAAU;AACnB,kBAAM,oBAAM,GAAG;AAAA,MAChB;AAEA,YAAMA,UAAS,SAAS,cAAc,QAAQ;AAC9C,YAAM,MAAMA,QAAO,WAAW,IAAI;AAElC,MAAAA,QAAO,QAAQ;AACf,MAAAA,QAAO,SAAS;AAEhB,UAAI,wBAAwB;AAC5B,UAAI,wBAAwB;AAC5B,UAAI,UAAU,OAAO,GAAG,GAAG,cAAc,aAAa;AAEtD,UAAI,gBAAgB,MAAM;AAE1B,cAAQA,OAAM;AAAA,IACf;AAEA,UAAM,UAAU,MAAM;AACrB,cAAQ,IAAI;AAAA,IACb;AAEA,UAAM,MAAM;AAAA,EACb,CAAC;AAED,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,OAAO,MAAM,IAAI;AAAA,IAAqB,CAAC,YAC5C,OAAO;AAAA,MACN,CAACC,UAAS;AACT,YAAI,CAACA,SAAQ,8BAAW,YAAY,IAAI,GAAG;AAC1C,kBAAQ,IAAI;AAAA,QACb;AACA,gBAAQA,KAAI;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,MAAI,SAAS,OAAO;AACnB,UAAM,OAAO,IAAI,SAAS,MAAM,KAAK,YAAY,CAAC;AAClD,WAAO,wBAAW,aAAa,MAAM,gBAAgB;AAAA,MACpD,MAAM,WAAW;AAAA,IAClB,CAAC;AAAA,EACF,OAAO;AACN,WAAO;AAAA,EACR;AACD;",
-  "names": ["canvas", "blob"]
-}

package/dist-cjs/lib/utils/browserCanvasMaxSize.js

@@ -1,75 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var browserCanvasMaxSize_exports = {};
-__export(browserCanvasMaxSize_exports, {
-  clampToBrowserMaxCanvasSize: () => clampToBrowserMaxCanvasSize
-});
-module.exports = __toCommonJS(browserCanvasMaxSize_exports);
-var import_canvas_size = __toESM(require("canvas-size"));
-let maxSizePromise = null;
-function getBrowserCanvasMaxSize() {
-  if (!maxSizePromise) {
-    maxSizePromise = calculateBrowserCanvasMaxSize();
-  }
-  return maxSizePromise;
-}
-async function calculateBrowserCanvasMaxSize() {
-  const maxWidth = await import_canvas_size.default.maxWidth({ usePromise: true });
-  const maxHeight = await import_canvas_size.default.maxHeight({ usePromise: true });
-  const maxArea = await import_canvas_size.default.maxArea({ usePromise: true });
-  return {
-    maxWidth: maxWidth.width,
-    maxHeight: maxHeight.height,
-    maxArea: maxArea.width * maxArea.height
-  };
-}
-const MAX_SAFE_CANVAS_DIMENSION = 8192;
-const MAX_SAFE_CANVAS_AREA = 4096 * 4096;
-async function clampToBrowserMaxCanvasSize(width, height) {
-  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];
-}
-//# sourceMappingURL=browserCanvasMaxSize.js.map

package/dist-cjs/lib/utils/browserCanvasMaxSize.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/browserCanvasMaxSize.ts"],
-  "sourcesContent": ["import canvasSize from 'canvas-size'\n\n/** @internal */\nexport interface CanvasMaxSize {\n\tmaxWidth: number\n\tmaxHeight: number\n\tmaxArea: number\n}\n\nlet maxSizePromise: Promise<CanvasMaxSize> | null = null\n\nfunction getBrowserCanvasMaxSize() {\n\tif (!maxSizePromise) {\n\t\tmaxSizePromise = calculateBrowserCanvasMaxSize()\n\t}\n\n\treturn maxSizePromise\n}\n\nasync function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {\n\tconst maxWidth = await canvasSize.maxWidth({ usePromise: true })\n\tconst maxHeight = await canvasSize.maxHeight({ usePromise: true })\n\tconst maxArea = await canvasSize.maxArea({ usePromise: true })\n\treturn {\n\t\tmaxWidth: maxWidth.width,\n\t\tmaxHeight: maxHeight.height,\n\t\tmaxArea: maxArea.width * maxArea.height,\n\t}\n}\n\n// https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results\nconst MAX_SAFE_CANVAS_DIMENSION = 8192\nconst MAX_SAFE_CANVAS_AREA = 4096 * 4096\n\n/** @internal */\nexport async function clampToBrowserMaxCanvasSize(width: number, height: number) {\n\tif (\n\t\twidth <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\theight <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\twidth * height <= MAX_SAFE_CANVAS_AREA\n\t) {\n\t\treturn [width, height]\n\t}\n\n\tconst { maxWidth, maxHeight, maxArea } = await getBrowserCanvasMaxSize()\n\tconst aspectRatio = width / height\n\n\tif (width > maxWidth) {\n\t\twidth = maxWidth\n\t\theight = width / aspectRatio\n\t}\n\n\tif (height > maxHeight) {\n\t\theight = maxHeight\n\t\twidth = height * aspectRatio\n\t}\n\n\tif (width * height > maxArea) {\n\t\tconst ratio = Math.sqrt(maxArea / (width * height))\n\t\twidth *= ratio\n\t\theight *= ratio\n\t}\n\n\treturn [width, height]\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAuB;AASvB,IAAI,iBAAgD;AAEpD,SAAS,0BAA0B;AAClC,MAAI,CAAC,gBAAgB;AACpB,qBAAiB,8BAA8B;AAAA,EAChD;AAEA,SAAO;AACR;AAEA,eAAe,gCAAwD;AACtE,QAAM,WAAW,MAAM,mBAAAA,QAAW,SAAS,EAAE,YAAY,KAAK,CAAC;AAC/D,QAAM,YAAY,MAAM,mBAAAA,QAAW,UAAU,EAAE,YAAY,KAAK,CAAC;AACjE,QAAM,UAAU,MAAM,mBAAAA,QAAW,QAAQ,EAAE,YAAY,KAAK,CAAC;AAC7D,SAAO;AAAA,IACN,UAAU,SAAS;AAAA,IACnB,WAAW,UAAU;AAAA,IACrB,SAAS,QAAQ,QAAQ,QAAQ;AAAA,EAClC;AACD;AAGA,MAAM,4BAA4B;AAClC,MAAM,uBAAuB,OAAO;AAGpC,eAAsB,4BAA4B,OAAe,QAAgB;AAChF,MACC,SAAS,6BACT,UAAU,6BACV,QAAQ,UAAU,sBACjB;AACD,WAAO,CAAC,OAAO,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,UAAU,WAAW,QAAQ,IAAI,MAAM,wBAAwB;AACvE,QAAM,cAAc,QAAQ;AAE5B,MAAI,QAAQ,UAAU;AACrB,YAAQ;AACR,aAAS,QAAQ;AAAA,EAClB;AAEA,MAAI,SAAS,WAAW;AACvB,aAAS;AACT,YAAQ,SAAS;AAAA,EAClB;AAEA,MAAI,QAAQ,SAAS,SAAS;AAC7B,UAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ,OAAO;AAClD,aAAS;AACT,cAAU;AAAA,EACX;AAEA,SAAO,CAAC,OAAO,MAAM;AACtB;",
-  "names": ["canvasSize"]
-}

package/dist-esm/lib/exports/getSvgAsImage.mjs

@@ -1,63 +0,0 @@
-import { FileHelpers, Image, PngHelpers, sleep } from "@tldraw/utils";
-import { tlenv } from "../globals/environment.mjs";
-import { clampToBrowserMaxCanvasSize } from "../utils/browserCanvasMaxSize.mjs";
-import { debugFlags } from "../utils/debug-flags.mjs";
-async function getSvgAsImage(svgString, options) {
-  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;
-  const svgUrl = await FileHelpers.blobToDataUrl(new Blob([svgString], { type: "image/svg+xml" }));
-  const canvas = await new Promise((resolve) => {
-    const image = Image();
-    image.crossOrigin = "anonymous";
-    image.onload = async () => {
-      if (tlenv.isSafari) {
-        await sleep(250);
-      }
-      const canvas2 = document.createElement("canvas");
-      const ctx = canvas2.getContext("2d");
-      canvas2.width = clampedWidth;
-      canvas2.height = clampedHeight;
-      ctx.imageSmoothingEnabled = true;
-      ctx.imageSmoothingQuality = "high";
-      ctx.drawImage(image, 0, 0, clampedWidth, clampedHeight);
-      URL.revokeObjectURL(svgUrl);
-      resolve(canvas2);
-    };
-    image.onerror = () => {
-      resolve(null);
-    };
-    image.src = svgUrl;
-  });
-  if (!canvas) return null;
-  const blob = await new Promise(
-    (resolve) => canvas.toBlob(
-      (blob2) => {
-        if (!blob2 || debugFlags.throwToBlob.get()) {
-          resolve(null);
-        }
-        resolve(blob2);
-      },
-      "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;
-  }
-}
-export {
-  getSvgAsImage
-};
-//# sourceMappingURL=getSvgAsImage.mjs.map

package/dist-esm/lib/exports/getSvgAsImage.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/exports/getSvgAsImage.ts"],
-  "sourcesContent": ["import { FileHelpers, Image, PngHelpers, sleep } from '@tldraw/utils'\nimport { tlenv } from '../globals/environment'\nimport { clampToBrowserMaxCanvasSize } from '../utils/browserCanvasMaxSize'\nimport { debugFlags } from '../utils/debug-flags'\n\n/** @public */\nexport async function getSvgAsImage(\n\tsvgString: string,\n\toptions: {\n\t\ttype: 'png' | 'jpeg' | 'webp'\n\t\twidth: number\n\t\theight: number\n\t\tquality?: number\n\t\tpixelRatio?: number\n\t}\n) {\n\tconst { type, width, height, quality = 1, pixelRatio = 2 } = options\n\n\tlet [clampedWidth, clampedHeight] = await clampToBrowserMaxCanvasSize(\n\t\twidth * pixelRatio,\n\t\theight * pixelRatio\n\t)\n\tclampedWidth = Math.floor(clampedWidth)\n\tclampedHeight = Math.floor(clampedHeight)\n\tconst effectiveScale = clampedWidth / width\n\n\t// usually we would use `URL.createObjectURL` here, but chrome has a bug where `blob:` URLs of\n\t// SVGs that use <foreignObject> mark the canvas as tainted, where data: ones do not.\n\t// https://issues.chromium.org/issues/41054640\n\tconst svgUrl = await FileHelpers.blobToDataUrl(new Blob([svgString], { type: 'image/svg+xml' }))\n\n\tconst canvas = await new Promise<HTMLCanvasElement | null>((resolve) => {\n\t\tconst image = Image()\n\t\timage.crossOrigin = 'anonymous'\n\n\t\timage.onload = async () => {\n\t\t\t// safari will fire `onLoad` before the fonts in the SVG are\n\t\t\t// actually loaded. just waiting around a while is brittle, but\n\t\t\t// there doesn't seem to be any better solution for now :( see\n\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=219770\n\t\t\tif (tlenv.isSafari) {\n\t\t\t\tawait sleep(250)\n\t\t\t}\n\n\t\t\tconst canvas = document.createElement('canvas') as HTMLCanvasElement\n\t\t\tconst ctx = canvas.getContext('2d')!\n\n\t\t\tcanvas.width = clampedWidth\n\t\t\tcanvas.height = clampedHeight\n\n\t\t\tctx.imageSmoothingEnabled = true\n\t\t\tctx.imageSmoothingQuality = 'high'\n\t\t\tctx.drawImage(image, 0, 0, clampedWidth, clampedHeight)\n\n\t\t\tURL.revokeObjectURL(svgUrl)\n\n\t\t\tresolve(canvas)\n\t\t}\n\n\t\timage.onerror = () => {\n\t\t\tresolve(null)\n\t\t}\n\n\t\timage.src = svgUrl\n\t})\n\n\tif (!canvas) return null\n\n\tconst blob = await new Promise<Blob | null>((resolve) =>\n\t\tcanvas.toBlob(\n\t\t\t(blob) => {\n\t\t\t\tif (!blob || debugFlags.throwToBlob.get()) {\n\t\t\t\t\tresolve(null)\n\t\t\t\t}\n\t\t\t\tresolve(blob)\n\t\t\t},\n\t\t\t'image/' + type,\n\t\t\tquality\n\t\t)\n\t)\n\n\tif (!blob) return null\n\n\tif (type === 'png') {\n\t\tconst view = new DataView(await blob.arrayBuffer())\n\t\treturn PngHelpers.setPhysChunk(view, effectiveScale, {\n\t\t\ttype: 'image/' + type,\n\t\t})\n\t} else {\n\t\treturn blob\n\t}\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,OAAO,YAAY,aAAa;AACtD,SAAS,aAAa;AACtB,SAAS,mCAAmC;AAC5C,SAAS,kBAAkB;AAG3B,eAAsB,cACrB,WACA,SAOC;AACD,QAAM,EAAE,MAAM,OAAO,QAAQ,UAAU,GAAG,aAAa,EAAE,IAAI;AAE7D,MAAI,CAAC,cAAc,aAAa,IAAI,MAAM;AAAA,IACzC,QAAQ;AAAA,IACR,SAAS;AAAA,EACV;AACA,iBAAe,KAAK,MAAM,YAAY;AACtC,kBAAgB,KAAK,MAAM,aAAa;AACxC,QAAM,iBAAiB,eAAe;AAKtC,QAAM,SAAS,MAAM,YAAY,cAAc,IAAI,KAAK,CAAC,SAAS,GAAG,EAAE,MAAM,gBAAgB,CAAC,CAAC;AAE/F,QAAM,SAAS,MAAM,IAAI,QAAkC,CAAC,YAAY;AACvE,UAAM,QAAQ,MAAM;AACpB,UAAM,cAAc;AAEpB,UAAM,SAAS,YAAY;AAK1B,UAAI,MAAM,UAAU;AACnB,cAAM,MAAM,GAAG;AAAA,MAChB;AAEA,YAAMA,UAAS,SAAS,cAAc,QAAQ;AAC9C,YAAM,MAAMA,QAAO,WAAW,IAAI;AAElC,MAAAA,QAAO,QAAQ;AACf,MAAAA,QAAO,SAAS;AAEhB,UAAI,wBAAwB;AAC5B,UAAI,wBAAwB;AAC5B,UAAI,UAAU,OAAO,GAAG,GAAG,cAAc,aAAa;AAEtD,UAAI,gBAAgB,MAAM;AAE1B,cAAQA,OAAM;AAAA,IACf;AAEA,UAAM,UAAU,MAAM;AACrB,cAAQ,IAAI;AAAA,IACb;AAEA,UAAM,MAAM;AAAA,EACb,CAAC;AAED,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,OAAO,MAAM,IAAI;AAAA,IAAqB,CAAC,YAC5C,OAAO;AAAA,MACN,CAACC,UAAS;AACT,YAAI,CAACA,SAAQ,WAAW,YAAY,IAAI,GAAG;AAC1C,kBAAQ,IAAI;AAAA,QACb;AACA,gBAAQA,KAAI;AAAA,MACb;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACD;AAAA,EACD;AAEA,MAAI,CAAC,KAAM,QAAO;AAElB,MAAI,SAAS,OAAO;AACnB,UAAM,OAAO,IAAI,SAAS,MAAM,KAAK,YAAY,CAAC;AAClD,WAAO,WAAW,aAAa,MAAM,gBAAgB;AAAA,MACpD,MAAM,WAAW;AAAA,IAClB,CAAC;AAAA,EACF,OAAO;AACN,WAAO;AAAA,EACR;AACD;",
-  "names": ["canvas", "blob"]
-}

package/dist-esm/lib/utils/browserCanvasMaxSize.mjs

@@ -1,45 +0,0 @@
-import canvasSize from "canvas-size";
-let maxSizePromise = null;
-function getBrowserCanvasMaxSize() {
-  if (!maxSizePromise) {
-    maxSizePromise = calculateBrowserCanvasMaxSize();
-  }
-  return maxSizePromise;
-}
-async function calculateBrowserCanvasMaxSize() {
-  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
-  };
-}
-const MAX_SAFE_CANVAS_DIMENSION = 8192;
-const MAX_SAFE_CANVAS_AREA = 4096 * 4096;
-async function clampToBrowserMaxCanvasSize(width, height) {
-  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];
-}
-export {
-  clampToBrowserMaxCanvasSize
-};
-//# sourceMappingURL=browserCanvasMaxSize.mjs.map

package/dist-esm/lib/utils/browserCanvasMaxSize.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/browserCanvasMaxSize.ts"],
-  "sourcesContent": ["import canvasSize from 'canvas-size'\n\n/** @internal */\nexport interface CanvasMaxSize {\n\tmaxWidth: number\n\tmaxHeight: number\n\tmaxArea: number\n}\n\nlet maxSizePromise: Promise<CanvasMaxSize> | null = null\n\nfunction getBrowserCanvasMaxSize() {\n\tif (!maxSizePromise) {\n\t\tmaxSizePromise = calculateBrowserCanvasMaxSize()\n\t}\n\n\treturn maxSizePromise\n}\n\nasync function calculateBrowserCanvasMaxSize(): Promise<CanvasMaxSize> {\n\tconst maxWidth = await canvasSize.maxWidth({ usePromise: true })\n\tconst maxHeight = await canvasSize.maxHeight({ usePromise: true })\n\tconst maxArea = await canvasSize.maxArea({ usePromise: true })\n\treturn {\n\t\tmaxWidth: maxWidth.width,\n\t\tmaxHeight: maxHeight.height,\n\t\tmaxArea: maxArea.width * maxArea.height,\n\t}\n}\n\n// https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results\nconst MAX_SAFE_CANVAS_DIMENSION = 8192\nconst MAX_SAFE_CANVAS_AREA = 4096 * 4096\n\n/** @internal */\nexport async function clampToBrowserMaxCanvasSize(width: number, height: number) {\n\tif (\n\t\twidth <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\theight <= MAX_SAFE_CANVAS_DIMENSION &&\n\t\twidth * height <= MAX_SAFE_CANVAS_AREA\n\t) {\n\t\treturn [width, height]\n\t}\n\n\tconst { maxWidth, maxHeight, maxArea } = await getBrowserCanvasMaxSize()\n\tconst aspectRatio = width / height\n\n\tif (width > maxWidth) {\n\t\twidth = maxWidth\n\t\theight = width / aspectRatio\n\t}\n\n\tif (height > maxHeight) {\n\t\theight = maxHeight\n\t\twidth = height * aspectRatio\n\t}\n\n\tif (width * height > maxArea) {\n\t\tconst ratio = Math.sqrt(maxArea / (width * height))\n\t\twidth *= ratio\n\t\theight *= ratio\n\t}\n\n\treturn [width, height]\n}\n"],
-  "mappings": "AAAA,OAAO,gBAAgB;AASvB,IAAI,iBAAgD;AAEpD,SAAS,0BAA0B;AAClC,MAAI,CAAC,gBAAgB;AACpB,qBAAiB,8BAA8B;AAAA,EAChD;AAEA,SAAO;AACR;AAEA,eAAe,gCAAwD;AACtE,QAAM,WAAW,MAAM,WAAW,SAAS,EAAE,YAAY,KAAK,CAAC;AAC/D,QAAM,YAAY,MAAM,WAAW,UAAU,EAAE,YAAY,KAAK,CAAC;AACjE,QAAM,UAAU,MAAM,WAAW,QAAQ,EAAE,YAAY,KAAK,CAAC;AAC7D,SAAO;AAAA,IACN,UAAU,SAAS;AAAA,IACnB,WAAW,UAAU;AAAA,IACrB,SAAS,QAAQ,QAAQ,QAAQ;AAAA,EAClC;AACD;AAGA,MAAM,4BAA4B;AAClC,MAAM,uBAAuB,OAAO;AAGpC,eAAsB,4BAA4B,OAAe,QAAgB;AAChF,MACC,SAAS,6BACT,UAAU,6BACV,QAAQ,UAAU,sBACjB;AACD,WAAO,CAAC,OAAO,MAAM;AAAA,EACtB;AAEA,QAAM,EAAE,UAAU,WAAW,QAAQ,IAAI,MAAM,wBAAwB;AACvE,QAAM,cAAc,QAAQ;AAE5B,MAAI,QAAQ,UAAU;AACrB,YAAQ;AACR,aAAS,QAAQ;AAAA,EAClB;AAEA,MAAI,SAAS,WAAW;AACvB,aAAS;AACT,YAAQ,SAAS;AAAA,EAClB;AAEA,MAAI,QAAQ,SAAS,SAAS;AAC7B,UAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ,OAAO;AAClD,aAAS;AACT,cAAU;AAAA,EACX;AAEA,SAAO,CAAC,OAAO,MAAM;AACtB;",
-  "names": []
-}

package/src/lib/exports/getSvgAsImage.ts

@@ -1,92 +0,0 @@
-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/utils/browserCanvasMaxSize.ts

@@ -1,65 +0,0 @@
-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]
-}