mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
chore(ui): clean up unused files/packages
This commit is contained in:
psychedelicious
@ -21,7 +21,6 @@ import {
|
||||
CanvasLayer,
|
||||
LAYER_NAMES_DICT,
|
||||
} from 'features/canvas/store/canvasTypes';
|
||||
import { mergeAndUploadCanvas } from 'features/canvas/store/thunks/mergeAndUploadCanvas';
|
||||
import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
|
||||
import { systemSelector } from 'features/system/store/systemSelectors';
|
||||
import { isEqual } from 'lodash-es';
|
||||
|
||||
@ -1,172 +0,0 @@
|
||||
import { AnyAction, ThunkAction } from '@reduxjs/toolkit';
|
||||
import * as InvokeAI from 'app/types/invokeai';
|
||||
import { RootState } from 'app/store/store';
|
||||
// import { addImage } from 'features/gallery/store/gallerySlice';
|
||||
import {
|
||||
addToast,
|
||||
setCurrentStatus,
|
||||
setIsCancelable,
|
||||
setIsProcessing,
|
||||
setProcessingIndeterminateTask,
|
||||
} from 'features/system/store/systemSlice';
|
||||
import i18n from 'i18n';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import copyImage from '../../util/copyImage';
|
||||
import downloadFile from '../../util/downloadFile';
|
||||
import { getCanvasBaseLayer } from '../../util/konvaInstanceProvider';
|
||||
import layerToDataURL from '../../util/layerToDataURL';
|
||||
import { setMergedCanvas } from '../canvasSlice';
|
||||
import { CanvasState } from '../canvasTypes';
|
||||
|
||||
type MergeAndUploadCanvasConfig = {
|
||||
cropVisible?: boolean;
|
||||
cropToBoundingBox?: boolean;
|
||||
shouldSaveToGallery?: boolean;
|
||||
shouldDownload?: boolean;
|
||||
shouldCopy?: boolean;
|
||||
shouldSetAsInitialImage?: boolean;
|
||||
};
|
||||
|
||||
const defaultConfig: MergeAndUploadCanvasConfig = {
|
||||
cropVisible: false,
|
||||
cropToBoundingBox: false,
|
||||
shouldSaveToGallery: false,
|
||||
shouldDownload: false,
|
||||
shouldCopy: false,
|
||||
shouldSetAsInitialImage: true,
|
||||
};
|
||||
|
||||
export const mergeAndUploadCanvas =
|
||||
(config = defaultConfig): ThunkAction<void, RootState, unknown, AnyAction> =>
|
||||
async (dispatch, getState) => {
|
||||
const {
|
||||
cropVisible,
|
||||
cropToBoundingBox,
|
||||
shouldSaveToGallery,
|
||||
shouldDownload,
|
||||
shouldCopy,
|
||||
shouldSetAsInitialImage,
|
||||
} = config;
|
||||
|
||||
dispatch(setProcessingIndeterminateTask('Exporting Image'));
|
||||
dispatch(setIsCancelable(false));
|
||||
|
||||
const state = getState() as RootState;
|
||||
|
||||
const {
|
||||
stageScale,
|
||||
boundingBoxCoordinates,
|
||||
boundingBoxDimensions,
|
||||
stageCoordinates,
|
||||
} = state.canvas as CanvasState;
|
||||
|
||||
const canvasBaseLayer = getCanvasBaseLayer();
|
||||
|
||||
if (!canvasBaseLayer) {
|
||||
dispatch(setIsProcessing(false));
|
||||
dispatch(setIsCancelable(true));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
const { dataURL, boundingBox: originalBoundingBox } = layerToDataURL(
|
||||
canvasBaseLayer,
|
||||
stageScale,
|
||||
stageCoordinates,
|
||||
cropToBoundingBox
|
||||
? { ...boundingBoxCoordinates, ...boundingBoxDimensions }
|
||||
: undefined
|
||||
);
|
||||
|
||||
if (!dataURL) {
|
||||
dispatch(setIsProcessing(false));
|
||||
dispatch(setIsCancelable(true));
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append(
|
||||
'data',
|
||||
JSON.stringify({
|
||||
dataURL,
|
||||
filename: 'merged_canvas.png',
|
||||
kind: shouldSaveToGallery ? 'result' : 'temp',
|
||||
cropVisible,
|
||||
})
|
||||
);
|
||||
|
||||
const response = await fetch(`${window.location.origin}/upload`, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const image = (await response.json()) as InvokeAI.ImageUploadResponse;
|
||||
|
||||
const { url, width, height } = image;
|
||||
|
||||
const newImage: InvokeAI._Image = {
|
||||
uuid: uuidv4(),
|
||||
category: shouldSaveToGallery ? 'result' : 'user',
|
||||
...image,
|
||||
};
|
||||
|
||||
if (shouldDownload) {
|
||||
downloadFile(url);
|
||||
dispatch(
|
||||
addToast({
|
||||
title: i18n.t('toast.downloadImageStarted'),
|
||||
status: 'success',
|
||||
duration: 2500,
|
||||
isClosable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldCopy) {
|
||||
copyImage(url, width, height);
|
||||
dispatch(
|
||||
addToast({
|
||||
title: i18n.t('toast.imageCopied'),
|
||||
status: 'success',
|
||||
duration: 2500,
|
||||
isClosable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldSaveToGallery) {
|
||||
dispatch(addImage({ image: newImage, category: 'result' }));
|
||||
dispatch(
|
||||
addToast({
|
||||
title: i18n.t('toast.imageSavedToGallery'),
|
||||
status: 'success',
|
||||
duration: 2500,
|
||||
isClosable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (shouldSetAsInitialImage) {
|
||||
dispatch(
|
||||
setMergedCanvas({
|
||||
kind: 'image',
|
||||
layer: 'base',
|
||||
...originalBoundingBox,
|
||||
image: newImage,
|
||||
})
|
||||
);
|
||||
dispatch(
|
||||
addToast({
|
||||
title: i18n.t('toast.canvasMerged'),
|
||||
status: 'success',
|
||||
duration: 2500,
|
||||
isClosable: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
dispatch(setIsProcessing(false));
|
||||
dispatch(setCurrentStatus(i18n.t('common.statusConnected')));
|
||||
dispatch(setIsCancelable(true));
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
* Copies an image to the clipboard by drawing it to a canvas and then
|
||||
* calling toBlob() on the canvas.
|
||||
*/
|
||||
const copyImage = (url: string, width: number, height: number) => {
|
||||
const imageElement = document.createElement('img');
|
||||
|
||||
imageElement.addEventListener('load', () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
if (!context) return;
|
||||
|
||||
context.drawImage(imageElement, 0, 0);
|
||||
|
||||
canvas.toBlob((blob) => {
|
||||
blob &&
|
||||
navigator.clipboard.write([
|
||||
new ClipboardItem({
|
||||
[blob.type]: blob,
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
canvas.remove();
|
||||
imageElement.remove();
|
||||
});
|
||||
|
||||
imageElement.src = url;
|
||||
};
|
||||
|
||||
export default copyImage;
|
||||
@ -1,14 +0,0 @@
|
||||
/**
|
||||
* Downloads a file, given its URL.
|
||||
*/
|
||||
const downloadFile = (url: string) => {
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = '';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
a.remove();
|
||||
};
|
||||
|
||||
export default downloadFile;
|
||||
@ -1,53 +0,0 @@
|
||||
import Konva from 'konva';
|
||||
import { IRect, Vector2d } from 'konva/lib/types';
|
||||
|
||||
const layerToDataURL = (
|
||||
layer: Konva.Layer,
|
||||
stageScale: number,
|
||||
stageCoordinates: Vector2d,
|
||||
boundingBox?: IRect
|
||||
) => {
|
||||
const tempScale = layer.scale();
|
||||
|
||||
const relativeClientRect = layer.getClientRect({
|
||||
relativeTo: layer.getParent(),
|
||||
});
|
||||
|
||||
// Scale the canvas before getting it as a Blob
|
||||
layer.scale({
|
||||
x: 1 / stageScale,
|
||||
y: 1 / stageScale,
|
||||
});
|
||||
|
||||
const { x, y, width, height } = layer.getClientRect();
|
||||
const dataURLBoundingBox = boundingBox
|
||||
? {
|
||||
x: boundingBox.x + stageCoordinates.x,
|
||||
y: boundingBox.y + stageCoordinates.y,
|
||||
width: boundingBox.width,
|
||||
height: boundingBox.height,
|
||||
}
|
||||
: {
|
||||
x: x,
|
||||
y: y,
|
||||
width: width,
|
||||
height: height,
|
||||
};
|
||||
|
||||
const dataURL = layer.toDataURL(dataURLBoundingBox);
|
||||
|
||||
// Unscale the canvas
|
||||
layer.scale(tempScale);
|
||||
|
||||
return {
|
||||
dataURL,
|
||||
boundingBox: {
|
||||
x: relativeClientRect.x,
|
||||
y: relativeClientRect.y,
|
||||
width: width,
|
||||
height: height,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default layerToDataURL;
|
||||
Reference in New Issue
Block a user