@tldraw/editor - npm Package Compare versions

Comparing version 3.8.0-canary.ab23d1d97da1 to 3.8.0-canary.ab782583b3ba

dist-cjs/index.js

@@ -110,2 +110,3 @@ "use strict";
   clampRadians: () => import_utils2.clampRadians,
+  clampToBrowserMaxCanvasSize: () => import_browserCanvasMaxSize.clampToBrowserMaxCanvasSize,
   clockwiseAngleDist: () => import_utils2.clockwiseAngleDist,
@@ -141,2 +142,3 @@ computed: () => import_state.computed,
   getSnapshot: () => import_TLEditorSnapshot.getSnapshot,
+  getSvgAsImage: () => import_getSvgAsImage.getSvgAsImage,
   getSvgPathFromPoints: () => import_getSvgPathFromPoints.getSvgPathFromPoints,
@@ -178,2 +180,3 @@ getUserPreferences: () => import_TLUserPreferences.getUserPreferences,
   resizeBox: () => import_resizeBox.resizeBox,
+  resizeScaled: () => import_resizeScaled.resizeScaled,
   rotateSelectionHandle: () => import_Box.rotateSelectionHandle,
@@ -245,2 +248,3 @@ runtime: () => import_runtime.runtime,
 var import_state_react = require("@tldraw/state-react");
+var import_resizeScaled = require("./lib/editor/shapes/shared/resizeScaled");
 var import_LocalIndexedDb = require("./lib/utils/sync/LocalIndexedDb");
@@ -301,2 +305,3 @@ __reExport(src_exports, require("@tldraw/store"), module.exports);
 var import_event_types = require("./lib/editor/types/event-types");
+var import_getSvgAsImage = require("./lib/exports/getSvgAsImage");
 var import_environment = require("./lib/globals/environment");
@@ -347,2 +352,3 @@ var import_menus = require("./lib/globals/menus");
 var import_assets = require("./lib/utils/assets");
+var import_browserCanvasMaxSize = require("./lib/utils/browserCanvasMaxSize");
 var import_debug_flags = require("./lib/utils/debug-flags");
@@ -368,5 +374,5 @@ var import_deepLinks = require("./lib/utils/deepLinks");
   "@tldraw/editor",
-  "3.8.0-canary.ab23d1d97da1",
+  "3.8.0-canary.ab782583b3ba",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

dist-cjs/lib/components/default-components/DefaultCanvas.js

@@ -158,3 +158,2 @@ "use strict";
             debugGeometry ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GeometryDebuggingView.GeometryDebuggingView, {}) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HandlesWrapper, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BrushWrapper, {}),
@@ -167,2 +166,3 @@ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScribbleWrapper, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionForegroundWrapper, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HandlesWrapper, {}),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LiveCollaborators.LiveCollaborators, {})
@@ -386,6 +386,3 @@ ] }) }),
       bounds = bounds.clone().expandBy(padding);
-      const result = await editor.getSvgString([id], {
-        padding,
-        background: editor.getInstanceState().exportBackground
-      });
+      const result = await editor.getSvgString([id], { padding });
       if (latest !== renderId || !result) return;
