@tldraw/editor 4.1.1 → 4.2.0-canary.025846da88b7

package/src/lib/components/MenuClickCapture.tsx

@@ -3,6 +3,7 @@ import { PointerEvent, useCallback, useRef, useState } from 'react'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useEditor } from '../hooks/useEditor'
 import { Vec } from '../primitives/Vec'
+import { getPointerInfo } from '../utils/getPointerInfo'
 
 /**
  * When a menu is open, this component prevents the user from interacting with the canvas.
@@ -39,35 +40,51 @@ export function MenuClickCapture() {
 					isDragging: false,
 					start: new Vec(e.clientX, e.clientY),
 				}
+				rDidAPointerDownAndDragWhileMenuWasOpen.current = false
 			}
 			editor.menus.clearOpenMenus()
 		},
 		[editor]
 	)
 
+	const rDidAPointerDownAndDragWhileMenuWasOpen = useRef(false)
+
 	const handlePointerMove = useCallback(
 		(e: PointerEvent) => {
 			// Do nothing unless we're pointing
 			if (!rPointerState.current.isDown) return
 
-			if (
-				// We're pointing, but are we dragging?
-				Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
-				editor.options.dragDistanceSquared
-			) {
-				// Wehaddaeventitsadrag
-				rPointerState.current = {
-					...rPointerState.current,
-					isDown: true,
-					isDragging: true,
+			// call the onPointerDown with the original pointer position
+			const { x, y } = rPointerState.current.start
+
+			if (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {
+				if (
+					// We're pointing, but are we dragging?
+					Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
+					editor.options.dragDistanceSquared
+				) {
+					rDidAPointerDownAndDragWhileMenuWasOpen.current = true
+					// Wehaddaeventitsadrag
+					rPointerState.current = {
+						...rPointerState.current,
+						isDown: true,
+						isDragging: true,
+					}
+					canvasEvents.onPointerDown?.({
+						...e,
+						clientX: x,
+						clientY: y,
+						button: 0,
+					})
 				}
-				// call the onPointerDown with the original pointer position
-				const { x, y } = rPointerState.current.start
-				canvasEvents.onPointerDown?.({
-					...e,
-					clientX: x,
-					clientY: y,
-					button: 0,
+			}
+
+			if (rDidAPointerDownAndDragWhileMenuWasOpen.current) {
+				editor.dispatch({
+					type: 'pointer',
+					target: 'canvas',
+					name: 'pointer_move',
+					...getPointerInfo(editor, e),
 				})
 			}
 		},
@@ -86,6 +103,7 @@ export function MenuClickCapture() {
 				isDragging: false,
 				start: new Vec(e.clientX, e.clientY),
 			}
+			rDidAPointerDownAndDragWhileMenuWasOpen.current = false
 		},
 		[canvasEvents]
 	)

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -172,17 +172,17 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<LiveCollaborators />
 					</div>
 				</div>
-				<div
-					className="tl-canvas__in-front"
-					onPointerDown={editor.markEventAsHandled}
-					onPointerUp={editor.markEventAsHandled}
-					onTouchStart={editor.markEventAsHandled}
-					onTouchEnd={editor.markEventAsHandled}
-				>
-					<InFrontOfTheCanvasWrapper />
-				</div>
 				<MovingCameraHitTestBlocker />
 			</div>
+			<div
+				className="tl-canvas__in-front"
+				onPointerDown={editor.markEventAsHandled}
+				onPointerUp={editor.markEventAsHandled}
+				onTouchStart={editor.markEventAsHandled}
+				onTouchEnd={editor.markEventAsHandled}
+			>
+				<InFrontOfTheCanvasWrapper />
+			</div>
 			<MenuClickCapture />
 		</>
 	)

package/src/lib/editor/Editor.ts

@@ -837,6 +837,35 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly root: StateNode
 
+	/**
+	 * Set a tool. Useful if you need to add a tool to the state chart on demand,
+	 * after the editor has already been initialized.
+	 *
+	 * @param Tool - The tool to set.
+	 *
+	 * @public
+	 */
+	setTool(Tool: TLStateNodeConstructor) {
+		if (hasOwnProperty(this.root.children!, Tool.id)) {
+			throw Error(`Can't override tool with id "${Tool.id}"`)
+		}
+		this.root.children![Tool.id] = new Tool(this, this.root)
+	}
+
+	/**
+	 * Remove a tool. Useful if you need to remove a tool from the state chart on demand,
+	 * after the editor has already been initialized.
+	 *
+	 * @param Tool - The tool to delete.
+	 *
+	 * @public
+	 */
+	removeTool(Tool: TLStateNodeConstructor) {
+		if (hasOwnProperty(this.root.children!, Tool.id)) {
+			delete this.root.children![Tool.id]
+		}
+	}
+
 	/**
 	 * A set of functions to call when the app is disposed.
 	 *

package/src/lib/editor/derivations/parentsToChildren.ts

@@ -1,6 +1,6 @@
 import { Computed, computed, isUninitialized, RESET_VALUE } from '@tldraw/state'
 import { CollectionDiff, RecordsDiff } from '@tldraw/store'
-import { isShape, TLParentId, TLRecord, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema'
+import { isShape, TLParentId, TLRecord, TLShapeId, TLStore } from '@tldraw/tlschema'
 import { compact, sortByIndex } from '@tldraw/utils'
 
 type ParentShapeIdsToChildShapeIds = Record<TLParentId, TLShapeId[]>
@@ -11,17 +11,11 @@ function fromScratch(
 ) {
 	const result: ParentShapeIdsToChildShapeIds = {}
 	const shapeIds = shapeIdsQuery.get()
-	const shapes = Array(shapeIds.size) as TLShape[]
-	shapeIds.forEach((id) => shapes.push(store.get(id)!))
-
-	// Sort the shapes by index
-	shapes.sort(sortByIndex)
+	const sortedShapes = Array.from(shapeIds, (id) => store.get(id)!).sort(sortByIndex)
 
 	// Populate the result object with an array for each parent.
-	shapes.forEach((shape) => {
-		if (!result[shape.parentId]) {
-			result[shape.parentId] = []
-		}
+	sortedShapes.forEach((shape) => {
+		result[shape.parentId] ??= []
 		result[shape.parentId].push(shape.id)
 	})
 

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,6 +1,7 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
+import { tlenv } from '../globals/environment'
 import { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
@@ -161,8 +162,14 @@ export function useCanvasEvents() {
 			// 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.
+			// Specifically, in local mode (non-https) mode, iOS does not `useCoalescedEvents`
+			// so it appears like the ink is working locally, when really it's just that `useCoalescedEvents`
+			// is disabled. The intent here is to have `useCoalescedEvents` disabled for iOS.
 			const events =
-				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
+				!tlenv.isIos && currentTool.useCoalescedEvents && e.getCoalescedEvents
+					? e.getCoalescedEvents()
+					: [e]
+
 			for (const singleEvent of events) {
 				editor.dispatch({
 					type: 'pointer',

package/src/lib/license/LicenseManager.ts

@@ -171,7 +171,16 @@ export class LicenseManager {
 		url.searchParams.set('license_type', trackType)
 		if ('license' in result) {
 			url.searchParams.set('license_id', result.license.id)
+			const sku = this.isFlagEnabled(result.license.flags, FLAGS.EVALUATION_LICENSE)
+				? 'evaluation'
+				: this.isFlagEnabled(result.license.flags, FLAGS.ANNUAL_LICENSE)
+					? 'annual'
+					: this.isFlagEnabled(result.license.flags, FLAGS.PERPETUAL_LICENSE)
+						? 'perpetual'
+						: 'unknown'
+			url.searchParams.set('sku', sku)
 		}
+		url.searchParams.set('url', window.location.href)
 		if (process.env.NODE_ENV) {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}

package/src/lib/license/Watermark.tsx

@@ -70,7 +70,7 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 					preventDefault(e)
 				}}
 				title="The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing."
-				onClick={() => runtime.openWindow(url, '_blank')}
+				onClick={() => runtime.openWindow(url, '_blank', true)} // allow referrer
 			>
 				Get a license for production
 			</button>

package/src/lib/utils/debug-flags.ts

@@ -92,7 +92,8 @@ if (typeof Element !== 'undefined') {
 
 // --- IMPLEMENTATION ---
 // you probably don't need to read this if you're just using the debug values system
-function createDebugValue<T>(
+/** @public */
+export function createDebugValue<T>(
 	name: string,
 	{
 		defaults,
@@ -193,7 +194,7 @@ function getDefaultValue<T>(def: DebugFlagDef<T>): T {
 	}
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlagDefaults<T> {
 	development?: T
 	staging?: T
@@ -201,14 +202,14 @@ export interface DebugFlagDefaults<T> {
 	all: T
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlagDef<T> {
 	name: string
 	defaults: DebugFlagDefaults<T>
 	shouldStoreForSession: boolean
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlag<T> extends DebugFlagDef<T>, Atom<T> {
 	reset(): void
 }

package/src/lib/utils/runtime.ts

@@ -1,11 +1,11 @@
 /** @public */
 export const runtime: {
-	openWindow(url: string, target: string): void
+	openWindow(url: string, target: string, allowReferrer?: boolean): void
 	refreshPage(): void
 	hardReset(): void
 } = {
-	openWindow(url, target) {
-		window.open(url, target, 'noopener noreferrer')
+	openWindow(url, target, allowReferrer = false) {
+		return window.open(url, target, allowReferrer ? 'noopener' : 'noopener noreferrer')
 	},
 	refreshPage() {
 		window.location.reload()

package/src/lib/utils/window-open.ts

@@ -1,6 +1,16 @@
 import { runtime } from './runtime'
 
-/** @public */
-export function openWindow(url: string, target = '_blank') {
-	runtime.openWindow(url, target)
+/**
+ * Open a new window with the given URL and target. Prefer this to the window.open function, as it
+ * will work more reliably in embedded scenarios, such as our VS Code extension. See the runtime
+ * object in tldraw/editor for more details.
+ *
+ * @param url - The URL to open.
+ * @param target - The target window to open the URL in.
+ * @param allowReferrer - Whether to allow the referrer to be sent to the new window.
+ * @returns The new window object.
+ * @public
+ */
+export function openWindow(url: string, target = '_blank', allowReferrer?: boolean) {
+	return runtime.openWindow(url, target, allowReferrer)
 }

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 = '4.1.1'
+export const version = '4.2.0-canary.025846da88b7'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-15T12:23:29.168Z',
-	patch: '2025-10-15T13:38:40.898Z',
+	minor: '2025-10-28T15:00:53.668Z',
+	patch: '2025-10-28T15:00:53.668Z',
 }