egui/docs/index.html

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Disable zooming: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- TODO: read https://www.html5rocks.com/en/mobile/mobifying/#toc-meta-viewport -->

<head>
    <title>Egui – An experimental immediate mode GUI written in Rust</title>
    <style>
        html {
            /* Remove touch delay: */
            touch-action: manipulation;
        }

        body {
            background: #101010;
        }

        /* Allow canvas to fill entire web page: */
        html,
        body {
            overflow: hidden;
            margin: 0 !important;
            padding: 0 !important;
        }
    </style>
</head>

<body>
    <script>
        // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
        // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
        // but this doesn't work with `file://` urls. This example is frequently
        // viewed by simply opening `index.html` in a browser (with a `file://`
        // url), so it would fail if we were to call this function!
        //
        // Work around this for now by deleting the function to ensure that the
        // `no_modules.js` script doesn't have access to it. You won't need this
        // hack when deploying over HTTP.
        delete WebAssembly.instantiateStreaming;
    </script>

    <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
    <script src="example_wasm.js"></script>

    <script>
        // we'll defer our execution until the wasm is ready to go
        // here we tell bindgen the path to the wasm file so it can start
        // initialization and return to us a promise when it's done
        wasm_bindgen("./example_wasm_bg.wasm")
            .then(on_wasm_loaded)["catch"](console.error);
        // ----------------------------------------------------------------------------
        var g_wasm_app = null;

        function paint_gui(canvas) {
            if (g_wasm_app === null) {
                g_wasm_app = wasm_bindgen.new_webgl_gui("canvas");
            }

            let input = {
                egui: get_egui_input(canvas),
                web: {
                    location: window.location.toString(),
                    location_hash: window.location.hash.toString(), // i.e. #fragment
                },
            }

            let output = JSON.parse(wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input)));
            // console.log(`output: ${JSON.stringify(output)}`);
            document.body.style.cursor = from_egui_cursor(output.cursor_icon);
            // console.log(`Translated ${output.cursor_icon} to ${document.body.style.cursor}`);
            if (output.open_url) {
                window.open(output.open_url, "_self");
            }
        }

        function from_egui_cursor(cursor) {
            if (cursor == "no_drop") { return "no-drop"; }
            else if (cursor == "not_allowed") { return "not-allowed"; }
            else if (cursor == "resize_horizontal") { return "ew-resize"; }
            else if (cursor == "resize_ne_sw") { return "nesw-resize"; }
            else if (cursor == "resize_nw_se") { return "nwse-resize"; }
            else if (cursor == "resize_vertical") { return "ns-resize"; }
            else if (cursor == "pointing_hand") { return "pointer"; }
            // TODO: more
            else {
                // default, help, pointer, progress, wait, cell, crosshair, text, alias, copy, move, grab, grabbing,
                return cursor;
            }
        }

        // ----------------------------------------------------------------------------
        var g_mouse_pos = null;
        var g_mouse_down = false;
        var g_is_touch = false; // we don't know yet
        var g_scroll_delta_x = 0;
        var g_scroll_delta_y = 0;
        var g_events = [];

        function pixels_per_point() {
            return window.devicePixelRatio || 1.0;
        }

        function auto_resize_canvas(canvas) {
            canvas.style.width = window.innerWidth + "px";
            canvas.style.height = window.innerHeight + "px";
            canvas.width = window.innerWidth * pixels_per_point();
            canvas.height = window.innerHeight * pixels_per_point();
        }

        function get_egui_input(canvas) {
            var input = {
                mouse_down: g_mouse_down,
                mouse_pos: g_mouse_pos,
                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,
                seconds_since_midnight: seconds_since_midnight(),
                events: g_events,
            };
            g_scroll_delta_x = 0;
            g_scroll_delta_y = 0;
            g_events = [];
            return input;
        }

        function seconds_since_midnight() {
            var d = new Date();
            return (d.getHours() * 60.0 + d.getMinutes()) * 60.0 + d.getSeconds() + 1e-3 * d.getMilliseconds();
        }

        function mouse_pos_from_event(canvas, event) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: event.clientX - rect.left,
                y: event.clientY - rect.top
            };
        }

        // 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() {
            var canvas = document.getElementById("canvas");
            auto_resize_canvas(canvas);
            paint_gui(canvas);
        }

        function paint_and_schedule() {
            paint();
            if (ANIMATION_FRAME) {
                window.requestAnimationFrame(paint_and_schedule);
            }
        }

        function on_wasm_loaded() {
            var canvas = document.getElementById("canvas");
            var invalidate = function () {
                if (!ANIMATION_FRAME) {
                    paint();
                }
            };

            canvas.addEventListener("mousedown", function (event) {
                if (g_is_touch) { return; }
                g_mouse_pos = mouse_pos_from_event(canvas, event);
                g_mouse_down = true;
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });
            canvas.addEventListener("mousemove", function (event) {
                if (g_is_touch) { return; }
                g_mouse_pos = mouse_pos_from_event(canvas, event);
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });
            canvas.addEventListener("mouseup", function (event) {
                if (g_is_touch) { return; }
                g_mouse_pos = mouse_pos_from_event(canvas, event);
                g_mouse_down = false;
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });
            canvas.addEventListener("mouseleave", function (event) {
                if (g_is_touch) { return; }
                g_mouse_pos = null;
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });

            canvas.addEventListener("touchstart", function (event) {
                g_is_touch = true;
                g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
                g_mouse_down = true;
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });
            canvas.addEventListener("touchmove", function (event) {
                g_is_touch = true;
                g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });
            canvas.addEventListener("touchend", function (event) {
                g_is_touch = true;
                g_mouse_down = false; // First release mouse to click...
                paint();
                g_mouse_pos = null; // ...remove hover effect
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });

            canvas.addEventListener("wheel", function (event) {
                g_scroll_delta_x += event.deltaX;
                g_scroll_delta_y += event.deltaY;
                invalidate();
                event.stopPropagation();
                event.preventDefault();
            });

            document.addEventListener("keydown", function (event) {
                var key = translate_key(event.key);
                if (key) {
                    g_events.push({ "key": { "key": key, 'pressed': true } });
                } else {
                    g_events.push({ "text": event.key });
                }
                invalidate();
                // event.stopPropagation();
                // event.preventDefault();
            });

            // document.addEventListener("keypress", function (event) {
            //     console.log(`keypress: ${event.key} ${JSON.stringify(event)}`);
            //     invalidate();
            //     event.stopPropagation();
            //     event.preventDefault();
            // });

            document.addEventListener("keyup", function (event) {
                // console.log(`keyup: ${event.key} ${JSON.stringify(event)}`);
                var key = translate_key(event.key);
                if (key) {
                    g_events.push({ "key": { "key": key, 'pressed': false } });
                }
                invalidate();
                // event.stopPropagation();
                // event.preventDefault();
            });

            if (!ANIMATION_FRAME) {
                window.addEventListener("load", invalidate);
                window.addEventListener("pagehide", invalidate);
                window.addEventListener("pageshow", invalidate);
                window.addEventListener("resize", invalidate);
            }

            paint_and_schedule();
        }

        function translate_key(key) {
            if (key == "Alt") { return "alt"; }
            if (key == "Backspace") { return "backspace"; }
            if (key == "Control") { return "control"; }
            if (key == "Delete") { return "delete"; }
            if (key == "ArrowDown") { return "down"; }
            if (key == "End") { return "end"; }
            if (key == "Escape") { return "escape"; }
            if (key == "Home") { return "home"; }
            if (key == "Help") { return "insert"; }
            if (key == "ArrowLeft") { return "left"; }
            if (key == "Meta") { return "logo"; }
            if (key == "PageDown") { return "page_down"; }
            if (key == "PageUp") { return "page_up"; }
            if (key == "Enter") { return "return"; }
            if (key == "ArrowRight") { return "right"; }
            if (key == "Shift") { return "shift"; }
            // if (key == " ") { return "space"; }
            if (key == "Tab") { return "tab"; }
            if (key == "ArrowUp") { return "up"; }
            return null;
        }
    </script>
    <!-- We later make this cover the entire screen even when resized -->
    <canvas id="canvas" width="1024" height="1024"></canvas>
