init

frontend/src/controls_panel.rs

@@ -0,0 +1,312 @@
+use crate::tauri_bridge;
+use crate::HierarchyAndTimeTable;
+use std::collections::VecDeque;
+use std::rc::Rc;
+use wellen::GetItem;
+use zoon::{println, *};
+
+#[derive(Clone, Copy)]
+struct VarForUI<'a> {
+    name: &'a str,
+    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,
+    scope_ref: wellen::ScopeRef,
+}
+
+#[derive(Clone)]
+pub struct ControlsPanel {
+    selected_scope_ref: Mutable<Option<wellen::ScopeRef>>,
+    hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
+    selected_var_refs: MutableVec<wellen::VarRef>,
+}
+
+impl ControlsPanel {
+    pub fn new(
+        hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
+        selected_var_refs: MutableVec<wellen::VarRef>,
+    ) -> impl Element {
+        Self {
+            selected_scope_ref: <_>::default(),
+            hierarchy_and_time_table,
+            selected_var_refs,
+        }
+        .root()
+    }
+
+    fn triggers(&self) -> Vec<TaskHandle> {
+        vec![Task::start_droppable(
+            self.hierarchy_and_time_table
+                .signal_ref(Option::is_none)
+                .for_each_sync(clone!((self => s) move |_| {
+                    s.selected_scope_ref.set(None);
+                    s.selected_var_refs.lock_mut().clear();
+                })),
+        )]
+    }
+
+    fn root(&self) -> impl Element {
+        let triggers = self.triggers();
+        Column::new()
+            .after_remove(move |_| drop(triggers))
+            .s(Scrollbars::y_and_clip_x())
+            .s(Height::fill())
+            .s(Padding::all(20))
+            .s(Gap::new().y(40))
+            .s(Align::new().top())
+            .item(self.load_button())
+            .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))),
+            )
+    }
+
+    fn load_button(&self) -> impl Element {
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        let hierarchy_and_time_table = self.hierarchy_and_time_table.clone();
+        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(
+                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"),
+                ),
+            )
+            .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() {
+                    *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))))
+                })
+            })
+    }
+
+    fn scopes_panel(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
+        Column::new()
+            .s(Gap::new().y(20))
+            .item(El::new().child("Scopes"))
+            .item(self.scopes_list(hierarchy))
+    }
+
+    fn scopes_list(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
+        let mut scopes_for_ui = Vec::new();
+        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 scope = hierarchy.get(scope_ref);
+                scopes_for_ui.push(ScopeForUI {
+                    level,
+                    name: scope.name(&hierarchy),
+                    scope_ref,
+                });
+                for scope_ref in scope.scopes(&hierarchy) {
+                    scope_refs.push_back((level + 1, scope_ref));
+                }
+            }
+        }
+        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))),
+            )
+    }
+
+    fn scope_button(&self, scope_for_ui: ScopeForUI) -> impl Element {
+        let (hovered, 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) {
+                (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));
+                    }
+                }),
+            )
+            .s(Padding::new().left(scope_for_ui.level * 30))
+            .child(
+                Button::new()
+                    .s(Padding::new().x(15).y(5))
+                    .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),
+            )
+    }
+
+    fn vars_panel(&self, hierarchy: Rc<wellen::Hierarchy>) -> impl Element {
+        let selected_scope_ref = self.selected_scope_ref.clone();
+        Column::new()
+            .s(Gap::new().y(20))
+            .item(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())),
+            ))
+    }
+
+    fn vars_list(
+        &self,
+        selected_scope_ref: wellen::ScopeRef,
+        hierarchy: Rc<wellen::Hierarchy>,
+    ) -> impl Element {
+        let vars_for_ui = hierarchy
+            .get(selected_scope_ref)
+            .vars(&hierarchy)
+            .map(|var_ref| {
+                let var = hierarchy.get(var_ref);
+                VarForUI {
+                    name: var.name(&hierarchy),
+                    var_type: var.var_type(),
+                    var_direction: var.direction(),
+                    var_ref,
+                    signal_type: var.signal_tpe(),
+                }
+            });
+        Column::new()
+            .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))))
+    }
+
+    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))
+            .item(self.var_tag_direction(var_for_ui))
+    }
+
+    fn var_button(&self, var_for_ui: VarForUI) -> impl Element {
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        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(Padding::new().x(15).y(5))
+                .s(Background::new().color_signal(
+                    hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                ))
+                .s(RoundedCorners::all(15))
+                .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+                .on_press(move || selected_var_ref.lock_mut().push(var_for_ui.var_ref))
+                .label(var_for_ui.name),
+        )
+    }
+
+    fn var_tag_type(&self, var_for_ui: VarForUI) -> impl Element {
+        let var_type = var_for_ui.var_type;
+        El::new().child(format!("{var_type:?}"))
+    }
+
+    fn var_tag_index(&self, var_for_ui: VarForUI) -> Option<impl Element> {
+        let wellen::SignalType::BitVector(_, Some(index)) = var_for_ui.signal_type else {
+            None?
+        };
+        let msb = index.msb();
+        let lsb = index.lsb();
+        El::new().child(format!("[{msb}:{lsb}]")).apply(Some)
+    }
+
+    fn var_tag_bit(&self, var_for_ui: VarForUI) -> Option<impl Element> {
+        let wellen::SignalType::BitVector(length, _) = var_for_ui.signal_type else {
+            None?
+        };
+        El::new()
+            .s(Font::new().no_wrap())
+            .child(format!("{length}-bit"))
+            .apply(Some)
+    }
+
+    fn var_tag_direction(&self, var_for_ui: VarForUI) -> impl Element {
+        let direction = match var_for_ui.var_direction {
+            wellen::VarDirection::Unknown => String::new(),
+            direction => format!("{direction:?}"),
+        };
+        El::new().child(direction)
+    }
+}

