feat(ui): add multi-select and batch capabilities

This introduces the core functionality for batch operations on images and multiple selection in the gallery/batch manager.

A number of other substantial changes are included:
- `imagesSlice` is consolidated into `gallerySlice`, allowing for simpler selection of filtered images
- `batchSlice` is added to manage the batch
- The wonky context pattern for image deletion has been changed, much simpler now using a `imageDeletionSlice` and redux listeners; this needs to be implemented still for the other image modals
- Minimum gallery size in px implemented as a hook
- Many style fixes & several bug fixes

TODO:
- The UI and UX need to be figured out, especially for controlnet
- Batch processing is not hooked up; generation does not do anything with batch
- Routes to support batch image operations, specifically delete and add/remove to/from boards
This commit is contained in:
psychedelicious
2023-07-04 00:09:18 +10:00
parent fa169b5517
commit 90aa97edd4
100 changed files with 3476 additions and 2075 deletions

View File

@@ -1,6 +1,6 @@
import queryString from 'query-string';
import { createAppAsyncThunk } from 'app/store/storeUtils';
import { selectImagesAll } from 'features/gallery/store/imagesSlice';
import { selectImagesAll } from 'features/gallery/store/gallerySlice';
import { size } from 'lodash-es';
import { paths } from 'services/api/schema';
import { $client } from 'services/api/client';
@@ -112,6 +112,10 @@ type UploadedToastAction = {
type: 'TOAST_UPLOADED';
};
type AddToBatchAction = {
type: 'ADD_TO_BATCH';
};
export type PostUploadAction =
| ControlNetAction
| InitialImageAction
@@ -119,12 +123,12 @@ export type PostUploadAction =
| CanvasInitialImageAction
| CanvasMergedAction
| CanvasSavedToGalleryAction
| UploadedToastAction;
| UploadedToastAction
| AddToBatchAction;
type UploadImageArg =
paths['/api/v1/images/']['post']['parameters']['query'] & {
file: File;
// file: paths['/api/v1/images/']['post']['requestBody']['content']['multipart/form-data']['file'];
postUploadAction?: PostUploadAction;
};
@@ -284,8 +288,7 @@ export const receivedPageOfImages = createAppAsyncThunk<
const { get } = $client.get();
const state = getState();
const { categories } = state.images;
const { selectedBoardId } = state.boards;
const { categories, selectedBoardId } = state.gallery;
const images = selectImagesAll(state).filter((i) => {
const isInCategory = categories.includes(i.image_category);