</body>

</html>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								<!DOCTYPE html>
 								<html>
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
-												Mobile fixes

											
										
										
											2019-01-17 23:34:01 +00:00
+								<!-- Disable zooming: -->
 								<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 								<!-- TODO: read https://www.html5rocks.com/en/mobile/mobifying/#toc-meta-viewport -->
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								<head>
-												Rename from "Emigui" to "Egui"

Shorter to type (especially in code).

											
										
										
											2020-05-30 08:22:35 +00:00
+								    <title>Egui – An experimental immediate mode GUI written in Rust</title>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    <style>
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        html {
 								            /* Remove touch delay: */
 								            touch-action: manipulation;
 								        }
 								        body {
-												Make emigui fill entire web page

											
										
										
											2020-04-23 20:08:42 +00:00
+								            background: #101010;
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        }
-												Make emigui fill entire web page

											
										
										
											2020-04-23 20:08:42 +00:00
+								        /* Allow canvas to fill entire web page: */
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        html,
 								        body {
 								            overflow: hidden;
-												Make emigui fill entire web page

											
										
										
											2020-04-23 20:08:42 +00:00
+								            margin: 0 !important;
 								            padding: 0 !important;
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        }
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    </style>
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								</head>
 								<body>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    <script>
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        // The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
 								        // `WebAssembly.instantiateStreaming` to instantiate the wasm module,
 								        // but this doesn't work with `file://` urls. This example is frequently
 								        // viewed by simply opening `index.html` in a browser (with a `file://`
 								        // url), so it would fail if we were to call this function!
 								        //
 								        // Work around this for now by deleting the function to ensure that the
 								        // `no_modules.js` script doesn't have access to it. You won't need this
 								        // hack when deploying over HTTP.
 								        delete WebAssembly.instantiateStreaming;
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    </script>
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								    <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
-												Rename example app to example_wasm

											
										
										
											2019-03-16 11:55:42 +00:00
