Add animation control buttons to document bar

Keavon · Keavon · commit 08a4b69948d9 · 2025-03-19T02:15:40.000-07:00
diff --git a/editor/src/dispatcher.rs b/editor/src/dispatcher.rs
@@ -234,6 +234,7 @@ impl Dispatcher {
 					let current_tool = &self.message_handlers.tool_message_handler.tool_state.tool_data.active_tool_type;
 					let message_logging_verbosity = self.message_handlers.debug_message_handler.message_logging_verbosity;
 					let timing_information = self.message_handlers.animation_message_handler.timing_information();
+					let animation = &self.message_handlers.animation_message_handler;
 
 					self.message_handlers.portfolio_message_handler.process_message(
 						message,
@@ -244,6 +245,7 @@ impl Dispatcher {
 							current_tool,
 							message_logging_verbosity,
 							timing_information,
+							animation,
 						},
 					);
 				}
diff --git a/editor/src/messages/animation/animation_message.rs b/editor/src/messages/animation/animation_message.rs
@@ -8,7 +8,7 @@ pub enum AnimationMessage {
 	ToggleLivePreview,
 	EnableLivePreview,
 	DisableLivePreview,
-	ResetAnimation,
+	RestartAnimation,
 	SetFrameIndex(f64),
 	SetTime(f64),
 	UpdateTime,
diff --git a/editor/src/messages/animation/animation_message_handler.rs b/editor/src/messages/animation/animation_message_handler.rs
@@ -14,6 +14,8 @@ pub enum AnimationTimeMode {
 #[derive(Debug, Default)]
 pub struct AnimationMessageHandler {
 	live_preview: bool,
+	/// Used to re-send the UI on the next frame after playback starts
+	live_preview_recently_zero: bool,
 	timestamp: f64,
 	frame_index: f64,
 	animation_start: Option<f64>,
@@ -29,6 +31,10 @@ impl AnimationMessageHandler {
 		};
 		TimingInformation { time: self.timestamp, animation_time }
 	}
+
+	pub fn is_playing(&self) -> bool {
+		self.live_preview
+	}
 }
 
 impl MessageHandler<AnimationMessage, ()> for AnimationMessageHandler {
@@ -38,23 +44,37 @@ impl MessageHandler<AnimationMessage, ()> for AnimationMessageHandler {
 				if self.animation_start.is_none() {
 					self.animation_start = Some(self.timestamp);
 				}
-				self.live_preview = !self.live_preview
+				self.live_preview = !self.live_preview;
+
+				// Update the restart and pause/play buttons
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
 			}
 			AnimationMessage::EnableLivePreview => {
 				if self.animation_start.is_none() {
 					self.animation_start = Some(self.timestamp);
 				}
-				self.live_preview = true
+				self.live_preview = true;
+
+				// Update the restart and pause/play buttons
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
+			}
+			AnimationMessage::DisableLivePreview => {
+				self.live_preview = false;
+
+				// Update the restart and pause/play buttons
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
 			}
-			AnimationMessage::DisableLivePreview => self.live_preview = false,
 			AnimationMessage::SetFrameIndex(frame) => {
 				self.frame_index = frame;
-				log::debug!("set frame index to {}", frame);
-				responses.add(PortfolioMessage::SubmitActiveGraphRender)
+				responses.add(PortfolioMessage::SubmitActiveGraphRender);
+				// Update the restart and pause/play buttons
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
 			}
 			AnimationMessage::SetTime(time) => {
 				self.timestamp = time;
-				responses.add(AnimationMessage::UpdateTime);
+				if self.live_preview {
+					responses.add(AnimationMessage::UpdateTime);
+				}
 			}
 			AnimationMessage::IncrementFrameCounter => {
 				if self.live_preview {
@@ -64,21 +84,32 @@ impl MessageHandler<AnimationMessage, ()> for AnimationMessageHandler {
 			}
 			AnimationMessage::UpdateTime => {
 				if self.live_preview {
-					responses.add(PortfolioMessage::SubmitActiveGraphRender)
+					responses.add(PortfolioMessage::SubmitActiveGraphRender);
+
+					if self.live_preview_recently_zero {
+						// Update the restart and pause/play buttons
+						responses.add(PortfolioMessage::UpdateDocumentWidgets);
+						self.live_preview_recently_zero = false;
+					}
 				}
 			}
-			AnimationMessage::ResetAnimation => {
+			AnimationMessage::RestartAnimation => {
 				self.frame_index = 0.;
 				self.animation_start = None;
-				responses.add(PortfolioMessage::SubmitActiveGraphRender)
+				self.live_preview_recently_zero = true;
+				responses.add(PortfolioMessage::SubmitActiveGraphRender);
+				// Update the restart and pause/play buttons
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
+			}
+			AnimationMessage::SetAnimationTimeMode(animation_time_mode) => {
+				self.animation_time_mode = animation_time_mode;
 			}
-			AnimationMessage::SetAnimationTimeMode(animation_time_mode) => self.animation_time_mode = animation_time_mode,
 		}
 	}
 
 	advertise_actions!(AnimationMessageDiscriminant;
 		ToggleLivePreview,
 		SetFrameIndex,
-		ResetAnimation,
+		RestartAnimation,
 	);
 }
diff --git a/editor/src/messages/input_mapper/input_mappings.rs b/editor/src/messages/input_mapper/input_mappings.rs
@@ -432,7 +432,7 @@ pub fn input_mappings() -> Mapping {
 		entry!(KeyDown(Digit2); modifiers=[Alt], action_dispatch=DebugMessage::MessageContents),
 		// AnimationMessage
 		entry!(KeyDown(Space); modifiers=[Shift], action_dispatch=AnimationMessage::ToggleLivePreview),
-		entry!(KeyDown(ArrowLeft); modifiers=[Control], action_dispatch=AnimationMessage::ResetAnimation),
+		entry!(KeyDown(Home); modifiers=[Shift], action_dispatch=AnimationMessage::RestartAnimation),
 	];
 	let (mut key_up, mut key_down, mut key_up_no_repeat, mut key_down_no_repeat, mut double_click, mut wheel_scroll, mut pointer_move) = mappings;
 
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -33,6 +33,7 @@ use graphene_core::raster::image::ImageFrameTable;
 use graphene_core::vector::style::ViewMode;
 use graphene_std::renderer::{ClickTarget, Quad};
 use graphene_std::vector::{PointId, path_bool_lib};
+use std::time::Duration;
 
 pub struct DocumentMessageData<'a> {
 	pub document_id: DocumentId,
@@ -1988,7 +1989,7 @@ impl DocumentMessageHandler {
 		}
 	}
 
-	pub fn update_document_widgets(&self, responses: &mut VecDeque<Message>) {
+	pub fn update_document_widgets(&self, responses: &mut VecDeque<Message>, animation_is_playing: bool, time: Duration) {
 		// Document mode (dropdown menu at the left of the bar above the viewport, before the tool options)
 
 		let document_mode_layout = WidgetLayout::new(vec![LayoutGroup::Row {
@@ -2026,6 +2027,18 @@ impl DocumentMessageHandler {
 		let mut snapping_state2 = self.snapping_state.clone();
 
 		let mut widgets = vec![
+			IconButton::new("PlaybackToStart", 24)
+				.tooltip("Restart Animation")
+				.tooltip_shortcut(action_keys!(AnimationMessageDiscriminant::RestartAnimation))
+				.on_update(|_| AnimationMessage::RestartAnimation.into())
+				.disabled(time == Duration::ZERO)
+				.widget_holder(),
+			IconButton::new(if animation_is_playing { "PlaybackPause" } else { "PlaybackPlay" }, 24)
+				.tooltip(if animation_is_playing { "Pause Animation" } else { "Play Animation" })
+				.tooltip_shortcut(action_keys!(AnimationMessageDiscriminant::ToggleLivePreview))
+				.on_update(|_| AnimationMessage::ToggleLivePreview.into())
+				.widget_holder(),
+			Separator::new(SeparatorType::Unrelated).widget_holder(),
 			CheckboxInput::new(self.overlays_visible)
 				.icon("Overlays")
 				.tooltip("Overlays")
diff --git a/editor/src/messages/portfolio/portfolio_message_handler.rs b/editor/src/messages/portfolio/portfolio_message_handler.rs
@@ -34,6 +34,7 @@ pub struct PortfolioMessageData<'a> {
 	pub current_tool: &'a ToolType,
 	pub message_logging_verbosity: MessageLoggingVerbosity,
 	pub timing_information: TimingInformation,
+	pub animation: &'a AnimationMessageHandler,
 }
 
 #[derive(Debug, Default)]
@@ -59,6 +60,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 			current_tool,
 			message_logging_verbosity,
 			timing_information,
+			animation,
 		} = data;
 
 		match message {
@@ -1108,7 +1110,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes
 			}
 			PortfolioMessage::UpdateDocumentWidgets => {
 				if let Some(document) = self.active_document() {
-					document.update_document_widgets(responses);
+					document.update_document_widgets(responses, animation.is_playing(), timing_information.animation_time);
 				}
 			}
 			PortfolioMessage::UpdateOpenDocumentsList => {
@@ -1275,16 +1277,19 @@ impl PortfolioMessageHandler {
 
 	/// Get the id of the node that should be used as the target for the spreadsheet
 	pub fn inspect_node_id(&self) -> Option<NodeId> {
+		// Spreadsheet not open, skipping
 		if !self.spreadsheet.spreadsheet_view_open {
-			warn!("Spreadsheet not open, skipping…");
 			return None;
 		}
+
 		let document = self.documents.get(&self.active_document_id?)?;
 		let selected_nodes = document.network_interface.selected_nodes().0;
+
+		// Selected nodes != 1, skipping
 		if selected_nodes.len() != 1 {
-			warn!("selected nodes != 1, skipping…");
 			return None;
 		}
+
 		selected_nodes.first().copied()
 	}
 }
diff --git a/frontend/assets/icon-16px-solid/playback-pause.svg b/frontend/assets/icon-16px-solid/playback-pause.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<rect x="2" width="3" height="16" />
+	<rect x="11" width="3" height="16" />
+</svg>
diff --git a/frontend/assets/icon-16px-solid/playback-play.svg b/frontend/assets/icon-16px-solid/playback-play.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="1,0 1,16 15,8" />
+</svg>
diff --git a/frontend/assets/icon-16px-solid/playback-to-end.svg b/frontend/assets/icon-16px-solid/playback-to-end.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="3,3 3,13 11,8" />
+	<rect x="11" y="3" width="2" height="10" />
+</svg>
diff --git a/frontend/assets/icon-16px-solid/playback-to-start.svg b/frontend/assets/icon-16px-solid/playback-to-start.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<polygon points="13,3 13,13 5,8" />
+	<rect x="3" y="3" width="2" height="10" />
+</svg>
diff --git a/frontend/src/utility-functions/icons.ts b/frontend/src/utility-functions/icons.ts
@@ -163,6 +163,10 @@ import PadlockUnlocked from "@graphite-frontend/assets/icon-16px-solid/padlock-u
 import Paste from "@graphite-frontend/assets/icon-16px-solid/paste.svg";
 import PinActive from "@graphite-frontend/assets/icon-16px-solid/pin-active.svg";
 import PinInactive from "@graphite-frontend/assets/icon-16px-solid/pin-inactive.svg";
+import PlaybackPause from "@graphite-frontend/assets/icon-16px-solid/playback-pause.svg";
+import PlaybackPlay from "@graphite-frontend/assets/icon-16px-solid/playback-play.svg";
+import PlaybackToEnd from "@graphite-frontend/assets/icon-16px-solid/playback-to-end.svg";
+import PlaybackToStart from "@graphite-frontend/assets/icon-16px-solid/playback-to-start.svg";
 import Random from "@graphite-frontend/assets/icon-16px-solid/random.svg";
 import Reload from "@graphite-frontend/assets/icon-16px-solid/reload.svg";
 import Reset from "@graphite-frontend/assets/icon-16px-solid/reset.svg";
@@ -279,6 +283,10 @@ const SOLID_16PX = {
 	Paste: { svg: Paste, size: 16 },
 	PinActive: { svg: PinActive, size: 16 },
 	PinInactive: { svg: PinInactive, size: 16 },
+	PlaybackPause: { svg: PlaybackPause, size: 16 },
+	PlaybackPlay: { svg: PlaybackPlay, size: 16 },
+	PlaybackToEnd: { svg: PlaybackToEnd, size: 16 },
+	PlaybackToStart: { svg: PlaybackToStart, size: 16 },
 	Random: { svg: Random, size: 16 },
 	Reload: { svg: Reload, size: 16 },
 	Reset: { svg: Reset, size: 16 },

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,7 @@ pub struct PortfolioMessageData<'a> {`
`34`	`34`	`pub current_tool: &'a ToolType,`
`35`	`35`	`pub message_logging_verbosity: MessageLoggingVerbosity,`
`36`	`36`	`pub timing_information: TimingInformation,`
	`37`	`+ pub animation: &'a AnimationMessageHandler,`
`37`	`38`	`}`
`38`	`39`
`39`	`40`	`#[derive(Debug, Default)]`
`@@ -59,6 +60,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes`
`59`	`60`	`current_tool,`
`60`	`61`	`message_logging_verbosity,`
`61`	`62`	`timing_information,`
	`63`	`+ animation,`
`62`	`64`	`} = data;`
`63`	`65`
`64`	`66`	`match message {`
`@@ -1108,7 +1110,7 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageData<'_>> for PortfolioMes`
`1108`	`1110`	`}`
`1109`	`1111`	`PortfolioMessage::UpdateDocumentWidgets => {`
`1110`	`1112`	`if let Some(document) = self.active_document() {`
`1111`		`- document.update_document_widgets(responses);`
	`1113`	`+ document.update_document_widgets(responses, animation.is_playing(), timing_information.animation_time);`
`1112`	`1114`	`}`
`1113`	`1115`	`}`
`1114`	`1116`	`PortfolioMessage::UpdateOpenDocumentsList => {`
`@@ -1275,16 +1277,19 @@ impl PortfolioMessageHandler {`
`1275`	`1277`
`1276`	`1278`	`/// Get the id of the node that should be used as the target for the spreadsheet`
`1277`	`1279`	`pub fn inspect_node_id(&self) -> Option<NodeId> {`
	`1280`	`+ // Spreadsheet not open, skipping`
`1278`	`1281`	`if !self.spreadsheet.spreadsheet_view_open {`
`1279`		`- warn!("Spreadsheet not open, skipping…");`
`1280`	`1282`	`return None;`
`1281`	`1283`	`}`
	`1284`	`+`
`1282`	`1285`	`let document = self.documents.get(&self.active_document_id?)?;`
`1283`	`1286`	`let selected_nodes = document.network_interface.selected_nodes().0;`
	`1287`	`+`
	`1288`	`+ // Selected nodes != 1, skipping`
`1284`	`1289`	`if selected_nodes.len() != 1 {`
`1285`		`- warn!("selected nodes != 1, skipping…");`
`1286`	`1290`	`return None;`
`1287`	`1291`	`}`
	`1292`	`+`
`1288`	`1293`	`selected_nodes.first().copied()`
`1289`	`1294`	`}`
`1290`	`1295`	`}`