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

globals.js

Browse source
This commit is contained in:
Martin Kavík 2024-10-08 18:02:49 +02:00
parent a99915c8c3
commit 1d20d3ac56
10 changed files with 122 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
MoonZoon.toml
View file

@ -25,6 +25,7 @@ frontend = [
backend = [
"backend/Cargo.toml",
"backend/src",
"backend/globals.js",
"backend/index.js",
"backend/style.css",
]

1
backend/globals.js Normal file
View file

@ -0,0 +1 @@
var process = { env: { IS_PREACT: "false" } };

1
backend/index.js
View file

@ -1,2 +1,3 @@
import { FW } from '/_api/pkg/frontend.js';
window.FW = FW;

5
backend/src/main.rs
View file

@ -5,6 +5,11 @@ async fn frontend() -> Frontend {
.title("FastWave")
.append_to_head(include_str!("../favicon.html")) // realfavicongenerator.net
.append_to_head(concat!("<style>", include_str!("../style.css"), "</style>"))
.append_to_head(concat!(
"<script>",
include_str!("../globals.js"),
"</script>"
))
.append_to_head(concat!(
"<script type=\"module\">",
include_str!("../index.js"),

3
frontend/src/diagram_panel.rs
View file

@ -38,7 +38,8 @@ impl DiagramPanel {
.s(Height::fill())
.task_with_controller(move |controller| {
canvas_controller.set(controller.clone());
println!("hello from task_with_controller")
zoon::println!("hello from task_with_controller");
async {}
})
}
}

39
frontend/src/diagram_panel/excalidraw_canvas.rs
View file

@ -1,6 +1,4 @@
use crate::platform;
pub use js_bridge::ExcalidrawController;
use std::rc::Rc;
use zoon::*;
pub struct ExcalidrawCanvas {
@ -63,38 +61,14 @@ impl ExcalidrawCanvas {
width.set_neq(new_width);
height.set_neq(new_height);
}))
.update_raw_el(|raw_el| {
// @TODO rewrite to a native Zoon API
raw_el.event_handler_with_options(
EventOptions::new().preventable(),
clone!((controller) move |event: events_extra::WheelEvent| {
event.prevent_default();
if let Some(controller) = controller.lock_ref().as_ref() {
controller.zoom_or_pan(
event.delta_y(),
event.shift_key(),
event.offset_x() as u32,
);
}
}),
)
})
.after_insert(clone!((controller, timeline_getter) move |element| {
.after_insert(clone!((controller) move |element| {
Task::start(async move {
let pixi_controller = SendWrapper::new(js_bridge::ExcalidrawController::new(
1.,
width.get(),
0,
row_height,
row_gap,
&timeline_getter
));
pixi_controller.init(&element).await;
controller.set(Some(pixi_controller));
let excalidraw_controller = SendWrapper::new(js_bridge::ExcalidrawController::new());
excalidraw_controller.init(&element).await;
controller.set(Some(excalidraw_controller));
});
}))
.after_remove(move |_| {
drop(timeline_getter);
drop(resize_task);
drop(task_with_controller);
if let Some(controller) = controller.take() {
@ -124,6 +98,9 @@ mod js_bridge {
#[derive(Clone)]
pub type ExcalidrawController;
#[wasm_bindgen(constructor)]
pub fn new() -> ExcalidrawController;
#[wasm_bindgen(method)]
pub async fn init(this: &ExcalidrawController, parent_element: &JsValue);
@ -136,6 +113,6 @@ mod js_bridge {
// -- FastWave-specific --
#[wasm_bindgen(method)]
pub fn get_timeline_zoom(this: &ExcalidrawController) -> f64;
pub fn hello(this: &ExcalidrawController);
}
}

24
frontend/src/main.rs
View file

@ -8,7 +8,7 @@ mod controls_panel;
use controls_panel::ControlsPanel;
mod diagram_panel;
use diagram_panel::DiagramPanel;
use diagram_panel::{ExcalidrawController, DiagramPanel};
mod waveform_panel;
use waveform_panel::{PixiController, WaveformPanel};
@ -45,7 +45,8 @@ struct Store {
selected_var_refs: MutableVec<wellen::VarRef>,
hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
loaded_filename: Mutable<Option<Filename>>,
canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
pixi_canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
excalidraw_canvas_controller: Mutable<Mutable<Option<SendWrapper<ExcalidrawController>>>>,
}
static STORE: Lazy<Store> = lazy::default();
@ -65,7 +66,8 @@ fn root() -> impl Element {
let layout: Mutable<Layout> = <_>::default();
let mode: Mutable<Mode> = <_>::default();
let loaded_filename = STORE.loaded_filename.clone();
let canvas_controller = STORE.canvas_controller.clone();
let pixi_canvas_controller = STORE.pixi_canvas_controller.clone();
let excalidraw_canvas_controller = STORE.excalidraw_canvas_controller.clone();
Column::new()
.s(Height::fill())
.s(Scrollbars::y_and_clip_x())
@ -76,7 +78,7 @@ fn root() -> impl Element {
mode.clone(),
loaded_filename.clone(),
))
.item_signal(mode.signal().map(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move |mode| match mode {
.item_signal(mode.signal().map(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move |mode| match mode {
Mode::Waves => {
Column::new()
.s(Height::fill())
@ -96,15 +98,15 @@ fn root() -> impl Element {
let hierarchy = hierarchy.clone();
let selected_var_refs = selected_var_refs.clone();
let loaded_filename = loaded_filename.clone();
let canvas_controller = canvas_controller.clone();
let pixi_canvas_controller = pixi_canvas_controller.clone();
map_ref!{
let layout = layout.signal(),
let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
(*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move || WaveformPanel::new(
(*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
hierarchy.clone(),
selected_var_refs.clone(),
loaded_filename.clone(),
canvas_controller.clone(),
pixi_canvas_controller.clone(),
)))
}
}
@ -114,15 +116,15 @@ fn root() -> impl Element {
let hierarchy = hierarchy.clone();
let selected_var_refs = selected_var_refs.clone();
let loaded_filename = loaded_filename.clone();
let canvas_controller = canvas_controller.clone();
let pixi_canvas_controller = pixi_canvas_controller.clone();
map_ref!{
let layout = layout.signal(),
let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
(*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename, canvas_controller) move || WaveformPanel::new(
(*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
hierarchy.clone(),
selected_var_refs.clone(),
loaded_filename.clone(),
canvas_controller.clone(),
pixi_canvas_controller.clone(),
)))
}
}
@ -132,7 +134,7 @@ fn root() -> impl Element {
Column::new()
.s(Height::fill())
.s(Scrollbars::y_and_clip_x())
.item(DiagramPanel::new())
.item(DiagramPanel::new(excalidraw_canvas_controller.clone()))
}
})))
.item(CommandPanel::new())

2
frontend/src/platform.rs
View file

@ -81,7 +81,7 @@ pub async fn remove_all_decoders() -> RemovedDecodersCount {
}
async fn redraw_all_timeline_rows() {
if let Some(controller) = STORE.canvas_controller.get_cloned().get_cloned() {
if let Some(controller) = STORE.pixi_canvas_controller.get_cloned().get_cloned() {
controller.redraw_all_rows().await
}
}

32
frontend/typescript/bundles/excalidraw_canvas.js
View file

@ -74737,9 +74737,6 @@ var require_client = __commonJS({
var import_excalidraw = __toESM(require_main());
var React = __toESM(require_react());
var ReactDOM = __toESM(require_client());
function hello() {
return "Hello from excalidraw_canvas";
}
function attach_to_canvas() {
const App = () => {
return React.createElement(
@ -74757,9 +74754,34 @@ function attach_to_canvas() {
const excalidrawWrapper = document.getElementById("excalidraw_canvas");
const root = ReactDOM.createRoot(excalidrawWrapper);
}
var ExcalidrawController = class {
// app: Application
// // -- FastWave-specific --
// var_signal_rows: Array<VarSignalRow> = [];
// var_signal_rows_container = new Container();
// // @TODO reset `timeline_*` on file unload?
// timeline_zoom: number;
// timeline_viewport_width: number;
// timeline_viewport_x: number;
// row_height: number;
// row_gap: number;
// timeline_getter: TimelineGetter;
constructor() {
this.hello();
}
async init(parent_element) {
}
async resize(width, _height) {
}
destroy() {
}
hello() {
console.log("Hello from excalidraw_canvas TS");
}
};
export {
attach_to_canvas,
hello
ExcalidrawController,
attach_to_canvas
};
/*! Bundled license information:

67
frontend/typescript/excalidraw_canvas/excalidraw_canvas.ts
View file

@ -2,10 +2,6 @@ import { Excalidraw } from '@excalidraw/excalidraw'
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
export function hello(): String {
return "Hello from excalidraw_canvas"
}
export function attach_to_canvas() {
const App = () => {
return React.createElement(
@ -25,4 +21,67 @@ export function attach_to_canvas() {
const root = ReactDOM.createRoot(excalidrawWrapper!);
}
export class ExcalidrawController {
// app: Application
// // -- FastWave-specific --
// var_signal_rows: Array<VarSignalRow> = [];
// var_signal_rows_container = new Container();
// // @TODO reset `timeline_*` on file unload?
// timeline_zoom: number;
// timeline_viewport_width: number;
// timeline_viewport_x: number;
// row_height: number;
// row_gap: number;
// timeline_getter: TimelineGetter;
constructor(
// timeline_zoom: number,
// timeline_viewport_width: number,
// timeline_viewport_x: number,
// row_height: number,
// row_gap: number,
// timeline_getter: TimelineGetter
) {
this.hello()
// this.app = new Application();
// // -- FastWave-specific --
// this.timeline_zoom = timeline_zoom;
// 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);
// this.timeline_getter = timeline_getter;
}
async init(parent_element: HTMLElement) {
// await this.app.init({ background: color_dark_slate_blue, antialias: true, resizeTo: parent_element });
// parent_element.appendChild(this.app.canvas);
}
async resize(width: number, _height: number) {
// // -- FastWave-specific --
// this.timeline_viewport_width = width;
// await this.redraw_all_rows();
// // -- // --
// this.app.queueResize();
}
destroy() {
// const rendererDestroyOptions = {
// removeView: true
// }
// const options = {
// children: true,
// texture: true,
// textureSource: true,
// context: true,
// }
// this.app.destroy(rendererDestroyOptions, options);
}
hello() {
console.log("Hello from excalidraw_canvas TS")
}
}