+								    <script src="example_wasm.js"></script>
-												Split example app from emigui_wasm

											
										
										
											2019-02-09 22:00:07 +00:00
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    <script>
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        // we'll defer our execution until the wasm is ready to go
 								        // here we tell bindgen the path to the wasm file so it can start
 								        // initialization and return to us a promise when it's done
 								        wasm_bindgen("./example_wasm_bg.wasm")
 								            .then(on_wasm_loaded)["catch"](console.error);
 								        // ----------------------------------------------------------------------------
 								        var g_wasm_app = null;
-												Remove 'Web' from GuiInput

											
										
										
											2020-05-21 10:04:14 +00:00
+								        function paint_gui(canvas) {
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								            if (g_wasm_app === null) {
-												[egui] prepare for 0.1.0 release

											
										
										
											2020-05-30 16:22:33 +00:00
+								                g_wasm_app = wasm_bindgen.new_webgl_gui("canvas");
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								            }
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
-												Remove 'Web' from GuiInput

											
										
										
											2020-05-21 10:04:14 +00:00
+								            let input = {
-												Rename from "Emigui" to "Egui"

Shorter to type (especially in code).

											
										
										
											2020-05-30 08:22:35 +00:00
+								                egui: get_egui_input(canvas),
-												Remove 'Web' from GuiInput

											
										
										
											2020-05-21 10:04:14 +00:00
+								                web: {
 								                    location: window.location.toString(),
 								                    location_hash: window.location.hash.toString(), // i.e. #fragment
 								                },
 								            }
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
+								            let output = JSON.parse(wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input)));
 								            // console.log(`output: ${JSON.stringify(output)}`);
-												Rename from "Emigui" to "Egui"

Shorter to type (especially in code).

											
										
										
											2020-05-30 08:22:35 +00:00
+								            document.body.style.cursor = from_egui_cursor(output.cursor_icon);
-												Resize windows by dragging any side or corner

											
										
										
											2020-05-17 14:42:20 +00:00
+								            // console.log(`Translated ${output.cursor_icon} to ${document.body.style.cursor}`);
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
+								            if (output.open_url) {
 								                window.open(output.open_url, "_self");
 								            }
 								        }
-												Rename from "Emigui" to "Egui"

Shorter to type (especially in code).

											
										
										
											2020-05-30 08:22:35 +00:00
+								        function from_egui_cursor(cursor) {
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
+								            if (cursor == "no_drop") { return "no-drop"; }
 								            else if (cursor == "not_allowed") { return "not-allowed"; }
-												Resize windows by dragging any side or corner

											
										
										
											2020-05-17 14:42:20 +00:00
+								            else if (cursor == "resize_horizontal") { return "ew-resize"; }
 								            else if (cursor == "resize_ne_sw") { return "nesw-resize"; }
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
+								            else if (cursor == "resize_nw_se") { return "nwse-resize"; }
-												Resize windows by dragging any side or corner

											
										
										
											2020-05-17 14:42:20 +00:00
+								            else if (cursor == "resize_vertical") { return "ns-resize"; }
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
+								            else if (cursor == "pointing_hand") { return "pointer"; }
 								            // TODO: more
 								            else {
 								                // default, help, pointer, progress, wait, cell, crosshair, text, alias, copy, move, grab, grabbing,
 								                return cursor;
 								            }
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								        }
-												Add support for hyperlinks

											
										
										
											2020-04-23 17:15:17 +00:00
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        // ----------------------------------------------------------------------------
 								        var g_mouse_pos = null;
 								        var g_mouse_down = false;
