tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/test/navigation.test.ts

@@ -1,5 +1,4 @@
 import { createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -55,7 +54,7 @@ describe('Shape navigation', () => {
 		])
 
 		// Mock canTabTo to return false for the second shape
-		vi.spyOn(editor.getShapeUtil('geo'), 'canTabTo').mockImplementation((shape) => {
+		jest.spyOn(editor.getShapeUtil('geo'), 'canTabTo').mockImplementation((shape) => {
 			return shape.id !== ids.box2
 		})
 
@@ -101,7 +100,7 @@ describe('Shape navigation', () => {
 		editor.select(ids.box1)
 
 		// Spy on zoomToSelectionIfOffscreen method
-		const zoomSpy = vi.spyOn(editor, 'zoomToSelectionIfOffscreen')
+		const zoomSpy = jest.spyOn(editor, 'zoomToSelectionIfOffscreen')
 
 		// Navigate to next shape (offscreen)
 		editor.selectAdjacentShape('next')
@@ -120,7 +119,7 @@ describe('Shape navigation', () => {
 		])
 
 		// Mock a culled shape (not rendered)
-		vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+		jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 			// Return normal bounds for box1, null for box2 as if it's culled/not rendered
 			if (shape?.id === ids.box2) {
 				// Still return bounds, but pretend it was calculated even though shape is culled
@@ -151,7 +150,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers for the test
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.boxA) {
 					return { center: { x: 10, y: 110 } } as any
 				}
@@ -183,7 +182,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers for the test
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.center) {
 					return { center: { x: 100, y: 100 } } as any
 				}
@@ -220,7 +219,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.center) return { center: { x: 200, y: 200 } } as any
 				if (shape?.id === ids.right) return { center: { x: 300, y: 200 } } as any
 				if (shape?.id === ids.left) return { center: { x: 100, y: 200 } } as any
@@ -259,7 +258,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.center) return { center: { x: 200, y: 200 } } as any
 				if (shape?.id === ids.nearRight) return { center: { x: 250, y: 200 } } as any
 				if (shape?.id === ids.farRight) return { center: { x: 350, y: 200 } } as any
@@ -285,7 +284,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.box1) return { center: { x: 50, y: 50 } } as any
 				if (shape?.id === ids.box2) return { center: { x: 150, y: 50 } } as any
 				if (shape?.id === ids.box3) return { center: { x: 150, y: 150 } } as any
@@ -415,260 +414,6 @@ describe('Shape navigation', () => {
 			expect(editor.getSelectedShapeIds()).toEqual([])
 		})
 
-		it('respects container boundaries when navigating with left/right', () => {
-			// Create a frame with shapes inside and shapes outside
-			editor.createShapes([
-				{
-					id: ids.frame1,
-					type: 'frame',
-					x: 0,
-					y: 0,
-					props: {
-						w: 200,
-						h: 200,
-					},
-				},
-				// Shapes inside frame
-				{
-					id: ids.box1,
-					type: 'geo',
-					x: 10,
-					y: 100,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box2,
-					type: 'geo',
-					x: 50,
-					y: 100,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box3,
-					type: 'geo',
-					x: 90,
-					y: 100,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				// Shapes outside frame
-				{
-					id: ids.box4,
-					type: 'geo',
-					x: 300,
-					y: 100,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box5,
-					type: 'geo',
-					x: 350,
-					y: 100,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-			])
-
-			// Setup shape centers for consistent testing
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
-				const positions = {
-					[ids.box1]: { x: 25, y: 115 },
-					[ids.box2]: { x: 65, y: 115 },
-					[ids.box3]: { x: 105, y: 115 },
-					[ids.box4]: { x: 315, y: 115 },
-					[ids.box5]: { x: 365, y: 115 },
-				}
-				const pos = positions[shape?.id as keyof typeof positions]
-				return pos ? ({ center: pos } as any) : ({ center: { x: 0, y: 0 } } as any)
-			})
-
-			// Select a shape inside the frame
-			editor.select(ids.box1)
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-
-			// Navigate right - should stay within the frame
-			editor.selectAdjacentShape('right')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
-
-			// Continue navigating right - should still stay within the frame
-			editor.selectAdjacentShape('right')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
-
-			// Navigate right again - should not leave the frame to go to box4
-			editor.selectAdjacentShape('right')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box3]) // Should stay at box3
-
-			// Now navigate left to test the other direction
-			editor.selectAdjacentShape('left')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
-
-			editor.selectAdjacentShape('left')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-
-			// Navigate left again - should not leave the frame
-			editor.selectAdjacentShape('left')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1]) // Should stay at box1
-
-			// Now test navigation outside the frame
-			editor.select(ids.box4)
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
-
-			// Navigate right - should move to box5
-			editor.selectAdjacentShape('right')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box5])
-
-			// Navigate left - should move back to box4
-			editor.selectAdjacentShape('left')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
-
-			// Navigate left again - should select the frame (nearest shape to the left)
-			editor.selectAdjacentShape('left')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.frame1]) // Should select frame1
-		})
-
-		it('respects container boundaries when navigating with up/down', () => {
-			// Create a frame with shapes inside and shapes outside
-			editor.createShapes([
-				{
-					id: ids.frame1,
-					type: 'frame',
-					x: 0,
-					y: 0,
-					props: {
-						w: 200,
-						h: 200,
-					},
-				},
-				// Shapes inside frame - vertically arranged
-				{
-					id: ids.box1,
-					type: 'geo',
-					x: 100,
-					y: 10,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box2,
-					type: 'geo',
-					x: 100,
-					y: 50,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box3,
-					type: 'geo',
-					x: 100,
-					y: 90,
-					parentId: ids.frame1,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				// Shapes outside frame - vertically arranged
-				{
-					id: ids.box4,
-					type: 'geo',
-					x: 300,
-					y: 10,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-				{
-					id: ids.box5,
-					type: 'geo',
-					x: 300,
-					y: 50,
-					props: {
-						w: 30,
-						h: 30,
-					},
-				},
-			])
-
-			// Setup shape centers for consistent testing
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
-				const positions = {
-					[ids.box1]: { x: 115, y: 25 },
-					[ids.box2]: { x: 115, y: 65 },
-					[ids.box3]: { x: 115, y: 105 },
-					[ids.box4]: { x: 315, y: 25 },
-					[ids.box5]: { x: 315, y: 65 },
-				}
-				const pos = positions[shape?.id as keyof typeof positions]
-				return pos ? ({ center: pos } as any) : ({ center: { x: 0, y: 0 } } as any)
-			})
-
-			// Select a shape inside the frame
-			editor.select(ids.box1)
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-
-			// Navigate down - should stay within the frame
-			editor.selectAdjacentShape('down')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
-
-			// Continue navigating down - should still stay within the frame
-			editor.selectAdjacentShape('down')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box3])
-
-			// Navigate down again - should not leave the frame
-			editor.selectAdjacentShape('down')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box3]) // Should stay at box3
-
-			// Now navigate up to test the other direction
-			editor.selectAdjacentShape('up')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box2])
-
-			editor.selectAdjacentShape('up')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-
-			// Navigate up again - should not leave the frame
-			editor.selectAdjacentShape('up')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box1]) // Should stay at box1
-
-			// Now test navigation outside the frame
-			editor.select(ids.box4)
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
-
-			// Navigate down - should move to box5
-			editor.selectAdjacentShape('down')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box5])
-
-			// Navigate up - should move back to box4
-			editor.selectAdjacentShape('up')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
-
-			// Navigate up again - should not enter the frame
-			editor.selectAdjacentShape('up')
-			expect(editor.getSelectedShapeIds()).toEqual([ids.box4]) // Should stay at box4
-		})
-
 		it('respects container boundaries when navigating with Tab', () => {
 			// Create a frame with shapes inside and shapes outside
 			editor.createShapes([
@@ -1007,7 +752,7 @@ describe('Shape navigation', () => {
 			])
 
 			// Setup shape centers
-			vi.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
+			jest.spyOn(editor, 'getShapePageBounds').mockImplementation((shape: any) => {
 				if (shape?.id === ids.row1Shape1) return { center: { x: 50, y: 50 } } as any
 				if (shape?.id === ids.row1Shape2) return { center: { x: 150, y: 50 } } as any
 				if (shape?.id === ids.row1Shape3) return { center: { x: 250, y: 50 } } as any

package/src/test/panning.test.ts

@@ -1,7 +1,6 @@
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 let editor: TestEditor
 

package/src/test/perf/perf.test.ts

@@ -1,11 +1,10 @@
 import { TLShapePartial, Vec, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 import { PerformanceMeasurer } from './PerformanceMeasurer'
 
 let editor = new TestEditor()
 
-vi.useRealTimers()
+jest.useRealTimers()
 
 describe.skip('Example perf tests', () => {
 	it('measures Editor.createShape vs Editor.createShapes', () => {

package/src/test/registerDeepLinkListener.test.tsx

@@ -1,9 +1,8 @@
 import { PageRecordType, Vec, createShapeId } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 let editor: TestEditor
 
@@ -21,20 +20,20 @@ beforeEach(() => {
 test('it creates a listener that updates the current url', async () => {
 	const unlisten = editor.registerDeepLinkListener()
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?d=v0.0.1080.720.page"`)
 
 	const pageId = PageRecordType.createId('foo')
 	editor.createPage({ id: pageId })
 	editor.setCurrentPage(pageId)
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?d=v0.0.1080.720.foo"`)
 
 	editor.pan({ x: 100, y: 100 })
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 
 	expect(window.location.href).toMatchInlineSnapshot(
 		`"http://localhost/test?d=v-100.-100.1080.720.foo"`
@@ -44,7 +43,7 @@ test('it creates a listener that updates the current url', async () => {
 
 	editor.pan({ x: 500, y: 500 })
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 
 	expect(window.location.href).toMatchInlineSnapshot(
 		`"http://localhost/test?d=v-100.-100.1080.720.foo"`
@@ -76,7 +75,7 @@ test('it allows specifying a page target', async () => {
 		param: 'foo',
 	})
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 
 	// no shapes yet
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?foo=ppage"`)
@@ -88,19 +87,19 @@ test('it allows specifying a page target', async () => {
 		<TL.geo id={boxB} x={1000} y={1000} w={100} h={100} />,
 	])
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?foo=sa"`)
 
 	editor.pan({ x: -1000, y: -1000 })
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?foo=sb"`)
 
 	unlisten()
 
 	editor.pan({ x: 1000, y: 1000 })
 
-	vi.advanceTimersByTime(1000)
+	jest.advanceTimersByTime(1000)
 	expect(window.location.href).toMatchInlineSnapshot(`"http://localhost/test?foo=sb"`)
 	expect(getNearestShape().id).toBe(boxA)
 })

package/src/test/resizing.test.ts

@@ -15,13 +15,12 @@ import {
 	rotateSelectionHandle,
 	toRichText,
 } from '@tldraw/editor'
-import { vi } from 'vitest'
 import { NoteShapeUtil } from '../lib/shapes/note/NoteShapeUtil'
 import { TestEditor } from './TestEditor'
 import { getSnapLines } from './getSnapLines'
 import { roundedBox } from './roundedBox'
 
-vi.useFakeTimers()
+jest.useFakeTimers()
 
 const ORDERED_ROTATE_CORNERS: TLSelectionHandle[] = [
 	'top_left_rotate',
@@ -545,7 +544,7 @@ describe('Reisizing a selection of multiple shapes', () => {
 		// └──────────────────O
 
 		editor.pointerMove(15, 8, { altKey: false, shiftKey: true })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(roundedBox(editor.getSelectionPageBounds()!)).toMatchObject({ w: 15, h: 15 })
 		expect(roundedPageBounds(ids.boxA)).toMatchObject({ x: 0, y: 0, w: 5, h: 5 })
@@ -594,7 +593,7 @@ describe('Reisizing a selection of multiple shapes', () => {
 		editor.pointerDown(30, 20, { target: 'selection', handle: 'top_left_rotate' })
 		editor.pointerMove(20, 20, { shiftKey: true })
 		editor.pointerUp(20, 20, { shiftKey: false })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(editor.getShape(ids.boxB)!.rotation).toBeCloseTo(canonicalizeRotation(-PI / 2))
 
@@ -741,7 +740,7 @@ describe('Reisizing a selection of multiple shapes', () => {
 		// └──────────────────O
 
 		editor.pointerMove(15, 8, { altKey: false, shiftKey: true })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(roundedBox(editor.getSelectionPageBounds()!)).toMatchObject({ w: 15, h: 15 })
 		expect(roundedPageBounds(ids.boxA)).toMatchObject({ x: 0, y: 0, w: 5, h: 5 })
@@ -2365,7 +2364,7 @@ describe('snapping while resizing a shape that has been rotated by multiples of
 			.select(ids.boxX)
 			.pointerDown(100, 70, { target: 'selection', handle: 'top' })
 			.pointerMove(121, 70, { ctrlKey: true, shiftKey: false })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!).toMatchObject({
 			x: 40,
@@ -2433,7 +2432,7 @@ describe('snapping while resizing a shape that has been rotated by multiples of
 			.select(ids.boxX)
 			.pointerDown(70, 40, { target: 'selection', handle: 'bottom' })
 			.pointerMove(70, 18, { ctrlKey: true, shiftKey: false })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!.x).toBeCloseTo(40)
 		expect(editor.getShapePageBounds(ids.boxX)!.y).toBeCloseTo(20)
@@ -2565,7 +2564,7 @@ describe('snapping while resizing a shape that has been rotated by multiples of
 			.select(ids.boxX)
 			.pointerDown(100, 70, { target: 'selection', handle: 'right' })
 			.pointerMove(121, 70, { ctrlKey: true, shiftKey: false })
-		vi.advanceTimersByTime(200)
+		jest.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!.x).toBeCloseTo(40)
 		expect(editor.getShapePageBounds(ids.boxX)!.y).toBeCloseTo(40)
@@ -3825,36 +3824,36 @@ describe('shapes that have do not resize', () => {
 //   })
 // })
 
-// describe('bugs', () => {
-// it('resizing a zero width shape', () => {
-//	// Draw shapes can no longer have zero width / height
-// 	const shapeId = createShapeId()
-// 	app
-// 		.createShapes([
-// 			{
-// 				id: shapeId,
-// 				type: 'draw',
-// 				x: 0,
-// 				y: 0,
-// 				props: {
-// 					segments: [
-// 						{
-// 							type: 'straight',
-// 							points: [
-// 								{ x: 0, y: 0 },
-// 								{ x: 0, y: 100 },
-// 							],
-// 						},
-// 					],
-// 				},
-// 			},
-// 		])
-// 		.select(shapeId)
-// 	expect(editor.selectionRotatedBounds!.width).toBe(0)
-// 	editor.pointerDown(0, 100, { target: 'selection', handle: 'bottom_right' }).pointerMove(10, 110)
-// 	expect(editor.selectionRotatedBounds!.width).toBe(0)
-// })
-// })
+describe('bugs', () => {
+	// it('resizing a zero width shape', () => {
+	//	// Draw shapes can no longer have zero width / height
+	// 	const shapeId = createShapeId()
+	// 	app
+	// 		.createShapes([
+	// 			{
+	// 				id: shapeId,
+	// 				type: 'draw',
+	// 				x: 0,
+	// 				y: 0,
+	// 				props: {
+	// 					segments: [
+	// 						{
+	// 							type: 'straight',
+	// 							points: [
+	// 								{ x: 0, y: 0 },
+	// 								{ x: 0, y: 100 },
+	// 							],
+	// 						},
+	// 					],
+	// 				},
+	// 			},
+	// 		])
+	// 		.select(shapeId)
+	// 	expect(editor.selectionRotatedBounds!.width).toBe(0)
+	// 	editor.pointerDown(0, 100, { target: 'selection', handle: 'bottom_right' }).pointerMove(10, 110)
+	// 	expect(editor.selectionRotatedBounds!.width).toBe(0)
+	// })
+})
 
 it('uses the cross cursor when create resizing', () => {
 	editor.setCurrentTool('geo')
@@ -3943,7 +3942,7 @@ describe('When resizing near the edges of the screen', () => {
 				handle: 'top_left',
 			})
 			.pointerMove(-1, -1) // into the edge scrolling distance
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 		const after = editor.getShape<TLGeoShape>(ids.boxA)!
 		expect(after.x).toBeLessThan(before.x)
 		expect(after.y).toBeLessThan(before.y)

package/src/test/select.test.tsx

@@ -1,4 +1,3 @@
-import { vi } from 'vitest'
 import { SelectTool } from '../lib/tools/SelectTool/SelectTool'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
@@ -29,12 +28,12 @@ describe(SelectTool, () => {
 			// clicking on the input will preserve selection, however you can
 			// click on the shape itself to select it as usual.
 			// clicking on the shape should not do anything
-			// vi.advanceTimersByTime(1000)
+			// jest.advanceTimersByTime(1000)
 			// editor.pointerDown(50, 50, shapeId)
 			// expect(editor.currentPageState.editingShapeId).toBe(shapeId)
 
 			// clicking outside the shape should end editing
-			vi.advanceTimersByTime(1000)
+			jest.advanceTimersByTime(1000)
 
 			editor.pointerDown(150, 150).pointerUp()
 			expect(editor.getCurrentPageState().editingShapeId).toBe(null)
@@ -52,7 +51,7 @@ describe(SelectTool, () => {
 		expect(editor.getCurrentPageState().editingShapeId).toBe(shapeId)
 
 		// clicking outside the shape should end editing
-		vi.advanceTimersByTime(1000)
+		jest.advanceTimersByTime(1000)
 
 		editor.pointerDown(150, 150).pointerUp()
 		expect(editor.getCurrentPageState().editingShapeId).toBe(null)