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

canvas redesign

Browse source
This commit is contained in:
Martin Kavík 2024-06-07 01:41:10 +02:00
parent d3cc0eb860
commit 29560ae616
3 changed files with 32 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/waveform_panel.rs
View file

@ -26,6 +26,7 @@ impl WaveformPanel {
.root()
}
// @TODO autoscroll down
fn root(&self) -> impl Element {
let selected_vars_panel_height_getter: Mutable<u32> = <_>::default();
Row::new()
@ -56,7 +57,6 @@ impl WaveformPanel {
.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 {
@ -118,17 +118,10 @@ impl WaveformPanel {
let signal_ref = var.signal_ref();
let timeline = platform::load_signal_and_get_timeline(signal_ref, controller.screen_width(), ROW_HEIGHT).await;
// @TODO remove
zoon::println!("Timeline in Rust: {timeline:#?}");
let timescale = hierarchy.timescale();
// @TODO remove
zoon::println!("{timescale:?}");
if timeline.blocks.is_empty() {
eprintln!("timeline is empty");
return;
}
// 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());
}

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

@ -35117,9 +35117,11 @@ var Text = class extends AbstractText {
};
// node_modules/pixi.js/lib/index.mjs
init_Texture();
init_textureFrom();
init_Container();
init_Graphics();
init_Sprite();
init_TextStyle();
init_eventemitter3();
var import_earcut2 = __toESM(require_earcut(), 1);
@ -35169,7 +35171,6 @@ var PixiController = class {
}
}
push_var(timeline) {
console.log("Timline in Typescript:", timeline);
new VarSignalRow(
timeline,
this.app,
@ -35197,6 +35198,7 @@ var VarSignalRow = class {
row_height_with_gap;
renderer_resize_callback = () => this.draw();
row_container = new Container();
row_container_background;
signal_blocks_container = new Container();
label_style = new TextStyle({
align: "center",
@ -35216,19 +35218,28 @@ var VarSignalRow = class {
this.rows_container = rows_container;
this.row_container.y = this.index_in_owner * this.row_height_with_gap;
this.rows_container.addChild(this.row_container);
this.row_container_background = new Sprite();
this.row_container_background.texture = Texture.WHITE;
this.row_container_background.tint = "0x550099";
this.row_container_background.height = this.row_height;
this.row_container.addChild(this.row_container_background);
this.row_container.addChild(this.signal_blocks_container);
this.draw();
}
draw() {
this.row_container_background.width = this.app.screen.width;
this.signal_blocks_container.removeChildren();
this.timeline.blocks.forEach((timeline_block) => {
const signal_block = new Container();
signal_block.x = timeline_block.x;
this.signal_blocks_container.addChild(signal_block);
const background = new Graphics().roundRect(0, 0, timeline_block.width, timeline_block.height, 15).fill("SlateBlue");
const gap_between_blocks = 2;
const background = new Graphics().rect(gap_between_blocks / 2, 0, timeline_block.width - gap_between_blocks, timeline_block.height).fill("SlateBlue");
signal_block.addChild(background);
if (timeline_block.label !== void 0) {
const label = new Text({ text: timeline_block.label.text, style: this.label_style });
const label = new Text();
label.text = timeline_block.label.text;
label.style = this.label_style;
label.x = timeline_block.label.x;
label.y = timeline_block.label.y;
signal_block.addChild(label);

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

@ -1,4 +1,4 @@
import { Application, Text, Graphics, Container, TextStyle, ContainerChild } from "pixi.js";
import { Application, Text, Graphics, Container, TextStyle, Sprite, Texture } from "pixi.js";
// @TODO sync with Rust and `tauri_glue.ts`
type Timeline = {
@ -68,7 +68,6 @@ export class PixiController {
}
push_var(timeline: Timeline) {
console.log("Timline in Typescript:", timeline);
new VarSignalRow(
timeline,
this.app,
@ -99,6 +98,7 @@ class VarSignalRow {
row_height_with_gap: number;
renderer_resize_callback = () => this.draw();
row_container = new Container();
row_container_background: Sprite;
signal_blocks_container = new Container();
label_style = new TextStyle({
align: "center",
@ -133,6 +133,13 @@ class VarSignalRow {
this.row_container.y = this.index_in_owner * this.row_height_with_gap;
this.rows_container.addChild(this.row_container);
// row background
this.row_container_background = new Sprite();
this.row_container_background.texture = Texture.WHITE;
this.row_container_background.tint = '0x550099';
this.row_container_background.height = this.row_height;
this.row_container.addChild(this.row_container_background);
// signal_blocks_container
this.row_container.addChild(this.signal_blocks_container);
@ -145,6 +152,8 @@ class VarSignalRow {
}
draw() {
this.row_container_background.width = this.app.screen.width;
this.signal_blocks_container.removeChildren();
this.timeline.blocks.forEach(timeline_block => {
// signal_block
@ -153,14 +162,17 @@ class VarSignalRow {
this.signal_blocks_container.addChild(signal_block);
// background
const gap_between_blocks = 2;
const background = new Graphics()
.roundRect(0, 0, timeline_block.width, timeline_block.height, 15)
.fill("SlateBlue");
.rect(gap_between_blocks / 2, 0, timeline_block.width - gap_between_blocks, timeline_block.height)
.fill('SlateBlue');
signal_block.addChild(background);
// label
if (timeline_block.label !== undefined) {
const label = new Text({ text: timeline_block.label.text, style: this.label_style });
const label = new Text();
label.text = timeline_block.label.text;
label.style = this.label_style;
label.x = timeline_block.label.x;
label.y = timeline_block.label.y;
signal_block.addChild(label);