-												Make emigui fill entire web page

											
										
										
											2020-04-23 20:08:42 +00:00
+								        var g_is_touch = false; // we don't know yet
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								        var g_scroll_delta_x = 0;
 								        var g_scroll_delta_y = 0;
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								        var g_events = [];
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
 								        function pixels_per_point() {
 								            return window.devicePixelRatio || 1.0;
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								        }
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        function auto_resize_canvas(canvas) {
 								            canvas.style.width = window.innerWidth + "px";
 								            canvas.style.height = window.innerHeight + "px";
 								            canvas.width = window.innerWidth * pixels_per_point();
 								            canvas.height = window.innerHeight * pixels_per_point();
 								        }
-												Rename from "Emigui" to "Egui"

Shorter to type (especially in code).

											
										
										
											2020-05-30 08:22:35 +00:00
+								        function get_egui_input(canvas) {
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								            var input = {
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								                mouse_down: g_mouse_down,
 								                mouse_pos: g_mouse_pos,
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								                scroll_delta: { x: -g_scroll_delta_x, y: -g_scroll_delta_y }, // TODO: standardize scroll direction
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								                screen_size: { x: window.innerWidth, y: window.innerHeight },
 								                pixels_per_point: pixels_per_point(),
-												Add time as input to emigui to enable animations

											
										
										
											2020-04-21 12:46:42 +00:00
+								                time: window.performance.now() / 1000.0,
-												Add a fractal clock example to showcase painting performance

											
										
										
											2020-05-11 18:21:24 +00:00
+								                seconds_since_midnight: seconds_since_midnight(),
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								                events: g_events,
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								            };
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								            g_scroll_delta_x = 0;
 								            g_scroll_delta_y = 0;
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								            g_events = [];
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								            return input;
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        }
-												Add a fractal clock example to showcase painting performance

											
										
										
											2020-05-11 18:21:24 +00:00
