fixes #80, bugfix with init size on wasm target

Author: yjpark

apps/notation_viewer/Makefile.toml

@@ -57,12 +57,12 @@ command = "cargo"
 [tasks.release-to-amateurguitar-www]
 script_runner = "@shell"
 script = ["""
-cp ./target/wasm.js ../../../../amateurguitar/www/static/notation/
-cp ./target/wasm_bg.wasm ../../../../amateurguitar/www/static/notation/
-cp ./assets/fonts/* ../../../../amateurguitar/www/static/notation/assets/fonts/
-cp ./assets/png/* ../../../../amateurguitar/www/static/notation/assets/png/
-cp ./assets/beginner/* ../../../../amateurguitar/www/static/notation/assets/beginner/
-cp ./assets/songs/jay/* ../../../../amateurguitar/www/static/notation/assets/songs/jay/
-cp ./assets/songs/pu_shu/* ../../../../amateurguitar/www/static/notation/assets/songs/pu_shu/
+cp ./target/wasm.js ../../../../amateurguitar/www/themes/juice/static/notation/
+cp ./target/wasm_bg.wasm ../../../../amateurguitar/themes/juice/www/static/notation/
+cp ./assets/fonts/* ../../../../amateurguitar/www/themes/juice/static/notation/assets/fonts/
+cp ./assets/png/* ../../../../amateurguitar/www/themes/juice/static/notation/assets/png/
+cp ./assets/beginner/* ../../../../amateurguitar/www/themes/juice/static/notation/assets/beginner/
+cp ./assets/songs/jay/* ../../../../amateurguitar/www/themes/juice/static/notation/assets/songs/jay/
+cp ./assets/songs/pu_shu/* ../../../../amateurguitar/www/themes/juice/static/notation/assets/songs/pu_shu/
 """]
 dependencies = ["build-web"]

crates/notation_bevy/Cargo.toml

@@ -71,7 +71,7 @@ console_error_panic_hook = "0.1"
 gloo-events = "0.1.1"
 futures = "0.3"
 web-sys = { version = "0.3.45", features = [
-    "Element", "Document", "Window", "Location",
+    "Element", "Document", "Window", "Location", "console",
     #https://rustwasm.github.io/docs/wasm-bindgen/examples/web-audio.html
     "AudioContext", "AudioDestinationNode", "AudioNode", "AudioParam", "GainNode", "OscillatorNode", "OscillatorType",
 ]}

crates/notation_bevy/src/app/app.rs

@@ -1,3 +1,5 @@
+use std::sync::Arc;
+
 use bevy::app::PluginGroupBuilder;
 use bevy::input::mouse::MouseMotion;
 use bevy::prelude::*;
