@tldraw/editor 3.15.0-canary.e3f6387b7e04 → 3.15.0-canary.f6f94b895c02

package/src/lib/editor/Editor.ts

@@ -1863,10 +1863,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
+		const filteredShapes = isSelectedWithinContainer
+			? this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
+			: this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId))
 		const readingOrderShapes = isSelectedWithinContainer
-			? this._getShapesInReadingOrder(
-					this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
-				)
+			? this._getShapesInReadingOrder(filteredShapes)
 			: this.getCurrentPageShapesInReadingOrder()
 		const currentShapeId: TLShapeId | undefined =
 			selectedShapeIds.length === 1
@@ -1883,7 +1884,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			adjacentShapeId = shapeIds[adjacentIndex]
 		} else {
 			if (!currentShapeId) return
-			adjacentShapeId = this.getNearestAdjacentShape(currentShapeId, direction)
+			adjacentShapeId = this.getNearestAdjacentShape(filteredShapes, currentShapeId, direction)
 		}
 
 		const shape = this.getShape(adjacentShapeId)
@@ -1982,6 +1983,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	getNearestAdjacentShape(
+		shapes: TLShape[],
 		currentShapeId: TLShapeId,
 		direction: 'left' | 'right' | 'up' | 'down'
 	): TLShapeId {
@@ -1989,7 +1991,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const currentShape = this.getShape(currentShapeId)
 		if (!currentShape) return currentShapeId
 
-		const shapes = this.getCurrentPageShapes()
 		const tabbableShapes = shapes.filter(
 			(shape) => this.getShapeUtil(shape).canTabTo(shape) && shape.id !== currentShapeId
 		)

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -584,6 +584,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape resize is cancelled.
+	 *
+	 * @param initial - The shape at the start of the resize.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onResizeCancel?(initial: Shape, current: Shape): void
+
 	/**
 	 * A callback called when a shape starts being translated.
 	 *
@@ -613,6 +622,25 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape translation is cancelled.
+	 *
+	 * @param initial - The shape at the start of the translation.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onTranslateCancel?(initial: Shape, current: Shape): void
+
+	/**
+	 * A callback called when a shape's handle starts being dragged.
+	 *
+	 * @param shape - The shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
+
 	/**
 	 * A callback called when a shape's handle changes.
 	 *
@@ -623,6 +651,25 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape's handle finishes being dragged.
+	 *
+	 * @param current - The current shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
+
+	/**
+	 * A callback called when a shape's handle drag is cancelled.
+	 *
+	 * @param current - The current shape.
+	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
+	 * @public
+	 */
+	onHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void
+
 	/**
 	 * A callback called when a shape starts being rotated.
 	 *
@@ -652,6 +699,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
+	/**
+	 * A callback called when a shape rotation is cancelled.
+	 *
+	 * @param initial - The shape at the start of the rotation.
+	 * @param current - The current shape.
+	 * @public
+	 */
+	onRotateCancel?(initial: Shape, current: Shape): void
+
 	/**
 	 * Not currently used.
 	 *
@@ -819,5 +875,6 @@ export interface TLResizeInfo<T extends TLShape> {
 export interface TLHandleDragInfo<T extends TLShape> {
 	handle: TLHandle
 	isPrecise: boolean
+	isCreatingShape: boolean
 	initial?: T | undefined
 }

package/src/lib/editor/tools/StateNode.test.ts

@@ -0,0 +1,285 @@
+import { createTLStore } from '../../config/createTLStore'
+import { Editor } from '../Editor'
+import { StateNode } from './StateNode'
+
+describe('StateNode.addChild', () => {
+	// Test state node classes for addChild tests
+	class ParentState extends StateNode {
+		static override id = 'parent'
+		static override initial = 'child1'
+		static override children() {
+			return [ChildState1]
+		}
+	}
+
+	class ChildState1 extends StateNode {
+		static override id = 'child1'
+	}
+
+	class ChildState2 extends StateNode {
+		static override id = 'child2'
+	}
+
+	class ChildState3 extends StateNode {
+		static override id = 'child3'
+	}
+
+	class LeafState extends StateNode {
+		static override id = 'leaf'
+	}
+
+	class RootState extends StateNode {
+		static override id = 'root'
+		static override initial = 'child1'
+		static override children() {
+			return [ChildState1]
+		}
+	}
+
+	class RootStateWithoutChildren extends StateNode {
+		static override id = 'rootWithoutChildren'
+	}
+
+	let editor: Editor
+
+	beforeEach(() => {
+		editor = new Editor({
+			initialState: 'parent',
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [
+				ParentState,
+				ChildState1,
+				ChildState2,
+				ChildState3,
+				LeafState,
+				RootState,
+				RootStateWithoutChildren,
+			],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('should add a child to a branch state node', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		// Initially should have one child
+		expect(Object.keys(parentState.children!)).toHaveLength(1)
+		expect(parentState.children!['child1']).toBeDefined()
+
+		// Add a new child
+		parentState.addChild(ChildState2)
+
+		// Should now have two children
+		expect(Object.keys(parentState.children!)).toHaveLength(2)
+		expect(parentState.children!['child1']).toBeDefined()
+		expect(parentState.children!['child2']).toBeDefined()
+		expect(parentState.children!['child2']).toBeInstanceOf(ChildState2)
+	})
+
+	it('should add a child to a root state node', () => {
+		const rootState = editor.root.children!['root'] as RootState
+
+		// Initially should have one child
+		expect(Object.keys(rootState.children!)).toHaveLength(1)
+		expect(rootState.children!['child1']).toBeDefined()
+
+		// Add a new child
+		rootState.addChild(ChildState2)
+
+		// Should now have two children
+		expect(Object.keys(rootState.children!)).toHaveLength(2)
+		expect(rootState.children!['child1']).toBeDefined()
+		expect(rootState.children!['child2']).toBeDefined()
+		expect(rootState.children!['child2']).toBeInstanceOf(ChildState2)
+	})
+
+	it('should throw an error when trying to add a child to a leaf state node', () => {
+		const leafState = editor.root.children!['leaf'] as LeafState
+
+		// Leaf state should not have children
+		expect(leafState.children).toBeUndefined()
+
+		// Should throw an error when trying to add a child
+		expect(() => {
+			leafState.addChild(ChildState2)
+		}).toThrow('StateNode.addChild: cannot add child to a leaf node')
+	})
+
+	it('should return the parent state node for chaining', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		const result = parentState.addChild(ChildState2)
+
+		expect(result).toBe(parentState)
+	})
+
+	it('should create the child with the correct editor and parent', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		parentState.addChild(ChildState2)
+		const childState = parentState.children!['child2'] as ChildState2
+
+		expect(childState.editor).toBe(editor)
+		expect(childState.parent).toBe(parentState)
+	})
+
+	it('should allow adding multiple children', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		// Add multiple children
+		parentState.addChild(ChildState2).addChild(ChildState3)
+
+		// Should have three children
+		expect(Object.keys(parentState.children!)).toHaveLength(3)
+		expect(parentState.children!['child1']).toBeDefined()
+		expect(parentState.children!['child2']).toBeDefined()
+		expect(parentState.children!['child3']).toBeDefined()
+		expect(parentState.children!['child2']).toBeInstanceOf(ChildState2)
+		expect(parentState.children!['child3']).toBeInstanceOf(ChildState3)
+	})
+
+	it('should allow transitioning to added children', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		// Add a new child
+		parentState.addChild(ChildState2)
+
+		// Should be able to transition to the new child
+		expect(() => {
+			parentState.transition('child2')
+		}).not.toThrow()
+
+		// The current state should be the new child
+		expect(parentState.getCurrent()?.id).toBe('child2')
+	})
+
+	it('should maintain existing children when adding new ones', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+		const originalChild = parentState.children!['child1']
+
+		// Add a new child
+		parentState.addChild(ChildState2)
+
+		// Original child should still exist and be the same instance
+		expect(parentState.children!['child1']).toBe(originalChild)
+		expect(parentState.children!['child1']).toBeInstanceOf(ChildState1)
+	})
+
+	it('should initialize children object for root nodes without static children', () => {
+		// Create a StateNode directly as a root node (no parent)
+		const mockEditor = {} as Editor
+		const rootStateWithoutChildren = new RootStateWithoutChildren(mockEditor, undefined)
+
+		// Root state without static children should not have children initially
+		expect(rootStateWithoutChildren.children).toBeUndefined()
+
+		// Adding a child should initialize the children object
+		rootStateWithoutChildren.addChild(ChildState2)
+
+		// Should now have children object with the added child
+		expect(rootStateWithoutChildren.children).toBeDefined()
+		expect(Object.keys(rootStateWithoutChildren.children!)).toHaveLength(1)
+		expect(rootStateWithoutChildren.children!['child2']).toBeDefined()
+		expect(rootStateWithoutChildren.children!['child2']).toBeInstanceOf(ChildState2)
+	})
+
+	it('should throw an error when trying to add a child with a duplicate ID', () => {
+		const parentState = editor.root.children!['parent'] as ParentState
+
+		// Initially should have one child
+		expect(Object.keys(parentState.children!)).toHaveLength(1)
+		expect(parentState.children!['child1']).toBeDefined()
+
+		// Should throw an error when trying to add a child with the same ID
+		expect(() => {
+			parentState.addChild(ChildState1)
+		}).toThrow("StateNode.addChild: a child with id 'child1' already exists")
+
+		// Should still have only one child
+		expect(Object.keys(parentState.children!)).toHaveLength(1)
+		expect(parentState.children!['child1']).toBeDefined()
+	})
+
+	it('should throw an error when trying to add a child with a duplicate ID to a root state', () => {
+		const rootState = editor.root.children!['root'] as RootState
+
+		// Initially should have one child
+		expect(Object.keys(rootState.children!)).toHaveLength(1)
+		expect(rootState.children!['child1']).toBeDefined()
+
+		// Should throw an error when trying to add a child with the same ID
+		expect(() => {
+			rootState.addChild(ChildState1)
+		}).toThrow("StateNode.addChild: a child with id 'child1' already exists")
+
+		// Should still have only one child
+		expect(Object.keys(rootState.children!)).toHaveLength(1)
+		expect(rootState.children!['child1']).toBeDefined()
+	})
+
+	it('should throw an error when trying to add a child with a duplicate ID to a root state without static children', () => {
+		// Create a StateNode directly as a root node (no parent)
+		const mockEditor = {} as Editor
+		const rootStateWithoutChildren = new RootStateWithoutChildren(mockEditor, undefined)
+
+		// Add a child first
+		rootStateWithoutChildren.addChild(ChildState1)
+
+		// Should throw an error when trying to add a child with the same ID
+		expect(() => {
+			rootStateWithoutChildren.addChild(ChildState1)
+		}).toThrow("StateNode.addChild: a child with id 'child1' already exists")
+
+		// Should still have only one child
+		expect(Object.keys(rootStateWithoutChildren.children!)).toHaveLength(1)
+		expect(rootStateWithoutChildren.children!['child1']).toBeDefined()
+	})
+})
+
+describe('current tool id mask', () => {
+	// Tool mask test classes
+	class ToolA extends StateNode {
+		static override id = 'A'
+	}
+
+	class ToolB extends StateNode {
+		static override id = 'B'
+	}
+
+	class ToolC extends StateNode {
+		static override id = 'C'
+
+		override onEnter() {
+			this.setCurrentToolIdMask('A')
+		}
+	}
+
+	let toolMaskEditor: Editor
+
+	beforeEach(() => {
+		toolMaskEditor = new Editor({
+			initialState: 'A',
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [ToolA, ToolB, ToolC],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('starts with the correct tool id', () => {
+		expect(toolMaskEditor.getCurrentToolId()).toBe('A')
+	})
+
+	it('updates the current tool id', () => {
+		toolMaskEditor.setCurrentTool('B')
+		expect(toolMaskEditor.getCurrentToolId()).toBe('B')
+	})
+
+	it('masks the current tool id', () => {
+		toolMaskEditor.setCurrentTool('C')
+		expect(toolMaskEditor.getCurrentToolId()).toBe('A')
+	})
+})

package/src/lib/editor/tools/StateNode.ts

@@ -62,7 +62,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 
 		this.parent = parent ?? ({} as any)
 
-		if (this.parent) {
+		if (parent) {
 			if (children && initial) {
 				this.type = 'branch'
 				this.initial = initial
@@ -238,6 +238,32 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		this._currentToolIdMask.set(id)
 	}
 
+	/**
+	 * Add a child node to this state node.
+	 *
+	 * @public
+	 */
+	addChild(childConstructor: TLStateNodeConstructor): this {
+		if (this.type === 'leaf') {
+			throw new Error('StateNode.addChild: cannot add child to a leaf node')
+		}
+
+		// Initialize children if it's undefined (for root nodes without static children)
+		if (!this.children) {
+			this.children = {}
+		}
+
+		const child = new childConstructor(this.editor, this)
+
+		// Check if a child with this ID already exists
+		if (this.children[child.id]) {
+			throw new Error(`StateNode.addChild: a child with id '${child.id}' already exists`)
+		}
+
+		this.children[child.id] = child
+		return this
+	}
+
 	onWheel?(info: TLWheelEventInfo): void
 	onPointerDown?(info: TLPointerEventInfo): void
 	onPointerMove?(info: TLPointerEventInfo): void

package/src/lib/hooks/useEditorComponents.tsx

@@ -69,7 +69,7 @@ export interface TLEditorComponents {
 	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
 	ShapeIndicators?: ComponentType | null
 	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Spinner?: ComponentType | null
+	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
 	SvgDefs?: ComponentType | null
 	ZoomBrush?: ComponentType<TLBrushProps> | null
 

package/src/lib/license/Watermark.tsx

@@ -143,7 +143,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover > button {
-			animation: delayed_link 0.2s forwards ease-in-out;
+			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
 
@@ -153,7 +153,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	}
 
 
-	@keyframes delayed_link {
+	@keyframes ${className}_delayed_link {
 		0% {
 			cursor: inherit;
 			opacity: .38;

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.15.0-canary.e3f6387b7e04'
+export const version = '3.15.0-canary.f6f94b895c02'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-14T11:01:29.466Z',
-	patch: '2025-07-14T11:01:29.466Z',
+	minor: '2025-07-25T09:38:18.431Z',
+	patch: '2025-07-25T09:38:18.431Z',
 }

package/src/lib/test/currentToolIdMask.test.ts

@@ -1,49 +0,0 @@
-import { describe } from 'node:test'
-import { createTLStore } from '../config/createTLStore'
-import { Editor } from '../editor/Editor'
-import { StateNode } from '../editor/tools/StateNode'
-
-let editor: Editor
-
-class A extends StateNode {
-	static override id = 'A'
-}
-
-class B extends StateNode {
-	static override id = 'B'
-}
-
-class C extends StateNode {
-	static override id = 'C'
-
-	override onEnter() {
-		this.setCurrentToolIdMask('A')
-	}
-}
-
-beforeEach(() => {
-	editor = new Editor({
-		initialState: 'A',
-		shapeUtils: [],
-		bindingUtils: [],
-		tools: [A, B, C],
-		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
-		getContainer: () => document.body,
-	})
-})
-
-describe('current tool id mask', () => {
-	it('starts with the correct tool id', () => {
-		expect(editor.getCurrentToolId()).toBe('A')
-	})
-
-	it('updates the current tool id', () => {
-		editor.setCurrentTool('B')
-		expect(editor.getCurrentToolId()).toBe('B')
-	})
-
-	it('masks the current tool id', () => {
-		editor.setCurrentTool('C')
-		expect(editor.getCurrentToolId()).toBe('A')
-	})
-})