frontend/src/main.rs

@@ -0,0 +1,40 @@
+use std::rc::Rc;
+use zoon::*;
+
+mod tauri_bridge;
+
+mod controls_panel;
+use controls_panel::ControlsPanel;
+
+mod waveform_panel;
+use waveform_panel::WaveformPanel;
+
+type HierarchyAndTimeTable = (Rc<wellen::Hierarchy>, Rc<wellen::TimeTable>);
+
+// @TODO REMOVE
+const SIMULATE_CLICKS: bool = false;
+
+fn main() {
+    start_app("app", root);
+    Task::start(async {
+        // https://github.com/tauri-apps/tauri/issues/5170
+        Timer::sleep(100).await;
+        tauri_bridge::show_window().await;
+    });
+}
+
+fn root() -> impl Element {
+    let hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>> = <_>::default();
+    let selected_var_refs: MutableVec<wellen::VarRef> = <_>::default();
+    Row::new()
+        .s(Height::fill())
+        .s(Font::new().color(color!("Lavender")))
+        .item(ControlsPanel::new(
+            hierarchy_and_time_table.clone(),
+            selected_var_refs.clone(),
+        ))
+        .item(WaveformPanel::new(
+            hierarchy_and_time_table,
+            selected_var_refs,
+        ))
+}

frontend/src/tauri_bridge.rs

@@ -0,0 +1,46 @@
+use zoon::*;
+
+pub async fn show_window() {
+    tauri_glue::show_window().await
+}
+
+pub async fn load_waveform() {
+    tauri_glue::load_waveform().await
+}
+
+pub async fn get_hierarchy() -> wellen::Hierarchy {
+    serde_wasm_bindgen::from_value(tauri_glue::get_hierarchy().await).unwrap_throw()
+}
+
+pub async fn get_time_table() -> wellen::TimeTable {
+    serde_wasm_bindgen::from_value(tauri_glue::get_time_table().await).unwrap_throw()
+}
+
+pub async fn load_and_get_signal(signal_ref: wellen::SignalRef) -> wellen::Signal {
+    serde_wasm_bindgen::from_value(tauri_glue::load_and_get_signal(signal_ref.index()).await)
+        .unwrap_throw()
+}
+
+pub async fn unload_signal(signal_ref: wellen::SignalRef) {
+    tauri_glue::unload_signal(signal_ref.index()).await
+}
+
+mod tauri_glue {
+    use zoon::*;
+
+    // Note: Add all corresponding methods to `frontend/typescript/tauri_glue/tauri_glue.ts`
+    #[wasm_bindgen(module = "/typescript/bundles/tauri_glue.js")]
+    extern "C" {
+        pub async fn show_window();
+
+        pub async fn load_waveform();
+
+        pub async fn get_hierarchy() -> JsValue;
+
+        pub async fn get_time_table() -> JsValue;
+
+        pub async fn load_and_get_signal(signal_ref_index: usize) -> JsValue;
+
+        pub async fn unload_signal(signal_ref_index: usize);
+    }
+}

frontend/src/waveform_panel.rs

