feat(native): migrate panels to typed Rml bindings

Author: gajop

native/src/sbc/chonsole/ui/controller.rs

@@ -41,7 +41,7 @@ impl ChonsoleController {
         if self.view.process_suggestion_clicks(core) {
             self.view.refresh(interface, core)?;
         }
-        self.view.process_suggestion_hovers(interface);
+        self.view.process_suggestion_hovers();
         self.view.update(interface)
     }
     pub fn draw_screen(&mut self, interface: &NativeInterfaceRef) -> Result<(), Error> {

native/src/sbc/chonsole/ui/ui.rml

@@ -1 +1,18 @@
-<div id="native-chonsole"></div>
+<div id="native-chonsole" data-model="chonsole">
+    <div id="native-chonsole-lines" class="lines">
+        <div data-for="line : lines" class="line output-line" data-class-input-line="line.muted">{{ line.text }}</div>
+    </div>
+    <div id="native-chonsole-suggestions" class="suggestions theme-surface" data-class-hidden="suggestions_hidden">
+        <div data-for="suggestion : suggestions" data-if="suggestion.visible" class="suggestion" data-class-selected-suggestion="suggestion.selected" data-class-hovered-suggestion="suggestion.highlighted">
+            <span class="suggestion-command">{{ suggestion.label }}</span>
+            <span class="suggestion-description">{{ suggestion.detail }}</span>
+        </div>
+    </div>
+    <div id="native-chonsole-suggestion-details" class="suggestion-details theme-surface" data-class-hidden="suggestions_hidden">
+        <span class="suggestion-details-command">{{ detail_command }}</span>
+        <span class="suggestion-details-text"> {{ detail_text }}</span>
+    </div>
+    <div id="native-chonsole-input" class="input-row theme-surface">
+        <span class="prompt">&gt;</span><span class="input">{{ input_before }}</span><span class="cursor" data-if="cursor_before_selection">&nbsp;</span><span class="input selection" data-if="has_selection">{{ input_selection }}</span><span class="cursor" data-if="cursor_after_selection">&nbsp;</span><span class="input">{{ input_after }}</span>
+    </div>
+</div>

native/src/sbc/chonsole/ui/view.rs

@@ -5,7 +5,7 @@ use crate::sbc::chonsole::framework::{
     ChonsoleLine, ChonsoleLineKind, ChonsoleResponse, TextInput,
 };
 
-use super::view_render::{draw_texture_preview, render_body};
+use super::view_render::draw_texture_preview;
 use super::view_rml::{ChonsoleRml, SuggestionClickQueue, SuggestionHoverQueue};
 use super::view_suggestions::SuggestionView;
 
@@ -28,6 +28,7 @@ pub(super) struct ChonsoleView {
     suggestion_hovers: SuggestionHoverQueue,
     hovered_suggestion: Option<usize>,
     reset_suggestion_scroll: bool,
+    suggestion_events_dirty: bool,
 }
 
 impl ChonsoleView {
@@ -48,7 +49,17 @@ impl ChonsoleView {
     }
 
     pub(super) fn update(&mut self, interface: &NativeInterfaceRef) -> Result<(), Error> {
-        self.rml.update(interface)
+        self.rml.update(interface)?;
+        if self.suggestion_events_dirty {
+            self.rml.bind_suggestion_events(
+                interface,
+                self.suggestions.len(),
+                self.suggestion_clicks.clone(),
+                self.suggestion_hovers.clone(),
+            )?;
+            self.suggestion_events_dirty = false;
+        }
+        Ok(())
     }
 
     pub(super) fn draw_screen(&mut self, interface: &NativeInterfaceRef) -> Result<(), Error> {
@@ -213,7 +224,7 @@ impl ChonsoleView {
         index.is_some_and(|index| self.suggestions.select(core, &mut self.input, index))
     }
 
-    pub(super) fn process_suggestion_hovers(&mut self, interface: &NativeInterfaceRef) {
+    pub(super) fn process_suggestion_hovers(&mut self) {
         let hovered = self.suggestion_hovers.borrow_mut().pop();
         self.suggestion_hovers.borrow_mut().clear();
         let Some(hovered) = hovered else {
@@ -222,11 +233,13 @@ impl ChonsoleView {
         if hovered == self.hovered_suggestion {
             return;
         }
-        self.rml
-            .set_suggestion_hovered(interface, self.hovered_suggestion, hovered);
         self.hovered_suggestion = hovered;
-        self.rml
-            .set_suggestion_details(interface, self.suggestions.detail(hovered));
+        let _ = self
+            .rml
+            .set_suggestion_rows(&self.suggestions.rml_rows(hovered));
+        let _ = self
+            .rml
+            .set_suggestion_details(self.suggestions.detail(hovered));
     }
 
     pub(super) fn refresh(
@@ -235,7 +248,7 @@ impl ChonsoleView {
         core: &ChonsoleCore,
     ) -> Result<(), Error> {
         self.refresh_suggestions(core);
-        let body = render_body(&self.input, &self.output, &self.suggestions);
+        let suggestion_rows = self.suggestions.rml_rows(None);
         let scroll_top = (!self.reset_suggestion_scroll)
             .then(|| self.rml.suggestion_scroll_top(interface))
             .flatten();
@@ -244,16 +257,18 @@ impl ChonsoleView {
             .selected_index()
             .map(|selected| reveal_suggestion_scroll_top(scroll_top.unwrap_or_default(), selected))
             .or(scroll_top);
-        self.rml.refresh(interface, &body, scroll_top)?;
+        self.rml.refresh(
+            &self.input,
+            &self.output,
+            &suggestion_rows,
+            self.suggestions.detail(None),
+            scroll_top,
+        )?;
         self.reset_suggestion_scroll = false;
         self.hovered_suggestion = None;
         self.suggestion_hovers.borrow_mut().clear();
-        self.rml.bind_suggestion_events(
-            interface,
-            self.suggestions.len(),
-            self.suggestion_clicks.clone(),
-            self.suggestion_hovers.clone(),
-        )
+        self.suggestion_events_dirty = true;
+        Ok(())
     }
 
     pub(super) fn process_key_up(

native/src/sbc/chonsole/ui/view_render.rs

@@ -1,9 +1,8 @@
-//! Stateless rendering for the native Chonsole view.
+//! Non-Rml drawing for the native Chonsole view.
 
 use spring_native::prelude::NativeInterfaceRef;
 
-use super::view_suggestions::{escape_rml, SuggestionView};
-use crate::sbc::chonsole::framework::{ChonsoleLine, ChonsoleLineKind, TextInput};
+use crate::sbc::chonsole::framework::TextInput;
 
 pub(super) fn draw_texture_preview(interface: &NativeInterfaceRef, input: &TextInput) {
     let Some(texture) = input
@@ -32,79 +31,3 @@ pub(super) fn draw_texture_preview(interface: &NativeInterfaceRef, input: &TextI
         let _ = gfx.end_text();
     });
 }
-
-pub(super) fn render_body(
-    input: &TextInput,
-    output: &[ChonsoleLine],
-    suggestions: &SuggestionView,
-) -> String {
-    let rendered_suggestions = suggestions.render();
-    let suggestions = if rendered_suggestions.is_empty() {
-        String::new()
-    } else {
-        format!(
-            r#"<div id="native-chonsole-suggestions" class="suggestions theme-surface">{rendered_suggestions}</div><div id="native-chonsole-suggestion-details" class="suggestion-details theme-surface">{}</div>"#,
-            render_suggestion_details(suggestions.detail(None)),
-        )
-    };
-    format!(
-        r#"<div id="native-chonsole-lines" class="lines">{}</div>{}<div id="native-chonsole-input" class="input-row theme-surface"><span class="prompt">&gt;</span>{}</div>"#,
-        render_lines(output),
-        suggestions,
-        render_input(input),
-    )
-}
-
-/// Render the full command description separately from its compact list row.
-/// This strip has a fixed footprint, so selecting or hovering a command never
-/// shifts the suggestion list or its scrollbar.
-pub(super) fn render_suggestion_details(details: Option<(&str, &str)>) -> String {
-    let Some((command, description)) = details else {
-        return String::new();
-    };
-    format!(
-        r#"<span class="suggestion-details-command">{}</span><span class="suggestion-details-text"> {}</span>"#,
-        escape_rml(command),
-        escape_rml(description),
-    )
-}
-
-fn render_lines(output: &[ChonsoleLine]) -> String {
-    output
-        .iter()
-        .map(|line| {
-            let class = match line.kind {
-                ChonsoleLineKind::Input => "line input-line",
-                ChonsoleLineKind::Output => "line output-line",
-            };
-            format!(r#"<div class="{class}">{}</div>"#, escape_rml(&line.text))
-        })
-        .collect::<Vec<_>>()
-        .join("")
-}
-
-fn render_input(input: &TextInput) -> String {
-    let value = input.value();
-    match input.selection_range() {
-        Some((start, end)) if input.cursor() == start => format!(
-            r#"<span class="input">{}</span><span class="cursor">&nbsp;</span><span class="input selection">{}</span><span class="input">{}</span>"#,
-            escape_rml(&value[..start]),
-            escape_rml(&value[start..end]),
-            escape_rml(&value[end..]),
-        ),
-        Some((start, end)) => format!(
-            r#"<span class="input">{}</span><span class="input selection">{}</span><span class="cursor">&nbsp;</span><span class="input">{}</span>"#,
-            escape_rml(&value[..start]),
-            escape_rml(&value[start..end]),
-            escape_rml(&value[end..]),
-        ),
-        None => {
-            let (before, after) = value.split_at(input.cursor());
-            format!(
-                r#"<span class="input">{}</span><span class="cursor">&nbsp;</span><span class="input">{}</span>"#,
-                escape_rml(before),
-                escape_rml(after),
-            )
-        }
-    }
-}