Implement download/copy ImageFrame layer output (#1194)

* Implement download/copy ImageFrame layer output

* Add note about black transparency when copying

* Introspect node graph output type to conditionally disable the download button

---------

Co-authored-by: Dennis Kobert <dennis@kobert.dev>
This commit is contained in:
Keavon Chambers
2023-05-03 09:09:07 +00:00
committed by GitHub
co-authored by Dennis Kobert
parent 83b382c50e
commit 7c115b3b26
17 changed files with 197 additions and 52 deletions
+27 -12
View File
@@ -2,25 +2,28 @@
import {writable} from "svelte/store";
import { downloadFileText, downloadFileBlob, upload } from "@graphite/utility-functions/files";
import { downloadFileText, downloadFileBlob, upload, downloadFileURL } from "@graphite/utility-functions/files";
import { imaginateGenerate, imaginateCheckConnection, imaginateTerminate, updateBackendImage } from "@graphite/utility-functions/imaginate";
import { extractPixelData, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
import { extractPixelData, imageToPNG, rasterizeSVG, rasterizeSVGCanvas } from "@graphite/utility-functions/rasterization";
import { type Editor } from "@graphite/wasm-communication/editor";
import {
type FrontendDocumentDetails,
TriggerFileDownload,
TriggerImport,
TriggerOpenDocument,
TriggerRasterDownload,
TriggerCopyToClipboardBlobUrl,
TriggerDownloadBlobUrl,
TriggerDownloadRaster,
TriggerDownloadTextFile,
TriggerImaginateCheckServerStatus,
TriggerImaginateGenerate,
TriggerImaginateTerminate,
TriggerImaginateCheckServerStatus,
TriggerImport,
TriggerOpenDocument,
TriggerRasterizeRegionBelowLayer,
UpdateActiveDocument,
UpdateOpenDocumentsList,
UpdateImageData,
TriggerRevokeBlobUrl,
UpdateActiveDocument,
UpdateImageData,
UpdateOpenDocumentsList,
} from "@graphite/wasm-communication/messages";
import { copyToClipboardFileURL } from "~src/io-managers/clipboard";
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export function createPortfolioState(editor: Editor) {
@@ -55,10 +58,22 @@ export function createPortfolioState(editor: Editor) {
const imageData = await extractPixelData(new Blob([data.content], { type: data.type }));
editor.instance.pasteImage(new Uint8Array(imageData.data), imageData.width, imageData.height);
});
editor.subscriptions.subscribeJsMessage(TriggerFileDownload, (triggerFileDownload) => {
editor.subscriptions.subscribeJsMessage(TriggerDownloadTextFile, (triggerFileDownload) => {
downloadFileText(triggerFileDownload.name, triggerFileDownload.document);
});
editor.subscriptions.subscribeJsMessage(TriggerRasterDownload, async (triggerRasterDownload) => {
editor.subscriptions.subscribeJsMessage(TriggerDownloadBlobUrl, async (triggerDownloadBlobUrl) => {
const data = await fetch(triggerDownloadBlobUrl.blobUrl);
const blob = await data.blob();
// TODO: Remove this if/when we end up returning PNG directly from the backend
const pngBlob = await imageToPNG(blob);
downloadFileBlob(triggerDownloadBlobUrl.layerName, pngBlob);
});
editor.subscriptions.subscribeJsMessage(TriggerCopyToClipboardBlobUrl, (triggerDownloadBlobUrl) => {
copyToClipboardFileURL(triggerDownloadBlobUrl.blobUrl);
});
editor.subscriptions.subscribeJsMessage(TriggerDownloadRaster, async (triggerRasterDownload) => {
const { svg, name, mime, size } = triggerRasterDownload;
// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)