Tighten up zoom to fit padding (#3798)

This PR reduces the zoom to fit area from 128 pixels on each edge to 50.
It does produce some overlap with the toolbar but I do not mind this at
all.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Test Plan

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- Reduce padding when zooming to fit.

packages/editor/src/lib/constants.ts

@@ -105,3 +105,5 @@ export const LEFT_MOUSE_BUTTON = 0
 export const RIGHT_MOUSE_BUTTON = 2
 export const MIDDLE_MOUSE_BUTTON = 1
 export const STYLUS_ERASER_BUTTON = 5
+
+export const ZOOM_TO_FIT_PADDING = 128

packages/editor/src/lib/editor/Editor.ts

@@ -100,6 +100,7 @@ import {
 	MIDDLE_MOUSE_BUTTON,
 	RIGHT_MOUSE_BUTTON,
 	STYLUS_ERASER_BUTTON,
+	ZOOM_TO_FIT_PADDING,
 } from '../constants'
 import { Box, BoxLike } from '../primitives/Box'
 import { Mat, MatLike } from '../primitives/Mat'
@@ -2703,7 +2704,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const viewportScreenBounds = this.getViewportScreenBounds()
 
-		const inset = opts?.inset ?? Math.min(256, viewportScreenBounds.width * 0.28)
+		const inset = opts?.inset ?? Math.min(ZOOM_TO_FIT_PADDING, viewportScreenBounds.width * 0.28)
 
 		const baseZoom = this.getBaseZoom()
 		const zoomMin = cameraOptions.zoomSteps[0]

packages/tldraw/src/test/ZoomTool.test.ts

@@ -157,13 +157,15 @@ describe('TLSelectTool.Zooming', () => {
 		})
 		editor.pointerUp(newBoundsX + newBoundsWidth, newBoundsY + newBoundsHeight)
 		jest.advanceTimersByTime(300)
-		expect(editor.getZoomLevel()).toBeCloseTo(1.2888)
-		expect(editor.getViewportPageBounds()).toMatchObject({
-			x: -48.9655172413793,
-			y: 100.68965517241382,
-			w: 837.9310344827586,
-			h: 558.6206896551723,
-		})
+		expect(editor.getZoomLevel()).toBeCloseTo(1.64)
+		expect(editor.getViewportPageBounds()).toMatchInlineSnapshot(`
+		Box {
+		  "h": 437.83783783783787,
+		  "w": 656.7567567567568,
+		  "x": 41.62162162162162,
+		  "y": 161.0810810810811,
+		}
+	`)
 		expect(editor.getViewportPageCenter()).toMatchObject({
 			x: newBoundsX + newBoundsWidth / 2,
 			y: newBoundsY + newBoundsHeight / 2,

packages/tldraw/src/test/commands/__snapshots__/zoomToFit.test.ts.snap

@@ -5,8 +5,8 @@ exports[`converts correctly: Zoom to Fit Camera 1`] = `
   "id": "static",
   "meta": {},
   "typeName": "camera",
-  "x": 330.435496777593,
-  "y": 22.261531457640388,
-  "z": 1.0469360106481882,
+  "x": 218.91315389393458,
+  "y": -52.08669713146525,
+  "z": 1.335745944620102,
 }
 `;

packages/tldraw/src/test/commands/zoomToBounds.test.ts

@@ -25,9 +25,9 @@ describe('When zooming to bounds', () => {
 		})
 
 		editor.zoomToBounds(new Box(200, 300, 300, 300))
-		expect(editor.getCamera().z).toCloselyMatchObject((1000 - 256) / 300)
-		expect(editor.getViewportPageBounds().width).toCloselyMatchObject(1000 / ((1000 - 256) / 300))
-		expect(editor.getViewportPageBounds().height).toCloselyMatchObject(1000 / ((1000 - 256) / 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))
 	})
 })