mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
fix(ui): passing Promise into ClipboardItem to make it work in Safari
throwing Error in getBaseLayerBlob, instead of returning nil using copyBlobToClipboard for both Canvas and Text2Image clipboard functionality
This commit is contained in:
parent
5aefa49d7d
commit
aa82f9360c
@ -3,7 +3,7 @@ import { startAppListening } from '..';
|
|||||||
import { $logger } from 'app/logging/logger';
|
import { $logger } from 'app/logging/logger';
|
||||||
import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
|
import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
|
||||||
import { addToast } from 'features/system/store/systemSlice';
|
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';
|
import { t } from 'i18next';
|
||||||
|
|
||||||
export const addCanvasCopiedToClipboardListener = () => {
|
export const addCanvasCopiedToClipboardListener = () => {
|
||||||
@ -15,10 +15,12 @@ export const addCanvasCopiedToClipboardListener = () => {
|
|||||||
.child({ namespace: 'canvasCopiedToClipboardListener' });
|
.child({ namespace: 'canvasCopiedToClipboardListener' });
|
||||||
const state = getState();
|
const state = getState();
|
||||||
|
|
||||||
const blob = await getBaseLayerBlob(state);
|
try {
|
||||||
|
const blob = getBaseLayerBlob(state);
|
||||||
|
|
||||||
if (!blob) {
|
copyBlobToClipboard(blob);
|
||||||
moduleLog.error('Problem getting base layer blob');
|
} catch (err) {
|
||||||
|
moduleLog.error(String(err));
|
||||||
dispatch(
|
dispatch(
|
||||||
addToast({
|
addToast({
|
||||||
title: t('toast.problemCopyingCanvas'),
|
title: t('toast.problemCopyingCanvas'),
|
||||||
@ -29,8 +31,6 @@ export const addCanvasCopiedToClipboardListener = () => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
copyBlobToClipboard(blob);
|
|
||||||
|
|
||||||
dispatch(
|
dispatch(
|
||||||
addToast({
|
addToast({
|
||||||
title: t('toast.canvasCopiedClipboard'),
|
title: t('toast.canvasCopiedClipboard'),
|
||||||
|
@ -15,10 +15,11 @@ export const addCanvasDownloadedAsImageListener = () => {
|
|||||||
.child({ namespace: 'canvasSavedToGalleryListener' });
|
.child({ namespace: 'canvasSavedToGalleryListener' });
|
||||||
const state = getState();
|
const state = getState();
|
||||||
|
|
||||||
const blob = await getBaseLayerBlob(state);
|
let blob;
|
||||||
|
try {
|
||||||
if (!blob) {
|
blob = await getBaseLayerBlob(state);
|
||||||
moduleLog.error('Problem getting base layer blob');
|
} catch (err) {
|
||||||
|
moduleLog.error(String(err));
|
||||||
dispatch(
|
dispatch(
|
||||||
addToast({
|
addToast({
|
||||||
title: t('toast.problemDownloadingCanvas'),
|
title: t('toast.problemDownloadingCanvas'),
|
||||||
|
@ -14,10 +14,11 @@ export const addCanvasImageToControlNetListener = () => {
|
|||||||
const log = logger('canvas');
|
const log = logger('canvas');
|
||||||
const state = getState();
|
const state = getState();
|
||||||
|
|
||||||
const blob = await getBaseLayerBlob(state);
|
let blob;
|
||||||
|
try {
|
||||||
if (!blob) {
|
blob = await getBaseLayerBlob(state);
|
||||||
log.error('Problem getting base layer blob');
|
} catch (err) {
|
||||||
|
log.error(String(err));
|
||||||
dispatch(
|
dispatch(
|
||||||
addToast({
|
addToast({
|
||||||
title: t('toast.problemSavingCanvas'),
|
title: t('toast.problemSavingCanvas'),
|
||||||
|
@ -13,10 +13,11 @@ export const addCanvasSavedToGalleryListener = () => {
|
|||||||
const log = logger('canvas');
|
const log = logger('canvas');
|
||||||
const state = getState();
|
const state = getState();
|
||||||
|
|
||||||
const blob = await getBaseLayerBlob(state);
|
let blob;
|
||||||
|
try {
|
||||||
if (!blob) {
|
blob = await getBaseLayerBlob(state);
|
||||||
log.error('Problem getting base layer blob');
|
} catch (err) {
|
||||||
|
log.error(String(err));
|
||||||
dispatch(
|
dispatch(
|
||||||
addToast({
|
addToast({
|
||||||
title: t('toast.problemSavingCanvas'),
|
title: t('toast.problemSavingCanvas'),
|
||||||
|
@ -9,7 +9,7 @@ export const getBaseLayerBlob = async (state: RootState) => {
|
|||||||
const canvasBaseLayer = getCanvasBaseLayer();
|
const canvasBaseLayer = getCanvasBaseLayer();
|
||||||
|
|
||||||
if (!canvasBaseLayer) {
|
if (!canvasBaseLayer) {
|
||||||
return;
|
throw new Error('Problem getting base layer blob');
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
@ -1,10 +1,13 @@
|
|||||||
/**
|
/**
|
||||||
* Copies a blob to the clipboard by calling navigator.clipboard.write().
|
* 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([
|
navigator.clipboard.write([
|
||||||
new ClipboardItem({
|
new ClipboardItem({
|
||||||
[blob.type]: blob,
|
[type]: blob,
|
||||||
}),
|
}),
|
||||||
]);
|
]);
|
||||||
};
|
};
|
@ -1,6 +1,7 @@
|
|||||||
import { useAppToaster } from 'app/components/Toaster';
|
import { useAppToaster } from 'app/components/Toaster';
|
||||||
import { useCallback, useMemo } from 'react';
|
import { useCallback, useMemo } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
|
||||||
|
|
||||||
export const useCopyImageToClipboard = () => {
|
export const useCopyImageToClipboard = () => {
|
||||||
const toaster = useAppToaster();
|
const toaster = useAppToaster();
|
||||||
@ -22,13 +23,13 @@ export const useCopyImageToClipboard = () => {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
const response = await fetch(image_url);
|
const getImageBlob = async () => {
|
||||||
const blob = await response.blob();
|
const response = await fetch(image_url);
|
||||||
await navigator.clipboard.write([
|
return await response.blob();
|
||||||
new ClipboardItem({
|
};
|
||||||
[blob.type]: blob,
|
|
||||||
}),
|
copyBlobToClipboard(getImageBlob());
|
||||||
]);
|
|
||||||
toaster({
|
toaster({
|
||||||
title: t('toast.imageCopied'),
|
title: t('toast.imageCopied'),
|
||||||
status: 'success',
|
status: 'success',
|
||||||
|
Loading…
Reference in New Issue
Block a user