From ef74c4d115be6e10c915496feb327e67beed292c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Kav=C3=ADk?= Date: Fri, 7 Jun 2024 01:41:10 +0200 Subject: [PATCH] canvas redesign --- frontend/src/waveform_panel.rs | 9 +------- frontend/typescript/bundles/pixi_canvas.js | 17 +++++++++++--- .../typescript/pixi_canvas/pixi_canvas.ts | 22 ++++++++++++++----- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/frontend/src/waveform_panel.rs b/frontend/src/waveform_panel.rs index f066a88..9a9cc43 100644 --- a/frontend/src/waveform_panel.rs +++ b/frontend/src/waveform_panel.rs @@ -26,6 +26,7 @@ impl WaveformPanel { .root() } + // @TODO autoscroll down fn root(&self) -> impl Element { let selected_vars_panel_height_getter: Mutable = <_>::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()); } diff --git a/frontend/typescript/bundles/pixi_canvas.js b/frontend/typescript/bundles/pixi_canvas.js index 054527f..8a5fedf 100644 --- a/frontend/typescript/bundles/pixi_canvas.js +++ b/frontend/typescript/bundles/pixi_canvas.js @@ -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); diff --git a/frontend/typescript/pixi_canvas/pixi_canvas.ts b/frontend/typescript/pixi_canvas/pixi_canvas.ts index 7a60447..a6eb0f4 100644 --- a/frontend/typescript/pixi_canvas/pixi_canvas.ts +++ b/frontend/typescript/pixi_canvas/pixi_canvas.ts @@ -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);