support hi dpi overlay rendering

andystopia · andystopia · commit 51c4c37fe440 · 2025-01-18T01:14:39.000-05:00
diff --git a/editor/src/messages/portfolio/document/overlays/overlays_message_handler.rs b/editor/src/messages/portfolio/document/overlays/overlays_message_handler.rs
@@ -11,6 +11,8 @@ pub struct OverlaysMessageHandler {
 	pub overlay_providers: HashSet<OverlayProvider>,
 	canvas: Option<web_sys::HtmlCanvasElement>,
 	context: Option<web_sys::CanvasRenderingContext2d>,
+	#[allow(dead_code)]
+	device_pixel_ratio: Option<f64>,
 }
 
 impl MessageHandler<OverlaysMessage, OverlaysMessageData<'_>> for OverlaysMessageHandler {
@@ -22,6 +24,7 @@ impl MessageHandler<OverlaysMessage, OverlaysMessageData<'_>> for OverlaysMessag
 			OverlaysMessage::Draw => {
 				use super::utility_functions::overlay_canvas_element;
 				use super::utility_types::OverlayContext;
+				use glam::{DAffine2, DVec2};
 				use wasm_bindgen::JsCast;
 
 				let canvas = match &self.canvas {
@@ -39,17 +42,24 @@ impl MessageHandler<OverlaysMessage, OverlaysMessageData<'_>> for OverlaysMessag
 
 				let size = ipp.viewport_bounds.size().as_uvec2();
 
+				let device_pixel_ratio = *self.device_pixel_ratio.get_or_insert_with(|| web_sys::window().map(|w| w.device_pixel_ratio()).unwrap_or(1.0));
+
+				let [a, b, c, d, e, f] = DAffine2::from_scale(DVec2::splat(device_pixel_ratio)).to_cols_array();
+				context.set_transform(a, b, c, d, e, f).expect("scaling is necessary to support HiDPI displays");
 				context.clear_rect(0., 0., ipp.viewport_bounds.size().x, ipp.viewport_bounds.size().y);
+				context.reset_transform().expect("scaling is necessary to support HiDPI displays");
 
 				if overlays_visible {
 					responses.add(DocumentMessage::GridOverlays(OverlayContext {
 						render_context: context.clone(),
 						size: size.as_dvec2(),
+						device_pixel_ratio,
 					}));
 					for provider in &self.overlay_providers {
 						responses.add(provider(OverlayContext {
 							render_context: context.clone(),
 							size: size.as_dvec2(),
+							device_pixel_ratio,
 						}));
 					}
 				}
diff --git a/editor/src/messages/portfolio/document/overlays/utility_types.rs b/editor/src/messages/portfolio/document/overlays/utility_types.rs
@@ -24,6 +24,12 @@ pub struct OverlayContext {
 	#[specta(skip)]
 	pub render_context: web_sys::CanvasRenderingContext2d,
 	pub size: DVec2,
+	// The device pixel ratio is a property provided
+	// by the browser window and is the css pixel size
+	// divided by the physical pixel size. It allows
+	// better pixel density of visualizations on
+	// high dpi displays (such as Retina displays).
+	pub device_pixel_ratio: f64,
 }
 // Message hashing isn't used but is required by the message system macros
 impl core::hash::Hash for OverlayContext {
@@ -37,6 +43,7 @@ impl OverlayContext {
 
 	pub fn dashed_quad(&mut self, quad: Quad, color_fill: Option<&str>, dash_width: Option<f64>, dash_gap_width: Option<f64>, dash_offset: Option<f64>) {
 		// Set the dash pattern
+		self.start_dpi_aware_transform();
 		if let Some(dash_width) = dash_width {
 			let dash_gap_width = dash_gap_width.unwrap_or(1.);
 			let array = js_sys::Array::new();
@@ -80,6 +87,7 @@ impl OverlayContext {
 		if dash_offset.is_some() && dash_offset != Some(0.) {
 			self.render_context.set_line_dash_offset(0.);
 		}
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn line(&mut self, start: DVec2, end: DVec2, color: Option<&str>) {
@@ -88,6 +96,7 @@ impl OverlayContext {
 
 	pub fn dashed_line(&mut self, start: DVec2, end: DVec2, color: Option<&str>, dash_width: Option<f64>, dash_gap_width: Option<f64>, dash_offset: Option<f64>) {
 		// Set the dash pattern
+		self.start_dpi_aware_transform();
 		if let Some(dash_width) = dash_width {
 			let dash_gap_width = dash_gap_width.unwrap_or(1.);
 			let array = js_sys::Array::new();
@@ -125,9 +134,11 @@ impl OverlayContext {
 		if dash_offset.is_some() && dash_offset != Some(0.) {
 			self.render_context.set_line_dash_offset(0.);
 		}
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn manipulator_handle(&mut self, position: DVec2, selected: bool, color: Option<&str>) {
+		self.start_dpi_aware_transform();
 		let position = position.round() - DVec2::splat(0.5);
 
 		self.render_context.begin_path();
@@ -140,6 +151,7 @@ impl OverlayContext {
 		self.render_context.set_stroke_style_str(color.unwrap_or(COLOR_OVERLAY_BLUE));
 		self.render_context.fill();
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn manipulator_anchor(&mut self, position: DVec2, selected: bool, color: Option<&str>) {
@@ -148,6 +160,25 @@ impl OverlayContext {
 		self.square(position, None, Some(color_fill), Some(color_stroke));
 	}
 
+	/// Transforms the Canvas Context To Adjust for DPI
+	///
+	/// Overwrites all existing tranforms.
+	/// This operation can be reversed with [`Self::reset_transform`].
+	fn start_dpi_aware_transform(&self) {
+		let [a, b, c, d, e, f] = DAffine2::from_scale(DVec2::splat(self.device_pixel_ratio)).to_cols_array();
+		self.render_context
+			.set_transform(a, b, c, d, e, f)
+			.expect("transform should be able to be set to be able to account for DPI");
+	}
+
+	/// Untransforms the Canvas Context To Adjust for DPI
+	///
+	/// Warning: this function doesn't only reset the
+	/// DPI adjustment, it resets the entire transform.
+	fn end_dpi_aware_transform(&self) {
+		self.render_context.reset_transform().expect("transform should be able to be reset to be able to account for DPI");
+	}
+
 	pub fn square(&mut self, position: DVec2, size: Option<f64>, color_fill: Option<&str>, color_stroke: Option<&str>) {
 		let size = size.unwrap_or(MANIPULATOR_GROUP_MARKER_SIZE);
 		let color_fill = color_fill.unwrap_or(COLOR_OVERLAY_WHITE);
@@ -156,12 +187,14 @@ impl OverlayContext {
 		let position = position.round() - DVec2::splat(0.5);
 		let corner = position - DVec2::splat(size) / 2.;
 
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		self.render_context.rect(corner.x, corner.y, size, size);
 		self.render_context.set_fill_style_str(color_fill);
 		self.render_context.set_stroke_style_str(color_stroke);
 		self.render_context.fill();
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn pixel(&mut self, position: DVec2, color: Option<&str>) {
@@ -171,26 +204,32 @@ impl OverlayContext {
 		let position = position.round() - DVec2::splat(0.5);
 		let corner = position - DVec2::splat(size) / 2.;
 
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		self.render_context.rect(corner.x, corner.y, size, size);
 		self.render_context.set_fill_style_str(color_fill);
 		self.render_context.fill();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn circle(&mut self, position: DVec2, radius: f64, color_fill: Option<&str>, color_stroke: Option<&str>) {
 		let color_fill = color_fill.unwrap_or(COLOR_OVERLAY_WHITE);
 		let color_stroke = color_stroke.unwrap_or(COLOR_OVERLAY_BLUE);
 		let position = position.round();
+
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		self.render_context.arc(position.x, position.y, radius, 0., TAU).expect("Failed to draw the circle");
 		self.render_context.set_fill_style_str(color_fill);
 		self.render_context.set_stroke_style_str(color_stroke);
 		self.render_context.fill();
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 	pub fn pivot(&mut self, position: DVec2) {
 		let (x, y) = (position.round() - DVec2::splat(0.5)).into();
 
+		self.start_dpi_aware_transform();
 		// Circle
 
 		self.render_context.begin_path();
@@ -215,9 +254,11 @@ impl OverlayContext {
 		self.render_context.move_to(x, y - crosshair_radius);
 		self.render_context.line_to(x, y + crosshair_radius);
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn outline_vector(&mut self, vector_data: &VectorData, transform: DAffine2) {
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		let mut last_point = None;
 		for (_, bezier, start_id, end_id) in vector_data.segment_bezier_iter() {
@@ -229,16 +270,20 @@ impl OverlayContext {
 
 		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn outline_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		self.bezier_command(bezier, transform, true);
 		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	fn bezier_command(&self, bezier: Bezier, transform: DAffine2, move_to: bool) {
+		self.start_dpi_aware_transform();
 		let Bezier { start, end, handles } = bezier.apply_transformation(|point| transform.transform_point2(point));
 		if move_to {
 			self.render_context.move_to(start.x, start.y);
@@ -249,9 +294,11 @@ impl OverlayContext {
 			bezier_rs::BezierHandles::Quadratic { handle } => self.render_context.quadratic_curve_to(handle.x, handle.y, end.x, end.y),
 			bezier_rs::BezierHandles::Cubic { handle_start, handle_end } => self.render_context.bezier_curve_to(handle_start.x, handle_start.y, handle_end.x, handle_end.y, end.x, end.y),
 		}
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn outline(&mut self, subpaths: impl Iterator<Item = impl Borrow<Subpath<PointId>>>, transform: DAffine2) {
+		self.start_dpi_aware_transform();
 		self.render_context.begin_path();
 		for subpath in subpaths {
 			let subpath = subpath.borrow();
@@ -298,6 +345,7 @@ impl OverlayContext {
 
 		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
+		self.end_dpi_aware_transform();
 	}
 
 	pub fn text(&self, text: &str, font_color: &str, background_color: Option<&str>, transform: DAffine2, padding: f64, pivot: [Pivot; 2]) {
@@ -313,7 +361,7 @@ impl OverlayContext {
 			Pivot::End => -padding,
 		};
 
-		let [a, b, c, d, e, f] = (transform * DAffine2::from_translation(DVec2::new(x, y))).to_cols_array();
+		let [a, b, c, d, e, f] = (DAffine2::from_scale(DVec2::splat(self.device_pixel_ratio)) * transform * DAffine2::from_translation(DVec2::new(x, y))).to_cols_array();
 		self.render_context.set_transform(a, b, c, d, e, f).expect("Failed to rotate the render context to the specified angle");
 
 		if let Some(background) = background_color {
diff --git a/frontend/src/components/panels/Document.svelte b/frontend/src/components/panels/Document.svelte
@@ -75,7 +75,8 @@
 	let canvasSvgWidth: number | undefined = undefined;
 	let canvasSvgHeight: number | undefined = undefined;
 
-	// Used to set the canvas rendering dimensions.
+	let devicePixelRatio: number | undefined;
+
 	// Dimension is rounded up to the nearest even number because resizing is centered, and dividing an odd number by 2 for centering causes antialiasing
 	$: canvasWidthRoundedToEven = canvasSvgWidth && (canvasSvgWidth % 2 === 1 ? canvasSvgWidth + 1 : canvasSvgWidth);
 	$: canvasHeightRoundedToEven = canvasSvgHeight && (canvasSvgHeight % 2 === 1 ? canvasSvgHeight + 1 : canvasSvgHeight);
@@ -84,6 +85,13 @@
 	$: canvasWidthCSS = canvasWidthRoundedToEven ? `${canvasWidthRoundedToEven}px` : "100%";
 	$: canvasHeightCSS = canvasHeightRoundedToEven ? `${canvasHeightRoundedToEven}px` : "100%";
 
+	$: canvasWidthScaled = canvasSvgWidth && devicePixelRatio && Math.floor(canvasSvgWidth * devicePixelRatio);
+	$: canvasHeightScaled = canvasSvgHeight && devicePixelRatio && Math.floor(canvasSvgHeight * devicePixelRatio);
+
+	// Used to set the canvas rendering dimensions.
+	$: canvasWidthScaledRoundedToEven = canvasWidthScaled && (canvasWidthScaled % 2 === 1 ? canvasWidthScaled + 1 : canvasWidthScaled);
+	$: canvasHeightScaledRoundedToEven = canvasHeightScaled && (canvasHeightScaled % 2 === 1 ? canvasHeightScaled + 1 : canvasHeightScaled);
+
 	$: toolShelfTotalToolsAndSeparators = ((layoutGroup) => {
 		if (!isWidgetSpanRow(layoutGroup)) return undefined;
 
@@ -362,6 +370,7 @@
 	}
 
 	onMount(() => {
+		devicePixelRatio = window.devicePixelRatio;
 		// Update rendered SVGs
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentArtwork, async (data) => {
 			await tick();
@@ -508,7 +517,14 @@
 								<div bind:this={textInput} style:transform="matrix({textInputMatrix})" on:scroll={preventTextEditingScroll} />
 							{/if}
 						</div>
-						<canvas class="overlays" width={canvasWidthRoundedToEven} height={canvasHeightRoundedToEven} style:width={canvasWidthCSS} style:height={canvasHeightCSS} data-overlays-canvas>
+						<canvas
+							class="overlays"
+							width={canvasWidthScaledRoundedToEven}
+							height={canvasHeightScaledRoundedToEven}
+							style:width={canvasWidthCSS}
+							style:height={canvasHeightCSS}
+							data-overlays-canvas
+						>
 						</canvas>
 					</div>
 					<div class="graph-view" class:open={$document.graphViewOverlayOpen} style:--fade-artwork={`${$document.fadeArtwork}%`} data-graph>