@@ -0,0 +1,141 @@
+use crate::{tauri_bridge, HierarchyAndTimeTable};
+use wellen::GetItem;
+use zoon::*;
+
+mod pixi_canvas;
+use pixi_canvas::PixiCanvas;
+
+const ROW_HEIGHT: u32 = 40;
+const ROW_GAP: u32 = 4;
+
+#[derive(Clone)]
+pub struct WaveformPanel {
+    selected_var_refs: MutableVec<wellen::VarRef>,
+    hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
+}
+
+impl WaveformPanel {
+    pub fn new(
+        hierarchy_and_time_table: Mutable<Option<HierarchyAndTimeTable>>,
+        selected_var_refs: MutableVec<wellen::VarRef>,
+    ) -> impl Element {
+        Self {
+            selected_var_refs,
+            hierarchy_and_time_table,
+        }
+        .root()
+    }
+
+    fn root(&self) -> impl Element {
+        let selected_vars_panel_height_getter: Mutable<u32> = <_>::default();
+        Row::new()
+            .s(Padding::all(20).left(0))
+            .s(Scrollbars::y_and_clip_x())
+            .s(Width::growable())
+            .s(Height::fill())
+            .item(self.selected_vars_panel(selected_vars_panel_height_getter.clone()))
+            .item(self.canvas(selected_vars_panel_height_getter.read_only()))
+    }
+
+    fn selected_vars_panel(&self, height_getter: Mutable<u32>) -> impl Element {
+        Column::new()
+            .s(Gap::new().y(ROW_GAP))
+            .s(Align::new().top())
+            .on_viewport_size_change(move |_, height| height_getter.set_neq(height))
+            .items_signal_vec(self.selected_var_refs.signal_vec().enumerate().map(
+                clone!((self => s) move |(index, var_ref)| {
+                    s.selected_var_panel(index, var_ref)
+                }),
+            ))
+    }
+
+    fn canvas(&self, selected_vars_panel_height: ReadOnlyMutable<u32>) -> impl Element {
+        let selected_var_refs = self.selected_var_refs.clone();
+        let hierarchy_and_time_table = self.hierarchy_and_time_table.clone();
+        PixiCanvas::new(ROW_HEIGHT, ROW_GAP)
+            .s(Align::new().top())
+            .s(Width::fill())
+            .s(Height::exact_signal(selected_vars_panel_height.signal()))
+            .s(RoundedCorners::new().right(15))
+            .task_with_controller(move |controller| {
+                selected_var_refs.signal_vec().delay_remove(clone!((hierarchy_and_time_table) move |var_ref| {
+                    clone!((var_ref, hierarchy_and_time_table) async move {
+                        if let Some(hierarchy_and_time_table) = hierarchy_and_time_table.get_cloned() {
+                            tauri_bridge::unload_signal(hierarchy_and_time_table.0.get(var_ref).signal_ref()).await;
+                        }
+                    })
+                })).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::InsertAt { index: _, value: _ } => { todo!("`task_with_controller` + `InsertAt`") }
+                            VecDiff::UpdateAt { index: _, value: _ } => { todo!("`task_with_controller` + `UpdateAt`") }
+                            VecDiff::RemoveAt { index } => {
+                                if let Some(controller) = controller.lock_ref().as_ref() {
+                                    controller.remove_var(index);
+                                }
+                            }
+                            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<String>)> = 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());
+                                }
+                            }
+                            VecDiff::Pop {} => {
+                                if let Some(controller) = controller.lock_ref().as_ref() {
+                                    controller.pop_var();
+                                }
+                            }
+                            VecDiff::Clear {} => {
+                                if let Some(controller) = controller.lock_ref().as_ref() {
+                                    controller.clear_vars();
+                                }
+                            }
+                        }
+                    })
+                }))
+            })
+    }
+
+    fn selected_var_panel(
+        &self,
+        index: ReadOnlyMutable<Option<usize>>,
+        var_ref: wellen::VarRef,
+    ) -> Option<impl Element> {
+        let Some((hierarchy, _)) = self.hierarchy_and_time_table.get_cloned() else {
+            None?
+        };
+        let var = hierarchy.get(var_ref);
+        let name: &str = var.name(&hierarchy);
+        let selected_var_refs = self.selected_var_refs.clone();
+        Button::new()
+            .s(Height::exact(ROW_HEIGHT))
+            .s(Background::new().color(color!("SlateBlue", 0.8)))
+            .s(RoundedCorners::new().left(15))
+            .label(
+                El::new()
+                    .s(Align::center())
+                    .s(Padding::new().left(20).right(17).y(10))
+                    .child(name),
+            )
+            .on_press(move || {
+                if let Some(index) = index.get() {
+                    selected_var_refs.lock_mut().remove(index);
+                }
+            })
+            .apply(Some)
+    }
+}