@@ -64,7 +66,7 @@ impl NotationApp {
         console_error_panic_hook::set_once();
 
         #[cfg(target_arch = "wasm32")]
-        app.add_plugin(crate::ext::bevy_web_fullscreen::FullViewportPlugin);
+        app.add_plugin(crate::wasm::bevy_web_fullscreen::FullViewportPlugin);
 
         app.add_plugin(bevy_egui::EguiPlugin);
         app.add_plugin(NotationUiPlugin);
@@ -101,13 +103,13 @@ impl NotationApp {
 
         app.add_system_set(
             SystemSet::on_enter(NotationAssetsStates::Loaded)
-                .with_system(setup_window_size.system()),
+                .with_system(setup_window_size.system())
         );
         app.add_system_set(
             SystemSet::on_update(NotationAssetsStates::Loaded)
                 .with_system(on_window_resized.system())
                 .with_system(handle_inputs.system())
-                .with_system(load_tab.system()),
+                .with_system(load_tab.system())
         );
 
         extra(&mut app);
@@ -131,7 +133,7 @@ fn load_tab(
     assets: ResMut<Assets<TabAsset>>,
     mut evts: EventWriter<AddTabEvent>,
 ) {
-    if state.tab.is_none() && state.parse_error.is_none() {
+    if state.window_width > 0.0 && state.window_height > 0.0 && state.tab.is_none() && state.parse_error.is_none() {
         if let Some(asset) = assets.get(&state.tab_asset) {
             match Tab::try_parse_arc(asset.tab.clone()) {
                 Ok(tab) => {
@@ -148,7 +150,7 @@ fn load_tab(
 }
 
 fn handle_inputs(
-    _keyboard_input: Res<Input<KeyCode>>,
+    mut commands: Commands,
     windows: Res<Windows>,
     keyboard_input: Res<Input<KeyCode>>,
     mouse_input: Res<Input<MouseButton>>,
@@ -160,6 +162,7 @@ fn handle_inputs(
     mut mouse_clicked: EventWriter<MouseClickedEvent>,
     mut mouse_dragged: EventWriter<MouseDraggedEvent>,
     mut window_resized_evts: EventWriter<WindowResizedEvent>,
+    viewer_query: Query<(Entity, &Arc<NotationViewer>), With<Arc<NotationViewer>>>,
 ) {
     if keyboard_input.pressed(KeyCode::LControl) {
         settings.mouse_dragged_panning = true;
@@ -174,8 +177,9 @@ fn handle_inputs(
         crate::viewer::control::ControlView::play_or_pause(&mut midi_state, &mut play_control_evts);
     } else if keyboard_input.just_released(KeyCode::Return) {
         crate::viewer::control::ControlView::play_or_stop(&mut midi_state, &mut play_control_evts);
-    }
-    if mouse_input.just_released(MouseButton::Left) {
+    } else if keyboard_input.just_released(KeyCode::Backslash) {
+        crate::viewer::control::ControlView::toggle_layout_mode(&mut commands, &mut state, &mut settings, &viewer_query);
+    } else if mouse_input.just_released(MouseButton::Left) {
         windows
             .get_primary()
             .and_then(|x| x.cursor_position())
@@ -193,9 +197,19 @@ fn handle_inputs(
     }
 }
 
-fn setup_window_size(window: Res<WindowDescriptor>, mut app_state: ResMut<NotationAppState>) {
-    app_state.window_width = window.width;
-    app_state.window_height = window.height;
+fn setup_window_size(
+    window: Res<WindowDescriptor>,
+    mut app_state: ResMut<NotationAppState>,
+) {
+    #[cfg(target_arch = "wasm32")]
+    let (width, height) = crate::wasm::bevy_web_fullscreen::get_viewport_size();
+
+    #[cfg(not(target_arch = "wasm32"))]
+    let (width, height) = (window.width, window.height);
+
+    println!("setup_window_size(): {} {} ", width, height);
+    app_state.window_width = width;
+    app_state.window_height = height;
 }
 
 fn on_window_resized(
@@ -208,6 +222,7 @@ fn on_window_resized(
         if evt.width as usize != window.width as usize
             || evt.height as usize != window.height as usize
         {
+            println!("on_window_resized(): {} {} -> {} {} ", window.width, window.height, evt.width, evt.height);
             window.width = evt.width;
             window.height = evt.height;
             app_state.window_width = evt.width;

crates/notation_bevy/src/app/app_state.rs

@@ -22,8 +22,8 @@ impl NotationAppState {
     pub fn new(asset_server: &AssetServer, tab_path: String) -> Self {
         let tab_asset = asset_server.load(tab_path.as_str());
         Self {
-            window_width: 1280.0,
-            window_height: 720.0,
+            window_width: 0.0,
+            window_height: 0.0,
             tab_path,
             tab_asset,
             tab: None,

crates/notation_bevy/src/ext/mod.rs

@@ -31,10 +31,12 @@ pub mod settings;
 pub mod theme;
 
 pub mod app;
-pub mod ext;
 pub mod ui;
 pub mod viewer;
 
+#[cfg(target_arch = "wasm32")]
+pub mod wasm;
+
 #[cfg(feature = "inspector")]
 pub mod inspector;
 

crates/notation_bevy/src/lib.rs

@@ -37,7 +37,7 @@ impl TabBars {
 }
 impl<'a> View<NotationLayout<'a>> for TabBars {
     fn log_layout_changed(&self) -> bool {
-        true
+        false
     }
 }
 

crates/notation_bevy/src/tab/tab_bars.rs

@@ -150,6 +150,20 @@ impl ControlView {
         }
     }
 
+    pub fn toggle_layout_mode(
+        commands: &mut Commands,
+        state: &mut ResMut<NotationAppState>,
+        settings: &mut ResMut<NotationSettings>,
+        viewer_query: &Query<(Entity, &Arc<NotationViewer>), With<Arc<NotationViewer>>>,
+    ) {
+        if settings.layout.mode == LayoutMode::Grid {
+            settings.layout.mode = LayoutMode::Line;
+        } else {
+            settings.layout.mode = LayoutMode::Grid;
+        }
+        Self::reload_tab(commands, state, viewer_query);
+    }
+
     pub fn control_ui(
         mut commands: Commands,
         egui_ctx: Res<EguiContext>,
@@ -210,12 +224,7 @@ impl ControlView {
                         "Grid Mode"
                     };
                     if ui.button(mode_text).clicked() {
-                        if settings.layout.mode == LayoutMode::Grid {
-                            settings.layout.mode = LayoutMode::Line;
-                        } else {
-                            settings.layout.mode = LayoutMode::Grid;
-                        }
-                        Self::reload_tab(&mut commands, &mut state, &viewer_query);
+                        Self::toggle_layout_mode(&mut commands, &mut state, &mut settings, &viewer_query);
                     }
                     if ui.button("Reload Tab").clicked() {
                         Self::reload_tab(&mut commands, &mut state, &viewer_query);

crates/notation_bevy/src/viewer/control.rs

@@ -23,7 +23,7 @@ impl Plugin for FullViewportPlugin {
     }
 }
 
-fn get_viewport_size() -> (f32, f32) {
+pub fn get_viewport_size() -> (f32, f32) {
     let web_window = web_sys::window().expect("could not get window");
     let document_element = web_window
         .document()
@@ -33,6 +33,7 @@ fn get_viewport_size() -> (f32, f32) {
 
     let width = document_element.client_width();
     let height = document_element.client_height();
+    web_log!("bevy_web_fullscreen::get_viewport_size() -> {}, {}", width, height);
 
     (width as f32, height as f32)
 }
@@ -44,6 +45,7 @@ fn setup_viewport_resize_system(resize_sender: Res<Mutex<OnResizeSender>>) {
     local_sender.send(()).unwrap();
 
     gloo_events::EventListener::new(&web_window, "resize", move |_event| {
+        web_log!("bevy_web_fullscreen::setup_viewport_resize_system() {:?}", _event);
         local_sender.send(()).unwrap();
     })
     .forget();
@@ -56,7 +58,9 @@ fn viewport_resize_system(
     if resize_receiver.lock().unwrap().try_recv().is_ok() {
         if let Some(window) = windows.get_primary_mut() {
             let size = get_viewport_size();
+            web_log!("bevy_web_fullscreen::viewport_resize_system() {}, {}", size.0, size.1);
             window.set_resolution(size.0, size.1);
         }
     }
 }
+

…tion_bevy/src/ext/bevy_web_fullscreen.rs …ion_bevy/src/wasm/bevy_web_fullscreen.rscrates/notation_bevy/src/ext/bevy_web_fullscreen.rs renamed to crates/notation_bevy/src/wasm/bevy_web_fullscreen.rs crates/notation_bevy/src/ext/bevy_web_fullscreen.rs renamed to crates/notation_bevy/src/wasm/bevy_web_fullscreen.rs

@@ -0,0 +1,14 @@
+extern crate web_sys;
+
+#[macro_use]
+pub mod web_utils {
+    // A macro to provide `println!(..)`-style syntax for `console.log` logging.
+    macro_rules! web_log {
+        ( $( $t:tt )* ) => {
+            web_sys::console::log_1(&format!( $( $t )* ).into());
+        }
+    }
+}
+
+pub mod bevy_web_fullscreen;
+