@tldraw/editor 3.16.0-canary.39bd199a7aa6 → 3.16.0-canary.3c51fb02c6a5

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
 	preventDefault,
@@ -16,9 +16,6 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
-			// Track the last screen point
-			let lastX: number, lastY: number
-
 			function onPointerDown(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 
@@ -44,35 +41,9 @@ export function useCanvasEvents() {
 				})
 			}
 
-			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
-
-				if (e.clientX === lastX && e.clientY === lastY) return
-				lastX = e.clientX
-				lastY = e.clientY
-
-				// For tools that benefit from a higher fidelity of events,
-				// we dispatch the coalesced events.
-				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
-				const events =
-					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
-						? e.nativeEvent.getCoalescedEvents()
-						: [e]
-				for (const singleEvent of events) {
-					editor.dispatch({
-						type: 'pointer',
-						target: 'canvas',
-						name: 'pointer_move',
-						...getPointerInfo(singleEvent),
-					})
-				}
-			}
-
 			function onPointerUp(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
-				lastX = e.clientX
-				lastY = e.clientY
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -158,7 +129,6 @@ export function useCanvasEvents() {
 
 			return {
 				onPointerDown,
-				onPointerMove,
 				onPointerUp,
 				onPointerEnter,
 				onPointerLeave,
@@ -169,8 +139,45 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor, currentTool]
+		[editor]
 	)
 
+	// onPointerMove is special: where we're only interested in the other events when they're
+	// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want
+	// the pointer position to be up to date regardless of whether it's over the tldraw canvas or
+	// not. So instead of returning a listener to be attached to the canvas, we directly attach a
+	// listener to the whole document instead.
+	useEffect(() => {
+		let lastX: number, lastY: number
+
+		function onPointerMove(e: PointerEvent) {
+			if ((e as any).isKilled) return
+			;(e as any).isKilled = true
+
+			if (e.clientX === lastX && e.clientY === lastY) return
+			lastX = e.clientX
+			lastY = e.clientY
+
+			// For tools that benefit from a higher fidelity of events,
+			// we dispatch the coalesced events.
+			// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+			const events =
+				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
+			for (const singleEvent of events) {
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_move',
+					...getPointerInfo(singleEvent),
+				})
+			}
+		}
+
+		document.body.addEventListener('pointermove', onPointerMove)
+		return () => {
+			document.body.removeEventListener('pointermove', onPointerMove)
+		}
+	}, [editor, currentTool])
+
 	return events
 }

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,4 +1,5 @@
 import crypto from 'crypto'
+import { vi } from 'vitest'
 import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
