diff --git a/frontend/src/controls_panel.rs b/frontend/src/controls_panel.rs index c6e6067..2e8f723 100644 --- a/frontend/src/controls_panel.rs +++ b/frontend/src/controls_panel.rs @@ -1,24 +1,33 @@ use crate::tauri_bridge; -use crate::HierarchyAndTimeTable; -use std::collections::VecDeque; +use crate::{HierarchyAndTimeTable, Layout}; +use futures_util::join; +use std::mem; +use std::ops::Not; use std::rc::Rc; use wellen::GetItem; -use zoon::{println, *}; +use zoon::*; -#[derive(Clone, Copy)] -struct VarForUI<'a> { - name: &'a str, +const SCOPE_VAR_ROW_MAX_WIDTH: u32 = 480; +const MILLER_COLUMN_MAX_HEIGHT: u32 = 500; + +#[derive(Clone)] +struct VarForUI { + name: Rc, var_type: wellen::VarType, var_direction: wellen::VarDirection, var_ref: wellen::VarRef, signal_type: wellen::SignalType, } -#[derive(Clone, Copy)] -struct ScopeForUI<'a> { - level: u32, - name: &'a str, +#[derive(Clone)] +struct ScopeForUI { + level: usize, + name: Rc, scope_ref: wellen::ScopeRef, + has_children: bool, + expanded: Mutable, + parent_expanded: Option>, + selected_scope_in_level: Mutable>, } #[derive(Clone)] @@ -26,17 +35,20 @@ pub struct ControlsPanel { selected_scope_ref: Mutable>, hierarchy_and_time_table: Mutable>, selected_var_refs: MutableVec, + layout: Mutable, } impl ControlsPanel { pub fn new( hierarchy_and_time_table: Mutable>, selected_var_refs: MutableVec, + layout: Mutable, ) -> impl Element { Self { selected_scope_ref: <_>::default(), hierarchy_and_time_table, selected_var_refs, + layout, } .root() } @@ -54,27 +66,54 @@ impl ControlsPanel { fn root(&self) -> impl Element { let triggers = self.triggers(); + let layout = self.layout.clone(); + let layout_and_hierarchy_signal = map_ref! { + let layout = layout.signal(), + let hierarchy_and_time_table = self.hierarchy_and_time_table.signal_cloned() => { + (*layout, hierarchy_and_time_table.clone().map(|(hierarchy, _)| hierarchy)) + } + }; Column::new() .after_remove(move |_| drop(triggers)) - .s(Scrollbars::y_and_clip_x()) - .s(Height::fill()) + .s(Width::with_signal_self( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Columns)) + .map_true(|| Width::fill()), + )) + .s(Height::with_signal_self(layout.signal().map( + move |layout| match layout { + Layout::Tree => Height::fill(), + Layout::Columns => Height::fill().max(MILLER_COLUMN_MAX_HEIGHT), + }, + ))) + .s(Scrollbars::both()) .s(Padding::all(20)) .s(Gap::new().y(40)) .s(Align::new().top()) - .item(self.load_button()) + .item( + Row::new() + .s(Gap::both(15)) + .s(Align::new().left()) + .item(self.load_button("simple.vcd")) + .item(self.load_button("wave_27.fst")) + .item(self.layout_switcher()), + ) .item_signal( self.hierarchy_and_time_table .signal_cloned() .map_some(clone!((self => s) move |(hierarchy, _)| s.scopes_panel(hierarchy))), ) - .item_signal( - self.hierarchy_and_time_table - .signal_cloned() - .map_some(clone!((self => s) move |(hierarchy, _)| s.vars_panel(hierarchy))), - ) + .item_signal(layout_and_hierarchy_signal.map( + clone!((self => s) move |(layout, hierarchy)| { + hierarchy.and_then(clone!((s) move |hierarchy| { + matches!(layout, Layout::Tree).then(move || s.vars_panel(hierarchy)) + })) + }), + )) } - fn load_button(&self) -> impl Element { + fn load_button(&self, test_file_name: &'static str) -> impl Element { let (hovered, hovered_signal) = Mutable::new_and_signal(false); let hierarchy_and_time_table = self.hierarchy_and_time_table.clone(); Button::new() @@ -88,35 +127,13 @@ impl ControlsPanel { El::new().s(Font::new().no_wrap()).child_signal( hierarchy_and_time_table .signal_ref(Option::is_some) - .map_bool(|| "Unload simple.vcd", || "Load simple.vcd"), + .map_bool( + || format!("Unload test file"), + move || format!("Load {test_file_name}"), + ), ), ) .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered)) - // @TODO REMOVE - .after_insert(clone!((hierarchy_and_time_table) move |_| { - if crate::SIMULATE_CLICKS { - let mut hierarchy_and_time_table_lock = hierarchy_and_time_table.lock_mut(); - if hierarchy_and_time_table_lock.is_some() { - *hierarchy_and_time_table_lock = None; - return; - } - drop(hierarchy_and_time_table_lock); - let hierarchy_and_time_table = hierarchy_and_time_table.clone(); - Task::start(async move { - tauri_bridge::load_waveform().await; - let hierarchy = tauri_bridge::get_hierarchy().await; - for variable in hierarchy.iter_vars() { - println!("{variable:?}"); - } - for scope in hierarchy.iter_scopes() { - println!("{scope:?}"); - } - let time_table = tauri_bridge::get_time_table().await; - println!("{time_table:?}"); - hierarchy_and_time_table.set(Some((Rc::new(hierarchy), Rc::new(time_table)))) - }) - } - })) .on_press(move || { let mut hierarchy_and_time_table_lock = hierarchy_and_time_table.lock_mut(); if hierarchy_and_time_table_lock.is_some() { @@ -126,100 +143,324 @@ impl ControlsPanel { drop(hierarchy_and_time_table_lock); let hierarchy_and_time_table = hierarchy_and_time_table.clone(); Task::start(async move { - tauri_bridge::load_waveform().await; - let hierarchy = tauri_bridge::get_hierarchy().await; - for variable in hierarchy.iter_vars() { - println!("{variable:?}"); - } - for scope in hierarchy.iter_scopes() { - println!("{scope:?}"); - } - let time_table = tauri_bridge::get_time_table().await; - println!("{time_table:?}"); + tauri_bridge::load_waveform(test_file_name).await; + let (hierarchy, time_table) = join!( + tauri_bridge::get_hierarchy(), + tauri_bridge::get_time_table() + ); hierarchy_and_time_table.set(Some((Rc::new(hierarchy), Rc::new(time_table)))) }) }) } + fn layout_switcher(&self) -> impl Element { + let layout = self.layout.clone(); + let (hovered, hovered_signal) = Mutable::new_and_signal(false); + Button::new() + .s(Padding::new().x(20).y(10)) + .s(Background::new().color_signal( + hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), + )) + .s(Align::new().left()) + .s(RoundedCorners::all(15)) + .label_signal(layout.signal().map(|layout| match layout { + Layout::Tree => "Columns", + Layout::Columns => "Tree", + })) + .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered)) + .on_press(move || { + layout.update(|layout| match layout { + Layout::Tree => Layout::Columns, + Layout::Columns => Layout::Tree, + }) + }) + } + fn scopes_panel(&self, hierarchy: Rc) -> impl Element { Column::new() + .s(Height::fill().min(150)) + .s(Scrollbars::y_and_clip_x()) .s(Gap::new().y(20)) - .item(El::new().child("Scopes")) + .s(Width::fill()) + .item_signal( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Tree)) + .map_true(|| El::new().child("Scopes")), + ) .item(self.scopes_list(hierarchy)) } fn scopes_list(&self, hierarchy: Rc) -> impl Element { + let layout = self.layout.clone(); let mut scopes_for_ui = Vec::new(); + let mut max_level_index: usize = 0; for scope_ref in hierarchy.scopes() { - let mut scope_refs = VecDeque::new(); - scope_refs.push_back((0, scope_ref)); - while let Some((level, scope_ref)) = scope_refs.pop_front() { + let mut scope_refs = Vec::new(); + scope_refs.push((0, scope_ref, None)); + let mut selected_scope_in_levels: Vec>> = + vec![<_>::default()]; + while let Some((level, scope_ref, parent_expanded)) = scope_refs.pop() { let scope = hierarchy.get(scope_ref); + let mut children = scope.scopes(&hierarchy).peekable(); + let has_children = children.peek().is_some(); + let expanded = Mutable::new(false); + if level > max_level_index { + max_level_index = level; + selected_scope_in_levels.push(<_>::default()); + } scopes_for_ui.push(ScopeForUI { level, - name: scope.name(&hierarchy), + name: Rc::new(scope.name(&hierarchy).to_owned()), scope_ref, + has_children, + expanded: expanded.clone(), + parent_expanded, + selected_scope_in_level: selected_scope_in_levels[level].clone(), }); - for scope_ref in scope.scopes(&hierarchy) { - scope_refs.push_back((level + 1, scope_ref)); + for scope_ref in children { + scope_refs.push((level + 1, scope_ref, Some(expanded.read_only()))); } } } - Column::new() - .s(Align::new().left()) - .s(Gap::new().y(10)) - .items( - scopes_for_ui - .into_iter() - .map(clone!((self => s) move |scope_for_ui| s.scope_button(scope_for_ui))), - ) + let scopes_for_ui = Rc::new(scopes_for_ui); + let s = self.clone(); + El::new() + .s(Height::fill()) + .s(Scrollbars::both()) + .s(Width::fill()) + .child_signal(layout.signal().map(move |layout| match layout { + Layout::Tree => { + Column::new() + .s(Align::new().left()) + .s(Gap::new().y(10)) + .s(Height::fill()) + .s(Scrollbars::y_and_clip_x()) + .s(Padding::new().right(15)) + .items( + scopes_for_ui + .iter() + .map(clone!((s) move |scope_for_ui| s.scope_button_row(scope_for_ui.clone()))), + ).unify() + } + Layout::Columns => { + let mut scopes_for_ui_in_levels: Vec> = vec![Vec::new(); max_level_index + 1]; + for scope_for_ui in scopes_for_ui.iter() { + scopes_for_ui_in_levels[scope_for_ui.level].push(scope_for_ui.clone()); + } + let viewport_x = Mutable::new(0); + El::new() + .s(Height::fill()) + .s(Scrollbars::x_and_clip_y()) + .s(Padding::new().bottom(15)) + .s(Width::fill()) + .viewport_x_signal(viewport_x.signal()) + .child( + Row::new() + .s(Height::fill()) + // @TODO add `width: max-content` to MoonZoon's `Width`? + .update_raw_el(|raw_el| raw_el.style("width", "max-content")) + .on_viewport_size_change(move |_, _| viewport_x.set(i32::MAX)) + .items(scopes_for_ui_in_levels.into_iter().map(|scopes_in_level| { + Column::new() + .s(Height::fill()) + .s(Scrollbars::y_and_clip_x()) + // @TODO `Width::default` add the class `exact_width` with `flex-shrink: 0;` + // We should make it more explicit / discoverable in MoonZoon + .s(Width::default()) + .s(Gap::new().y(10)) + .s(Padding::new().x(10)) + .items( + scopes_in_level + .into_iter() + .map(clone!((s) move |scope_for_ui| s.scope_button_row(scope_for_ui))) + ) + })) + .item(s.vars_panel(hierarchy.clone())) + ).unify() + } + })) } - fn scope_button(&self, scope_for_ui: ScopeForUI) -> impl Element { - let (hovered, hovered_signal) = Mutable::new_and_signal(false); + fn scope_button_row(&self, scope_for_ui: ScopeForUI) -> impl Element { + let layout = self.layout.clone(); + let (button_hovered, button_hovered_signal) = Mutable::new_and_signal(false); let selected_scope_ref = self.selected_scope_ref.clone(); let is_selected = selected_scope_ref .signal() .map(move |selected_scope_ref| selected_scope_ref == Some(scope_for_ui.scope_ref)); let background_color = map_ref! { let is_selected = is_selected, - let is_hovered = hovered_signal => match (*is_selected, *is_hovered) { + let is_hovered = button_hovered_signal => match (*is_selected, *is_hovered) { (true, _) => color!("BlueViolet"), (false, true) => color!("MediumSlateBlue"), (false, false) => color!("SlateBlue"), } }; - El::new() - // @TODO REMOVE - .after_insert( - clone!((selected_scope_ref, scope_for_ui.scope_ref => scope_ref) move |_| { - if crate::SIMULATE_CLICKS { - selected_scope_ref.set_neq(Some(scope_ref)); + let task_collapse_on_parent_collapse = { + let expanded = scope_for_ui.expanded.clone(); + scope_for_ui.parent_expanded.clone().map(|parent_expanded| { + Task::start_droppable(parent_expanded.signal().for_each_sync( + move |parent_expanded| { + if not(parent_expanded) { + expanded.set_neq(false); + } + }, + )) + }) + }; + let task_expand_or_collapse_on_selected_scope_in_level_change = { + let expanded = scope_for_ui.expanded.clone(); + let scope_ref = scope_for_ui.scope_ref; + let layout = layout.clone(); + Task::start_droppable(scope_for_ui.selected_scope_in_level.signal().for_each_sync( + move |selected_scope_in_level| { + if matches!(layout.get(), Layout::Columns) { + if let Some(selected_scope) = selected_scope_in_level { + if selected_scope == scope_ref { + return expanded.set(true); + } + } + expanded.set(false); } - }), - ) - .s(Padding::new().left(scope_for_ui.level * 30)) + }, + )) + }; + let display = signal::option( + scope_for_ui + .parent_expanded + .clone() + .map(|parent_expanded| parent_expanded.signal().map_false(|| "none")), + ) + .map(Option::flatten); + let level = scope_for_ui.level as u32; + El::new() + // @TODO Add `Display` Style to MoonZoon? Merge with `Visible` Style? + .update_raw_el(|raw_el| raw_el.style_signal("display", display)) + .s(Padding::new().left_signal(layout.signal().map(move |layout| match layout { + Layout::Tree => level * 30, + Layout::Columns => 0, + }))) + .s(Width::default().max(SCOPE_VAR_ROW_MAX_WIDTH)) + .after_remove(move |_| { + drop(task_collapse_on_parent_collapse); + drop(task_expand_or_collapse_on_selected_scope_in_level_change); + }) .child( - Button::new() - .s(Padding::new().x(15).y(5)) + Row::new() .s(Background::new().color_signal(background_color)) .s(RoundedCorners::all(15)) - .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered)) - .on_press(move || selected_scope_ref.set_neq(Some(scope_for_ui.scope_ref))) - .label(scope_for_ui.name), + .s(Clip::both()) + .s(Align::new().left()) + .items_signal_vec(layout.signal().map(clone!((self => s, scope_for_ui) move |layout| { + let toggle = scope_for_ui.has_children.then(clone!((s, scope_for_ui) move || s.scope_toggle(scope_for_ui))); + let button = s.scope_button(scope_for_ui.clone(), button_hovered.clone()); + match layout { + Layout::Tree => element_vec![toggle, button], + Layout::Columns => element_vec![button, toggle], + } + })).to_signal_vec()) ) } + fn scope_toggle(&self, scope_for_ui: ScopeForUI) -> impl Element { + let layout = self.layout.clone(); + let expanded = scope_for_ui.expanded.clone(); + let layout_and_expanded = map_ref! { + let layout = layout.signal(), + let expanded = expanded.signal() => (*layout, *expanded) + }; + let selected_scope_ref: Mutable> = self.selected_scope_ref.clone(); + let (hovered, hovered_signal) = Mutable::new_and_signal(false); + Button::new() + .s(Padding::new() + .left_signal( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Tree)) + .map_true(|| 10), + ) + .right_signal( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Columns)) + .map_true(|| 10), + )) + .s(Height::fill()) + .s(Font::new().color_signal(hovered_signal.map_true(|| color!("LightBlue")))) + .label( + El::new() + .s(Transform::with_signal_self(layout_and_expanded.map( + |(layout, expanded)| match layout { + Layout::Tree => expanded.not().then(|| Transform::new().rotate(-90)), + Layout::Columns => { + Some(Transform::new().rotate(if expanded { -90 } else { 90 })) + } + }, + ))) + .child("▼"), + ) + .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered)) + .on_press(move || match layout.get() { + Layout::Tree => { + if scope_for_ui.expanded.get() { + scope_for_ui.selected_scope_in_level.set(None); + } else { + scope_for_ui + .selected_scope_in_level + .set(Some(scope_for_ui.scope_ref)); + } + scope_for_ui.expanded.update(not) + } + Layout::Columns => { + selected_scope_ref.set_neq(None); + if scope_for_ui.expanded.get() { + scope_for_ui.selected_scope_in_level.set(None); + } else { + scope_for_ui + .selected_scope_in_level + .set(Some(scope_for_ui.scope_ref)); + } + } + }) + } + + fn scope_button( + &self, + scope_for_ui: ScopeForUI, + button_hovered: Mutable, + ) -> impl Element { + Button::new() + .s(Padding::new().x(15).y(5)) + .s(Font::new().wrap_anywhere()) + .on_hovered_change(move |is_hovered| button_hovered.set_neq(is_hovered)) + .on_press( + clone!((self.selected_scope_ref => selected_scope_ref, scope_for_ui) move || { + selected_scope_ref.set_neq(Some(scope_for_ui.scope_ref)); + scope_for_ui.selected_scope_in_level.set_neq(None); + }), + ) + .label(scope_for_ui.name) + } + fn vars_panel(&self, hierarchy: Rc) -> impl Element { let selected_scope_ref = self.selected_scope_ref.clone(); Column::new() .s(Gap::new().y(20)) - .item(El::new().child("Variables")) + .s(Height::fill().min(150)) + .s(Scrollbars::y_and_clip_x()) + .item_signal( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Tree)) + .map_true(|| El::new().child("Variables")), + ) .item_signal(selected_scope_ref.signal().map_some( clone!((self => s) move |scope_ref| s.vars_list(scope_ref, hierarchy.clone())), )) } + // @TODO Group variables? fn vars_list( &self, selected_scope_ref: wellen::ScopeRef, @@ -231,26 +472,64 @@ impl ControlsPanel { .map(|var_ref| { let var = hierarchy.get(var_ref); VarForUI { - name: var.name(&hierarchy), + name: Rc::new(var.name(&hierarchy).to_owned()), var_type: var.var_type(), var_direction: var.direction(), var_ref, signal_type: var.signal_tpe(), } }); + + // Lazy loading to not freeze the main thread + const CHUNK_SIZE: usize = 50; + let mut chunked_vars_for_ui: Vec> = <_>::default(); + let mut chunk = Vec::with_capacity(CHUNK_SIZE); + for (index, var_for_ui) in vars_for_ui.enumerate() { + chunk.push(var_for_ui); + if index % CHUNK_SIZE == 0 { + chunked_vars_for_ui.push(mem::take(&mut chunk)); + } + } + if not(chunk.is_empty()) { + chunked_vars_for_ui.push(chunk); + } + let vars_for_ui_mutable_vec = MutableVec::::new(); + let append_vars_for_ui_task = + Task::start_droppable(clone!((vars_for_ui_mutable_vec) async move { + for chunk in chunked_vars_for_ui { + Task::next_macro_tick().await; + vars_for_ui_mutable_vec.lock_mut().extend(chunk); + } + })); + Column::new() + .s(Width::with_signal_self( + self.layout + .signal() + .map(|layout| matches!(layout, Layout::Columns)) + .map_true(|| Width::default().min(SCOPE_VAR_ROW_MAX_WIDTH)), + )) .s(Align::new().left()) .s(Gap::new().y(10)) - .items(vars_for_ui.map(clone!((self => s) move |var_for_ui| s.var_row(var_for_ui)))) + .s(Height::fill()) + .s(Scrollbars::y_and_clip_x()) + .items_signal_vec( + vars_for_ui_mutable_vec + .signal_vec_cloned() + .map(clone!((self => s) move |var_for_ui| s.var_row(var_for_ui))), + ) + .after_remove(move |_| drop(append_vars_for_ui_task)) } fn var_row(&self, var_for_ui: VarForUI) -> impl Element { Row::new() .s(Gap::new().x(10)) - .item(self.var_button(var_for_ui)) - .item(self.var_tag_type(var_for_ui)) - .item(self.var_tag_index(var_for_ui)) - .item(self.var_tag_bit(var_for_ui)) + .s(Padding::new().right(15)) + .s(Width::default().max(SCOPE_VAR_ROW_MAX_WIDTH)) + .item(self.var_button(var_for_ui.clone())) + .item(self.var_tag_type(var_for_ui.clone())) + .item(self.var_tag_index(var_for_ui.clone())) + .item(self.var_tag_bit(var_for_ui.clone())) .item(self.var_tag_direction(var_for_ui)) } @@ -259,14 +538,7 @@ impl ControlsPanel { let selected_var_ref = self.selected_var_refs.clone(); El::new().child( Button::new() - // @TODO REMOVE - .after_insert( - clone!((selected_var_ref, var_for_ui.var_ref => var_ref) move |_| { - if crate::SIMULATE_CLICKS { - selected_var_ref.lock_mut().extend([var_ref, var_ref]); - } - }), - ) + .s(Font::new().wrap_anywhere()) .s(Padding::new().x(15).y(5)) .s(Background::new().color_signal( hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")), diff --git a/frontend/src/main.rs b/frontend/src/main.rs index a23c265..94629ac 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -11,8 +11,12 @@ use waveform_panel::WaveformPanel; type HierarchyAndTimeTable = (Rc, Rc); -// @TODO REMOVE -const SIMULATE_CLICKS: bool = false; +#[derive(Clone, Copy, Default)] +enum Layout { + Tree, + #[default] + Columns, +} fn main() { start_app("app", root); @@ -26,15 +30,27 @@ fn main() { fn root() -> impl Element { let hierarchy_and_time_table: Mutable> = <_>::default(); let selected_var_refs: MutableVec = <_>::default(); - Row::new() + let layout: Mutable = <_>::default(); + Column::new() .s(Height::fill()) + .s(Scrollbars::y_and_clip_x()) .s(Font::new().color(color!("Lavender"))) - .item(ControlsPanel::new( + .item( + Row::new() + .s(Height::fill()) + .s(Gap::new().x(15)) + .item(ControlsPanel::new( + hierarchy_and_time_table.clone(), + selected_var_refs.clone(), + layout.clone(), + )) + .item_signal(layout.signal().map(|layout| matches!(layout, Layout::Tree)).map_true(clone!((hierarchy_and_time_table, selected_var_refs) move || WaveformPanel::new( + hierarchy_and_time_table.clone(), + selected_var_refs.clone(), + )))) + ) + .item_signal(layout.signal().map(|layout| matches!(layout, Layout::Columns)).map_true(move || WaveformPanel::new( hierarchy_and_time_table.clone(), selected_var_refs.clone(), - )) - .item(WaveformPanel::new( - hierarchy_and_time_table, - selected_var_refs, - )) + ))) } diff --git a/frontend/src/tauri_bridge.rs b/frontend/src/tauri_bridge.rs index 68a3468..4358c01 100644 --- a/frontend/src/tauri_bridge.rs +++ b/frontend/src/tauri_bridge.rs @@ -4,8 +4,8 @@ pub async fn show_window() { tauri_glue::show_window().await } -pub async fn load_waveform() { - tauri_glue::load_waveform().await +pub async fn load_waveform(test_file_name: &'static str) { + tauri_glue::load_waveform(test_file_name).await } pub async fn get_hierarchy() -> wellen::Hierarchy { @@ -33,7 +33,7 @@ mod tauri_glue { extern "C" { pub async fn show_window(); - pub async fn load_waveform(); + pub async fn load_waveform(test_file_name: &str); pub async fn get_hierarchy() -> JsValue; diff --git a/frontend/src/waveform_panel.rs b/frontend/src/waveform_panel.rs index 61aa76c..ad090a0 100644 --- a/frontend/src/waveform_panel.rs +++ b/frontend/src/waveform_panel.rs @@ -1,9 +1,9 @@ use crate::{tauri_bridge, HierarchyAndTimeTable}; use wellen::GetItem; -use zoon::*; +use zoon::{eprintln, *}; mod pixi_canvas; -use pixi_canvas::PixiCanvas; +use pixi_canvas::{PixiCanvas, PixiController}; const ROW_HEIGHT: u32 = 40; const ROW_GAP: u32 = 4; @@ -29,7 +29,7 @@ impl WaveformPanel { fn root(&self) -> impl Element { let selected_vars_panel_height_getter: Mutable = <_>::default(); Row::new() - .s(Padding::all(20).left(0)) + .s(Padding::all(20)) .s(Scrollbars::y_and_clip_x()) .s(Width::growable()) .s(Height::fill()) @@ -67,7 +67,13 @@ impl WaveformPanel { })).for_each(clone!((controller, hierarchy_and_time_table) move |vec_diff| { clone!((controller, hierarchy_and_time_table) async move { match vec_diff { - VecDiff::Replace { values: _ } => { todo!("`task_with_controller` + `Replace`") }, + VecDiff::Replace { values } => { + let controller = controller.wait_for_some_cloned().await; + controller.clear_vars(); + for var_ref in values { + Self::push_var(&controller, &hierarchy_and_time_table, var_ref).await; + } + }, VecDiff::InsertAt { index: _, value: _ } => { todo!("`task_with_controller` + `InsertAt`") } VecDiff::UpdateAt { index: _, value: _ } => { todo!("`task_with_controller` + `UpdateAt`") } VecDiff::RemoveAt { index } => { @@ -78,20 +84,7 @@ impl WaveformPanel { VecDiff::Move { old_index: _, new_index: _ } => { todo!("`task_with_controller` + `Move`") } VecDiff::Push { value: var_ref } => { if let Some(controller) = controller.lock_ref().as_ref() { - let (hierarchy, time_table) = hierarchy_and_time_table.get_cloned().unwrap(); - let var = hierarchy.get(var_ref); - let signal_ref = var.signal_ref(); - let signal = tauri_bridge::load_and_get_signal(signal_ref).await; - - let timescale = hierarchy.timescale(); - zoon::println!("{timescale:?}"); - - // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts' - let mut timeline: Vec<(wellen::Time, Option)> = time_table.iter().map(|time| (*time, None)).collect(); - for (time_index, signal_value) in signal.iter_changes() { - timeline[time_index as usize].1 = Some(signal_value.to_string()); - } - controller.push_var(serde_wasm_bindgen::to_value(&timeline).unwrap_throw()); + Self::push_var(controller, &hierarchy_and_time_table, var_ref).await; } } VecDiff::Pop {} => { @@ -110,6 +103,42 @@ impl WaveformPanel { }) } + async fn push_var( + controller: &PixiController, + hierarchy_and_time_table: &Mutable>, + var_ref: wellen::VarRef, + ) { + let (hierarchy, time_table) = hierarchy_and_time_table.get_cloned().unwrap(); + if time_table.is_empty() { + eprintln!("timetable is empty"); + return; + } + let last_time = time_table.last().copied().unwrap_throw(); + + let var = hierarchy.get(var_ref); + let signal_ref = var.signal_ref(); + let signal = tauri_bridge::load_and_get_signal(signal_ref).await; + + let timescale = hierarchy.timescale(); + // @TODO remove + zoon::println!("{timescale:?}"); + + let mut timeline: Vec<(wellen::Time, String)> = signal + .iter_changes() + .map(|(time_index, signal_value)| { + (time_table[time_index as usize], signal_value.to_string()) + }) + .collect(); + if timeline.is_empty() { + eprintln!("timeline is empty"); + return; + } + timeline.push((last_time, timeline.last().cloned().unwrap_throw().1)); + + // Note: Sync `timeline`'s type with the `Timeline` in `frontend/typescript/pixi_canvas/pixi_canvas.ts' + controller.push_var(serde_wasm_bindgen::to_value(&timeline).unwrap_throw()); + } + fn selected_var_panel( &self, index: ReadOnlyMutable>, diff --git a/frontend/src/waveform_panel/pixi_canvas.rs b/frontend/src/waveform_panel/pixi_canvas.rs index b935056..52a4c5a 100644 --- a/frontend/src/waveform_panel/pixi_canvas.rs +++ b/frontend/src/waveform_panel/pixi_canvas.rs @@ -1,3 +1,4 @@ +pub use js_bridge::PixiController; use zoon::*; pub struct PixiCanvas { @@ -89,6 +90,7 @@ mod js_bridge { // Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts` #[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")] extern "C" { + #[derive(Clone)] pub type PixiController; // @TODO `row_height` and `row_gap` is FastWave-specific diff --git a/frontend/typescript/bundles/pixi_canvas.js b/frontend/typescript/bundles/pixi_canvas.js index b8136f4..5ab8f18 100644 --- a/frontend/typescript/bundles/pixi_canvas.js +++ b/frontend/typescript/bundles/pixi_canvas.js @@ -35161,7 +35161,9 @@ var PixiController = class { } // -- FastWave-specific -- remove_var(index) { - this.var_signal_rows[index].destroy(); + if (typeof this.var_signal_rows[index] !== "undefined") { + this.var_signal_rows[index].destroy(); + } } push_var(timeline) { new VarSignalRow( @@ -35174,29 +35176,37 @@ var PixiController = class { ); } pop_var() { - this.var_signal_rows[this.var_signal_rows.length - 1].destroy(); + this.remove_var(this.var_signal_rows.length - 1); } clear_vars() { this.var_signal_rows.slice().reverse().forEach((row) => row.destroy()); } }; var VarSignalRow = class { - timeline; app; + timeline; + last_time; + formatter; + timeline_for_ui; owner; index_in_owner; rows_container; row_height; row_gap; row_height_with_gap; - renderer_resize_callback = () => this.draw(); + renderer_resize_callback = () => this.redraw_on_canvas_resize(); // -- elements -- row_container = new Container(); signal_blocks_container = new Container(); constructor(timeline, app, owner, rows_container, row_height, row_gap) { - console.log("VarSignalRow timeline:", timeline); - this.timeline = timeline; this.app = app; + this.timeline = timeline; + this.last_time = timeline[timeline.length - 1][0]; + this.formatter = (signal_value) => parseInt(signal_value, 2).toString(16); + this.timeline_for_ui = this.timeline.map(([time, value]) => { + const x2 = time / this.last_time * this.app.screen.width; + return [x2, this.formatter(value)]; + }); this.row_height = row_height; this.row_gap = row_gap; this.row_height_with_gap = row_height + row_gap; @@ -35204,46 +35214,59 @@ var VarSignalRow = class { this.owner = owner; this.owner.push(this); this.rows_container = rows_container; - this.create_element_tree(); this.draw(); this.app.renderer.on("resize", this.renderer_resize_callback); } - create_element_tree() { + draw() { this.row_container.y = this.index_in_owner * this.row_height_with_gap; this.rows_container.addChild(this.row_container); this.row_container.addChild(this.signal_blocks_container); + const label_style = new TextStyle({ + align: "center", + fill: "White", + fontSize: 16, + fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"' + }); + this.timeline_for_ui.forEach(([x2, value], index) => { + if (index == this.timeline_for_ui.length - 1) { + return; + } + const block_width = this.timeline_for_ui[index + 1][0] - x2; + const block_height = this.row_height; + const signal_block = new Container(); + signal_block.x = x2; + this.signal_blocks_container.addChild(signal_block); + const background = new Graphics().roundRect(0, 0, block_width, block_height, 15).fill("SlateBlue"); + background.label = "background"; + signal_block.addChild(background); + const label = new Text({ text: value, style: label_style }); + label.x = (block_width - label.width) / 2; + label.y = (block_height - label.height) / 2; + label.visible = label.width < block_width; + label.label = "label"; + signal_block.addChild(label); + }); } - draw() { - if (this.timeline.length > 0) { - const last_time = this.timeline[this.timeline.length - 1][0]; - const formatter = (signal_value) => parseInt(signal_value, 2).toString(16); - const timeline = this.timeline.map(([time, value]) => { - const x2 = time / last_time * this.app.screen.width; - const formatted_value = typeof value === "string" ? formatter(value) : void 0; - return [x2, formatted_value]; - }); - this.signal_blocks_container.removeChildren(); - timeline.forEach(([x2, value], index) => { - if (typeof value === "string") { - const block_width = timeline[index + 1][0] - x2; - const block_height = this.row_height; - const signal_block = new Container({ x: x2 }); - this.signal_blocks_container.addChild(signal_block); - let background = new Graphics().roundRect(0, 0, block_width, block_height, 15).fill("SlateBlue"); - signal_block.addChild(background); - let style = new TextStyle({ - align: "center", - fill: "White", - fontSize: 16, - fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"' - }); - let label = new Text({ text: value, style }); - label.x = (block_width - label.width) / 2; - label.y = (block_height - label.height) / 2; - signal_block.addChild(label); - } - }); + redraw_on_canvas_resize() { + for (let index = 0; index < this.timeline_for_ui.length; index++) { + const x2 = this.timeline[index][0] / this.last_time * this.app.screen.width; + this.timeline_for_ui[index][0] = x2; } + this.timeline_for_ui.forEach(([x2, _value], index) => { + if (index == this.timeline_for_ui.length - 1) { + return; + } + const block_width = this.timeline_for_ui[index + 1][0] - x2; + const block_height = this.row_height; + const signal_block = this.signal_blocks_container.getChildAt(index); + signal_block.x = x2; + const background = signal_block.getChildByLabel("background"); + background.width = block_width; + const label = signal_block.getChildByLabel("label"); + label.x = (block_width - label.width) / 2; + label.y = (block_height - label.height) / 2; + label.visible = label.width < block_width; + }); } decrement_index() { this.index_in_owner--; diff --git a/frontend/typescript/bundles/tauri_glue.js b/frontend/typescript/bundles/tauri_glue.js index ab2584c..a8b60a0 100644 --- a/frontend/typescript/bundles/tauri_glue.js +++ b/frontend/typescript/bundles/tauri_glue.js @@ -2514,8 +2514,8 @@ var invoke2 = core_exports.invoke; async function show_window() { return await invoke2("show_window"); } -async function load_waveform() { - return await invoke2("load_waveform"); +async function load_waveform(test_file_name) { + return await invoke2("load_waveform", { test_file_name }); } async function get_hierarchy() { return await invoke2("get_hierarchy"); diff --git a/frontend/typescript/pixi_canvas/pixi_canvas.ts b/frontend/typescript/pixi_canvas/pixi_canvas.ts index 8249c3a..97bd6fc 100644 --- a/frontend/typescript/pixi_canvas/pixi_canvas.ts +++ b/frontend/typescript/pixi_canvas/pixi_canvas.ts @@ -2,7 +2,10 @@ import { Application, Text, Graphics, Container, TextStyle } from "pixi.js"; type Time = number; type BitString = string; -type Timeline = Array<[Time, BitString | undefined]>; +type Timeline = Array<[Time, BitString]>; + +type X = number; +type TimelineForUI = Array<[X, string]>; export class PixiController { app: Application @@ -46,7 +49,9 @@ export class PixiController { // -- FastWave-specific -- remove_var(index: number) { - this.var_signal_rows[index].destroy(); + if (typeof this.var_signal_rows[index] !== 'undefined') { + this.var_signal_rows[index].destroy(); + } } push_var(timeline: Timeline) { @@ -61,7 +66,7 @@ export class PixiController { } pop_var() { - this.var_signal_rows[this.var_signal_rows.length - 1].destroy(); + this.remove_var(this.var_signal_rows.length - 1); } clear_vars() { @@ -70,15 +75,18 @@ export class PixiController { } class VarSignalRow { - timeline: Timeline; app: Application; + timeline: Timeline; + last_time: Time; + formatter: (signal_value: BitString) => string; + timeline_for_ui: TimelineForUI; owner: Array; index_in_owner: number; rows_container: Container; row_height: number; row_gap: number; row_height_with_gap: number; - renderer_resize_callback = () => this.draw(); + renderer_resize_callback = () => this.redraw_on_canvas_resize(); // -- elements -- row_container = new Container(); signal_blocks_container = new Container(); @@ -91,11 +99,17 @@ class VarSignalRow { row_height: number, row_gap: number, ) { - console.log("VarSignalRow timeline:", timeline); - this.timeline = timeline; - this.app = app; + this.timeline = timeline; + this.last_time = timeline[timeline.length - 1][0]; + this.formatter = signal_value => parseInt(signal_value, 2).toString(16); + + this.timeline_for_ui = this.timeline.map(([time, value]) => { + const x = time / this.last_time * this.app.screen.width; + return [x, this.formatter(value)] + }); + this.row_height = row_height; this.row_gap = row_gap; this.row_height_with_gap = row_height + row_gap; @@ -105,64 +119,82 @@ class VarSignalRow { this.owner.push(this); this.rows_container = rows_container; - this.create_element_tree(); this.draw(); this.app.renderer.on("resize", this.renderer_resize_callback); } - create_element_tree() { + draw() { // row_container this.row_container.y = this.index_in_owner * this.row_height_with_gap; this.rows_container.addChild(this.row_container); // signal_block_container this.row_container.addChild(this.signal_blocks_container); + + const label_style = new TextStyle({ + align: "center", + fill: "White", + fontSize: 16, + fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', + }); + + this.timeline_for_ui.forEach(([x, value], index) => { + if (index == this.timeline_for_ui.length - 1) { + return; + } + const block_width = this.timeline_for_ui[index+1][0] - x; + const block_height = this.row_height; + + // signal_block + const signal_block = new Container(); + signal_block.x = x; + this.signal_blocks_container.addChild(signal_block); + + // background + const background = new Graphics() + .roundRect(0, 0, block_width, block_height, 15) + .fill("SlateBlue"); + background.label = "background"; + signal_block.addChild(background); + + // label + const label = new Text({ text: value, style: label_style }); + label.x = (block_width - label.width) / 2; + label.y = (block_height - label.height) / 2; + label.visible = label.width < block_width; + label.label = "label"; + signal_block.addChild(label); + }) } - draw() { - if (this.timeline.length > 0) { - const last_time = this.timeline[this.timeline.length - 1][0]; - // @TODO make formatter configurable - const formatter: (signal_value: BitString) => string = signal_value => parseInt(signal_value, 2).toString(16); - // @TODO optimize - one pass, partly in Rust, partly outside of `draw()`, etc. - const timeline: Array<[number, string | undefined]> = this.timeline.map(([time, value]) => { - const x = time / last_time * this.app.screen.width; - const formatted_value = typeof value === 'string' ? formatter(value) : undefined; - return [x, formatted_value] - }); - // @TODO optimize - don't recreate all on every draw - this.signal_blocks_container.removeChildren(); - timeline.forEach(([x, value], index) => { - if (typeof value === 'string') { - const block_width = timeline[index+1][0] - x; - const block_height = this.row_height; - - // signal_block - const signal_block = new Container({x}); - this.signal_blocks_container.addChild(signal_block); - - // background - let background = new Graphics() - .roundRect(0, 0, block_width, block_height, 15) - .fill("SlateBlue"); - signal_block.addChild(background); - - // label - let style = new TextStyle({ - align: "center", - fill: "White", - fontSize: 16, - fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', - }); - // @TODO don't show when the label is wider/higher than the block - let label = new Text({ text: value, style }); - label.x = (block_width - label.width) / 2; - label.y = (block_height - label.height) / 2; - signal_block.addChild(label); - } - }) + redraw_on_canvas_resize() { + for (let index = 0; index < this.timeline_for_ui.length; index++) { + const x = this.timeline[index][0] / this.last_time * this.app.screen.width; + this.timeline_for_ui[index][0] = x; } + this.timeline_for_ui.forEach(([x, _value], index) => { + if (index == this.timeline_for_ui.length - 1) { + return; + } + + const block_width = this.timeline_for_ui[index+1][0] - x; + const block_height = this.row_height; + + // signal_block + const signal_block = this.signal_blocks_container.getChildAt(index); + signal_block.x = x; + + // background + const background = signal_block.getChildByLabel("background")!; + background.width = block_width; + + // label + const label = signal_block.getChildByLabel("label")!; + label.x = (block_width - label.width) / 2; + label.y = (block_height - label.height) / 2; + label.visible = label.width < block_width; + }) } decrement_index() { diff --git a/frontend/typescript/tauri_glue/tauri_glue.ts b/frontend/typescript/tauri_glue/tauri_glue.ts index 6ba1d8c..8bb13f8 100644 --- a/frontend/typescript/tauri_glue/tauri_glue.ts +++ b/frontend/typescript/tauri_glue/tauri_glue.ts @@ -12,8 +12,8 @@ export async function show_window(): Promise { return await invoke("show_window"); } -export async function load_waveform(): Promise { - return await invoke("load_waveform"); +export async function load_waveform(test_file_name: string): Promise { + return await invoke("load_waveform", { test_file_name }); } export async function get_hierarchy(): Promise { diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs index f248e47..107b55e 100644 --- a/src-tauri/src/lib.rs +++ b/src-tauri/src/lib.rs @@ -1,3 +1,4 @@ +use std::rc::Rc; use std::sync::Mutex; use wellen::simple::Waveform; @@ -14,9 +15,15 @@ fn show_window(window: tauri::Window) { } #[tauri::command(rename_all = "snake_case")] -fn load_waveform(store: tauri::State) { - let waveform = - wellen_helpers::read_from_bytes(include_bytes!("../../test_files/simple.vcd").to_vec()); +fn load_waveform(test_file_name: Rc, store: tauri::State) { + static SIMPLE_VCD: &'static [u8; 311] = include_bytes!("../../test_files/simple.vcd"); + static WAVE_27_FST: &'static [u8; 28860652] = include_bytes!("../../test_files/wave_27.fst"); + let chosen_file = match test_file_name.as_str() { + "simple.vcd" => SIMPLE_VCD.to_vec(), + "wave_27.fst" => WAVE_27_FST.to_vec(), + test_file_name => todo!("add {test_file_name} to the `test_files` folder"), + }; + let waveform = wellen_helpers::read_from_bytes(chosen_file); let Ok(waveform) = waveform else { panic!("VCD file reading failed") }; diff --git a/test_files/wave_27.fst b/test_files/wave_27.fst new file mode 100644 index 0000000..a573595 Binary files /dev/null and b/test_files/wave_27.fst differ