Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): CanvasBackground

Browse Source
This commit is contained in:
psychedelicious 2024-07-17 14:22:20 +10:00
parent 678d12fcd5
commit 2b21f54897
1 changed files with 31 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
invokeai/frontend/web/src/features/controlLayers/konva/CanvasBackground.ts
View File

@ -2,43 +2,18 @@ import { getArbitraryBaseColor } from '@invoke-ai/ui-library';
import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
import Konva from 'konva'; import Konva from 'konva';
const baseGridLineColor = getArbitraryBaseColor(27);
const fineGridLineColor = getArbitraryBaseColor(18);
/**
* Gets the grid spacing. The value depends on the stage scale - at higher scales, the grid spacing is smaller.
* @param scale The stage scale
* @returns The grid spacing based on the stage scale
*/
const getGridSpacing = (scale: number): number => {
if (scale >= 2) {
return 8;
}
if (scale >= 1 && scale < 2) {
return 16;
}
if (scale >= 0.5 && scale < 1) {
return 32;
}
if (scale >= 0.25 && scale < 0.5) {
return 64;
}
if (scale >= 0.125 && scale < 0.25) {
return 128;
}
return 256;
};
export class CanvasBackground { export class CanvasBackground {
static BASE_NAME = 'background'; static BASE_NAME = 'background';
static LAYER_NAME = `${CanvasBackground.BASE_NAME}_layer`; static LAYER_NAME = `${CanvasBackground.BASE_NAME}_layer`;
static GRID_LINE_COLOR_COARSE = getArbitraryBaseColor(27);
static GRID_LINE_COLOR_FINE = getArbitraryBaseColor(18);
manager: CanvasManager;
konva: { konva: {
layer: Konva.Layer; layer: Konva.Layer;
}; };
manager: CanvasManager;
constructor(manager: CanvasManager) { constructor(manager: CanvasManager) {
this.manager = manager; this.manager = manager;
this.konva = { layer: new Konva.Layer({ name: CanvasBackground.LAYER_NAME, listening: false }) }; this.konva = { layer: new Konva.Layer({ name: CanvasBackground.LAYER_NAME, listening: false }) };
@ -47,7 +22,7 @@ export class CanvasBackground {
render() { render() {
this.konva.layer.zIndex(0); this.konva.layer.zIndex(0);
const scale = this.manager.stage.scaleX(); const scale = this.manager.stage.scaleX();
const gridSpacing = getGridSpacing(scale); const gridSpacing = CanvasBackground.getGridSpacing(scale);
const x = this.manager.stage.x(); const x = this.manager.stage.x();
const y = this.manager.stage.y(); const y = this.manager.stage.y();
const width = this.manager.stage.width(); const width = this.manager.stage.width();
@ -98,7 +73,7 @@ export class CanvasBackground {
x: _x, x: _x,
y: gridFullRect.y1, y: gridFullRect.y1,
points: [0, 0, 0, ySize], points: [0, 0, 0, ySize],
stroke: _x % 64 ? fineGridLineColor : baseGridLineColor, stroke: _x % 64 ? CanvasBackground.GRID_LINE_COLOR_FINE : CanvasBackground.GRID_LINE_COLOR_COARSE,
strokeWidth, strokeWidth,
listening: false, listening: false,
}) })
@ -111,11 +86,35 @@ export class CanvasBackground {
x: gridFullRect.x1, x: gridFullRect.x1,
y: _y, y: _y,
points: [0, 0, xSize, 0], points: [0, 0, xSize, 0],
stroke: _y % 64 ? fineGridLineColor : baseGridLineColor, stroke: _y % 64 ? CanvasBackground.GRID_LINE_COLOR_FINE : CanvasBackground.GRID_LINE_COLOR_COARSE,
strokeWidth, strokeWidth,
listening: false, listening: false,
}) })
); );
} }
} }
/**
* Gets the grid spacing. The value depends on the stage scale - at higher scales, the grid spacing is smaller.
* @param scale The stage scale
* @returns The grid spacing based on the stage scale
*/
static getGridSpacing = (scale: number): number => {
if (scale >= 2) {
return 8;
}
if (scale >= 1 && scale < 2) {
return 16;
}
if (scale >= 0.5 && scale < 1) {
return 32;
}
if (scale >= 0.25 && scale < 0.5) {
return 64;
}
if (scale >= 0.125 && scale < 0.25) {
return 128;
}
return 256;
};
} }