fix(ui): document fit positioning

This commit is contained in:
psychedelicious 2024-06-17 18:10:50 +10:00
parent b76e0ab4e4
commit 8aa963fb81
2 changed files with 10 additions and 4 deletions

View File

@ -69,3 +69,8 @@ export const CANVAS_GRID_SIZE_FINE = 8;
* The coarse grid size of the canvas
*/
export const CANVAS_GRID_SIZE_COARSE = 64;
/**
* Document fit padding
*/
export const DOCUMENT_FIT_PADDING_PX = 50;

View File

@ -19,6 +19,7 @@ import { clamp } from 'lodash-es';
import {
BRUSH_SPACING_TARGET_SCALE,
CANVAS_SCALE_BY,
DOCUMENT_FIT_PADDING_PX,
MAX_BRUSH_SPACING_PX,
MAX_CANVAS_SCALE,
MIN_BRUSH_SPACING_PX,
@ -519,11 +520,11 @@ export const setStageEventHandlers = ({
const width = stage.width();
const height = stage.height();
const document = getDocument();
const docWidthWithBuffer = document.width + 20;
const docHeightWithBuffer = document.height + 20;
const docWidthWithBuffer = document.width + DOCUMENT_FIT_PADDING_PX * 2;
const docHeightWithBuffer = document.height + DOCUMENT_FIT_PADDING_PX * 2;
const scale = Math.min(Math.min(width / docWidthWithBuffer, height / docHeightWithBuffer), 1);
const x = (width - docWidthWithBuffer * scale) / 2;
const y = (height - docHeightWithBuffer * scale) / 2;
const x = (width - docWidthWithBuffer * scale) / 2 + DOCUMENT_FIT_PADDING_PX * scale;
const y = (height - docHeightWithBuffer * scale) / 2 + DOCUMENT_FIT_PADDING_PX * scale;
stage.setAttrs({ x, y, width, height, scaleX: scale, scaleY: scale });
setStageAttrs({ x, y, width, height, scale });
scaleToolPreview(stage, getToolState());