github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-14 17:35:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): migrate all clipboard stuff to useClipboard

Browse Source
This commit is contained in:
psychedelicious
2025-02-07 09:57:55 +11:00
parent ecb38c2bae
commit e7aafdfdbf
10 changed files with 67 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
invokeai/frontend/web/src/features/controlLayers/hooks/copyHooks.ts
View File

@@ -1,12 +1,11 @@
import { logger } from 'app/logging/logger';
import { withResultAsync } from 'common/util/result';
import { useClipboard } from 'common/hooks/useClipboard';
import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer';
import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterInpaintMask';
import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
import { canvasToBlob } from 'features/controlLayers/konva/util';
import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
import { toast } from 'features/toast/toast';
import { startCase } from 'lodash-es';
import { useCallback } from 'react';
@@ -17,6 +16,7 @@ const log = logger('canvas');
export const useCopyLayerToClipboard = () => {
const { t } = useTranslation();
const clipboard = useClipboard();
const copyLayerToCipboard = useCallback(
async (
adapter:
@@ -30,27 +30,25 @@ export const useCopyLayerToClipboard = () => {
return;
}
const result = await withResultAsync(async () => {
try {
const canvas = adapter.getCanvas();
const blob = await canvasToBlob(canvas);
copyBlobToClipboard(blob);
});
if (result.isOk()) {
log.trace('Layer copied to clipboard');
toast({
status: 'info',
title: t('toast.layerCopiedToClipboard'),
clipboard.writeImage(blob, () => {
log.trace('Layer copied to clipboard');
toast({
status: 'info',
title: t('toast.layerCopiedToClipboard'),
});
});
} else {
log.error({ error: serializeError(result.error) }, 'Problem copying layer to clipboard');
} catch (error) {
log.error({ error: serializeError(error) }, 'Problem copying layer to clipboard');
toast({
status: 'error',
title: t('toast.problemCopyingLayer'),
});
}
},
[t]
[clipboard, t]
);
return copyLayerToCipboard;
@@ -58,6 +56,7 @@ export const useCopyLayerToClipboard = () => {
export const useCopyCanvasToClipboard = (region: 'canvas' | 'bbox') => {
const { t } = useTranslation();
const clipboard = useClipboard();
const canvasManager = useCanvasManager();
const copyCanvasToClipboard = useCallback(async () => {
const rect =
@@ -74,20 +73,19 @@ export const useCopyCanvasToClipboard = (region: 'canvas' | 'bbox') => {
return;
}
const result = await withResultAsync(async () => {
try {
const rasterAdapters = canvasManager.compositor.getVisibleAdaptersOfType('raster_layer');
const canvasElement = canvasManager.compositor.getCompositeCanvas(rasterAdapters, rect);
const blob = await canvasToBlob(canvasElement);
copyBlobToClipboard(blob);
});
if (result.isOk()) {
toast({ title: t('controlLayers.regionCopiedToClipboard', { region: startCase(region) }) });
} else {
log.error({ error: serializeError(result.error) }, 'Failed to save canvas to gallery');
clipboard.writeImage(blob, () => {
log.trace('Region copied to clipboard');
toast({ title: t('controlLayers.regionCopiedToClipboard', { region: startCase(region) }) });
});
} catch (error) {
log.error({ error: serializeError(error) }, 'Failed to save canvas to gallery');
toast({ title: t('controlLayers.copyRegionError', { region: startCase(region) }), status: 'error' });
}
}, [canvasManager.compositor, canvasManager.stateApi, region, t]);
}, [canvasManager.compositor, canvasManager.stateApi, clipboard, region, t]);
return copyCanvasToClipboard;
};