diff --git a/frontend/src/README.md b/frontend/src/README.md index 19a824b1a2..bbff9ee95f 100644 --- a/frontend/src/README.md +++ b/frontend/src/README.md @@ -6,7 +6,7 @@ Svelte components that build the Graphite editor GUI from layouts, panels, widge ## Managers: `managers/` -TypeScript files, constructed by the editor frontend, which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to frontend messages to execute JS APIs, and in response to these APIs or user interactions, they may call functions in the backend (defined in `/frontend/wasm/editor_api.rs`). +TypeScript files, constructed by the editor frontend, which manage the input/output of browser APIs and link this functionality with the editor backend. These files subscribe to frontend messages to execute JS APIs, and in response to these APIs or user interactions, they may call functions in the backend (defined in `/frontend/wasm/editor_wrapper.rs`). Each manager module stores its dependencies (like `subscriptionsRouter` and `editorWrapper`) in module-level variables and exports a `create*()` and `destroy*()` function pair. `Editor.svelte` calls each `create*()` constructor in its `onMount` and calls each `destroy*()` in its `onDestroy`. Managers replace themselves during HMR updates if they are modified live during development. @@ -30,7 +30,7 @@ Associates messages from the backend with subscribers in the frontend, and route ## Svelte app entry point: `App.svelte` -The entry point for the Svelte application. Initializes the Wasm module, creates the `EditorWrapper` backend instance and the subscriptions router, and renders `Editor.svelte` once both are ready. The `EditorWrapper` is the wasm-bindgen interface to the Rust editor backend (defined in `/frontend/wasm/editor_api.rs`), providing access to callable backend functions. Both the editor and subscriptions router are passed as props to `Editor.svelte` and set as Svelte contexts for use throughout the component tree. +The entry point for the Svelte application. Initializes the Wasm module, creates the `EditorWrapper` backend instance and the subscriptions router, and renders `Editor.svelte` once both are ready. The `EditorWrapper` is the wasm-bindgen interface to the Rust editor backend (defined in `/frontend/wasm/editor_wrapper.rs`), providing access to callable backend functions. Both the editor and subscriptions router are passed as props to `Editor.svelte` and set as Svelte contexts for use throughout the component tree. ## Editor base instance: `Editor.svelte` diff --git a/frontend/wasm/README.md b/frontend/wasm/README.md index 8f87d356f7..fcc8e581a4 100644 --- a/frontend/wasm/README.md +++ b/frontend/wasm/README.md @@ -1,6 +1,6 @@ # Overview of `/frontend/wasm/` -## Wasm wrapper API: `src/editor_api.rs` +## Wasm wrapper API: `src/editor_wrapper.rs` Provides bindings for JS to call functions defined in this file, and for `FrontendMessage`s to be sent from Rust back to JS in the form of a callback to the subscription router. This Wasm wrapper crate, since it's written in Rust, is able to call into the Editor crate's codebase and send `FrontendMessage`s back to JS. diff --git a/frontend/wasm/src/editor_api.rs b/frontend/wasm/src/editor_wrapper.rs similarity index 100% rename from frontend/wasm/src/editor_api.rs rename to frontend/wasm/src/editor_wrapper.rs diff --git a/frontend/wasm/src/helpers.rs b/frontend/wasm/src/helpers.rs index 0868100963..c67454a544 100644 --- a/frontend/wasm/src/helpers.rs +++ b/frontend/wasm/src/helpers.rs @@ -1,6 +1,6 @@ #[cfg(not(feature = "native"))] use crate::EDITOR; -use crate::editor_api::EditorWrapper; +use crate::editor_wrapper::EditorWrapper; use crate::{EDITOR_HAS_CRASHED, EDITOR_WRAPPER}; #[cfg(not(feature = "native"))] use editor::application::Editor; diff --git a/frontend/wasm/src/lib.rs b/frontend/wasm/src/lib.rs index 9fb1c8828e..c184bc981d 100644 --- a/frontend/wasm/src/lib.rs +++ b/frontend/wasm/src/lib.rs @@ -4,7 +4,7 @@ #[macro_use] extern crate log; -pub mod editor_api; +pub mod editor_wrapper; pub mod helpers; pub mod native_communication; @@ -25,7 +25,7 @@ thread_local! { #[cfg(not(feature = "native"))] pub static EDITOR: Mutex> = const { Mutex::new(None) }; pub static MESSAGE_BUFFER: std::cell::RefCell> = const { std::cell::RefCell::new(Vec::new()) }; - pub static EDITOR_WRAPPER: Mutex> = const { Mutex::new(None) }; + pub static EDITOR_WRAPPER: Mutex> = const { Mutex::new(None) }; pub static PANIC_DIALOG_MESSAGE_CALLBACK: std::cell::RefCell> = const { std::cell::RefCell::new(None) }; } diff --git a/frontend/wasm/src/native_communication.rs b/frontend/wasm/src/native_communication.rs index 875df6044c..11d858303b 100644 --- a/frontend/wasm/src/native_communication.rs +++ b/frontend/wasm/src/native_communication.rs @@ -1,4 +1,4 @@ -use crate::editor_api::EditorWrapper; +use crate::editor_wrapper::EditorWrapper; use crate::helpers::wrapper; use editor::messages::prelude::FrontendMessage; use js_sys::{ArrayBuffer, Uint8Array}; diff --git a/website/content/volunteer/guide/codebase-overview/_index.md b/website/content/volunteer/guide/codebase-overview/_index.md index 009fcc25bc..54f70336f4 100644 --- a/website/content/volunteer/guide/codebase-overview/_index.md +++ b/website/content/volunteer/guide/codebase-overview/_index.md @@ -39,6 +39,11 @@ The frontend is the GUI for Graphite which users see and interact with. It is bu ## Crate dependency graph +```sh +# Access this quickly in the future: +cargo run explore deps +``` + This diagram shows the structure of the crates that comprise the Graphite codebase and how they depend on each other. Every Arrow points from a crate to another which it depends on.
@@ -49,7 +54,7 @@ This diagram shows the structure of the crates that comprise the Graphite codeba ## Frontend/backend communication -Frontend-to-backend communication is achieved through a thin Rust translation layer in [`/frontend/wasm/src/editor_api.rs`](https://github.com/GraphiteEditor/Graphite/tree/master/frontend/wasm/src/editor_api.rs) which wraps the editor backend's Rust-based message system API and provides the TypeScript-compatible API of callable functions. These wrapper functions are compiled by [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) into autogenerated TS functions that serve as an entry point from TS into the Wasm binary. +Frontend-to-backend communication is achieved through a thin Rust translation layer in [`/frontend/wasm/src/editor_wrapper.rs`](https://github.com/GraphiteEditor/Graphite/tree/master/frontend/wasm/src/editor_wrapper.rs) which wraps the editor backend's Rust-based message system API and provides the TypeScript-compatible API of callable functions. These wrapper functions are compiled by [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) into autogenerated TS functions that serve as an entry point from TS into the Wasm binary. Backend-to-frontend communication happens by sending a queue of messages to the frontend message dispatcher. After the TS has called any wrapper API function to get into backend code execution, the editor's business logic runs and queues up each [`FrontendMessage`](https://github.com/GraphiteEditor/Graphite/tree/master/editor/src/messages/frontend/frontend_message.rs) which get mapped from Rust to JavaScript data structures in [`/frontend/src/messages.ts`](https://github.com/GraphiteEditor/Graphite/tree/master/frontend/src/messages.ts). Various TS code subscribes to these messages by calling: