Support moving single layers

Author: ajweeks

client/web/src/components/widgets/inputs/MenuBarInput.vue

@@ -126,6 +126,10 @@ const menuEntries: MenuListEntries = [
 			[
 				{ label: "Select All", shortcut: ["Ctrl", "A"], action: async () => (await wasm).select_all_layers() },
 				{ label: "Deselect All", shortcut: ["Ctrl", "Alt", "A"], action: async () => (await wasm).deselect_all_layers() },
+				{ label: "Move Layer Up", shortcut: ["Ctrl", "]"], action: async () => (await wasm).move_selected_layer(1) },
+				{ label: "Move Layer Down", shortcut: ["Ctrl", "["], action: async () => (await wasm).move_selected_layer(-1) },
+				{ label: "Move Layer To Top", shortcut: ["Ctrl", "Shift", "]"], action: async () => (await wasm).move_selected_layer(999999) },
+				{ label: "Move Layer To Bottom", shortcut: ["Ctrl", "Shift", "["], action: async () => (await wasm).move_selected_layer(-999999) },
 			],
 		],
 	},

client/web/wasm/src/document.rs

@@ -163,14 +163,22 @@ pub fn select_all_layers() -> Result<(), JsValue> {
 	EDITOR_STATE.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::SelectAllLayers)).map_err(convert_error)
 }
 
-/// Select all layers
+/// Deselect all layers
 #[wasm_bindgen]
 pub fn deselect_all_layers() -> Result<(), JsValue> {
 	EDITOR_STATE
 		.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::DeselectAllLayers))
 		.map_err(convert_error)
 }
 
+/// Reorder selected layer
+#[wasm_bindgen]
+pub fn move_selected_layer(delta: i32) -> Result<(), JsValue> {
+	EDITOR_STATE
+		.with(|editor| editor.borrow_mut().handle_message(DocumentMessage::MoveSelectedLayer(delta)))
+		.map_err(convert_error)
+}
+
 /// Export the document
 #[wasm_bindgen]
 pub fn export_document() -> Result<(), JsValue> {

client/web/wasm/src/wrappers.rs

@@ -131,6 +131,8 @@ pub fn translate_key(name: &str) -> Key {
 		"arrowdown" => KeyArrowDown,
 		"arrowleft" => KeyArrowLeft,
 		"arrowright" => KeyArrowRight,
+		"[" => KeyLeftBracket,
+		"]" => KeyRightBracket,
 		_ => UnknownKey,
 	}
 }

core/document/src/document.rs

@@ -227,6 +227,14 @@ impl Document {
 		Ok(())
 	}
 
+	pub fn reorder_layer(&mut self, source_path: &[LayerId], target_path: &[LayerId]) -> Result<(), DocumentError> {
+		// TODO: Detect when moving between folders and handle properly
+
+		self.root.as_folder_mut()?.reorder_layer(*source_path.last().unwrap(), *target_path.last().unwrap())?;
+
+		Ok(())
+	}
+
 	fn mark_as_dirty(&mut self, path: &[LayerId]) -> Result<(), DocumentError> {
 		let mut root = &mut self.root;
 		root.cache_dirty = true;
@@ -377,6 +385,15 @@ impl Document {
 				self.mark_as_dirty(path)?;
 				Some(vec![DocumentResponse::DocumentChanged])
 			}
+			Operation::ReorderLayers { source_path, target_path } => {
+				self.reorder_layer(source_path, target_path)?;
+
+				Some(vec![
+					DocumentResponse::DocumentChanged,
+					DocumentResponse::FolderChanged { path: source_path.to_vec() },
+					DocumentResponse::SelectLayer { path: source_path.to_vec() },
+				])
+			}
 		};
 		if !matches!(
 			operation,

core/document/src/layers/folder.rs

@@ -65,6 +65,24 @@ impl Folder {
 		Ok(())
 	}
 
+	pub fn reorder_layer(&mut self, source_id: LayerId, target_id: LayerId) -> Result<(), DocumentError> {
+		let source_pos = self.layer_ids.iter().position(|x| *x == source_id).ok_or(DocumentError::LayerNotFound)?;
+		let target_pos = self.layer_ids.iter().position(|x| *x == target_id).ok_or(DocumentError::LayerNotFound)?;
+
+		let layer_to_move = self.layers.remove(source_pos);
+		self.layers.insert(target_pos, layer_to_move);
+		let layer_id_to_move = self.layer_ids.remove(source_pos);
+		self.layer_ids.insert(target_pos, layer_id_to_move);
+
+		let min_index = source_pos.min(target_pos);
+		let max_index = source_pos.max(target_pos);
+		for layer_index in min_index..max_index {
+			self.layers[layer_index].cache_dirty = true;
+		}
+
+		Ok(())
+	}
+
 	/// Returns a list of layers in the folder
 	pub fn list_layers(&self) -> &[LayerId] {
 		self.layer_ids.as_slice()

core/document/src/operation.rs

@@ -76,4 +76,8 @@ pub enum Operation {
 		path: Vec<LayerId>,
 		color: Color,
 	},
+	ReorderLayers {
+		source_path: Vec<LayerId>,
+		target_path: Vec<LayerId>,
+	},
 }

core/editor/src/document/document_message_handler.rs

@@ -54,6 +54,7 @@ pub enum DocumentMessage {
 	WheelCanvasZoom,
 	SetCanvasRotation(f64),
 	NudgeSelectedLayers(f64, f64),
+	MoveSelectedLayer(i32),
 }
 
 impl From<DocumentOperation> for DocumentMessage {
@@ -161,6 +162,32 @@ impl DocumentMessageHandler {
 		layers_with_indices.sort_by_key(|(_, indices)| indices.clone());
 		return layers_with_indices.into_iter().map(|(path, _)| path).collect();
 	}
+
+	/// Returns the paths to all layers in order
+	fn all_layers_sorted(&self) -> Vec<Vec<LayerId>> {
+		// Compute the indices for each layer to be able to sort them
+		let mut layers_with_indices: Vec<(Vec<LayerId>, Vec<usize>)> = self
+			.active_document()
+			.layer_data
+			.iter()
+			.filter_map(|(path, _)| (path.len() > 0).then(|| path.clone())) // Ignore root layer data
+			.filter_map(|path| {
+				// Currently it is possible that layer_data contains layers that are don't actually exist
+				// and thus indices_for_path can return an error. We currently skip these layers and log a warning.
+				// Once this problem is solved this code can be simplified
+				match self.active_document().document.indices_for_path(&path) {
+					Err(err) => {
+						warn!("all_layers_sorted: Could not get indices for the layer {:?}: {:?}", path, err);
+						None
+					}
+					Ok(indices) => Some((path, indices)),
+				}
+			})
+			.collect();
+
+		layers_with_indices.sort_by_key(|(_, indices)| indices.clone());
+		return layers_with_indices.into_iter().map(|(path, _)| path).collect();
+	}
 }
 
 impl Default for DocumentMessageHandler {
@@ -554,6 +581,33 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 					responses.push_back(operation.into());
 				}
 			}
