@tldraw/editor 3.11.0-canary.f529c521e249 → 3.11.1

package/src/lib/hooks/useGestureEvents.ts

@@ -135,7 +135,6 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 		let initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts
 		let initZoom = 1 // the browser's zoom level when the pinch starts
-		let currZoom = 1 // the current zoom level according to the pinch gesture recognizer
 		let currDistanceBetweenFingers = 0
 		const initPointBetweenFingers = new Vec()
 		const prevPointBetweenFingers = new Vec()
@@ -239,7 +238,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 			switch (pinchState) {
 				case 'zooming': {
-					currZoom = offset[0]
+					const currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 					editor.dispatch({
 						type: 'pinch',
@@ -278,7 +277,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			if (event instanceof WheelEvent) return
 			if (!(event.target === elm || elm?.contains(event.target as Node))) return
 
-			const scale = offset[0]
+			const scale = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 			pinchState = 'not sure'
 
@@ -309,14 +308,21 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 		target: ref,
 		eventOptions: { passive: false },
 		pinch: {
-			from: () => [editor.getZoomLevel(), 0], // Return the camera z to use when pinch starts
+			from: () => {
+				const { zoomSpeed } = editor.getCameraOptions()
+				const level = editor.getZoomLevel() ** (1 / zoomSpeed)
+				return [level, 0]
+			}, // Return the camera z to use when pinch starts
 			scaleBounds: () => {
 				const baseZoom = editor.getBaseZoom()
-				const zoomSteps = editor.getCameraOptions().zoomSteps
+				const { zoomSteps, zoomSpeed } = editor.getCameraOptions()
 				const zoomMin = zoomSteps[0] * baseZoom
 				const zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom
 
-				return { from: editor.getZoomLevel(), max: zoomMax, min: zoomMin }
+				return {
+					max: zoomMax ** (1 / zoomSpeed),
+					min: zoomMin ** (1 / zoomSpeed),
+				}
 			},
 		},
 	})

package/src/lib/hooks/useLocalStore.ts

@@ -52,6 +52,9 @@ export function useLocalStore(
 
 				return asset.props.src
 			},
+			remove: async (assetIds) => {
+				await client.db.removeAssets(assetIds)
+			},
 			...rest.assets,
 		}
 

package/src/lib/license/Watermark.tsx

@@ -85,6 +85,7 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 })
 
 const LicenseStyles = memo(function LicenseStyles() {
+	const editor = useEditor()
 	const className = LicenseManager.className
 
 	const CSS = `/* ------------------- SEE LICENSE -------------------
@@ -156,8 +157,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
 			animation: delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
+
+		.${className} > a:focus-visible {
+			opacity: 1;
+		}
 	}
 
+
 	@keyframes delayed_link {
 		0% {
 			cursor: inherit;
@@ -171,5 +177,5 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 	}`
 
-	return <style>{CSS}</style>
+	return <style nonce={editor.options.nonce}>{CSS}</style>
 })

package/src/lib/options.ts

@@ -75,6 +75,11 @@ export interface TldrawOptions {
 	 * away and let the fonts load in in the background.
 	 */
 	readonly maxFontsToLoadBeforeRender: number
+	/**
+	 * If you have a CSP policy that blocks inline styles, you can use this prop to provide a
+	 * nonce to use in the editor's styles.
+	 */
+	readonly nonce: string | undefined
 }
 
 /** @public */
@@ -121,4 +126,5 @@ export const defaultTldrawOptions = {
 	exportProvider: Fragment,
 	enableToolbarKeyboardShortcuts: true,
 	maxFontsToLoadBeforeRender: Infinity,
+	nonce: undefined,
 } as const satisfies TldrawOptions

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

@@ -303,6 +303,15 @@ export class LocalIndexedDb {
 			await assetsStore.put(blob, assetId)
 		})
 	}
+
+	async removeAssets(assetId: string[]) {
+		await this.tx('readwrite', [Table.Assets], async (tx) => {
+			const assetsStore = tx.objectStore(Table.Assets)
+			for (const id of assetId) {
+				await assetsStore.delete(id)
+			}
+		})
+	}
 }
 
 /** @internal */

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.11.0-canary.f529c521e249'
+export const version = '3.11.1'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-11T14:54:49.451Z',
-	patch: '2025-03-11T14:54:49.451Z',
+	minor: '2025-03-20T14:45:59.625Z',
+	patch: '2025-04-03T10:34:39.217Z',
 }