diff --git a/build_wasm.sh b/build_wasm.sh index b32b1b59f..36f8b39cc 100755 --- a/build_wasm.sh +++ b/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 diff --git a/docs/example_wasm.js b/docs/example_wasm.js index cbf33dc7b..b8e80a13d 100644 --- a/docs/example_wasm.js +++ b/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)); }; diff --git a/docs/example_wasm_bg.wasm b/docs/example_wasm_bg.wasm index 54ee65180..130efd1f2 100644 Binary files a/docs/example_wasm_bg.wasm and b/docs/example_wasm_bg.wasm differ diff --git a/docs/index.html b/docs/index.html index 594395c71..45923f5d2 100644 --- a/docs/index.html +++ b/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); diff --git a/emigui/README.md b/emigui/README.md index dda8fc71a..fc99a07ec 100644 --- a/emigui/README.md +++ b/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: diff --git a/emigui/src/example_app.rs b/emigui/src/example_app.rs index dfcff4ab4..1a615ae3f 100644 --- a/emigui/src/example_app.rs +++ b/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); diff --git a/example_wasm/src/lib.rs b/example_wasm/src/lib.rs index d7dd0a166..c749acbce 100644 --- a/example_wasm/src/lib.rs +++ b/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("Another test window") - .default_pos(pos2(400.0, 100.0)) + Window::new("Examples") + .default_pos(pos2(32.0, 300.0)) + .default_size(vec2(300.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.example_app.ui(region); + }); + + Window::new("Emigui settings") + .default_pos(pos2(400.0, 300.0)) + .default_size(vec2(400.0, 400.0)) + .show(region.ctx(), |region| { + self.emigui.ui(region); }); let bg_color = srgba(16, 16, 16, 255); diff --git a/start_server.sh b/start_server.sh index dd12cce58..f8ea3383c 100755 --- a/start_server.sh +++ b/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