@tldraw/editor 3.16.0-canary.e9c30b532b82 → 3.16.0-canary.eb9a487b3293

package/src/lib/exports/getSvgJsx.tsx

@@ -57,33 +57,21 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		.filter(({ id }) => shapeIdsToInclude.has(id))
 
 	// --- Common bounding box of all shapes
+	const singleFrameShapeId =
+		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
+			? ids[0]
+			: null
+
 	let bbox: null | Box = null
 	if (opts.bounds) {
-		bbox = opts.bounds
+		bbox = opts.bounds.clone().expandBy(padding)
 	} else {
-		for (const { id } of renderingShapes) {
-			const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
-			if (!maskedPageBounds) continue
-			if (bbox) {
-				bbox.union(maskedPageBounds)
-			} else {
-				bbox = maskedPageBounds.clone()
-			}
-		}
+		bbox = getExportDefaultBounds(editor, renderingShapes, padding, singleFrameShapeId)
 	}
 
 	// no unmasked shapes to export
 	if (!bbox) return
 
-	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
-			? ids[0]
-			: null
-	if (!singleFrameShapeId) {
-		// Expand by an extra 32 pixels
-		bbox.expandBy(padding)
-	}
-
 	// We want the svg image to be BIGGER THAN USUAL to account for image quality
 	const w = bbox.width * scale
 	const h = bbox.height * scale
@@ -120,6 +108,75 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 	return { jsx: svg, width: w, height: h, exportDelay }
 }
 
+/**
+ * Calculates the default bounds for an SVG export. This function handles:
+ * 1. Computing masked page bounds for each shape
+ * 2. Container logic: if a shape is marked as an export bounds container and it
+ *    contains all other shapes, use its bounds and skip padding
+ * 3. Otherwise, create a union of all shape bounds and apply padding
+ *
+ * The container logic is useful for cases like annotating on an image - if the image
+ * contains all annotations, we want to export exactly the image bounds without extra padding.
+ *
+ * @param editor - The editor instance
+ * @param renderingShapes - The shapes to include in the export
+ * @param padding - Padding to add around the bounds (only applied if no container bounds)
+ * @param singleFrameShapeId - If exporting a single frame, this is its ID (skips padding)
+ * @returns The calculated bounds box, or null if no shapes to export
+ */
+export function getExportDefaultBounds(
+	editor: Editor,
+	renderingShapes: TLRenderingShape[],
+	padding: number,
+	singleFrameShapeId: TLShapeId | null
+) {
+	let isBoundedByContainer = false
+	let bbox: null | Box = null
+
+	for (const { id } of renderingShapes) {
+		const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
+		if (!maskedPageBounds) continue
+
+		// Check if this shape is an export bounds container (e.g., an image being annotated)
+		const shape = editor.getShape(id)!
+		const isContainer = editor.getShapeUtil(shape).isExportBoundsContainer(shape)
+
+		if (bbox) {
+			// Container logic: if this is a container and it contains all shapes processed so far,
+			// use the container's bounds instead of the union. This prevents extra padding around
+			// things like annotated images.
+			if (isContainer && Box.ContainsApproximately(maskedPageBounds, bbox)) {
+				isBoundedByContainer = true
+				bbox = maskedPageBounds.clone()
+			} else {
+				// If we were previously bounded by a container but this shape extends outside it,
+				// we're no longer bounded by a container
+				if (isBoundedByContainer && !Box.ContainsApproximately(bbox, maskedPageBounds)) {
+					isBoundedByContainer = false
+				}
+				// Expand the bounding box to include this shape
+				bbox.union(maskedPageBounds)
+			}
+		} else {
+			// First shape sets the initial bounds
+			isBoundedByContainer = isContainer
+			bbox = maskedPageBounds.clone()
+		}
+	}
+
+	// No unmasked shapes to export
+	if (!bbox) return null
+
+	// Only apply padding if:
+	// - Not exporting a single frame (frames have their own padding rules)
+	// - Not bounded by a container (containers define their own bounds precisely)
+	if (!singleFrameShapeId && !isBoundedByContainer) {
+		bbox.expandBy(padding)
+	}
+
+	return bbox
+}
+
 function SvgExport({
 	editor,
 	preserveAspectRatio,

package/src/lib/hooks/useCanvasEvents.ts

@@ -79,15 +79,15 @@ export function useCanvasEvents() {
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
+				const editingShapeId = editor.getEditingShape()?.id
 				if (
+					// if the target is not inside the editing shape
+					!(editingShapeId && e.target.closest(`[data-shape-id="${editingShapeId}"]`)) &&
+					// and the target is not an clickable element
 					e.target.tagName !== 'A' &&
+					// or a TextArea.tsx ?
 					e.target.tagName !== 'TEXTAREA' &&
-					!e.target.isContentEditable &&
-					// When in EditingShape state, we are actually clicking on a 'DIV'
-					// not A/TEXTAREA/contenteditable element yet. So, to preserve cursor position
-					// for edit mode on mobile we need to not preventDefault.
-					// TODO: Find out if we still need this preventDefault in general though.
-					!(editor.getEditingShape() && e.target.className.includes('tl-text-content'))
+					!e.target.isContentEditable
 				) {
 					preventDefault(e)
 				}

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,14 +1,17 @@
 import { RefObject, useEffect } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
+import { useMaybeEditor } from './useEditor'
 
 /** @public */
 export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
+	const editor = useMaybeEditor()
 
 	useEffect(() => {
 		function onMouseOver(e: MouseEvent) {
+			if (!editor?.getInstanceState().isFocused) return
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
@@ -25,5 +28,5 @@ export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 		return () => {
 			elm.removeEventListener('mouseover', onMouseOver)
 		}
-	}, [container, ref])
+	}, [container, editor, ref])
 }

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -1,14 +1,19 @@
 import { RefObject, useEffect } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
+import { useMaybeEditor } from './useEditor'
 
 /** @public */
 export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
+	const editor = useMaybeEditor()
 
 	useEffect(() => {
 		function onWheel(e: WheelEvent) {
+			// Only pass through wheel events if the editor is focused
+			if (!editor?.getInstanceState().isFocused) return
+
 			if ((e as any).isSpecialRedispatchedEvent) return
 
 			// if the element is scrollable, don't redispatch the event
@@ -32,5 +37,5 @@ export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
 		return () => {
 			elm.removeEventListener('wheel', onWheel)
 		}
-	}, [container, ref])
+	}, [container, editor, ref])
 }

