tldraw 4.2.2 → 4.2.3

package/src/test/flipShapes.test.ts

@@ -637,36 +637,3 @@ it('Updates the image shape flip properties when flipped', () => {
 	editor.flipShapes(editor.getSelectedShapeIds(), 'vertical')
 	expect(editor.getLastCreatedShape<TLImageShape>().props.flipY).toBe(true)
 })
-
-it('Restores flipped shape positions when shape is rotated', () => {
-	editor.selectAll().rotateSelection(PI / 2.5)
-	const before = editor.getSelectedShapes()
-	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
-	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
-	const after = editor.getSelectedShapes()
-	expect(after.length).toBe(before.length)
-	for (let i = 0; i < before.length; i++) {
-		expect(after[i]).toCloselyMatchObject(before[i])
-	}
-})
-
-it('Restores flipped shape positions with draw shapes when shape is rotated', () => {
-	editor
-		.cancel()
-		.setCurrentTool('draw')
-		.pointerDown(0, 0)
-		.pointerMove(-100, -100)
-		.pointerMove(0, -100)
-		.pointerMove(100, 100)
-		.pointerUp()
-
-	editor.selectAll().rotateSelection(PI / 2.5)
-	const before = editor.getSelectedShapes()
-	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
-	editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
-	const after = editor.getSelectedShapes()
-	expect(after.length).toBe(before.length)
-	for (let i = 0; i < before.length; i++) {
-		expect(after[i]).toCloselyMatchObject(before[i])
-	}
-})

package/src/test/frames.test.ts

@@ -10,7 +10,6 @@ import {
 } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
-import { FrameShapeUtil } from '../lib/shapes/frame/FrameShapeUtil'
 import { DEFAULT_FRAME_PADDING, fitFrameToContent, removeFrame } from '../lib/utils/frames/frames'
 import { TestEditor } from './TestEditor'
 
@@ -640,13 +639,9 @@ describe('frame shapes', () => {
 
 		editor.setCurrentTool('select')
 
-		// Not with enter key
 		editor.keyDown('Enter')
 		editor.keyUp('Enter')
-		expect(editor.getCurrentPageState().editingShapeId).toBe(null)
 
-		// Just with header click (tests against header's geometry)
-		editor.click(105, 95)
 		expect(editor.getCurrentPageState().editingShapeId).toBe(frameId)
 	})
 
@@ -855,93 +850,6 @@ describe('frame shapes', () => {
 		expect(editor.getSortedChildIdsForParent(insideFrameId)).toStrictEqual([rectAId, rectBId])
 		expect(editor.getSortedChildIdsForParent(outsideFrameId)).toStrictEqual([insideFrameId])
 	})