@@ -392,0 +389,0 @@ const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(result.svg)}`;

dist-cjs/lib/config/createTLStore.js

@@ -35,3 +35,5 @@ "use strict";
 const inlineBase64AssetStore = {
-  upload: (_, file) => import_utils.FileHelpers.blobToDataUrl(file)
+  upload: async (_, file) => {
+    return { src: await import_utils.FileHelpers.blobToDataUrl(file) };
+  }
 };
@@ -75,3 +77,3 @@ function createTLSchemaFromUtils(opts) {
     if (initialData) throw new Error("Cannot provide both initialData and snapshot");
-    (0, import_TLEditorSnapshot.loadSnapshot)(store, rest.snapshot);
+    (0, import_TLEditorSnapshot.loadSnapshot)(store, rest.snapshot, { forceOverwriteSessionState: true });
   }
@@ -78,0 +80,0 @@ return store;

dist-cjs/lib/exports/getSvgJsx.js

@@ -43,3 +43,3 @@ "use strict";
     // should we include the background in the export? or is it transparent?
-    background = false,
+    background = editor.getInstanceState().exportBackground,
     padding = editor.options.defaultSvgPadding,
@@ -85,2 +85,3 @@ preserveAspectRatio
       scale,
+      pixelRatio: opts.pixelRatio ?? null,
       bbox,
@@ -101,2 +102,3 @@ background,
   scale,
+  pixelRatio,
   bbox,
@@ -136,5 +138,16 @@ background,
       waitUntil,
-      addExportDef
+      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 ?? void 0
+        });
+      }
     }),
-    [isDarkMode, waitUntil, addExportDef]
+    [isDarkMode, waitUntil, addExportDef, scale, pixelRatio, editor]
   );
@@ -141,0 +154,0 @@ const didRenderRef = (0, import_react.useRef)(false);

dist-cjs/lib/hooks/useLocalStore.js

@@ -47,3 +47,3 @@ "use strict";
         await client.db.storeAsset(asset.id, file);
-        return asset.id;
+        return { src: asset.id };
       },
@@ -50,0 +50,0 @@ resolve: async (asset) => {

dist-cjs/lib/options.js

@@ -68,4 +68,5 @@ "use strict";
   createTextOnCanvasDoubleClick: true,
-  exportProvider: import_react.Fragment
+  exportProvider: import_react.Fragment,
+  noteShapeResizeMode: "none"
 };
 //# sourceMappingURL=options.js.map

dist-cjs/lib/TldrawEditor.js

@@ -124,3 +124,4 @@ "use strict";
     user,
-    assets
+    assets,
+    migrations
   } = props;
@@ -135,3 +136,4 @@ const syncedStore = (0, import_useLocalStore.useLocalStore)({
     snapshot,
-    assets
+    assets,
+    migrations
   });
@@ -138,0 +140,0 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TldrawEditorWithLoadingStore, { ...props, store: syncedStore, user });

dist-cjs/lib/utils/sync/TLLocalSyncClient.js

@@ -153,3 +153,5 @@ "use strict";
         if (sessionStateSnapshot) {
-          (0, import_TLSessionStateSnapshot.loadSessionStateSnapshotIntoStore)(this.store, sessionStateSnapshot);
+          (0, import_TLSessionStateSnapshot.loadSessionStateSnapshotIntoStore)(this.store, sessionStateSnapshot, {
+            forceOverwrite: true
+          });
         }
@@ -156,0 +158,0 @@ }

dist-cjs/version.js

@@ -25,8 +25,8 @@ "use strict";
 module.exports = __toCommonJS(version_exports);
-const version = "3.8.0-canary.ab23d1d97da1";
+const version = "3.8.0-canary.ab782583b3ba";
 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"
 };
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.8.0-canary.ab23d1d97da1",
+  "version": "3.8.0-canary.ab782583b3ba",
   "author": {
@@ -48,10 +48,11 @@ "name": "tldraw Inc.",
   "dependencies": {
-    "@tldraw/state": "3.8.0-canary.ab23d1d97da1",
-    "@tldraw/state-react": "3.8.0-canary.ab23d1d97da1",
-    "@tldraw/store": "3.8.0-canary.ab23d1d97da1",
-    "@tldraw/tlschema": "3.8.0-canary.ab23d1d97da1",
-    "@tldraw/utils": "3.8.0-canary.ab23d1d97da1",
-    "@tldraw/validate": "3.8.0-canary.ab23d1d97da1",
+    "@tldraw/state": "3.8.0-canary.ab782583b3ba",
+    "@tldraw/state-react": "3.8.0-canary.ab782583b3ba",
+    "@tldraw/store": "3.8.0-canary.ab782583b3ba",
+    "@tldraw/tlschema": "3.8.0-canary.ab782583b3ba",
+    "@tldraw/utils": "3.8.0-canary.ab782583b3ba",
+    "@tldraw/validate": "3.8.0-canary.ab782583b3ba",
     "@types/core-js": "^2.5.5",
     "@use-gesture/react": "^10.2.27",
+    "canvas-size": "~2.0.0",
     "classnames": "^2.3.2",
@@ -73,2 +74,3 @@ "core-js": "^3.31.1",
     "@types/benchmark": "^2.1.2",
+    "@types/canvas-size": "^1.2.2",
     "@types/wicg-file-system-access": "^2020.9.5",
@@ -75,0 +77,0 @@ "benchmark": "^2.1.4",

src/index.ts

@@ -28,2 +28,3 @@ import { registerTldrawLibraryVersion } from '@tldraw/utils'
 } from '@tldraw/state-react'
+export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
@@ -186,2 +187,3 @@ // eslint-disable-next-line local/no-export-star
 	ShapeUtil,
+	type TLCropInfo,
 	type TLHandleDragInfo,
@@ -259,6 +261,9 @@ type TLResizeInfo,
 	type TLCameraOptions,
+	type TLExportType,
 	type TLImageExportOptions,
+	type TLSvgExportOptions,
 	type TLSvgOptions,
 } from './lib/editor/types/misc-types'
 export { type TLResizeHandle, type TLSelectionHandle } from './lib/editor/types/selection-types'
+export { getSvgAsImage } from './lib/exports/getSvgAsImage'
 export { tlenv } from './lib/globals/environment'
@@ -387,2 +392,3 @@ export { tlmenus } from './lib/globals/menus'
 export { dataUrlToFile, getDefaultCdnBaseUrl } from './lib/utils/assets'
+export { clampToBrowserMaxCanvasSize, type CanvasMaxSize } from './lib/utils/browserCanvasMaxSize'
 export {
@@ -389,0 +395,0 @@ debugFlags,

src/lib/config/createTLStore.ts

@@ -64,3 +64,5 @@ import { Signal } from '@tldraw/state'
 export const inlineBase64AssetStore: TLAssetStore = {
-	upload: (_, file) => FileHelpers.blobToDataUrl(file),
+	upload: async (_, file) => {
+		return { src: await FileHelpers.blobToDataUrl(file) }
+	},
 }
@@ -132,3 +134,3 @@
 		if (initialData) throw new Error('Cannot provide both initialData and snapshot')
-		loadSnapshot(store, rest.snapshot)
+		loadSnapshot(store, rest.snapshot, { forceOverwriteSessionState: true })
 	}
@@ -135,0 +137,0 @@

src/lib/editor/shapes/ShapeUtil.ts

@@ -8,2 +8,3 @@ /* eslint-disable @typescript-eslint/no-unused-vars */
 	TLShape,
+	TLShapeCrop,
 	TLShapePartial,
@@ -13,3 +14,3 @@ TLUnknownShape,
 import { ReactElement } from 'react'
-import { Box } from '../../primitives/Box'
+import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
@@ -425,2 +426,15 @@ import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 	/**
+	 * A callback called when a shape changes from a crop.
+	 *
+	 * @param shape - The shape at the start of the crop.
+	 * @param info - Info about the crop.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onCrop?(
+		shape: Shape,
+		info: TLCropInfo<Shape>
+	): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
+
+	/**
 	 * A callback called when some other shapes are dragged over this one.
@@ -623,2 +637,17 @@ *
 /**
+ * Info about a crop.
+ * @param handle - The handle being dragged.
+ * @param change - The distance the handle is moved.
+ * @param initialShape - The shape at the start of the resize.
+ * @public
+ */
+export interface TLCropInfo<T extends TLShape> {
+	handle: SelectionHandle
+	change: Vec
+	crop: TLShapeCrop
+	uncroppedSize: { w: number; h: number }
+	initialShape: T
+}
+
+/**
  * The type of resize.
@@ -625,0 +654,0 @@ *

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

@@ -11,13 +11,66 @@ import { BoxModel } from '@tldraw/tlschema'
 /** @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
+}
+
 /**
@@ -24,0 +77,0 @@ * @public

src/lib/hooks/useLocalStore.ts

@@ -40,3 +40,3 @@ import { TLAsset, TLAssetStore, TLStoreSnapshot } from '@tldraw/tlschema'
 				await client.db.storeAsset(asset.id, file)
-				return asset.id
+				return { src: asset.id }
 			},
@@ -43,0 +43,0 @@ resolve: async (asset) => {

src/lib/options.ts

@@ -69,2 +69,7 @@ import { ComponentType, Fragment } from 'react'
 	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'
 }
@@ -115,2 +120,3 @@
 	exportProvider: Fragment,
+	noteShapeResizeMode: 'none',
 } as const satisfies TldrawOptions

src/lib/utils/sync/TLLocalSyncClient.ts

@@ -199,3 +199,5 @@ import { Signal, transact } from '@tldraw/state'
 				if (sessionStateSnapshot) {
-					loadSessionStateSnapshotIntoStore(this.store, sessionStateSnapshot)
+					loadSessionStateSnapshotIntoStore(this.store, sessionStateSnapshot, {
+						forceOverwrite: true,
+					})
 				}
@@ -202,0 +204,0 @@ }

src/version.ts

 // 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',
 }

No alert changes

Improved metrics

Total package byte prevSize

6151649

increased by1.29%

Number of package files

875

increased by1.74%

Lines of code

85267

increased by1.32%

Worsened metrics

Dependency count

17

increased by6.25%

Dev dependency count

12

increased by9.09%

Dependency changes

• + Addedcanvas-size@~2.0.0

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Added@tldraw/[e-mail]782583b3ba(transitive)

• + Addedcanvas-size@2.0.0(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• - Removed@tldraw/[e-mail]23d1d97da1(transitive)

• Updated@tldraw/[e-mail]782583b3ba

• Updated@tldraw/[e-mail]782583b3ba

• Updated@tldraw/[e-mail]782583b3ba

• Updated@tldraw/[e-mail]782583b3ba

• Updated@tldraw/[e-mail]782583b3ba

• Updated@tldraw/[e-mail]782583b3ba