Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions frontend/src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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`

Expand Down
2 changes: 1 addition & 1 deletion frontend/wasm/README.md
Original file line number Diff line number Diff line change
@@ -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.

Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion frontend/wasm/src/helpers.rs
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions frontend/wasm/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
#[macro_use]
extern crate log;

pub mod editor_api;
pub mod editor_wrapper;
pub mod helpers;
pub mod native_communication;

Expand All @@ -25,7 +25,7 @@ thread_local! {
#[cfg(not(feature = "native"))]
pub static EDITOR: Mutex<Option<editor::application::Editor>> = const { Mutex::new(None) };
pub static MESSAGE_BUFFER: std::cell::RefCell<Vec<Message>> = const { std::cell::RefCell::new(Vec::new()) };
pub static EDITOR_WRAPPER: Mutex<Option<editor_api::EditorWrapper>> = const { Mutex::new(None) };
pub static EDITOR_WRAPPER: Mutex<Option<editor_wrapper::EditorWrapper>> = const { Mutex::new(None) };
pub static PANIC_DIALOG_MESSAGE_CALLBACK: std::cell::RefCell<Option<js_sys::Function>> = const { std::cell::RefCell::new(None) };
}

Expand Down
2 changes: 1 addition & 1 deletion frontend/wasm/src/native_communication.rs
Original file line number Diff line number Diff line change
@@ -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};
Expand Down
7 changes: 6 additions & 1 deletion website/content/volunteer/guide/codebase-overview/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div class="crate-hierarchy">
Expand All @@ -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:

Expand Down
Loading