@tldraw/editor 4.1.0-canary.4f9226a36e7e → 4.1.0-canary.533dd6427b33

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-canary.4f9226a36e7e'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-04T12:12:04.189Z',\n\tpatch: '2025-10-04T12:12:04.189Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '4.1.0-canary.533dd6427b33'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-10-15T10:04:14.590Z',\n\tpatch: '2025-10-15T10:04:14.590Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.1.0-canary.4f9226a36e7e",
+  "version": "4.1.0-canary.533dd6427b33",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "4.1.0-canary.4f9226a36e7e",
-    "@tldraw/state-react": "4.1.0-canary.4f9226a36e7e",
-    "@tldraw/store": "4.1.0-canary.4f9226a36e7e",
-    "@tldraw/tlschema": "4.1.0-canary.4f9226a36e7e",
-    "@tldraw/utils": "4.1.0-canary.4f9226a36e7e",
-    "@tldraw/validate": "4.1.0-canary.4f9226a36e7e",
+    "@tldraw/state": "4.1.0-canary.533dd6427b33",
+    "@tldraw/state-react": "4.1.0-canary.533dd6427b33",
+    "@tldraw/store": "4.1.0-canary.533dd6427b33",
+    "@tldraw/tlschema": "4.1.0-canary.533dd6427b33",
+    "@tldraw/utils": "4.1.0-canary.533dd6427b33",
+    "@tldraw/validate": "4.1.0-canary.533dd6427b33",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

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/editor/Editor.ts

