tldraw 3.15.0 → 3.16.0-canary.01f62b6d4455

package/src/test/shapeutils.test.ts

@@ -1,4 +1,5 @@
-import { createShapeId, TLFrameShape, TLGeoShape } from '@tldraw/editor'
+import { createShapeId, TLFrameShape, TLGeoShape, TLLineShape } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -11,6 +12,8 @@ const ids = {
 	frame1: createShapeId('frame1'),
 	box1: createShapeId('box1'),
 	box2: createShapeId('box2'),
+	line1: createShapeId('line1'),
+	page1: createShapeId('page1'),
 }
 
 beforeEach(() => {
@@ -56,34 +59,93 @@ describe('When interacting with a shape...', () => {
 		// Set start / change / end events on only the geo shape
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onRotateStart = fnStart
+		const calls: string[] = []
 
-		const fnChange = jest.fn()
-		util.onRotate = fnChange
+		util.onRotateStart = () => {
+			calls.push('start')
+		}
 
-		const fnEnd = jest.fn()
-		util.onRotateEnd = fnEnd
+		util.onRotate = () => {
+			calls.push('change')
+		}
+
+		util.onRotateEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
 
-		editor
-			.pointerDown(300, 300, {
-				target: 'selection',
-				handle: 'bottom_right_rotate',
-			})
-			.pointerMove(200, 200)
-			.pointerUp(200, 200)
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+		})
 
-		// Once on start (for frame only)
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
 
-		// Once on start, once during the move
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		editor.pointerMove(200, 200)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(200, 210)
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(200, 210)
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'change', 'end'])
+	})
+
+	it('fires rotate cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onRotateStart = () => {
+			calls.push('start')
+		}
+
+		util.onRotate = () => {
+			calls.push('change')
+		}
+
+		util.onRotateEnd = () => {
+			calls.push('end')
+		}
+
+		util.onRotateCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+		})
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(200, 200)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	it('cleans up events', () => {
@@ -94,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)
@@ -105,14 +167,19 @@ describe('When interacting with a shape...', () => {
 	it('Fires resisizing events', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onResizeStart = fnStart
+		const calls: string[] = []
+
+		util.onResizeStart = () => {
+			calls.push('start')
+		}
 
-		const fnChange = jest.fn()
-		util.onResize = fnChange
+		util.onResize = () => {
+			calls.push('change')
+		}
 
-		const fnEnd = jest.fn()
-		util.onResizeEnd = fnEnd
+		util.onResizeEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
@@ -123,54 +190,171 @@ describe('When interacting with a shape...', () => {
 		})
 
 		editor.expectToBeIn('select.pointing_resize_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
 		editor.pointerMove(200, 200)
 		editor.expectToBeIn('select.resizing')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
 		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
 		editor.pointerUp(200, 210)
 		editor.expectToBeIn('select.idle')
 
-		// Once on start (for frame only)
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'end'])
+	})
+
+	it('Fires resizing cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onResizeStart = () => {
+			calls.push('start')
+		}
+
+		util.onResize = () => {
+			calls.push('change')
+		}
+
+		util.onResizeEnd = () => {
+			calls.push('end')
+		}
+
+		util.onResizeCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		editor.pointerDown(300, 300, {
+			target: 'selection',
+			handle: 'bottom_right',
+		})
+
+		editor.expectToBeIn('select.pointing_resize_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(200, 200)
+		editor.expectToBeIn('select.resizing')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(200, 210)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
 
-		// Once on start, once during the resize
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		editor.cancel()
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	it('Fires translating events', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const fnStart = jest.fn()
-		util.onTranslateStart = fnStart
+		const calls: string[] = []
 
-		const fnChange = jest.fn()
-		util.onTranslate = fnChange
+		util.onTranslateStart = () => {
+			calls.push('start')
+		}
 
-		const fnEnd = jest.fn()
-		util.onTranslateEnd = fnEnd
+		util.onTranslate = () => {
+			calls.push('change')
+		}
+
+		util.onTranslateEnd = () => {
+			calls.push('end')
+		}
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
 
 		// Translate the shapes...
-		editor.pointerDown(50, 50, ids.box1).pointerMove(50, 40).pointerUp(50, 40)
+		editor.pointerDown(50, 50, ids.box1)
 
-		// Once on start for frame
-		expect(fnStart).toHaveBeenCalledTimes(1)
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(50, 40)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
 
-		// Once on start, once during the move
-		expect(fnChange).toHaveBeenCalledTimes(2)
+		editor.pointerMove(50, 35)
 
-		// Once on end
-		expect(fnEnd).toHaveBeenCalledTimes(1)
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(50, 35)
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'change', 'end'])
+	})
+
+	it('Fires translating cancel events', () => {
+		const util = editor.getShapeUtil<TLFrameShape>('frame')
+
+		const calls: string[] = []
+
+		util.onTranslateStart = () => {
+			calls.push('start')
+		}
+
+		util.onTranslate = () => {
+			calls.push('change')
+		}
+
+		util.onTranslateEnd = () => {
+			calls.push('end')
+		}
+
+		util.onTranslateCancel = () => {
+			calls.push('cancel')
+		}
+
+		editor.selectAll()
+		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
+
+		// Translate the shapes...
+		editor.pointerDown(50, 50, ids.box1)
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(50, 40)
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(50, 35)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
 	})
 
 	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)