+								        function seconds_since_midnight() {
 								            var d = new Date();
 								            return (d.getHours() * 60.0 + d.getMinutes()) * 60.0 + d.getSeconds() + 1e-3 * d.getMilliseconds();
 								        }
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        function mouse_pos_from_event(canvas, event) {
 								            var rect = canvas.getBoundingClientRect();
 								            return {
 								                x: event.clientX - rect.left,
 								                y: event.clientY - rect.top
 								            };
 								        }
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								        // 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).
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        const ANIMATION_FRAME = true;
 								        function paint() {
 								            var canvas = document.getElementById("canvas");
 								            auto_resize_canvas(canvas);
-												Remove 'Web' from GuiInput

											
										
										
											2020-05-21 10:04:14 +00:00
+								            paint_gui(canvas);
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        }
 								        function paint_and_schedule() {
 								            paint();
 								            if (ANIMATION_FRAME) {
 								                window.requestAnimationFrame(paint_and_schedule);
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
+								            }
-												Fix touch interaction

											
										
										
											2019-03-16 13:12:40 +00:00
+								        }
-												Run on requestAnimationFrame by default

											
										
										
											2019-03-12 09:00:41 +00:00
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								        function on_wasm_loaded() {
 								            var canvas = document.getElementById("canvas");
 								            var invalidate = function () {
 								                if (!ANIMATION_FRAME) {
 								                    paint();
 								                }
 								            };
 								            canvas.addEventListener("mousedown", function (event) {
 								                if (g_is_touch) { return; }
 								                g_mouse_pos = mouse_pos_from_event(canvas, event);
 								                g_mouse_down = true;
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("mousemove", function (event) {
 								                if (g_is_touch) { return; }
 								                g_mouse_pos = mouse_pos_from_event(canvas, event);
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("mouseup", function (event) {
 								                if (g_is_touch) { return; }
 								                g_mouse_pos = mouse_pos_from_event(canvas, event);
 								                g_mouse_down = false;
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("mouseleave", function (event) {
 								                if (g_is_touch) { return; }
 								                g_mouse_pos = null;
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("touchstart", function (event) {
 								                g_is_touch = true;
 								                g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
 								                g_mouse_down = true;
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("touchmove", function (event) {
 								                g_is_touch = true;
 								                g_mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
 								            canvas.addEventListener("touchend", function (event) {
 								                g_is_touch = true;
 								                g_mouse_down = false; // First release mouse to click...
-												Fix touch screen interactions

											
										
										
											2020-04-23 19:27:05 +00:00
+								                paint();
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								                g_mouse_pos = null; // ...remove hover effect
-												Fix touch screen interactions

											
										
										
											2020-04-23 19:27:05 +00:00
+								                invalidate();
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								                event.stopPropagation();
 								                event.preventDefault();
 								            });
-												Update wasm/web example

											
										
										
											2020-04-23 07:50:03 +00:00
+								            canvas.addEventListener("wheel", function (event) {
 								                g_scroll_delta_x += event.deltaX;
 								                g_scroll_delta_y += event.deltaY;
 								                invalidate();
 								                event.stopPropagation();
 								                event.preventDefault();
 								            });
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								            document.addEventListener("keydown", function (event) {
 								                var key = translate_key(event.key);
 								                if (key) {
 								                    g_events.push({ "key": { "key": key, 'pressed': true } });
 								                } else {
 								                    g_events.push({ "text": event.key });
 								                }
 								                invalidate();
-												Fix: web version steal keyboard input

											
										
										
											2020-05-11 17:53:43 +00:00
+								                // event.stopPropagation();
 								                // event.preventDefault();
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								            });
 								            // document.addEventListener("keypress", function (event) {
 								            //     console.log(`keypress: ${event.key} ${JSON.stringify(event)}`);
 								            //     invalidate();
 								            //     event.stopPropagation();
 								            //     event.preventDefault();
 								            // });
 								            document.addEventListener("keyup", function (event) {
 								                // console.log(`keyup: ${event.key} ${JSON.stringify(event)}`);
 								                var key = translate_key(event.key);
 								                if (key) {
 								                    g_events.push({ "key": { "key": key, 'pressed': false } });
 								                }
 								                invalidate();
-												Fix: web version steal keyboard input

											
										
										
											2020-05-11 17:53:43 +00:00
+								                // event.stopPropagation();
 								                // event.preventDefault();
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
+								            });
-												Refactor example code

											
										
										
											2020-04-12 10:07:51 +00:00
+								            if (!ANIMATION_FRAME) {
 								                window.addEventListener("load", invalidate);
 								                window.addEventListener("pagehide", invalidate);
 								                window.addEventListener("pageshow", invalidate);
 								                window.addEventListener("resize", invalidate);
 								            }
 								            paint_and_schedule();
 								        }
-												Basic text input support

											
										
										
											2020-04-29 19:25:49 +00:00
 								        function translate_key(key) {
 								            if (key == "Alt") { return "alt"; }
 								            if (key == "Backspace") { return "backspace"; }
 								            if (key == "Control") { return "control"; }
 								            if (key == "Delete") { return "delete"; }
 								            if (key == "ArrowDown") { return "down"; }
 								            if (key == "End") { return "end"; }
 								            if (key == "Escape") { return "escape"; }
 								            if (key == "Home") { return "home"; }
 								            if (key == "Help") { return "insert"; }
 								            if (key == "ArrowLeft") { return "left"; }
 								            if (key == "Meta") { return "logo"; }
 								            if (key == "PageDown") { return "page_down"; }
 								            if (key == "PageUp") { return "page_up"; }
 								            if (key == "Enter") { return "return"; }
 								            if (key == "ArrowRight") { return "right"; }
 								            if (key == "Shift") { return "shift"; }
 								            // if (key == " ") { return "space"; }
 								            if (key == "Tab") { return "tab"; }
 								            if (key == "ArrowUp") { return "up"; }
 								            return null;
 								        }
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								    </script>
-												Make emigui fill entire web page

											
										
										
											2020-04-23 20:08:42 +00:00
+								    <!-- We later make this cover the entire screen even when resized -->
-												Full screen canvas

											
										
										
											2018-12-27 23:51:40 +00:00
+								    <canvas id="canvas" width="1024" height="1024"></canvas>
-												No typescript. Just one index.html + wasm.

											
										
										
											2019-01-05 21:55:09 +00:00
+								</body>
-												Initial commit: Closed loop of TS->Rust->TS

											
										
										
											2018-12-23 18:42:30 +00:00
+								</html>