package/src/lib/license/LicenseManager.test.ts

@@ -1,16 +1,18 @@
 import crypto from 'crypto'
+import { vi } from 'vitest'
 import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
 	FLAGS,
-	isEditorUnlicensed,
+	getLicenseState,
 	LicenseManager,
 	PROPERTIES,
 	ValidLicenseKeyResult,
 } from './LicenseManager'
 
-jest.mock('../../version', () => {
+vi.mock('../../version', () => {
 	return {
+		version: '3.15.1',
 		publishDates: {
 			major: '2024-06-28T10:56:07.893Z',
 			minor: '2024-07-02T16:49:50.397Z',
@@ -485,115 +487,122 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 	}
 }
 
-describe(isEditorUnlicensed, () => {
-	it('shows watermark when license is not parseable', () => {
+describe('getLicenseState', () => {
+	it('returns "unlicensed" for unparseable license', () => {
 		const licenseResult = getDefaultLicenseResult({
 			// @ts-ignore
 			isLicenseParseable: false,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(true)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('shows watermark when domain is not valid', () => {
+	it('returns "unlicensed" for invalid domain in production', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isDomainValid: false,
+			isDevelopment: false,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(true)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('shows watermark when annual license has expired', () => {
+	it('returns "licensed" for invalid domain in development mode', () => {
+		const licenseResult = getDefaultLicenseResult({
+			isDomainValid: false,
+			isDevelopment: true,
+		})
+		expect(getLicenseState(licenseResult)).toBe('licensed')
+	})
+
+	it('returns "unlicensed" for expired annual license', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isAnnualLicense: true,
 			isAnnualLicenseExpired: true,
+			isInternalLicense: false,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(true)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('shows watermark when annual license has expired, even if dev mode', () => {
+	it('returns "unlicensed" for expired annual license even in dev mode', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isAnnualLicense: true,
 			isAnnualLicenseExpired: true,
 			isDevelopment: true,
+			isInternalLicense: false,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(true)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('shows watermark when perpetual license has expired', () => {
+	it('returns "unlicensed" for expired perpetual license', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isPerpetualLicense: true,
 			isPerpetualLicenseExpired: true,
+			isInternalLicense: false,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(true)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('does not show watermark when license is valid and not expired', () => {
+	it('returns "internal-expired" for expired internal annual license with valid domain', () => {
+		const expiryDate = new Date(2023, 1, 1)
 		const licenseResult = getDefaultLicenseResult({
 			isAnnualLicense: true,
-			isAnnualLicenseExpired: false,
-			isInternalLicense: false,
+			isAnnualLicenseExpired: true,
+			isInternalLicense: true,
+			isDomainValid: true,
+			expiryDate,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
+		expect(getLicenseState(licenseResult)).toBe('internal-expired')
 	})
 
-	it('does not show watermark when perpetual license is valid and not expired', () => {
+	it('returns "internal-expired" for expired internal perpetual license with valid domain', () => {
+		const expiryDate = new Date(2023, 1, 1)
 		const licenseResult = getDefaultLicenseResult({
 			isPerpetualLicense: true,
-			isPerpetualLicenseExpired: false,
-			isInternalLicense: false,
-		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
-	})
-
-	it('does not show watermark when in development mode', () => {
-		const licenseResult = getDefaultLicenseResult({
-			isDevelopment: true,
+			isPerpetualLicenseExpired: true,
+			isInternalLicense: true,
+			isDomainValid: true,
+			expiryDate,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
+		expect(getLicenseState(licenseResult)).toBe('internal-expired')
 	})
 
-	it('does not show watermark when license is parseable and domain is valid', () => {
+	it('returns "unlicensed" for expired internal license with invalid domain', () => {
+		const expiryDate = new Date(2023, 1, 1)
 		const licenseResult = getDefaultLicenseResult({
-			isLicenseParseable: true,
-			isDomainValid: true,
+			isAnnualLicense: true,
+			isAnnualLicenseExpired: true,
+			isInternalLicense: true,
+			isDomainValid: false,
+			expiryDate,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
+		expect(getLicenseState(licenseResult)).toBe('unlicensed')
 	})
 
-	it('does not show watermark when license is parseable and domain is not valid and dev mode', () => {
+	it('returns "licensed-with-watermark" for watermarked license', () => {
 		const licenseResult = getDefaultLicenseResult({
-			isLicenseParseable: true,
-			isDomainValid: false,
-			isDevelopment: true,
+			isLicensedWithWatermark: true,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
+		expect(getLicenseState(licenseResult)).toBe('licensed-with-watermark')
 	})
 
-	it('throws when an internal annual license has expired', () => {
-		const expiryDate = new Date(2023, 1, 1)
+	it('returns "licensed" for valid annual license', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isAnnualLicense: true,
-			isAnnualLicenseExpired: true,
-			isInternalLicense: true,
-			expiryDate,
+			isAnnualLicenseExpired: false,
 		})
-		expect(() => isEditorUnlicensed(licenseResult)).toThrow(/License: Internal license expired/)
+		expect(getLicenseState(licenseResult)).toBe('licensed')
 	})
 
-	it('throws when an internal perpetual license has expired', () => {
-		const expiryDate = new Date(2023, 1, 1)
+	it('returns "licensed" for valid perpetual license', () => {
 		const licenseResult = getDefaultLicenseResult({
 			isPerpetualLicense: true,
-			isPerpetualLicenseExpired: true,
-			isInternalLicense: true,
-			expiryDate,
+			isPerpetualLicenseExpired: false,
 		})
-		expect(() => isEditorUnlicensed(licenseResult)).toThrow(/License: Internal license expired/)
+		expect(getLicenseState(licenseResult)).toBe('licensed')
 	})
 
-	it('shows watermark when license has that flag specified', () => {
+	it('returns "licensed" for valid license in development mode', () => {
 		const licenseResult = getDefaultLicenseResult({
-			isLicensedWithWatermark: true,
+			isDevelopment: true,
 		})
-		expect(isEditorUnlicensed(licenseResult)).toBe(false)
+		expect(getLicenseState(licenseResult)).toBe('licensed')
 	})
 })

package/src/lib/license/LicenseManager.ts

@@ -33,6 +33,14 @@ export interface LicenseInfo {
 	flags: number
 	expiryDate: string
 }
+
+/** @internal */
+export type LicenseState =
+	| 'pending'
+	| 'licensed'
+	| 'licensed-with-watermark'
+	| 'unlicensed'
+	| 'internal-expired'
 /** @internal */
 export type InvalidLicenseReason =
 	| 'invalid-license-key'
@@ -73,10 +81,7 @@ export class LicenseManager {
 	public isDevelopment: boolean
 	public isTest: boolean
 	public isCryptoAvailable: boolean
-	state = atom<'pending' | 'licensed' | 'licensed-with-watermark' | 'unlicensed'>(
-		'license state',
-		'pending'
-	)
+	state = atom<LicenseState>('license state', 'pending')
 	public verbose = true
 
 	constructor(
@@ -89,21 +94,20 @@ export class LicenseManager {
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
-		this.getLicenseFromKey(licenseKey).then((result) => {
-			const isUnlicensed = isEditorUnlicensed(result)
+		this.getLicenseFromKey(licenseKey)
+			.then((result) => {
+				const licenseState = getLicenseState(result)
 
-			if (!this.isDevelopment && isUnlicensed) {
-				fetch(WATERMARK_TRACK_SRC)
-			}
+				if (!this.isDevelopment && licenseState === 'unlicensed') {
+					fetch(WATERMARK_TRACK_SRC)
+				}
 
-			if (isUnlicensed) {
+				this.state.set(licenseState)
+			})
+			.catch((error) => {
+				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
-			} else if ((result as ValidLicenseKeyResult).isLicensedWithWatermark) {
-				this.state.set('licensed-with-watermark')
-			} else {
-				this.state.set('licensed')
-			}
-		})
+			})
 	}
 
 	private getIsDevelopment(testEnvironment?: TestEnvironment) {
@@ -367,15 +371,19 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
-export function isEditorUnlicensed(result: LicenseFromKeyResult) {
-	if (!result.isLicenseParseable) return true
-	if (!result.isDomainValid && !result.isDevelopment) return true
+export function getLicenseState(result: LicenseFromKeyResult): LicenseState {
+	if (!result.isLicenseParseable) return 'unlicensed'
+	if (!result.isDomainValid && !result.isDevelopment) return 'unlicensed'
 	if (result.isPerpetualLicenseExpired || result.isAnnualLicenseExpired) {
-		if (result.isInternalLicense) {
-			throw new Error('License: Internal license expired.')
-		}
-		return true
+		// Check if it's an expired internal license with valid domain
+		const internalExpired = result.isInternalLicense && result.isDomainValid
+		return internalExpired ? 'internal-expired' : 'unlicensed'
+	}
+
+	// License is valid, determine if it has watermark
+	if (result.isLicensedWithWatermark) {
+		return 'licensed-with-watermark'
 	}
 
-	return false
+	return 'licensed'
 }

package/src/lib/license/LicenseProvider.tsx

@@ -1,3 +1,4 @@
+import { useValue } from '@tldraw/state-react'
 import { createContext, ReactNode, useContext, useState } from 'react'
 import { LicenseManager } from './LicenseManager'
 
@@ -16,5 +17,12 @@ export function LicenseProvider({
 	children: ReactNode
 }) {
 	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	const licenseState = useValue(licenseManager.state)
+
+	// If internal license has expired, don't render the editor at all
+	if (licenseState === 'internal-expired') {
+		return <div data-testid="tl-license-expired" style={{ display: 'none' }} />
+	}
+
 	return <LicenseContext.Provider value={licenseManager}>{children}</LicenseContext.Provider>
 }

package/src/lib/license/Watermark.test.tsx

@@ -1,10 +1,11 @@
 import { act, render, waitFor } from '@testing-library/react'
+import { vi } from 'vitest'
 import { TldrawEditor } from '../TldrawEditor'
 import { LicenseManager } from './LicenseManager'
 
 let mockLicenseState = 'unlicensed'
 
-jest.mock('./useLicenseManagerState', () => ({
+vi.mock('./useLicenseManagerState', () => ({
 	useLicenseManagerState: () => mockLicenseState,
 }))
 

package/src/lib/license/Watermark.tsx

@@ -86,8 +86,8 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--tl-space-2);
-		right: var(--tl-space-2);
+		bottom: max(var(--tl-space-2), env(safe-area-inset-bottom));
+		right: max(var(--tl-space-2), env(safe-area-inset-right));
 		width: 96px;
 		height: 32px;
 		display: flex;
@@ -116,12 +116,12 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	}
 
 	.${className}[data-debug='true'] {
-		bottom: 46px;
+		bottom: max(46px, env(safe-area-inset-bottom));
 	}
 
 	.${className}[data-mobile='true'] {
 		border-radius: 4px 0px 0px 4px;
-		right: -2px;
+		right: max(-2px, calc(env(safe-area-inset-right) - 2px));
 		width: 8px;
 		height: 48px;
 	}

package/src/lib/license/useLicenseManagerState.ts

@@ -1,7 +1,7 @@
 import { useValue } from '@tldraw/state-react'
-import { LicenseManager } from './LicenseManager'
+import { LicenseManager, LicenseState } from './LicenseManager'
 
 /** @internal */
-export function useLicenseManagerState(licenseManager: LicenseManager) {
+export function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {
 	return useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])
 }

package/src/lib/options.ts

@@ -27,6 +27,8 @@ export interface TldrawOptions {
 	readonly multiClickDurationMs: number
 	readonly coarseDragDistanceSquared: number
 	readonly dragDistanceSquared: number
+	readonly uiDragDistanceSquared: number
+	readonly uiCoarseDragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
 	readonly gridSteps: readonly {
@@ -98,6 +100,10 @@ export const defaultTldrawOptions = {
 	multiClickDurationMs: 200,
 	coarseDragDistanceSquared: 36, // 6 squared
 	dragDistanceSquared: 16, // 4 squared
+	uiDragDistanceSquared: 16, // 4 squared
+	// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger
+	// threshold than usual here to try and prevent accidental drags.
+	uiCoarseDragDistanceSquared: 625, // 25 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
 	gridSteps: [