fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-19 19:08:05 +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

31
frontend/src/managers/clipboard.ts
View File

@@ -1,37 +1,40 @@
import type { Editor } from "@graphite/editor";
import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { insertAtCaret, readAtCaret } from "@graphite/utility-functions/clipboard";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let editorHandle: EditorHandle | undefined = undefined;
export function createClipboardManager(editor: Editor) {
export function createClipboardManager(subscriptions: SubscriptionsRouter, editor: EditorHandle) {
destroyClipboardManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editorHandle = editor;
editor.subscriptions.subscribeFrontendMessage("TriggerClipboardWrite", (data) => {
subscriptions.subscribeFrontendMessage("TriggerClipboardWrite", (data) => {
// If the Clipboard API is supported in the browser, copy text to the clipboard
navigator.clipboard?.writeText?.(data.content);
});
editor.subscriptions.subscribeFrontendMessage("TriggerSelectionRead", async (data) => {
editor.handle.readSelection(readAtCaret(data.cut), data.cut);
subscriptions.subscribeFrontendMessage("TriggerSelectionRead", async (data) => {
editor.readSelection(readAtCaret(data.cut), data.cut);
});
editor.subscriptions.subscribeFrontendMessage("TriggerSelectionWrite", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerSelectionWrite", async (data) => {
insertAtCaret(data.content);
});
}
export function destroyClipboardManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef) newModule?.createClipboardManager(editorRef);
if (subscriptionsRouter && editorHandle) newModule?.createClipboardManager(subscriptionsRouter, editorHandle);
});

29
frontend/src/managers/fonts.ts
View File

@@ -1,19 +1,22 @@
import type { Editor } from "@graphite/editor";
import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
type ApiResponse = { family: string; variants: string[]; files: Record<string, string> }[];
const FONT_LIST_API = "https://api.graphite.art/font-list";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let editorHandle: EditorHandle | undefined = undefined;
let abortController: AbortController | undefined = undefined;
export function createFontsManager(editor: Editor) {
export function createFontsManager(subscriptions: SubscriptionsRouter, editor: EditorHandle) {
destroyFontsManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editorHandle = editor;
abortController = new AbortController();
editor.subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
try {
const response = await fetch(FONT_LIST_API, abortController ? { signal: abortController.signal } : undefined);
if (!response.ok) throw new Error(`Font catalog request failed with status ${response.status}`);
@@ -31,14 +34,14 @@ export function createFontsManager(editor: Editor) {
return { name: font.family, styles };
});
editor.handle.onFontCatalogLoad(catalog);
editor.onFontCatalogLoad(catalog);
} catch (error) {
if (error instanceof DOMException && error.name === "AbortError") return;
throw error;
}
});
editor.subscriptions.subscribeFrontendMessage("TriggerFontDataLoad", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerFontDataLoad", async (data) => {
const { fontFamily, fontStyle } = data.font;
try {
@@ -48,7 +51,7 @@ export function createFontsManager(editor: Editor) {
const buffer = await response.arrayBuffer();
const bytes = new Uint8Array(buffer);
editor.handle.onFontLoad(fontFamily, fontStyle, bytes);
editor.onFontLoad(fontFamily, fontStyle, bytes);
} catch (error) {
if (error instanceof DOMException && error.name === "AbortError") return;
// eslint-disable-next-line no-console
@@ -58,15 +61,15 @@ export function createFontsManager(editor: Editor) {
}
export function destroyFontsManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
abortController?.abort();
editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef) newModule?.createFontsManager(editorRef);
if (subscriptionsRouter && editorHandle) newModule?.createFontsManager(subscriptionsRouter, editorHandle);
});

18
frontend/src/managers/hyperlink.ts
View File

@@ -1,25 +1,25 @@
import type { Editor } from "@graphite/editor";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
export function createHyperlinkManager(editor: Editor) {
export function createHyperlinkManager(subscriptions: SubscriptionsRouter) {
destroyHyperlinkManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
window.open(data.url, "_blank", "noopener");
});
}
export function destroyHyperlinkManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef) newModule?.createHyperlinkManager(editorRef);
if (subscriptionsRouter) newModule?.createHyperlinkManager(subscriptionsRouter);
});

