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

Fixes canvas showing spinner on first load

Browse Source 
Also adds good default canvas scale and positioning when no image is on it
This commit is contained in:
psychedelicious 2022-11-18 15:28:48 +11:00 committed by blessedcoolant
parent 07ca0876ec
commit 70e67c45dd
3 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/features/canvas/components/IAICanvasResizer.tsx
View File

@ -46,8 +46,6 @@ const IAICanvasResizer = () => {
const { clientWidth, clientHeight } = ref.current; const { clientWidth, clientHeight } = ref.current;
if (!initialCanvasImage?.image) return;
dispatch( dispatch(
setCanvasContainerDimensions({ setCanvasContainerDimensions({
width: clientWidth, width: clientWidth,

35
frontend/src/features/canvas/store/canvasSlice.ts
View File

@ -24,6 +24,7 @@ import {
isCanvasMaskLine, isCanvasMaskLine,
} from './canvasTypes'; } from './canvasTypes';
import roundDimensionsTo64 from '../util/roundDimensionsTo64'; import roundDimensionsTo64 from '../util/roundDimensionsTo64';
import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
export const initialLayerState: CanvasLayerState = { export const initialLayerState: CanvasLayerState = {
objects: [], objects: [],
@ -410,10 +411,39 @@ export const canvasSlice = createSlice({
const { width: containerWidth, height: containerHeight } = const { width: containerWidth, height: containerHeight } =
state.canvasContainerDimensions; state.canvasContainerDimensions;
state.stageDimensions = { const initialCanvasImage =
state.layerState.objects.find(isCanvasBaseImage);
const newStageDimensions = {
width: Math.floor(containerWidth), width: Math.floor(containerWidth),
height: Math.floor(containerHeight), height: Math.floor(containerHeight),
}; };
if (!initialCanvasImage) {
const newScale = calculateScale(
newStageDimensions.width,
newStageDimensions.height,
512,
512,
STAGE_PADDING_PERCENTAGE
);
const newCoordinates = calculateCoordinates(
newStageDimensions.width,
newStageDimensions.height,
0,
0,
512,
512,
newScale
);
state.stageScale = newScale;
state.stageCoordinates = newCoordinates;
}
state.stageDimensions = newStageDimensions;
}, },
resetCanvasView: ( resetCanvasView: (
state, state,
@ -433,13 +463,12 @@ export const canvasSlice = createSlice({
const { x, y, width, height } = contentRect; const { x, y, width, height } = contentRect;
const padding = 0.95;
const newScale = calculateScale( const newScale = calculateScale(
stageWidth, stageWidth,
stageHeight, stageHeight,
width, width,
height, height,
padding STAGE_PADDING_PERCENTAGE
); );
const newCoordinates = calculateCoordinates( const newCoordinates = calculateCoordinates(

16
frontend/src/features/canvas/util/constants.ts
View File

@ -1,14 +1,14 @@
// widths of ants-style bounding box outline
export const DASH_WIDTH = 4;
// speed of marching ants (lower is faster)
export const MARCHING_ANTS_SPEED = 30;
// bounding box anchor size // bounding box anchor size
export const TRANSFORMER_ANCHOR_SIZE = 15; export const TRANSFORMER_ANCHOR_SIZE = 15;
// canvas wheel zoom exponential scale factor
export const CANVAS_SCALE_BY = 0.999; export const CANVAS_SCALE_BY = 0.999;
export const MIN_CANVAS_SCALE = 0.1 // minimum (furthest-zoomed-out) scale
export const MIN_CANVAS_SCALE = 0.1;
export const MAX_CANVAS_SCALE = 20 // maximum (furthest-zoomed-in) scale
export const MAX_CANVAS_SCALE = 20;
// padding given to initial image/bounding box when stage view is reset
export const STAGE_PADDING_PERCENTAGE = 0.95;