Port frontend from Vue to Svelte (WIP in separate folder, many bugs) (#964)

* Make `tauri build` just work * Move folder: frontend/wasm -> wasm * Create SvelteKit project with 'npx create-svelte' * Move wasm-communication into seperate npm package * Use wasm-pack directly and pack package.json * Got it to work * Add primitive build script for wasm npm module * Fix wasm build script (python) * Clean up glue code * Rewrite wasm build script in node.js * Add serde-reflection to trace types * Add traced types * Generate typescript (.d.ts) from Rust types * Update .d.ts * Finalize TS types * Add script to update .d.ts * Add watch command to build wasm-bindgen * Make wasm work again * Add sass; fix build script for windows * Describe requirement for wasm-pack * Add license * Copy and reorganize vue components * translate LayoutCol.vue * Split app.scss into pieces * Translate LayoutRow.svelte * Rename scss files * Fix compile issues on Windows * WIP port TitleBar * Support classes for LayoutCol/Row * Restructure based on Vue codebase * Port all components in window folder * Port FloatingMenu * Port Document panel component * Update readme after folder move * Update typegen: print discriminant by default * Update typegen: Merge from branch 'tailwind' 4f14fedb Fixes bigint & bytes * Made Vue/webpack/eslint to accept wasm package at new location This is quite a hack. Those two packages are both named the same. Yes, it's an npm package inside another npm package. - frontend/src/wasm-communication/ - frontend-svelte/glue/ 'wasm/pkg/index.js' imports the correct one registered when linking. * Port LayerTree * Port NodeGraph * Port Properties * Port components in /floating-menus * Finish porting all Vue -> Svelte components * Change import prefix * Revert type generation * Revert moved wasm folder * Revert all of @locriacyber's work on this branch - Remove Vite and restore Webpack - Remove SvelteKit - Remove everything except the components I ported to Svelte - Restore all frontend files from Vue code, now altered for Svelte * Convert Vue's 'reactive' and 'provide' to Svelte's stores and contexts * Fix event emitting and bi-di data flow * Undo removal of 'update:' events * Fix 'update:' event dispatching * Fix usage in parent of bi-di component props * Fix component typing, more progress towards no errors * The page builds and opens! * Add loading spinner and remove postcss dependency * Make the basics of document editing work * Fix rebase history Co-authored-by: Locria Cyber <74560659+locriacyber@users.noreply.github.com>
2026-09-27 04:28:12 +08:00 · 2023-01-13 01:05:20 -08:00
parent 2f7c45771e
commit dcc3eadf44
239 changed files with 27757 additions and 13 deletions
@@ -0,0 +1,697 @@
+//! 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.
+
+use crate::helpers::{translate_key, Error};
+use crate::{EDITOR_HAS_CRASHED, EDITOR_INSTANCES, JS_EDITOR_HANDLES};
+
+use document_legacy::color::Color;
+use document_legacy::LayerId;
+use editor::application::generate_uuid;
+use editor::application::Editor;
+use editor::consts::{FILE_SAVE_SUFFIX, GRAPHITE_DOCUMENT_VERSION};
+use editor::messages::input_mapper::utility_types::input_keyboard::ModifierKeys;
+use editor::messages::input_mapper::utility_types::input_mouse::{EditorMouseState, ScrollDelta, ViewportBounds};
+use editor::messages::portfolio::utility_types::{ImaginateServerStatus, Platform};
+use editor::messages::prelude::*;
+use graph_craft::document::NodeId;
+
+use serde::Serialize;
+use serde_wasm_bindgen::{self, from_value};
+use std::sync::atomic::Ordering;
+use wasm_bindgen::prelude::*;
+
+/// Set the random seed used by the editor by calling this from JS upon initialization.
+/// This is necessary because WASM doesn't have a random number generator.
+#[wasm_bindgen(js_name = setRandomSeed)]
+pub fn set_random_seed(seed: u64) {
+	editor::application::set_uuid_seed(seed);
+}
+
+/// We directly interface with the updateImage JS function for massively increased performance over serializing and deserializing.
+/// This avoids creating a json with a list millions of numbers long.
+#[wasm_bindgen(module = "@/wasm-communication/editor")]
+extern "C" {
+	fn updateImage(path: Vec<u64>, mime: String, imageData: &[u8], document_id: u64);
+	fn fetchImage(path: Vec<u64>, mime: String, document_id: u64, identifier: String);
+	//fn dispatchTauri(message: String) -> String;
+	fn dispatchTauri(message: String);
+}
+
+/// Provides a handle to access the raw WASM memory
+#[wasm_bindgen(js_name = wasmMemory)]
+pub fn wasm_memory() -> JsValue {
+	wasm_bindgen::memory()
+}
+
+// To avoid wasm-bindgen from checking mutable reference issues using WasmRefCell we must make all methods take a non mutable reference to self.
+// Not doing this creates an issue when rust calls into JS which calls back to rust in the same call stack.
+#[wasm_bindgen]
+#[derive(Clone)]
+pub struct JsEditorHandle {
+	editor_id: u64,
+	frontend_message_handler_callback: js_sys::Function,
+}
+
+#[wasm_bindgen]
+#[allow(clippy::too_many_arguments)]
+impl JsEditorHandle {
+	#[wasm_bindgen(constructor)]
+	pub fn new(frontend_message_handler_callback: js_sys::Function) -> Self {
+		let editor_id = generate_uuid();
+		let editor = Editor::new();
+		let editor_handle = JsEditorHandle {
+			editor_id,
+			frontend_message_handler_callback,
+		};
+		EDITOR_INSTANCES.with(|instances| instances.borrow_mut().insert(editor_id, editor));
+		JS_EDITOR_HANDLES.with(|instances| instances.borrow_mut().insert(editor_id, editor_handle.clone()));
+		editor_handle
+	}
+
+	// Sends a message to the dispatcher in the Editor Backend
+	fn dispatch<T: Into<Message>>(&self, message: T) {
+		// Process no further messages after a crash to avoid spamming the console
+		if EDITOR_HAS_CRASHED.load(Ordering::SeqCst) {
+			return;
+		}
+
+		#[cfg(feature = "tauri")]
+		{
+			let message: Message = message.into();
+			let message = ron::to_string(&message).unwrap();
+
+			dispatchTauri(message);
+		}
+		#[cfg(not(feature = "tauri"))]
+		{
+			// Get the editor instances, dispatch the message, and store the `FrontendMessage` queue response
+			let frontend_messages = EDITOR_INSTANCES.with(|instances| {
+				// Mutably borrow the editors, and if successful, we can access them in the closure
+				instances.try_borrow_mut().map(|mut editors| {
+					// Get the editor instance for this editor ID, then dispatch the message to the backend, and return its response `FrontendMessage` queue
+					editors
+						.get_mut(&self.editor_id)
+						.expect("EDITOR_INSTANCES does not contain the current editor_id")
+						.handle_message(message.into())
+				})
+			});
+
+			// Process any `FrontendMessage` responses resulting from the backend processing the dispatched message
+			if let Ok(frontend_messages) = frontend_messages {
+				// Send each `FrontendMessage` to the JavaScript frontend
+				for message in frontend_messages.into_iter() {
+					self.send_frontend_message_to_js(message);
+				}
+			}
+		}
+		// If the editor cannot be borrowed then it has encountered a panic - we should just ignore new dispatches
+	}
+
+	// Sends a FrontendMessage to JavaScript
+	fn send_frontend_message_to_js(&self, mut message: FrontendMessage) {
+		// Special case for update image data to avoid serialization times.
+		if let FrontendMessage::UpdateImageData { document_id, image_data } = message {
+			for image in image_data {
+				#[cfg(not(feature = "tauri"))]
+				updateImage(image.path, image.mime, &image.image_data, document_id);
+				#[cfg(feature = "tauri")]
+				fetchImage(image.path.clone(), image.mime, document_id, format!("http://localhost:3001/image/{:?}_{}", &image.path, document_id));
+			}
+			return;
+		}
+		if let FrontendMessage::UpdateDocumentLayerTreeStructure { data_buffer } = message {
+			message = FrontendMessage::UpdateDocumentLayerTreeStructureJs { data_buffer: data_buffer.into() };
+		}
+
+		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: {:?}",
+				message.to_discriminant().local_name(),
+				error,
+			)
+		}
+	}
+
+	// ========================================================================
+	// Add additional JS -> Rust wrapper functions below as needed for calling
+	// the backend from the web frontend.
+	// ========================================================================
+
+	#[wasm_bindgen(js_name = initAfterFrontendReady)]
+	pub fn init_after_frontend_ready(&self, platform: String) {
+		let platform = match platform.as_str() {
+			"Windows" => Platform::Windows,
+			"Mac" => Platform::Mac,
+			"Linux" => Platform::Linux,
+			_ => Platform::Unknown,
+		};
+
+		self.dispatch(GlobalsMessage::SetPlatform { platform });
+		self.dispatch(Message::Init);
+	}
+
+	#[wasm_bindgen(js_name = tauriResponse)]
+	pub fn tauri_response(&self, _message: JsValue) {
+		#[cfg(feature = "tauri")]
+		match ron::from_str::<Vec<FrontendMessage>>(&_message.as_string().unwrap()) {
+			Ok(response) => {
+				for message in response {
+					self.send_frontend_message_to_js(message);
+				}
+			}
+			Err(error) => {
+				log::error!("tauri response: {:?}\n{:?}", error, _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_SAVE_SUFFIX`
+	#[wasm_bindgen(js_name = fileSaveSuffix)]
+	pub fn file_save_suffix(&self) -> String {
+		FILE_SAVE_SUFFIX.into()
+	}
+
+	/// Get the constant `GRAPHITE_DOCUMENT_VERSION`
+	#[wasm_bindgen(js_name = graphiteDocumentVersion)]
+	pub fn graphite_document_version(&self) -> String {
+		GRAPHITE_DOCUMENT_VERSION.to_string()
+	}
+
+	/// Update layout of a given UI
+	#[wasm_bindgen(js_name = updateLayout)]
+	pub fn update_layout(&self, layout_target: JsValue, widget_id: u64, value: JsValue) -> Result<(), JsValue> {
+		match (from_value(layout_target), from_value(value)) {
+			(Ok(layout_target), Ok(value)) => {
+				let message = LayoutMessage::UpdateLayout { layout_target, widget_id, value };
+				self.dispatch(message);
+				Ok(())
+			}
+			(target, val) => Err(Error::new(&format!("Could not update UI\nDetails:\nTarget: {:?}\nValue: {:?}", target, val)).into()),
+		}
+	}
+
+	#[wasm_bindgen(js_name = loadPreferences)]
+	pub fn load_preferences(&self, preferences: String) {
+		let message = PreferencesMessage::Load { preferences };
+
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = selectDocument)]
+	pub fn select_document(&self, document_id: u64) {
+		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 = documentOpen)]
+	pub fn document_open(&self) {
+		let message = PortfolioMessage::OpenDocument;
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = openDocumentFile)]
+	pub fn open_document_file(&self, document_name: String, document_serialized_content: String) {
+		let message = PortfolioMessage::OpenDocumentFile {
+			document_name,
+			document_serialized_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) {
+		let message = PortfolioMessage::OpenDocumentFileWithId {
+			document_id,
+			document_name,
+			document_is_auto_saved: true,
+			document_is_saved,
+			document_serialized_content,
+		};
+		self.dispatch(message);
+	}
+
+	#[wasm_bindgen(js_name = triggerAutoSave)]
+	pub fn trigger_auto_save(&self, document_id: u64) {
+		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 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) {
+		let message = DialogMessage::RequestAboutGraphiteDialogWithLocalizedCommitDate { localized_commit_date };
+		self.dispatch(message);
+	}
+
+	/// Send new bounds when document panel viewports get resized or moved within the editor
+	/// [left, top, right, bottom]...
+	#[wasm_bindgen(js_name = boundsOfViewports)]
+	pub fn bounds_of_viewports(&self, bounds_of_viewports: &[f64]) {
+		let chunked: Vec<_> = bounds_of_viewports.chunks(4).map(ViewportBounds::from_slice).collect();
+
+		let message = InputPreprocessorMessage::BoundsOfViewports { bounds_of_viewports: chunked };
+		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: i32, wheel_delta_y: i32, wheel_delta_z: i32, 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 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) {
+		let key = translate_key(&name);
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		trace!("Key down {:?}, name: {}, modifiers: {:?}", key, name, modifiers);
+
+		let message = InputPreprocessorMessage::KeyDown { key, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A keyboard button released
+	#[wasm_bindgen(js_name = onKeyUp)]
+	pub fn on_key_up(&self, name: String, modifiers: u8) {
+		let key = translate_key(&name);
+		let modifier_keys = ModifierKeys::from_bits(modifiers).expect("Invalid modifier keys");
+
+		trace!("Key up {:?}, name: {}, modifiers: {:?}", key, name, modifier_keys);
+
+		let message = InputPreprocessorMessage::KeyUp { key, modifier_keys };
+		self.dispatch(message);
+	}
+
+	/// A text box was committed
+	#[wasm_bindgen(js_name = onChangeText)]
+	pub fn on_change_text(&self, new_text: String) -> Result<(), JsValue> {
+		let message = TextToolMessage::TextChange { new_text };
+		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, preview_url: String, data: Vec<u8>, is_default: bool) -> Result<(), JsValue> {
+		let message = PortfolioMessage::FontLoaded {
+			font_family,
+			font_style,
+			preview_url,
+			data,
+			is_default,
+		};
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// 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(())
+	}
+
+	/// Begin sampling a pixel color from the document by entering eyedropper sampling mode
+	#[wasm_bindgen(js_name = eyedropperSampleForColorPicker)]
+	pub fn eyedropper_sample_for_color_picker(&self) -> Result<(), JsValue> {
+		let message = DialogMessage::RequestComingSoonDialog { issue: Some(832) };
+		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 primary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
+			Some(color) => color,
+			None => return Err(Error::new("Invalid color").into()),
+		};
+
+		let message = ToolMessage::SelectPrimaryColor { color: primary_color };
+		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 secondary_color = match Color::from_rgbaf32(red, green, blue, alpha) {
+			Some(color) => color,
+			None => return Err(Error::new("Invalid color").into()),
+		};
+
+		let message = ToolMessage::SelectSecondaryColor { color: secondary_color };
+		self.dispatch(message);
+
+		Ok(())
+	}
+
+	/// Paste layers from a serialized json representation
+	#[wasm_bindgen(js_name = pasteSerializedData)]
+	pub fn paste_serialized_data(&self, data: String) {
+		let message = PortfolioMessage::PasteSerializedData { data };
+		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, layer_path: Vec<LayerId>, ctrl: bool, shift: bool) {
+		let message = DocumentMessage::SelectLayer { layer_path, 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 be next to the specified neighbor
+	#[wasm_bindgen(js_name = moveLayerInTree)]
+	pub fn move_layer_in_tree(&self, folder_path: Vec<LayerId>, insert_index: isize) {
+		let message = DocumentMessage::MoveSelectedLayersTo {
+			folder_path,
+			insert_index,
+			reverse_index: true,
+		};
+		self.dispatch(message);
+	}
+
+	/// Set the name for the layer
+	#[wasm_bindgen(js_name = setLayerName)]
+	pub fn set_layer_name(&self, layer_path: Vec<LayerId>, name: String) {
+		let message = DocumentMessage::SetLayerName { layer_path, name };
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	#[wasm_bindgen(js_name = translateCanvas)]
+	pub fn translate_canvas(&self, delta_x: f64, delta_y: f64) {
+		let message = NavigationMessage::TranslateCanvas { delta: (delta_x, delta_y).into() };
+		self.dispatch(message);
+	}
+
+	/// Translates document (in viewport coords)
+	#[wasm_bindgen(js_name = translateCanvasByFraction)]
+	pub fn translate_canvas_by_fraction(&self, delta_x: f64, delta_y: f64) {
+		let message = NavigationMessage::TranslateCanvasByViewportFraction { delta: (delta_x, delta_y).into() };
+		self.dispatch(message);
+	}
+
+	/// Sends the blob URL generated by JS to the Image layer
+	#[wasm_bindgen(js_name = setImageBlobURL)]
+	pub fn set_image_blob_url(&self, document_id: u64, layer_path: Vec<LayerId>, blob_url: String, width: f64, height: f64) {
+		let resolution = (width, height);
+		let message = PortfolioMessage::SetImageBlobUrl {
+			document_id,
+			layer_path,
+			blob_url,
+			resolution,
+		};
+		self.dispatch(message);
+	}
+
+	/// Sends the blob URL generated by JS to the Imaginate layer in the respective document
+	#[wasm_bindgen(js_name = setImaginateImageData)]
+	pub fn set_imaginate_image_data(&self, document_id: u64, layer_path: Vec<LayerId>, node_path: Vec<NodeId>, image_data: Vec<u8>, width: u32, height: u32) {
+		let message = PortfolioMessage::ImaginateSetImageData {
+			document_id,
+			node_path,
+			layer_path,
+			image_data,
+			width,
+			height,
+		};
+		self.dispatch(message);
+	}
+
+	/// Notifies the Imaginate layer of a new percentage of completion and whether or not it's currently generating
+	#[wasm_bindgen(js_name = setImaginateGeneratingStatus)]
+	pub fn set_imaginate_generating_status(&self, document_id: u64, layer_path: Vec<LayerId>, node_path: Vec<NodeId>, percent: Option<f64>, status: String) {
+		use graph_craft::imaginate_input::ImaginateStatus;
+
+		let status = match status.as_str() {
+			"Idle" => ImaginateStatus::Idle,
+			"Beginning" => ImaginateStatus::Beginning,
+			"Uploading" => ImaginateStatus::Uploading(percent.expect("Percent needs to be supplied to set ImaginateStatus::Uploading")),
+			"Generating" => ImaginateStatus::Generating,
+			"Terminating" => ImaginateStatus::Terminating,
+			"Terminated" => ImaginateStatus::Terminated,
+			_ => panic!("Invalid string from JS for ImaginateStatus, received: {}", status),
+		};
+
+		let percent = if matches!(status, ImaginateStatus::Uploading(_)) { None } else { percent };
+
+		let message = PortfolioMessage::ImaginateSetGeneratingStatus {
+			document_id,
+			layer_path,
+			node_path,
+			percent,
+			status,
+		};
+		self.dispatch(message);
+	}
+
+	/// Notifies the editor that the Imaginate server is available or unavailable
+	#[wasm_bindgen(js_name = setImaginateServerStatus)]
+	pub fn set_imaginate_server_status(&self, available: bool) {
+		let message: Message = match available {
+			true => PortfolioMessage::ImaginateSetServerStatus {
+				status: ImaginateServerStatus::Connected,
+			}
+			.into(),
+			false => PortfolioMessage::ImaginateSetServerStatus {
+				status: ImaginateServerStatus::Unavailable,
+			}
+			.into(),
+		};
+		self.dispatch(message);
+	}
+
+	/// Sends the blob URL generated by JS to the Imaginate layer in the respective document
+	#[wasm_bindgen(js_name = processNodeGraphFrame)]
+	pub fn process_node_graph_frame(&self, document_id: u64, layer_path: Vec<LayerId>, image_data: Vec<u8>, width: u32, height: u32, imaginate_node: Option<Vec<NodeId>>) {
+		let message = PortfolioMessage::ProcessNodeGraphFrame {
+			document_id,
+			layer_path,
+			image_data,
+			size: (width, height),
+			imaginate_node,
+		};
+		self.dispatch(message);
+	}
+
+	/// Notifies the backend that the user connected a node's primary output to one of another node's inputs
+	#[wasm_bindgen(js_name = connectNodesByLink)]
+	pub fn connect_nodes_by_link(&self, output_node: u64, input_node: u64, input_node_connector_index: usize) {
+		let message = NodeGraphMessage::ConnectNodesByLink {
+			output_node,
+			input_node,
+			input_node_connector_index,
+		};
+		self.dispatch(message);
+	}
+
+	/// Shifts the node and its children to stop nodes going ontop of each other
+	#[wasm_bindgen(js_name = shiftNode)]
+	pub fn shift_node(&self, node_id: u64) {
+		let message = NodeGraphMessage::ShiftNode { node_id };
+		self.dispatch(message);
+	}
+
+	/// Notifies the backend that the user disconnected a node
+	#[wasm_bindgen(js_name = disconnectNodes)]
+	pub fn disconnect_nodes(&self, node_id: u64, input_index: usize) {
+		let message = NodeGraphMessage::DisconnectNodes { node_id, input_index };
+		self.dispatch(message);
+	}
+
+	/// Check for intersections between the curve and a rectangle defined by opposite corners
+	#[wasm_bindgen(js_name = rectangleIntersects)]
+	pub fn rectangle_intersects(&self, bezier_x: Vec<f64>, bezier_y: Vec<f64>, top: f64, left: f64, bottom: f64, right: f64) -> bool {
+		let bezier = bezier_rs::Bezier::from_cubic_dvec2(
+			(bezier_x[0], bezier_y[0]).into(),
+			(bezier_x[1], bezier_y[1]).into(),
+			(bezier_x[2], bezier_y[2]).into(),
+			(bezier_x[3], bezier_y[3]).into(),
+		);
+		!bezier.rectangle_intersections((left, top).into(), (right, bottom).into()).is_empty() || bezier.is_contained_within((left, top).into(), (right, bottom).into())
+	}
+
+	/// Creates a new document node in the node graph
+	#[wasm_bindgen(js_name = createNode)]
+	pub fn create_node(&self, node_type: String, x: i32, y: i32) {
+		let message = NodeGraphMessage::CreateNode { node_id: None, node_type, x, y };
+		self.dispatch(message);
+	}
+
+	/// Notifies the backend that the user selected a node in the node graph
+	#[wasm_bindgen(js_name = selectNodes)]
+	pub fn select_nodes(&self, nodes: Vec<u64>) {
+		let message = NodeGraphMessage::SelectNodes { nodes };
+		self.dispatch(message);
+	}
+
+	/// Pastes the nodes based on serialized data
+	#[wasm_bindgen(js_name = pasteSerializedNodes)]
+	pub fn paste_serialized_nodes(&self, serialized_nodes: String) {
+		let message = NodeGraphMessage::PasteNodes { serialized_nodes };
+		self.dispatch(message);
+	}
+
+	/// Notifies the backend that the user double clicked a node
+	#[wasm_bindgen(js_name = doubleClickNode)]
+	pub fn double_click_node(&self, node: u64) {
+		let message = NodeGraphMessage::DoubleClickNode { node };
+		self.dispatch(message);
+	}
+
+	/// Notifies the backend that the selected nodes have been moved
+	#[wasm_bindgen(js_name = moveSelectedNodes)]
+	pub fn move_selected_nodes(&self, displacement_x: i32, displacement_y: i32) {
+		let message = DocumentMessage::StartTransaction;
+		self.dispatch(message);
+
+		let message = NodeGraphMessage::MoveSelectedNodes { displacement_x, displacement_y };
+		self.dispatch(message);
+	}
+
+	/// Toggle preview on node
+	#[wasm_bindgen(js_name = togglePreview)]
+	pub fn toggle_preview(&self, node_id: NodeId) {
+		let message = NodeGraphMessage::TogglePreview { node_id };
+		self.dispatch(message);
+	}
+
+	/// Pastes an image
+	#[wasm_bindgen(js_name = pasteImage)]
+	pub fn paste_image(&self, mime: String, image_data: Vec<u8>, mouse_x: Option<f64>, mouse_y: Option<f64>) {
+		let mouse = mouse_x.and_then(|x| mouse_y.map(|y| (x, y)));
+		let message = DocumentMessage::PasteImage { mime, image_data, mouse };
+		self.dispatch(message);
+	}
+
+	/// Toggle visibility of a layer from the layer list
+	#[wasm_bindgen(js_name = toggleLayerVisibility)]
+	pub fn toggle_layer_visibility(&self, layer_path: Vec<LayerId>) {
+		let message = DocumentMessage::ToggleLayerVisibility { layer_path };
+		self.dispatch(message);
+	}
+
+	/// Toggle expansions state of a layer from the layer list
+	#[wasm_bindgen(js_name = toggleLayerExpansion)]
+	pub fn toggle_layer_expansion(&self, layer_path: Vec<LayerId>) {
+		let message = DocumentMessage::ToggleLayerExpansion { layer_path };
+		self.dispatch(message);
+	}
+}
+
+// Needed to make JsEditorHandle functions pub to Rust.
+// The reason is not fully clear but it has to do with the #[wasm_bindgen] procedural macro.
+impl JsEditorHandle {
+	pub fn send_frontend_message_to_js_rust_proxy(&self, message: FrontendMessage) {
+		self.send_frontend_message_to_js(message);
+	}
+}
+
+impl Drop for JsEditorHandle {
+	fn drop(&mut self) {
+		// Consider removing after https://github.com/rustwasm/wasm-bindgen/pull/2984 is merged and released
+		EDITOR_INSTANCES.with(|instances| instances.borrow_mut().remove(&self.editor_id));
+	}
+}
@@ -0,0 +1,231 @@
+use crate::JS_EDITOR_HANDLES;
+
+use editor::messages::input_mapper::utility_types::input_keyboard::Key;
+use editor::messages::prelude::*;
+
+use std::panic;
+use wasm_bindgen::prelude::*;
+
+/// 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::PanicInfo) {
+	let header = "The editor crashed — sorry about that";
+	let description = "
+	An internal error occurred. Please report this by filing an issue on GitHub.\n\
+	\n\
+	Reload the editor to continue. If this happens immediately on repeated reloads, clear saved data.
+	"
+	.trim();
+
+	error!("{}", info);
+
+	JS_EDITOR_HANDLES.with(|instances| {
+		instances.borrow_mut().values_mut().for_each(|instance| {
+			instance.send_frontend_message_to_js_rust_proxy(FrontendMessage::DisplayDialogPanic {
+				panic_info: info.to_string(),
+				header: header.to_string(),
+				description: description.to_string(),
+			})
+		})
+	});
+}
+
+/// The JavaScript `Error` type
+#[wasm_bindgen]
+extern "C" {
+	#[derive(Clone, Debug)]
+	pub type Error;
+
+	#[wasm_bindgen(constructor)]
+	pub fn new(msg: &str) -> Error;
+}
+
+/// 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);
+}
+
+#[derive(Default)]
+pub struct WasmLog;
+
+impl log::Log for WasmLog {
+	fn enabled(&self, metadata: &log::Metadata) -> bool {
+		metadata.level() <= log::Level::Info
+	}
+
+	fn log(&self, record: &log::Record) {
+		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"),
+		};
+		let msg = &format!("%c{}\t{}", name, record.args());
+		log(msg, color)
+	}
+
+	fn flush(&self) {}
+}
+
+/// Translate a keyboard key from its JS name to its Rust `Key` enum
+pub 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,
+	}
+}
@@ -0,0 +1,35 @@
+#![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_api;
+pub mod helpers;
+
+use helpers::{panic_hook, WasmLog};
+
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::panic;
+use std::sync::atomic::AtomicBool;
+use wasm_bindgen::prelude::*;
+
+// Set up the persistent editor backend state
+pub static EDITOR_HAS_CRASHED: AtomicBool = AtomicBool::new(false);
+pub static LOGGER: WasmLog = WasmLog;
+thread_local! {
+	pub static EDITOR_INSTANCES: RefCell<HashMap<u64, editor::application::Editor>> = RefCell::new(HashMap::new());
+	pub static JS_EDITOR_HANDLES: RefCell<HashMap<u64, editor_api::JsEditorHandle>> = RefCell::new(HashMap::new());
+}
+
+/// Initialize the backend
+#[wasm_bindgen(start)]
+pub fn init() {
+	// 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);
+}