44
frontend/src/managers/input.ts
View File

@@ -1,8 +1,9 @@
import type { Editor } from "@graphite/editor";
import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
import type { DialogStore } from "@graphite/stores/dialog";
import type { DocumentStore } from "@graphite/stores/document";
import { fullscreenModeChanged } from "@graphite/stores/fullscreen";
import type { PortfolioStore } from "@graphite/stores/portfolio";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { triggerClipboardRead } from "@graphite/utility-functions/clipboard";
import {
onBeforeUnload,
@@ -32,42 +33,44 @@ export const PRESS_REPEAT_DELAY_MS = 400;
export const PRESS_REPEAT_INTERVAL_MS = 72;
export const PRESS_REPEAT_INTERVAL_RAPID_MS = 10;
const listeners: Listener[] = [
{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent) => editorRef && portfolioStore && onBeforeUnload(e, editorRef, portfolioStore) },
{ target: window, eventName: "keyup", action: (e: KeyboardEvent) => editorRef && dialogStore && onKeyUp(e, editorRef, dialogStore) },
{ target: window, eventName: "keydown", action: (e: KeyboardEvent) => editorRef && dialogStore && onKeyDown(e, editorRef, dialogStore) },
{ target: window, eventName: "pointermove", action: (e: PointerEvent) => editorRef && documentStore && onPointerMove(e, editorRef, documentStore) },
{ target: window, eventName: "pointerdown", action: (e: PointerEvent) => editorRef && dialogStore && onPointerDown(e, editorRef, dialogStore) },
{ target: window, eventName: "pointerup", action: (e: PointerEvent) => editorRef && onPointerUp(e, editorRef) },
{ target: window, eventName: "beforeunload", action: (e: BeforeUnloadEvent) => editorHandle && portfolioStore && onBeforeUnload(e, editorHandle, portfolioStore) },
{ target: window, eventName: "keyup", action: (e: KeyboardEvent) => editorHandle && dialogStore && onKeyUp(e, editorHandle, dialogStore) },
{ target: window, eventName: "keydown", action: (e: KeyboardEvent) => editorHandle && dialogStore && onKeyDown(e, editorHandle, dialogStore) },
{ target: window, eventName: "pointermove", action: (e: PointerEvent) => editorHandle && documentStore && onPointerMove(e, editorHandle, documentStore) },
{ target: window, eventName: "pointerdown", action: (e: PointerEvent) => editorHandle && dialogStore && onPointerDown(e, editorHandle, dialogStore) },
{ target: window, eventName: "pointerup", action: (e: PointerEvent) => editorHandle && onPointerUp(e, editorHandle) },
{ target: window, eventName: "mousedown", action: (e: MouseEvent) => onMouseDown(e) },
{ target: window, eventName: "mouseup", action: (e: MouseEvent) => editorRef && onPotentialDoubleClick(e, editorRef) },
{ target: window, eventName: "wheel", action: (e: WheelEvent) => editorRef && onWheelScroll(e, editorRef), options: { passive: false } },
{ target: window, eventName: "mouseup", action: (e: MouseEvent) => editorHandle && onPotentialDoubleClick(e, editorHandle) },
{ target: window, eventName: "wheel", action: (e: WheelEvent) => editorHandle && onWheelScroll(e, editorHandle), options: { passive: false } },
{ target: window, eventName: "modifyinputfield", action: (e: CustomEvent) => onModifyInputField(e) },
{ target: window, eventName: "focusout", action: () => onFocusOut() },
{ target: window.document, eventName: "contextmenu", action: (e: MouseEvent) => onContextMenu(e) },
{ target: window.document, eventName: "fullscreenchange", action: () => fullscreenModeChanged() },
{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent) => editorRef && onPaste(e, editorRef) },
{ target: window.document.body, eventName: "paste", action: (e: ClipboardEvent) => editorHandle && onPaste(e, editorHandle) },
{ target: window.document, eventName: "pointerlockchange", action: onPointerLockChange },
{ target: window.document, eventName: "pointerlockerror", action: onPointerLockChange },
];
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let editorHandle: EditorHandle | undefined = undefined;
let dialogStore: DialogStore | undefined = undefined;
let portfolioStore: PortfolioStore | undefined = undefined;
let documentStore: DocumentStore | undefined = undefined;
export function createInputManager(editor: Editor, dialog: DialogStore, portfolio: PortfolioStore, doc: DocumentStore) {
export function createInputManager(subscriptions: SubscriptionsRouter, editor: EditorHandle, dialog: DialogStore, portfolio: PortfolioStore, doc: DocumentStore) {
destroyInputManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editorHandle = editor;
dialogStore = dialog;
portfolioStore = portfolio;
documentStore = doc;
editor.subscriptions.subscribeFrontendMessage("TriggerClipboardRead", () => {
subscriptions.subscribeFrontendMessage("TriggerClipboardRead", () => {
triggerClipboardRead(editor);
});
editor.subscriptions.subscribeFrontendMessage("WindowPointerLockMove", (data) => {
subscriptions.subscribeFrontendMessage("WindowPointerLockMove", (data) => {
// Desktop app only: dispatch custom pointer lock movement events
const event = new CustomEvent("pointerlockmove", { detail: { x: data.position[0], y: data.position[1] } });
window.dispatchEvent(event);
@@ -83,11 +86,11 @@ export function createInputManager(editor: Editor, dialog: DialogStore, portfoli
// Return the destructor
export function destroyInputManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardRead");
editor.subscriptions.unsubscribeFrontendMessage("WindowPointerLockMove");
subscriptions.unsubscribeFrontendMessage("TriggerClipboardRead");
subscriptions.unsubscribeFrontendMessage("WindowPointerLockMove");
// Remove event bindings after the lifetime of the application (or on hot-module replacement during development)
listeners.forEach(({ target, eventName, action, options }) => target.removeEventListener(eventName, action, options));
@@ -95,5 +98,6 @@ export function destroyInputManager() {
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef && dialogStore && portfolioStore && documentStore) newModule?.createInputManager(editorRef, dialogStore, portfolioStore, documentStore);
if (subscriptionsRouter && editorHandle && dialogStore && portfolioStore && documentStore)
newModule?.createInputManager(subscriptionsRouter, editorHandle, dialogStore, portfolioStore, documentStore);
});

23
frontend/src/managers/localization.ts
View File

@@ -1,27 +1,30 @@
import type { Editor } from "@graphite/editor";
import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { localizeTimestamp } from "@graphite/utility-functions/time";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let editorHandle: EditorHandle | undefined = undefined;
export function createLocalizationManager(editor: Editor) {
export function createLocalizationManager(subscriptions: SubscriptionsRouter, editor: EditorHandle) {
destroyLocalizationManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editorHandle = editor;
editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
const localized = localizeTimestamp(data.commitDate);
editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
editor.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
});
}
export function destroyLocalizationManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef) newModule?.createLocalizationManager(editorRef);
if (subscriptionsRouter && editorHandle) newModule?.createLocalizationManager(subscriptionsRouter, editorHandle);
});

18
frontend/src/managers/panic.ts
View File

@@ -1,14 +1,14 @@
import type { Editor } from "@graphite/editor";
import { createCrashDialog } from "@graphite/stores/dialog";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
export function createPanicManager(editor: Editor) {
export function createPanicManager(subscriptions: SubscriptionsRouter) {
destroyPanicManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
// `Error.stackTraceLimit` is only available in V8/Chromium
const previousStackTraceLimit = Error.stackTraceLimit;
Error.stackTraceLimit = Infinity;
@@ -25,13 +25,13 @@ export function createPanicManager(editor: Editor) {
}
export function destroyPanicManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef) newModule?.createPanicManager(editorRef);
if (subscriptionsRouter) newModule?.createPanicManager(subscriptionsRouter);
});

49
frontend/src/managers/persistence.ts
View File

@@ -1,64 +1,67 @@
import type { Editor } from "@graphite/editor";
import type { EditorHandle } from "@graphite/../wasm/pkg/graphite_wasm";
import type { PortfolioStore } from "@graphite/stores/portfolio";
import type { SubscriptionsRouter } from "/src/subscriptions-router";
import { saveEditorPreferences, loadEditorPreferences, storeDocument, removeDocument, loadFirstDocument, loadRestDocuments, saveActiveDocument } from "@graphite/utility-functions/persistence";
let editorRef: Editor | undefined = undefined;
let subscriptionsRouter: SubscriptionsRouter | undefined = undefined;
let editorHandle: EditorHandle | undefined = undefined;
let portfolioStore: PortfolioStore | undefined = undefined;
export function createPersistenceManager(editor: Editor, portfolio: PortfolioStore) {
export function createPersistenceManager(subscriptions: SubscriptionsRouter, editor: EditorHandle, portfolio: PortfolioStore) {
destroyPersistenceManager();
editorRef = editor;
subscriptionsRouter = subscriptions;
editorHandle = editor;
portfolioStore = portfolio;
editor.subscriptions.subscribeFrontendMessage("TriggerSavePreferences", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerSavePreferences", async (data) => {
await saveEditorPreferences(data.preferences);
});
editor.subscriptions.subscribeFrontendMessage("TriggerLoadPreferences", async () => {
subscriptions.subscribeFrontendMessage("TriggerLoadPreferences", async () => {
await loadEditorPreferences(editor);
});
editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceWriteDocument", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerPersistenceWriteDocument", async (data) => {
await storeDocument(data, portfolio);
});
editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceRemoveDocument", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerPersistenceRemoveDocument", async (data) => {
await removeDocument(String(data.documentId), portfolio);
});
editor.subscriptions.subscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument", async () => {
subscriptions.subscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument", async () => {
await loadFirstDocument(editor);
});
editor.subscriptions.subscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments", async () => {
subscriptions.subscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments", async () => {
await loadRestDocuments(editor);
});
editor.subscriptions.subscribeFrontendMessage("TriggerOpenLaunchDocuments", async () => {
subscriptions.subscribeFrontendMessage("TriggerOpenLaunchDocuments", async () => {
// TODO: Could be used to load documents from URL params or similar on launch
});
editor.subscriptions.subscribeFrontendMessage("TriggerSaveActiveDocument", async (data) => {
subscriptions.subscribeFrontendMessage("TriggerSaveActiveDocument", async (data) => {
await saveActiveDocument(data.documentId);
});
}
export function destroyPersistenceManager() {
const editor = editorRef;
if (!editor) return;
const subscriptions = subscriptionsRouter;
if (!subscriptions) return;
editor.subscriptions.unsubscribeFrontendMessage("TriggerSavePreferences");
editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadPreferences");
editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceWriteDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerPersistenceRemoveDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument");
editor.subscriptions.unsubscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments");
editor.subscriptions.unsubscribeFrontendMessage("TriggerOpenLaunchDocuments");
editor.subscriptions.unsubscribeFrontendMessage("TriggerSaveActiveDocument");
subscriptions.unsubscribeFrontendMessage("TriggerSavePreferences");
subscriptions.unsubscribeFrontendMessage("TriggerLoadPreferences");
subscriptions.unsubscribeFrontendMessage("TriggerPersistenceWriteDocument");
subscriptions.unsubscribeFrontendMessage("TriggerPersistenceRemoveDocument");
subscriptions.unsubscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument");
subscriptions.unsubscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments");
subscriptions.unsubscribeFrontendMessage("TriggerOpenLaunchDocuments");
subscriptions.unsubscribeFrontendMessage("TriggerSaveActiveDocument");
}
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
import.meta.hot?.accept((newModule) => {
if (editorRef && portfolioStore) newModule?.createPersistenceManager(editorRef, portfolioStore);
if (subscriptionsRouter && editorHandle && portfolioStore) newModule?.createPersistenceManager(subscriptionsRouter, editorHandle, portfolioStore);
});