Rename /frontend/wasm -> /frontend/wrapper (#3927)

frontend/wrapper/Cargo.toml

@@ -0,0 +1,66 @@
+[package]
+name = "graphite-wasm-wrapper"
+publish = false
+version = "0.0.0"
+rust-version = "1.88"
+authors = ["Graphite Authors <contact@graphite.art>"]
+edition = "2024"
+readme = "../../README.md"
+homepage = "https://graphite.art"
+repository = "https://github.com/GraphiteEditor/Graphite"
+license = "Apache-2.0"
+
+[features]
+default = ["gpu", "shader-nodes"]
+gpu = ["editor/gpu"]
+shader-nodes = ["graphene-std/shader-nodes", "gpu"]
+native = ["node-macro/disable-registration"]
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+# Local dependencies
+editor = { path = "../../editor", package = "graphite-editor", features = [
+	"gpu",
+] }
+graphene-std = { workspace = true }
+
+# Workspace dependencies
+graph-craft = { workspace = true }
+log = { workspace = true }
+serde = { workspace = true }
+wasm-bindgen = { workspace = true }
+serde-wasm-bindgen = { workspace = true }
+js-sys = { workspace = true }
+wasm-bindgen-futures = { workspace = true }
+math-parser = { workspace = true }
+wgpu = { workspace = true }
+web-sys = { workspace = true }
+ron = { workspace = true }
+serde_json = { workspace = true }
+node-macro = { workspace = true }
+
+[package.metadata.wasm-pack.profile.dev]
+wasm-opt = false
+
+[package.metadata.wasm-pack.profile.dev.wasm-bindgen]
+debug-js-glue = true
+demangle-name-section = true
+dwarf-debug-info = false
+
+[package.metadata.wasm-pack.profile.release]
+wasm-opt = ["-Os", "-g"]
+
+[package.metadata.wasm-pack.profile.release.wasm-bindgen]
+debug-js-glue = false
+demangle-name-section = false
+dwarf-debug-info = false
+
+[lints.rust]
+unexpected_cfgs = { level = "warn", check-cfg = [
+	'cfg(wasm_bindgen_unstable_test_coverage)',
+] }
+
+[package.metadata.cargo-shear]
+ignored = ["wgpu"]

frontend/wrapper/README.md

@@ -0,0 +1,17 @@
+# Overview of `/frontend/wrapper/`
+
+## 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.
+
+## Wasm wrapper helper code: `src/helpers.rs`
+
+Assorted function and struct definitions used in the Wasm wrapper.
+
+## Native communication: `src/native_communication.rs`
+
+Handles receiving serialized `FrontendMessage`s from the native desktop app via an `ArrayBuffer` and forwarding them to JS through the editor wrapper.
+
+## Wasm wrapper initialization: `src/lib.rs`
+
+Entry point for the Rust codebase in the Wasm environment. Sets up panic hooks and logging, and defines thread-local storage for the editor instance, editor wrapper, message buffer, and panic dialog callback.

frontend/wrapper/src/editor_wrapper.rs

@@ -0,0 +1,953 @@
+#![allow(clippy::too_many_arguments)]
+//
+// This file is where functions are defined to be called directly from JS.
+// It serves as a thin wrapper over the editor backend API that relies
+// on the dispatcher messaging system and more complex Rust data types.
+//
+#[cfg(not(feature = "native"))]
+use crate::EDITOR;
+#[cfg(not(feature = "native"))]
+use crate::helpers::poll_node_graph_evaluation;
+use crate::helpers::{auto_save_all_documents, calculate_hash, render_image_data_to_canvases, request_animation_frame, set_timeout, translate_key, wrapper};
+use crate::{EDITOR_HAS_CRASHED, EDITOR_WRAPPER, Error, FRONTEND_READY, MESSAGE_BUFFER, PANIC_DIALOG_MESSAGE_CALLBACK};
+#[cfg(not(feature = "native"))]
+use editor::application::{Editor, Environment, Host, Platform};
+use editor::consts::FILE_EXTENSION;
+use editor::messages::clipboard::utility_types::ClipboardContentRaw;
+use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
+use editor::messages::input_mapper::utility_types::input_mouse::{EditorMouseState, ScrollDelta};
+use editor::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
+use editor::messages::portfolio::document::utility_types::network_interface::ImportOrExport;
+use editor::messages::portfolio::utility_types::{FontCatalog, FontCatalogFamily};
+use editor::messages::prelude::*;
+use editor::messages::tool::tool_messages::tool_prelude::WidgetId;
+use graph_craft::document::NodeId;
+use graphene_std::raster::color::Color;
+use graphene_std::vector::GradientStops;
+use serde::Serialize;
+use serde_wasm_bindgen::{self, from_value};
+use std::cell::RefCell;
+use std::path::PathBuf;
+use std::sync::atomic::{AtomicU64, Ordering};
+use std::time::Duration;
+use wasm_bindgen::prelude::*;
+
+static IMAGE_DATA_HASH: AtomicU64 = AtomicU64::new(0);
+
+/// This struct is, via wasm-bindgen, used by JS to interact with the editor backend. It does this by calling functions, which are `impl`ed
+#[wasm_bindgen]
+#[derive(Clone)]
+pub struct EditorWrapper {
+	/// This callback is called by the editor's dispatcher when directing `FrontendMessage`s from Rust to JS
+	frontend_message_handler_callback: js_sys::Function,
+}
+
+// Defined separately from the `impl` block below since this `impl` block lacks the `#[wasm_bindgen]` attribute.
+// Quirks in wasm-bindgen prevent functions in `#[wasm_bindgen]` `impl` blocks from being made publicly accessible from Rust.
+impl EditorWrapper {
+	pub fn send_frontend_message_to_js_rust_proxy(&self, message: FrontendMessage) {
+		self.send_frontend_message_to_js(message);
+	}
+
+	fn initialize_wrapper(frontend_message_handler_callback: js_sys::Function) -> EditorWrapper {
+		let panic_callback = frontend_message_handler_callback.clone();
+		let editor_wrapper = EditorWrapper { frontend_message_handler_callback };
+		if EDITOR_WRAPPER.with(|wrapper| wrapper.lock().ok().map(|mut guard| *guard = Some(editor_wrapper.clone()))).is_none() {
+			log::error!("Attempted to initialize the editor wrapper more than once");
+		}
+		PANIC_DIALOG_MESSAGE_CALLBACK.with_borrow_mut(|callback| *callback = Some(panic_callback));
+		editor_wrapper
+	}
+}
+
+#[wasm_bindgen]
+impl EditorWrapper {
+	// ========================
+	// Editor wrapper machinery
+	// ========================
+
+	#[cfg(not(feature = "native"))]
+	pub fn create(platform: String, uuid_random_seed: u64, frontend_message_handler_callback: js_sys::Function) -> EditorWrapper {
+		let editor = Editor::new(
+			Environment {
+				platform: Platform::Web,
+				host: match platform.as_str() {
+					"Linux" => Host::Linux,
+					"Mac" => Host::Mac,
+					"Windows" => Host::Windows,
+					_ => unreachable!(),
+				},
+			},
+			uuid_random_seed,
+		);
+
+		if EDITOR.with(|wrapper| wrapper.lock().ok().map(|mut guard| *guard = Some(editor))).is_none() {
+			log::error!("Attempted to initialize the editor more than once");
+		}
+
+		Self::initialize_wrapper(frontend_message_handler_callback)
+	}
+	#[cfg(feature = "native")]
+	pub fn create(_platform: String, _uuid_random_seed: u64, frontend_message_handler_callback: js_sys::Function) -> EditorWrapper {
+		Self::initialize_wrapper(frontend_message_handler_callback)
+	}
+
+	// Sends a message to the dispatcher in the Editor Backend
+	#[cfg(not(feature = "native"))]
+	pub(crate) fn dispatch<T: Into<Message>>(&self, message: T) {
+		// Process no further messages after a crash to avoid spamming the console
+		use crate::MESSAGE_BUFFER;
+		if EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
+			return;
+		}
+
+		// Get the editor, dispatch the message, and store the `FrontendMessage` queue response
+		let frontend_messages = EDITOR.with(|editor| {
+			let mut guard = editor.try_lock();
+			let Ok(Some(editor)) = guard.as_deref_mut() else {
+				// Enqueue messages which can't be procssed currently
+				MESSAGE_BUFFER.with_borrow_mut(|buffer| buffer.push(message.into()));
+				return vec![];
+			};
+
+			editor.handle_message(message)
+		});
+
+		// Send each `FrontendMessage` to the JavaScript frontend
+		for message in frontend_messages.into_iter() {
+			self.send_frontend_message_to_js(message);
+		}
+	}
+	#[cfg(feature = "native")]
+	pub(crate) fn dispatch<T: Into<Message>>(&self, message: T) {
+		let message: Message = message.into();
+		let Ok(serialized_message) = ron::to_string(&message) else {
+			log::error!("Failed to serialize message");
+			return;
+		};
+		crate::native_communication::send_message_to_cef(serialized_message)
+	}
+
+	// Sends a FrontendMessage to JavaScript
+	pub(crate) fn send_frontend_message_to_js(&self, message: FrontendMessage) {
+		if let FrontendMessage::UpdateImageData { ref image_data } = message {
+			let new_hash = calculate_hash(image_data);
+			let prev_hash = IMAGE_DATA_HASH.load(Ordering::Relaxed);
+
+			if new_hash != prev_hash {
+				render_image_data_to_canvases(image_data.as_slice());
+				IMAGE_DATA_HASH.store(new_hash, Ordering::Relaxed);
+			}
+			return;
+		}
+
+		let message_type = message.to_discriminant().local_name();
+
+		let serializer = serde_wasm_bindgen::Serializer::new().serialize_large_number_types_as_bigints(true);
+		let message_data = message.serialize(&serializer).expect("Failed to serialize FrontendMessage");
+
+		let js_return_value = self.frontend_message_handler_callback.call2(&JsValue::null(), &JsValue::from(message_type), &message_data);
+
+		if let Err(error) = js_return_value {
+			error!("While handling FrontendMessage {:?}, JavaScript threw an error:\n{:?}", message.to_discriminant().local_name(), error,)
+		}
+	}
+
+	// ================================================
+	// Functions for calling the editor in Rust from JS
+	// ================================================
+
+	/// 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
+		if FRONTEND_READY.swap(true, Ordering::SeqCst) {
+			return;
+		}
+
+		#[cfg(feature = "native")]
+		crate::native_communication::initialize_native_communication();
+
+		self.dispatch(PortfolioMessage::Init);
+
+		// Poll node graph evaluation on `requestAnimationFrame`
+		{
+			let f = std::rc::Rc::new(RefCell::new(None));
+			let g = f.clone();
+
+			*g.borrow_mut() = Some(Closure::new(move |_timestamp| {
+				#[cfg(not(feature = "native"))]
+				wasm_bindgen_futures::spawn_local(poll_node_graph_evaluation());
+
+				if !EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
+					wrapper(|wrapper| {
+						// Process all messages that have been queued up
+						let mut messages = MESSAGE_BUFFER.take();
+						messages.push(
+							InputPreprocessorMessage::CurrentTime {
+								timestamp: js_sys::Date::now() as u64,
+							}
+							.into(),
+						);
+						messages.push(AnimationMessage::IncrementFrameCounter.into());
+
+						// Used by auto-panning, but this could possibly be refactored in the future, see:
+						// <https://github.com/GraphiteEditor/Graphite/pull/2562#discussion_r2041102786>
+						messages.push(BroadcastMessage::TriggerEvent(EventMessage::AnimationFrame).into());
+
+						wrapper.dispatch(Message::Batched { messages: messages.into() });
+					});
+				}
+
+				// Schedule ourself for another requestAnimationFrame callback
+				request_animation_frame(f.borrow().as_ref().unwrap());
+			}));
+
+			request_animation_frame(g.borrow().as_ref().unwrap());
+		}
+
+		// Auto save all documents on `setTimeout`
+		{
+			let f = std::rc::Rc::new(RefCell::new(None));
+			let g = f.clone();
+
+			*g.borrow_mut() = Some(Closure::new(move || {
+				auto_save_all_documents();
+
+				// Schedule ourself for another setTimeout callback
+				set_timeout(f.borrow().as_ref().unwrap(), Duration::from_secs(editor::consts::AUTO_SAVE_TIMEOUT_SECONDS));
+			}));
+
+			set_timeout(g.borrow().as_ref().unwrap(), Duration::from_secs(editor::consts::AUTO_SAVE_TIMEOUT_SECONDS));
+		}
+	}
+
+	#[wasm_bindgen(js_name = addPrimaryImport)]
+	pub fn add_primary_import(&self) {
+		self.dispatch(DocumentMessage::AddTransaction);
+		self.dispatch(NodeGraphMessage::AddPrimaryImport);
+	}
+
+	#[wasm_bindgen(js_name = addSecondaryImport)]
+	pub fn add_secondary_import(&self) {
+		self.dispatch(DocumentMessage::AddTransaction);
+		self.dispatch(NodeGraphMessage::AddSecondaryImport);
+	}
+
+	#[wasm_bindgen(js_name = addPrimaryExport)]
+	pub fn add_primary_export(&self) {
+		self.dispatch(DocumentMessage::AddTransaction);
+		self.dispatch(NodeGraphMessage::AddPrimaryExport);
+	}
+
+	#[wasm_bindgen(js_name = addSecondaryExport)]
+	pub fn add_secondary_export(&self) {
+		self.dispatch(DocumentMessage::AddTransaction);
+		self.dispatch(NodeGraphMessage::AddSecondaryExport);
+	}
+
+	/// Start Pointer Lock
+	#[wasm_bindgen(js_name = appWindowPointerLock)]
+	pub fn app_window_pointer_lock(&self) {
+		let message = AppWindowMessage::PointerLock;
+		self.dispatch(message);
+	}
+
+	/// Minimizes the application window to the taskbar or dock
+	#[wasm_bindgen(js_name = appWindowMinimize)]
+	pub fn app_window_minimize(&self) {
+		let message = AppWindowMessage::Minimize;
+		self.dispatch(message);
+	}
+
+	/// Toggles minimizing or restoring down the application window
+	#[wasm_bindgen(js_name = appWindowMaximize)]
+	pub fn app_window_maximize(&self) {
+		let message = AppWindowMessage::Maximize;
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = appWindowFullscreen)]
+	pub fn app_window_fullscreen(&self) {
+		let message = AppWindowMessage::Fullscreen;
+		self.dispatch(message);
+	}
+
+	/// Closes the application window
+	#[wasm_bindgen(js_name = appWindowClose)]
+	pub fn app_window_close(&self) {
+		let message = AppWindowMessage::Close;
+		self.dispatch(message);
+	}
+
+	/// Drag the application window
+	#[wasm_bindgen(js_name = appWindowDrag)]
+	pub fn app_window_start_drag(&self) {
+		let message = AppWindowMessage::Drag;
+		self.dispatch(message);
+	}
+
+	/// Displays a dialog with an error message
+	#[wasm_bindgen(js_name = errorDialog)]
+	pub fn error_dialog(&self, title: String, description: String) {
+		let message = DialogMessage::DisplayDialogError { title, description };
+		self.dispatch(message);
+	}
+
+	/// Answer whether or not the editor has crashed
+	#[wasm_bindgen(js_name = hasCrashed)]
+	pub fn has_crashed(&self) -> bool {
+		EDITOR_HAS_CRASHED.load(Ordering::SeqCst)
+	}
+
+	/// Answer whether or not the editor is in development mode
+	#[wasm_bindgen(js_name = inDevelopmentMode)]
+	pub fn in_development_mode(&self) -> bool {
+		cfg!(debug_assertions)
+	}
+
+	/// Get the constant `FILE_EXTENSION`
+	#[wasm_bindgen(js_name = fileExtension)]
+	pub fn file_extension(&self) -> String {
+		FILE_EXTENSION.into()
+	}
+
+	/// Update the value of a given UI widget, but don't commit it to the history (unless `commit_layout()` is called, which handles that)
+	#[wasm_bindgen(js_name = widgetValueUpdate)]
+	pub fn widget_value_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
+		self.widget_value_update_helper(layout_target, widget_id, value, resend_widget)
+	}
+
+	/// Commit the value of a given UI widget to the history
+	#[wasm_bindgen(js_name = widgetValueCommit)]
+	pub fn widget_value_commit(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+		self.widget_value_commit_helper(layout_target, widget_id, value)
+	}
+
+	/// Update the value of a given UI widget, and commit it to the history
+	#[wasm_bindgen(js_name = widgetValueCommitAndUpdate)]
+	pub fn widget_value_commit_and_update(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
+		self.widget_value_commit_helper(layout_target.clone(), widget_id, value.clone())?;
+		self.widget_value_update_helper(layout_target, widget_id, value, resend_widget)?;
+		Ok(())
+	}
+
+	pub fn widget_value_update_helper(&self, layout_target: JsValue, widget_id: u64, value: JsValue, resend_widget: bool) -> Result<(), JsValue> {
+		let widget_id = WidgetId(widget_id);
+		match (from_value(layout_target), from_value(value)) {
+			(Ok(layout_target), Ok(value)) => {
+				let message = LayoutMessage::WidgetValueUpdate { layout_target, widget_id, value };
+				self.dispatch(message);
+
+				if resend_widget {
+					let resend_message = LayoutMessage::ResendActiveWidget { layout_target, widget_id };
+					self.dispatch(resend_message);
+				}
+
+				Ok(())
+			}
+			(target, val) => Err(Error::new(&format!("Could not update UI\nDetails:\nTarget: {target:?}\nValue: {val:?}")).into()),
+		}
+	}
+
+	pub fn widget_value_commit_helper(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+		let widget_id = WidgetId(widget_id);
+		match (from_value(layout_target), from_value(value)) {
+			(Ok(layout_target), Ok(value)) => {
+				let message = LayoutMessage::WidgetValueCommit { layout_target, widget_id, value };
+				self.dispatch(message);
+				Ok(())
+			}
+			(target, val) => Err(Error::new(&format!("Could not commit UI\nDetails:\nTarget: {target:?}\nValue: {val:?}")).into()),
+		}
+	}
+
+	#[wasm_bindgen(js_name = loadPreferences)]
+	pub fn load_preferences(&self, preferences: Option<String>) {
+		if let Some(preferences) = preferences {
+			let Ok(preferences) = serde_json::from_str(&preferences) else {
+				log::error!("Failed to deserialize preferences");
+				return;
+			};
+			let message = PreferencesMessage::Load { preferences };
+			self.dispatch(message);
+		}
+	}
+
+	#[wasm_bindgen(js_name = selectDocument)]
+	pub fn select_document(&self, document_id: u64) {
+		let document_id = DocumentId(document_id);
+		let message = PortfolioMessage::SelectDocument { document_id };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = newDocumentDialog)]
+	pub fn new_document_dialog(&self) {
+		let message = DialogMessage::RequestNewDocumentDialog;
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = openFile)]
+	pub fn open_file(&self, path: String, content: Vec<u8>) {
+		let message = PortfolioMessage::OpenFile { path: PathBuf::from(path), content };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = importFile)]
+	pub fn import_file(&self, path: String, content: Vec<u8>) {
+		let message = PortfolioMessage::ImportFile { path: PathBuf::from(path), content };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = openAutoSavedDocument)]
+	pub fn open_auto_saved_document(&self, document_id: u64, document_name: String, document_is_saved: bool, document_serialized_content: String, to_front: bool) {
+		let document_id = DocumentId(document_id);
+		let message = PortfolioMessage::OpenDocumentFileWithId {
+			document_id,
+			document_name: Some(document_name),
+			document_path: None,
+			document_is_auto_saved: true,
+			document_is_saved,
+			document_serialized_content,
+			to_front,
+			select_after_open: false,
+		};
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = triggerAutoSave)]
+	pub fn trigger_auto_save(&self, document_id: u64) {
+		let document_id = DocumentId(document_id);
+		let message = PortfolioMessage::AutoSaveDocument { document_id };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = closeDocumentWithConfirmation)]
+	pub fn close_document_with_confirmation(&self, document_id: u64) {
+		let document_id = DocumentId(document_id);
+		let message = PortfolioMessage::CloseDocumentWithConfirmation { document_id };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = requestAboutGraphiteDialogWithLocalizedCommitDate)]
+	pub fn request_about_graphite_dialog_with_localized_commit_date(&self, localized_commit_date: String, localized_commit_year: String) {
+		let message = DialogMessage::RequestAboutGraphiteDialogWithLocalizedCommitDate {
+			localized_commit_date,
+			localized_commit_year,
+		};
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = requestLicensesThirdPartyDialogWithLicenseText)]
+	pub fn request_licenses_third_party_dialog_with_license_text(&self, license_text: String) {
+		let message = DialogMessage::RequestLicensesThirdPartyDialogWithLicenseText { license_text };
+		self.dispatch(message);
+	}
+
+	/// Send new viewport info to the backend
+	#[wasm_bindgen(js_name = updateViewport)]
+	pub fn update_viewport(&self, x: f64, y: f64, width: f64, height: f64, scale: f64) {
+		let message = ViewportMessage::Update { x, y, width, height, scale };
+		self.dispatch(message);
+	}
+
+	/// Mouse movement within the screenspace bounds of the viewport
+	#[wasm_bindgen(js_name = onMouseMove)]
+	pub fn on_mouse_move(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::PointerMove { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// Mouse scrolling within the screenspace bounds of the viewport
+	#[wasm_bindgen(js_name = onWheelScroll)]
+	pub fn on_wheel_scroll(&self, x: f64, y: f64, mouse_keys: u8, wheel_delta_x: f64, wheel_delta_y: f64, wheel_delta_z: f64, modifiers: u8) {
+		let mut editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+		editor_mouse_state.scroll_delta = ScrollDelta::new(wheel_delta_x, wheel_delta_y, wheel_delta_z);
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::WheelScroll { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A mouse button depressed within screenspace the bounds of the viewport
+	#[wasm_bindgen(js_name = onMouseDown)]
+	pub fn on_mouse_down(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::PointerDown { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A mouse button released
+	#[wasm_bindgen(js_name = onMouseUp)]
+	pub fn on_mouse_up(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::PointerUp { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// Mouse shaken
+	#[wasm_bindgen(js_name = onMouseShake)]
+	pub fn on_mouse_shake(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::PointerShake { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// Mouse double clicked
+	#[wasm_bindgen(js_name = onDoubleClick)]
+	pub fn on_double_click(&self, x: f64, y: f64, mouse_keys: u8, modifiers: u8) {
+		let editor_mouse_state = EditorMouseState::from_keys_and_editor_position(mouse_keys, (x, y).into());
+
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		let message = InputPreprocessorMessage::DoubleClick { editor_mouse_state, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A keyboard button depressed within screenspace the bounds of the viewport
+	#[wasm_bindgen(js_name = onKeyDown)]
+	pub fn on_key_down(&self, name: String, modifiers: u8, key_repeat: bool) {
+		let key = translate_key(&name);
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		trace!("Key down {key:?}, name: {name}, modifiers: {modifiers:?}, key repeat: {key_repeat}");
+
+		let message = InputPreprocessorMessage::KeyDown { key, key_repeat, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A keyboard button released
+	#[wasm_bindgen(js_name = onKeyUp)]
+	pub fn on_key_up(&self, name: String, modifiers: u8, key_repeat: bool) {
+		let key = translate_key(&name);
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		trace!("Key up {key:?}, name: {name}, modifiers: {modifier_keys:?}, key repeat: {key_repeat}");
+
+		let message = InputPreprocessorMessage::KeyUp { key, key_repeat, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A text box was committed
+	#[wasm_bindgen(js_name = onChangeText)]
+	pub fn on_change_text(&self, new_text: String, is_left_or_right_click: bool) -> Result<(), JsValue> {
+		let message = TextToolMessage::TextChange { new_text, is_left_or_right_click };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// The font catalog has been loaded
+	#[wasm_bindgen(js_name = onFontCatalogLoad)]
+	pub fn on_font_catalog_load(&self, catalog: JsValue) -> Result<(), JsValue> {
+		// Deserializing from TS type: `{ name: string; styles: { weight: number, italic: boolean, url: string }[] }[]`
+		let families = serde_wasm_bindgen::from_value::<Vec<FontCatalogFamily>>(catalog)?;
+		let message = PortfolioMessage::FontCatalogLoaded { catalog: FontCatalog(families) };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// A font has been downloaded
+	#[wasm_bindgen(js_name = onFontLoad)]
+	pub fn on_font_load(&self, font_family: String, font_style: String, data: Vec<u8>) -> Result<(), JsValue> {
+		let message = PortfolioMessage::FontLoaded { font_family, font_style, data };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Dialog got dismissed
+	#[wasm_bindgen(js_name = onDialogDismiss)]
+	pub fn on_dialog_dismiss(&self) {
+		let message = DialogMessage::Dismiss;
+		self.dispatch(message);
+	}
+
+	/// A text box was changed
+	#[wasm_bindgen(js_name = updateBounds)]
+	pub fn update_bounds(&self, new_text: String) -> Result<(), JsValue> {
+		let message = TextToolMessage::UpdateBounds { new_text };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Update primary color with values on a scale from 0 to 1.
+	#[wasm_bindgen(js_name = updatePrimaryColor)]
+	pub fn update_primary_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let Some(primary_color) = Color::from_rgbaf32(red, green, blue, alpha) else {
+			return Err(Error::new("Invalid color").into());
+		};
+
+		let message = ToolMessage::SelectWorkingColor {
+			color: primary_color.to_linear_srgb(),
+			primary: true,
+		};
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Update secondary color with values on a scale from 0 to 1.
+	#[wasm_bindgen(js_name = updateSecondaryColor)]
+	pub fn update_secondary_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let Some(secondary_color) = Color::from_rgbaf32(red, green, blue, alpha) else {
+			return Err(Error::new("Invalid color").into());
+		};
+
+		let message = ToolMessage::SelectWorkingColor {
+			color: secondary_color.to_linear_srgb(),
+			primary: false,
+		};
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Update the color of the currently-edited gradient stop
+	#[wasm_bindgen(js_name = updateGradientStopColor)]
+	pub fn update_gradient_stop_color(&self, red: f32, green: f32, blue: f32, alpha: f32) -> Result<(), JsValue> {
+		let Some(color) = Color::from_rgbaf32(red, green, blue, alpha) else {
+			return Err(Error::new("Invalid color").into());
+		};
+		self.dispatch(GradientToolMessage::UpdateStopColor { color: color.to_linear_srgb() });
+		Ok(())
+	}
+
+	/// Start a new undo transaction for gradient stop color editing
+	#[wasm_bindgen(js_name = startGradientStopColorTransaction)]
+	pub fn start_gradient_stop_color_transaction(&self) {
+		self.dispatch(GradientToolMessage::StartTransactionForColorStop);
+	}
+
+	/// Commit the current gradient stop color transaction (called on pointer-up after each drag/click)
+	#[wasm_bindgen(js_name = commitGradientStopColorTransaction)]
+	pub fn commit_gradient_stop_color_transaction(&self) {
+		self.dispatch(GradientToolMessage::CommitTransactionForColorStop);
+	}
+
+	/// Close the gradient stop color picker and commit any pending transaction
+	#[wasm_bindgen(js_name = closeGradientStopColorPicker)]
+	pub fn close_gradient_stop_color_picker(&self) {
+		self.dispatch(GradientToolMessage::CloseStopColorPicker);
+	}
+
+	/// Toggle clipping the alpha of a layer to the alpha of the layer below it in the layer stack
+	#[wasm_bindgen(js_name = clipLayer)]
+	pub fn clip_layer(&self, id: u64) {
+		let id = NodeId(id);
+		let message = DocumentMessage::ClipLayer { id };
+		self.dispatch(message);
+	}
+
+	/// Modify the layer selection based on the layer which is clicked while holding down the <kbd>Ctrl</kbd> and/or <kbd>Shift</kbd> modifier keys used for range selection behavior
+	#[wasm_bindgen(js_name = selectLayer)]
+	pub fn select_layer(&self, id: u64, ctrl: bool, shift: bool) {
+		let id = NodeId(id);
+		let message = DocumentMessage::SelectLayer { id, ctrl, shift };
+		self.dispatch(message);
+	}
+
+	/// Deselect all layers
+	#[wasm_bindgen(js_name = deselectAllLayers)]
+	pub fn deselect_all_layers(&self) {
+		let message = DocumentMessage::DeselectAllLayers;
+		self.dispatch(message);
+	}
+
+	/// Move a layer to within a folder and placed down at the given index.
+	/// If the folder is `None`, it is inserted into the document root.
+	/// If the insert index is `None`, it is inserted at the start of the folder.
+	#[wasm_bindgen(js_name = moveLayerInTree)]
+	pub fn move_layer_in_tree(&self, insert_parent_id: Option<u64>, insert_index: Option<usize>) {
+		let insert_parent_id = insert_parent_id.map(NodeId);
+		let parent = insert_parent_id.map(LayerNodeIdentifier::new_unchecked).unwrap_or_default();
+
+		let message = DocumentMessage::MoveSelectedLayersTo {
+			parent,
+			insert_index: insert_index.unwrap_or_default(),
+		};
+		self.dispatch(message);
+	}
+
+	/// Set the name for the layer
+	#[wasm_bindgen(js_name = setLayerName)]
+	pub fn set_layer_name(&self, id: u64, name: String) {
+		let layer = LayerNodeIdentifier::new_unchecked(NodeId(id));
+		let message = NodeGraphMessage::SetDisplayName {
+			node_id: layer.to_node(),
+			alias: name,
+			skip_adding_history_step: false,
+		};
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	#[wasm_bindgen(js_name = panCanvasAbortPrepare)]
+	pub fn pan_canvas_abort_prepare(&self, x_not_y_axis: bool) {
+		let message = NavigationMessage::CanvasPanAbortPrepare { x_not_y_axis };
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = panCanvasAbort)]
+	pub fn pan_canvas_abort(&self, x_not_y_axis: bool) {
+		let message = NavigationMessage::CanvasPanAbort { x_not_y_axis };
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	#[wasm_bindgen(js_name = panCanvas)]
+	pub fn pan_canvas(&self, delta_x: f64, delta_y: f64) {
+		let message = NavigationMessage::CanvasPan { delta: (delta_x, delta_y).into() };
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	#[wasm_bindgen(js_name = panCanvasByFraction)]
+	pub fn pan_canvas_by_fraction(&self, delta_x: f64, delta_y: f64) {
+		let message = NavigationMessage::CanvasPanByViewportFraction { delta: (delta_x, delta_y).into() };
+		self.dispatch(message);
+	}
+
+	/// Merge the selected nodes into a subnetwork
+	#[wasm_bindgen(js_name = mergeSelectedNodes)]
+	pub fn merge_nodes(&self) {
+		let message = NodeGraphMessage::MergeSelectedNodes;
+		self.dispatch(message);
+	}
+
+	/// Toggle lock state of all selected layers
+	#[wasm_bindgen(js_name = toggleSelectedLocked)]
+	pub fn toggle_selected_locked(&self) {
+		let message = NodeGraphMessage::ToggleSelectedLocked;
+		self.dispatch(message);
+	}
+
+	/// Creates a new document node in the node graph
+	#[wasm_bindgen(js_name = createNode)]
+	pub fn create_node(&self, node_type: JsValue, x: i32, y: i32) {
+		let value: serde_json::Value = serde_wasm_bindgen::from_value(node_type).unwrap();
+
+		let id = NodeId::new();
+		let message = NodeGraphMessage::CreateNodeFromContextMenu {
+			node_id: Some(id),
+			node_type: value.into(),
+			xy: Some((x / 24, y / 24)),
+			add_transaction: true,
+		};
+		self.dispatch(message);
+	}
+
+	/// Respond to selection read
+	#[wasm_bindgen(js_name = readSelection)]
+	pub fn read_selection(&self, content: Option<String>, cut: bool) {
+		let message = ClipboardMessage::ReadSelection { content, cut };
+		self.dispatch(message);
+	}
+
+	/// Paste from a serialized JSON representation
+	#[wasm_bindgen(js_name = pasteText)]
+	pub fn paste_text(&self, data: String) {
+		let message = ClipboardMessage::ReadClipboard {
+			content: ClipboardContentRaw::Text(data),
+		};
+		self.dispatch(message);
+	}
+
+	/// Pastes an image
+	#[wasm_bindgen(js_name = pasteImage)]
+	pub fn paste_image(
+		&self,
+		name: Option<String>,
+		image_data: Vec<u8>,
+		width: u32,
+		height: u32,
+		mouse_x: Option<f64>,
+		mouse_y: Option<f64>,
+		insert_parent_id: Option<u64>,
+		insert_index: Option<usize>,
+	) {
+		let mouse = mouse_x.and_then(|x| mouse_y.map(|y| (x, y)));
+		let image = graphene_std::raster::Image::from_image_data(&image_data, width, height);
+
+		let parent_and_insert_index = if let (Some(insert_parent_id), Some(insert_index)) = (insert_parent_id, insert_index) {
+			let insert_parent_id = NodeId(insert_parent_id);
+			let parent = LayerNodeIdentifier::new_unchecked(insert_parent_id);
+			Some((parent, insert_index))
+		} else {
+			None
+		};
+
+		let message = PortfolioMessage::PasteImage {
+			name,
+			image,
+			mouse,
+			parent_and_insert_index,
+		};
+		self.dispatch(message);
+	}
+
+	/// Pastes an SVG given its string representation
+	#[wasm_bindgen(js_name = pasteSvg)]
+	pub fn paste_svg(&self, name: Option<String>, svg: String, mouse_x: Option<f64>, mouse_y: Option<f64>, insert_parent_id: Option<u64>, insert_index: Option<usize>) {
+		let mouse = mouse_x.and_then(|x| mouse_y.map(|y| (x, y)));
+
+		let parent_and_insert_index = if let (Some(insert_parent_id), Some(insert_index)) = (insert_parent_id, insert_index) {
+			let insert_parent_id = NodeId(insert_parent_id);
+			let parent = LayerNodeIdentifier::new_unchecked(insert_parent_id);
+			Some((parent, insert_index))
+		} else {
+			None
+		};
+
+		let message = PortfolioMessage::PasteSvg {
+			name,
+			svg,
+			mouse,
+			parent_and_insert_index,
+		};
+		self.dispatch(message);
+	}
+
+	/// Toggle visibility of a layer or node given its node ID
+	#[wasm_bindgen(js_name = toggleNodeVisibilityLayerPanel)]
+	pub fn toggle_node_visibility_layer(&self, id: u64) {
+		let node_id = NodeId(id);
+		let message = NodeGraphMessage::ToggleVisibility { node_id };
+		self.dispatch(message);
+	}
+
+	/// Pin or unpin a node given its node ID
+	#[wasm_bindgen(js_name = setNodePinned)]
+	pub fn set_node_pinned(&self, id: u64, pinned: bool) {
+		self.dispatch(DocumentMessage::SetNodePinned { node_id: NodeId(id), pinned });
+	}
+
+	/// Delete a layer or node given its node ID
+	#[wasm_bindgen(js_name = deleteNode)]
+	pub fn delete_node(&self, id: u64) {
+		self.dispatch(DocumentMessage::DeleteNode { node_id: NodeId(id) });
+	}
+
+	/// Toggle lock state of a layer from the layer list
+	#[wasm_bindgen(js_name = toggleLayerLock)]
+	pub fn toggle_layer_lock(&self, node_id: u64) {
+		let message = NodeGraphMessage::ToggleLocked { node_id: NodeId(node_id) };
+		self.dispatch(message);
+	}
+
+	/// Toggle expansions state of a layer from the layer list
+	#[wasm_bindgen(js_name = toggleLayerExpansion)]
+	pub fn toggle_layer_expansion(&self, id: u64, recursive: bool) {
+		let id = NodeId(id);
+		let message = DocumentMessage::ToggleLayerExpansion { id, recursive };
+		self.dispatch(message);
+	}
+
+	/// Set the active panel to the most recently clicked panel
+	#[wasm_bindgen(js_name = setActivePanel)]
+	pub fn set_active_panel(&self, panel: String) {
+		let message = PortfolioMessage::SetActivePanel { panel: panel.into() };
+		self.dispatch(message);
+	}
+
+	/// Toggle display type for a layer
+	#[wasm_bindgen(js_name = setToNodeOrLayer)]
+	pub fn set_to_node_or_layer(&self, id: u64, is_layer: bool) {
+		self.dispatch(DocumentMessage::SetToNodeOrLayer { node_id: NodeId(id), is_layer });
+	}
+
+	/// Set the name of an import or export
+	#[wasm_bindgen(js_name = setImportName)]
+	pub fn set_import_name(&self, index: usize, name: String) {
+		let message = NodeGraphMessage::SetImportExportName {
+			name,
+			index: ImportOrExport::Import(index),
+		};
+		self.dispatch(message);
+	}
+
+	/// Set the name of an export
+	#[wasm_bindgen(js_name = setExportName)]
+	pub fn set_export_name(&self, index: usize, name: String) {
+		let message = NodeGraphMessage::SetImportExportName {
+			name,
+			index: ImportOrExport::Export(index),
+		};
+		self.dispatch(message);
+	}
+}
+
+// ====================================================================
+// Static functions callable from JavaScript without an Editor instance
+// ====================================================================
+
+#[wasm_bindgen(js_name = isPlatformNative)]
+pub fn is_platform_native() -> bool {
+	#[cfg(feature = "native")]
+	{
+		true
+	}
+	#[cfg(not(feature = "native"))]
+	{
+		false
+	}
+}
+
+#[wasm_bindgen(js_name = evaluateMathExpression)]
+pub fn evaluate_math_expression(expression: &str) -> Option<f64> {
+	let value = math_parser::evaluate(expression)
+		.inspect_err(|err| error!("Math parser error on \"{expression}\": {err}"))
+		.ok()?
+		.0
+		.inspect_err(|err| error!("Math evaluate error on \"{expression}\": {err} "))
+		.ok()?;
+	let Some(real) = value.as_real() else {
+		error!("{value} was not a real; skipping.");
+		return None;
+	};
+	Some(real)
+}
+
+#[wasm_bindgen(js_name = sampleInterpolatedGradient)]
+pub fn sample_interpolated_gradient(position: Vec<f64>, midpoint: Vec<f64>, color: Vec<JsValue>, omit_alpha: bool) -> String {
+	let color = color.into_iter().filter_map(|c| serde_wasm_bindgen::from_value(c).ok()).collect();
+	GradientStops { position, midpoint, color }
+		.interpolated_samples()
+		.into_iter()
+		.map(|(position, color, _)| {
+			let hex = if omit_alpha { color.to_rgb_hex_srgb_from_gamma() } else { color.to_rgba_hex_srgb_from_gamma() };
+			let percent = ((position * 100.) * 1e2).round() / 1e2;
+			format!("#{hex} {percent}%")
+		})
+		.collect::<Vec<_>>()
+		.join(", ")
+}
+
+#[wasm_bindgen(js_name = evaluateGradientAtPosition)]
+pub fn evaluate_gradient_at_position(t: f64, position: Vec<f64>, midpoint: Vec<f64>, color: Vec<JsValue>) -> JsValue {
+	let color = color.into_iter().filter_map(|c| serde_wasm_bindgen::from_value(c).ok()).collect();
+	let color = GradientStops { position, midpoint, color }.evaluate(t);
+
+	serde_wasm_bindgen::to_value(&color).unwrap()
+}

frontend/wrapper/src/helpers.rs

@@ -0,0 +1,352 @@
+#[cfg(not(feature = "native"))]
+use crate::EDITOR;
+use crate::editor_wrapper::EditorWrapper;
+use crate::{EDITOR_HAS_CRASHED, EDITOR_WRAPPER};
+#[cfg(not(feature = "native"))]
+use editor::application::Editor;
+use editor::messages::input_mapper::utility_types::input_keyboard::Key;
+use editor::messages::prelude::*;
+use graphene_std::raster::Image;
+use graphene_std::raster::color::Color;
+use js_sys::{Object, Reflect};
+use std::sync::atomic::Ordering;
+use std::time::Duration;
+use wasm_bindgen::JsCast;
+use wasm_bindgen::prelude::*;
+use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, ImageData, window};
+
+/// Helper function for calling JS's `requestAnimationFrame` with the given closure
+pub(crate) fn request_animation_frame(f: &Closure<dyn FnMut(f64)>) {
+	web_sys::window()
+		.expect("No global `window` exists")
+		.request_animation_frame(f.as_ref().unchecked_ref())
+		.expect("Failed to call `requestAnimationFrame`");
+}
+
+/// Helper function for calling JS's `setTimeout` with the given closure and delay
+pub(crate) fn set_timeout(f: &Closure<dyn FnMut()>, delay: Duration) {
+	let delay = delay.clamp(Duration::ZERO, Duration::from_millis(i32::MAX as u64)).as_millis() as i32;
+	web_sys::window()
+		.expect("No global `window` exists")
+		.set_timeout_with_callback_and_timeout_and_arguments_0(f.as_ref().unchecked_ref(), delay)
+		.expect("Failed to call `setTimeout`");
+}
+
+/// Provides access to the `Editor` by calling the given closure with it as an argument.
+#[cfg(not(feature = "native"))]
+fn editor<T: Default>(callback: impl FnOnce(&mut editor::application::Editor) -> T) -> T {
+	EDITOR.with(|editor| {
+		let mut guard = editor.try_lock();
+		let Ok(Some(editor)) = guard.as_deref_mut() else {
+			log::error!("Failed to borrow editor");
+			return T::default();
+		};
+
+		callback(editor)
+	})
+}
+
+/// Provides access to the `Editor` and its `EditorWrapper` by calling the given closure with them as arguments.
+#[cfg(not(feature = "native"))]
+pub(crate) fn editor_and_wrapper(callback: impl FnOnce(&mut Editor, &mut EditorWrapper)) {
+	wrapper(|wrapper| {
+		editor(|editor| {
+			// Call the closure with the editor and its wrapper
+			callback(editor, wrapper);
+		})
+	});
+}
+/// Provides access to the `EditorWrapper` by calling the given closure with them as arguments.
+pub(crate) fn wrapper(callback: impl FnOnce(&mut EditorWrapper)) {
+	EDITOR_WRAPPER.with(|wrapper| {
+		let mut guard = wrapper.try_lock();
+		let Ok(Some(wrapper)) = guard.as_deref_mut() else {
+			log::error!("Failed to borrow editor wrapper");
+			return;
+		};
+
+		// Call the closure with the editor and its wrapper
+		callback(wrapper);
+	});
+}
+
+#[cfg(not(feature = "native"))]
+pub(crate) async fn poll_node_graph_evaluation() {
+	// Process no further messages after a crash to avoid spamming the console
+	if EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
+		return;
+	}
+
+	if !editor::node_graph_executor::run_node_graph().await.0 {
+		return;
+	}
+
+	editor_and_wrapper(|editor, wrapper| {
+		let mut messages = VecDeque::new();
+		if let Err(e) = editor.poll_node_graph_evaluation(&mut messages) {
+			// TODO: This is a hacky way to suppress the error, but it shouldn't be generated in the first place
+			if e != "No active document" {
+				error!("Error evaluating node graph:\n{e}");
+			}
+		}
+
+		// Clear the error display if there are no more errors
+		if !messages.is_empty() {
+			crate::NODE_GRAPH_ERROR_DISPLAYED.store(false, Ordering::SeqCst);
+		}
+
+		// Batch responses to pool frontend updates
+		let batched = Message::Batched {
+			messages: messages.into_iter().collect(),
+		};
+		// Send each `FrontendMessage` to the JavaScript frontend
+		for response in editor.handle_message(batched) {
+			wrapper.send_frontend_message_to_js(response);
+		}
+
+		// If the editor cannot be borrowed then it has encountered a panic - we should just ignore new dispatches
+	});
+}
+
+pub(crate) fn auto_save_all_documents() {
+	// Process no further messages after a crash to avoid spamming the console
+	if EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
+		return;
+	}
+
+	wrapper(|wrapper| {
+		wrapper.dispatch(PortfolioMessage::AutoSaveAllDocuments);
+	});
+}
+
+pub(crate) fn render_image_data_to_canvases(image_data: &[(u64, Image<Color>)]) {
+	let window = match window() {
+		Some(window) => window,
+		None => {
+			error!("Cannot render canvas: window object not found");
+			return;
+		}
+	};
+	let document = window.document().expect("window should have a document");
+	let window_obj = Object::from(window);
+	let image_canvases_key = JsValue::from_str("imageCanvases");
+
+	let canvases_obj = match Reflect::get(&window_obj, &image_canvases_key) {
+		Ok(obj) if !obj.is_undefined() && !obj.is_null() => obj,
+		_ => {
+			let new_obj = Object::new();
+			if Reflect::set(&window_obj, &image_canvases_key, &new_obj).is_err() {
+				error!("Failed to create and set imageCanvases object on window");
+				return;
+			}
+			new_obj.into()
+		}
+	};
+	let canvases_obj = Object::from(canvases_obj);
+
+	for (placeholder_id, image) in image_data.iter() {
+		let canvas_name = placeholder_id.to_string();
+		let js_key = JsValue::from_str(&canvas_name);
+
+		if Reflect::has(&canvases_obj, &js_key).unwrap_or(false) || image.width == 0 || image.height == 0 {
+			continue;
+		}
+
+		let canvas: HtmlCanvasElement = document
+			.create_element("canvas")
+			.expect("Failed to create canvas element")
+			.dyn_into::<HtmlCanvasElement>()
+			.expect("Failed to cast element to HtmlCanvasElement");
+
+		canvas.set_width(image.width);
+		canvas.set_height(image.height);
+
+		let context: CanvasRenderingContext2d = canvas
+			.get_context("2d")
+			.expect("Failed to get 2d context")
+			.expect("2d context was not found")
+			.dyn_into::<CanvasRenderingContext2d>()
+			.expect("Failed to cast context to CanvasRenderingContext2d");
+		let u8_data: Vec<u8> = image.data.iter().flat_map(|color| color.to_rgba8_srgb()).collect();
+		let clamped_u8_data = wasm_bindgen::Clamped(&u8_data[..]);
+		match ImageData::new_with_u8_clamped_array_and_sh(clamped_u8_data, image.width, image.height) {
+			Ok(image_data_obj) => {
+				if context.put_image_data(&image_data_obj, 0., 0.).is_err() {
+					error!("Failed to put image data on canvas for id: {placeholder_id}");
+				}
+			}
+			Err(e) => {
+				error!("Failed to create ImageData for id: {placeholder_id}: {e:?}");
+			}
+		}
+
+		let js_value = JsValue::from(canvas);
+
+		if Reflect::set(&canvases_obj, &js_key, &js_value).is_err() {
+			error!("Failed to set canvas '{canvas_name}' on imageCanvases object");
+		}
+	}
+}
+
+pub(crate) fn calculate_hash<T: std::hash::Hash>(t: &T) -> u64 {
+	use std::collections::hash_map::DefaultHasher;
+	use std::hash::Hasher;
+	let mut hasher = DefaultHasher::new();
+	t.hash(&mut hasher);
+	hasher.finish()
+}
+
+/// Translate a keyboard key from its JS name to its Rust `Key` enum
+pub(crate) fn translate_key(name: &str) -> Key {
+	use Key::*;
+
+	trace!("Key event received: {name}");
+
+	match name {
+		// Writing system keys
+		"Digit0" | "Numpad0" => Digit0,
+		"Digit1" | "Numpad1" => Digit1,
+		"Digit2" | "Numpad2" => Digit2,
+		"Digit3" | "Numpad3" => Digit3,
+		"Digit4" | "Numpad4" => Digit4,
+		"Digit5" | "Numpad5" => Digit5,
+		"Digit6" | "Numpad6" => Digit6,
+		"Digit7" | "Numpad7" => Digit7,
+		"Digit8" | "Numpad8" => Digit8,
+		"Digit9" | "Numpad9" => Digit9,
+		//
+		"KeyA" => KeyA,
+		"KeyB" => KeyB,
+		"KeyC" => KeyC,
+		"KeyD" => KeyD,
+		"KeyE" => KeyE,
+		"KeyF" => KeyF,
+		"KeyG" => KeyG,
+		"KeyH" => KeyH,
+		"KeyI" => KeyI,
+		"KeyJ" => KeyJ,
+		"KeyK" => KeyK,
+		"KeyL" => KeyL,
+		"KeyM" => KeyM,
+		"KeyN" => KeyN,
+		"KeyO" => KeyO,
+		"KeyP" => KeyP,
+		"KeyQ" => KeyQ,
+		"KeyR" => KeyR,
+		"KeyS" => KeyS,
+		"KeyT" => KeyT,
+		"KeyU" => KeyU,
+		"KeyV" => KeyV,
+		"KeyW" => KeyW,
+		"KeyX" => KeyX,
+		"KeyY" => KeyY,
+		"KeyZ" => KeyZ,
+		//
+		"Backquote" => Backquote,
+		"Backslash" => Backslash,
+		"BracketLeft" => BracketLeft,
+		"BracketRight" => BracketRight,
+		"Comma" | "NumpadComma" => Comma,
+		"Equal" | "NumpadEqual" => Equal,
+		"Minus" | "NumpadSubtract" => Minus,
+		"Period" | "NumpadDecimal" => Period,
+		"Quote" => Quote,
+		"Semicolon" => Semicolon,
+		"Slash" | "NumpadDivide" => Slash,
+
+		// Functional keys
+		"AltLeft" | "AltRight" | "AltGraph" => Alt,
+		"MetaLeft" | "MetaRight" => Meta,
+		"ShiftLeft" | "ShiftRight" => Shift,
+		"ControlLeft" | "ControlRight" => Control,
+		"Backspace" | "NumpadBackspace" => Backspace,
+		"CapsLock" => CapsLock,
+		"ContextMenu" => ContextMenu,
+		"Enter" | "NumpadEnter" => Enter,
+		"Space" => Space,
+		"Tab" => Tab,
+
+		// Control pad keys
+		"Delete" => Delete,
+		"End" => End,
+		"Help" => Help,
+		"Home" => Home,
+		"Insert" => Insert,
+		"PageDown" => PageDown,
+		"PageUp" => PageUp,
+
+		// Arrow pad keys
+		"ArrowDown" => ArrowDown,
+		"ArrowLeft" => ArrowLeft,
+		"ArrowRight" => ArrowRight,
+		"ArrowUp" => ArrowUp,
+
+		// Numpad keys
+		// "Numpad0" => KeyNumpad0,
+		// "Numpad1" => KeyNumpad1,
+		// "Numpad2" => KeyNumpad2,
+		// "Numpad3" => KeyNumpad3,
+		// "Numpad4" => KeyNumpad4,
+		// "Numpad5" => KeyNumpad5,
+		// "Numpad6" => KeyNumpad6,
+		// "Numpad7" => KeyNumpad7,
+		// "Numpad8" => KeyNumpad8,
+		// "Numpad9" => KeyNumpad9,
+		"NumLock" => NumLock,
+		"NumpadAdd" => NumpadAdd,
+		// "NumpadBackspace" => KeyNumpadBackspace,
+		// "NumpadClear" => NumpadClear,
+		// "NumpadClearEntry" => NumpadClearEntry,
+		// "NumpadComma" => KeyNumpadComma,
+		// "NumpadDecimal" => KeyNumpadDecimal,
+		// "NumpadDivide" => KeyNumpadDivide,
+		// "NumpadEnter" => KeyNumpadEnter,
+		// "NumpadEqual" => KeyNumpadEqual,
+		"NumpadHash" => NumpadHash,
+		// "NumpadMemoryAdd" => NumpadMemoryAdd,
+		// "NumpadMemoryClear" => NumpadMemoryClear,
+		// "NumpadMemoryRecall" => NumpadMemoryRecall,
+		// "NumpadMemoryStore" => NumpadMemoryStore,
+		// "NumpadMemorySubtract" => NumpadMemorySubtract,
+		"NumpadMultiply" | "NumpadStar" => NumpadMultiply,
+		"NumpadParenLeft" => NumpadParenLeft,
+		"NumpadParenRight" => NumpadParenRight,
+		// "NumpadStar" => NumpadStar,
+		// "NumpadSubtract" => KeyNumpadSubtract,
+
+		// Function keys
+		"Escape" => Escape,
+		"F1" => F1,
+		"F2" => F2,
+		"F3" => F3,
+		"F4" => F4,
+		"F5" => F5,
+		"F6" => F6,
+		"F7" => F7,
+		"F8" => F8,
+		"F9" => F9,
+		"F10" => F10,
+		"F11" => F11,
+		"F12" => F12,
+		"F13" => F13,
+		"F14" => F14,
+		"F15" => F15,
+		"F16" => F16,
+		"F17" => F17,
+		"F18" => F18,
+		"F19" => F19,
+		"F20" => F20,
+		"F21" => F21,
+		"F22" => F22,
+		"F23" => F23,
+		"F24" => F24,
+		"Fn" => Fn,
+		"FnLock" => FnLock,
+		"PrintScreen" => PrintScreen,
+		"ScrollLock" => ScrollLock,
+		"Pause" => Pause,
+
+		// Unidentified keys
+		_ => Unidentified,
+	}
+}

frontend/wrapper/src/lib.rs

@@ -0,0 +1,203 @@
+#![doc = include_str!("../README.md")]
+
+// `macro_use` puts the log macros (`error!`, `warn!`, `debug!`, `info!` and `trace!`) in scope for the crate
+#[macro_use]
+extern crate log;
+
+pub mod editor_wrapper;
+pub mod helpers;
+pub mod native_communication;
+
+use crate::helpers::wrapper;
+use editor::messages::prelude::*;
+use std::panic;
+use std::sync::Mutex;
+use std::sync::atomic::{AtomicBool, Ordering};
+use wasm_bindgen::prelude::*;
+
+// Set up the persistent editor backend state
+pub static EDITOR_HAS_CRASHED: AtomicBool = AtomicBool::new(false);
+pub static FRONTEND_READY: AtomicBool = AtomicBool::new(false);
+pub static NODE_GRAPH_ERROR_DISPLAYED: AtomicBool = AtomicBool::new(false);
+pub static LOGGER: WasmLog = WasmLog;
+
+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_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) };
+}
+
+/// Initialize the backend
+#[wasm_bindgen(start)]
+pub fn init_graphite() {
+	// Set up the panic hook
+	panic::set_hook(Box::new(panic_hook));
+
+	// Set up the logger with a default level of debug
+	log::set_logger(&LOGGER).expect("Failed to set logger");
+	log::set_max_level(log::LevelFilter::Debug);
+}
+
+/// When a panic occurs, notify the user and log the error to the JS console before the backend dies
+pub fn panic_hook(info: &panic::PanicHookInfo) {
+	let info = info.to_string();
+	let backtrace = Error::new("stack").stack().to_string();
+	if backtrace.contains("DynAnyNode") {
+		log::error!("Node graph evaluation panicked {info}");
+
+		// When the graph panics, the node runtime lock may not be released properly
+		if editor::node_graph_executor::NODE_RUNTIME.try_lock().is_none() {
+			unsafe { editor::node_graph_executor::NODE_RUNTIME.force_unlock() };
+		}
+
+		if !NODE_GRAPH_ERROR_DISPLAYED.load(Ordering::SeqCst) {
+			NODE_GRAPH_ERROR_DISPLAYED.store(true, Ordering::SeqCst);
+			wrapper(|wrapper| {
+				let error = r#"
+				<rect x="50%" y="50%" width="600" height="100" transform="translate(-300 -50)" rx="4" fill="var(--color-error-red)" />
+				<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="18" fill="var(--color-2-mildblack)">
+					<tspan x="50%" dy="-24" font-weight="bold">The document crashed while being rendered in its current state.</tspan>
+					<tspan x="50%" dy="24">The editor is now unstable! Undo your last action to restore the artwork,</tspan>
+					<tspan x="50%" dy="24">then save your document and restart the editor before continuing work.</tspan>
+				/text>"#
+				// It's a mystery why the `/text>` tag above needs to be missing its `<`, but when it exists it prints the `<` character in the text. However this works with it removed.
+				.to_string();
+				wrapper.send_frontend_message_to_js_rust_proxy(FrontendMessage::UpdateDocumentArtwork { svg: error });
+			});
+		}
+
+		return;
+	} else {
+		EDITOR_HAS_CRASHED.store(true, Ordering::SeqCst);
+	}
+
+	log::error!("{info}");
+
+	// Prefer using the raw JS callback to avoid mutex lock contention inside the panic hook.
+	if let Err(info) = send_panic_dialog_via_callback(info) {
+		send_panic_dialog_deferred(info);
+	}
+}
+
+fn send_panic_dialog_via_callback(panic_info: String) -> Result<(), String> {
+	let message = FrontendMessage::DisplayDialogPanic { panic_info };
+	let message_type = message.to_discriminant().local_name();
+	let Ok(message_data) = serde_wasm_bindgen::to_value(&message) else {
+		log::error!("Failed to serialize crash dialog panic message");
+		let FrontendMessage::DisplayDialogPanic { panic_info } = message else {
+			unreachable!("Message variant changed unexpectedly")
+		};
+		return Err(panic_info);
+	};
+
+	PANIC_DIALOG_MESSAGE_CALLBACK.with(|callback| {
+		let callback_ref = callback.borrow();
+		let Some(callback) = callback_ref.as_ref() else {
+			let FrontendMessage::DisplayDialogPanic { panic_info } = message else {
+				unreachable!("Message variant changed unexpectedly")
+			};
+			return Err(panic_info);
+		};
+
+		if let Err(error) = callback.call2(&JsValue::null(), &JsValue::from(message_type), &message_data) {
+			log::error!("Failed to send crash dialog panic message to JS: {:?}", error);
+			let FrontendMessage::DisplayDialogPanic { panic_info } = message else {
+				unreachable!("Message variant changed unexpectedly")
+			};
+			return Err(panic_info);
+		}
+
+		Ok(())
+	})
+}
+
+#[cfg(not(feature = "native"))]
+fn send_panic_dialog_deferred(panic_info: String) {
+	let callback = Closure::once_into_js(move || {
+		if send_panic_dialog_via_callback(panic_info).is_err() {
+			log::error!("Failed to send crash dialog after panic because the editor wrapper is unavailable");
+		}
+	});
+
+	let Some(window) = web_sys::window() else {
+		log::error!("Failed to schedule crash dialog after panic because no window exists");
+		return;
+	};
+
+	if window.set_timeout_with_callback_and_timeout_and_arguments_0(callback.unchecked_ref(), 0).is_err() {
+		log::error!("Failed to schedule crash dialog after panic with setTimeout");
+	}
+}
+
+#[cfg(feature = "native")]
+fn send_panic_dialog_deferred(_panic_info: String) {
+	// Native builds do not use `setTimeout`, so just log the failure in the caller's context.
+}
+
+#[wasm_bindgen]
+extern "C" {
+	/// The JavaScript `Error` type
+	#[derive(Clone, Debug)]
+	pub type Error;
+
+	#[wasm_bindgen(constructor)]
+	pub fn new(msg: &str) -> Error;
+
+	#[wasm_bindgen(structural, method, getter)]
+	fn stack(error: &Error) -> String;
+}
+
+/// Logging to the JS console
+#[wasm_bindgen]
+extern "C" {
+	#[wasm_bindgen(js_namespace = console)]
+	fn log(msg: &str, format: &str);
+	#[wasm_bindgen(js_namespace = console)]
+	fn info(msg: &str, format: &str);
+	#[wasm_bindgen(js_namespace = console)]
+	fn warn(msg: &str, format: &str);
+	#[wasm_bindgen(js_namespace = console)]
+	fn error(msg: &str, format: &str);
+	#[wasm_bindgen(js_namespace = console)]
+	fn trace(msg: &str, format: &str);
+}
+
+#[derive(Default)]
+pub struct WasmLog;
+
+impl log::Log for WasmLog {
+	#[inline]
+	fn enabled(&self, metadata: &log::Metadata) -> bool {
+		metadata.level() <= log::max_level()
+	}
+
+	fn log(&self, record: &log::Record) {
+		if !self.enabled(record.metadata()) {
+			return;
+		}
+
+		let (log, name, color): (fn(&str, &str), &str, &str) = match record.level() {
+			log::Level::Trace => (log, "trace", "color:plum"),
+			log::Level::Debug => (log, "debug", "color:cyan"),
+			log::Level::Warn => (warn, "warn", "color:goldenrod"),
+			log::Level::Info => (info, "info", "color:mediumseagreen"),
+			log::Level::Error => (error, "error", "color:red"),
+		};
+
+		// The %c is replaced by the message color
+		if record.level() == log::Level::Info {
+			// We don't print the file name and line number for info-level logs because it's used for printing the message system logs
+			log(&format!("%c{}\t{}", name, record.args()), color);
+		} else {
+			let file = record.file().unwrap_or_else(|| record.target());
+			let line = record.line().map_or_else(|| "[Unknown]".to_string(), |line| line.to_string());
+			let args = record.args();
+
+			log(&format!("%c{name}\t{file}:{line}\n{args}"), color);
+		}
+	}
+
+	fn flush(&self) {}
+}

frontend/wrapper/src/native_communication.rs

@@ -0,0 +1,46 @@
+use crate::editor_wrapper::EditorWrapper;
+use crate::helpers::wrapper;
+use editor::messages::prelude::FrontendMessage;
+use js_sys::{ArrayBuffer, Uint8Array};
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen(js_name = "receiveNativeMessage")]
+pub fn receive_native_message(buffer: ArrayBuffer) {
+	let buffer = Uint8Array::new(buffer.as_ref()).to_vec();
+	match ron::from_str::<Vec<FrontendMessage>>(str::from_utf8(buffer.as_slice()).unwrap()) {
+		Ok(messages) => {
+			let callback = move |wrapper: &mut EditorWrapper| {
+				for message in messages {
+					wrapper.send_frontend_message_to_js_rust_proxy(message);
+				}
+			};
+			wrapper(callback);
+		}
+		Err(e) => log::error!("Failed to deserialize frontend messages: {e:?}"),
+	}
+}
+
+pub fn initialize_native_communication() {
+	let global = js_sys::global();
+
+	// Get the function by name
+	let func = js_sys::Reflect::get(&global, &JsValue::from_str("initializeNativeCommunication")).expect("Function not found");
+	let func = func.dyn_into::<js_sys::Function>().expect("Not a function");
+
+	// Call it
+	func.call0(&JsValue::NULL).expect("Function call failed");
+}
+
+pub fn send_message_to_cef(message: String) {
+	let global = js_sys::global();
+
+	// Get the function by name
+	let func = js_sys::Reflect::get(&global, &JsValue::from_str("sendNativeMessage")).expect("Function not found");
+
+	let func = func.dyn_into::<js_sys::Function>().expect("Not a function");
+	let array = Uint8Array::from(message.as_bytes());
+	let buffer = array.buffer();
+
+	// Call it with argument
+	func.call1(&JsValue::NULL, &JsValue::from(buffer)).expect("Function call failed");
+}