tldraw 3.16.0-canary.f60032f16651 → 3.16.0-canary.faec5de49906

package/src/test/resizing.test.ts

@@ -15,12 +15,13 @@ 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'
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 const ORDERED_ROTATE_CORNERS: TLSelectionHandle[] = [
 	'top_left_rotate',
@@ -544,7 +545,7 @@ describe('Reisizing a selection of multiple shapes', () => {
 		// └──────────────────O
 
 		editor.pointerMove(15, 8, { altKey: false, shiftKey: true })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(roundedBox(editor.getSelectionPageBounds()!)).toMatchObject({ w: 15, h: 15 })
 		expect(roundedPageBounds(ids.boxA)).toMatchObject({ x: 0, y: 0, w: 5, h: 5 })
@@ -593,7 +594,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 })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShape(ids.boxB)!.rotation).toBeCloseTo(canonicalizeRotation(-PI / 2))
 
@@ -740,7 +741,7 @@ describe('Reisizing a selection of multiple shapes', () => {
 		// └──────────────────O
 
 		editor.pointerMove(15, 8, { altKey: false, shiftKey: true })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(roundedBox(editor.getSelectionPageBounds()!)).toMatchObject({ w: 15, h: 15 })
 		expect(roundedPageBounds(ids.boxA)).toMatchObject({ x: 0, y: 0, w: 5, h: 5 })
@@ -2364,7 +2365,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 })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!).toMatchObject({
 			x: 40,
@@ -2432,7 +2433,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 })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!.x).toBeCloseTo(40)
 		expect(editor.getShapePageBounds(ids.boxX)!.y).toBeCloseTo(20)
@@ -2564,7 +2565,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 })
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShapePageBounds(ids.boxX)!.x).toBeCloseTo(40)
 		expect(editor.getShapePageBounds(ids.boxX)!.y).toBeCloseTo(40)
@@ -3824,36 +3825,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')
@@ -3942,7 +3943,7 @@ describe('When resizing near the edges of the screen', () => {
 				handle: 'top_left',
 			})
 			.pointerMove(-1, -1) // into the edge scrolling distance
-		jest.advanceTimersByTime(1000)
+		vi.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,3 +1,4 @@
+import { vi } from 'vitest'
 import { SelectTool } from '../lib/tools/SelectTool/SelectTool'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
@@ -28,12 +29,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
-			// jest.advanceTimersByTime(1000)
+			// vi.advanceTimersByTime(1000)
 			// editor.pointerDown(50, 50, shapeId)
 			// expect(editor.currentPageState.editingShapeId).toBe(shapeId)
 
 			// clicking outside the shape should end editing
-			jest.advanceTimersByTime(1000)
+			vi.advanceTimersByTime(1000)
 
 			editor.pointerDown(150, 150).pointerUp()
 			expect(editor.getCurrentPageState().editingShapeId).toBe(null)
