tldraw 3.16.0-canary.ffdf566dd0a8 → 3.16.0-internal.a478398270c6

package/src/test/shapeutils.test.ts

@@ -1,4 +1,4 @@
-import { createShapeId, TLFrameShape, TLGeoShape, TLLineShape } from '@tldraw/editor'
+import { createShapeId, TLFrameShape, TLGeoShape } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -11,8 +11,6 @@ const ids = {
 	frame1: createShapeId('frame1'),
 	box1: createShapeId('box1'),
 	box2: createShapeId('box2'),
-	line1: createShapeId('line1'),
-	page1: createShapeId('page1'),
 }
 
 beforeEach(() => {
@@ -58,93 +56,34 @@ describe('When interacting with a shape...', () => {
 		// Set start / change / end events on only the geo shape
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const calls: string[] = []
-
-		util.onRotateStart = () => {
-			calls.push('start')
-		}
-
-		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',
-		})
-
-		// 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.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')
-		}
+		const fnStart = jest.fn()
+		util.onRotateStart = fnStart
 
-		util.onRotateEnd = () => {
-			calls.push('end')
-		}
+		const fnChange = jest.fn()
+		util.onRotate = fnChange
 
-		util.onRotateCancel = () => {
-			calls.push('cancel')
-		}
+		const fnEnd = jest.fn()
+		util.onRotateEnd = fnEnd
 
 		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
+			.pointerDown(300, 300, {
+				target: 'selection',
+				handle: 'bottom_right_rotate',
+			})
+			.pointerMove(200, 200)
+			.pointerUp(200, 200)
 
-		editor.pointerMove(200, 210)
-
-		// Should have called start once and change multiple times
-		expect(calls).toEqual(['start', 'change', 'change'])
+		// Once on start (for frame only)
+		expect(fnStart).toHaveBeenCalledTimes(1)
 
-		editor.cancel()
+		// Once on start, once during the move
+		expect(fnChange).toHaveBeenCalledTimes(2)
 
-		// Should have called cancel instead of end
-		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
 	})
 
 	it('cleans up events', () => {
@@ -166,19 +105,14 @@ describe('When interacting with a shape...', () => {
 	it('Fires resisizing events', () => {
 		const util = editor.getShapeUtil<TLFrameShape>('frame')
 
-		const calls: string[] = []
-
-		util.onResizeStart = () => {
-			calls.push('start')
-		}
+		const fnStart = jest.fn()
+		util.onResizeStart = fnStart
 
-		util.onResize = () => {
-			calls.push('change')
-		}
+		const fnChange = jest.fn()
+		util.onResize = fnChange
 
-		util.onResizeEnd = () => {
-			calls.push('end')
-		}
+		const fnEnd = jest.fn()
+		util.onResizeEnd = fnEnd
 
 		editor.selectAll()
 		expect(editor.getSelectedShapeIds()).toMatchObject([ids.frame1, ids.box1])
@@ -189,165 +123,48 @@ 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')
 
-		// 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 (for frame only)
+		expect(fnStart).toHaveBeenCalledTimes(1)
 
-		editor.cancel()
+		// Once on start, once during the resize
+		expect(fnChange).toHaveBeenCalledTimes(2)
 
-		// Should have called cancel instead of end
-		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
 	})
 
 	it('Fires translating 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')
-		}
-
-		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.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')
-		}
+		const fnStart = jest.fn()
+		util.onTranslateStart = fnStart
 
-		util.onTranslateEnd = () => {
-			calls.push('end')
-		}
+		const fnChange = jest.fn()
+		util.onTranslate = fnChange
 
-		util.onTranslateCancel = () => {
-			calls.push('cancel')
-		}
+		const fnEnd = jest.fn()
+		util.onTranslateEnd = fnEnd
 
 		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)
+		editor.pointerDown(50, 50, ids.box1).pointerMove(50, 40).pointerUp(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'])
+		// Once on start for frame
+		expect(fnStart).toHaveBeenCalledTimes(1)
 
-		editor.cancel()
+		// Once on start, once during the move
+		expect(fnChange).toHaveBeenCalledTimes(2)
 
-		// Should have called cancel instead of end
-		expect(calls).toEqual(['start', 'change', 'change', 'cancel'])
+		// Once on end
+		expect(fnEnd).toHaveBeenCalledTimes(1)
 	})
 
 	it('Uses the shape utils onClick handler', () => {
@@ -384,170 +201,4 @@ 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

@@ -151,7 +151,7 @@ describe('When translating...', () => {
 		editor
 			// The change is bigger than expected because the camera moves
 			.expectShapeToMatch({ id: ids.box1, x: -65, y: 10 })
-			// We'll continue moving in the x position, but now we'll also move in the y position.
+			// We'll continue moving in the x postion, 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)