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

fix(ui): passing Promise into ClipboardItem to make it work in Safari

Browse Source 
throwing Error in getBaseLayerBlob, instead of returning nil
using copyBlobToClipboard for both Canvas and Text2Image clipboard functionality
This commit is contained in:
Dmitry Parnas 2023-09-21 15:08:12 +03:00 committed by psychedelicious
parent 5aefa49d7d
commit aa82f9360c
7 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard.ts
View File

@ -3,7 +3,7 @@ import { startAppListening } from '..';
import { $logger } from 'app/logging/logger';
import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
import { addToast } from 'features/system/store/systemSlice';
import { copyBlobToClipboard } from 'features/canvas/util/copyBlobToClipboard';
import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
import { t } from 'i18next';
export const addCanvasCopiedToClipboardListener = () => {
@ -15,10 +15,12 @@ export const addCanvasCopiedToClipboardListener = () => {
.child({ namespace: 'canvasCopiedToClipboardListener' });
const state = getState();
const blob = await getBaseLayerBlob(state);
try {
const blob = getBaseLayerBlob(state);
if (!blob) {
moduleLog.error('Problem getting base layer blob');
copyBlobToClipboard(blob);
} catch (err) {
moduleLog.error(String(err));
dispatch(
addToast({
title: t('toast.problemCopyingCanvas'),
@ -29,8 +31,6 @@ export const addCanvasCopiedToClipboardListener = () => {
return;
}
copyBlobToClipboard(blob);
dispatch(
addToast({
title: t('toast.canvasCopiedClipboard'),

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage.ts
View File

@ -15,10 +15,11 @@ export const addCanvasDownloadedAsImageListener = () => {
.child({ namespace: 'canvasSavedToGalleryListener' });
const state = getState();
const blob = await getBaseLayerBlob(state);
if (!blob) {
moduleLog.error('Problem getting base layer blob');
let blob;
try {
blob = await getBaseLayerBlob(state);
} catch (err) {
moduleLog.error(String(err));
dispatch(
addToast({
title: t('toast.problemDownloadingCanvas'),

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet.ts
View File

@ -14,10 +14,11 @@ export const addCanvasImageToControlNetListener = () => {
const log = logger('canvas');
const state = getState();
const blob = await getBaseLayerBlob(state);
if (!blob) {
log.error('Problem getting base layer blob');
let blob;
try {
blob = await getBaseLayerBlob(state);
} catch (err) {
log.error(String(err));
dispatch(
addToast({
title: t('toast.problemSavingCanvas'),

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts
View File

@ -13,10 +13,11 @@ export const addCanvasSavedToGalleryListener = () => {
const log = logger('canvas');
const state = getState();
const blob = await getBaseLayerBlob(state);
if (!blob) {
log.error('Problem getting base layer blob');
let blob;
try {
blob = await getBaseLayerBlob(state);
} catch (err) {
log.error(String(err));
dispatch(
addToast({
title: t('toast.problemSavingCanvas'),

2
invokeai/frontend/web/src/features/canvas/util/getBaseLayerBlob.ts
View File

@ -9,7 +9,7 @@ export const getBaseLayerBlob = async (state: RootState) => {
const canvasBaseLayer = getCanvasBaseLayer();
if (!canvasBaseLayer) {
return;
throw new Error('Problem getting base layer blob');
}
const {

7
invokeai/frontend/web/src/features/canvas/util/copyBlobToClipboard.ts → invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts
View File

@ -1,10 +1,13 @@
/**
* Copies a blob to the clipboard by calling navigator.clipboard.write().
*/
export const copyBlobToClipboard = (blob: Blob) => {
export const copyBlobToClipboard = (
blob: Promise<Blob>,
type = 'image/png'
) => {
navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
[type]: blob,
}),
]);
};

15
invokeai/frontend/web/src/features/ui/hooks/useCopyImageToClipboard.ts
View File

@ -1,6 +1,7 @@
import { useAppToaster } from 'app/components/Toaster';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
export const useCopyImageToClipboard = () => {
const toaster = useAppToaster();
@ -22,13 +23,13 @@ export const useCopyImageToClipboard = () => {
});
}
try {
const response = await fetch(image_url);
const blob = await response.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
const getImageBlob = async () => {
const response = await fetch(image_url);
return await response.blob();
};
copyBlobToClipboard(getImageBlob());
toaster({
title: t('toast.imageCopied'),
status: 'success',