PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Tighten up zoom to fit padding (#3798)

Browse source 
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.
This commit is contained in:
Steve Ruiz 2024-05-21 16:26:13 +01:00 committed by GitHub
parent 453c98dd7e
commit b7933d7e08
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/editor/src/lib/constants.ts
View file

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

3
packages/editor/src/lib/editor/Editor.ts
View file

@ -100,6 +100,7 @@ import {
MIDDLE_MOUSE_BUTTON, MIDDLE_MOUSE_BUTTON,
RIGHT_MOUSE_BUTTON, RIGHT_MOUSE_BUTTON,
STYLUS_ERASER_BUTTON, STYLUS_ERASER_BUTTON,
ZOOM_TO_FIT_PADDING,
} from '../constants' } from '../constants'
import { Box, BoxLike } from '../primitives/Box' import { Box, BoxLike } from '../primitives/Box'
import { Mat, MatLike } from '../primitives/Mat' import { Mat, MatLike } from '../primitives/Mat'
@ -2703,7 +2704,7 @@ export class Editor extends EventEmitter<TLEventMap> {
const viewportScreenBounds = this.getViewportScreenBounds() 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 baseZoom = this.getBaseZoom()
const zoomMin = cameraOptions.zoomSteps[0] const zoomMin = cameraOptions.zoomSteps[0]

16
packages/tldraw/src/test/ZoomTool.test.ts
View file

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

6
packages/tldraw/src/test/commands/__snapshots__/zoomToFit.test.ts.snap
View file

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

6
packages/tldraw/src/test/commands/zoomToBounds.test.ts
View file

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