Products/FastWave2.0
2
0
Fork 0
Code Issues 8 Pull requests Actions Packages Projects Releases 1 Wiki Activity

timeline_width/viewport_width/viewport_x

Browse source
This commit is contained in:
Martin Kavík 2024-06-11 17:00:29 +02:00
parent af90adfe20
commit 9b76ecf38f
11 changed files with 188 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/src/platform.rs
View file

@ -31,11 +31,20 @@ pub async fn get_hierarchy() -> wellen::Hierarchy {
pub async fn load_signal_and_get_timeline(
signal_ref: wellen::SignalRef,
screen_width: u32,
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: shared::VarFormat,
) -> shared::Timeline {
platform::load_signal_and_get_timeline(signal_ref, screen_width, block_height, var_format).await
platform::load_signal_and_get_timeline(
signal_ref,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format,
).await
}
pub async fn unload_signal(signal_ref: wellen::SignalRef) {

14
frontend/src/platform/browser.rs
View file

@ -76,7 +76,9 @@ pub(super) async fn get_hierarchy() -> wellen::Hierarchy {
pub(super) async fn load_signal_and_get_timeline(
signal_ref: wellen::SignalRef,
screen_width: u32,
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: shared::VarFormat,
) -> shared::Timeline {
@ -86,7 +88,15 @@ pub(super) async fn load_signal_and_get_timeline(
let signal = waveform.get_signal(signal_ref).unwrap();
let time_table = waveform.time_table();
let timeline =
shared::signal_to_timeline(signal, time_table, screen_width, block_height, var_format);
shared::signal_to_timeline(
signal,
time_table,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format,
);
timeline
}

12
frontend/src/platform/tauri.rs
View file

@ -19,7 +19,9 @@ pub(super) async fn get_hierarchy() -> wellen::Hierarchy {
pub(super) async fn load_signal_and_get_timeline(
signal_ref: wellen::SignalRef,
screen_width: u32,
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: shared::VarFormat,
) -> shared::Timeline {
@ -27,7 +29,9 @@ pub(super) async fn load_signal_and_get_timeline(
serde_wasm_bindgen::from_value(
tauri_glue::load_signal_and_get_timeline(
signal_ref.index(),
screen_width,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format,
)
@ -61,7 +65,9 @@ mod tauri_glue {
#[wasm_bindgen(catch)]
pub async fn load_signal_and_get_timeline(
signal_ref_index: usize,
screen_width: u32,
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: JsValue,
) -> Result<JsValue, JsValue>;

4
frontend/src/waveform_panel.rs
View file

@ -122,7 +122,9 @@ impl WaveformPanel {
let signal_ref = var.signal_ref();
let timeline = platform::load_signal_and_get_timeline(
signal_ref,
controller.screen_width(),
controller.get_timeline_width(),
controller.get_timeline_viewport_width(),
controller.get_timeline_viewport_x(),
ROW_HEIGHT,
var_format,
)

32
frontend/src/waveform_panel/pixi_canvas.rs
View file

@ -52,12 +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, var_format| {
|signal_ref_index, timeline_width, timeline_viewport_width, timeline_viewport_x, 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,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
row_height,
serde_wasm_bindgen::from_value(var_format).unwrap_throw(),
)
@ -81,7 +83,14 @@ impl PixiCanvas {
}))
.after_insert(clone!((controller, timeline_getter) move |element| {
Task::start(async move {
let pixi_controller = js_bridge::PixiController::new(row_height, row_gap, &timeline_getter);
let pixi_controller = js_bridge::PixiController::new(
width.get(),
width.get(),
0,
row_height,
row_gap,
&timeline_getter
);
pixi_controller.init(&element).await;
controller.set(Some(pixi_controller));
});
@ -113,11 +122,13 @@ mod js_bridge {
type TimelinePromise = js_sys::Promise;
type SignalRefIndex = usize;
type ScreenWidth = u32;
type TimelineWidth = u32;
type TimelineViewportWidth = u32;
type TimelineViewportX = u32;
type RowHeight = u32;
type VarFormatJs = JsValue;
type TimelineGetter =
Closure<dyn FnMut(SignalRefIndex, ScreenWidth, RowHeight, VarFormatJs) -> TimelinePromise>;
Closure<dyn FnMut(SignalRefIndex, TimelineWidth, TimelineViewportWidth, TimelineViewportX, RowHeight, VarFormatJs) -> TimelinePromise>;
// Note: Add all corresponding methods to `frontend/typescript/pixi_canvas/pixi_canvas.ts`
#[wasm_bindgen(module = "/typescript/bundles/pixi_canvas.js")]
@ -128,6 +139,9 @@ mod js_bridge {
// @TODO `row_height` and `row_gap` is FastWave-specific
#[wasm_bindgen(constructor)]
pub fn new(
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
row_height: u32,
row_gap: u32,
timeline_getter: &TimelineGetter,
@ -143,7 +157,13 @@ mod js_bridge {
pub fn destroy(this: &PixiController);
#[wasm_bindgen(method)]
pub fn screen_width(this: &PixiController) -> u32;
pub fn get_timeline_width(this: &PixiController) -> u32;
#[wasm_bindgen(method)]
pub fn get_timeline_viewport_width(this: &PixiController) -> u32;
#[wasm_bindgen(method)]
pub fn get_timeline_viewport_x(this: &PixiController) -> u32;
// -- FastWave-specific --

37
frontend/typescript/bundles/pixi_canvas.js
View file

@ -35133,12 +35133,18 @@ var PixiController = class {
// -- FastWave-specific --
var_signal_rows = [];
var_signal_rows_container = new Container();
timeline_width;
timeline_viewport_width;
timeline_viewport_x;
row_height;
row_gap;
previous_parent_width;
timeline_getter;
constructor(row_height, row_gap, timeline_getter) {
constructor(timeline_width, timeline_viewport_width, timeline_viewport_x, row_height, row_gap, timeline_getter) {
this.app = new Application();
this.timeline_width = timeline_width;
this.timeline_viewport_width = timeline_viewport_width;
this.timeline_viewport_x = timeline_viewport_x;
this.row_height = row_height;
this.row_gap = row_gap;
this.app.stage.addChild(this.var_signal_rows_container);
@ -35156,6 +35162,7 @@ var PixiController = class {
const width_changed = width !== this.previous_parent_width;
this.previous_parent_width = width;
if (width_changed) {
this.timeline_viewport_width = width;
await this.redraw_all_rows();
}
}
@ -35171,20 +35178,40 @@ var PixiController = class {
};
this.app.destroy(rendererDestroyOptions, options);
}
screen_width() {
return this.app.screen.width;
get_timeline_width() {
return this.timeline_width;
}
get_timeline_viewport_width() {
return this.timeline_viewport_width;
}
get_timeline_viewport_x() {
return this.timeline_viewport_x;
}
// -- FastWave-specific --
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, row.var_format);
const timeline = await this.timeline_getter(
row.signal_ref_index,
this.timeline_width,
this.timeline_viewport_width,
this.timeline_viewport_x,
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);
const timeline = await this.timeline_getter(
row.signal_ref_index,
this.timeline_width,
this.timeline_viewport_width,
this.timeline_viewport_x,
this.row_height,
row.var_format
);
row.redraw(timeline);
}
}

11
frontend/typescript/bundles/tauri_glue.js
View file

@ -2520,8 +2520,15 @@ 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, var_format) {
return await invoke2("load_signal_and_get_timeline", { signal_ref_index, screen_width, block_height, var_format });
async function load_signal_and_get_timeline(signal_ref_index, timeline_width, timeline_viewport_width, timeline_viewport_x, block_height, var_format) {
return await invoke2("load_signal_and_get_timeline", {
signal_ref_index,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format
});
}
async function unload_signal(signal_ref_index) {
return await invoke2("unload_signal", { signal_ref_index });

55
frontend/typescript/pixi_canvas/pixi_canvas.ts
View file

@ -27,21 +27,41 @@ enum VarFormat {
Unsigned,
}
type TimelineGetter = (signal_ref_index: number, screen_width: number, row_height: number, var_format: VarFormat) => Promise<Timeline>;
type TimelineGetter = (
signal_ref_index: number,
timeline_width: number,
timeline_viewport_width: number,
timeline_viewport_x: number,
row_height: number,
var_format: VarFormat
) => Promise<Timeline>;
export class PixiController {
app: Application
// -- FastWave-specific --
var_signal_rows: Array<VarSignalRow> = [];
var_signal_rows_container = new Container();
timeline_width: number;
timeline_viewport_width: number;
timeline_viewport_x: number;
row_height: number;
row_gap: number;
previous_parent_width: number | null;
timeline_getter: TimelineGetter;
constructor(row_height: number, row_gap: number, timeline_getter: TimelineGetter) {
constructor(
timeline_width: number,
timeline_viewport_width: number,
timeline_viewport_x: number,
row_height: number,
row_gap: number,
timeline_getter: TimelineGetter
) {
this.app = new Application();
// -- FastWave-specific --
this.timeline_width = timeline_width;
this.timeline_viewport_width = timeline_viewport_width;
this.timeline_viewport_x = timeline_viewport_x;
this.row_height = row_height;
this.row_gap = row_gap;
this.app.stage.addChild(this.var_signal_rows_container);
@ -62,6 +82,7 @@ export class PixiController {
const width_changed = width !== this.previous_parent_width;
this.previous_parent_width = width;
if (width_changed) {
this.timeline_viewport_width = width;
await this.redraw_all_rows();
}
}
@ -79,15 +100,30 @@ export class PixiController {
this.app.destroy(rendererDestroyOptions, options);
}
screen_width() {
return this.app.screen.width;
get_timeline_width() {
return this.timeline_width;
}
get_timeline_viewport_width() {
return this.timeline_viewport_width;
}
get_timeline_viewport_x() {
return this.timeline_viewport_x;
}
// -- FastWave-specific --
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, row.var_format);
const timeline = await this.timeline_getter(
row.signal_ref_index,
this.timeline_width,
this.timeline_viewport_width,
this.timeline_viewport_x,
this.row_height,
row.var_format
);
row.redraw(timeline);
}))
}
@ -95,7 +131,14 @@ export class PixiController {
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);
const timeline = await this.timeline_getter(
row.signal_ref_index,
this.timeline_width,
this.timeline_viewport_width,
this.timeline_viewport_x,
this.row_height,
row.var_format
);
row.redraw(timeline);
}
}

15
frontend/typescript/tauri_glue/tauri_glue.ts
View file

@ -6,8 +6,6 @@ const invoke = core.invoke;
type Filename = string;
type WellenHierarchy = unknown;
type WellenTimeTable = unknown;
type WellenSignal = unknown;
type Timeline = unknown;
type VarFormat = unknown;
@ -25,11 +23,20 @@ export async function get_hierarchy(): Promise<WellenHierarchy> {
export async function load_signal_and_get_timeline(
signal_ref_index: number,
screen_width: number,
timeline_width: number,
timeline_viewport_width: number,
timeline_viewport_x: 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 });
return await invoke("load_signal_and_get_timeline", {
signal_ref_index,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format
});
}
export async function unload_signal(signal_ref_index: number): Promise<void> {

18
shared/src/signal_to_timeline.rs
View file

@ -3,29 +3,39 @@ use crate::*;
pub fn signal_to_timeline(
signal: &wellen::Signal,
time_table: &[wellen::Time],
screen_width: u32,
mut timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: VarFormat,
) -> Timeline {
println!("timeline_width: {timeline_width}");
println!("timeline_viewport_width: {timeline_viewport_width}");
println!("timeline_viewport_x: {timeline_viewport_x}");
println!("_____");
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 = 18;
const LABEL_X_PADDING: u32 = 10;
if timeline_width == 0 {
timeline_width = timeline_viewport_width;
}
let Some(last_time) = time_table.last().copied() else {
return Timeline::default();
};
let last_time = last_time as f64;
let screen_width = screen_width as f64;
let timeline_width = timeline_width as f64;
let mut x_value_pairs = signal
.iter_changes()
.map(|(index, value)| {
let index = index as usize;
let time = time_table[index] as f64;
let x = time / last_time * screen_width;
let x = time / last_time * timeline_width;
(x, value)
})
.peekable();
@ -36,7 +46,7 @@ pub fn signal_to_timeline(
let next_block_x = if let Some((next_block_x, _)) = x_value_pairs.peek() {
*next_block_x
} else {
screen_width
timeline_width
};
let block_width = (next_block_x - block_x) as u32;

14
src-tauri/src/lib.rs
View file

@ -42,7 +42,9 @@ async fn get_hierarchy(store: tauri::State<'_, Store>) -> Result<serde_json::Val
#[tauri::command(rename_all = "snake_case")]
async fn load_signal_and_get_timeline(
signal_ref_index: usize,
screen_width: u32,
timeline_width: u32,
timeline_viewport_width: u32,
timeline_viewport_x: u32,
block_height: u32,
var_format: shared::VarFormat,
store: tauri::State<'_, Store>,
@ -55,7 +57,15 @@ async fn load_signal_and_get_timeline(
let signal = waveform.get_signal(signal_ref).unwrap();
let time_table = waveform.time_table();
let timeline =
shared::signal_to_timeline(signal, time_table, screen_width, block_height, var_format);
shared::signal_to_timeline(
signal,
time_table,
timeline_width,
timeline_viewport_width,
timeline_viewport_x,
block_height,
var_format,
);
Ok(serde_json::to_value(timeline).unwrap())
}