From b7933d7e086633bd4e4b982b68f01b9e057c0f83 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Tue, 21 May 2024 16:26:13 +0100
Subject: [PATCH] Tighten up zoom to fit padding (#3798)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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             |  2 ++
 packages/editor/src/lib/editor/Editor.ts         |  3 ++-
 packages/tldraw/src/test/ZoomTool.test.ts        | 16 +++++++++-------
 .../__snapshots__/zoomToFit.test.ts.snap         |  6 +++---
 .../src/test/commands/zoomToBounds.test.ts       |  6 +++---
 5 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/lib/constants.ts b/packages/editor/src/lib/constants.ts
index bfdb7fdc7..48961508f 100644
--- a/packages/editor/src/lib/constants.ts
+++ b/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
diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts
index 7e9cff266..d22e792e7 100644
--- a/packages/editor/src/lib/editor/Editor.ts
+++ b/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]
diff --git a/packages/tldraw/src/test/ZoomTool.test.ts b/packages/tldraw/src/test/ZoomTool.test.ts
index 5fdeaa601..5e28c9a76 100644
--- a/packages/tldraw/src/test/ZoomTool.test.ts
+++ b/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,
diff --git a/packages/tldraw/src/test/commands/__snapshots__/zoomToFit.test.ts.snap b/packages/tldraw/src/test/commands/__snapshots__/zoomToFit.test.ts.snap
index b75dd2cc2..6c6bc1894 100644
--- a/packages/tldraw/src/test/commands/__snapshots__/zoomToFit.test.ts.snap
+++ b/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,
 }
 `;
diff --git a/packages/tldraw/src/test/commands/zoomToBounds.test.ts b/packages/tldraw/src/test/commands/zoomToBounds.test.ts
index 34e4ed70f..82817ff91 100644
--- a/packages/tldraw/src/test/commands/zoomToBounds.test.ts
+++ b/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))
 	})
 })