set_var_format

frontend/src/platform.rs

@@ -33,8 +33,9 @@ pub async fn load_signal_and_get_timeline(
     signal_ref: wellen::SignalRef,
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
 ) -> shared::Timeline {
-    platform::load_signal_and_get_timeline(signal_ref, screen_width, block_height).await
+    platform::load_signal_and_get_timeline(signal_ref, screen_width, block_height, var_format).await
 }
 
 pub async fn unload_signal(signal_ref: wellen::SignalRef) {

frontend/src/platform/browser.rs

@@ -78,13 +78,14 @@ pub(super) async fn load_signal_and_get_timeline(
     signal_ref: wellen::SignalRef,
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
 ) -> shared::Timeline {
     let mut waveform_lock = STORE.waveform.lock().unwrap();
     let waveform = waveform_lock.as_mut().unwrap();
     waveform.load_signals_multi_threaded(&[signal_ref]);
     let signal = waveform.get_signal(signal_ref).unwrap();
     let time_table = waveform.time_table();
-    let timeline = signal_to_timeline(signal, time_table, screen_width, block_height);
+    let timeline = signal_to_timeline(signal, time_table, screen_width, block_height, var_format);
     timeline
 }
 
@@ -100,11 +101,12 @@ fn signal_to_timeline(
     time_table: &[wellen::Time],
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
 ) -> shared::Timeline {
     const MIN_BLOCK_WIDTH: u32 = 3;
     // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs`
     const LETTER_WIDTH: f64 = 9.61;
-    const LETTER_HEIGHT: u32 = 21;
+    const LETTER_HEIGHT: u32 = 18;
     const LABEL_X_PADDING: u32 = 10;
 
     let Some(last_time) = time_table.last().copied() else {
@@ -139,7 +141,7 @@ fn signal_to_timeline(
         }
 
         // @TODO cache?
-        let value = shared::VarFormat::default().format(value);
+        let value = var_format.format(value);
 
         let value_width = (value.chars().count() as f64 * LETTER_WIDTH) as u32;
         // @TODO Ellipsis instead of hiding?

frontend/src/platform/tauri.rs

@@ -21,11 +21,18 @@ pub(super) async fn load_signal_and_get_timeline(
     signal_ref: wellen::SignalRef,
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
 ) -> shared::Timeline {
+    let var_format = serde_wasm_bindgen::to_value(&var_format).unwrap_throw();
     serde_wasm_bindgen::from_value(
-        tauri_glue::load_signal_and_get_timeline(signal_ref.index(), screen_width, block_height)
+        tauri_glue::load_signal_and_get_timeline(
-            .await
+            signal_ref.index(),
-            .unwrap_throw(),
+            screen_width,
+            block_height,
+            var_format,
+        )
+        .await
+        .unwrap_throw(),
     )
     .unwrap_throw()
 }
@@ -56,6 +63,7 @@ mod tauri_glue {
             signal_ref_index: usize,
             screen_width: u32,
             block_height: u32,
+            var_format: JsValue,
         ) -> Result<JsValue, JsValue>;
 
         #[wasm_bindgen(catch)]

frontend/src/waveform_panel.rs

@@ -13,6 +13,7 @@ const ROW_GAP: u32 = 4;
 pub struct WaveformPanel {
     selected_var_refs: MutableVec<wellen::VarRef>,
     hierarchy: Mutable<Option<Rc<wellen::Hierarchy>>>,
+    canvas_controller: Mutable<ReadOnlyMutable<Option<PixiController>>>,
 }
 
 impl WaveformPanel {
@@ -23,6 +24,7 @@ impl WaveformPanel {
         Self {
             selected_var_refs,
             hierarchy,
+            canvas_controller: Mutable::new(Mutable::default().read_only()),
         }
         .root()
     }
@@ -54,11 +56,13 @@ impl WaveformPanel {
     fn canvas(&self, selected_vars_panel_height: ReadOnlyMutable<u32>) -> impl Element {
         let selected_var_refs = self.selected_var_refs.clone();
         let hierarchy = self.hierarchy.clone();
+        let canvas_controller = self.canvas_controller.clone();
         PixiCanvas::new(ROW_HEIGHT, ROW_GAP)
             .s(Align::new().top())
             .s(Width::fill())
             .s(Height::exact_signal(selected_vars_panel_height.signal()))
             .task_with_controller(move |controller| {
+                canvas_controller.set(controller.clone());
                 selected_var_refs.signal_vec().delay_remove(clone!((hierarchy) move |var_ref| {
                     clone!((var_ref, hierarchy) async move {
                         if let Some(hierarchy) = hierarchy.get_cloned() {
@@ -112,12 +116,15 @@ impl WaveformPanel {
     ) {
         let hierarchy = hierarchy.get_cloned().unwrap();
 
+        let var_format = shared::VarFormat::default();
+
         let var = hierarchy.get(var_ref);
         let signal_ref = var.signal_ref();
         let timeline = platform::load_signal_and_get_timeline(
             signal_ref,
             controller.screen_width(),
             ROW_HEIGHT,
+            var_format,
         )
         .await;
 
@@ -128,7 +135,8 @@ impl WaveformPanel {
         // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts'
         let timeline = serde_wasm_bindgen::to_value(&timeline).unwrap_throw();
         let signal_ref_index = signal_ref.index();
-        controller.push_var(signal_ref_index, timeline);
+        let var_format = serde_wasm_bindgen::to_value(&var_format).unwrap_throw();
+        controller.push_var(signal_ref_index, timeline, var_format);
     }
 
     fn selected_var_panel(
@@ -141,8 +149,8 @@ impl WaveformPanel {
         };
         let var = hierarchy.get(var_ref);
         Row::new()
-            .item(self.selected_var_name_button(var.name(&hierarchy), index))
+            .item(self.selected_var_name_button(var.name(&hierarchy), index.clone()))
-            .item(self.selected_var_format_button())
+            .item(self.selected_var_format_button(index))
             .apply(Some)
     }
 
@@ -174,9 +182,10 @@ impl WaveformPanel {
             })
     }
 
-    fn selected_var_format_button(&self) -> impl Element {
+    fn selected_var_format_button(&self, index: ReadOnlyMutable<Option<usize>>) -> impl Element {
         let var_format = Mutable::new(shared::VarFormat::default());
         let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        let canvas_controller = self.canvas_controller.clone();
         Button::new()
             .s(Height::exact(ROW_HEIGHT))
             .s(Width::exact(70))
@@ -191,6 +200,18 @@ impl WaveformPanel {
                     .child_signal(var_format.signal().map(|format| format.as_static_str())),
             )
             .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
-            .on_press(move || var_format.update(|format| format.next()))
+            .on_press(move || {
+                let next_format = var_format.get().next();
+                var_format.set(next_format);
+                if let Some(canvas_controller) = canvas_controller.get_cloned().lock_ref().as_ref()
+                {
+                    if let Some(index) = index.get() {
+                        canvas_controller.set_var_format(
+                            index,
+                            serde_wasm_bindgen::to_value(&next_format).unwrap_throw(),
+                        );
+                    }
+                }
+            })
     }
 }

frontend/src/waveform_panel/pixi_canvas.rs

@@ -52,13 +52,14 @@ impl PixiCanvas {
         let task_with_controller = Mutable::new(None);
         // -- FastWave-specific --
         let timeline_getter = Rc::new(Closure::new(
-            |signal_ref_index, screen_width, row_height| {
+            |signal_ref_index, screen_width, row_height, var_format| {
                 future_to_promise(async move {
                     let signal_ref = wellen::SignalRef::from_index(signal_ref_index).unwrap_throw();
                     let timeline = platform::load_signal_and_get_timeline(
                         signal_ref,
                         screen_width,
                         row_height,
+                        serde_wasm_bindgen::from_value(var_format).unwrap_throw(),
                     )
                     .await;
                     let timeline = serde_wasm_bindgen::to_value(&timeline).unwrap_throw();
@@ -114,8 +115,9 @@ mod js_bridge {
     type SignalRefIndex = usize;
     type ScreenWidth = u32;
     type RowHeight = u32;
+    type VarFormatJs = JsValue;
     type TimelineGetter =
-        Closure<dyn FnMut(SignalRefIndex, ScreenWidth, RowHeight) -> TimelinePromise>;
+        Closure<dyn FnMut(SignalRefIndex, ScreenWidth, RowHeight, VarFormatJs) -> TimelinePromise>;
 
     // Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts`
     #[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")]
@@ -145,11 +147,19 @@ mod js_bridge {
 
         // -- FastWave-specific --
 
+        #[wasm_bindgen(method)]
+        pub fn set_var_format(this: &PixiController, index: usize, var_format: JsValue);
+
         #[wasm_bindgen(method)]
         pub fn remove_var(this: &PixiController, index: usize);
 
         #[wasm_bindgen(method)]
-        pub fn push_var(this: &PixiController, signal_ref_index: usize, timeline: JsValue);
+        pub fn push_var(
+            this: &PixiController,
+            signal_ref_index: usize,
+            timeline: JsValue,
+            var_format: JsValue,
+        );
 
         #[wasm_bindgen(method)]
         pub fn pop_var(this: &PixiController);

frontend/typescript/bundles/pixi_canvas.js

@@ -35156,7 +35156,7 @@ var PixiController = class {
     const width_changed = width !== this.previous_parent_width;
     this.previous_parent_width = width;
     if (width_changed) {
-      await this.redraw_rows();
+      await this.redraw_all_rows();
     }
   }
   destroy() {
@@ -35175,20 +35175,35 @@ var PixiController = class {
     return this.app.screen.width;
   }
   // -- FastWave-specific --
-  async redraw_rows() {
+  async redraw_all_rows() {
     await Promise.all(this.var_signal_rows.map(async (row) => {
-      const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height);
+      const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format);
       row.redraw(timeline);
     }));
   }
+  async redraw_row(index) {
+    const row = this.var_signal_rows[index];
+    if (typeof row !== "undefined") {
+      const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format);
+      row.redraw(timeline);
+    }
+  }
+  async set_var_format(index, var_format) {
+    const row = this.var_signal_rows[index];
+    if (typeof row !== "undefined") {
+      row.set_var_format(var_format);
+      this.redraw_row(index);
+    }
+  }
   remove_var(index) {
     if (typeof this.var_signal_rows[index] !== "undefined") {
       this.var_signal_rows[index].destroy();
     }
   }
-  push_var(signal_ref_index, timeline) {
+  push_var(signal_ref_index, timeline, var_format) {
     new VarSignalRow(
       signal_ref_index,
+      var_format,
       timeline,
       this.app,
       this.var_signal_rows,
@@ -35206,6 +35221,7 @@ var PixiController = class {
 };
 var VarSignalRow = class {
   signal_ref_index;
+  var_format;
   timeline;
   app;
   owner;
@@ -35223,8 +35239,9 @@ var VarSignalRow = class {
     fontSize: 16,
     fontFamily: '"Courier New", monospace'
   });
-  constructor(signal_ref_index, timeline, app, owner, rows_container, row_height, row_gap) {
+  constructor(signal_ref_index, var_format, timeline, app, owner, rows_container, row_height, row_gap) {
     this.signal_ref_index = signal_ref_index;
+    this.var_format = var_format;
     this.timeline = timeline;
     this.app = app;
     this.row_height = row_height;
@@ -35244,6 +35261,9 @@ var VarSignalRow = class {
     this.row_container.addChild(this.signal_blocks_container);
     this.draw();
   }
+  set_var_format(var_format) {
+    this.var_format = var_format;
+  }
   redraw(timeline) {
     this.timeline = timeline;
     this.draw();

frontend/typescript/bundles/tauri_glue.js

@@ -2520,8 +2520,8 @@ async function pick_and_load_waveform() {
 async function get_hierarchy() {
   return await invoke2("get_hierarchy");
 }
-async function load_signal_and_get_timeline(signal_ref_index, screen_width, block_height) {
+async function load_signal_and_get_timeline(signal_ref_index, screen_width, block_height, var_format) {
-  return await invoke2("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height });
+  return await invoke2("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height, var_format });
 }
 async function unload_signal(signal_ref_index) {
   return await invoke2("unload_signal", { signal_ref_index });

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -16,7 +16,18 @@ type TimeLineBlockLabel = {
     y: number,
 }
 
-type TimelineGetter = (signal_ref_index: number, screen_width: number, row_height: number) => Promise<Timeline>;
+// @TODO sync with Rust
+enum VarFormat {
+    ASCII,
+    Binary,
+    BinaryWithGroups,
+    Hexadecimal,
+    Octal,
+    Signed,
+    Unsigned,
+}
+
+type TimelineGetter = (signal_ref_index: number, screen_width: number, row_height: number, var_format: VarFormat) => Promise<Timeline>;
 
 export class PixiController {
     app: Application
@@ -26,7 +37,7 @@ export class PixiController {
     row_height: number;
     row_gap: number;
     previous_parent_width: number | null;
-    timeline_getter: TimelineGetter
+    timeline_getter: TimelineGetter;
 
     constructor(row_height: number, row_gap: number, timeline_getter: TimelineGetter) {
         this.app = new Application();
@@ -51,7 +62,7 @@ export class PixiController {
         const width_changed = width !== this.previous_parent_width;
         this.previous_parent_width = width;
         if (width_changed) {
-            await this.redraw_rows();
+            await this.redraw_all_rows();
         }
     }
 
@@ -74,22 +85,39 @@ export class PixiController {
 
     // -- FastWave-specific --
 
-    async redraw_rows() {
+    async redraw_all_rows() {
         await Promise.all(this.var_signal_rows.map(async row => { 
-            const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height);
+            const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format);
             row.redraw(timeline);
         }))
     }
 
+    async redraw_row(index: number) {
+        const row = this.var_signal_rows[index];
+        if (typeof row !== 'undefined') {
+            const timeline = await this.timeline_getter(row.signal_ref_index, this.app.screen.width, this.row_height, row.var_format);
+            row.redraw(timeline);
+        }
+    }
+
+    async set_var_format(index: number, var_format: VarFormat) {
+        const row = this.var_signal_rows[index];
+        if (typeof row !== 'undefined') {
+            row.set_var_format(var_format);
+            this.redraw_row(index);
+        }
+    }
+
     remove_var(index: number) {
         if (typeof this.var_signal_rows[index] !== 'undefined') {
             this.var_signal_rows[index].destroy();
         }
     }
 
-    push_var(signal_ref_index: number, timeline: Timeline) {
+    push_var(signal_ref_index: number, timeline: Timeline, var_format: VarFormat) {
         new VarSignalRow(
             signal_ref_index,
+            var_format,
             timeline,
             this.app,
             this.var_signal_rows,
@@ -110,6 +138,7 @@ export class PixiController {
 
 class VarSignalRow {
     signal_ref_index: number;
+    var_format: VarFormat;
     timeline: Timeline;
     app: Application;
     owner: Array<VarSignalRow>;
@@ -130,6 +159,7 @@ class VarSignalRow {
 
     constructor(
         signal_ref_index: number,
+        var_format: VarFormat,
         timeline: Timeline,
         app: Application,
         owner: Array<VarSignalRow>, 
@@ -138,6 +168,7 @@ class VarSignalRow {
         row_gap: number,
     ) {
         this.signal_ref_index = signal_ref_index;
+        this.var_format = var_format;
         this.timeline = timeline;
         this.app = app;
 
@@ -168,6 +199,10 @@ class VarSignalRow {
         this.draw();
     }
 
+    set_var_format(var_format: VarFormat) {
+        this.var_format = var_format;
+    }
+
     redraw(timeline: Timeline) {
         this.timeline = timeline;
         this.draw();

frontend/typescript/tauri_glue/tauri_glue.ts

@@ -9,6 +9,7 @@ type WellenHierarchy = unknown;
 type WellenTimeTable = unknown;
 type WellenSignal = unknown;
 type Timeline = unknown;
+type VarFormat = unknown;
 
 export async function show_window(): Promise<void> {
     return await invoke("show_window");
@@ -22,8 +23,13 @@ export async function get_hierarchy(): Promise<WellenHierarchy> {
     return await invoke("get_hierarchy");
 }
 
-export async function load_signal_and_get_timeline(signal_ref_index: number, screen_width: number, block_height: number): Promise<Timeline> {
+export async function load_signal_and_get_timeline(
-    return await invoke("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height });
+    signal_ref_index: number, 
+    screen_width: number, 
+    block_height: number,
+    var_format: VarFormat,
+): Promise<Timeline> {
+    return await invoke("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height, var_format });
 }
 
 export async function unload_signal(signal_ref_index: number): Promise<void> {

shared/src/var_format.rs

@@ -1,4 +1,7 @@
-#[derive(Default, Clone, Copy, Debug)]
+use moonlight::*;
+
+#[derive(Default, Clone, Copy, Debug, Serialize, Deserialize)]
+#[serde(crate = "serde")]
 pub enum VarFormat {
     ASCII,
     Binary,
@@ -55,12 +58,14 @@ impl VarFormat {
             }
             VarFormat::Binary => value,
             VarFormat::BinaryWithGroups => {
+                let char_count = value.len();
                 value
                     .chars()
                     .enumerate()
                     .fold(String::new(), |mut value, (index, one_or_zero)| {
                         value.push(one_or_zero);
-                        if (index + 1) % 4 == 0 {
+                        let is_last = index == char_count - 1;
+                        if !is_last && (index + 1) % 4 == 0 {
                             value.push(' ');
                         }
                         value

src-tauri/src/lib.rs

@@ -44,6 +44,7 @@ async fn load_signal_and_get_timeline(
     signal_ref_index: usize,
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
     store: tauri::State<'_, Store>,
 ) -> Result<serde_json::Value, ()> {
     // @TODO run (all?) in a blocking thread?
@@ -53,7 +54,7 @@ async fn load_signal_and_get_timeline(
     waveform.load_signals_multi_threaded(&[signal_ref]);
     let signal = waveform.get_signal(signal_ref).unwrap();
     let time_table = waveform.time_table();
-    let timeline = signal_to_timeline(signal, time_table, screen_width, block_height);
+    let timeline = signal_to_timeline(signal, time_table, screen_width, block_height, var_format);
     Ok(serde_json::to_value(timeline).unwrap())
 }
 
@@ -94,11 +95,12 @@ fn signal_to_timeline(
     time_table: &[wellen::Time],
     screen_width: u32,
     block_height: u32,
+    var_format: shared::VarFormat,
 ) -> shared::Timeline {
     const MIN_BLOCK_WIDTH: u32 = 3;
     // Courier New, 16px, sync with `label_style` in `pixi_canvas.rs`
     const LETTER_WIDTH: f64 = 9.61;
-    const LETTER_HEIGHT: u32 = 21;
+    const LETTER_HEIGHT: u32 = 18;
     const LABEL_X_PADDING: u32 = 10;
 
     let Some(last_time) = time_table.last().copied() else {
@@ -133,7 +135,7 @@ fn signal_to_timeline(
         }
 
         // @TODO cache?
-        let value = shared::VarFormat::default().format(value);
+        let value = var_format.format(value);
 
         let value_width = (value.chars().count() as f64 * LETTER_WIDTH) as u32;
         // @TODO Ellipsis instead of hiding?