Update wasm/web example

build_wasm.sh

@@ -23,3 +23,5 @@ FOLDER_NAME=${PWD##*/}
 TARGET_NAME="example_wasm.wasm"
 wasm-bindgen "target/wasm32-unknown-unknown/$BUILD/$TARGET_NAME" \
   --out-dir docs --no-modules --no-typescript
+
+open http://localhost:8888

docs/example_wasm.js

@@ -419,6 +419,9 @@ async function init(input) {
     imports.wbg.__wbg_uniform2f_c1a2fa4599b15748 = function(arg0, arg1, arg2, arg3) {
         getObject(arg0).uniform2f(getObject(arg1), arg2, arg3);
     };
+    imports.wbg.__wbg_uniform4f_6e9aa69017843be0 = function(arg0, arg1, arg2, arg3, arg4, arg5) {
+        getObject(arg0).uniform4f(getObject(arg1), arg2, arg3, arg4, arg5);
+    };
     imports.wbg.__wbg_useProgram_324a22a196d1f113 = function(arg0, arg1) {
         getObject(arg0).useProgram(getObject(arg1));
     };

docs/index.html

@@ -62,6 +62,8 @@
         var g_mouse_pos = null;
         var g_mouse_down = false;
         var g_is_touch = false;
+        var g_scroll_delta_x = 0;
+        var g_scroll_delta_y = 0;
 
         function pixels_per_point() {
             // return 1.0;
@@ -76,14 +78,17 @@
         }
 
         function get_input(canvas) {
-            return {
+            var input = {
                 mouse_down: g_mouse_down,
                 mouse_pos: g_mouse_pos,
-                // TODO: scroll_delta
+                scroll_delta: { x: -g_scroll_delta_x, y: -g_scroll_delta_y }, // TODO: standardize scroll direction
                 screen_size: { x: window.innerWidth, y: window.innerHeight },
                 pixels_per_point: pixels_per_point(),
                 time: window.performance.now() / 1000.0,
             };
+            g_scroll_delta_x = 0;
+            g_scroll_delta_y = 0;
+            return input;
         }
 
         function mouse_pos_from_event(canvas, event) {
@@ -94,6 +99,9 @@
             };
         }
 
+        // If true, paint at full framerate always.
+        // If false, only paint on input.
+        // TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
         const ANIMATION_FRAME = true;
 
         function paint() {
@@ -173,6 +181,14 @@
                 event.preventDefault();
             });
 
+            canvas.addEventListener("wheel", function (event) {
+                g_scroll_delta_x += event.deltaX;
+                g_scroll_delta_y += event.deltaY;
+                invalidate();
+                event.stopPropagation();
+                event.preventDefault();
+            });
+
             if (!ANIMATION_FRAME) {
                 window.addEventListener("load", invalidate);
                 window.addEventListener("pagehide", invalidate);

emigui/README.md

@@ -17,7 +17,6 @@ This is the core library crate Emigui. It is fully platform independent without
     * [x] Vertical scrolling
     * [ ] Horizontal scrolling
     * [x] Scroll-wheel input
-        * [ ] Scroll-wheel input in web verions
     * [x] Drag background to scroll
     * [ ] Kinetic scrolling
 * [ ] Menu bar (File, Edit, etc)
@@ -25,6 +24,12 @@ This is the core library crate Emigui. It is fully platform independent without
     * [ ] Clipboard copy/paste
 * [ ] Color picker
 * [ ] Style editor
+* [ ] Table with resizable columns
+
+### Web version:
+* [x] Scroll input
+* [ ] Add support for clicking links
+* [ ] Change to resize cursor on hover
 
 ### Animations
 Add extremely quick animations for some things, maybe 2-3 frames. For instance:

emigui/src/example_app.rs

@@ -45,7 +45,9 @@ impl ExampleApp {
             ));
         });
 
-        region.collapsing("Widgets", |region| {
+        CollapsingHeader::new("Widgets")
+            .default_open()
+            .show(region, |region| {
             region.horizontal(Align::Min, |region| {
                 region.add(label!("Text can have").text_color(srgba(110, 255, 110, 255)));
                 region.add(label!("color").text_color(srgba(128, 140, 255, 255)));
@@ -133,7 +135,7 @@ impl ExampleApp {
         });
 
         CollapsingHeader::new("Scroll area")
-            .default_open()
+            // .default_open()
             .show(region, |region| {
                 ScrollArea::default().show(region, |region| {
                     region.add_label(LOREM_IPSUM);

example_wasm/src/lib.rs

@@ -51,11 +51,9 @@ impl State {
         region.add_label(
             "Everything you see is rendered as textured triangles. There is no DOM. There are no HTML elements."
         );
-        region.add_label("This not JavaScript. This is Rust code, running at 60 Hz. This is the web page, reinvented with game tech.");
+        region.add_label("This is not JavaScript. This is Rust, running at 60 FPS. This is the web page, reinvented with game tech.");
         region.add_label("This is also work in progress, and not ready for production... yet :)");
         region.add(Separator::new());
-        self.example_app.ui(&mut region);
-        self.emigui.ui(&mut region);
 
         region.set_align(Align::Min);
         region.add_label("WebGl painter info:");
@@ -75,16 +73,18 @@ impl State {
 
         // TODO: Make it even simpler to show a window
 
-        Window::new("Test window").show(region.ctx(), |region| {
-            region.add_label("Grab the window and move it around!");
-
-            region.add_label("This window can be reisized, but not smaller than the contents.");
+        Window::new("Examples")
+            .default_pos(pos2(32.0, 300.0))
+            .default_size(vec2(300.0, 400.0))
+            .show(region.ctx(), |region| {
+                self.example_app.ui(region);
             });
-        Window::new("Another test window")
-            .default_pos(pos2(400.0, 100.0))
+
+        Window::new("Emigui settings")
+            .default_pos(pos2(400.0, 300.0))
+            .default_size(vec2(400.0, 400.0))
             .show(region.ctx(), |region| {
-                region.add_label("This might be on top of the other window?");
-                region.add_label("Second line of text");
+                self.emigui.ui(region);
             });
 
         let bg_color = srgba(16, 16, 16, 255);

start_server.sh

@@ -2,5 +2,5 @@
 set -eu
 
 cd docs
-echo "open localhost:8000"
-python3 -m http.server 8000 --bind 127.0.0.1
+echo "open http://localhost:8888"
+python3 -m http.server 8888 --bind 127.0.0.1