migrations/egui
1
0
Fork 0
mirror of https://github.com/emilk/egui.git synced 2026-09-01 06:10:06 -04:00
Code Activity

[web] port all remaining JS code to Rust

Browse Source
This commit is contained in:
Emil Ernerfeldt
2020-07-18 18:00:05 +02:00
parent 0afad57d41
commit 1a4c399e41
9 changed files with 568 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
docs/index.html
View File

@@ -30,8 +30,8 @@
</head>
<body>
<!-- We later make this cover the entire screen even when resized -->
<canvas id="canvas" width="1024" height="1024"></canvas>
<!-- The WASM code will resize this to cover the entire screen -->
<canvas id="canvas"></canvas>
<script>
// The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
@@ -50,232 +50,14 @@
<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
// 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 egui_state() {
window.g_egui_state = window.g_egui_state || {
mouse_pos: null,
mouse_down: false,
is_touch: false, // we don't know yet
scroll_delta_x: 0,
scroll_delta_y: 0,
events: [],
};
return window.g_egui_state;
};
// ----------------------------------------------------------------------------
function pixels_per_point() {
return window.devicePixelRatio || 1.0;
}
function get_egui_input() {
let state = egui_state();
var input = {
mouse_down: state.mouse_down,
mouse_pos: state.mouse_pos,
scroll_delta: { x: -state.scroll_delta_x, y: -state.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: state.events,
};
state.scroll_delta_x = 0;
state.scroll_delta_y = 0;
state.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() {
wasm_bindgen.resize_to_screen_size("canvas");
if (g_wasm_app === null) {
g_wasm_app = wasm_bindgen.new_webgl_gui("canvas");
}
let input = get_egui_input();
wasm_bindgen.run_gui(g_wasm_app, JSON.stringify(input));
}
function paint_and_schedule() {
paint();
if (ANIMATION_FRAME) {
window.requestAnimationFrame(paint_and_schedule);
}
}
function on_wasm_loaded() {
var canvas = document.getElementById("canvas");
console.assert(canvas);
install_canvas_events(canvas, paint);
install_document_events(paint);
paint_and_schedule();
}
function install_document_events(paint) {
var invalidate = function () {
if (!ANIMATION_FRAME) {
paint();
}
};
document.addEventListener("keydown", function (event) {
var key = translate_key(event.key);
if (key) {
egui_state().events.push({ "key": { "key": key, 'pressed': true } });
} else {
egui_state().events.push({ "text": event.key });
}
invalidate();
// event.stopPropagation();
// event.preventDefault();
});
// document.addEventListener("keypress", (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) {
egui_state().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);
}
}
function install_canvas_events(canvas, paint) {
var invalidate = function () {
if (!ANIMATION_FRAME) {
paint();
}
};
canvas.addEventListener("mousedown", function (event) {
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
egui_state().mouse_down = true;
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mousemove", function (event) {
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mouseup", function (event) {
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = mouse_pos_from_event(canvas, event);
egui_state().mouse_down = false;
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("mouseleave", function (event) {
if (egui_state().is_touch) { return; }
egui_state().mouse_pos = null;
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchstart", function (event) {
egui_state().is_touch = true;
egui_state().mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
egui_state().mouse_down = true;
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchmove", function (event) {
egui_state().is_touch = true;
egui_state().mouse_pos = { x: event.touches[0].pageX, y: event.touches[0].pageY };
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("touchend", function (event) {
egui_state().is_touch = true;
egui_state().mouse_down = false; // First release mouse to click...
paint(); // ...do the clicking...
egui_state().mouse_pos = null; // ...remove hover effect
invalidate();
event.stopPropagation();
event.preventDefault();
});
canvas.addEventListener("wheel", function (event) {
egui_state().scroll_delta_x += event.deltaX;
egui_state().scroll_delta_y += event.deltaY;
invalidate();
event.stopPropagation();
event.preventDefault();
});
}
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;
wasm_bindgen.start("canvas");
}
</script>
</body>