Implement the Properties panel with a transform section for layers (#527)

* initial layout system with tool options

* cargo fmt

* cargo fmt again

* document bar defined on the backend

* cargo fmt

* removed RC<RefCell>

* cargo fmt

* - fix increment behavior
- removed hashmap from layout message handler
- removed no op message from layoutMessage

* cargo fmt

* only send documentBar when zoom or rotation is updated

* ctrl-0 changes zoom properly

* unfinished layer hook in

* fix layerData name

* layer panel options bar

* basic x/y movment

* working transform section

* changed messages from tuples to structs

* hook up text input

* - fixed number input to be more clear
- fixed actions for properties message handler

* Add styling

Co-authored-by: Keavon Chambers <keavon@keavon.com>

Author: mfish33

editor/src/consts.rs

@@ -54,5 +54,5 @@ pub const FILE_EXPORT_SUFFIX: &str = ".svg";
 pub const COLOR_ACCENT: Color = Color::from_unsafe(0x00 as f32 / 255., 0xA8 as f32 / 255., 0xFF as f32 / 255.);
 
 // Document
-pub const GRAPHITE_DOCUMENT_VERSION: &str = "0.0.2";
+pub const GRAPHITE_DOCUMENT_VERSION: &str = "0.0.3";
 pub const VIEWPORT_ZOOM_TO_FIT_PADDING_SCALE_FACTOR: f32 = 1.05;

editor/src/document/document_message.rs

@@ -28,6 +28,9 @@ pub enum DocumentMessage {
 	#[remain::unsorted]
 	#[child]
 	TransformLayers(TransformLayerMessage),
+	#[remain::unsorted]
+	#[child]
+	PropertiesPanel(PropertiesPanelMessage),
 
 	// Messages
 	AbortTransaction,

editor/src/document/document_message_handler.rs

@@ -1,7 +1,7 @@
 use super::clipboards::Clipboard;
 use super::layer_panel::{layer_panel_entry, LayerDataTypeDiscriminant, LayerMetadata, LayerPanelEntry, RawBuffer};
 use super::utility_types::{AlignAggregate, AlignAxis, DocumentSave, FlipAxis};
-use super::vectorize_layer_metadata;
+use super::{vectorize_layer_metadata, PropertiesPanelMessageHandler};
 use super::{ArtboardMessageHandler, MovementMessageHandler, OverlaysMessageHandler, TransformLayerMessageHandler};
 use crate::consts::{
 	ASYMPTOTIC_EFFECT, DEFAULT_DOCUMENT_NAME, FILE_EXPORT_SUFFIX, FILE_SAVE_SUFFIX, GRAPHITE_DOCUMENT_VERSION, SCALE_EFFECT, SCROLLBAR_SPACING, VIEWPORT_ZOOM_TO_FIT_PADDING_SCALE_FACTOR,
@@ -45,6 +45,7 @@ pub struct DocumentMessageHandler {
 	pub artboard_message_handler: ArtboardMessageHandler,
 	#[serde(skip)]
 	transform_layer_handler: TransformLayerMessageHandler,
+	properties_panel_message_handler: PropertiesPanelMessageHandler,
 	pub overlays_visible: bool,
 	pub snapping_enabled: bool,
 	pub view_mode: ViewMode,
@@ -65,6 +66,7 @@ impl Default for DocumentMessageHandler {
 			overlays_message_handler: OverlaysMessageHandler::default(),
 			artboard_message_handler: ArtboardMessageHandler::default(),
 			transform_layer_handler: TransformLayerMessageHandler::default(),
+			properties_panel_message_handler: PropertiesPanelMessageHandler::default(),
 			snapping_enabled: true,
 			overlays_visible: true,
 			view_mode: ViewMode::default(),
@@ -676,16 +678,28 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 				self.transform_layer_handler
 					.process_action(message, (&mut self.layer_metadata, &mut self.graphene_document, ipp), responses);
 			}
+			#[remain::unsorted]
+			PropertiesPanel(message) => {
+				self.properties_panel_message_handler.process_action(message, &self.graphene_document, responses);
+			}
 
 			// Messages
 			AbortTransaction => {
 				self.undo(responses).unwrap_or_else(|e| log::warn!("{}", e));
 				responses.extend([RenderDocument.into(), DocumentStructureChanged.into()]);
 			}
 			AddSelectedLayers { additional_layers } => {
-				for layer_path in additional_layers {
-					responses.extend(self.select_layer(&layer_path));
+				for layer_path in &additional_layers {
+					responses.extend(self.select_layer(layer_path));
 				}
+
+				let selected_paths: Vec<Vec<u64>> = self.selected_layers().map(|path| path.to_vec()).collect();
+				if selected_paths.is_empty() {
+					responses.push_back(PropertiesPanelMessage::ClearSelection.into())
+				} else {
+					responses.push_back(PropertiesPanelMessage::SetActiveLayers { paths: selected_paths }.into())
+				}
+
 				// TODO: Correctly update layer panel in clear_selection instead of here
 				responses.push_back(FolderChanged { affected_folder_path: vec![] }.into());
 				responses.push_back(DocumentMessage::SelectionChanged.into());
@@ -743,12 +757,15 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 			DebugPrintDocument => {
 				log::debug!("{:#?}\n{:#?}", self.graphene_document, self.layer_metadata);
 			}
-			DeleteLayer { layer_path } => responses.push_front(DocumentOperation::DeleteLayer { path: layer_path }.into()),
+			DeleteLayer { layer_path } => {
+				responses.push_front(DocumentOperation::DeleteLayer { path: layer_path.clone() }.into());
+				responses.push_back(PropertiesPanelMessage::CheckSelectedWasDeleted { path: layer_path }.into());
+			}
 			DeleteSelectedLayers => {
 				self.backup(responses);
 
 				for path in self.selected_layers_without_children() {
-					responses.push_front(DocumentOperation::DeleteLayer { path: path.to_vec() }.into());
+					responses.push_front(DocumentMessage::DeleteLayer { layer_path: path.to_vec() }.into());
 				}
 
 				responses.push_front(DocumentMessage::SelectionChanged.into());
@@ -861,9 +878,10 @@ impl MessageHandler<DocumentMessage, &InputPreprocessorMessageHandler> for Docum
 				);
 			}
 			LayerChanged { affected_layer_path } => {
-				if let Ok(layer_entry) = self.layer_panel_entry(affected_layer_path) {
+				if let Ok(layer_entry) = self.layer_panel_entry(affected_layer_path.clone()) {
 					responses.push_back(FrontendMessage::UpdateDocumentLayer { data: layer_entry }.into());
 				}
+				responses.push_back(PropertiesPanelMessage::CheckSelectedWasUpdated { path: affected_layer_path }.into());
 			}
 			MoveSelectedLayersTo {
 				folder_path,

editor/src/document/mod.rs

@@ -14,6 +14,8 @@ mod overlays_message;
 mod overlays_message_handler;
 mod portfolio_message;
 mod portfolio_message_handler;
+mod properties_panel_message;
+mod properties_panel_message_handler;
 mod transform_layer_message;
 mod transform_layer_message_handler;
 
@@ -42,6 +44,11 @@ pub use portfolio_message::{PortfolioMessage, PortfolioMessageDiscriminant};
 #[doc(inline)]
 pub use portfolio_message_handler::PortfolioMessageHandler;
 
+#[doc(inline)]
+pub use properties_panel_message::{PropertiesPanelMessage, PropertiesPanelMessageDiscriminant};
+#[doc(inline)]
+pub use properties_panel_message_handler::PropertiesPanelMessageHandler;
+
 #[doc(inline)]
 pub use transform_layer_message::{TransformLayerMessage, TransformLayerMessageDiscriminant};
 #[doc(inline)]

editor/src/document/properties_panel_message.rs

@@ -0,0 +1,24 @@
+use crate::message_prelude::*;
+
+use serde::{Deserialize, Serialize};
+
+#[remain::sorted]
+#[impl_message(Message, DocumentMessage, PropertiesPanel)]
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
+pub enum PropertiesPanelMessage {
+	CheckSelectedWasDeleted { path: Vec<LayerId> },
+	CheckSelectedWasUpdated { path: Vec<LayerId> },
+	ClearSelection,
+	ModifyName { name: String },
+	ModifyTransform { value: f64, transform_op: TransformOp },
+	SetActiveLayers { paths: Vec<Vec<LayerId>> },
+}
+
+#[derive(PartialEq, Clone, Debug, Serialize, Deserialize)]
+pub enum TransformOp {
+	X,
+	Y,
+	Width,
+	Height,
+	Rotation,
+}