@@ -9,8 +10,9 @@ import {
 	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',

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,15 +86,15 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--space-2);
-		right: var(--space-2);
+		bottom: var(--tl-space-2);
+		right: var(--tl-space-2);
 		width: 96px;
 		height: 32px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		z-index: var(--layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
+		z-index: var(--tl-layer-watermark) !important;
+		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
 		opacity: 1;
 		border-radius: 5px;
 		pointer-events: all;
@@ -108,7 +108,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		height: 32px;
 		pointer-events: all;
 		cursor: inherit;
-		color: var(--color-text);
+		color: var(--tl-color-text);
 		opacity: .38;
 		border: 0;
 		padding: 0;
@@ -137,7 +137,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover {
-			background-color: var(--color-background);
+			background-color: var(--tl-color-background);
 			transition: background-color 0.2s ease-in-out;
 			transition-delay: 0.32s;
 		}

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 {
@@ -53,6 +55,7 @@ export interface TldrawOptions {
 	readonly flattenImageBoundsPadding: number
 	readonly laserDelayMs: number
 	readonly maxExportDelayMs: number
+	readonly tooltipDelayMs: number
 	/**
 	 * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before
 	 * they expire? Defaults to 3 minutes.
@@ -97,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: [
@@ -124,6 +131,7 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
+	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,

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

@@ -1,12 +1,13 @@
 import { createTLSchema } from '@tldraw/tlschema'
 import { openDB } from 'idb'
+import { vi } from 'vitest'
 import { hardReset } from './hardReset'
 import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
 
 const schema = createTLSchema({ shapes: {}, bindings: {} })
 describe('LocalIndexedDb', () => {
 	beforeEach(() => {
-		jest.useRealTimers()
+		vi.useRealTimers()
 	})
 	afterEach(async () => {
 		await hardReset({ shouldReload: false })

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

@@ -1,6 +1,6 @@
 import { PageRecordType } from '@tldraw/tlschema'
 import { IndexKey, promiseWithResolve } from '@tldraw/utils'
-import { afterEach } from 'node:test'
+import { Mock, vi } from 'vitest'
 import { createTLStore } from '../../config/createTLStore'
 import { TLLocalSyncClient } from './TLLocalSyncClient'
 import { hardReset } from './hardReset'
@@ -10,20 +10,20 @@ class BroadcastChannelMock {
 	constructor(_name: string) {
 		// noop
 	}
-	postMessage = jest.fn((_msg: any) => {
+	postMessage = vi.fn((_msg: any) => {
 		// noop
 	})
-	close = jest.fn(() => {
+	close = vi.fn(() => {
 		// noop
 	})
 }
 
 function testClient(channel = new BroadcastChannelMock('test')) {
 	const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
-	const onLoad = jest.fn(() => {
+	const onLoad = vi.fn(() => {
 		return
 	})
-	const onLoadError = jest.fn(() => {
+	const onLoadError = vi.fn(() => {
 		return
 	})
 	const client = new TLLocalSyncClient(
@@ -36,26 +36,26 @@ function testClient(channel = new BroadcastChannelMock('test')) {
 		channel
 	)
 
-	client.db.storeSnapshot = jest.fn(() => Promise.resolve())
-	client.db.storeChanges = jest.fn(() => Promise.resolve())
+	client.db.storeSnapshot = vi.fn(() => Promise.resolve())
+	client.db.storeChanges = vi.fn(() => Promise.resolve())
 
 	return {
-		client: client as { db: { storeSnapshot: jest.Mock; storeChanges: jest.Mock } } & typeof client,
+		client: client as { db: { storeSnapshot: Mock; storeChanges: Mock } } & typeof client,
 		store,
 		onLoad,
 		onLoadError,
 		channel,
 		tick: async () => {
-			jest.advanceTimersByTime(500)
+			vi.advanceTimersByTime(500)
 			await Promise.resolve()
 			await client.db.pending()
-			jest.advanceTimersByTime(500)
+			vi.advanceTimersByTime(500)
 			await Promise.resolve()
 		},
 	}
 }
 
-const reloadMock = jest.fn()
+const reloadMock = vi.fn()
 
 beforeAll(() => {
 	Object.defineProperty(window, 'location', {
@@ -65,14 +65,14 @@ beforeAll(() => {
 })
 
 beforeEach(() => {
-	jest.clearAllMocks()
+	vi.clearAllMocks()
 })
 
 afterEach(async () => {
 	await hardReset({ shouldReload: false })
 })
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 test('the client connects on instantiation, announcing its schema', async () => {
 	const { channel, tick } = testClient()
@@ -86,7 +86,7 @@ test('the client connects on instantiation, announcing its schema', async () =>
 test('when a client receives an announce with a newer schema version it reloads itself', async () => {
 	const { client, channel, onLoadError, tick } = testClient()
 	await tick()
-	jest.advanceTimersByTime(10000)
+	vi.advanceTimersByTime(10000)
 	expect(reloadMock).not.toHaveBeenCalled()
 	channel.onmessage?.({
 		data: {
@@ -104,7 +104,7 @@ test('when a client receives an announce with a newer schema version it reloads
 test('when a client receives an announce with a newer schema version shortly after loading it does not reload but instead reports a loadError', async () => {
 	const { client, channel, onLoadError, tick } = testClient()
 	await tick()
-	jest.advanceTimersByTime(1000)
+	vi.advanceTimersByTime(1000)
 	expect(reloadMock).not.toHaveBeenCalled()
 	channel.onmessage?.({
 		data: {

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.16.0-canary.39bd199a7aa6'
+export const version = '3.16.0-canary.3c51fb02c6a5'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-06T12:38:16.348Z',
-	patch: '2025-08-06T12:38:16.348Z',
+	minor: '2025-08-25T12:12:01.278Z',
+	patch: '2025-08-25T12:12:01.278Z',
 }

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

@@ -1,34 +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 nearestMultiple_exports = {};
-__export(nearestMultiple_exports, {
-  nearestMultiple: () => nearestMultiple
-});
-module.exports = __toCommonJS(nearestMultiple_exports);
-function gcd(a, b) {
-  return b === 0 ? a : gcd(b, a % b);
-}
-function nearestMultiple(float) {
-  const decimal = float.toString().split(".")[1];
-  if (!decimal) return 1;
-  const denominator = Math.pow(10, decimal.length);
-  const numerator = parseInt(decimal, 10);
-  return denominator / gcd(numerator, denominator);
-}
-//# sourceMappingURL=nearestMultiple.js.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/nearestMultiple.ts"],
-  "sourcesContent": ["// Euclidean algorithm to find the GCD\nfunction gcd(a: number, b: number): number {\n\treturn b === 0 ? a : gcd(b, a % b)\n}\n\n// Returns the lowest value that the given number can be multiplied by to reach an integer\nexport function nearestMultiple(float: number) {\n\tconst decimal = float.toString().split('.')[1]\n\tif (!decimal) return 1\n\tconst denominator = Math.pow(10, decimal.length)\n\tconst numerator = parseInt(decimal, 10)\n\treturn denominator / gcd(numerator, denominator)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,SAAS,IAAI,GAAW,GAAmB;AAC1C,SAAO,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AAClC;AAGO,SAAS,gBAAgB,OAAe;AAC9C,QAAM,UAAU,MAAM,SAAS,EAAE,MAAM,GAAG,EAAE,CAAC;AAC7C,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,cAAc,KAAK,IAAI,IAAI,QAAQ,MAAM;AAC/C,QAAM,YAAY,SAAS,SAAS,EAAE;AACtC,SAAO,cAAc,IAAI,WAAW,WAAW;AAChD;",
-  "names": []
-}

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

@@ -1,14 +0,0 @@
-function gcd(a, b) {
-  return b === 0 ? a : gcd(b, a % b);
-}
-function nearestMultiple(float) {
-  const decimal = float.toString().split(".")[1];
-  if (!decimal) return 1;
-  const denominator = Math.pow(10, decimal.length);
-  const numerator = parseInt(decimal, 10);
-  return denominator / gcd(numerator, denominator);
-}
-export {
-  nearestMultiple
-};
-//# sourceMappingURL=nearestMultiple.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/nearestMultiple.ts"],
-  "sourcesContent": ["// Euclidean algorithm to find the GCD\nfunction gcd(a: number, b: number): number {\n\treturn b === 0 ? a : gcd(b, a % b)\n}\n\n// Returns the lowest value that the given number can be multiplied by to reach an integer\nexport function nearestMultiple(float: number) {\n\tconst decimal = float.toString().split('.')[1]\n\tif (!decimal) return 1\n\tconst denominator = Math.pow(10, decimal.length)\n\tconst numerator = parseInt(decimal, 10)\n\treturn denominator / gcd(numerator, denominator)\n}\n"],
-  "mappings": "AACA,SAAS,IAAI,GAAW,GAAmB;AAC1C,SAAO,MAAM,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AAClC;AAGO,SAAS,gBAAgB,OAAe;AAC9C,QAAM,UAAU,MAAM,SAAS,EAAE,MAAM,GAAG,EAAE,CAAC;AAC7C,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,cAAc,KAAK,IAAI,IAAI,QAAQ,MAAM;AAC/C,QAAM,YAAY,SAAS,SAAS,EAAE;AACtC,SAAO,cAAc,IAAI,WAAW,WAAW;AAChD;",
-  "names": []
-}

package/src/lib/utils/nearestMultiple.ts

@@ -1,13 +0,0 @@
-// Euclidean algorithm to find the GCD
-function gcd(a: number, b: number): number {
-	return b === 0 ? a : gcd(b, a % b)
-}
-
-// Returns the lowest value that the given number can be multiplied by to reach an integer
-export function nearestMultiple(float: number) {
-	const decimal = float.toString().split('.')[1]
-	if (!decimal) return 1
-	const denominator = Math.pow(10, decimal.length)
-	const numerator = parseInt(decimal, 10)
-	return denominator / gcd(numerator, denominator)
-}