@@ -51,7 +52,7 @@ describe(SelectTool, () => {
 		expect(editor.getCurrentPageState().editingShapeId).toBe(shapeId)
 
 		// clicking outside the shape should end editing
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 
 		editor.pointerDown(150, 150).pointerUp()
 		expect(editor.getCurrentPageState().editingShapeId).toBe(null)

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

@@ -7,6 +7,7 @@ import {
 	tlenv,
 	toRichText,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -1652,7 +1653,7 @@ describe('shift brushes to add to the selection', () => {
 		editor.keyUp('Shift')
 		// there's a timer here—we should keep the shift mode until the timer expires
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box2, ids.box1])
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 		// once the timer expires, we should be back in regular mode
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
 		editor.keyDown('Shift')
@@ -1722,7 +1723,7 @@ describe('scribble brushes to add to the selection', () => {
 		editor.pointerMove(50, 50)
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box2])
 		editor.keyUp('Shift')
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
 		editor.keyDown('Shift')
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box2])
@@ -1739,7 +1740,7 @@ describe('scribble brushes to add to the selection', () => {
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box4])
 		editor.keyUp('Alt') // scribble
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box4]) // still in timer
-		jest.advanceTimersByTime(1000) // let timer expire
+		vi.advanceTimersByTime(1000) // let timer expire
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box3, ids.box4]) // brushed!
 		editor.keyDown('Alt') // scribble
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box4]) // back to brushed only
@@ -1824,7 +1825,7 @@ describe('When brushing close to the edges of the screen', () => {
 		editor.pointerMove(300, 300)
 		editor.pointerDown()
 		editor.pointerMove(0, 0)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		editor.pointerUp()
 		const camera2 = editor.getCamera()
 		expect(camera2.x).toBeGreaterThan(camera1.x) // for some reason > is left
@@ -1837,7 +1838,7 @@ describe('When brushing close to the edges of the screen', () => {
 		editor.pointerMove(300, 300)
 		editor.pointerDown()
 		editor.pointerMove(100, 100)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		editor.pointerUp()
 		const camera2 = editor.getCamera()
 		// should NOT have moved the camera by edge scrolling
@@ -1851,7 +1852,7 @@ describe('When brushing close to the edges of the screen', () => {
 		editor.pointerMove(300, 300)
 		editor.pointerDown()
 		editor.pointerMove(100, 100)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		editor.pointerUp()
 		const camera4 = editor.getCamera()
 		// should NOT have moved the camera by edge scrolling because the edge is now "inset"
@@ -1860,7 +1861,7 @@ describe('When brushing close to the edges of the screen', () => {
 
 		editor.pointerDown()
 		editor.pointerMove(90, 90) // off the edge of the component
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		const camera5 = editor.getCamera()
 		// should have moved the camera by edge scrolling off the component edge
 		expect(camera5.x).toBeGreaterThan(camera4.x)
@@ -1882,7 +1883,7 @@ describe('When brushing close to the edges of the screen', () => {
 		editor.pointerMove(0, 0)
 		// still only box 1...
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		// ...but now viewport will have moved to select box2 as well
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1, ids.box2])
 		editor.pointerUp()
@@ -1902,7 +1903,7 @@ describe('When brushing close to the edges of the screen', () => {
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
 		editor.pointerMove(0, 0)
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		expect(editor.getSelectedShapeIds()).toEqual([ids.box1])
 		editor.pointerUp()
 	})
@@ -2199,7 +2200,7 @@ describe('long press', () => {
 	it('works correctly with screenbounds offset', () => {
 		editor.updateViewportScreenBounds(new Box(100, 100, 800, 600))
 		editor.pointerDown(201, 202)
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		// without the fix added in this PR, it would have been 1, 2
 		expect(editor.inputs.currentScreenPoint).toMatchObject({ x: 101, y: 102 })
 	})

package/src/test/shapeutils.test.ts

@@ -1,4 +1,5 @@
 import { createShapeId, TLFrameShape, TLGeoShape, TLLineShape } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -155,7 +156,7 @@ describe('When interacting with a shape...', () => {
 	it('fires double click handler event', () => {
 		const util = editor.getShapeUtil<TLGeoShape>('geo')
 
-		const fnStart = jest.fn()
+		const fnStart = vi.fn()
 		util.onDoubleClick = fnStart
 
 		editor.doubleClick(50, 50, ids.box2)
@@ -353,7 +354,7 @@ describe('When interacting with a shape...', () => {
 	it('Uses the shape utils onClick handler', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnClick = jest.fn()
+		const fnClick = vi.fn()
 		util.onClick = fnClick
 
 		editor.pointerDown(50, 50, ids.frame1)
@@ -367,7 +368,7 @@ describe('When interacting with a shape...', () => {
 	it('Uses the shape utils onClick handler', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnClick = jest.fn((shape: any) => {
+		const fnClick = vi.fn((shape: any) => {
 			return {
 				...shape,
 				x: 100,

package/src/test/translating.test.ts

@@ -11,6 +11,7 @@ import {
 	Vec,
 	createShapeId,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { getArrowBindings } from '../lib/shapes/arrow/shared'
 import { TranslatingInfo } from '../lib/tools/SelectTool/childStates/Translating'
 import { TestEditor } from './TestEditor'
@@ -41,7 +42,7 @@ const ids = {
 }
 
 beforeEach(() => {
-	console.error = jest.fn()
+	console.error = vi.fn()
 	editor = new TestEditor({
 		options: {
 			adjacentShapeMargin: 20,
@@ -154,7 +155,7 @@ describe('When translating...', () => {
 			// We'll continue moving in the x position, but now we'll also move in the y position.
 			// The speed in the y position is smaller since we are further away from the edge.
 			.pointerMove(0, 25)
-		jest.advanceTimersByTime(100)
+		vi.advanceTimersByTime(100)
 		editor.pointerUp()
 
 		const after = editor.getShape<TLGeoShape>(ids.box1)!
@@ -254,7 +255,7 @@ describe('When cloning...', () => {
 
 		// Stop cloning!
 		editor.keyUp('Alt')
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		editor.expectShapeToMatch({ id: ids.box1, x: 20, y: 0 }) // A should be at the translated position...
 		expect(editor.getShape(newShape.id)).toBeUndefined() // And the new node should be gone!
@@ -289,7 +290,7 @@ describe('When cloning...', () => {
 		editor.keyUp('Alt')
 
 		// wait 500ms
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 		editor
 			.expectShapeToMatch({ id: ids.box1, x: 20, y: 0 }) // A should be at the translated position...
 			.expectShapeToMatch({ id: ids.box2, x: 210, y: 190 }) // B should be at the translated position...
@@ -327,7 +328,7 @@ describe('When cloning...', () => {
 		// Stop cloning!
 		editor.keyUp('Alt')
 		// wait 500ms
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		editor.expectShapeToMatch({ id: ids.box2, x: 210, y: 190 }) // B should be at the translated position...
 		expect(editor.getShape(cloneB.id)).toBeUndefined() // And the new node A should be gone!
@@ -352,7 +353,7 @@ describe('When cloning...', () => {
 		expect(editor.getCurrentPageShapes().length).toBe(count1 + 3) // 2 new box and group
 
 		editor.keyUp('Alt')
-		jest.advanceTimersByTime(500)
+		vi.advanceTimersByTime(500)
 
 		expect(editor.getCurrentPageShapes().length).toBe(count1) // 2 new box and group
 
@@ -500,7 +501,7 @@ describe('snapping with single shapes', () => {
 
 		// release ctrl key and it unsnaps
 		editor.keyUp('Control')
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		expect(editor.getShape(ids.box2)!).toMatchObject({ x: 11, y: 0 })
 
@@ -2325,7 +2326,7 @@ it('preserves z-indexes when translating', () => {
 	editor.pointerDown(50, 50)
 	editor.pointerMove(60, 60)
 
-	jest.advanceTimersByTime(500)
+	vi.advanceTimersByTime(500)
 
 	const ordered2 = editor.getCurrentPageShapesSorted().map((s) => s.id)
 	expect(ordered2.indexOf(box1.id)).toBe(0)