Organises features/canvas

This commit is contained in:
psychedelicious 2022-11-17 16:41:57 +11:00 committed by blessedcoolant
parent 1d540219fa
commit 432dc704a6
4 changed files with 97 additions and 96 deletions

View File

@ -1,92 +0,0 @@
import * as InvokeAI from 'app/invokeai';
import { initialLayerState } from './canvasSlice';
import { CanvasState } from './canvasTypes';
import {
roundDownToMultiple,
roundToMultiple,
} from 'common/util/roundDownToMultiple';
import _ from 'lodash';
import { mergeAndUploadCanvas } from '../util/mergeAndUploadCanvas';
import { uploadImage } from 'features/gallery/util/uploadImage';
import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
export const setInitialCanvasImage_reducer = (
state: CanvasState,
image: InvokeAI.Image
) => {
const newBoundingBoxDimensions = {
width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64),
height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64),
};
const newBoundingBoxCoordinates = {
x: roundToMultiple(
image.width / 2 - newBoundingBoxDimensions.width / 2,
64
),
y: roundToMultiple(
image.height / 2 - newBoundingBoxDimensions.height / 2,
64
),
};
state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates;
state.pastLayerStates.push(state.layerState);
state.layerState = {
...initialLayerState,
objects: [
{
kind: 'image',
layer: 'base',
x: 0,
y: 0,
width: image.width,
height: image.height,
image: image,
},
],
};
state.futureLayerStates = [];
state.isCanvasInitialized = false;
state.doesCanvasNeedScaling = true;
};
export const canvasExtraReducers = (
builder: ActionReducerMapBuilder<CanvasState>
) => {
builder.addCase(mergeAndUploadCanvas.fulfilled, (state, action) => {
if (!action.payload) return;
const { image, kind, originalBoundingBox } = action.payload;
if (kind === 'temp_merged_canvas') {
state.pastLayerStates.push({
...state.layerState,
});
state.futureLayerStates = [];
state.layerState.objects = [
{
kind: 'image',
layer: 'base',
...originalBoundingBox,
image,
},
];
}
});
builder.addCase(uploadImage.fulfilled, (state, action) => {
if (!action.payload) return;
const { image, kind, activeTabName } = action.payload;
if (kind !== 'init') return;
if (activeTabName === 'unifiedCanvas') {
setInitialCanvasImage_reducer(state, image);
}
});
};

View File

@ -8,10 +8,8 @@ import {
roundDownToMultiple,
roundToMultiple,
} from 'common/util/roundDownToMultiple';
import {
canvasExtraReducers,
setInitialCanvasImage_reducer,
} from './canvasExtraReducers';
import { canvasExtraReducers } from './reducers/extraReducers';
import { setInitialCanvasImage as setInitialCanvasImage_reducer } from './reducers/setInitialCanvasImage';
import calculateScale from '../util/calculateScale';
import calculateCoordinates from '../util/calculateCoordinates';
import floorCoordinates from '../util/floorCoordinates';

View File

@ -0,0 +1,42 @@
import { CanvasState } from '../canvasTypes';
import _ from 'lodash';
import { mergeAndUploadCanvas } from '../../util/mergeAndUploadCanvas';
import { uploadImage } from 'features/gallery/util/uploadImage';
import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
import { setInitialCanvasImage } from './setInitialCanvasImage';
export const canvasExtraReducers = (
builder: ActionReducerMapBuilder<CanvasState>
) => {
builder.addCase(mergeAndUploadCanvas.fulfilled, (state, action) => {
if (!action.payload) return;
const { image, kind, originalBoundingBox } = action.payload;
if (kind === 'temp_merged_canvas') {
state.pastLayerStates.push({
...state.layerState,
});
state.futureLayerStates = [];
state.layerState.objects = [
{
kind: 'image',
layer: 'base',
...originalBoundingBox,
image,
},
];
}
});
builder.addCase(uploadImage.fulfilled, (state, action) => {
if (!action.payload) return;
const { image, kind, activeTabName } = action.payload;
if (kind !== 'init') return;
if (activeTabName === 'unifiedCanvas') {
setInitialCanvasImage(state, image);
}
});
};

View File

@ -0,0 +1,53 @@
import * as InvokeAI from 'app/invokeai';
import { initialLayerState } from '../canvasSlice';
import { CanvasState } from '../canvasTypes';
import {
roundDownToMultiple,
roundToMultiple,
} from 'common/util/roundDownToMultiple';
import _ from 'lodash';
export const setInitialCanvasImage = (
state: CanvasState,
image: InvokeAI.Image
) => {
const newBoundingBoxDimensions = {
width: roundDownToMultiple(_.clamp(image.width, 64, 512), 64),
height: roundDownToMultiple(_.clamp(image.height, 64, 512), 64),
};
const newBoundingBoxCoordinates = {
x: roundToMultiple(
image.width / 2 - newBoundingBoxDimensions.width / 2,
64
),
y: roundToMultiple(
image.height / 2 - newBoundingBoxDimensions.height / 2,
64
),
};
state.boundingBoxDimensions = newBoundingBoxDimensions;
state.boundingBoxCoordinates = newBoundingBoxCoordinates;
state.pastLayerStates.push(state.layerState);
state.layerState = {
...initialLayerState,
objects: [
{
kind: 'image',
layer: 'base',
x: 0,
y: 0,
width: image.width,
height: image.height,
image: image,
},
],
};
state.futureLayerStates = [];
state.isCanvasInitialized = false;
state.doesCanvasNeedScaling = true;
};