tldraw 4.3.0-canary.fd6b7f2a8adc → 4.3.0-canary.fda2775019a1

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

@@ -16,20 +16,11 @@ 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": [
-          {
-            "x": 0,
-            "y": 0,
-            "z": 0.5,
-          },
-          {
-            "x": 110,
-            "y": 110,
-            "z": 0.5,
-          },
-        ],
+        "points": "AAAAAAA4QFZAVgA4",
         "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.isDragging).toBe(false)
+	expect(editor.inputs.getIsDragging()).toBe(false)
 })
 
 describe('Making an arrow on the page', () => {

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_rb_"
+        id="_export_4_r_b_"
       >
         <rect
           fill="white"
@@ -51,14 +51,14 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
       </mask>
       <pattern
         height="8"
-        id="_export_4_ra__hash_pattern_light_0"
+        id="_export_4_r_a__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_4_rb_)"
+          mask="url(#_export_4_r_b_)"
           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"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         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_ra__hash_pattern_light_0)"
+        fill="url(#_export_4_r_a__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_r5_"
+        id="_export_2_r_5_"
       >
         <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_r4__hash_pattern_light_0"
+        id="_export_2_r_4__hash_pattern_light_0"
         patternUnits="userSpaceOnUse"
         width="8"
       >
         <rect
           fill="#fcfffe"
           height="8"
-          mask="url(#_export_2_r5_)"
+          mask="url(#_export_2_r_5_)"
           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"
+        class="tl-export-embed-styles tl-rich-text tl-rich-text-svg tl-text__outline"
         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_r4__hash_pattern_light_0)"
+        fill="url(#_export_2_r_4__hash_pattern_light_0)"
       />
       <path
         d="M 0 0 L 100 0 L 100 100 L 0 100 Z"

package/src/test/commands/cameraState.test.ts

@@ -0,0 +1,299 @@
+import { Box } from '@tldraw/editor'
+import { TestEditor } from '../TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+})
+
+describe('getCameraState', () => {
+	it('starts as idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('becomes moving when the camera changes via setCamera', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via pan', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.pan({ x: 100, y: 100 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving when the camera changes via zoomIn', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('returns to idle after the timeout elapses', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The default timeout is 64ms (options.cameraMovingTimeoutMs)
+		// Each tick is 16ms, so we need ~4 ticks to elapse
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays moving while camera continues to change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again before timeout elapses
+		editor.forceTick(2)
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Move again
+		editor.forceTick(2)
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('stays idle when camera position does not actually change', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Setting the same camera position should not trigger moving state
+		const currentCamera = editor.getCamera()
+		editor.setCamera({ x: currentCamera.x, y: currentCamera.y, z: currentCamera.z })
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('does not add multiple tick listeners when camera changes rapidly', () => {
+		// This test verifies the fix: we should not have redundant listeners
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Change camera multiple times rapidly
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		editor.setCamera({ x: 300, y: 300, z: 1 })
+
+		expect(editor.getCameraState()).toBe('moving')
+
+		// After timeout, should return to idle exactly once
+		// If there were multiple listeners, the state might behave unexpectedly
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+
+	it('resets timeout when camera changes while already moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.setCamera({ x: 100, y: 100, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait almost until timeout
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Change camera again - should reset timeout
+		editor.setCamera({ x: 200, y: 200, z: 1 })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Wait 3 more ticks - would have been idle if timeout wasn't reset
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Now let it fully settle
+		editor.forceTick(3)
+		expect(editor.getCameraState()).toBe('idle')
+	})
+})
+
+describe('camera state with zoom', () => {
+	it('becomes moving on zoomOut', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomOut(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on centerOnPoint', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		editor.centerOnPoint({ x: 500, y: 500 })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+
+	it('becomes moving on zoomToFit', () => {
+		// Create a shape so zoomToFit has something to fit
+		editor.createShape({ type: 'geo', x: 100, y: 100, props: { w: 200, h: 200 } })
+		expect(editor.getCameraState()).toBe('idle')
+		editor.zoomToFit({ immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+	})
+})
+
+describe('getDebouncedZoomLevel', () => {
+	it('returns the current zoom level when camera is idle', () => {
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+
+		// Change zoom and let it settle
+		editor.zoomIn(undefined, { immediate: true })
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures zoom when camera starts moving', () => {
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Start zooming - the debounced zoom is captured when movement starts
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// The debounced zoom is captured at the moment movement starts (after first change)
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(capturedZoom).toBe(editor.getZoomLevel())
+	})
+
+	it('keeps captured zoom during continued camera movement', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Zoom again while still moving - debounced value should stay the same
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// But current zoom should have changed
+		expect(editor.getZoomLevel()).not.toBe(capturedZoom)
+	})
+
+	it('updates debounced zoom when camera becomes idle again', () => {
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		const capturedZoom = editor.getDebouncedZoomLevel()
+
+		// Zoom again while moving to change the current zoom
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getDebouncedZoomLevel()).toBe(capturedZoom)
+
+		// Let camera settle
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Debounced zoom should now match current zoom
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	it('captures new zoom at the start of each new movement', () => {
+		// First zoom and settle
+		editor.zoomIn(undefined, { immediate: true })
+		const firstCapturedZoom = editor.getDebouncedZoomLevel()
+		editor.forceTick(5)
+		expect(editor.getCameraState()).toBe('idle')
+
+		// Second zoom - should capture new zoom level
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+		// The captured zoom should be different from the first capture
+		expect(editor.getDebouncedZoomLevel()).not.toBe(firstCapturedZoom)
+		// And it should match the current zoom (since we just started moving)
+		expect(editor.getDebouncedZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with debouncedZoom option disabled', () => {
+		let editorWithoutDebouncedZoom: TestEditor
+
+		beforeEach(() => {
+			editorWithoutDebouncedZoom = new TestEditor({
+				options: { debouncedZoom: false },
+			})
+			editorWithoutDebouncedZoom.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+		})
+
+		it('always returns the current zoom level even when camera is moving', () => {
+			const initialZoom = editorWithoutDebouncedZoom.getZoomLevel()
+
+			editorWithoutDebouncedZoom.zoomIn(undefined, { immediate: true })
+			expect(editorWithoutDebouncedZoom.getCameraState()).toBe('moving')
+
+			// Should return the current zoom, not the captured one
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).toBe(
+				editorWithoutDebouncedZoom.getZoomLevel()
+			)
+			expect(editorWithoutDebouncedZoom.getDebouncedZoomLevel()).not.toBe(initialZoom)
+		})
+	})
+})
+
+describe('getEfficientZoomLevel', () => {
+	it('returns current zoom level when below shape threshold', () => {
+		// Default threshold is 500 shapes, we have 0
+		expect(editor.getZoomLevel()).toBe(editor.getEfficientZoomLevel())
+
+		// Add a few shapes - still below threshold
+		for (let i = 0; i < 10; i++) {
+			editor.createShape({ type: 'geo', x: i * 100, y: 0, props: { w: 50, h: 50 } })
+		}
+		expect(editor.getCurrentPageShapeIds().size).toBe(10)
+
+		// Start zooming
+		editor.zoomIn(undefined, { immediate: true })
+		expect(editor.getCameraState()).toBe('moving')
+
+		// Should still return current zoom because we're below threshold
+		expect(editor.getEfficientZoomLevel()).toBe(editor.getZoomLevel())
+	})
+
+	describe('with many shapes above threshold', () => {
+		let editorWithManyShapes: TestEditor
+
+		beforeEach(() => {
+			// Use a lower threshold for testing
+			editorWithManyShapes = new TestEditor({
+				options: { debouncedZoomThreshold: 5 },
+			})
+			editorWithManyShapes.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+
+			// Add shapes above the threshold
+			for (let i = 0; i < 10; i++) {
+				editorWithManyShapes.createShape({
+					type: 'geo',
+					x: i * 100,
+					y: 0,
+					props: { w: 50, h: 50 },
+				})
+			}
+		})
+
+		it('returns debounced zoom level when above shape threshold and camera is moving', () => {
+			// First zoom to capture a debounced value
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			const capturedZoom = editorWithManyShapes.getEfficientZoomLevel()
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Zoom again while still moving
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			expect(editorWithManyShapes.getCameraState()).toBe('moving')
+
+			// Should return the captured zoom, not the current zoom
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(capturedZoom)
+			expect(editorWithManyShapes.getEfficientZoomLevel()).not.toBe(
+				editorWithManyShapes.getZoomLevel()
+			)
+		})
+
+		it('returns current zoom level when above threshold but camera is idle', () => {
+			editorWithManyShapes.zoomIn(undefined, { immediate: true })
+			editorWithManyShapes.forceTick(5)
+			expect(editorWithManyShapes.getCameraState()).toBe('idle')
+
+			// Should return current zoom because camera is idle
+			expect(editorWithManyShapes.getEfficientZoomLevel()).toBe(editorWithManyShapes.getZoomLevel())
+		})
+	})
+})

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
@@ -38,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/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', () => {