/* eslint-disable max-classes-per-file */ import { writable } from "svelte/store"; import { type Editor } from "@graphite/editor"; import { type FrontendDocumentDetails, TriggerFetchAndOpenDocument, TriggerSaveDocument, TriggerExportImage, TriggerSaveFile, TriggerImport, TriggerOpenDocument, UpdateActiveDocument, UpdateOpenDocumentsList, UpdateDataPanelState, UpdatePropertiesPanelState, UpdateLayersPanelState, } from "@graphite/messages"; import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files"; import { extractPixelData, rasterizeSVG } from "@graphite/utility-functions/rasterization"; // eslint-disable-next-line @typescript-eslint/explicit-function-return-type export function createPortfolioState(editor: Editor) { const { subscribe, update } = writable({ unsaved: false, documents: [] as FrontendDocumentDetails[], activeDocumentIndex: 0, dataPanelOpen: false, propertiesPanelOpen: true, layersPanelOpen: true, }); // Set up message subscriptions on creation editor.subscriptions.subscribeJsMessage(UpdateOpenDocumentsList, (updateOpenDocumentList) => { update((state) => { state.documents = updateOpenDocumentList.openDocuments; return state; }); }); editor.subscriptions.subscribeJsMessage(UpdateActiveDocument, (updateActiveDocument) => { update((state) => { // Assume we receive a correct document id const activeId = state.documents.findIndex((doc) => doc.id === updateActiveDocument.documentId); state.activeDocumentIndex = activeId; return state; }); }); editor.subscriptions.subscribeJsMessage(TriggerFetchAndOpenDocument, async (triggerFetchAndOpenDocument) => { try { const { name, filename } = triggerFetchAndOpenDocument; const url = new URL(filename, document.location.href); const data = await fetch(url); const content = await data.text(); editor.handle.openDocumentFile(name, content); } catch { // Needs to be delayed until the end of the current call stack so the existing demo artwork dialog can be closed first, otherwise this dialog won't show setTimeout(() => { editor.handle.errorDialog("Failed to open document", "The file could not be reached over the internet. You may be offline, or it may be missing."); }, 0); } }); editor.subscriptions.subscribeJsMessage(TriggerOpenDocument, async () => { const suffix = "." + editor.handle.fileExtension(); const data = await upload(suffix, "text"); // Use filename as document name, removing the extension if it exists let documentName = data.filename; if (documentName.endsWith(suffix)) { documentName = documentName.slice(0, -suffix.length); } editor.handle.openDocumentFile(documentName, data.content); }); editor.subscriptions.subscribeJsMessage(TriggerImport, async () => { const data = await upload("image/*", "both"); if (data.type.includes("svg")) { const svg = new TextDecoder().decode(data.content.data); editor.handle.pasteSvg(data.filename, svg); return; } // In case the user accidentally uploads a Graphite file, open it instead of failing to import it const graphiteFileSuffix = "." + editor.handle.fileExtension(); if (data.filename.endsWith(graphiteFileSuffix)) { const documentName = data.filename.slice(0, -graphiteFileSuffix.length); editor.handle.openDocumentFile(documentName, data.content.text); return; } const imageData = await extractPixelData(new Blob([data.content.data], { type: data.type })); editor.handle.pasteImage(data.filename, new Uint8Array(imageData.data), imageData.width, imageData.height); }); editor.subscriptions.subscribeJsMessage(TriggerSaveDocument, (triggerSaveDocument) => { downloadFile(triggerSaveDocument.name, triggerSaveDocument.content); }); editor.subscriptions.subscribeJsMessage(TriggerSaveFile, (triggerFileDownload) => { downloadFile(triggerFileDownload.name, triggerFileDownload.content); }); editor.subscriptions.subscribeJsMessage(TriggerExportImage, async (TriggerExportImage) => { const { svg, name, mime, size } = TriggerExportImage; // Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black) const backgroundColor = mime.endsWith("jpeg") ? "white" : undefined; // Rasterize the SVG to an image file try { const blob = await rasterizeSVG(svg, size.x, size.y, mime, backgroundColor); // Have the browser download the file to the user's disk downloadFileBlob(name, blob); } catch { // Fail silently if there's an error rasterizing the SVG, such as a zero-sized image } }); editor.subscriptions.subscribeJsMessage(UpdateDataPanelState, async (updateDataPanelState) => { update((state) => { state.dataPanelOpen = updateDataPanelState.open; return state; }); }); editor.subscriptions.subscribeJsMessage(UpdatePropertiesPanelState, async (updatePropertiesPanelState) => { update((state) => { state.propertiesPanelOpen = updatePropertiesPanelState.open; return state; }); }); editor.subscriptions.subscribeJsMessage(UpdateLayersPanelState, async (updateLayersPanelState) => { update((state) => { state.layersPanelOpen = updateLayersPanelState.open; return state; }); }); return { subscribe, }; } export type PortfolioState = ReturnType;