fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-22 03:08: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/app-window.ts
+16 -16
View File
@@ -2,7 +2,7 @@ import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
@@ -21,47 +21,47 @@ const initialState: AppWindowStoreState = {
uiScale: 1,
};
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<AppWindowStoreState> = import.meta.hot?.data?.store || writable<AppWindowStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createAppWindowStore(editor: Editor) {
export function createAppWindowStore(subscriptions: SubscriptionsRouter) {
destroyAppWindowStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
update((state) => {
state.platform = data.platform;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
update((state) => {
state.maximized = data.maximized;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
update((state) => {
state.fullscreen = data.fullscreen;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
update((state) => {
state.viewportHolePunch = data.active;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
update((state) => {
state.uiScale = data.scale;
return state;
@@ -72,12 +72,12 @@ export function createAppWindowStore(editor: Editor) {
}
export function destroyAppWindowStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
}
frontend/src/stores/dialog.ts
+20 -20
View File
@@ -2,9 +2,9 @@ import { tick } from "svelte";
import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { EditorHandle, Layout } from "@graphite/../wasm/pkg/graphite_wasm";
import type { IconName } from "@graphite/icons";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { patchLayout } from "@graphite/utility-functions/widgets";
export type DialogStore = ReturnType<typeof createDialogStore>;
@@ -29,19 +29,19 @@ const initialState: DialogStoreState = {
panicDetails: "",
};
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<DialogStoreState> = import.meta.hot?.data?.store || writable<DialogStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createDialogStore(editor: Editor) {
export function createDialogStore(subscriptions: SubscriptionsRouter, editor: EditorHandle) {
destroyDialogStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
update((state) => {
state.visible = true;
@@ -52,7 +52,7 @@ export function createDialogStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("DialogButtons", async (data) => {
subscriptions.subscribeLayoutUpdate("DialogButtons", async (data) => {
await tick();
update((state) => {
@@ -62,7 +62,7 @@ export function createDialogStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("DialogColumn1", async (data) => {
subscriptions.subscribeLayoutUpdate("DialogColumn1", async (data) => {
await tick();
update((state) => {
@@ -72,7 +72,7 @@ export function createDialogStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("DialogColumn2", async (data) => {
subscriptions.subscribeLayoutUpdate("DialogColumn2", async (data) => {
await tick();
update((state) => {
@@ -82,7 +82,7 @@ export function createDialogStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
subscriptions.subscribeFrontendMessage("DialogClose", () => {
update((state) => {
// Disallow dismissing the crash dialog since it should remain as the final notification
if (state.panicDetails === "") state.visible = false;
@@ -91,7 +91,7 @@ export function createDialogStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog", async () => {
subscriptions.subscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog", async () => {
const BACKUP_URL = "https://editor.graphite.art/third-party-licenses.txt";
let licenseText = `Content was not able to load. Please check your network connection and try again.\n\nOr visit ${BACKUP_URL} for the license notices.`;
@@ -102,22 +102,22 @@ export function createDialogStore(editor: Editor) {
// Do nothing on network error
}
editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
editor.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
});
return { subscribe };
}
export function destroyDialogStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
subscriptions.unsubscribeFrontendMessage("DisplayDialog");
subscriptions.unsubscribeFrontendMessage("DialogClose");
subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
subscriptions.unsubscribeLayoutUpdate("DialogButtons");
subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
}
// Creates a crash dialog from JS once the editor has panicked.
frontend/src/stores/document.ts
+20 -20
View File
@@ -3,7 +3,7 @@ import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { patchLayout } from "@graphite/utility-functions/widgets";
export type DocumentStore = ReturnType<typeof createDocumentStore>;
@@ -27,26 +27,26 @@ const initialState: DocumentStoreState = {
fadeArtwork: 100,
};
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<DocumentStoreState> = import.meta.hot?.data?.store || writable<DocumentStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createDocumentStore(editor: Editor) {
export function createDocumentStore(subscriptions: SubscriptionsRouter) {
destroyDocumentStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
update((state) => {
state.fadeArtwork = data.percentage;
return state;
});
});
editor.subscriptions.subscribeLayoutUpdate("ToolOptions", async (data) => {
subscriptions.subscribeLayoutUpdate("ToolOptions", async (data) => {
await tick();
update((state) => {
@@ -55,7 +55,7 @@ export function createDocumentStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("DocumentBar", async (data) => {
subscriptions.subscribeLayoutUpdate("DocumentBar", async (data) => {
await tick();
update((state) => {
@@ -64,7 +64,7 @@ export function createDocumentStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("ToolShelf", async (data) => {
subscriptions.subscribeLayoutUpdate("ToolShelf", async (data) => {
await tick();
update((state) => {
@@ -73,7 +73,7 @@ export function createDocumentStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("WorkingColors", async (data) => {
subscriptions.subscribeLayoutUpdate("WorkingColors", async (data) => {
await tick();
update((state) => {
@@ -82,7 +82,7 @@ export function createDocumentStore(editor: Editor) {
});
});
editor.subscriptions.subscribeLayoutUpdate("NodeGraphControlBar", async (data) => {
subscriptions.subscribeLayoutUpdate("NodeGraphControlBar", async (data) => {
await tick();
update((state) => {
@@ -91,7 +91,7 @@ export function createDocumentStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateGraphViewOverlay", (data) => {
subscriptions.subscribeFrontendMessage("UpdateGraphViewOverlay", (data) => {
update((state) => {
state.graphViewOverlayOpen = data.open;
return state;
@@ -102,14 +102,14 @@ export function createDocumentStore(editor: Editor) {
}
export function destroyDocumentStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
editor.subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
editor.subscriptions.unsubscribeLayoutUpdate("ToolOptions");
editor.subscriptions.unsubscribeLayoutUpdate("DocumentBar");
editor.subscriptions.unsubscribeLayoutUpdate("ToolShelf");
editor.subscriptions.unsubscribeLayoutUpdate("WorkingColors");
editor.subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
subscriptions.unsubscribeFrontendMessage("UpdateGraphFadeArtwork");
subscriptions.unsubscribeFrontendMessage("UpdateGraphViewOverlay");
subscriptions.unsubscribeLayoutUpdate("ToolOptions");
subscriptions.unsubscribeLayoutUpdate("DocumentBar");
subscriptions.unsubscribeLayoutUpdate("ToolShelf");
subscriptions.unsubscribeLayoutUpdate("WorkingColors");
subscriptions.unsubscribeLayoutUpdate("NodeGraphControlBar");
}
frontend/src/stores/fullscreen.ts
+8 -8
View File
@@ -1,7 +1,7 @@
import { get, writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { Editor } from "@graphite/editor";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
@@ -14,19 +14,19 @@ const initialState: FullscreenStoreState = {
keyboardLocked: false,
};
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<FullscreenStoreState> = import.meta.hot?.data?.store || writable<FullscreenStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createFullscreenStore(editor: Editor) {
export function createFullscreenStore(subscriptions: SubscriptionsRouter) {
destroyFullscreenStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
toggleFullscreen();
});
@@ -34,10 +34,10 @@ export function createFullscreenStore(editor: Editor) {
}
export function destroyFullscreenStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
}
export function fullscreenModeChanged() {
frontend/src/stores/node-graph.ts
+43 -43
View File
@@ -2,8 +2,8 @@ import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, ContextMenuInformation, FrontendNode, FrontendNodeType, WirePath } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { MessageBody } from "@graphite/subscription-router";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import type { MessageBody } from "/src/subscriptions-router";
export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
@@ -53,19 +53,19 @@ const initialState: NodeGraphStoreState = {
reorderExportIndex: undefined,
};
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<NodeGraphStoreState> = import.meta.hot?.data?.store || writable<NodeGraphStoreState>(initialState);
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createNodeGraphStore(editor: Editor) {
export function createNodeGraphStore(subscriptions: SubscriptionsRouter) {
destroyNodeGraphStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
update((state) => {
state.nodeDescriptions = new Map(data.nodeDescriptions);
state.nodeTypes = data.nodeTypes;
@@ -73,56 +73,56 @@ export function createNodeGraphStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
update((state) => {
state.box = data.box;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
update((state) => {
state.clickTargets = data.clickTargets;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
update((state) => {
state.contextMenuInformation = data.contextMenuInformation;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
update((state) => {
state.reorderImportIndex = data.importIndex;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
update((state) => {
state.reorderExportIndex = data.exportIndex;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
update((state) => {
state.updateImportsExports = data;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
update((state) => {
state.inSelectedNetwork = data.inSelectedNetwork;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
update((state) => {
state.layerWidths = data.layerWidths;
state.chainWidths = data.chainWidths;
@@ -131,7 +131,7 @@ export function createNodeGraphStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
update((state) => {
state.nodes.clear();
data.nodes.forEach((node) => {
@@ -141,21 +141,21 @@ export function createNodeGraphStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
update((state) => {
state.error = data.error;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
update((state) => {
state.visibleNodes = new Set<bigint>(data.nodes);
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
update((state) => {
data.wires.forEach((wireUpdate) => {
let inputMap = state.wires.get(wireUpdate.id);
@@ -174,35 +174,35 @@ export function createNodeGraphStore(editor: Editor) {
});
});
editor.subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
update((state) => {
state.wires.clear();
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
update((state) => {
state.selected = data.selected;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphTransform", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeGraphTransform", (data) => {
update((state) => {
state.transform = { scale: data.scale, x: data.translation[0], y: data.translation[1] };
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateNodeThumbnail", (data) => {
subscriptions.subscribeFrontendMessage("UpdateNodeThumbnail", (data) => {
update((state) => {
state.thumbnails.set(data.id, data.value);
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
update((state) => {
state.wirePathInProgress = data.wirePath;
return state;
@@ -213,27 +213,27 @@ export function createNodeGraphStore(editor: Editor) {
}
export function destroyNodeGraphStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
editor.subscriptions.unsubscribeFrontendMessage("UpdateBox");
editor.subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
editor.subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
editor.subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
editor.subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
editor.subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
editor.subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
editor.subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
editor.subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
editor.subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
editor.subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
editor.subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
subscriptions.unsubscribeFrontendMessage("SendUIMetadata");
subscriptions.unsubscribeFrontendMessage("UpdateBox");
subscriptions.unsubscribeFrontendMessage("UpdateClickTargets");
subscriptions.unsubscribeFrontendMessage("UpdateContextMenuInformation");
subscriptions.unsubscribeFrontendMessage("UpdateImportReorderIndex");
subscriptions.unsubscribeFrontendMessage("UpdateExportReorderIndex");
subscriptions.unsubscribeFrontendMessage("UpdateImportsExports");
subscriptions.unsubscribeFrontendMessage("UpdateInSelectedNetwork");
subscriptions.unsubscribeFrontendMessage("UpdateLayerWidths");
subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphNodes");
subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic");
subscriptions.unsubscribeFrontendMessage("UpdateVisibleNodes");
subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphWires");
subscriptions.unsubscribeFrontendMessage("ClearAllNodeGraphWires");
subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphSelection");
subscriptions.unsubscribeFrontendMessage("UpdateNodeGraphTransform");
subscriptions.unsubscribeFrontendMessage("UpdateNodeThumbnail");
subscriptions.unsubscribeFrontendMessage("UpdateWirePathInProgress");
}
export function closeContextMenu() {
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");
}
frontend/src/stores/tooltip.ts
+12 -12
View File
@@ -2,7 +2,7 @@ import { writable } from "svelte/store";
import type { Writable } from "svelte/store";
import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
import type { Editor } from "@graphite/editor";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { operatingSystem } from "@graphite/utility-functions/platform";
export type TooltipStore = ReturnType<typeof createTooltipStore>;
@@ -36,7 +36,7 @@ const tooltipEventListeners: Listener[] = [
{ eventName: "wheel", action: closeTooltip },
];
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
@@ -44,26 +44,26 @@ const store: Writable<TooltipStoreState> = import.meta.hot?.data?.store || writa
if (import.meta.hot) import.meta.hot.data.store = store;
const { subscribe, update } = store;
export function createTooltipStore(editor: Editor) {
export function createTooltipStore(subscriptions: SubscriptionsRouter) {
destroyTooltipStore();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("SendShortcutShiftClick", async (data) => {
subscriptions.subscribeFrontendMessage("SendShortcutShiftClick", async (data) => {
update((state) => {
state.shiftClickShortcut = data.shortcut;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("SendShortcutAltClick", async (data) => {
subscriptions.subscribeFrontendMessage("SendShortcutAltClick", async (data) => {
update((state) => {
state.altClickShortcut = data.shortcut;
return state;
});
});
editor.subscriptions.subscribeFrontendMessage("SendShortcutFullscreen", async (data) => {
subscriptions.subscribeFrontendMessage("SendShortcutFullscreen", async (data) => {
update((state) => {
state.fullscreenShortcut = operatingSystem() === "Mac" ? data.shortcutMac : data.shortcut;
return state;
@@ -76,14 +76,14 @@ export function createTooltipStore(editor: Editor) {
}
export function destroyTooltipStore() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
if (tooltipTimeout) clearTimeout(tooltipTimeout);
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
tooltipEventListeners.forEach(({ eventName, action }) => document.removeEventListener(eventName, action));
}