Restructure frontend TS files so managers/stores export destructors instead of returning them from their constructors (#3919)
* Replace parameter passing with getContext and extract destroy functions to module-level exports * Resend layouts from Rust when editor is re-mounted on HMR * Code review
This commit is contained in:
Keavon Chambers
GitHub
parent
124b17f609
commit
2e2c4fe180
|
|
@ -8,6 +8,7 @@ pub enum LayoutMessage {
|
|||
layout_target: LayoutTarget,
|
||||
widget_id: WidgetId,
|
||||
},
|
||||
ResendAllLayouts,
|
||||
SendLayout {
|
||||
layout: Layout,
|
||||
layout_target: LayoutTarget,
|
||||
|
|
|
|||
|
|
@ -33,6 +33,20 @@ impl MessageHandler<LayoutMessage, LayoutMessageContext<'_>> for LayoutMessageHa
|
|||
// Resend that diff
|
||||
self.send_diff(vec![diff], layout_target, responses, action_input_mapping);
|
||||
}
|
||||
LayoutMessage::ResendAllLayouts => {
|
||||
// Collect non-empty layouts and their indices, then clear the stored copies so diffs compute as full re-sends
|
||||
let layouts_to_resend: Vec<_> = self
|
||||
.layouts
|
||||
.iter_mut()
|
||||
.enumerate()
|
||||
.filter(|(_, layout)| !layout.0.is_empty())
|
||||
.map(|(i, layout)| (LayoutTarget::from(i as u8), std::mem::take(layout)))
|
||||
.collect();
|
||||
|
||||
for (layout_target, layout) in layouts_to_resend {
|
||||
self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
|
||||
}
|
||||
}
|
||||
LayoutMessage::SendLayout { layout, layout_target } => {
|
||||
self.diff_and_send_layout_to_frontend(layout_target, layout, responses, action_input_mapping);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,10 +20,30 @@ impl core::fmt::Display for WidgetId {
|
|||
}
|
||||
}
|
||||
|
||||
#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
|
||||
#[derive(PartialEq, Clone, Debug, Hash, Eq, Copy, serde::Serialize, serde::Deserialize)]
|
||||
#[repr(u8)]
|
||||
pub enum LayoutTarget {
|
||||
macro_rules! define_layout_target {
|
||||
($($(#[$attr:meta])* $variant:ident),* $(,)?) => {
|
||||
#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
|
||||
#[derive(PartialEq, Clone, Debug, Hash, Eq, Copy, serde::Serialize, serde::Deserialize)]
|
||||
#[repr(u8)]
|
||||
pub enum LayoutTarget {
|
||||
$($(#[$attr])* $variant,)*
|
||||
// KEEP THIS ENUM LAST
|
||||
// This is a marker that is used to define an array that is used to hold widgets
|
||||
#[serde(skip)]
|
||||
_LayoutTargetLength,
|
||||
}
|
||||
|
||||
impl From<u8> for LayoutTarget {
|
||||
fn from(value: u8) -> Self {
|
||||
match value {
|
||||
$(x if x == Self::$variant as u8 => Self::$variant,)*
|
||||
_ => panic!("Invalid LayoutTarget discriminant: {value}"),
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
define_layout_target!(
|
||||
/// The spreadsheet panel allows for the visualisation of data in the graph.
|
||||
DataPanel,
|
||||
/// Contains the action buttons at the bottom of the dialog. Must be shown with the `FrontendMessage::DisplayDialog` message.
|
||||
|
|
@ -58,12 +78,7 @@ pub enum LayoutTarget {
|
|||
WelcomeScreenButtons,
|
||||
/// The color swatch for the working colors and a flip and reset button found at the bottom of the tool shelf.
|
||||
WorkingColors,
|
||||
|
||||
// KEEP THIS ENUM LAST
|
||||
// This is a marker that is used to define an array that is used to hold widgets
|
||||
#[serde(skip)]
|
||||
_LayoutTargetLength,
|
||||
}
|
||||
);
|
||||
|
||||
/// For use by structs that define a UI widget layout by implementing the layout() function belonging to this trait.
|
||||
/// The send_layout() function can then be called by other code which is a part of the same struct so as to send the layout to the frontend.
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export default defineConfig([
|
|||
ignoreRestSiblings: true,
|
||||
},
|
||||
],
|
||||
"@typescript-eslint/no-non-null-assertion": "error",
|
||||
"@typescript-eslint/consistent-type-imports": "error",
|
||||
"@typescript-eslint/consistent-type-definitions": ["error", "type"],
|
||||
"@typescript-eslint/consistent-type-assertions": ["error", { assertionStyle: "never" }],
|
||||
|
|
|
|||
|
|
@ -2,20 +2,20 @@
|
|||
import { onMount, onDestroy, setContext } from "svelte";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import { createClipboardManager } from "@graphite/managers/clipboard";
|
||||
import { createFontsManager } from "@graphite/managers/fonts";
|
||||
import { createHyperlinkManager } from "@graphite/managers/hyperlink";
|
||||
import { createInputManager } from "@graphite/managers/input";
|
||||
import { createLocalizationManager } from "@graphite/managers/localization";
|
||||
import { createPanicManager } from "@graphite/managers/panic";
|
||||
import { createPersistenceManager } from "@graphite/managers/persistence";
|
||||
import { createAppWindowStore } from "@graphite/stores/app-window";
|
||||
import { createDialogStore } from "@graphite/stores/dialog";
|
||||
import { createDocumentStore } from "@graphite/stores/document";
|
||||
import { createFullscreenStore } from "@graphite/stores/fullscreen";
|
||||
import { createNodeGraphStore } from "@graphite/stores/node-graph";
|
||||
import { createPortfolioStore } from "@graphite/stores/portfolio";
|
||||
import { createTooltipStore } from "@graphite/stores/tooltip";
|
||||
import { createClipboardManager, destroyClipboardManager } from "@graphite/managers/clipboard";
|
||||
import { createFontsManager, destroyFontsManager } from "@graphite/managers/fonts";
|
||||
import { createHyperlinkManager, destroyHyperlinkManager } from "@graphite/managers/hyperlink";
|
||||
import { createInputManager, destroyInputManager } from "@graphite/managers/input";
|
||||
import { createLocalizationManager, destroyLocalizationManager } from "@graphite/managers/localization";
|
||||
import { createPanicManager, destroyPanicManager } from "@graphite/managers/panic";
|
||||
import { createPersistenceManager, destroyPersistenceManager } from "@graphite/managers/persistence";
|
||||
import { createAppWindowStore, destroyAppWindowStore } from "@graphite/stores/app-window";
|
||||
import { createDialogStore, destroyDialogStore } from "@graphite/stores/dialog";
|
||||
import { createDocumentStore, destroyDocumentStore } from "@graphite/stores/document";
|
||||
import { createFullscreenStore, destroyFullscreenStore } from "@graphite/stores/fullscreen";
|
||||
import { createNodeGraphStore, destroyNodeGraphStore } from "@graphite/stores/node-graph";
|
||||
import { createPortfolioStore, destroyPortfolioStore } from "@graphite/stores/portfolio";
|
||||
import { createTooltipStore, destroyTooltipStore } from "@graphite/stores/tooltip";
|
||||
|
||||
import MainWindow from "@graphite/components/window/MainWindow.svelte";
|
||||
|
||||
|
|
@ -34,24 +34,41 @@
|
|||
};
|
||||
Object.entries(stores).forEach(([key, store]) => setContext(key, store));
|
||||
|
||||
const managers = {
|
||||
clipboard: createClipboardManager(editor),
|
||||
hyperlink: createHyperlinkManager(editor),
|
||||
localization: createLocalizationManager(editor),
|
||||
panic: createPanicManager(editor),
|
||||
persistence: createPersistenceManager(editor, stores.portfolio),
|
||||
fonts: createFontsManager(editor),
|
||||
input: createInputManager(editor, stores.dialog, stores.portfolio, stores.document, stores.fullscreen),
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
createClipboardManager(editor);
|
||||
createHyperlinkManager(editor);
|
||||
createLocalizationManager(editor);
|
||||
createPanicManager(editor);
|
||||
createPersistenceManager(editor, stores.portfolio);
|
||||
createFontsManager(editor);
|
||||
createInputManager(editor, stores.dialog, stores.portfolio, stores.document);
|
||||
|
||||
// Initialize certain setup tasks required by the editor backend to be ready for the user now that the frontend is ready.
|
||||
// The backend handles idempotency, so this is safe to call again during HMR re-mounts.
|
||||
editor.handle.initAfterFrontendReady();
|
||||
|
||||
// Re-send all UI layouts from Rust so the frontend has them after an HMR re-mount
|
||||
editor.handle.resendAllLayouts();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
[...Object.values(stores), ...Object.values(managers)].forEach(({ destroy }) => destroy());
|
||||
// Stores
|
||||
destroyDialogStore();
|
||||
destroyTooltipStore();
|
||||
destroyDocumentStore();
|
||||
destroyFullscreenStore();
|
||||
destroyNodeGraphStore();
|
||||
destroyPortfolioStore();
|
||||
destroyAppWindowStore();
|
||||
|
||||
// Managers
|
||||
destroyClipboardManager();
|
||||
destroyHyperlinkManager();
|
||||
destroyLocalizationManager();
|
||||
destroyPanicManager();
|
||||
destroyPersistenceManager();
|
||||
destroyFontsManager();
|
||||
destroyInputManager();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
import { wipeDocuments } from "@graphite/managers/persistence";
|
||||
import type { DialogStore } from "@graphite/stores/dialog";
|
||||
import { crashReportUrl } from "/src/utility-functions/crash-report";
|
||||
import { crashReportUrl } from "@graphite/utility-functions/crash-report";
|
||||
|
||||
import FloatingMenu from "@graphite/components/layout/FloatingMenu.svelte";
|
||||
import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
|
||||
|
|
|
|||
|
|
@ -1,33 +1,32 @@
|
|||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
|
||||
export function createClipboardManager(editor: Editor) {
|
||||
currentArgs = [editor];
|
||||
editorRef = editor;
|
||||
|
||||
// Subscribe to process backend event
|
||||
editor.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);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSelectionWrite", async (data) => {
|
||||
insertAtCaret(data.content);
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type ClipboardManager = ReturnType<typeof createClipboardManager>;
|
||||
|
||||
export function destroyClipboardManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerClipboardWrite");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionRead");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerSelectionWrite");
|
||||
}
|
||||
|
||||
function readAtCaret(cut: boolean): string | undefined {
|
||||
const element = window.document.activeElement;
|
||||
|
|
@ -112,6 +111,6 @@ function insertAtCaret(text: string) {
|
|||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createClipboardManager(...currentArgs);
|
||||
destroyClipboardManager();
|
||||
if (editorRef) newModule?.createClipboardManager(editorRef);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@ type ApiResponse = { family: string; variants: string[]; files: Record<string, s
|
|||
|
||||
const FONT_LIST_API = "https://api.graphite.art/font-list";
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
let abortController: AbortController | undefined = undefined;
|
||||
|
||||
export function createFontsManager(editor: Editor) {
|
||||
currentArgs = [editor];
|
||||
const abortController = new AbortController();
|
||||
editorRef = editor;
|
||||
abortController = new AbortController();
|
||||
|
||||
// Subscribe to process backend events
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerFontCatalogLoad", async () => {
|
||||
try {
|
||||
const response = await fetch(FONT_LIST_API, { signal: abortController.signal });
|
||||
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}`);
|
||||
const fontListResponse: { items: ApiResponse } = await response.json();
|
||||
const fontListData = fontListResponse.items;
|
||||
|
|
@ -42,7 +41,7 @@ export function createFontsManager(editor: Editor) {
|
|||
|
||||
try {
|
||||
if (!data.url) throw new Error("No URL provided for font data load");
|
||||
const response = await fetch(data.url, { signal: abortController.signal });
|
||||
const response = await fetch(data.url, abortController ? { signal: abortController.signal } : undefined);
|
||||
if (!response.ok) throw new Error(`Font data request failed with status ${response.status}`);
|
||||
const buffer = await response.arrayBuffer();
|
||||
const bytes = new Uint8Array(buffer);
|
||||
|
|
@ -54,20 +53,19 @@ export function createFontsManager(editor: Editor) {
|
|||
console.error("Failed to load font:", error);
|
||||
}
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
abortController.abort();
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerFontDataLoad");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type FontsManager = ReturnType<typeof createFontsManager>;
|
||||
|
||||
export function destroyFontsManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
abortController?.abort();
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerFontCatalogLoad");
|
||||
editor.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) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createFontsManager(...currentArgs);
|
||||
destroyFontsManager();
|
||||
if (editorRef) newModule?.createFontsManager(editorRef);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
|
||||
export function createHyperlinkManager(editor: Editor) {
|
||||
currentArgs = [editor];
|
||||
editorRef = editor;
|
||||
|
||||
// Subscribe to process backend event
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerVisitLink", async (data) => {
|
||||
window.open(data.url, "_blank", "noopener");
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerVisitLink");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type HyperlinkManager = ReturnType<typeof createHyperlinkManager>;
|
||||
|
||||
export function destroyHyperlinkManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.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) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createHyperlinkManager(...currentArgs);
|
||||
destroyHyperlinkManager();
|
||||
if (editorRef) newModule?.createHyperlinkManager(editorRef);
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,25 +1,22 @@
|
|||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
|
||||
export function createLocalizationManager(editor: Editor) {
|
||||
currentArgs = [editor];
|
||||
editorRef = editor;
|
||||
|
||||
// Subscribe to process backend event
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate", (data) => {
|
||||
const localized = localizeTimestamp(data.commitDate);
|
||||
editor.handle.requestAboutGraphiteDialogWithLocalizedCommitDate(localized.timestamp, localized.year);
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type LocalizationManager = ReturnType<typeof createLocalizationManager>;
|
||||
|
||||
export function destroyLocalizationManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerAboutGraphiteLocalizedCommitDate");
|
||||
}
|
||||
|
||||
function localizeTimestamp(utc: string): { timestamp: string; year: string } {
|
||||
// Timestamp
|
||||
|
|
@ -38,6 +35,6 @@ function localizeTimestamp(utc: string): { timestamp: string; year: string } {
|
|||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createLocalizationManager(...currentArgs);
|
||||
destroyLocalizationManager();
|
||||
if (editorRef) newModule?.createLocalizationManager(editorRef);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
import type { Editor } from "@graphite/editor";
|
||||
import { createCrashDialog } from "@graphite/stores/dialog";
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
|
||||
export function createPanicManager(editor: Editor) {
|
||||
currentArgs = [editor];
|
||||
// Code panic dialog and console error
|
||||
editorRef = editor;
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("DisplayDialogPanic", (data) => {
|
||||
// `Error.stackTraceLimit` is only available in V8/Chromium
|
||||
const previousStackTraceLimit = Error.stackTraceLimit;
|
||||
Error.stackTraceLimit = Infinity;
|
||||
const stackTrace = new Error().stack || "";
|
||||
Error.stackTraceLimit = previousStackTraceLimit;
|
||||
|
||||
const panicDetails = `${data.panicInfo}${stackTrace ? `\n\n${stackTrace}` : ""}`;
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
|
|
@ -20,18 +20,17 @@ export function createPanicManager(editor: Editor) {
|
|||
|
||||
createCrashDialog(panicDetails);
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("DisplayDialogPanic");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type PanicManager = ReturnType<typeof createPanicManager>;
|
||||
|
||||
export function destroyPanicManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.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) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createPanicManager(...currentArgs);
|
||||
destroyPanicManager();
|
||||
if (editorRef) newModule?.createPanicManager(editorRef);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,46 +1,51 @@
|
|||
import { createStore, del, get, set, update } from "idb-keyval";
|
||||
import { get as getFromStore } from "svelte/store";
|
||||
import * as idb from "idb-keyval";
|
||||
import { get } from "svelte/store";
|
||||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
import type { PortfolioStore } from "@graphite/stores/portfolio";
|
||||
import type { MessageBody } from "@graphite/subscription-router";
|
||||
|
||||
const graphiteStore = createStore("graphite", "store");
|
||||
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor, PortfolioStore] | undefined;
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
let portfolioStore: PortfolioStore | undefined = undefined;
|
||||
|
||||
export function createPersistenceManager(editor: Editor, portfolio: PortfolioStore) {
|
||||
currentArgs = [editor, portfolio];
|
||||
// DOCUMENTS
|
||||
editorRef = editor;
|
||||
portfolioStore = portfolio;
|
||||
|
||||
// FRONTEND MESSAGE SUBSCRIPTIONS
|
||||
|
||||
// Subscribe to process backend events
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSavePreferences", async (data) => {
|
||||
await saveEditorPreferences(data.preferences);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerLoadPreferences", async () => {
|
||||
await loadEditorPreferences(editor);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceWriteDocument", async (data) => {
|
||||
await storeDocument(data, portfolio);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerPersistenceRemoveDocument", async (data) => {
|
||||
await removeDocument(String(data.documentId), portfolio);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerLoadFirstAutoSaveDocument", async () => {
|
||||
await loadFirstDocument(editor);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerLoadRestAutoSaveDocuments", async () => {
|
||||
await loadRestDocuments(editor);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerOpenLaunchDocuments", async () => {
|
||||
// TODO: Could be used to load documents from URL params or similar on launch
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSaveActiveDocument", async (data) => {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
|
||||
|
||||
const documentId = String(data.documentId);
|
||||
const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
|
||||
|
||||
// TODO: Eventually remove this document upgrade code
|
||||
// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if needed
|
||||
|
|
@ -55,89 +60,86 @@ export function createPersistenceManager(editor: Editor, portfolio: PortfolioSto
|
|||
await storeCurrentDocumentId(documentId);
|
||||
}
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
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");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
return { destroy };
|
||||
}
|
||||
export type PersistenceManager = ReturnType<typeof createPersistenceManager>;
|
||||
|
||||
export async function wipeDocuments() {
|
||||
await del("documents_tab_order", graphiteStore);
|
||||
await del("current_document_id", graphiteStore);
|
||||
await del("documents", graphiteStore);
|
||||
}
|
||||
|
||||
async function storeDocumentOrder(portfolio: PortfolioStore) {
|
||||
const documentOrder = getFromStore(portfolio).documents.map((doc) => String(doc.id));
|
||||
await set("documents_tab_order", documentOrder, graphiteStore);
|
||||
export function destroyPersistenceManager() {
|
||||
const editor = editorRef;
|
||||
if (!editor) 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");
|
||||
}
|
||||
|
||||
async function storeCurrentDocumentId(documentId: string) {
|
||||
await set("current_document_id", String(documentId), graphiteStore);
|
||||
export async function storeCurrentDocumentId(documentId: string) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
await idb.set("current_document_id", String(documentId), indexedDbStorage);
|
||||
}
|
||||
|
||||
async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">, portfolio: PortfolioStore) {
|
||||
await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
|
||||
export async function storeDocument(autoSaveDocument: MessageBody<"TriggerPersistenceWriteDocument">, portfolio: PortfolioStore) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
await idb.update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
|
||||
"documents",
|
||||
(old) => {
|
||||
const documents = old || {};
|
||||
documents[String(autoSaveDocument.documentId)] = autoSaveDocument;
|
||||
return documents;
|
||||
},
|
||||
graphiteStore,
|
||||
indexedDbStorage,
|
||||
);
|
||||
|
||||
await storeDocumentOrder(portfolio);
|
||||
const documentOrder = get(portfolio).documents.map((doc) => String(doc.id));
|
||||
await idb.set("documents_tab_order", documentOrder, indexedDbStorage);
|
||||
await storeCurrentDocumentId(String(autoSaveDocument.documentId));
|
||||
}
|
||||
|
||||
async function removeDocument(id: string, portfolio: PortfolioStore) {
|
||||
await update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
|
||||
export async function removeDocument(id: string, portfolio: PortfolioStore) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
await idb.update<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>(
|
||||
"documents",
|
||||
(old) => {
|
||||
const documents = old || {};
|
||||
delete documents[id];
|
||||
return documents;
|
||||
},
|
||||
graphiteStore,
|
||||
indexedDbStorage,
|
||||
);
|
||||
|
||||
await update<string[]>(
|
||||
await idb.update<string[]>(
|
||||
"documents_tab_order",
|
||||
(old) => {
|
||||
const order = old || [];
|
||||
return order.filter((docId) => docId !== id);
|
||||
},
|
||||
graphiteStore,
|
||||
indexedDbStorage,
|
||||
);
|
||||
|
||||
const documentCount = getFromStore(portfolio).documents.length;
|
||||
const documentCount = get(portfolio).documents.length;
|
||||
if (documentCount > 0) {
|
||||
const documentIndex = getFromStore(portfolio).activeDocumentIndex;
|
||||
const documentId = String(getFromStore(portfolio).documents[documentIndex].id);
|
||||
const documentIndex = get(portfolio).activeDocumentIndex;
|
||||
const documentId = String(get(portfolio).documents[documentIndex].id);
|
||||
|
||||
const tabOrder = (await get<string[]>("documents_tab_order", graphiteStore)) || [];
|
||||
const tabOrder = (await idb.get<string[]>("documents_tab_order", indexedDbStorage)) || [];
|
||||
if (tabOrder.includes(documentId)) {
|
||||
await storeCurrentDocumentId(documentId);
|
||||
}
|
||||
} else {
|
||||
await del("current_document_id", graphiteStore);
|
||||
await idb.del("current_document_id", indexedDbStorage);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFirstDocument(editor: Editor) {
|
||||
const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
|
||||
export async function loadFirstDocument(editor: Editor) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
|
||||
|
||||
// TODO: Eventually remove this document upgrade code
|
||||
// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if the browser is storing the old format as strings
|
||||
|
|
@ -147,8 +149,8 @@ async function loadFirstDocument(editor: Editor) {
|
|||
});
|
||||
}
|
||||
|
||||
const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
|
||||
const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
|
||||
const documentOrder = await idb.get<string[]>("documents_tab_order", indexedDbStorage);
|
||||
const currentDocumentIdString = await idb.get<string>("current_document_id", indexedDbStorage);
|
||||
const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
|
||||
if (!previouslySavedDocuments || !documentOrder) return;
|
||||
|
||||
|
|
@ -168,8 +170,10 @@ async function loadFirstDocument(editor: Editor) {
|
|||
}
|
||||
}
|
||||
|
||||
async function loadRestDocuments(editor: Editor) {
|
||||
const previouslySavedDocuments = await get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", graphiteStore);
|
||||
export async function loadRestDocuments(editor: Editor) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
const previouslySavedDocuments = await idb.get<Record<string, MessageBody<"TriggerPersistenceWriteDocument">>>("documents", indexedDbStorage);
|
||||
|
||||
// TODO: Eventually remove this document upgrade code
|
||||
// Migrate TriggerPersistenceWriteDocument.documentId from string to bigint if needed
|
||||
|
|
@ -179,8 +183,8 @@ async function loadRestDocuments(editor: Editor) {
|
|||
});
|
||||
}
|
||||
|
||||
const documentOrder = await get<string[]>("documents_tab_order", graphiteStore);
|
||||
const currentDocumentIdString = await get<string>("current_document_id", graphiteStore);
|
||||
const documentOrder = await idb.get<string[]>("documents_tab_order", indexedDbStorage);
|
||||
const currentDocumentIdString = await idb.get<string>("current_document_id", indexedDbStorage);
|
||||
const currentDocumentId = currentDocumentIdString ? BigInt(currentDocumentIdString) : undefined;
|
||||
if (!previouslySavedDocuments || !documentOrder) return;
|
||||
|
||||
|
|
@ -217,19 +221,29 @@ async function loadRestDocuments(editor: Editor) {
|
|||
}
|
||||
}
|
||||
|
||||
// PREFERENCES
|
||||
export async function saveEditorPreferences(preferences: unknown) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
async function saveEditorPreferences(preferences: unknown) {
|
||||
await set("preferences", preferences, graphiteStore);
|
||||
await idb.set("preferences", preferences, indexedDbStorage);
|
||||
}
|
||||
|
||||
async function loadEditorPreferences(editor: Editor) {
|
||||
const preferences = await get<Record<string, unknown>>("preferences", graphiteStore);
|
||||
export async function loadEditorPreferences(editor: Editor) {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
const preferences = await idb.get<Record<string, unknown>>("preferences", indexedDbStorage);
|
||||
editor.handle.loadPreferences(preferences ? JSON.stringify(preferences) : undefined);
|
||||
}
|
||||
|
||||
export async function wipeDocuments() {
|
||||
const indexedDbStorage = idb.createStore("graphite", "store");
|
||||
|
||||
await idb.del("documents_tab_order", indexedDbStorage);
|
||||
await idb.del("current_document_id", indexedDbStorage);
|
||||
await idb.del("documents", indexedDbStorage);
|
||||
}
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createPersistenceManager(...currentArgs);
|
||||
destroyPersistenceManager();
|
||||
if (editorRef && portfolioStore) newModule?.createPersistenceManager(editorRef, portfolioStore);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import type { Writable } from "svelte/store";
|
|||
import type { AppWindowPlatform } from "@graphite/../wasm/pkg/graphite_wasm";
|
||||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
|
||||
|
||||
type AppWindowStoreState = {
|
||||
platform: AppWindowPlatform;
|
||||
maximized: boolean;
|
||||
|
|
@ -19,37 +21,44 @@ const initialState: AppWindowStoreState = {
|
|||
uiScale: 1,
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
// Set up message subscriptions on creation
|
||||
editorRef = editor;
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdatePlatform", (data) => {
|
||||
update((state) => {
|
||||
state.platform = data.platform;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateMaximized", (data) => {
|
||||
update((state) => {
|
||||
state.maximized = data.maximized;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateFullscreen", (data) => {
|
||||
update((state) => {
|
||||
state.fullscreen = data.fullscreen;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateViewportHolePunch", (data) => {
|
||||
update((state) => {
|
||||
state.viewportHolePunch = data.active;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateUIScale", (data) => {
|
||||
update((state) => {
|
||||
state.uiScale = data.scale;
|
||||
|
|
@ -57,27 +66,16 @@ export function createAppWindowStore(editor: Editor) {
|
|||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
export type AppWindowStore = ReturnType<typeof createAppWindowStore>;
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createAppWindowStore(...currentArgs);
|
||||
});
|
||||
export function destroyAppWindowStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdatePlatform");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateMaximized");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateFullscreen");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateViewportHolePunch");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("UpdateUIScale");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import type { Editor } from "@graphite/editor";
|
|||
import type { IconName } from "@graphite/icons";
|
||||
import { patchLayout } from "@graphite/utility-functions/widgets";
|
||||
|
||||
export type DialogStore = ReturnType<typeof createDialogStore>;
|
||||
|
||||
type DialogStoreState = {
|
||||
visible: boolean;
|
||||
title: string;
|
||||
|
|
@ -27,13 +29,16 @@ const initialState: DialogStoreState = {
|
|||
panicDetails: "",
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
// Subscribe to process backend events
|
||||
editorRef = editor;
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("DisplayDialog", (data) => {
|
||||
update((state) => {
|
||||
state.visible = true;
|
||||
|
|
@ -71,6 +76,7 @@ export function createDialogStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("DialogClose", () => {
|
||||
update((state) => {
|
||||
// Disallow dismissing the crash dialog since it should remain as the final notification
|
||||
|
|
@ -94,23 +100,20 @@ export function createDialogStore(editor: Editor) {
|
|||
editor.handle.requestLicensesThirdPartyDialogWithLicenseText(licenseText);
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("DisplayDialog");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("DialogClose");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("TriggerDisplayThirdPartyLicensesDialog");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogButtons");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn1");
|
||||
editor.subscriptions.unsubscribeLayoutUpdate("DialogColumn2");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
|
||||
export function destroyDialogStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) 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");
|
||||
}
|
||||
export type DialogStore = ReturnType<typeof createDialogStore>;
|
||||
|
||||
// Creates a crash dialog from JS once the editor has panicked.
|
||||
// Normal dialogs are created in the Rust backend, but for the crash dialog, the editor has panicked so it cannot respond to widget callbacks.
|
||||
|
|
@ -129,11 +132,3 @@ export function createCrashDialog(panicDetails: string) {
|
|||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createDialogStore(...currentArgs);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import type { Layout } from "@graphite/../wasm/pkg/graphite_wasm";
|
|||
import type { Editor } from "@graphite/editor";
|
||||
import { patchLayout } from "@graphite/utility-functions/widgets";
|
||||
|
||||
export type DocumentStore = ReturnType<typeof createDocumentStore>;
|
||||
|
||||
type DocumentStoreState = {
|
||||
toolOptionsLayout: Layout;
|
||||
documentBarLayout: Layout;
|
||||
|
|
@ -25,12 +27,16 @@ const initialState: DocumentStoreState = {
|
|||
fadeArtwork: 100,
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
editorRef = editor;
|
||||
|
||||
// Update layouts
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateGraphFadeArtwork", (data) => {
|
||||
update((state) => {
|
||||
|
|
@ -87,29 +93,18 @@ export function createDocumentStore(editor: Editor) {
|
|||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
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");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
export type DocumentStore = ReturnType<typeof createDocumentStore>;
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createDocumentStore(...currentArgs);
|
||||
});
|
||||
export function destroyDocumentStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) 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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import type { Writable } from "svelte/store";
|
|||
|
||||
import type { Editor } from "@graphite/editor";
|
||||
|
||||
export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
|
||||
|
||||
type FullscreenStoreState = {
|
||||
windowFullscreen: boolean;
|
||||
keyboardLocked: boolean;
|
||||
|
|
@ -12,28 +14,29 @@ const initialState: FullscreenStoreState = {
|
|||
keyboardLocked: false,
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
editorRef = editor;
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("WindowFullscreen", () => {
|
||||
toggleFullscreen();
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
|
||||
export function destroyFullscreenStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("WindowFullscreen");
|
||||
}
|
||||
export type FullscreenStore = ReturnType<typeof createFullscreenStore>;
|
||||
|
||||
export function fullscreenModeChanged() {
|
||||
update((state) => {
|
||||
|
|
@ -67,11 +70,3 @@ export async function toggleFullscreen() {
|
|||
if (state.windowFullscreen) await exitFullscreen();
|
||||
else await enterFullscreen();
|
||||
}
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createFullscreenStore(...currentArgs);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import type { NodeGraphErrorDiagnostic, BoxSelection, FrontendClickTargets, Cont
|
|||
import type { Editor } from "@graphite/editor";
|
||||
import type { MessageBody } from "@graphite/subscription-router";
|
||||
|
||||
export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
|
||||
|
||||
type NodeGraphStoreState = {
|
||||
box: BoxSelection | undefined;
|
||||
clickTargets: FrontendClickTargets | undefined;
|
||||
|
|
@ -51,12 +53,16 @@ const initialState: NodeGraphStoreState = {
|
|||
reorderExportIndex: undefined,
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
editorRef = editor;
|
||||
|
||||
// Set up message subscriptions on creation
|
||||
editor.subscriptions.subscribeFrontendMessage("SendUIMetadata", (data) => {
|
||||
update((state) => {
|
||||
|
|
@ -65,48 +71,56 @@ export function createNodeGraphStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateBox", (data) => {
|
||||
update((state) => {
|
||||
state.box = data.box;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateClickTargets", (data) => {
|
||||
update((state) => {
|
||||
state.clickTargets = data.clickTargets;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateContextMenuInformation", (data) => {
|
||||
update((state) => {
|
||||
state.contextMenuInformation = data.contextMenuInformation;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateImportReorderIndex", (data) => {
|
||||
update((state) => {
|
||||
state.reorderImportIndex = data.importIndex;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateExportReorderIndex", (data) => {
|
||||
update((state) => {
|
||||
state.reorderExportIndex = data.exportIndex;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateImportsExports", (data) => {
|
||||
update((state) => {
|
||||
state.updateImportsExports = data;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateInSelectedNetwork", (data) => {
|
||||
update((state) => {
|
||||
state.inSelectedNetwork = data.inSelectedNetwork;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateLayerWidths", (data) => {
|
||||
update((state) => {
|
||||
state.layerWidths = data.layerWidths;
|
||||
|
|
@ -115,6 +129,7 @@ export function createNodeGraphStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphNodes", (data) => {
|
||||
update((state) => {
|
||||
state.nodes.clear();
|
||||
|
|
@ -124,18 +139,21 @@ export function createNodeGraphStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphErrorDiagnostic", (data) => {
|
||||
update((state) => {
|
||||
state.error = data.error;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateVisibleNodes", (data) => {
|
||||
update((state) => {
|
||||
state.visibleNodes = new Set<bigint>(data.nodes);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphWires", (data) => {
|
||||
update((state) => {
|
||||
data.wires.forEach((wireUpdate) => {
|
||||
|
|
@ -154,30 +172,35 @@ export function createNodeGraphStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("ClearAllNodeGraphWires", () => {
|
||||
update((state) => {
|
||||
state.wires.clear();
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateNodeGraphSelection", (data) => {
|
||||
update((state) => {
|
||||
state.selected = data.selected;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.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) => {
|
||||
update((state) => {
|
||||
state.thumbnails.set(data.id, data.value);
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateWirePathInProgress", (data) => {
|
||||
update((state) => {
|
||||
state.wirePathInProgress = data.wirePath;
|
||||
|
|
@ -185,35 +208,32 @@ export function createNodeGraphStore(editor: Editor) {
|
|||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
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");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
|
||||
export function destroyNodeGraphStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) 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");
|
||||
}
|
||||
export type NodeGraphStore = ReturnType<typeof createNodeGraphStore>;
|
||||
|
||||
export function closeContextMenu() {
|
||||
update((state) => {
|
||||
|
|
@ -221,11 +241,3 @@ export function closeContextMenu() {
|
|||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createNodeGraphStore(...currentArgs);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import type { Editor } from "@graphite/editor";
|
|||
import { downloadFile, downloadFileBlob, upload } from "@graphite/utility-functions/files";
|
||||
import { rasterizeSVG } from "@graphite/utility-functions/rasterization";
|
||||
|
||||
export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
|
||||
|
||||
type PortfolioStoreState = {
|
||||
unsaved: boolean;
|
||||
documents: OpenDocument[];
|
||||
|
|
@ -23,19 +25,23 @@ const initialState: PortfolioStoreState = {
|
|||
layersPanelOpen: true,
|
||||
};
|
||||
|
||||
let editorRef: Editor | 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) {
|
||||
// Set up message subscriptions on creation
|
||||
editorRef = editor;
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateOpenDocumentsList", (data) => {
|
||||
update((state) => {
|
||||
state.documents = data.openDocuments;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateActiveDocument", (data) => {
|
||||
update((state) => {
|
||||
// Assume we receive a correct document id
|
||||
|
|
@ -44,6 +50,7 @@ export function createPortfolioStore(editor: Editor) {
|
|||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerFetchAndOpenDocument", async (data) => {
|
||||
try {
|
||||
const url = new URL(`demo-artwork/${data.filename}`, document.location.href);
|
||||
|
|
@ -56,21 +63,26 @@ export function createPortfolioStore(editor: Editor) {
|
|||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerOpen", async () => {
|
||||
const data = await upload(`image/*,.${editor.handle.fileExtension()}`, "data");
|
||||
editor.handle.openFile(data.filename, data.content);
|
||||
});
|
||||
|
||||
editor.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.subscriptions.subscribeFrontendMessage("TriggerSaveDocument", (data) => {
|
||||
downloadFile(data.name, data.content);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerSaveFile", (data) => {
|
||||
downloadFile(data.name, data.content);
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("TriggerExportImage", async (data) => {
|
||||
const { svg, name, mime, size } = data;
|
||||
|
||||
|
|
@ -87,18 +99,21 @@ export function createPortfolioStore(editor: Editor) {
|
|||
// Fail silently if there's an error rasterizing the SVG, such as a zero-sized image
|
||||
}
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateDataPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.dataPanelOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdatePropertiesPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.propertiesPanelOpen = data.open;
|
||||
return state;
|
||||
});
|
||||
});
|
||||
|
||||
editor.subscriptions.subscribeFrontendMessage("UpdateLayersPanelState", async (data) => {
|
||||
update((state) => {
|
||||
state.layersPanelOpen = data.open;
|
||||
|
|
@ -106,33 +121,22 @@ export function createPortfolioStore(editor: Editor) {
|
|||
});
|
||||
});
|
||||
|
||||
function destroy() {
|
||||
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");
|
||||
}
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
export type PortfolioStore = ReturnType<typeof createPortfolioStore>;
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createPortfolioStore(...currentArgs);
|
||||
});
|
||||
export function destroyPortfolioStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) 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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,8 +5,12 @@ import type { ActionShortcut } from "@graphite/../wasm/pkg/graphite_wasm";
|
|||
import type { Editor } from "@graphite/editor";
|
||||
import { operatingSystem } from "@graphite/utility-functions/platform";
|
||||
|
||||
export type TooltipStore = ReturnType<typeof createTooltipStore>;
|
||||
|
||||
const SHOW_TOOLTIP_DELAY_MS = 500;
|
||||
|
||||
let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
|
||||
|
||||
type TooltipStoreState = {
|
||||
visible: boolean;
|
||||
element: Element | undefined;
|
||||
|
|
@ -24,80 +28,15 @@ const initialState: TooltipStoreState = {
|
|||
fullscreenShortcut: undefined,
|
||||
};
|
||||
|
||||
let editorRef: Editor | undefined = undefined;
|
||||
|
||||
// Store state persisted across HMR to maintain reactive subscriptions in the component tree
|
||||
const store: Writable<TooltipStoreState> = import.meta.hot?.data?.store || writable<TooltipStoreState>(initialState);
|
||||
if (import.meta.hot) import.meta.hot.data.store = store;
|
||||
const { subscribe, update } = store;
|
||||
|
||||
export function createTooltipStore(editor: Editor) {
|
||||
let tooltipTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
|
||||
|
||||
// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
|
||||
const onMouseOver = (e: MouseEvent) => {
|
||||
const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
|
||||
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
state.element = element;
|
||||
return state;
|
||||
});
|
||||
};
|
||||
|
||||
// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
|
||||
const onMouseMove = (e: MouseEvent) => {
|
||||
// Hide the tooltip now that the cursor has moved
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
return state;
|
||||
});
|
||||
|
||||
// Before we schedule a new future tooltip appearance, we clear the existing one
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
|
||||
// Don't show tooltips while mouse buttons are pressed
|
||||
if (e.buttons !== 0) return;
|
||||
|
||||
// Schedule the tooltip to appear at this cursor position after a delay
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
update((state) => {
|
||||
if (state.element) {
|
||||
state.visible = true;
|
||||
state.position = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
return state;
|
||||
});
|
||||
}, SHOW_TOOLTIP_DELAY_MS);
|
||||
};
|
||||
|
||||
// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
|
||||
const onMouseLeave = () => {
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
closeTooltip();
|
||||
};
|
||||
|
||||
// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
|
||||
function closeTooltip() {
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
state.element = undefined;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
|
||||
document.removeEventListener("mouseover", onMouseOver);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseleave", onMouseLeave);
|
||||
document.removeEventListener("mousedown", closeTooltip);
|
||||
document.removeEventListener("keydown", closeTooltip);
|
||||
document.removeEventListener("wheel", closeTooltip);
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
|
||||
}
|
||||
editorRef = editor;
|
||||
|
||||
document.addEventListener("mouseover", onMouseOver);
|
||||
document.addEventListener("mousemove", onMouseMove);
|
||||
|
|
@ -125,19 +64,75 @@ export function createTooltipStore(editor: Editor) {
|
|||
});
|
||||
});
|
||||
|
||||
currentCleanup = destroy;
|
||||
currentArgs = [editor];
|
||||
return {
|
||||
subscribe,
|
||||
destroy,
|
||||
};
|
||||
return { subscribe };
|
||||
}
|
||||
export type TooltipStore = ReturnType<typeof createTooltipStore>;
|
||||
|
||||
// Self-accepting HMR: tear down the old instance and re-create with the new module's code
|
||||
let currentCleanup: (() => void) | undefined;
|
||||
let currentArgs: [Editor] | undefined;
|
||||
import.meta.hot?.accept((newModule) => {
|
||||
currentCleanup?.();
|
||||
if (currentArgs) newModule?.createTooltipStore(...currentArgs);
|
||||
});
|
||||
export function destroyTooltipStore() {
|
||||
const editor = editorRef;
|
||||
if (!editor) return;
|
||||
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
|
||||
document.removeEventListener("mouseover", onMouseOver);
|
||||
document.removeEventListener("mousemove", onMouseMove);
|
||||
document.removeEventListener("mouseleave", onMouseLeave);
|
||||
document.removeEventListener("mousedown", closeTooltip);
|
||||
document.removeEventListener("keydown", closeTooltip);
|
||||
document.removeEventListener("wheel", closeTooltip);
|
||||
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutShiftClick");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutAltClick");
|
||||
editor.subscriptions.unsubscribeFrontendMessage("SendShortcutFullscreen");
|
||||
}
|
||||
|
||||
// Listen for mouse movements onto tooltip-bearing HTML elements to track the future target of a tooltip
|
||||
function onMouseOver(e: MouseEvent) {
|
||||
const element = (e.target instanceof Element && e.target.closest("[data-tooltip-label], [data-tooltip-description], [data-tooltip-shortcut]")) || undefined;
|
||||
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
state.element = element;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
||||
// Listen for mouse movements to schedule and position the tooltip, or hide it immediately upon further movement
|
||||
function onMouseMove(e: MouseEvent) {
|
||||
// Hide the tooltip now that the cursor has moved
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
return state;
|
||||
});
|
||||
|
||||
// Before we schedule a new future tooltip appearance, we clear the existing one
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
|
||||
// Don't show tooltips while mouse buttons are pressed
|
||||
if (e.buttons !== 0) return;
|
||||
|
||||
// Schedule the tooltip to appear at this cursor position after a delay
|
||||
tooltipTimeout = setTimeout(() => {
|
||||
update((state) => {
|
||||
if (state.element) {
|
||||
state.visible = true;
|
||||
state.position = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
return state;
|
||||
});
|
||||
}, SHOW_TOOLTIP_DELAY_MS);
|
||||
}
|
||||
|
||||
// Hide tooltip and cancel any pending timeout when the mouse leaves the application window
|
||||
function onMouseLeave() {
|
||||
if (tooltipTimeout) clearTimeout(tooltipTimeout);
|
||||
closeTooltip();
|
||||
}
|
||||
|
||||
// Stop showing a tooltip if the user clicks or presses a key, and require the user to first move out of the element before it can re-appear
|
||||
function closeTooltip() {
|
||||
update((state) => {
|
||||
state.visible = false;
|
||||
state.element = undefined;
|
||||
return state;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -187,6 +187,12 @@ impl EditorHandle {
|
|||
// the backend from the web frontend.
|
||||
// ========================================================================
|
||||
|
||||
/// Re-sends all UI layouts to the frontend. Called during HMR re-mounts when the frontend has lost its layout state.
|
||||
#[wasm_bindgen(js_name = resendAllLayouts)]
|
||||
pub fn resend_all_layouts(&self) {
|
||||
self.dispatch(LayoutMessage::ResendAllLayouts);
|
||||
}
|
||||
|
||||
#[wasm_bindgen(js_name = initAfterFrontendReady)]
|
||||
pub fn init_after_frontend_ready(&self) {
|
||||
// Enforce idempotency, so if this is called again during an HMR re-mount, we don't initialize the editor backend twice
|
||||
|
|
|
|||
Loading…
Reference in New Issue