tldraw 4.2.2 → 4.2.3

package/src/test/__snapshots__/resizing.test.ts.snap

@@ -16,11 +16,20 @@ exports[`When resizing a shape with children > Resizes a rotated draw shape > dr
     "isComplete": false,
     "isPen": false,
     "scale": 1,
-    "scaleX": 1.1,
-    "scaleY": 1.1,
     "segments": [
       {
-        "points": "AAAAAAA4QFZAVgA4",
+        "points": [
+          {
+            "x": 0,
+            "y": 0,
+            "z": 0.5,
+          },
+          {
+            "x": 110,
+            "y": 110,
+            "z": 0.5,
+          },
+        ],
         "type": "free",
       },
     ],

package/src/test/arrows-megabus.test.tsx

@@ -33,7 +33,7 @@ it('requires a move to begin drawing', () => {
 	editor.pointerDown()
 	editor.pointerMove(2, 0)
 
-	expect(editor.inputs.getIsDragging()).toBe(false)
+	expect(editor.inputs.isDragging).toBe(false)
 })
 
 describe('Making an arrow on the page', () => {

package/src/test/bindings.test.tsx

@@ -6,8 +6,8 @@ import {
 	BindingOnShapeDeleteOptions,
 	BindingOnShapeIsolateOptions,
 	BindingUtil,
-	TLBinding,
 	TLShapeId,
+	TLUnknownBinding,
 	createBindingId,
 	createShapeId,
 } from '@tldraw/editor'
@@ -40,7 +40,7 @@ const mockOnAfterChangeToShape = vi.fn()
 
 const calls: string[] = []
 
-const registerCall = (method: string, binding: TLBinding) => {
+const registerCall = (method: string, binding: TLUnknownBinding) => {
 	calls.push(
 		`${method}: ${binding.fromId.slice('shape:'.length)}->${binding.toId.slice('shape:'.length)}`
 	)
@@ -60,62 +60,62 @@ class TestBindingUtil extends BindingUtil {
 		mockOnOperationComplete()
 	}
 
-	override onBeforeDelete(options: BindingOnDeleteOptions): void {
+	override onBeforeDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDelete', options.binding)
 		mockOnBeforeDelete(options)
 	}
 
-	override onAfterDelete(options: BindingOnDeleteOptions): void {
+	override onAfterDelete(options: BindingOnDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onAfterDelete', options.binding)
 		mockOnAfterDelete(options)
 	}
 
-	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions): void {
+	override onBeforeDeleteFromShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDeleteFromShape', options.binding)
 		mockOnBeforeFromShapeDelete(options)
 	}
 
-	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions): void {
+	override onBeforeDeleteToShape(options: BindingOnShapeDeleteOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeDeleteToShape', options.binding)
 		mockOnBeforeToShapeDelete(options)
 	}
 
-	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions): void {
+	override onBeforeIsolateFromShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeIsolateFromShape', options.binding)
 		mockOnBeforeFromShapeIsolate(options)
 	}
 
-	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions): void {
+	override onBeforeIsolateToShape(options: BindingOnShapeIsolateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeIsolateToShape', options.binding)
 		mockOnBeforeToShapeIsolate(options)
 	}
 
-	override onBeforeCreate(options: BindingOnCreateOptions): void {
+	override onBeforeCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeCreate', options.binding)
 		mockOnBeforeCreate(options)
 	}
 
-	override onAfterCreate(options: BindingOnCreateOptions): void {
+	override onAfterCreate(options: BindingOnCreateOptions<TLUnknownBinding>): void {
 		registerCall('onAfterCreate', options.binding)
 		mockOnAfterCreate(options)
 	}
 
-	override onBeforeChange(options: BindingOnChangeOptions): void {
+	override onBeforeChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
 		registerCall('onBeforeChange', options.bindingAfter)
 		mockOnBeforeChange(options)
 	}
 
-	override onAfterChange(options: BindingOnChangeOptions): void {
+	override onAfterChange(options: BindingOnChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChange', options.bindingAfter)
 		mockOnAfterChange(options)
 	}
 
-	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions): void {
+	override onAfterChangeFromShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChangeFromShape', options.binding)
 		mockOnAfterChangeFromShape(options)
 	}
 
-	override onAfterChangeToShape(options: BindingOnShapeChangeOptions): void {
+	override onAfterChangeToShape(options: BindingOnShapeChangeOptions<TLUnknownBinding>): void {
 		registerCall('onAfterChangeToShape', options.binding)
 		mockOnAfterChangeToShape(options)
 	}
@@ -146,19 +146,11 @@ beforeEach(() => {
 	mockOnAfterChangeToShape.mockReset()
 })
 
-const TEST_TYPE = 'test'
-
-declare module '@tldraw/tlschema' {
-	export interface TLGlobalBindingPropsMap {
-		[TEST_TYPE]: Record<string, never>
-	}
-}
-
 function bindShapes(fromId: TLShapeId, toId: TLShapeId) {
 	const bindingId = createBindingId()
 	editor.createBinding({
 		id: bindingId,
-		type: TEST_TYPE,
+		type: 'test',
 		fromId,
 		toId,
 	})
@@ -264,9 +256,11 @@ test('copying the to shape on its own does trigger the unbind operation', () =>
 })
 
 test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
-	mockOnBeforeFromShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
-		editor.deleteShape(options.binding.toId)
-	})
+	mockOnBeforeFromShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.toId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)
@@ -307,9 +301,11 @@ test('cascading deletes in beforeFromShapeDelete are handled correctly', () => {
 })
 
 test('cascading deletes in beforeToShapeDelete are handled correctly', () => {
-	mockOnBeforeToShapeDelete.mockImplementation((options: BindingOnShapeDeleteOptions) => {
-		editor.deleteShape(options.binding.fromId)
-	})
+	mockOnBeforeToShapeDelete.mockImplementation(
+		(options: BindingOnShapeDeleteOptions<TLUnknownBinding>) => {
+			editor.deleteShape(options.binding.fromId)
+		}
+	)
 
 	bindShapes(ids.box1, ids.box2)
 	bindShapes(ids.box2, ids.box3)

package/src/test/bindingsIndex.test.tsx

@@ -1,4 +1,4 @@
-import { TLShapeId, createShapeId } from '@tldraw/editor'
+import { TLArrowBinding, TLGeoShape, TLShapeId, createShapeId } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
@@ -219,7 +219,7 @@ describe('bindingsIndex', () => {
 
 			const [box1Clone, box2Clone] = editor
 				.getSelectedShapes()
-				.filter((shape) => editor.isShapeOfType(shape, 'geo'))
+				.filter((shape) => editor.isShapeOfType<TLGeoShape>(shape, 'geo'))
 				.sort((a, b) => a.x - b.x)
 
 			expect(editor.getArrowsBoundTo(box2Clone.id)).toHaveLength(3)
@@ -248,9 +248,9 @@ describe('bindingsIndex', () => {
 
 			// move arrowA end from box2 to box3
 			const binding = editor
-				.getBindingsInvolvingShape(ids.box2, 'arrow')
+				.getBindingsInvolvingShape<TLArrowBinding>(ids.box2, 'arrow')
 				.find((b) => b.props.terminal === 'end')!
-			editor.updateBinding({ ...binding, toId: box3 })
+			editor.updateBinding({ ...binding, toId: box3 } satisfies TLArrowBinding)
 
 			expect(editor.getArrowsBoundTo(ids.box2)).toHaveLength(2)
 			expect(editor.getArrowsBoundTo(ids.box1)).toHaveLength(3)

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

@@ -16,7 +16,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
   >
     <defs>
       <mask
-        id="_export_4_r_b_"
+        id="_export_4_rb_"
       >
         <rect
           fill="white"
@@ -51,14 +51,14 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_4_r_a__hash_pattern_light_0"
+        id="_export_4_ra__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_4_r_b_)"
+          mask="url(#_export_4_rb_)"
           width="8"
           x="0"
           y="0"
@@ -83,7 +83,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
         height="100"
         width="100"
         x="0"
@@ -127,7 +127,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_4_r_a__hash_pattern_light_0)"
+        fill="url(#_export_4_ra__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
@@ -156,7 +156,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
   >
     <defs>
       <mask
-        id="_export_2_r_5_"
+        id="_export_2_r5_"
       >
         <rect
           fill="white"
@@ -191,14 +191,14 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_2_r_4__hash_pattern_light_0"
+        id="_export_2_r4__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_2_r_5_)"
+          mask="url(#_export_2_r5_)"
           width="8"
           x="0"
           y="0"
@@ -223,7 +223,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
         stroke-width="3.5"
       />
       <foreignobject
-        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
         height="100"
         width="100"
         x="0"
@@ -267,7 +267,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"
-        fill="url(#_export_2_r_4__hash_pattern_light_0)"
+        fill="url(#_export_2_r4__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"

package/src/test/commands/createShapes.test.ts

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

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

@@ -1,4 +1,4 @@
-import { DefaultDashStyle, createShapeId, toRichText } from '@tldraw/editor'
+import { DefaultDashStyle, TLGeoShape, 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([
+	editor.createShapes<TLGeoShape>([
 		{
 			id: ids.boxA,
 			type: 'geo',

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

@@ -1,4 +1,4 @@
-import { TLContent, createShapeId, structuredClone } from '@tldraw/editor'
+import { TLContent, structuredClone } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -25,7 +25,6 @@ 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()
 	})
@@ -38,81 +37,3 @@ 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,8 +13,6 @@ beforeEach(() => {
 	})
 	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
 	editor.user.updateUserPreferences({ inputMode: null })
-	editor._transformPointerDownSpy.mockRestore()
-	editor._transformPointerUpSpy.mockRestore()
 })
 
 const wheelEvent = {
@@ -257,8 +255,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(50, 50)
-		expect(editor.getCamera()).toMatchObject({ x: 50, y: 50, z: 1 })
+		editor.setCurrentTool('hand').pointerDown(0, 0).pointerMove(5, 10).forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 5, y: 10, z: 1 })
 	})
 
 	it('Does not affect spacebar panning (2x)', () => {
@@ -290,12 +288,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 })
-		// 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.
+		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.
 		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 })
@@ -559,11 +557,11 @@ describe('When constraints are free', () => {
 
 	it('zooms onto mouse position', () => {
 		editor.pointerMove(100, 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 })
+		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 })
 	})
 })
 

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

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

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

@@ -15,38 +15,22 @@ 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: {
-					// @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',
-				},
+				props: { w: 'OH NO' },
 			},
 		])
 
-		// error here because we are giving the wrong props to the shape
+		// Yep error here because we are giving the wrong props to the shape
 		editor.updateShapes<TLGeoShape>([
 			{
 				id: ids.box1,
 				type: 'geo',
-				props: {
-					// @ts-expect-error
-					w: 'OH NO',
-				},
+				//@ts-expect-error
+				props: { w: 'OH NO' },
 			},
 		])
 

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

@@ -24,16 +24,10 @@ 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 - padding) / 300)
-		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(
-			1000 / ((1000 - padding) / 300)
-		)
-		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(
-			1000 / ((1000 - padding) / 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))
 	})
 })
 
@@ -61,13 +55,3 @@ 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,28 +13,17 @@ beforeEach(() => {
 	editor.createShapes(createDefaultShapes())
 })
 
-it('zooms to 100% when not already at 100%', () => {
-	editor.zoomIn() // zoom to something other than 100%
+it('zooms to selection bounds', () => {
 	editor.setSelectedShapes([ids.box1, ids.box2])
 	editor.zoomToSelection()
-	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)
+	editor.expectCameraToBe(354.64, 139.29, 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()
-	// When at 100%, zooms to fit but respects camera max zoom
-	const { zoomSteps } = editor.getCameraOptions()
-	expect(editor.getZoomLevel()).toBe(zoomSteps[zoomSteps.length - 1])
+	expect(editor.getZoomLevel()).toBe(1) // double check again when we're zooming in hard
 })
 
 it('does not zoom past min', () => {