@@ -184,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,
@@ -201,4 +385,170 @@ describe('When interacting with a shape...', () => {
 		// it should not be selected.
 		expect(editor.getSelectedShapeIds().length).toBe(0)
 	})
+
+	it('Fires handle dragging events', () => {
+		const util = editor.getShapeUtil<TLLineShape>('line')
+
+		const calls: string[] = []
+
+		util.onHandleDragStart = () => {
+			calls.push('start')
+		}
+
+		util.onHandleDrag = () => {
+			calls.push('change')
+		}
+
+		util.onHandleDragEnd = () => {
+			calls.push('end')
+		}
+
+		util.onHandleDragCancel = () => {
+			calls.push('cancel')
+		}
+
+		// Create a line shape with handles
+		const lineShape: TLLineShape = {
+			id: ids.line1,
+			type: 'line',
+			typeName: 'shape',
+			parentId: ids.page1,
+			index: 'a1' as any,
+			x: 100,
+			y: 100,
+			rotation: 0,
+			isLocked: false,
+			opacity: 1,
+			meta: {},
+			props: {
+				dash: 'draw',
+				size: 'm',
+				color: 'black',
+				spline: 'line',
+				scale: 1,
+				points: {
+					a1: { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2' as any, x: 100, y: 100 },
+				},
+			},
+		}
+
+		editor.createShapes([lineShape])
+
+		// Get the handle point
+		const handlePagePoint = editor
+			.getShapePageTransform(lineShape.id)!
+			.applyToPoint(lineShape.props.points['a2'])
+
+		editor.pointerDown(handlePagePoint.x, handlePagePoint.y, {
+			target: 'handle',
+			shape: editor.getShape(lineShape.id)!,
+			handle: { id: 'a2', type: 'vertex', index: 'a2' as any, x: 100, y: 100 },
+		})
+
+		editor.expectToBeIn('select.pointing_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(handlePagePoint.x + 20, handlePagePoint.y + 20) // Larger move to trigger drag
+		editor.expectToBeIn('select.dragging_handle')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(150, 150)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.pointerUp(150, 150)
+		editor.expectToBeIn('select.idle')
+
+		// Should have called end once now
+		expect(calls).toEqual(['start', 'change', 'change', 'end'])
+	})
+
+	it('Fires handle dragging cancel events', () => {
+		const util = editor.getShapeUtil<TLLineShape>('line')
+
+		const calls: string[] = []
+
+		util.onHandleDragStart = () => {
+			calls.push('start')
+		}
+
+		util.onHandleDrag = () => {
+			calls.push('change')
+		}
+
+		util.onHandleDragEnd = () => {
+			calls.push('end')
+		}
+
+		util.onHandleDragCancel = () => {
+			calls.push('cancel')
+		}
+
+		// Create a line shape with handles
+		const lineShape: TLLineShape = {
+			id: ids.line1,
+			type: 'line',
+			typeName: 'shape',
+			parentId: ids.page1,
+			index: 'a1' as any,
+			x: 100,
+			y: 100,
+			rotation: 0,
+			isLocked: false,
+			opacity: 1,
+			meta: {},
+			props: {
+				dash: 'draw',
+				size: 'm',
+				color: 'black',
+				spline: 'line',
+				scale: 1,
+				points: {
+					a1: { id: 'a1', index: 'a1' as any, x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2' as any, x: 100, y: 100 },
+				},
+			},
+		}
+
+		editor.createShapes([lineShape])
+
+		// Get the handle point
+		const handlePagePoint = editor
+			.getShapePageTransform(lineShape.id)!
+			.applyToPoint(lineShape.props.points['a2'])
+
+		editor.pointerDown(handlePagePoint.x, handlePagePoint.y, {
+			target: 'handle',
+			shape: editor.getShape(lineShape.id)!,
+			handle: { id: 'a2', type: 'vertex', index: 'a2' as any, x: 100, y: 100 },
+		})
+
+		editor.expectToBeIn('select.pointing_handle')
+
+		// Should not have called any callbacks yet
+		expect(calls).toEqual([])
+
+		editor.pointerMove(handlePagePoint.x + 20, handlePagePoint.y + 20) // Larger move to trigger drag
+		editor.expectToBeIn('select.dragging_handle')
+
+		// Should have called start once and change at least once now
+		expect(calls).toEqual(['start', 'change'])
+
+		editor.pointerMove(150, 150)
+
+		// Should have called start once and change multiple times
+		expect(calls).toEqual(['start', 'change', 'change'])
+
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Should have called cancel instead of end
+		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
+	})
 })

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)