egui/docs/frontend.js

// we'll defer our execution until the wasm is ready to go
function wasm_loaded() {
    console.log("wasm loaded");
    initialize();
}
// 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("./emgui_wasm_bg.wasm")
    .then(wasm_loaded)["catch"](console.error);
// ----------------------------------------------------------------------------
var g_webgl_painter = null;
function paint_gui(canvas, input) {
    if (g_webgl_painter === null) {
        g_webgl_painter = wasm_bindgen.new_webgl_painter("canvas");
    }
    wasm_bindgen.paint_webgl(g_webgl_painter, JSON.stringify(input));
}
// ----------------------------------------------------------------------------
var g_mouse_pos = { x: -1000.0, y: -1000.0 };
var g_mouse_down = false;
function auto_resize_canvas(canvas) {
    if (true) {
        canvas.setAttribute("width", window.innerWidth);
        canvas.setAttribute("height", window.innerHeight);
    }
    else {
        // TODO: this stuff
        var pixels_per_point = window.devicePixelRatio || 1;
        var ctx = canvas.getContext("2d");
        ctx.scale(pixels_per_point, pixels_per_point);
        canvas.setAttribute("width", window.innerWidth * pixels_per_point);
        canvas.setAttribute("height", window.innerHeight * pixels_per_point);
    }
}
function get_input(canvas) {
    return {
        mouse_down: g_mouse_down,
        mouse_pos: g_mouse_pos,
        screen_size: { x: canvas.width, y: canvas.height }
    };
}
function mouse_pos_from_event(canvas, event) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
}
function initialize() {
    console.log("window.devicePixelRatio: " + window.devicePixelRatio);
    var canvas = document.getElementById("canvas");
    auto_resize_canvas(canvas);
    var repaint = function () { return paint_gui(canvas, get_input(canvas)); };
    canvas.addEventListener("mousemove", function (event) {
        g_mouse_pos = mouse_pos_from_event(canvas, event);
        repaint();
        event.stopPropagation();
        event.preventDefault();
    });
    canvas.addEventListener("mouseleave", function (event) {
        g_mouse_pos = { x: -1000.0, y: -1000.0 };
        repaint();
        event.stopPropagation();
        event.preventDefault();
    });
    canvas.addEventListener("mousedown", function (event) {
        g_mouse_pos = mouse_pos_from_event(canvas, event);
        g_mouse_down = true;
        repaint();
        event.stopPropagation();
        event.preventDefault();
    });
    canvas.addEventListener("mouseup", function (event) {
        g_mouse_pos = mouse_pos_from_event(canvas, event);
        g_mouse_down = false;
        repaint();
        event.stopPropagation();
        event.preventDefault();
    });
    window.addEventListener("load", repaint);
    window.addEventListener("pagehide", repaint);
    window.addEventListener("pageshow", repaint);
    window.addEventListener("resize", repaint);
    // setInterval(repaint, 16);
    repaint();
}