Sending Toggle Ruler message and setting visibility. Text and markers not working

Author: zeroishero

editor/src/messages/frontend/frontend_message.rs

@@ -173,6 +173,7 @@ pub enum FrontendMessage {
 		origin: (f64, f64),
 		spacing: f64,
 		interval: f64,
+		visible: bool,
 	},
 	UpdateDocumentScrollbars {
 		position: (f64, f64),

editor/src/messages/portfolio/document/document_message.rs

@@ -190,6 +190,7 @@ pub enum DocumentMessage {
 	ToggleLayerVisibility {
 		layer_path: Vec<LayerId>,
 	},
+	ToggleRulers,
 	Undo,
 	UndoFinished,
 	UngroupSelectedLayers,

editor/src/messages/portfolio/document/document_message_handler.rs

@@ -40,6 +40,7 @@ pub struct DocumentMessageHandler {
 
 	pub document_mode: DocumentMode,
 	pub view_mode: ViewMode,
+	pub rulers_visible: bool,
 	#[serde(skip)]
 	pub snapping_state: SnappingState,
 	pub overlays_visible: bool,
@@ -79,6 +80,7 @@ impl Default for DocumentMessageHandler {
 
 			document_mode: DocumentMode::DesignMode,
 			view_mode: ViewMode::default(),
+			rulers_visible: true,
 			snapping_state: SnappingState::default(),
 			overlays_visible: true,
 
@@ -614,6 +616,7 @@ impl MessageHandler<DocumentMessage, DocumentInputs<'_>> for DocumentMessageHand
 					origin: ruler_origin.into(),
 					spacing: ruler_spacing,
 					interval: ruler_interval,
+					visible: self.rulers_visible,
 				});
 			}
 			RenderScrollbars => {
@@ -828,6 +831,25 @@ impl MessageHandler<DocumentMessage, DocumentInputs<'_>> for DocumentMessageHand
 					responses.add(BroadcastEvent::DocumentIsDirty);
 				}
 			}
+			ToggleRulers => {
+				self.rulers_visible = !self.rulers_visible;
+				responses.add(DocumentMessage::RenderRulers);
+				responses.add(DocumentMessage::RenderScrollbars);
+				// let document_transform_scale = self.navigation_handler.snapped_scale();
+				//
+				// let ruler_origin = self.metadata().document_to_viewport.transform_point2(DVec2::ZERO);
+				// let log = document_transform_scale.log2();
+				// let ruler_interval = if log < 0. { 100. * 2_f64.powf(-log.ceil()) } else { 100. / 2_f64.powf(log.ceil()) };
+				// let ruler_spacing = ruler_interval * document_transform_scale;
+				//
+				// responses.add(FrontendMessage::UpdateDocumentRulers {
+				// 	origin: ruler_origin.into(),
+				// 	spacing: ruler_spacing,
+				// 	interval: ruler_interval,
+				// 	visible: self.rulers_visible,
+				// });
+				// info!(responses);
+			}
 			Undo => {
 				self.undo_in_progress = true;
 				responses.add(BroadcastEvent::ToolAbort);

editor/src/messages/portfolio/menu_bar/menu_bar_message_handler.rs

@@ -311,13 +311,22 @@ impl LayoutHolder for MenuBarMessageHandler {
 							..MenuBarEntry::default()
 						},
 					],
-					vec![MenuBarEntry {
-						label: "Frame Selected".into(),
-						shortcut: action_keys!(NavigationMessageDiscriminant::FitViewportToSelection),
-						action: MenuBarEntry::create_action(|_| NavigationMessage::FitViewportToSelection.into()),
-						disabled: no_active_document,
-						..MenuBarEntry::default()
-					}],
+					vec![
+						MenuBarEntry {
+							label: "Frame Selected".into(),
+							shortcut: action_keys!(NavigationMessageDiscriminant::FitViewportToSelection),
+							action: MenuBarEntry::create_action(|_| NavigationMessage::FitViewportToSelection.into()),
+							disabled: no_active_document,
+							..MenuBarEntry::default()
+						},
+						MenuBarEntry {
+							label: "Ruler".into(),
+							shortcut: action_keys!(DocumentMessageDiscriminant::ToggleRulers),
+							action: MenuBarEntry::create_action(|_| DocumentMessage::ToggleRulers.into()),
+							disabled: no_active_document,
+							..MenuBarEntry::default()
+						},
+					],
 				]),
 			),
 			MenuBarEntry::new_root(

frontend/src/components/panels/Document.svelte

@@ -57,6 +57,7 @@
 	let rulerOrigin: XY = { x: 0, y: 0 };
 	let rulerSpacing = 100;
 	let rulerInterval = 100;
+	let rulersVisible = true;
 
 	// Rendered SVG viewport data
 	let artworkSvg = "";
@@ -213,10 +214,11 @@
 		scrollbarMultiplier = multiplier;
 	}
 
-	export function updateDocumentRulers(origin: XY, spacing: number, interval: number) {
+	export function updateDocumentRulers(origin: XY, spacing: number, interval: number, visible: boolean) {
 		rulerOrigin = origin;
 		rulerSpacing = spacing;
 		rulerInterval = interval;
+		rulersVisible = visible;
 	}
 
 	// Update mouse cursor icon
@@ -371,8 +373,8 @@
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentRulers, async (data) => {
 			await tick();
 
-			const { origin, spacing, interval } = data;
-			updateDocumentRulers(origin, spacing, interval);
+			const { origin, spacing, interval, visible } = data;
+			updateDocumentRulers(origin, spacing, interval, visible);
 		});
 
 		// Update mouse cursor icon
@@ -440,13 +442,17 @@
 			</LayoutCol>
 		</LayoutCol>
 		<LayoutCol class="table">
-			<LayoutRow class="ruler-or-scrollbar top-ruler">
-				<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
-			</LayoutRow>
+			{#if rulersVisible}
+				<LayoutRow class="ruler-or-scrollbar top-ruler">
+					<RulerInput origin={rulerOrigin.x} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Horizontal" bind:this={rulerHorizontal} />
+				</LayoutRow>
+			{/if}
 			<LayoutRow class="viewport-container">
-				<LayoutCol class="ruler-or-scrollbar">
-					<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
-				</LayoutCol>
+				{#if rulersVisible}
+					<LayoutCol class="ruler-or-scrollbar">
+						<RulerInput origin={rulerOrigin.y} majorMarkSpacing={rulerSpacing} numberInterval={rulerInterval} direction="Vertical" bind:this={rulerVertical} />
+					</LayoutCol>
+				{/if}
 				<LayoutCol class="viewport-container" styles={{ cursor: canvasCursor }}>
 					{#if cursorEyedropper}
 						<EyedropperPreview

frontend/src/wasm-communication/messages.ts

@@ -473,6 +473,8 @@ export class UpdateDocumentRulers extends JsMessage {
 	readonly spacing!: number;
 
 	readonly interval!: number;
+
+	readonly visible!: boolean;
 }
 
 export class UpdateEyedropperSamplingState extends JsMessage {