+			MoveSelectedLayer(delta) => {
+				let paths: Vec<Vec<LayerId>> = self.selected_layers_sorted();
+				// TODO: Support moving more than one layer
+				if paths.len() == 1 {
+					let all_layer_indices = self.all_layers_sorted();
+
+					let max_index = all_layer_indices.len() as i32 - 1;
+
+					let mut selected_layer_index = -1;
+					let mut next_layer_index = -1;
+					for (i, path) in all_layer_indices.iter().enumerate() {
+						if *path == paths[0] {
+							selected_layer_index = i as i32;
+							next_layer_index = (selected_layer_index + delta).clamp(0, max_index);
+							break;
+						}
+					}
+
+					if next_layer_index != -1 && next_layer_index != selected_layer_index {
+						let operation = DocumentOperation::ReorderLayers {
+							source_path: paths[0].clone(),
+							target_path: all_layer_indices[next_layer_index as usize].to_vec(),
+						};
+						responses.push_back(operation.into());
+					}
+				}
+			}
 			message => todo!("document_action_handler does not implement: {}", message.to_discriminant().global_name()),
 		}
 	}
@@ -589,6 +643,7 @@ impl MessageHandler<DocumentMessage, &InputPreprocessor> for DocumentMessageHand
 				DuplicateSelectedLayers,
 				CopySelectedLayers,
 				NudgeSelectedLayers,
+				MoveSelectedLayer,
 			);
 			common.extend(select);
 		}

core/editor/src/input/input_mapper.rs

@@ -235,6 +235,10 @@ impl Default for Mapping {
 			entry! {action=DocumentMessage::NudgeSelectedLayers(NUDGE_AMOUNT, -NUDGE_AMOUNT), key_down=KeyArrowRight, modifiers=[KeyArrowUp]},
 			entry! {action=DocumentMessage::NudgeSelectedLayers(NUDGE_AMOUNT, NUDGE_AMOUNT), key_down=KeyArrowRight, modifiers=[KeyArrowDown]},
 			entry! {action=DocumentMessage::NudgeSelectedLayers(NUDGE_AMOUNT, 0.), key_down=KeyArrowRight},
+			entry! {action=DocumentMessage::MoveSelectedLayer(-1), key_down=KeyLeftBracket, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::MoveSelectedLayer(1), key_down=KeyRightBracket, modifiers=[KeyControl]},
+			entry! {action=DocumentMessage::MoveSelectedLayer(-999999), key_down=KeyLeftBracket, modifiers=[KeyControl, KeyShift]},
+			entry! {action=DocumentMessage::MoveSelectedLayer(999999), key_down=KeyRightBracket, modifiers=[KeyControl, KeyShift]},
 			// Global Actions
 			entry! {action=GlobalMessage::LogInfo, key_down=Key1},
 			entry! {action=GlobalMessage::LogDebug, key_down=Key2},

core/editor/src/input/keyboard.rs

@@ -69,6 +69,8 @@ pub enum Key {
 	KeyArrowDown,
 	KeyArrowLeft,
 	KeyArrowRight,
+	KeyLeftBracket,
+	KeyRightBracket,
 
 	// This has to be the last element in the enum.
 	NumKeys,