86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
// 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();
|
|
}
|