frontend/src/waveform_panel/pixi_canvas.rs

@@ -0,0 +1,121 @@
+use zoon::*;
+
+pub struct PixiCanvas {
+    raw_el: RawHtmlEl<web_sys::HtmlElement>,
+    controller: ReadOnlyMutable<Option<js_bridge::PixiController>>,
+    #[allow(dead_code)]
+    width: ReadOnlyMutable<u32>,
+    #[allow(dead_code)]
+    height: ReadOnlyMutable<u32>,
+    task_with_controller: Mutable<Option<TaskHandle>>,
+}
+
+impl Element for PixiCanvas {}
+
+impl RawElWrapper for PixiCanvas {
+    type RawEl = RawHtmlEl<web_sys::HtmlElement>;
+    fn raw_el_mut(&mut self) -> &mut Self::RawEl {
+        &mut self.raw_el
+    }
+}
+
+impl Styleable<'_> for PixiCanvas {}
+impl KeyboardEventAware for PixiCanvas {}
+impl MouseEventAware for PixiCanvas {}
+impl PointerEventAware for PixiCanvas {}
+impl TouchEventAware for PixiCanvas {}
+impl AddNearbyElement<'_> for PixiCanvas {}
+impl HasIds for PixiCanvas {}
+
+impl PixiCanvas {
+    pub fn new(row_height: u32, row_gap: u32) -> Self {
+        let controller: Mutable<Option<js_bridge::PixiController>> = Mutable::new(None);
+        let width = Mutable::new(0);
+        let height = Mutable::new(0);
+        let resize_task = Task::start_droppable(
+            map_ref! {
+                let _ = width.signal(),
+                let _ = height.signal() => ()
+            }
+            .for_each_sync(clone!((controller) move |_| {
+                if let Some(controller) = controller.lock_ref().as_ref() {
+                    controller.queue_resize();
+                }
+            })),
+        );
+        let task_with_controller = Mutable::new(None);
+        Self {
+            controller: controller.read_only(),
+            width: width.read_only(),
+            height: height.read_only(),
+            task_with_controller: task_with_controller.clone(),
+            raw_el: El::new()
+                .s(Clip::both())
+                .on_viewport_size_change(clone!((width, height) move |new_width, new_height| {
+                    width.set_neq(new_width);
+                    height.set_neq(new_height);
+                }))
+                .after_insert(clone!((controller) move |element| {
+                    Task::start(async move {
+                        let pixi_controller = js_bridge::PixiController::new(row_height, row_gap);
+                        pixi_controller.init(&element).await;
+                        controller.set(Some(pixi_controller));
+                    });
+                }))
+                .after_remove(move |_| {
+                    drop(resize_task);
+                    drop(task_with_controller);
+                    if let Some(controller) = controller.take() {
+                        controller.destroy();
+                    }
+                })
+                .into_raw_el(),
+        }
+    }
+
+    pub fn task_with_controller<FUT: Future<Output = ()> + 'static>(
+        self,
+        f: impl FnOnce(ReadOnlyMutable<Option<js_bridge::PixiController>>) -> FUT,
+    ) -> Self {
+        self.task_with_controller
+            .set(Some(Task::start_droppable(f(self.controller.clone()))));
+        self
+    }
+}
+
+mod js_bridge {
+    use zoon::*;
+
+    // Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts`
+    #[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")]
+    extern "C" {
+        pub type PixiController;
+
+        // @TODO `row_height` and `row_gap` is FastWave-specific
+        #[wasm_bindgen(constructor)]
+        pub fn new(row_height: u32, row_gap: u32) -> PixiController;
+
+        #[wasm_bindgen(method)]
+        pub async fn init(this: &PixiController, parent_element: &JsValue);
+
+        #[wasm_bindgen(method)]
+        pub fn destroy(this: &PixiController);
+
+        #[wasm_bindgen(method)]
+        pub fn queue_resize(this: &PixiController);
+
+        // -- FastWave-specific --
+
+        #[wasm_bindgen(method)]
+        pub fn remove_var(this: &PixiController, index: usize);
+
+        #[wasm_bindgen(method)]
+        pub fn push_var(this: &PixiController, timeline: JsValue);
+
+        #[wasm_bindgen(method)]
+        pub fn pop_var(this: &PixiController);
+
+        #[wasm_bindgen(method)]
+        pub fn clear_vars(this: &PixiController);
+    }
+}