tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

package/src/test/commands/getSvgString.test.ts

@@ -1,4 +1,4 @@
-import { DefaultDashStyle, TLGeoShape, createShapeId, toRichText } from '@tldraw/editor'
+import { DefaultDashStyle, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../TestEditor'
 
@@ -21,7 +21,7 @@ beforeEach(() => {
 	editor = new TestEditor()
 	editor.setStyleForNextShapes(DefaultDashStyle, 'solid')
 	editor.setStyleForSelectedShapes(DefaultDashStyle, 'solid')
-	editor.createShapes<TLGeoShape>([
+	editor.createShapes([
 		{
 			id: ids.boxA,
 			type: 'geo',

package/src/test/commands/isShapeOfType.test.ts

@@ -0,0 +1,44 @@
+import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+export declare function assertNever(x: never): never
+
+it('narrows down the shape type', () => {
+	const id = createShapeId('arrow1')
+	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
+
+	const shape = editor.getShape(id)!
+	if (editor.isShapeOfType(shape, 'arrow')) {
+		expect(shape.type === 'arrow').toBe(true)
+		expect(
+			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
+			shape.type === 'card'
+		).toBe(false)
+	}
+})
+
+it('narrows down the shape type with generic', () => {
+	const id = createShapeId('arrow1')
+	editor.createShape({ type: 'arrow', id, x: 0, y: 0 })
+
+	const shape = editor.getShape(id)!
+	if (editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
+		expect(shape.type === 'arrow').toBe(true)
+
+		expect(
+			// @ts-expect-error This comparison appears to be unintentional because the types '"arrow"' and '"card"' have no overlap.
+			shape.type === 'card'
+		).toBe(false)
+	}
+
+	// @ts-expect-error mismatch between the generic and the shape type
+	if (editor.isShapeOfType<TLArrowShape>(shape, 'card')) {
+		assertNever(shape)
+	}
+})

package/src/test/commands/putContent.test.ts

@@ -1,4 +1,4 @@
-import { TLContent, structuredClone } from '@tldraw/editor'
+import { TLContent, createShapeId, structuredClone } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -25,6 +25,7 @@ describe('Migrations', () => {
 
 	it('Throws error if any shape is invalid due to wrong type', () => {
 		const withInvalidShapeType = structuredClone(clipboardContent)
+		// @ts-expect-error
 		withInvalidShapeType.shapes[0].type = 'invalid'
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeType)).toThrow()
 	})
@@ -37,3 +38,81 @@ describe('Migrations', () => {
 		expect(() => editor.putContentOntoCurrentPage(withInvalidShapeModel)).toThrow()
 	})
 })
+
+describe('Paste parent selection with explicit point', () => {
+	it('falls back to the page when the cursor is outside the original parent', () => {
+		const frameId = createShapeId('frame')
+		const childId = createShapeId('child')
+
+		editor.createShapes([
+			{
+				id: frameId,
+				type: 'frame',
+				x: 0,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: childId,
+				type: 'geo',
+				parentId: frameId,
+				x: 40,
+				y: 40,
+				props: { w: 60, h: 60 },
+			},
+		])
+
+		editor.select(childId)
+		editor.copy()
+
+		editor.putContentOntoCurrentPage(editor.clipboard!, {
+			point: { x: 500, y: 500 },
+			select: true,
+		})
+
+		const [pastedId] = editor.getSelectedShapeIds()
+		expect(editor.getShape(pastedId)?.parentId).toBe(editor.getCurrentPageId())
+	})
+
+	it('uses the parent under the cursor when it can accept the pasted shapes', () => {
+		const frameAId = createShapeId('frameA')
+		const frameBId = createShapeId('frameB')
+		const childId = createShapeId('child')
+
+		editor.createShapes([
+			{
+				id: frameAId,
+				type: 'frame',
+				x: 0,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: frameBId,
+				type: 'frame',
+				x: 400,
+				y: 0,
+				props: { w: 200, h: 200 },
+			},
+			{
+				id: childId,
+				type: 'geo',
+				parentId: frameAId,
+				x: 40,
+				y: 40,
+				props: { w: 60, h: 60 },
+			},
+		])
+
+		editor.select(childId)
+		editor.copy()
+
+		editor.putContentOntoCurrentPage(editor.clipboard!, {
+			point: { x: 450, y: 50 },
+			select: true,
+		})
+
+		const [pastedId] = editor.getSelectedShapeIds()
+		expect(editor.getShape(pastedId)?.parentId).toBe(frameBId)
+	})
+})

package/src/test/commands/setCamera.test.ts

@@ -13,6 +13,8 @@ beforeEach(() => {
 	})
 	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
 	editor.user.updateUserPreferences({ inputMode: null })
+	editor._transformPointerDownSpy.mockRestore()
+	editor._transformPointerUpSpy.mockRestore()
 })
 
 const wheelEvent = {
@@ -255,8 +257,8 @@ describe('CameraOptions.panSpeed', () => {
 
 	it('Does not affect hand tool panning', () => {
 		editor.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, panSpeed: 2 })
-		editor.setCurrentTool('hand').pointerDown(0, 0).pointerMove(5, 10).forceTick()
-		expect(editor.getCamera()).toMatchObject({ x: 5, y: 10, z: 1 })
+		editor.setCurrentTool('hand').pointerDown(0, 0).pointerMove(50, 50)
+		expect(editor.getCamera()).toMatchObject({ x: 50, y: 50, z: 1 })
 	})
 
 	it('Does not affect spacebar panning (2x)', () => {
@@ -288,12 +290,12 @@ describe('CameraOptions.panSpeed', () => {
 			.createShape({ id: shapeId, type: 'geo', x: 10, y: 10 })
 			.select(shapeId)
 		const shape = editor.getSelectedShapes()[0]
-		editor.selectNone()
 		// Move shape far beyond bounds to trigger edge scrolling at maximum speed
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 0, z: 1 })
-		editor.pointerDown(shape.x, shape.y).pointerMove(-5000, -5000)
-		// At maximum speed and a zoom level of 1, the camera should move by 40px per tick if the screen
-		// is wider than 1000 pixels, or by 40 * 0.612px if it is smaller.
+		// pointerMove calls forceTick() internally, so we don't need an extra forceTick() call
+		editor.pointerDown(shape.x, shape.y, shapeId).forceTick().pointerMove(-5000, -5000)
+		// At maximum speed and a zoom level of 1, the camera should move by 25px per tick if the screen
+		// is wider than 1000 pixels, or by 25 * 0.612px if it is smaller.
 		const newX = viewportScreenBounds.w < 1000 ? 25 * 0.612 : 25
 		const newY = viewportScreenBounds.h < 1000 ? 25 * 0.612 : 25
 		expect(editor.getCamera()).toMatchObject({ x: newX, y: newY, z: 1 })
@@ -557,11 +559,11 @@ describe('When constraints are free', () => {
 
 	it('zooms onto mouse position', () => {
 		editor.pointerMove(100, 100)
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
-		editor.zoomIn(editor.inputs.currentScreenPoint, { immediate: true })
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
-		editor.zoomOut(editor.inputs.currentScreenPoint, { immediate: true })
-		expect(editor.inputs.currentPagePoint).toMatchObject({ x: 100, y: 100 })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
+		editor.zoomIn(editor.inputs.getCurrentScreenPoint(), { immediate: true })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
+		editor.zoomOut(editor.inputs.getCurrentScreenPoint(), { immediate: true })
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 100, y: 100 })
 	})
 })
 

package/src/test/commands/stackShapes.test.ts

@@ -62,28 +62,54 @@ describe('distributeShapes command', () => {
 
 	describe('when stacking horizontally', () => {
 		it('stacks the shapes based on the editors adjacentShapeMargin', () => {
-			editor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
-			// @ts-expect-error
-			editor.options.adjacentShapeMargin = 1
-			editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal')
+			// Create a new editor with custom adjacentShapeMargin option
+			const customEditor = new TestEditor({ options: { adjacentShapeMargin: 1 } })
+			customEditor.createShapes([
+				{
+					id: ids.boxA,
+					type: 'geo',
+					x: 0,
+					y: 0,
+				},
+				{
+					id: ids.boxB,
+					type: 'geo',
+					x: 100,
+					y: 100,
+				},
+				{
+					id: ids.boxC,
+					type: 'geo',
+					x: 400,
+					y: 400,
+				},
+				{
+					id: ids.boxD,
+					type: 'geo',
+					x: 700,
+					y: 700,
+				},
+			])
+			customEditor.setSelectedShapes([ids.boxA, ids.boxB, ids.boxC, ids.boxD])
+			customEditor.stackShapes(customEditor.getSelectedShapeIds(), 'horizontal')
 			vi.advanceTimersByTime(1000)
 			// 200 distance gap between c and d
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxA,
 				x: 0,
 				y: 0,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxB,
 				x: 101,
 				y: 100,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxC,
 				x: 202,
 				y: 400,
 			})
-			editor.expectShapeToMatch({
+			customEditor.expectShapeToMatch({
 				id: ids.boxD,
 				x: 303,
 				y: 700,

package/src/test/commands/updateShape.test.ts

@@ -0,0 +1,67 @@
+import { TLArrowShape, TLGeoShape, createShapeId } from '@tldraw/editor'
+import { TestEditor, createDefaultShapes } from '../TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.createShapes(createDefaultShapes())
+})
+
+it('Uses typescript generics', () => {
+	expect(() => {
+		editor.updateShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				w: 'OH NO',
+			},
+		})
+
+		// Errors when updating a shape with unknown props
+		editor.updateShape({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				foo: 'bar',
+			},
+		})
+
+		// error here because we are giving the wrong props to the shape
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: {
+				// @ts-expect-error
+				w: 'OH NO',
+			},
+		})
+
+		// Yep error here because we are giving the wrong generic
+		editor.updateShape<TLArrowShape>({
+			id: ids.box1,
+			//@ts-expect-error
+			type: 'geo',
+			//@ts-expect-error
+			props: { w: 'OH NO' },
+		})
+
+		// All good, correct match of generic and shape type
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+			props: { w: 100 },
+		})
+
+		editor.updateShape<TLGeoShape>({
+			id: ids.box1,
+			type: 'geo',
+		})
+	}).toThrow()
+})

package/src/test/commands/updateShapes.test.ts

@@ -15,22 +15,38 @@ beforeEach(() => {
 
 it('Uses typescript generics', () => {
 	expect(() => {
-		// No error here because no generic, the editor doesn't know what this guy is
 		editor.updateShapes([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
+			},
+		])
+
+		// Errors when updating shapes with unknown props
+		editor.updateShapes([
+			{
+				id: ids.box1,
+				type: 'geo',
+				props: {
+					// @ts-expect-error
+					foo: 'bar',
+				},
 			},
 		])
 
-		// Yep error here because we are giving the wrong props to the shape
+		// error here because we are giving the wrong props to the shape
 		editor.updateShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
-				//@ts-expect-error
-				props: { w: 'OH NO' },
+				props: {
+					// @ts-expect-error
+					w: 'OH NO',
+				},
 			},
 		])
 

package/src/test/commands/zoomToBounds.test.ts

@@ -24,10 +24,16 @@ describe('When zooming to bounds', () => {
 			h: 1000,
 		})
 
+		const padding = editor.options.zoomToFitPadding
+
 		editor.zoomToBounds(new Box(200, 300, 300, 300))
-		expect(editor.getCamera().z).toCloselyMatchObject((1000 - 128) / 300)
-		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(1000 / ((1000 - 128) / 300))
-		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(1000 / ((1000 - 128) / 300))
+		expect(editor.getCamera().z).toCloselyMatchObject((1000 - padding) / 300)
+		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(
+			1000 / ((1000 - padding) / 300)
+		)
+		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(
+			1000 / ((1000 - padding) / 300)
+		)
 	})
 })
 
@@ -55,3 +61,13 @@ it('is ignored by undo/redo', () => {
 	editor.undo()
 	expect(editor.getViewportPageCenter().toJson()).toCloselyMatchObject({ x: 350, y: 450 })
 })
+
+it('respects custom zoomToFitPadding option', () => {
+	const customPadding = 64
+	editor = new TestEditor({ options: { zoomToFitPadding: customPadding } })
+	editor.setScreenBounds({ x: 0, y: 0, w: 1000, h: 1000 })
+	editor.setCamera({ x: 0, y: 0, z: 1 })
+
+	editor.zoomToBounds(new Box(200, 300, 300, 300))
+	expect(editor.getCamera().z).toCloselyMatchObject((1000 - customPadding) / 300)
+})

package/src/test/commands/zoomToSelection.test.ts

@@ -13,17 +13,28 @@ beforeEach(() => {
 	editor.createShapes(createDefaultShapes())
 })
 
-it('zooms to selection bounds', () => {
+it('zooms to 100% when not already at 100%', () => {
+	editor.zoomIn() // zoom to something other than 100%
 	editor.setSelectedShapes([ids.box1, ids.box2])
 	editor.zoomToSelection()
-	editor.expectCameraToBe(354.64, 139.29, 1)
+	expect(editor.getZoomLevel()).toBeCloseTo(1)
+})
+
+it('zooms to fit selection when already at 100%', () => {
+	// Editor starts at 100%, so first call zooms to fit
+	editor.setSelectedShapes([ids.box1, ids.box2])
+	editor.zoomToSelection()
+	// Should now be zoomed to fit the selection bounds (greater than 100% for small selection)
+	expect(editor.getZoomLevel()).toBeGreaterThan(1)
 })
 
 it('does not zoom past max', () => {
 	editor.updateShapes([{ id: ids.box1, type: 'geo', props: { w: 1, h: 1 } }])
 	editor.select(ids.box1)
 	editor.zoomToSelection()
-	expect(editor.getZoomLevel()).toBe(1) // double check again when we're zooming in hard
+	// When at 100%, zooms to fit but respects camera max zoom
+	const { zoomSteps } = editor.getCameraOptions()
+	expect(editor.getZoomLevel()).toBe(zoomSteps[zoomSteps.length - 1])
 })
 
 it('does not zoom past min', () => {