Match the original property widgets

Port the per-type widget behaviors from the old src/widgets/ files:

- Numbers (int/float): paired input + range slider like number.js
  buildSliderInput. The slider window derives from a range anchor
  (half = |anchor|*10 + 10, capped at 10M for ints / 1M for floats),
  frozen while scrubbing so dragging to the edge cannot grow the range;
  re-anchors on manual edits, external changes (undo/redo) and scrub
  release. Scrubs coalesce into a single undo entry.
- Colors: swatch + R/G/B/A channel badges with 0-255 clamped inputs
  (color.js), now also triggered by fields the game schema declares as
  Color, not just *color* key names.
- Vectors: X/Y/Z/W axis badges on inline components (vec.js); expanding
  the array gives full slider+input rows per component.
- resource_name/soundevent/panorama: text field plus a browse button
  with the original per-kind file filters from resource.js (sound:
  vsndevts/vsndstck/wav/mp3, panorama: images/layouts, resource:
  vmdl/vpcf/vnmskel/vmat). Dialogs run on a worker thread; picked paths
  are made document-relative with forward slashes, mirroring the old
  Electron picker's relativeTo behavior.

https://claude.ai/code/session_01N8MUF11rARS9ZhHPwLtPmh

Author: dertwist

crates/vdata-editor/src/doc.rs

