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

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -16,20 +16,11 @@ exports[`When resizing a shape with children > Resizes a rotated draw shape > dr
     "isComplete": false,
     "isPen": false,
     "scale": 1,
+    "scaleX": 1.1,
+    "scaleY": 1.1,
     "segments": [
       {
-        "points": [
-          {
-            "x": 0,
-            "y": 0,
-            "z": 0.5,
-          },
-          {
-            "x": 110,
-            "y": 110,
-            "z": 0.5,
-          },
-        ],
+        "points": "AAAAAAA4QFZAVgA4",
         "type": "free",
       },
     ],

package/src/test/arrows-megabus.test.tsx

@@ -33,7 +33,7 @@ it('requires a move to begin drawing', () => {
 	editor.pointerDown()
 	editor.pointerMove(2, 0)
 
-	expect(editor.inputs.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 })
 
 describe('Making an arrow on the page', () => {

package/src/test/bindings.test.tsx

@@ -6,8 +6,8 @@ import {
 	BindingOnShapeDeleteOptions,
 	BindingOnShapeIsolateOptions,
 	BindingUtil,
+	TLBinding,
 	TLShapeId,
-	TLUnknownBinding,
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -40,7 +40,7 @@ const mockOnAfterChangeToShape = vi.fn()
 
 const calls: string[] = []
 
-const registerCall = (method: string, binding: TLUnknownBinding) => {
+const registerCall = (method: string, binding: TLBinding) => {
 	calls.push(
 		`${method}: ${binding.fromId.slice('shape:'.length)}->${binding.toId.slice('shape:'.length)}`
 	)
@@ -60,62 +60,62 @@ class TestBindingUtil extends BindingUtil {
 		mockOnOperationComplete()
 	}
 
-	override onBeforeDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDelete(options: BindingOnDeleteOptions): void {
 		registerCall('onBeforeDelete', options.binding)
 		mockOnBeforeDelete(options)
 	}
 
-	override onAfterDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
+	override onAfterDelete(options: BindingOnDeleteOptions): void {
 		registerCall('onAfterDelete', options.binding)
 		mockOnAfterDelete(options)
 	}
 
-	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions): void {
 		registerCall('onBeforeDeleteFromShape', options.binding)
 		mockOnBeforeFromShapeDelete(options)
 	}
 
-	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
+	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions): void {
 		registerCall('onBeforeDeleteToShape', options.binding)
 		mockOnBeforeToShapeDelete(options)
 	}
 
-	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
+	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions): void {
 		registerCall('onBeforeIsolateFromShape', options.binding)
 		mockOnBeforeFromShapeIsolate(options)
 	}
 
-	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
+	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions): void {
 		registerCall('onBeforeIsolateToShape', options.binding)
 		mockOnBeforeToShapeIsolate(options)
 	}
 
-	override onBeforeCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
+	override onBeforeCreate(options: BindingOnCreateOptions): void {
 		registerCall('onBeforeCreate', options.binding)
 		mockOnBeforeCreate(options)
 	}
 
-	override onAfterCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
+	override onAfterCreate(options: BindingOnCreateOptions): void {
 		registerCall('onAfterCreate', options.binding)
 		mockOnAfterCreate(options)
 	}
 
-	override onBeforeChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
+	override onBeforeChange(options: BindingOnChangeOptions): void {
 		registerCall('onBeforeChange', options.bindingAfter)
 		mockOnBeforeChange(options)
 	}
 
-	override onAfterChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
+	override onAfterChange(options: BindingOnChangeOptions): void {
 		registerCall('onAfterChange', options.bindingAfter)
 		mockOnAfterChange(options)
 	}
 
-	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
+	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions): void {
 		registerCall('onAfterChangeFromShape', options.binding)
 		mockOnAfterChangeFromShape(options)
 	}
 
-	override onAfterChangeToShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
+	override onAfterChangeToShape(options: BindingOnShapeChangeOptions): void {
 		registerCall('onAfterChangeToShape', options.binding)
 		mockOnAfterChangeToShape(options)
 	}
@@ -146,11 +146,19 @@ beforeEach(() => {
 	mockOnAfterChangeToShape.mockReset()
 })
 
+const TEST_TYPE = 'test'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalBindingPropsMap {
+		[TEST_TYPE]: Record<string, never>
+	}
+}
+
 function bindShapes(fromId: TLShapeId, toId: TLShapeId) {
 	const bindingId = createBindingId()
 	editor.createBinding({
 		id: bindingId,
-		type: 'test',
+		type: TEST_TYPE,
 		fromId,
 		toId,
 	})
@@ -256,11 +264,9 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.toId)
-		}
-	)
+	mockOnBeforeFromShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
+		editor.deleteShape(options.binding.toId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -301,11 +307,9 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation(
-		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
-			editor.deleteShape(options.binding.fromId)
-		}
-	)
+	mockOnBeforeToShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
+		editor.deleteShape(options.binding.fromId)
+	})
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)

package/src/test/bindingsIndex.test.tsx

@@ -1,4 +1,4 @@
-import { TLArrowBinding, TLGeoShape, TLShapeId, createShapeId } from '@tldraw/editor'
+import { TLShapeId, createShapeId } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -219,7 +219,7 @@ describe('bindingsIndex', () => {
 
 			const [box1Clone, box2Clone] = editor
 				.getSelectedShapes()
-				.filter((shape) => editor.isShapeOfType<TLGeoShape>(shape, 'geo'))
+				.filter((shape) => editor.isShapeOfType(shape, 'geo'))
 				.sort((a, b) => a.x - b.x)
 
 			expect(editor.getArrowsBoundTo(box2Clone.id)).toHaveLength(3)
@@ -248,9 +248,9 @@ describe('bindingsIndex', () => {
 
 			// move arrowA end from box2 to box3
 			const binding = editor
-				.getBindingsInvolvingShape<TLArrowBinding>(ids.box2, 'arrow')
+				.getBindingsInvolvingShape(ids.box2, 'arrow')
 				.find((b) => b.props.terminal === 'end')!
-			editor.updateBinding({ ...binding, toId: box3 } satisfies TLArrowBinding)
+			editor.updateBinding({ ...binding, toId: box3 })
 
 			expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
 			expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -16,7 +16,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
   >
     <defs>
       <mask
-        id="_export_4_rb_"
+        id="_export_4_r_b_"
       >
         <rect
           fill="white"
@@ -51,14 +51,14 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_4_ra__hash_pattern_light_0"
+        id="_export_4_r_a__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_4_rb_)"
+          mask="url(#_export_4_r_b_)"
           width="8"
           x="0"
           y="0"
@@ -83,7 +83,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         height="100"
         width="100"
         x="0"
@@ -127,7 +127,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_4_ra__hash_pattern_light_0)"
+        fill="url(#_export_4_r_a__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
@@ -156,7 +156,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
   >
     <defs>
       <mask
-        id="_export_2_r5_"
+        id="_export_2_r_5_"
       >
         <rect
           fill="white"
@@ -191,14 +191,14 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_2_r4__hash_pattern_light_0"
+        id="_export_2_r_4__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_2_r5_)"
+          mask="url(#_export_2_r_5_)"
           width="8"
           x="0"
           y="0"
@@ -223,7 +223,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         height="100"
         width="100"
         x="0"
@@ -267,7 +267,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_2_r4__hash_pattern_light_0)"
+        fill="url(#_export_2_r_4__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"

package/src/test/commands/cameraState.test.ts

@@ -0,0 +1,299 @@
+import { Box } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+})
+
+describe('getCameraState', () => {
+	it('starts as idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('becomes moving when the camera changes via setCamera', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via pan', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.pan({ x: 100, y: 100 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via zoomIn', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('returns to idle after the timeout elapses', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The default timeout is 64ms (options.cameraMovingTimeoutMs)
+		// Each tick is 16ms, so we need ~4 ticks to elapse
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays moving while camera continues to change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again before timeout elapses
+		editor.forceTick(2)
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again
+		editor.forceTick(2)
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays idle when camera position does not actually change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Setting the same camera position should not trigger moving state
+		const currentCamera = editor.getCamera()
+		editor.setCamera({ x: currentCamera.x, y: currentCamera.y, z: currentCamera.z })
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('does not add multiple tick listeners when camera changes rapidly', () => {
+		// This test verifies the fix: we should not have redundant listeners
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Change camera multiple times rapidly
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+
+		expect(editor.getCameraState()).toBe('moving')
+
+		// After timeout, should return to idle exactly once
+		// If there were multiple listeners, the state might behave unexpectedly
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('resets timeout when camera changes while already moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait almost until timeout
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Change camera again - should reset timeout
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait 3 more ticks - would have been idle if timeout wasn't reset
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it fully settle
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+})
+
+describe('camera state with zoom', () => {
+	it('becomes moving on zoomOut', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomOut(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on centerOnPoint', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.centerOnPoint({ x: 500, y: 500 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on zoomToFit', () => {
+		// Create a shape so zoomToFit has something to fit
+		editor.createShape({ type: 'geo', x: 100, y: 100, props: { w: 200, h: 200 } })
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomToFit({ immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+})
+
+describe('getDebouncedZoomLevel', () => {
+	it('returns the current zoom level when camera is idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+
+		// Change zoom and let it settle
+		editor.zoomIn(undefined, { immediate: true })
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures zoom when camera starts moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Start zooming - the debounced zoom is captured when movement starts
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The debounced zoom is captured at the moment movement starts (after first change)
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(capturedZoom).toBe(editor.getZoomLevel())
+	})
+
+	it('keeps captured zoom during continued camera movement', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Zoom again while still moving - debounced value should stay the same
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// But current zoom should have changed
+		expect(editor.getZoomLevel()).not.toBe(capturedZoom)
+	})
+
+	it('updates debounced zoom when camera becomes idle again', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+
+		// Zoom again while moving to change the current zoom
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// Let camera settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Debounced zoom should now match current zoom
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures new zoom at the start of each new movement', () => {
+		// First zoom and settle
+		editor.zoomIn(undefined, { immediate: true })
+		const firstCapturedZoom = editor.getDebouncedZoomLevel()
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Second zoom - should capture new zoom level
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		// The captured zoom should be different from the first capture
+		expect(editor.getDebouncedZoomLevel()).not.toBe(firstCapturedZoom)
+		// And it should match the current zoom (since we just started moving)
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with debouncedZoom option disabled', () => {
+		let editorWithoutDebouncedZoom: TestEditor
+
+		beforeEach(() => {
+			editorWithoutDebouncedZoom = new TestEditor({
+				options: { debouncedZoom: false },
+			})
+			editorWithoutDebouncedZoom.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+		})
+
+		it('always returns the current zoom level even when camera is moving', () => {
+			const initialZoom = editorWithoutDebouncedZoom.getZoomLevel()
+
+			editorWithoutDebouncedZoom.zoomIn(undefined, { immediate: true })
+			expect(editorWithoutDebouncedZoom.getCameraState()).toBe('moving')
+
+			// Should return the current zoom, not the captured one
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).toBe(
+				editorWithoutDebouncedZoom.getZoomLevel()
+			)
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).not.toBe(initialZoom)
+		})
+	})
+})
+
+describe('getEfficientZoomLevel', () => {
+	it('returns current zoom level when below shape threshold', () => {
+		// Default threshold is 500 shapes, we have 0
+		expect(editor.getZoomLevel()).toBe(editor.getEfficientZoomLevel())
+
+		// Add a few shapes - still below threshold
+		for (let i = 0; i < 10; i++) {
+			editor.createShape({ type: 'geo', x: i * 100, y: 0, props: { w: 50, h: 50 } })
+		}
+		expect(editor.getCurrentPageShapeIds().size).toBe(10)
+
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Should still return current zoom because we're below threshold
+		expect(editor.getEfficientZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with many shapes above threshold', () => {
+		let editorWithManyShapes: TestEditor
+
+		beforeEach(() => {
+			// Use a lower threshold for testing
+			editorWithManyShapes = new TestEditor({
+				options: { debouncedZoomThreshold: 5 },
+			})
+			editorWithManyShapes.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+
+			// Add shapes above the threshold
+			for (let i = 0; i < 10; i++) {
+				editorWithManyShapes.createShape({
+					type: 'geo',
+					x: i * 100,
+					y: 0,
+					props: { w: 50, h: 50 },
+				})
+			}
+		})
+
+		it('returns debounced zoom level when above shape threshold and camera is moving', () => {
+			// First zoom to capture a debounced value
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			const capturedZoom = editorWithManyShapes.getEfficientZoomLevel()
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Zoom again while still moving
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Should return the captured zoom, not the current zoom
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(capturedZoom)
+			expect(editorWithManyShapes.getEfficientZoomLevel()).not.toBe(
+				editorWithManyShapes.getZoomLevel()
+			)
+		})
+
+		it('returns current zoom level when above threshold but camera is idle', () => {
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			editorWithManyShapes.forceTick(5)
+			expect(editorWithManyShapes.getCameraState()).toBe('idle')
+
+			// Should return current zoom because camera is idle
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(editorWithManyShapes.getZoomLevel())
+		})
+	})
+})

package/src/test/commands/createShape.test.ts

@@ -0,0 +1,64 @@
+import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+it('Uses typescript generics', () => {
+	expect(() => {
+		editor.createShape(
+			//@ts-expect-error Yep error because we are giving the wrong props to the shape
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: { w: 'OH NO' },
+			}
+		)
+
+		// Errors when creating a shape with unknown props
+		editor.createShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				foo: 'bar',
+			},
+		})
+
+		// Yep error here because we are giving the wrong props to the shape
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// Yep error here because we are giving the wrong generic
+		editor.createShape<TLArrowShape>({
+			id: ids.box1,
+			//@ts-expect-error
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// All good, correct match of generic and shape type
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: { w: 100 },
+		})
+
+		editor.createShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+		})
+	}).toThrow()
+})

package/src/test/commands/createShapes.test.ts

@@ -19,14 +19,28 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// No error here because no generic, the editor doesn't know what this guy is
+		// Yep error because we are giving the wrong props to the shape
 		editor.createShapes([
+			//@ts-expect-error
 			{
 				id: ids.box1,
 				type: 'geo',
 				props: { w: 'OH NO' },
 			},
 		])
+
+		// Errors when creating shapes with unknown props
+		editor.createShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: {
+					// @ts-expect-error
+					foo: 'bar',
+				},
+			},
+		])
+
 		// Yep error here because we are giving the wrong props to the shape
 		editor.createShapes<TLGeoShape>([
 			{