feat(ui): support grid size of 8 on canvas

- Support grid size of 8 on canvas
- Internal canvas math works on 8
- Update gridlines rendering to show 64 spaced lines and 32/16/8 when zoomed in
- Bbox manipulation defaults to grid of 64 - hold shift to get grid of 8

Besides being something we support internally, supporting 8 on canvas avoids a lot of hacky logic needed to work well with aspect ratios.
This commit is contained in:
psychedelicious
2024-01-02 13:27:19 +11:00
committed by Kent Keirsey
parent 4f43eda09b
commit cecee33bc0
9 changed files with 140 additions and 77 deletions

View File

@ -1,4 +1,5 @@
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import { CANVAS_GRID_SIZE_FINE } from 'features/canvas/store/canvasSlice';
import type { Dimensions } from 'features/canvas/store/canvasTypes';
const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => {
@ -10,7 +11,7 @@ const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => {
let currentArea = width * height;
let maxDimension = 448;
while (currentArea < targetArea) {
maxDimension += 64;
maxDimension += CANVAS_GRID_SIZE_FINE;
if (width === height) {
scaledDimensions.width = 512;
scaledDimensions.height = 512;
@ -20,13 +21,13 @@ const getScaledBoundingBoxDimensions = (dimensions: Dimensions) => {
scaledDimensions.width = maxDimension;
scaledDimensions.height = roundToMultiple(
maxDimension / aspectRatio,
64
CANVAS_GRID_SIZE_FINE
);
} else if (aspectRatio < 1) {
scaledDimensions.height = maxDimension;
scaledDimensions.width = roundToMultiple(
maxDimension * aspectRatio,
64
CANVAS_GRID_SIZE_FINE
);
}
currentArea = scaledDimensions.width * scaledDimensions.height;

View File

@ -1,11 +0,0 @@
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import type { Dimensions } from 'features/canvas/store/canvasTypes';
const roundDimensionsTo64 = (dimensions: Dimensions): Dimensions => {
return {
width: roundToMultiple(dimensions.width, 64),
height: roundToMultiple(dimensions.height, 64),
};
};
export default roundDimensionsTo64;

View File

@ -0,0 +1,11 @@
import { roundToMultiple } from 'common/util/roundDownToMultiple';
import type { Dimensions } from 'features/canvas/store/canvasTypes';
const roundDimensionsToMultiple = (dimensions: Dimensions, multiple: number): Dimensions => {
return {
width: roundToMultiple(dimensions.width, multiple),
height: roundToMultiple(dimensions.height, multiple),
};
};
export default roundDimensionsToMultiple;