tldraw 4.2.2 → 4.2.3

package/src/test/TestEditor.ts

@@ -10,6 +10,7 @@ import {
 	RequiredKeys,
 	RotateCorner,
 	SelectionHandle,
+	TLArrowBinding,
 	TLArrowShape,
 	TLContent,
 	TLEditorOptions,
@@ -259,7 +260,7 @@ export class TestEditor extends Editor {
 
 	paste(point?: VecLike) {
 		if (this.clipboard !== null) {
-			const p = this.inputs.getShiftKey() ? this.inputs.getCurrentPagePoint() : point
+			const p = this.inputs.shiftKey ? this.inputs.currentPagePoint : point
 
 			this.markHistoryStoppingPoint('pasting')
 			this.putContentOntoCurrentPage(this.clipboard, {
@@ -349,8 +350,8 @@ export class TestEditor extends Editor {
 	}
 
 	protected getPointerEventInfo(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: Partial<TLPointerEventInfo> | TLShapeId,
 		modifiers?: EventModifiers
 	) {
@@ -363,11 +364,11 @@ export class TestEditor extends Editor {
 			name: 'pointer_down',
 			type: 'pointer',
 			pointerId: 1,
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
-			accelKey: isAccelKey({ ...this.inputs.toJson(), ...modifiers }),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
+			accelKey: isAccelKey({ ...this.inputs, ...modifiers }),
 			point: { x, y, z: null },
 			button: 0,
 			isPen: false,
@@ -426,8 +427,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerMove(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -439,8 +440,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerDown(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -452,8 +453,8 @@ export class TestEditor extends Editor {
 	}
 
 	pointerUp(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -465,8 +466,8 @@ export class TestEditor extends Editor {
 	}
 
 	click(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -476,8 +477,8 @@ export class TestEditor extends Editor {
 	}
 
 	rightClick(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -495,8 +496,8 @@ export class TestEditor extends Editor {
 	}
 
 	doubleClick(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
@@ -536,10 +537,10 @@ export class TestEditor extends Editor {
 	keyUp(key: string, options = {} as Partial<Omit<TLKeyboardEventInfo, 'key'>>) {
 		this.dispatch({
 			...this.getKeyboardEventInfo(key, 'key_up', {
-				shiftKey: this.inputs.getShiftKey() && key !== 'Shift',
-				ctrlKey: this.inputs.getCtrlKey() && !(key === 'Control' || key === 'Meta'),
-				altKey: this.inputs.getAltKey() && key !== 'Alt',
-				metaKey: this.inputs.getMetaKey() && key !== 'Meta',
+				shiftKey: this.inputs.shiftKey && key !== 'Shift',
+				ctrlKey: this.inputs.ctrlKey && !(key === 'Control' || key === 'Meta'),
+				altKey: this.inputs.altKey && key !== 'Alt',
+				metaKey: this.inputs.metaKey && key !== 'Meta',
 				...options,
 			}),
 		}).forceTick()
@@ -547,15 +548,14 @@ export class TestEditor extends Editor {
 	}
 
 	wheel(dx: number, dy: number, options = {} as Partial<Omit<TLWheelEventInfo, 'delta'>>) {
-		const currentScreenPoint = this.inputs.getCurrentScreenPoint()
 		this.dispatch({
 			type: 'wheel',
 			name: 'wheel',
-			point: new Vec(currentScreenPoint.x, currentScreenPoint.y),
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
+			point: new Vec(this.inputs.currentScreenPoint.x, this.inputs.currentScreenPoint.y),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			delta: { x: dx, y: dy },
@@ -574,8 +574,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchStart(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -585,10 +585,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_start',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },
@@ -598,8 +598,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchTo(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -609,10 +609,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_start',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },
@@ -622,8 +622,8 @@ export class TestEditor extends Editor {
 	}
 
 	pinchEnd(
-		x = this.inputs.getCurrentScreenPoint().x,
-		y = this.inputs.getCurrentScreenPoint().y,
+		x = this.inputs.currentScreenPoint.x,
+		y = this.inputs.currentScreenPoint.y,
 		z: number,
 		dx: number,
 		dy: number,
@@ -633,10 +633,10 @@ export class TestEditor extends Editor {
 		this.dispatch({
 			type: 'pinch',
 			name: 'pinch_end',
-			shiftKey: this.inputs.getShiftKey(),
-			ctrlKey: this.inputs.getCtrlKey(),
-			altKey: this.inputs.getAltKey(),
-			metaKey: this.inputs.getMetaKey(),
+			shiftKey: this.inputs.shiftKey,
+			ctrlKey: this.inputs.ctrlKey,
+			altKey: this.inputs.altKey,
+			metaKey: this.inputs.metaKey,
 			accelKey: isAccelKey(this.inputs),
 			...options,
 			point: { x, y, z },
@@ -790,7 +790,9 @@ export class TestEditor extends Editor {
 	}
 
 	getArrowsBoundTo(shapeId: TLShapeId) {
-		const ids = new Set(this.getBindingsToShape(shapeId, 'arrow').map((b) => b.fromId))
+		const ids = new Set(
+			this.getBindingsToShape<TLArrowBinding>(shapeId, 'arrow').map((b) => b.fromId)
+		)
 		return compact(Array.from(ids, (id) => this.getShape<TLArrowShape>(id)))
 	}
 }

package/src/test/TldrawEditor.test.tsx

@@ -4,9 +4,8 @@ import {
 	BaseBoxShapeUtil,
 	Editor,
 	HTMLContainer,
-	IndexKey,
 	TLAssetStore,
-	TLShape,
+	TLBaseShape,
 	TLShapeId,
 	TldrawEditor,
 	createShapeId,
@@ -19,7 +18,6 @@ import { vi } from 'vitest'
 import { defaultShapeUtils } from '../lib/defaultShapeUtils'
 import { defaultTools } from '../lib/defaultTools'
 import { defaultAddFontsFromNode, tipTapDefaultExtensions } from '../lib/utils/text/richText'
-import { createDrawSegments } from './test-jsx'
 import {
 	renderTldrawComponent,
 	renderTldrawComponentWithEditor,
@@ -194,22 +192,22 @@ describe('<TldrawEditor />', () => {
 			{ type: 'bookmark' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{
 				type: 'draw' as const,
-				props: { segments: createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]) },
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
 			},
 			{ type: 'embed' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{ type: 'frame' as const, props: { w: 100, h: 100 } },
-			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' } },
 			{
 				type: 'highlight' as const,
-				props: { segments: createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]) },
+				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
 			},
 			{ type: 'image' as const, props: { w: 100, h: 100 } },
 			{
 				type: 'line' as const,
 				props: {
 					points: {
-						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
-						a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 100 },
+						a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
 					},
 				},
 			},
@@ -229,9 +227,10 @@ describe('<TldrawEditor />', () => {
 				editor.createShapes([
 					{
 						id,
-						...shapeConfig,
+						type: shapeConfig.type,
 						x: i * 150, // Space them out horizontally
 						y: 0,
+						props: shapeConfig.props,
 					},
 				])
 			})
@@ -286,9 +285,8 @@ describe('<TldrawEditor />', () => {
 
 		// we should only get one editor instance
 		expect(editorInstances.size).toBe(1)
-		// strict mode may cause onMount to be called twice, but the important
-		// thing is that we always get the same editor instance
-		expect(onMount).toHaveBeenCalled()
+		// but strict mode will cause onMount to be called twice
+		expect(onMount).toHaveBeenCalledTimes(2)
 	})
 
 	it('allows updating camera options without re-creating the editor', async () => {
@@ -458,19 +456,17 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-const CARD_TYPE = 'card'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalShapePropsMap {
-		[CARD_TYPE]: { w: number; h: number }
-	}
-}
-
-type CardShape = TLShape<typeof CARD_TYPE>
-
 describe('Custom shapes', () => {
+	type CardShape = TLBaseShape<
+		'card',
+		{
+			w: number
+			h: number
+		}
+	>
+
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
-		static override type = CARD_TYPE
+		static override type = 'card' as const
 
 		override isAspectRatioLocked(_shape: CardShape) {
 			return false
@@ -512,7 +508,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card' as const
+		override shapeType = 'card'
 	}
 
 	const tools = [CardTool]