@@ -122,6 +122,12 @@ pub struct TreeView {
     pub renaming: Option<(NodeId, String)>,
     /// Row index to scroll to on the next frame.
     pub scroll_to_row: Option<usize>,
+    /// Resource browse dialog in flight: target node, typed kind, receiver.
+    pub pending_pick: Option<(
+        NodeId,
+        String,
+        std::sync::mpsc::Receiver<Option<std::path::PathBuf>>,
+    )>,
 }
 
 impl TreeView {

crates/vdata-editor/src/ui/mod.rs

@@ -5,3 +5,4 @@ pub mod status;
 pub mod text;
 pub mod theme;
 pub mod tree;
+pub mod widgets;

crates/vdata-editor/src/ui/tree.rs

@@ -15,6 +15,7 @@ use crate::schema::SchemaDb;
 
 use super::icons;
 use super::theme::Palette;
+use super::widgets;
 
 pub const ROW_HEIGHT: f32 = 22.0;
 
@@ -170,6 +171,27 @@ pub fn show(
 ) {
     let mut actions: Vec<TreeAction> = Vec::new();
 
+    // Resolve a finished resource-browse dialog into an edit.
+    if let Some((id, kind, rx)) = doc.tree_view.pending_pick.take() {
+        match rx.try_recv() {
+            Ok(Some(path)) => {
+                let base = doc.file_path.as_deref().and_then(|p| p.parent());
+                let value = widgets::relativize_path(&path, base);
+                actions.push(TreeAction::SetScalar {
+                    id,
+                    new: Scalar::Typed { kind, value },
+                    label: "Pick resource",
+                });
+            }
+            Ok(None) => {} // dialog cancelled
+            Err(std::sync::mpsc::TryRecvError::Empty) => {
+                doc.tree_view.pending_pick = Some((id, kind, rx));
+                ui.ctx().request_repaint_after(std::time::Duration::from_millis(100));
+            }
+            Err(std::sync::mpsc::TryRecvError::Disconnected) => {}
+        }
+    }
+
     // ---- Toolbar ----
     ui.horizontal(|ui| {
         ui.add_space(2.0);
@@ -658,19 +680,17 @@ fn value_ui(
             }
         }
         Payload::Scalar(Scalar::Int(i)) => {
-            let mut v = i;
-            if ui.add(DragValue::new(&mut v).speed(1)).changed() {
+            // Paired input + adaptive-range slider, like the old number.js.
+            if let Some(v) = widgets::slider_input(ui, ("num", id), i as f64, true) {
                 actions.push(TreeAction::SetScalar {
                     id,
-                    new: Scalar::Int(v),
+                    new: Scalar::Int(v as i64),
                     label: "Edit number",
                 });
             }
         }
         Payload::Scalar(Scalar::Double(d)) => {
-            let mut v = d;
-            let speed = (v.abs() * 0.01).clamp(0.01, 10.0);
-            if ui.add(DragValue::new(&mut v).speed(speed)).changed() {
+            if let Some(v) = widgets::slider_input(ui, ("num", id), d, false) {
                 actions.push(TreeAction::SetScalar {
                     id,
                     new: Scalar::Double(v),
@@ -683,14 +703,40 @@ fn value_ui(
         }
         Payload::Scalar(Scalar::Typed { kind, value }) => {
             ui.label(RichText::new(format!("{kind}:")).color(palette.typed).small());
-            let avail = ui.available_width() - 8.0;
+            let avail = ui.available_width() - 34.0;
             if let Some(new) = editable_text(ui, ("typed", id), &value, avail, None) {
                 actions.push(TreeAction::SetScalar {
                     id,
-                    new: Scalar::Typed { kind, value: new },
+                    new: Scalar::Typed {
+                        kind: kind.clone(),
+                        value: new,
+                    },
                     label: "Edit value",
                 });
             }
+            // Browse button with the original per-kind file filters.
+            let glyph = widgets::resource_button_glyph(&kind);
+            let browse = ui.small_button(glyph).on_hover_text(match kind.as_str() {
+                "soundevent" => "Sound event",
+                "panorama" => "Panorama path",
+                _ => "Resource path",
+            });
+            if browse.clicked() && doc.tree_view.pending_pick.is_none() {
+                let (filter_name, extensions) = widgets::resource_filters(&kind);
+                let dir = doc
+                    .file_path
+                    .as_deref()
+                    .and_then(|p| p.parent().map(std::path::Path::to_path_buf));
+                let (tx, rx) = std::sync::mpsc::channel();
+                doc.tree_view.pending_pick = Some((id, kind, rx));
+                std::thread::spawn(move || {
+                    let mut dialog = rfd::FileDialog::new().add_filter(filter_name, extensions);
+                    if let Some(dir) = dir {
+                        dialog = dialog.set_directory(dir);
+                    }
+                    let _ = tx.send(dialog.pick_file());
+                });
+            }
         }
         Payload::Scalar(Scalar::Comment(text)) => {
             let avail = ui.available_width() - 8.0;
@@ -708,7 +754,7 @@ fn value_ui(
             ui.label(RichText::new("null").color(palette.badge_null).italics());
         }
         Payload::Array(children) => {
-            if !inline_vector_ui(ui, doc, palette, id, &children, actions) {
+            if !inline_vector_ui(ui, doc, schema, palette, id, &children, actions) {
                 container_summary_ui(ui, doc, palette, id, false);
             }
         }
@@ -844,9 +890,11 @@ fn string_value_ui(
 
 /// Inline editors for short numeric arrays (vectors and colors).
 /// Returns false when the array should render as a normal container row.
+#[allow(clippy::too_many_arguments)]
 fn inline_vector_ui(
     ui: &mut egui::Ui,
     doc: &mut Document,
+    schema: Option<&SchemaDb>,
     palette: &Palette,
     id: NodeId,
     children: &[NodeId],
@@ -863,9 +911,13 @@ fn inline_vector_ui(
         }
     }
 
-    // Color swatch for [r, g, b] / [r, g, b, a] byte arrays under *color* keys.
+    // Color swatch for [r, g, b] / [r, g, b, a] byte arrays under *color*
+    // keys, or fields the game schema declares as `Color`.
     let key = &doc.model.node(id).key;
-    let is_colorish = ci_contains(key, "color")
+    let schema_says_color = schema
+        .and_then(|db| db.field_widgets.get(key))
+        .is_some_and(|hint| *hint == crate::schema::WidgetHint::Color);
+    let is_colorish = (ci_contains(key, "color") || schema_says_color)
         && children.len() >= 3
         && values
             .iter()
@@ -896,26 +948,33 @@ fn inline_vector_ui(
         }
     }
 
-    const AXES: [&str; 4] = ["x", "y", "z", "w"];
+    // Per-component editors with the original axis/channel badges
+    // (X/Y/Z/W from vec.js, R/G/B/A from color.js). Expanding the array
+    // exposes full slider+input rows per component.
+    const AXES: [&str; 4] = ["X", "Y", "Z", "W"];
+    const CHANNELS: [&str; 4] = ["R", "G", "B", "A"];
+    let labels = if is_colorish { &CHANNELS } else { &AXES };
     for (i, &child) in children.iter().enumerate() {
-        if !is_colorish {
-            ui.label(RichText::new(AXES[i]).color(palette.dim).small());
-        }
+        ui.label(RichText::new(labels[i]).color(palette.dim).small());
         match values[i] {
             Scalar::Int(v) => {
                 let mut v = v;
-                if ui.add(DragValue::new(&mut v).speed(1)).changed() {
+                let mut drag = DragValue::new(&mut v).speed(1);
+                if is_colorish {
+                    drag = drag.range(0..=255);
+                }
+                if ui.add(drag).changed() {
                     actions.push(TreeAction::SetScalar {
                         id: child,
                         new: Scalar::Int(v),
-                        label: "Edit vector",
+                        label: if is_colorish { "Edit color" } else { "Edit vector" },
                     });
                 }
             }
             Scalar::Double(v) => {
                 let mut v = v;
                 let speed = (v.abs() * 0.01).clamp(0.01, 10.0);
-                if ui.add(DragValue::new(&mut v).speed(speed)).changed() {
+                if ui.add(DragValue::new(&mut v).speed(speed).max_decimals(6)).changed() {
                     actions.push(TreeAction::SetScalar {
                         id: child,
                         new: Scalar::Double(v),

crates/vdata-editor/src/ui/widgets.rs

@@ -0,0 +1,168 @@
+//! Property widgets ported from the original `src/widgets/` implementations.
+//!
+//! The defining widget of the old editor is the paired **slider + input**
+//! (`number.js` `buildSliderInput`): a numeric text field next to a range
+//! slider whose bounds derive from a *range anchor* — `half = |anchor|·10+10`,
+//! capped (10 000 000 for ints, 1 000 000 for floats). The anchor is frozen
+//! while scrubbing so dragging to the edge cannot blow the range up, and
+//! re-anchors on manual edits, external changes (undo), or scrub release.
+
+use egui::{DragValue, Slider};
+
+/// Cap on the symmetric slider half-range, same constants as `number.js`.
+const INT_HALF_LIMIT: f64 = 10_000_000.0;
+const FLOAT_HALF_LIMIT: f64 = 1_000_000.0;
+
+#[derive(Clone, Copy, PartialEq)]
+struct SliderAnchor {
+    anchor: f64,
+    last_seen: f64,
+}
+
+/// Symmetric slider window for a given anchor value.
+pub fn slider_bounds(anchor: f64, is_int: bool) -> (f64, f64) {
+    let cap = if is_int { INT_HALF_LIMIT } else { FLOAT_HALF_LIMIT };
+    let mag = if anchor.is_finite() { anchor.abs() } else { 0.0 };
+    let mut half = (mag * 10.0 + 10.0).min(cap);
+    if mag > half {
+        half = cap;
+    }
+    if is_int {
+        (-half.floor(), half.ceil())
+    } else {
+        (-half, half)
+    }
+}
+
+/// Paired numeric input + adaptive-range slider. Returns the new value when
+/// either control changed it this frame.
+pub fn slider_input(ui: &mut egui::Ui, salt: (&str, u32), current: f64, is_int: bool) -> Option<f64> {
+    let id = egui::Id::new(("slider-input", salt));
+    let mut state: SliderAnchor = ui
+        .data(|d| d.get_temp(id))
+        .unwrap_or(SliderAnchor {
+            anchor: current,
+            last_seen: current,
+        });
+
+    // External change (undo/redo, text-pane apply): re-anchor, like the old
+    // widget's __vdeSetValueFromModel hook.
+    if state.last_seen != current {
+        state.anchor = current;
+    }
+
+    let mut value = current;
+    let mut changed = false;
+
+    // Manual input: commits like a DragValue (type + Enter / drag), and
+    // re-anchors the slider window.
+    let drag = if is_int {
+        DragValue::new(&mut value).speed(1)
+    } else {
+        DragValue::new(&mut value).speed(0.01).max_decimals(6)
+    };
+    if ui.add_sized([56.0, 18.0], drag).changed() {
+        if is_int {
+            value = value.round();
+        }
+        state.anchor = value;
+        changed = true;
+    }
+
+    // Range slider over the anchored window; the window is frozen during the
+    // drag so scrubbing to the edge can't grow it.
+    let (min_b, max_b) = slider_bounds(state.anchor, is_int);
+    let slider_width = (ui.available_width() - 8.0).max(40.0);
+    let mut slider_value = value.clamp(min_b, max_b);
+    ui.spacing_mut().slider_width = slider_width;
+    let slider = if is_int {
+        Slider::new(&mut slider_value, min_b..=max_b)
+            .show_value(false)
+            .step_by(1.0)
+    } else {
+        Slider::new(&mut slider_value, min_b..=max_b).show_value(false)
+    };
+    let resp = ui.add(slider);
+    if resp.changed() {
+        value = if is_int { slider_value.round() } else { slider_value };
+        changed = true;
+    }
+    if resp.drag_stopped() {
+        // Re-anchor on release so the next scrub gets a window around the
+        // new value (the old widget kept the stale anchor until a manual
+        // edit, which its own comments called out as confusing).
+        state.anchor = value;
+    }
+
+    state.last_seen = if changed { value } else { current };
+    ui.data_mut(|d| d.insert_temp(id, state));
+
+    changed.then_some(value)
+}
+
+/// File-dialog filters per typed-string kind, same lists as `resource.js`.
+pub fn resource_filters(kind: &str) -> (&'static str, &'static [&'static str]) {
+    match kind {
+        "soundevent" => ("Sound", &["vsndevts", "vsndstck", "wav", "mp3"]),
+        "panorama" => (
+            "Images / layouts",
+            &["png", "jpg", "jpeg", "psd", "svg", "vgui", "xml"],
+        ),
+        _ => (
+            "Models / particles / materials",
+            &["vmdl", "vpcf", "vnmskel", "vmat"],
+        ),
+    }
+}
+
+/// Browse-button glyph per kind (`🔊` for sound events, `📁` otherwise).
+pub fn resource_button_glyph(kind: &str) -> &'static str {
+    if kind == "soundevent" { "🔊" } else { "📁" }
+}
+
+/// Make a picked path doc-relative when possible and forward-slashed,
+/// mirroring the `relativeTo: baseDir` behaviour of the Electron picker.
+pub fn relativize_path(picked: &std::path::Path, base_dir: Option<&std::path::Path>) -> String {
+    let path = base_dir
+        .and_then(|base| picked.strip_prefix(base).ok())
+        .unwrap_or(picked);
+    path.to_string_lossy().replace('\\', "/")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn bounds_follow_the_original_formula() {
+        // value 1 → half-range 20 → [-20, 20] (the example from number.js)
+        assert_eq!(slider_bounds(1.0, false), (-20.0, 20.0));
+        assert_eq!(slider_bounds(0.0, false), (-10.0, 10.0));
+        assert_eq!(slider_bounds(-5.0, true), (-60.0, 60.0));
+        // Caps: 10M for ints, 1M for floats.
+        assert_eq!(slider_bounds(5e7, true), (-INT_HALF_LIMIT, INT_HALF_LIMIT));
+        assert_eq!(
+            slider_bounds(5e6, false),
+            (-FLOAT_HALF_LIMIT, FLOAT_HALF_LIMIT)
+        );
+    }
+
+    #[test]
+    fn filters_match_resource_js() {
+        assert_eq!(resource_filters("soundevent").1, &["vsndevts", "vsndstck", "wav", "mp3"]);
+        assert_eq!(resource_filters("panorama").0, "Images / layouts");
+        assert_eq!(resource_filters("resource_name").1[0], "vmdl");
+        assert_eq!(resource_button_glyph("soundevent"), "🔊");
+        assert_eq!(resource_button_glyph("resource_name"), "📁");
+    }
+
+    #[test]
+    fn relativize_strips_doc_dir_and_normalizes_slashes() {
+        let base = std::path::Path::new("/game/scripts");
+        let picked = std::path::Path::new("/game/scripts/models/a.vmdl");
+        assert_eq!(relativize_path(picked, Some(base)), "models/a.vmdl");
+        let outside = std::path::Path::new("/elsewhere/b.vmdl");
+        assert_eq!(relativize_path(outside, Some(base)), "/elsewhere/b.vmdl");
+        assert_eq!(relativize_path(outside, None), "/elsewhere/b.vmdl");
+    }
+}