Bind grid navigation paths through Rml data

Author: gajop

native/src/sbc/panels/controls/asset_picker.rs

@@ -158,7 +158,7 @@ impl AssetPicker {
                 r#"<div class="dialog-content">"#,
                 r#"<div class="asset-path-nav">"#,
                 r#"<button id="asset-up" class="dialog-button">Up</button>"#,
-                r#"<span class="asset-path">{{ path }}</span></div>"#,
+                r#"<span class="asset-path">{{{{ path }}}}</span></div>"#,
                 r#"{grid}"#,
                 r#"</div>"#,
                 r#"<div class="dialog-footer">"#,
@@ -243,6 +243,7 @@ impl Modal for AssetPicker {
             .rml_ui()
             .create_data_model(context, "asset_picker")?;
         self.path = Some(data_model.bind("path", String::new())?);
+        self.grid.prepare_data_model(&data_model)?;
         Ok(())
     }
 

native/src/sbc/panels/controls/grid.rs

@@ -13,7 +13,7 @@ use std::rc::Rc;
 
 use spring_native::{
     prelude::{Error, NativeInterfaceRef},
-    RmlDataTextRows,
+    RmlDataModel, RmlDataTextRows, RmlDataVariable,
 };
 
 use crate::sbc::vfs::{join_entry, leaf, normalize_extensions, vfs_files};
@@ -59,6 +59,10 @@ pub(crate) struct GridView {
     clicks: ClickQueue,
     item_size: u32,
     navigation: Option<GridNavigation>,
+    /// The navigation breadcrumb belongs to the surrounding screen's model.
+    /// Unlike the grid rows, it exists in markup parsed before this grid has a
+    /// chance to create its own item model.
+    navigation_path: Option<RmlDataVariable<'static, String>>,
     /// Engine-owned text collection backing the static `data-for` scaffold.
     /// It becomes invalid with its document, so `render` recreates it after a
     /// panel reload.
@@ -80,6 +84,7 @@ impl GridView {
             clicks: Rc::new(RefCell::new(Vec::new())),
             item_size,
             navigation: None,
+            navigation_path: None,
             rows: None,
             model_context: None,
             bound_document: None,
@@ -199,11 +204,16 @@ impl GridView {
 
     pub(crate) fn container_rml(&self) -> String {
         if self.navigation.is_some() {
+            let path = self
+                .navigation_path
+                .as_ref()
+                .map(|_| format!("{{{{ {} }}}}", self.navigation_path_name()))
+                .unwrap_or_default();
             return format!(
                 r#"<div id="{id}-picker" class="grid-picker">
                     <div class="grid-navigation">
                         <button id="{id}-up" class="dialog-button">Up</button>
-                        <span id="{id}-path" class="asset-path"></span>
+                        <span id="{id}-path" class="asset-path">{path}</span>
                     </div>
                     <div id="{id}" class="grid-container"></div>
                 </div>"#,
@@ -221,8 +231,24 @@ impl GridView {
         self.items_dirty = true;
     }
 
+    /// Bind the breadcrumb before its containing markup is parsed. The item
+    /// rows intentionally keep their own short-lived model because their
+    /// scaffold is inserted only after the grid knows its document context.
+    pub(crate) fn prepare_data_model(
+        &mut self,
+        model: &RmlDataModel<'static>,
+    ) -> Result<(), Error> {
+        let Some(navigation) = &self.navigation else {
+            return Ok(());
+        };
+        self.navigation_path =
+            Some(model.bind(&self.navigation_path_name(), navigation.dir.clone())?);
+        Ok(())
+    }
+
     /// Drop document-owned bindings after its panel has been rebuilt.
     pub(crate) fn forget_bindings(&mut self) {
+        self.navigation_path = None;
         self.rows = None;
         self.model_context = None;
         self.bound_document = None;
@@ -242,6 +268,10 @@ impl GridView {
         self.forget_bindings();
         Ok(())
     }
+
+    fn navigation_path_name(&self) -> String {
+        format!("{}_path", self.model_name())
+    }
 }
 
 /// VFS listing for the asset picker: directories first, then files, both sorted.

native/src/sbc/panels/controls/grid/render.rs

@@ -100,9 +100,14 @@ impl GridView {
             return Ok(());
         };
         let rml = interface.rml_ui();
-        if let Some(path) =
+        if let Some(path) = &self.navigation_path {
+            path.set(navigation.dir.clone())?;
+        } else if let Some(path) =
             element_by_id(interface, document, &format!("{}-path", self.container_id))
         {
+            // Grids may also be mounted by legacy callers that do not own a
+            // pre-parsed data model yet. Keep that path working while those
+            // callers are migrated.
             rml.element_set_inner_rml(path, &escape_rml(&navigation.dir))?;
         }
         if let Some(up) = element_by_id(interface, document, &format!("{}-up", self.container_id)) {

native/src/sbc/panels/dialogs/file_dialog.rs

@@ -193,11 +193,11 @@ impl FileDialog {
             concat!(
                 r#"<div id="file-dialog" class="picker-backdrop hidden" data-model="file_dialog">"#,
                 r#"<div class="dialog picker-dialog asset-dialog">"#,
-                r#"<div class="dialog-header"><span class="dialog-title">{{ title }}</span></div>"#,
+                r#"<div class="dialog-header"><span class="dialog-title">{{{{ title }}}}</span></div>"#,
                 r#"<div class="dialog-content">"#,
                 r#"<div class="asset-path-nav">"#,
                 r#"<button id="fd-up" class="dialog-button">Up</button>"#,
-                r#"<span class="asset-path">{{ path }}</span></div>"#,
+                r#"<span class="asset-path">{{{{ path }}}}</span></div>"#,
                 r#"{grid}"#,
                 r#"{form}"#,
                 r#"</div>"#,
@@ -347,6 +347,8 @@ impl Modal for FileDialog {
         self.title = Some(data_model.bind("title", String::new())?);
         self.path = Some(data_model.bind("path", String::new())?);
         self.file_type_options = Some(data_model.bind_option_rows("types")?);
+        self.form.prepare_data_model(&data_model)?;
+        self.grid.prepare_data_model(&data_model)?;
         Ok(())
     }
 

native/src/sbc/panels/dialogs/form.rs

@@ -4,7 +4,10 @@
 //! DOM reads/writes, and value storage remain owned by `Runtime` and the panel's
 //! shared input/session pipeline.
 
-use spring_native::prelude::{Error, NativeInterfaceRef};
+use spring_native::{
+    prelude::{Error, NativeInterfaceRef},
+    RmlDataModel,
+};
 
 use crate::sbc::command_system::model::Models;
 use crate::sbc::panels::editor::Editor;
@@ -74,6 +77,16 @@ impl<Id: Copy + Eq + 'static> DialogForm<Id> {
         self.runtime.generate_rml()
     }
 
+    /// Prepare the form's fields in the modal's model before its RML is
+    /// parsed. This keeps dialog controls on the same typed update path as
+    /// editor controls.
+    pub(crate) fn prepare_data_model(
+        &mut self,
+        model: &RmlDataModel<'static>,
+    ) -> Result<(), Error> {
+        self.runtime.prepare_data_model(model)
+    }
+
     pub(crate) fn bind(
         &mut self,
         interface: &NativeInterfaceRef,

native/src/sbc/panels/fields/asset.rs

@@ -58,7 +58,11 @@ impl AssetField {
             "field_{}_display",
             self.name
                 .chars()
-                .map(|character| if character.is_ascii_alphanumeric() { character } else { '_' })
+                .map(|character| if character.is_ascii_alphanumeric() {
+                    character
+                } else {
+                    '_'
+                })
                 .collect::<String>(),
         )
     }

native/src/sbc/panels/runtime/adapter.rs

@@ -197,6 +197,9 @@ impl<B: Behavior> Editor for Runtime<B> {
         for entry in self.model.fields_mut() {
             entry.field.prepare_data_model(model)?;
         }
+        for grid in self.model.grids_mut() {
+            grid.prepare_data_model(model)?;
+        }
         Ok(())
     }
 

native/src/sbc/panels/runtime/typed_fields.rs

@@ -2,7 +2,10 @@
 //! the live value. Editor code reads and writes through typed accessors; the
 //! DOM plumbing reuses the dyn `Field` implementations underneath.
 
-use spring_native::prelude::{Error, NativeInterfaceRef};
+use spring_native::{
+    prelude::{Error, NativeInterfaceRef},
+    RmlDataModel,
+};
 
 use crate::sbc::panels::controls::grid::GridView;
 use crate::sbc::panels::field::{Field, FieldValue};
@@ -302,6 +305,13 @@ impl AssetGrid {
         self.grid.container_rml()
     }
 
+    pub(crate) fn prepare_data_model(
+        &mut self,
+        model: &RmlDataModel<'static>,
+    ) -> Result<(), Error> {
+        self.grid.prepare_data_model(model)
+    }
+
     pub(crate) fn bind(
         &mut self,
         interface: &NativeInterfaceRef,

native/src/sbc/project/new_project_dialog.rs

@@ -242,6 +242,7 @@ impl Modal for NewProjectDialog {
             .rml_ui()
             .create_data_model(context, "new_project")?;
         self.map_options = Some(data_model.bind_option_rows("maps")?);
+        self.form.prepare_data_model(&data_model)?;
         Ok(())
     }