Graphite/frontend/wasm/src/editor_api.rs

#![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.
//
use crate::helpers::translate_key;
use crate::{EDITOR_HANDLE, EDITOR_HAS_CRASHED, Error, MESSAGE_BUFFER, PANIC_DIALOG_MESSAGE_CALLBACK};
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::Image;
use graphene_std::raster::color::Color;
use graphene_std::vector::GradientStops;
use js_sys::{Object, Reflect};
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::JsCast;
use wasm_bindgen::prelude::*;
use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, ImageData, window};

#[cfg(not(feature = "native"))]
use crate::EDITOR;
#[cfg(not(feature = "native"))]
use editor::application::{Editor, Environment, Host, Platform};

static IMAGE_DATA_HASH: AtomicU64 = AtomicU64::new(0);

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()
}

/// Provides a handle to access the raw Wasm memory.
#[wasm_bindgen(js_name = wasmMemory)]
pub fn wasm_memory() -> JsValue {
	wasm_bindgen::memory()
}

#[wasm_bindgen(js_name = isPlatformNative)]
pub fn is_platform_native() -> bool {
	#[cfg(feature = "native")]
	{
		true
	}
	#[cfg(not(feature = "native"))]
	{
		false
	}
}

// ============================================================================

/// 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 EditorHandle {
	/// 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 EditorHandle {
	pub fn send_frontend_message_to_js_rust_proxy(&self, message: FrontendMessage) {
		self.send_frontend_message_to_js(message);
	}

	fn initialize_handle(frontend_message_handler_callback: js_sys::Function) -> EditorHandle {
		let panic_callback = frontend_message_handler_callback.clone();
		let editor_handle = EditorHandle { frontend_message_handler_callback };
		if EDITOR_HANDLE.with(|handle| handle.lock().ok().map(|mut guard| *guard = Some(editor_handle.clone()))).is_none() {
			log::error!("Attempted to initialize the editor handle more than once");
		}
		PANIC_DIALOG_MESSAGE_CALLBACK.with_borrow_mut(|callback| *callback = Some(panic_callback));
		editor_handle
	}
}

#[wasm_bindgen]
impl EditorHandle {
	#[cfg(not(feature = "native"))]
	pub fn create(platform: String, uuid_random_seed: u64, frontend_message_handler_callback: js_sys::Function) -> EditorHandle {
		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(|handle| handle.lock().ok().map(|mut guard| *guard = Some(editor))).is_none() {
			log::error!("Attempted to initialize the editor more than once");
		}

		Self::initialize_handle(frontend_message_handler_callback)
	}

	#[cfg(feature = "native")]
	pub fn create(_platform: String, _uuid_random_seed: u64, frontend_message_handler_callback: js_sys::Function) -> EditorHandle {
		Self::initialize_handle(frontend_message_handler_callback)
	}

	// Sends a message to the dispatcher in the Editor Backend
	#[cfg(not(feature = "native"))]
	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")]
	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
	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,)
		}
	}

	// ========================================================================
	// 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) {
		#[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) {
					handle(|handle| {
						// 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());

						handle.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);
	}

	/// Zoom the canvas to fit all content
	#[wasm_bindgen(js_name = zoomCanvasToFitAll)]
	pub fn zoom_canvas_to_fit_all(&self) {
		let message = DocumentMessage::ZoomCanvasToFitAll;
		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);
	}

	#[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);
	}

	#[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);
	}
}

// ============================================================================

#[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()
}

/// Helper function for calling JS's `requestAnimationFrame` with the given closure
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
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 `EditorHandle` by calling the given closure with them as arguments.
#[cfg(not(feature = "native"))]
pub(crate) fn editor_and_handle(callback: impl FnOnce(&mut Editor, &mut EditorHandle)) {
	handle(|editor_handle| {
		editor(|editor| {
			// Call the closure with the editor and its handle
			callback(editor, editor_handle);
		})
	});
}
/// Provides access to the `EditorHandle` by calling the given closure with them as arguments.
pub(crate) fn handle(callback: impl FnOnce(&mut EditorHandle)) {
	EDITOR_HANDLE.with(|editor_handle| {
		let mut guard = editor_handle.try_lock();
		let Ok(Some(editor_handle)) = guard.as_deref_mut() else {
			log::error!("Failed to borrow editor handle");
			return;
		};

		// Call the closure with the editor and its handle
		callback(editor_handle);
	});
}

#[cfg(not(feature = "native"))]
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_handle(|editor, handle| {
		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) {
			handle.send_frontend_message_to_js(response);
		}

		// If the editor cannot be borrowed then it has encountered a panic - we should just ignore new dispatches
	});
}

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;
	}

	handle(|handle| {
		handle.dispatch(PortfolioMessage::AutoSaveAllDocuments);
	});
}

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");
		}
	}
}