fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-30 04:28:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Split apart the frontend Editor type into SubscriptionsRouter and EditorHandle (#3923)

Browse Source 
* Remove the unused Editor.raw/wasmMemory/wasmImport

* Split out Editor.subscriptions

* Replace editor.handle.* with editor.* (1 of 2)

* Replace editor.handle.* with editor.* (2 of 2)

* Replace Editor typedef with EditorHandle import

* Pluralize subscription-router and rename subscriptionsRef->subscriptionsRouter and editorRef->editorHandle

* Remove editor.ts

* Update the readme

* Fix demo art loading bug
This commit is contained in:
Keavon Chambers
2026-03-20 23:34:13 -07:00
committed by GitHub
parent 64fd12a1a0
commit ed7987c881
40 changed files with 549 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/stores/portfolio.ts
+34 -34
View File
@@ -1,8 +1,8 @@
import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { EditorHandle, OpenDocument } from "@graphite/../wasm/pkg/graphite_wasm";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
@@ -25,26 +25,26 @@ const initialState: PortfolioStoreState = {
layersPanelOpen: true,
};
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
const store: Writable<PortfolioStoreState> = import.meta.hot?.data?.store || writable<PortfolioStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createPortfolioStore(editor: Editor) {
export function createPortfolioStore(subscriptions: SubscriptionsRouter, editor: EditorHandle) {
destroyPortfolioStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
update((state) => {
state.documents = data.openDocuments;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
update((state) => {
// Assume we receive a correct document id
const activeId = state.documents.findIndex((doc) => doc.id === data.documentId);
@@ -53,39 +53,39 @@ export function createPortfolioStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
try {
const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
const response = await fetch(url);
editor.handle.openFile(data.filename, await response.bytes());
editor.openFile(data.filename, await response.bytes());
} 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.");
editor.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.subscribeFrontendMessage("TriggerOpen", async () => {
const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
editor.handle.openFile(data.filename, data.content);
subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
const data = await upload(`image/*,.${editor.fileExtension()}`, "data");
editor.openFile(data.filename, data.content);
});
editor.subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
subscriptions.subscribeFrontendMessage("TriggerImport", async () => {
// TODO: Use the same `accept` string as in the `TriggerOpen` handler once importing Graphite documents as nodes is supported
const data = await upload("image/*", "data");
editor.handle.importFile(data.filename, data.content);
editor.importFile(data.filename, data.content);
});
editor.subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
downloadFile(data.name, data.content);
});
editor.subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
downloadFile(data.name, data.content);
});
editor.subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
const { svg, name, mime, size } = data;
// Fill the canvas with white if it'll be a JPEG (which does not support transparency and defaults to black)
@@ -102,21 +102,21 @@ export function createPortfolioStore(editor: Editor) {
}
});
editor.subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
update((state) => {
state.dataPanelOpen = data.open;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
update((state) => {
state.propertiesPanelOpen = data.open;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
update((state) => {
state.layersPanelOpen = data.open;
return state;
@@ -127,18 +127,18 @@ export function createPortfolioStore(editor: Editor) {
}
export function destroyPortfolioStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
editor.subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerOpen");
editor.subscriptions.unsubscribeFrontendMessage("TriggerImport");
editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
editor.subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
editor.subscriptions.unsubscribeFrontendMessage("UpdateDataPanelState");
editor.subscriptions.unsubscribeFrontendMessage("UpdatePropertiesPanelState");
editor.subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
subscriptions.unsubscribeFrontendMessage("UpdateOpenDocumentsList");
subscriptions.unsubscribeFrontendMessage("UpdateActiveDocument");
subscriptions.unsubscribeFrontendMessage("TriggerFetchAndOpenDocument");
subscriptions.unsubscribeFrontendMessage("TriggerOpen");
subscriptions.unsubscribeFrontendMessage("TriggerImport");
subscriptions.unsubscribeFrontendMessage("TriggerSaveDocument");
subscriptions.unsubscribeFrontendMessage("TriggerSaveFile");
subscriptions.unsubscribeFrontendMessage("TriggerExportImage");
subscriptions.unsubscribeFrontendMessage("UpdateDataPanelState");
subscriptions.unsubscribeFrontendMessage("UpdatePropertiesPanelState");
subscriptions.unsubscribeFrontendMessage("UpdateLayersPanelState");
}