Fix the Eyedropper tool on web with Vello and on desktop with SVG (#3886)

editor/src/messages/portfolio/portfolio_message_handler.rs

@@ -1191,7 +1191,6 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					Ok(message) => responses.add_front(message),
 				}
 			}
-			#[cfg(not(target_family = "wasm"))]
 			PortfolioMessage::SubmitEyedropperPreviewRender => {
 				use crate::consts::EYEDROPPER_PREVIEW_AREA_RESOLUTION;
 
@@ -1223,10 +1222,6 @@ impl MessageHandler<PortfolioMessage, PortfolioMessageContext<'_>> for Portfolio
 					Ok(message) => responses.add_front(message),
 				}
 			}
-			#[cfg(target_family = "wasm")]
-			PortfolioMessage::SubmitEyedropperPreviewRender => {
-				// TODO: Currently for Wasm, this is implemented through SVG rendering but the Eyedropper tool doesn't work at all when Vello is enabled as the renderer
-			}
 			PortfolioMessage::ToggleFocusDocument => {
 				self.focus_document = !self.focus_document;
 				responses.add(MenuBarMessage::SendLayout);

editor/src/messages/tool/tool_messages/eyedropper_tool.rs

@@ -1,6 +1,7 @@
 use super::tool_prelude::*;
 use crate::messages::frontend::utility_types::EyedropperPreviewImage;
 use crate::messages::tool::utility_types::DocumentToolData;
+use graphene_std::vector::style::RenderMode;
 
 #[derive(Default, ExtractField)]
 pub struct EyedropperTool {
@@ -108,14 +109,19 @@ impl Fsm for EyedropperToolFsmState {
 
 	fn transition(self, event: ToolMessage, tool_data: &mut Self::ToolData, tool_action_data: &mut ToolActionMessageContext, _tool_options: &(), responses: &mut VecDeque<Message>) -> Self {
 		let ToolActionMessageContext {
-			global_tool_data, input, viewport, ..
+			document,
+			global_tool_data,
+			input,
+			viewport,
+			..
 		} = tool_action_data;
+		let render_mode = document.render_mode;
 
 		let ToolMessage::Eyedropper(event) = event else { return self };
 		match (self, event) {
 			// Ready -> Sampling
 			(EyedropperToolFsmState::Ready, mouse_down) if matches!(mouse_down, EyedropperToolMessage::SamplePrimaryColorBegin | EyedropperToolMessage::SampleSecondaryColorBegin) => {
-				update_cursor_preview(responses, tool_data, input, global_tool_data, None);
+				update_cursor_preview(responses, tool_data, input, global_tool_data, None, render_mode);
 
 				if mouse_down == EyedropperToolMessage::SamplePrimaryColorBegin {
 					EyedropperToolFsmState::SamplingPrimary
@@ -127,7 +133,7 @@ impl Fsm for EyedropperToolFsmState {
 			(EyedropperToolFsmState::SamplingPrimary | EyedropperToolFsmState::SamplingSecondary, EyedropperToolMessage::PointerMove) => {
 				let mouse_position = viewport.logical(input.mouse.position);
 				if viewport.is_in_bounds(mouse_position + viewport.offset()) {
-					update_cursor_preview(responses, tool_data, input, global_tool_data, None);
+					update_cursor_preview(responses, tool_data, input, global_tool_data, None, render_mode);
 				} else {
 					disable_cursor_preview(responses, tool_data);
 				}
@@ -141,7 +147,7 @@ impl Fsm for EyedropperToolFsmState {
 					EyedropperToolFsmState::SamplingSecondary => PrimarySecondary::Secondary,
 					_ => unreachable!(),
 				};
-				update_cursor_preview(responses, tool_data, input, global_tool_data, Some(set_color_choice));
+				update_cursor_preview(responses, tool_data, input, global_tool_data, Some(set_color_choice), render_mode);
 				disable_cursor_preview(responses, tool_data);
 
 				EyedropperToolFsmState::Ready
@@ -192,31 +198,29 @@ fn disable_cursor_preview(responses: &mut VecDeque<Message>, tool_data: &mut Eye
 	});
 }
 
-#[cfg(not(target_family = "wasm"))]
-fn update_cursor_preview(
-	responses: &mut VecDeque<Message>,
-	tool_data: &mut EyedropperToolData,
-	_input: &InputPreprocessorMessageHandler,
-	_global_tool_data: &DocumentToolData,
-	set_color_choice: Option<PrimarySecondary>,
-) {
-	tool_data.preview = true;
-	tool_data.color_choice = set_color_choice;
-	responses.add(PortfolioMessage::SubmitEyedropperPreviewRender);
-}
-
-#[cfg(target_family = "wasm")]
 fn update_cursor_preview(
 	responses: &mut VecDeque<Message>,
 	tool_data: &mut EyedropperToolData,
 	input: &InputPreprocessorMessageHandler,
 	global_tool_data: &DocumentToolData,
 	set_color_choice: Option<PrimarySecondary>,
+	render_mode: RenderMode,
 ) {
 	tool_data.preview = true;
-	tool_data.color_choice = set_color_choice.clone();
+	tool_data.color_choice = set_color_choice;
 
-	update_cursor_preview_common(responses, None, input, global_tool_data, set_color_choice);
+	// On web, SVG Preview mode uses the frontend's SVG rasterization to sample pixels directly
+	#[cfg(target_family = "wasm")]
+	if render_mode == RenderMode::SvgPreview {
+		update_cursor_preview_common(responses, None, input, global_tool_data, set_color_choice);
+		return;
+	}
+
+	let _ = (&input, &global_tool_data, &render_mode);
+
+	// For Vello-rendered modes (Normal, Outline, and Pixel Preview), submit a backend render request
+	// which will return a zoomed-in pixel preview image via the EyedropperToolMessage::PreviewImage path
+	responses.add(PortfolioMessage::SubmitEyedropperPreviewRender);
 }
 
 fn update_cursor_preview_common(