@@ -69,6 +69,7 @@ import {
 	JsonObject,
 	PerformanceTracker,
 	Result,
+	ZERO_INDEX_KEY,
 	annotateError,
 	assert,
 	assertExists,
@@ -5663,7 +5664,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const children = this._parentIdsToChildIds.get()[parentId]
 
 		if (!children || children.length === 0) {
-			return 'a1' as IndexKey
+			return getIndexAbove(ZERO_INDEX_KEY)
 		}
 		const shape = this.getShape(children[children.length - 1])!
 		return getIndexAbove(shape.index)

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/editor/managers/SnapManager/HandleSnaps.ts

@@ -4,7 +4,7 @@ import { assertExists, uniqueId } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import { Geometry2d } from '../../../primitives/geometry/Geometry2d'
 import { Editor } from '../../Editor'
-import { SnapData, SnapManager } from './SnapManager'
+import { PointsSnapIndicator, SnapData, SnapManager } from './SnapManager'
 
 /**
  * When dragging a handle, users can snap the handle to key geometry on other nearby shapes.
@@ -43,6 +43,11 @@ export interface HandleSnapGeometry {
 	getSelfSnapPoints?(handle: TLHandle): VecModel[]
 }
 
+interface AlignPointsSnap {
+	snaps: PointsSnapIndicator[]
+	nudge: Vec
+}
+
 const defaultGetSelfSnapOutline = () => null
 const defaultGetSelfSnapPoints = () => []
 /** @public */
@@ -171,6 +176,67 @@ export class HandleSnaps {
 		return null
 	}
 
+	private getHandleSnapData({
+		handle,
+		currentShapeId,
+	}: {
+		handle: TLHandle
+		currentShapeId: TLShapeId
+	}): AlignPointsSnap | null {
+		const snapThreshold = this.manager.getSnapThreshold()
+		const currentShapeTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))
+		const handleInPageSpace = currentShapeTransform.applyToPoint(handle)
+
+		let nearestXSnap: Vec | null = null
+		let nearestYSnap: Vec | null = null
+		let minOffsetX = snapThreshold
+		let minOffsetY = snapThreshold
+
+		for (const snapPoint of this.iterateSnapPointsInPageSpace(currentShapeId, handle)) {
+			const offsetX = Math.abs(handleInPageSpace.x - snapPoint.x)
+			const offsetY = Math.abs(handleInPageSpace.y - snapPoint.y)
+			if (offsetX < minOffsetX) {
+				minOffsetX = offsetX
+				nearestXSnap = snapPoint
+			}
+			if (offsetY < minOffsetY) {
+				minOffsetY = offsetY
+				nearestYSnap = snapPoint
+			}
+		}
+
+		if (!nearestXSnap && !nearestYSnap) {
+			return null
+		}
+
+		const nudge = new Vec(
+			nearestXSnap ? nearestXSnap.x - handleInPageSpace.x : 0,
+			nearestYSnap ? nearestYSnap.y - handleInPageSpace.y : 0
+		)
+
+		const snappedHandle = Vec.Add(handleInPageSpace, nudge)
+		const snaps: PointsSnapIndicator[] = []
+
+		if (nearestXSnap) {
+			const snappedHandleOnX = new Vec(nearestXSnap.x, snappedHandle.y)
+			snaps.push({
+				id: uniqueId(),
+				type: 'points',
+				points: [nearestXSnap, snappedHandleOnX],
+			})
+		}
+		if (nearestYSnap) {
+			const snappedHandleOnY = new Vec(snappedHandle.x, nearestYSnap.y)
+			snaps.push({
+				id: uniqueId(),
+				type: 'points',
+				points: [nearestYSnap, snappedHandleOnY],
+			})
+		}
+
+		return { snaps, nudge }
+	}
+
 	snapHandle({
 		currentShapeId,
 		handle,
@@ -180,10 +246,16 @@ export class HandleSnaps {
 	}): SnapData | null {
 		const currentShapeTransform = assertExists(this.editor.getShapePageTransform(currentShapeId))
 		const handleInPageSpace = currentShapeTransform.applyToPoint(handle)
-		const snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace })
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
+		const snapType = handle.canSnap ? 'point' : handle.snapType
+
+		if (snapType === 'point') {
+			const snapPosition = this.getHandleSnapPosition({ currentShapeId, handle, handleInPageSpace })
+
+			if (!snapPosition) {
+				return null
+			}
 
-		// If we found a point, display snap lines, and return the nudge
-		if (snapPosition) {
 			this.manager.setIndicators([
 				{
 					id: uniqueId(),
@@ -195,6 +267,21 @@ export class HandleSnaps {
 			return { nudge: Vec.Sub(snapPosition, handleInPageSpace) }
 		}
 
+		if (snapType === 'align') {
+			const snapData = this.getHandleSnapData({
+				handle,
+				currentShapeId,
+			})
+
+			if (!snapData) {
+				return null
+			}
+
+			this.manager.setIndicators(snapData.snaps)
+
+			return { nudge: snapData.nudge }
+		}
+
 		return null
 	}
 }

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,6 +171,14 @@ 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)
 		}
 		if (process.env.NODE_ENV) {
 			url.searchParams.set('environment', process.env.NODE_ENV)

package/src/lib/primitives/geometry/Geometry2d.ts

@@ -120,6 +120,8 @@ export abstract class Geometry2d {
 	distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
 		if (Vec.Equals(A, B)) return this.distanceToPoint(A, false, filters)
 		const { vertices } = this
+		if (vertices.length === 0) throw Error('nearest point not found')
+		if (vertices.length === 1) return Vec.Dist(A, vertices[0])
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number, p: Vec, q: Vec
@@ -175,6 +177,8 @@ export abstract class Geometry2d {
 	interpolateAlongEdge(t: number, _filters?: Geometry2dFilters): Vec {
 		const { vertices } = this
 
+		if (vertices.length === 0) return new Vec(0, 0)
+		if (vertices.length === 1) return vertices[0]
 		if (t <= 0) return vertices[0]
 
 		const distanceToTravel = t * this.length
@@ -209,6 +213,8 @@ export abstract class Geometry2d {
 		let closestDistance = Infinity
 		let distanceTraveled = 0
 
+		if (vertices.length === 0 || vertices.length === 1) return 0
+
 		for (let i = 0; i < (this.isClosed ? vertices.length : vertices.length - 1); i++) {
 			const curr = vertices[i]
 			const next = vertices[(i + 1) % vertices.length]

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.0-canary.4f9226a36e7e'
+export const version = '4.1.0-canary.533dd6427b33'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-04T12:12:04.189Z',
-	patch: '2025-10-04T12:12:04.189Z',
+	minor: '2025-10-15T10:04:14.590Z',
+	patch: '2025-10-15T10:04:14.590Z',
 }