tldraw 4.3.0-next.82cfddd7ee89 → 4.3.0-next.842fb21476f2

package/src/test/TestEditor.ts

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

package/src/test/TldrawEditor.test.tsx

@@ -4,8 +4,9 @@ import {
 	BaseBoxShapeUtil,
 	Editor,
 	HTMLContainer,
+	IndexKey,
 	TLAssetStore,
-	TLBaseShape,
+	TLShape,
 	TLShapeId,
 	TldrawEditor,
 	createShapeId,
@@ -18,6 +19,7 @@ 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,
@@ -192,22 +194,22 @@ describe('<TldrawEditor />', () => {
 			{ type: 'bookmark' as const, props: { w: 100, h: 100, url: 'https://example.com' } },
 			{
 				type: 'draw' as const,
-				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+				props: { segments: createDrawSegments([[{ 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' } },
+			{ type: 'geo' as const, props: { w: 100, h: 100, geo: 'rectangle' as const } },
 			{
 				type: 'highlight' as const,
-				props: { segments: [{ type: 'free' as const, points: [{ x: 0, y: 0, z: 0.5 }] }] },
+				props: { segments: createDrawSegments([[{ 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', x: 0, y: 0 },
-						a2: { id: 'a2', index: 'a2', x: 100, y: 100 },
+						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 100 },
 					},
 				},
 			},
@@ -227,10 +229,9 @@ describe('<TldrawEditor />', () => {
 				editor.createShapes([
 					{
 						id,
-						type: shapeConfig.type,
+						...shapeConfig,
 						x: i * 150, // Space them out horizontally
 						y: 0,
-						props: shapeConfig.props,
 					},
 				])
 			})
@@ -285,8 +286,9 @@ describe('<TldrawEditor />', () => {
 
 		// we should only get one editor instance
 		expect(editorInstances.size).toBe(1)
-		// but strict mode will cause onMount to be called twice
-		expect(onMount).toHaveBeenCalledTimes(2)
+		// 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()
 	})
 
 	it('allows updating camera options without re-creating the editor', async () => {
@@ -456,17 +458,19 @@ describe('<TldrawEditor />', () => {
 	})
 })
 
-describe('Custom shapes', () => {
-	type CardShape = TLBaseShape<
-		'card',
-		{
-			w: number
-			h: number
-		}
-	>
+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', () => {
 	class CardUtil extends BaseBoxShapeUtil<CardShape> {
-		static override type = 'card' as const
+		static override type = CARD_TYPE
 
 		override isAspectRatioLocked(_shape: CardShape) {
 			return false
@@ -508,7 +512,7 @@ describe('Custom shapes', () => {
 	class CardTool extends BaseBoxShapeTool {
 		static override id = 'card'
 		static override initial = 'idle'
-		override shapeType = 'card'
+		override shapeType = 'card' as const
 	}
 
 	const tools = [CardTool]