-
-	describe('resizeChildren configuration option', () => {
-		it('has default canResizeChildren behavior as false', () => {
-			const frameUtil = editor.getShapeUtil<TLFrameShape>('frame') as FrameShapeUtil
-			expect(frameUtil.options.resizeChildren).toBe(false)
-			expect(frameUtil.canResizeChildren()).toBe(false)
-		})
-
-		it('can be configured to allow resizing children', () => {
-			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: true })
-			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
-			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
-			expect(configuredFrameUtil.canResizeChildren()).toBe(true)
-		})
-
-		it('can be configured to disallow resizing children', () => {
-			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({ resizeChildren: false })
-			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
-			expect(configuredFrameUtil.options.resizeChildren).toBe(false)
-			expect(configuredFrameUtil.canResizeChildren()).toBe(false)
-		})
-
-		it('maintains other options when configuring resizeChildren', () => {
-			const ConfiguredFrameShapeUtil = FrameShapeUtil.configure({
-				resizeChildren: true,
-				showColors: true,
-			})
-			const configuredFrameUtil = new ConfiguredFrameShapeUtil(editor)
-			expect(configuredFrameUtil.options.resizeChildren).toBe(true)
-			expect(configuredFrameUtil.options.showColors).toBe(true)
-		})
-
-		it('resizes children when configured with resizeChildren: true', () => {
-			// Create a frame with a child shape using a configured frame util
-			editor.setCurrentTool('frame')
-			editor.pointerDown(100, 100).pointerMove(200, 200).pointerUp(200, 200)
-
-			const frameId = editor.getOnlySelectedShape()!.id
-
-			// Add a child shape
-			editor.setCurrentTool('geo')
-			editor.pointerDown(125, 125).pointerMove(175, 175).pointerUp(175, 175)
-
-			const childId = editor.getOnlySelectedShape()!.id
-
-			// Get initial bounds
-			const initialChildBounds = editor.getShapePageBounds(childId)!
-
-			// Create a new editor with configured frame util that allows resizing children
-			const configuredEditor = new TestEditor({
-				shapeUtils: [FrameShapeUtil.configure({ resizeChildren: true })],
-			})
-
-			// Create the same frame and child in the new editor
-			configuredEditor.createShapes([
-				{ id: frameId, type: 'frame', x: 100, y: 100, props: { w: 100, h: 100 } },
-				{
-					id: childId,
-					type: 'geo',
-					parentId: frameId,
-					x: 125,
-					y: 125,
-					props: { w: 50, h: 50 },
-				},
-			])
-
-			// Resize the frame to half size
-			configuredEditor.select(frameId)
-			configuredEditor.resizeSelection({ scaleX: 0.5, scaleY: 0.5 }, 'bottom_right')
-
-			// Verify the frame was resized
-			const resizedFrameBounds = configuredEditor.getShapePageBounds(frameId)!
-			expect(resizedFrameBounds).toCloselyMatchObject({
-				x: 100,
-				y: 100,
-				w: 50,
-				h: 50,
-			})
-
-			// Verify the child was also resized
-			const resizedChildBounds = configuredEditor.getShapePageBounds(childId)!
-			expect(resizedChildBounds.w).toBeCloseTo(initialChildBounds.w * 0.5)
-			expect(resizedChildBounds.h).toBeCloseTo(initialChildBounds.h * 0.5)
-
-			configuredEditor.dispose()
-		})
-	})
 })
 
 test('arrows bound to a shape within a group within a frame are reparented if the group is moved outside of the frame', () => {
@@ -1455,13 +1363,13 @@ describe('Unparenting behavior', () => {
 
 		// When the shape has a fill, it should not fall out of the frame
 		editor.undo()
-		editor.updateShape({ ...largeRect, props: { fill: 'solid' } })
+		editor.updateShape<TLGeoShape>({ ...largeRect, props: { fill: 'solid' } })
 		dragOntoFrame()
 		expect(editor.getShape(largeRect.id)!.parentId).toBe(frameId)
 
 		// When the shape has a label and that label is on top of the frame, it should not fall out of the frame
 		editor.undo()
-		editor.updateShape({
+		editor.updateShape<TLGeoShape>({
 			...largeRect,
 			props: { fill: 'none', richText: toRichText('hello') },
 		})

package/src/test/getCulledShapes.test.tsx

@@ -3,7 +3,7 @@ import {
 	Box,
 	RecordProps,
 	T,
-	TLShape,
+	TLBaseShape,
 	TLShapeId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -11,19 +11,11 @@ import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
-const UNCULLABLE_TYPE = 'uncullable'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalShapePropsMap {
-		[UNCULLABLE_TYPE]: { w: number; h: number }
-	}
-}
-
 // Custom uncullable shape type for testing canCull override
-type UncullableShape = TLShape<typeof UNCULLABLE_TYPE>
+type UncullableShape = TLBaseShape<'uncullable', { w: number; h: number }>
 
 class UncullableShapeUtil extends BaseBoxShapeUtil<UncullableShape> {
-	static override type = UNCULLABLE_TYPE
+	static override type = 'uncullable' as const
 	static override props: RecordProps<UncullableShape> = {
 		w: T.number,
 		h: T.number,

package/src/test/getShapeAtPoint.test.ts

@@ -1,4 +1,4 @@
-import { TLShape, createShapeId, toRichText } from '@tldraw/editor'
+import { TLGeoShape, TLShape, createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -146,7 +146,7 @@ describe('with hitLabels=true', () => {
 	it('hits geo shape label behind overlapping hollow shape', () => {
 		// label is empty
 		expect(editor.getShapeAtPoint({ x: 350, y: 350 }, opts)?.id).toBe(ids.box3)
-		editor.updateShape({
+		editor.updateShape<TLGeoShape>({
 			id: ids.box2,
 			type: 'geo',
 			props: { richText: toRichText('hello') },

package/src/test/groups.test.tsx

@@ -1,6 +1,5 @@
 import {
 	Box,
-	ExtractShapeByProps,
 	GroupShapeUtil,
 	TLArrowShape,
 	TLGroupShape,
@@ -36,16 +35,14 @@ const ids = {
 	groupA: createShapeId('groupA'),
 }
 
-type BoxShape = ExtractShapeByProps<{ fill: string }>
-
 const box = (
 	id: TLShapeId,
 	x: number,
 	y: number,
 	w = 10,
 	h = 10,
-	fill: BoxShape['props']['fill'] = 'solid'
-): TLShapePartial<BoxShape> => ({
+	fill = 'solid'
+): TLShapePartial => ({
 	type: 'geo',
 	id,
 	x,
@@ -1560,7 +1557,7 @@ describe('erasing', () => {
 		// move to group B
 		editor.pointerMove(65, 5)
 
-		expect(editor.getErasingShapeIds().length).toBe(3)
+		expect(editor.getErasingShapeIds().length).toBe(2)
 	})
 })
 
@@ -1983,7 +1980,7 @@ describe('Group opacity', () => {
 		editor.setOpacityForNextShapes(0.5)
 		editor.groupShapes(editor.getSelectedShapeIds())
 		const group = editor.getShape(onlySelectedId())!
-		assert(editor.isShapeOfType(group, 'group'))
+		assert(editor.isShapeOfType<TLGroupShape>(group, 'group'))
 		expect(group.opacity).toBe(1)
 	})
 })

package/src/test/modifiers.test.ts

@@ -13,25 +13,25 @@ it('Shift Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { shiftKey: true })
 	editor.pointerMove(100, 100, { shiftKey: false })
-	expect(editor.inputs.getShiftKey()).toBe(true)
+	expect(editor.inputs.shiftKey).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.getShiftKey()).toBe(false)
+	expect(editor.inputs.shiftKey).toBe(false)
 })
 
 it('Alt Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { altKey: true })
 	editor.pointerMove(100, 100, { altKey: false })
-	expect(editor.inputs.getAltKey()).toBe(true)
+	expect(editor.inputs.altKey).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.getAltKey()).toBe(false)
+	expect(editor.inputs.altKey).toBe(false)
 })
 
 it('Ctrl Key', () => {
 	editor.pointerDown(0, 0)
 	editor.pointerMove(100, 100, { ctrlKey: true })
 	editor.pointerMove(100, 100, { ctrlKey: false })
-	expect(editor.inputs.getCtrlKey()).toBe(true)
+	expect(editor.inputs.ctrlKey).toBe(true)
 	vi.advanceTimersByTime(200)
-	expect(editor.inputs.getCtrlKey()).toBe(false)
+	expect(editor.inputs.ctrlKey).toBe(false)
 })

package/src/test/resizing.test.ts

@@ -20,7 +20,6 @@ import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { TestEditor } from './TestEditor'
 import { getSnapLines } from './getSnapLines'
 import { roundedBox } from './roundedBox'
-import { createDrawSegments } from './test-jsx'
 
 vi.useFakeTimers()
 
@@ -905,12 +904,15 @@ describe('When resizing a shape with children', () => {
 					x: 100,
 					y: 100,
 					props: {
-						segments: createDrawSegments([
-							[
-								{ x: 0, y: 0, z: 0.5 },
-								{ x: 100, y: 100, z: 0.5 },
-							],
-						]),
+						segments: [
+							{
+								type: 'free',
+								points: [
+									{ x: 0, y: 0, z: 0.5 },
+									{ x: 100, y: 100, z: 0.5 },
+								],
+							},
+						],
 					},
 				},
 			])
@@ -3874,8 +3876,10 @@ it('uses the cross cursor when create resizing', () => {
 describe('Resizing text from the right edge', () => {
 	it('Resizes text from the right edge', () => {
 		const id = createShapeId()
-		editor.createShapes([{ id, type: 'text', props: { richText: toRichText('H') } }])
-		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello World') } }]) // auto size
+		editor.createShapes<TLTextShape>([{ id, type: 'text', props: { richText: toRichText('H') } }])
+		editor.updateShapes<TLTextShape>([
+			{ id, type: 'text', props: { richText: toRichText('Hello World') } },
+		]) // auto size
 
 		editor.select(id)
 
@@ -3901,8 +3905,10 @@ describe('Resizing text from the right edge', () => {
 		editor.updateInstanceState({ isCoarsePointer: true })
 
 		const id = createShapeId()
-		editor.createShapes([{ id, type: 'text', props: { richText: toRichText('H') } }])
-		editor.updateShapes([{ id, type: 'text', props: { richText: toRichText('Hello World') } }]) // auto size
+		editor.createShapes<TLTextShape>([{ id, type: 'text', props: { richText: toRichText('H') } }])
+		editor.updateShapes<TLTextShape>([
+			{ id, type: 'text', props: { richText: toRichText('Hello World') } },
+		]) // auto size
 
 		editor.select(id)
 
@@ -3948,7 +3954,7 @@ describe('When resizing near the edges of the screen', () => {
 
 describe('resizing text with autosize true', () => {
 	it('resizes text from the right side', () => {
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -3974,7 +3980,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the right side when alt key is pressed', () => {
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4001,7 +4007,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the left side', () => {
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4027,7 +4033,7 @@ describe('resizing text with autosize true', () => {
 	})
 
 	it('resizes text from the left side when alt is pressed', () => {
-		editor.createShape({
+		editor.createShape<TLTextShape>({
 			type: 'text',
 			x: 0,
 			y: 0,
@@ -4056,7 +4062,7 @@ describe('resizing text with autosize true', () => {
 
 describe('cancelling a resize operation', () => {
 	it('undoes any changes since the start of the resize operation', () => {
-		editor.createShape({
+		editor.createShape<TLGeoShape>({
 			type: 'geo',
 			x: 0,
 			y: 0,

package/src/test/selection-omnibus.test.ts

@@ -76,7 +76,7 @@ describe('Hovering shapes', () => {
 		editor.pointerMove(50, 50)
 		expect(editor.getHoveredShapeId()).toBe(null)
 
-		editor.updateShape({
+		editor.updateShape<TLGeoShape>({
 			id: ids.box1,
 			type: 'geo',
 			props: { richText: toRichText('hello') },
@@ -88,7 +88,7 @@ describe('Hovering shapes', () => {
 	})
 
 	it('selects a shape with a full label on pointer down', () => {
-		editor.updateShape({
+		editor.updateShape<TLGeoShape>({
 			id: ids.box1,
 			type: 'geo',
 			props: { richText: toRichText('hello') },
@@ -462,7 +462,7 @@ describe('when shape is hollow', () => {
 describe('when shape is a frame', () => {
 	let frame1: TLFrameShape
 	beforeEach(() => {
-		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
 		frame1 = editor.getShape<TLFrameShape>(ids.frame1)!
 	})
 
@@ -517,8 +517,8 @@ describe('when shape is a frame', () => {
 describe('When a shape is behind a frame', () => {
 	beforeEach(() => {
 		editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
-		editor.createShape({ id: ids.box1, type: 'geo', x: 25, y: 25 })
-		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape<TLGeoShape>({ id: ids.box1, type: 'geo', x: 25, y: 25 })
+		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
 	})
 
 	it('does not select the shape when clicked inside', () => {
@@ -548,8 +548,8 @@ describe('when shape is inside of a frame', () => {
 	let frame1: TLFrameShape
 	let box1: TLGeoShape
 	beforeEach(() => {
-		editor.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
-		editor.createShape({
+		editor.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+		editor.createShape<TLGeoShape>({
 			id: ids.box1,
 			parentId: ids.frame1,
 			type: 'geo',
@@ -703,15 +703,15 @@ describe('when a frame has multiple children', () => {
 	let box2: TLGeoShape
 	beforeEach(() => {
 		editor
-			.createShape({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
-			.createShape({
+			.createShape<TLFrameShape>({ id: ids.frame1, type: 'frame', props: { w: 100, h: 100 } })
+			.createShape<TLGeoShape>({
 				id: ids.box1,
 				parentId: ids.frame1,
 				type: 'geo',
 				x: 25,
 				y: 25,
 			})
-			.createShape({
+			.createShape<TLGeoShape>({
 				id: ids.box2,
 				parentId: ids.frame1,
 				type: 'geo',
@@ -849,7 +849,7 @@ describe('When shapes are overlapping', () => {
 	let box4: TLGeoShape
 	let box5: TLGeoShape
 	beforeEach(() => {
-		editor.createShapes([
+		editor.createShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
@@ -2194,7 +2194,7 @@ describe('long press', () => {
 	it('works correctly with screenbounds offset', () => {
 		editor.updateViewportScreenBounds(new Box(100, 100, 800, 600))
 		editor.pointerDown(201, 202)
-		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
 	})
 
 	it('works correctly with screenbounds offset', () => {
@@ -2202,7 +2202,7 @@ describe('long press', () => {
 		editor.pointerDown(201, 202)
 		vi.advanceTimersByTime(1000)
 		// without the fix added in this PR, it would have been 1, 2
-		expect(editor.inputs.getCurrentScreenPoint()).toMatchObject({ x: 101, y: 102 })
+		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
 	})
 })
 

package/src/test/shapeutils.test.ts

@@ -470,7 +470,7 @@ describe('When interacting with a shape...', () => {
 	})
 
 	it('Fires handle dragging cancel events', () => {
-		const util = editor.getShapeUtil('line')
+		const util = editor.getShapeUtil<TLLineShape>('line')
 
 		const calls: string[] = []
 

package/src/test/spacebarPanning.test.ts

@@ -16,16 +16,16 @@ beforeEach(() => {
 
 it('Sets cursor and state correctly', () => {
 	expect(editor.getInstanceState().cursor.type).toBe('default')
-	expect(editor.inputs.getIsPanning()).toBe(false)
+	expect(editor.inputs.isPanning).toBe(false)
 	editor.keyDown(' ')
-	expect(editor.inputs.getIsPanning()).toBe(true)
+	expect(editor.inputs.isPanning).toBe(true)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.pointerDown(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grabbing')
 	editor.pointerUp(0, 0)
 	expect(editor.getInstanceState().cursor.type).toBe('grab')
 	editor.keyUp(' ')
-	expect(editor.inputs.getIsPanning()).toBe(false)
+	expect(editor.inputs.isPanning).toBe(false)
 	expect(editor.getInstanceState().cursor.type).toBe('default')
 })
 
@@ -37,34 +37,16 @@ it('When holding spacebar and clicking and dragging, it pans the camera', () =>
 	editor.keyUp(' ')
 })
 
-it('When spacebar is held during pointer interaction, it activates panning', () => {
-	// This test verifies that holding spacebar prevents pointer events from
-	// being sent to the state chart, and instead activates panning mode.
-	editor.select(ids.box1)
-
-	// Start with pointer down on the shape
-	editor.pointerDown(150, 150, ids.box1)
-
-	// Hold spacebar before moving - should activate panning
-	editor.keyDown(' ')
-	expect(editor.inputs.getIsPanning()).toBe(true)
-	expect(editor.getInstanceState().cursor.type).toBe('grabbing') // 'grabbing' because pointer is down
-
-	// Moving the pointer should pan the camera, not translate the shape
-	const initialCamera = editor.getCamera()
+it('When holding spacebar, it updates cursor and does not send events to the state or change statecharts current active state', () => {
+	editor.pointerDown(150, 150, { target: 'canvas' })
 	editor.pointerMove(100, 100)
+	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
 
-	// Camera should have moved (panning)
-	const newCamera = editor.getCamera()
-	expect(newCamera.x).not.toBe(initialCamera.x)
-	expect(newCamera.y).not.toBe(initialCamera.y)
-
-	// Shape should not have moved (not translating)
-	editor.expectShapeToMatch({ id: ids.box1, x: 100, y: 100 })
-
-	editor.pointerUp()
+	editor.keyDown(' ')
+	editor.pointerMove(200, 200)
+	editor.expectCameraToBe(100, 100, 1)
+	editor.expectShapeToMatch({ id: ids.box1, x: 50, y: 50 })
 	editor.keyUp(' ')
-	expect(editor.inputs.getIsPanning()).toBe(false)
 })
 
 it('When holding spacebar, pressing the arrow keys moves over by one viewport', () => {

package/src/test/styles2.test.tsx

@@ -88,7 +88,7 @@ describe('Editor.styles', () => {
 	})
 
 	it('should return mixed for all mixed styles', () => {
-		editor.updateShapes([
+		editor.updateShapes<TLGeoShape>([
 			{
 				id: defaultShapesIds.box1,
 				type: 'geo',

package/src/test/styles3.test.ts

@@ -1,4 +1,4 @@
-import { createShapeId, toRichText } from '@tldraw/editor'
+import { TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -14,7 +14,7 @@ afterEach(() => {
 it("When changing the style of a geo shape, if the text label is empty, don't measure it", () => {
 	const id = createShapeId()
 
-	editor.createShapes([
+	editor.createShapes<TLGeoShape>([
 		{
 			id,
 			type: 'geo',
@@ -29,7 +29,7 @@ it("When changing the style of a geo shape, if the text label is empty, don't me
 
 	const boundsBefore = editor.getShapeGeometry(id).bounds
 
-	editor.updateShapes([
+	editor.updateShapes<TLGeoShape>([
 		{
 			id,
 			type: 'geo',
@@ -43,7 +43,7 @@ it("When changing the style of a geo shape, if the text label is empty, don't me
 it('When changing the style of a geo shape, if the text label has text, measure it and possibly update the size', () => {
 	const id = createShapeId()
 
-	editor.createShapes([
+	editor.createShapes<TLGeoShape>([
 		{
 			id,
 			type: 'geo',
@@ -58,7 +58,7 @@ it('When changing the style of a geo shape, if the text label has text, measure
 
 	const boundsBefore = editor.getShapeGeometry(id).bounds!
 
-	editor.updateShapes([
+	editor.updateShapes<TLGeoShape>([
 		{
 			id,
 			type: 'geo',