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

* 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
+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.