djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Cargo.lock generated
View file

@ -419,9 +419,12 @@ version = "0.1.0"
dependencies = [
"egui 0.1.2",
"egui_web 0.1.0",
"js-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
"parking_lot 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
"serde 1.0.114 (registry+https://github.com/rust-lang/crates.io-index)",
"serde_json 1.0.56 (registry+https://github.com/rust-lang/crates.io-index)",
"wasm-bindgen 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
"web-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
]
[[package]]

224
docs/example_wasm.js
View file

@ -187,41 +187,59 @@ function passStringToWasm0(arg, malloc, realloc) {
WASM_VECTOR_LEN = offset;
return ptr;
}
/**
* @param {string} canvas_id
* @returns {State}
*/
__exports.new_webgl_gui = function(canvas_id) {
var ptr0 = passStringToWasm0(canvas_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
var ret = wasm.new_webgl_gui(ptr0, len0);
return State.__wrap(ret);
};
/**
* @param {string} canvas_id
*/
__exports.resize_to_screen_size = function(canvas_id) {
var ptr0 = passStringToWasm0(canvas_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
wasm.resize_to_screen_size(ptr0, len0);
};
function _assertClass(instance, klass) {
if (!(instance instanceof klass)) {
throw new Error(`expected instance of ${klass.name}`);
}
return instance.ptr;
function makeMutClosure(arg0, arg1, dtor, f) {
const state = { a: arg0, b: arg1, cnt: 1 };
const real = (...args) => {
// First up with a closure we increment the internal reference
// count. This ensures that the Rust closure environment won't
// be deallocated while we're invoking it.
state.cnt++;
const a = state.a;
state.a = 0;
try {
return f(a, state.b, ...args);
} finally {
if (--state.cnt === 0) wasm.__wbindgen_export_2.get(dtor)(a, state.b);
else state.a = a;
}
};
real.original = state;
return real;
}
function __wbg_adapter_26(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_29(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_32(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
}
function __wbg_adapter_35(arg0, arg1) {
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h352b9cbf82e6c0ee(arg0, arg1);
}
function __wbg_adapter_38(arg0, arg1) {
wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1322780ee0c72b2c(arg0, arg1);
}
function __wbg_adapter_41(arg0, arg1, arg2) {
wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
}
/**
* @param {State} state
* @param {string} web_input_json
* @param {string} canvas_id
* @returns {StateRef}
*/
__exports.run_gui = function(state, web_input_json) {
_assertClass(state, State);
var ptr0 = passStringToWasm0(web_input_json, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
__exports.start = function(canvas_id) {
var ptr0 = passStringToWasm0(canvas_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
wasm.run_gui(state.ptr, ptr0, len0);
var ret = wasm.start(ptr0, len0);
return StateRef.__wrap(ret);
};
function handleError(f) {
@ -240,10 +258,10 @@ function getArrayU8FromWasm0(ptr, len) {
}
/**
*/
class State {
class StateRef {
static __wrap(ptr) {
const obj = Object.create(State.prototype);
const obj = Object.create(StateRef.prototype);
obj.ptr = ptr;
return obj;
@ -253,10 +271,10 @@ class State {
const ptr = this.ptr;
this.ptr = 0;
wasm.__wbg_state_free(ptr);
wasm.__wbg_stateref_free(ptr);
}
}
__exports.State = State;
__exports.StateRef = StateRef;
async function load(module, imports) {
if (typeof Response === 'function' && module instanceof Response) {
@ -306,6 +324,18 @@ async function init(input) {
imports.wbg.__wbindgen_object_drop_ref = function(arg0) {
takeObject(arg0);
};
imports.wbg.__wbindgen_cb_forget = function(arg0) {
takeObject(arg0);
};
imports.wbg.__wbindgen_cb_drop = function(arg0) {
const obj = takeObject(arg0).original;
if (obj.cnt-- == 1) {
obj.a = 0;
return true;
}
var ret = false;
return ret;
};
imports.wbg.__wbindgen_string_new = function(arg0, arg1) {
var ret = getStringFromWasm0(arg0, arg1);
return addHeapObject(ret);
@ -346,6 +376,10 @@ async function init(input) {
var ret = getObject(arg0).open(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
return isLikeNone(ret) ? 0 : addHeapObject(ret);
});
imports.wbg.__wbg_requestAnimationFrame_a18bbc3e00b14f1d = handleError(function(arg0, arg1) {
var ret = getObject(arg0).requestAnimationFrame(getObject(arg1));
return ret;
});
imports.wbg.__wbg_body_ca5c7fc933a74206 = function(arg0) {
var ret = getObject(arg0).body;
return isLikeNone(ret) ? 0 : addHeapObject(ret);
@ -354,6 +388,35 @@ async function init(input) {
var ret = getObject(arg0).getElementById(getStringFromWasm0(arg1, arg2));
return isLikeNone(ret) ? 0 : addHeapObject(ret);
};
imports.wbg.__wbg_touches_b43aff7721e20859 = function(arg0) {
var ret = getObject(arg0).touches;
return addHeapObject(ret);
};
imports.wbg.__wbg_get_6d1471ca01108161 = function(arg0, arg1) {
var ret = getObject(arg0)[arg1 >>> 0];
return isLikeNone(ret) ? 0 : addHeapObject(ret);
};
imports.wbg.__wbg_top_4bce526516916bef = function(arg0) {
var ret = getObject(arg0).top;
return ret;
};
imports.wbg.__wbg_left_ef807cf36a8b9eff = function(arg0) {
var ret = getObject(arg0).left;
return ret;
};
imports.wbg.__wbg_hash_807752e2195bb755 = handleError(function(arg0, arg1) {
var ret = getObject(arg1).hash;
var ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
getInt32Memory0()[arg0 / 4 + 1] = len0;
getInt32Memory0()[arg0 / 4 + 0] = ptr0;
});
imports.wbg.__wbg_setProperty_3090dd7650e67dd9 = handleError(function(arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).setProperty(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
});
imports.wbg.__wbg_addEventListener_e26664ded96802d6 = handleError(function(arg0, arg1, arg2, arg3) {
getObject(arg0).addEventListener(getStringFromWasm0(arg1, arg2), getObject(arg3));
});
imports.wbg.__wbg_getItem_5a53c566950c2181 = handleError(function(arg0, arg1, arg2, arg3) {
var ret = getObject(arg1).getItem(getStringFromWasm0(arg2, arg3));
var ptr0 = isLikeNone(ret) ? 0 : passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
@ -364,9 +427,18 @@ async function init(input) {
imports.wbg.__wbg_setItem_6884e4d52a076b78 = handleError(function(arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).setItem(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
});
imports.wbg.__wbg_setProperty_3090dd7650e67dd9 = handleError(function(arg0, arg1, arg2, arg3, arg4) {
getObject(arg0).setProperty(getStringFromWasm0(arg1, arg2), getStringFromWasm0(arg3, arg4));
});
imports.wbg.__wbg_deltaX_8e512069555e35b9 = function(arg0) {
var ret = getObject(arg0).deltaX;
return ret;
};
imports.wbg.__wbg_deltaY_2ecd7349fda0247d = function(arg0) {
var ret = getObject(arg0).deltaY;
return ret;
};
imports.wbg.__wbg_getBoundingClientRect_87b5d0eaec291192 = function(arg0) {
var ret = getObject(arg0).getBoundingClientRect();
return addHeapObject(ret);
};
imports.wbg.__wbg_instanceof_WebGlRenderingContext_4dbaf147f8c72285 = function(arg0) {
var ret = getObject(arg0) instanceof WebGLRenderingContext;
return ret;
@ -498,16 +570,38 @@ async function init(input) {
var ret = getObject(arg0).style;
return addHeapObject(ret);
};
imports.wbg.__wbg_hash_807752e2195bb755 = handleError(function(arg0, arg1) {
var ret = getObject(arg1).hash;
imports.wbg.__wbg_clientX_c98258465ff0d711 = function(arg0) {
var ret = getObject(arg0).clientX;
return ret;
};
imports.wbg.__wbg_clientY_44f939bc3df4dbd5 = function(arg0) {
var ret = getObject(arg0).clientY;
return ret;
};
imports.wbg.__wbg_now_66c779566d9324ca = function(arg0) {
var ret = getObject(arg0).now();
return ret;
};
imports.wbg.__wbg_pageX_6a171f721f972234 = function(arg0) {
var ret = getObject(arg0).pageX;
return ret;
};
imports.wbg.__wbg_pageY_01ba10e48716178f = function(arg0) {
var ret = getObject(arg0).pageY;
return ret;
};
imports.wbg.__wbg_key_0d736f3a5f2ca002 = function(arg0, arg1) {
var ret = getObject(arg1).key;
var ptr0 = passStringToWasm0(ret, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
var len0 = WASM_VECTOR_LEN;
getInt32Memory0()[arg0 / 4 + 1] = len0;
getInt32Memory0()[arg0 / 4 + 0] = ptr0;
});
imports.wbg.__wbg_now_66c779566d9324ca = function(arg0) {
var ret = getObject(arg0).now();
return ret;
};
imports.wbg.__wbg_preventDefault_cb207bbb7569acb3 = function(arg0) {
getObject(arg0).preventDefault();
};
imports.wbg.__wbg_stopPropagation_2c1e23fe8563d714 = function(arg0) {
getObject(arg0).stopPropagation();
};
imports.wbg.__wbg_instanceof_HtmlCanvasElement_0d5b3d4264830667 = function(arg0) {
var ret = getObject(arg0) instanceof HTMLCanvasElement;
@ -543,6 +637,26 @@ async function init(input) {
var ret = new Function(getStringFromWasm0(arg0, arg1));
return addHeapObject(ret);
};
imports.wbg.__wbg_getHours_ca3bbac0f3d04bd6 = function(arg0) {
var ret = getObject(arg0).getHours();
return ret;
};
imports.wbg.__wbg_getMilliseconds_a7841eba602b6404 = function(arg0) {
var ret = getObject(arg0).getMilliseconds();
return ret;
};
imports.wbg.__wbg_getMinutes_7086fbbe31709de7 = function(arg0) {
var ret = getObject(arg0).getMinutes();
return ret;
};
imports.wbg.__wbg_getSeconds_bb43691d4ad9e1ec = function(arg0) {
var ret = getObject(arg0).getSeconds();
return ret;
};
imports.wbg.__wbg_new0_8d817915cd890bd8 = function() {
var ret = new Date();
return addHeapObject(ret);
};
imports.wbg.__wbg_self_d1b58dbab69d5bb1 = handleError(function() {
var ret = self.self;
return addHeapObject(ret);
@ -631,6 +745,30 @@ async function init(input) {
var ret = wasm.memory;
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper176 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_35);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper170 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_26);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper166 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_38);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper172 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_41);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper168 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_29);
return addHeapObject(ret);
};
imports.wbg.__wbindgen_closure_wrapper174 = function(arg0, arg1, arg2) {
var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_32);
return addHeapObject(ret);
};
if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
input = fetch(input);

BIN
docs/example_wasm_bg.wasm
View file

Binary file not shown.

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>

5
egui_web/Cargo.toml
View file

@ -22,17 +22,22 @@ features = [
'console',
'CssStyleDeclaration',
'Document',
'DomRect',
'Element',
'HtmlCanvasElement',
'HtmlElement',
'Location',
'Performance',
'Storage',
'Touch',
'TouchEvent',
'TouchList',
'WebGlBuffer',
'WebGlProgram',
'WebGlRenderingContext',
'WebGlShader',
'WebGlTexture',
'WebGlUniformLocation',
'WheelEvent',
'Window',
]

68
egui_web/src/lib.rs
View file

@ -8,18 +8,18 @@ pub mod webgl;
use std::sync::Arc;
use wasm_bindgen::JsValue;
pub struct State {
pub struct EguiWeb {
ctx: Arc<egui::Context>,
webgl_painter: webgl::Painter,
frame_times: egui::MovementTracker<f32>,
frame_start: Option<f64>,
}
impl State {
pub fn new(canvas_id: &str) -> Result<State, JsValue> {
impl EguiWeb {
pub fn new(canvas_id: &str) -> Result<EguiWeb, JsValue> {
let ctx = egui::Context::new();
load_memory(&ctx);
Ok(State {
Ok(EguiWeb {
ctx,
webgl_painter: webgl::Painter::new(canvas_id)?,
frame_times: egui::MovementTracker::new(1000, 1.0),
@ -27,6 +27,11 @@ impl State {
})
}
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
self.webgl_painter.canvas_id()
}
pub fn begin_frame(&mut self, raw_input: egui::RawInput) -> egui::Ui {
self.frame_start = Some(now_sec());
self.ctx.begin_frame(raw_input)
@ -109,12 +114,37 @@ pub fn pixels_per_point() -> f32 {
}
}
pub fn resize_to_screen_size(canvas_id: &str) -> Option<()> {
pub fn canvas_element(canvas_id: &str) -> Option<web_sys::HtmlCanvasElement> {
use wasm_bindgen::JsCast;
let document = web_sys::window()?.document()?;
let canvas = document.get_element_by_id(canvas_id)?;
let canvas: web_sys::HtmlCanvasElement =
canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok()?;
canvas.dyn_into::<web_sys::HtmlCanvasElement>().ok()
}
pub fn canvas_element_or_die(canvas_id: &str) -> web_sys::HtmlCanvasElement {
crate::canvas_element(canvas_id)
.unwrap_or_else(|| panic!("Failed to find canvas with id '{}'", canvas_id))
}
pub fn pos_from_mouse_event(canvas_id: &str, event: &web_sys::MouseEvent) -> egui::Pos2 {
let canvas = canvas_element(canvas_id).unwrap();
let rect = canvas.get_bounding_client_rect();
egui::Pos2 {
x: event.client_x() as f32 - rect.left() as f32,
y: event.client_y() as f32 - rect.top() as f32,
}
}
pub fn pos_from_touch_event(event: &web_sys::TouchEvent) -> egui::Pos2 {
let t = event.touches().get(0).unwrap();
egui::Pos2 {
x: t.page_x() as f32,
y: t.page_y() as f32,
}
}
pub fn resize_to_screen_size(canvas_id: &str) -> Option<()> {
let canvas = canvas_element(canvas_id)?;
let screen_size = screen_size()?;
let pixels_per_point = pixels_per_point();
@ -218,3 +248,27 @@ pub fn open_url(url: &str) -> Option<()> {
pub fn location_hash() -> Option<String> {
web_sys::window()?.location().hash().ok()
}
pub fn translate_key(key: &str) -> Option<egui::Key> {
match key {
"Alt" => Some(egui::Key::Alt),
"Backspace" => Some(egui::Key::Backspace),
"Control" => Some(egui::Key::Control),
"Delete" => Some(egui::Key::Delete),
"ArrowDown" => Some(egui::Key::Down),
"End" => Some(egui::Key::End),
"Escape" => Some(egui::Key::Escape),
"Home" => Some(egui::Key::Home),
"Help" => Some(egui::Key::Insert),
"ArrowLeft" => Some(egui::Key::Left),
"Meta" => Some(egui::Key::Logo),
"PageDown" => Some(egui::Key::PageDown),
"PageUp" => Some(egui::Key::PageUp),
"Enter" => Some(egui::Key::Return),
"ArrowRight" => Some(egui::Key::Right),
"Shift" => Some(egui::Key::Shift),
"Tab" => Some(egui::Key::Tab),
"ArrowUp" => Some(egui::Key::Up),
_ => None,
}
}

11
egui_web/src/webgl.rs
View file

@ -13,6 +13,7 @@ use egui::{
type Gl = WebGlRenderingContext;
pub struct Painter {
canvas_id: String,
canvas: web_sys::HtmlCanvasElement,
gl: WebGlRenderingContext,
texture: WebGlTexture,
@ -38,9 +39,7 @@ impl Painter {
}
pub fn new(canvas_id: &str) -> Result<Painter, JsValue> {
let document = web_sys::window().unwrap().document().unwrap();
let canvas = document.get_element_by_id(canvas_id).unwrap();
let canvas: web_sys::HtmlCanvasElement = canvas.dyn_into::<web_sys::HtmlCanvasElement>()?;
let canvas = crate::canvas_element_or_die(canvas_id);
let gl = canvas
.get_context("webgl")?
@ -101,6 +100,7 @@ impl Painter {
let color_buffer = gl.create_buffer().ok_or("failed to create color_buffer")?;
Ok(Painter {
canvas_id: canvas_id.to_owned(),
canvas,
gl,
texture: gl_texture,
@ -114,6 +114,11 @@ impl Painter {
})
}
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
&self.canvas_id
}
fn upload_texture(&mut self, texture: &Texture) {
if self.current_texture_id == Some(texture.id) {
return; // No change

25
example_wasm/Cargo.toml
View file

@ -9,9 +9,34 @@ edition = "2018"
crate-type = ["cdylib", "rlib"]
[dependencies]
js-sys = "0.3"
parking_lot = "0.11"
serde = { version = "1", features = ["derive"] }
serde_json = "1"
wasm-bindgen = "0.2"
egui = { path = "../egui" }
egui_web = { path = "../egui_web" }
[dependencies.web-sys]
version = "0.3"
features = [
'console',
'CssStyleDeclaration',
'Document',
'Element',
'HtmlCanvasElement',
'HtmlElement',
'KeyboardEvent',
'Location',
'MouseEvent',
'Performance',
'Storage',
'WebGlBuffer',
'WebGlProgram',
'WebGlRenderingContext',
'WebGlShader',
'WebGlTexture',
'WebGlUniformLocation',
'Window',
]

292
example_wasm/src/lib.rs
View file

@ -5,20 +5,56 @@ use egui::{examples::ExampleApp, label, widgets::Separator, Align, RawInput, Tex
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
// ----------------------------------------------------------------------------
/// Data gathered between frames.
/// Is translated to `egui::RawInput` at the start of each frame.
#[derive(Default)]
pub struct WebInput {
pub mouse_pos: Option<Pos2>,
pub mouse_down: bool, // TODO: which button
pub is_touch: bool,
pub scroll_delta: Vec2,
pub events: Vec<Event>,
}
impl WebInput {
pub fn new_frame(&mut self) -> egui::RawInput {
egui::RawInput {
mouse_down: self.mouse_down,
mouse_pos: self.mouse_pos,
scroll_delta: std::mem::take(&mut self.scroll_delta),
screen_size: egui_web::screen_size().unwrap(),
pixels_per_point: Some(egui_web::pixels_per_point()),
time: egui_web::now_sec(),
seconds_since_midnight: Some(egui_web::seconds_since_midnight()),
events: std::mem::take(&mut self.events),
}
}
}
// ----------------------------------------------------------------------------
pub struct State {
egui_web: egui_web::State,
egui_web: egui_web::EguiWeb,
web_input: WebInput,
example_app: ExampleApp,
}
impl State {
fn new(canvas_id: &str) -> Result<State, JsValue> {
Ok(State {
egui_web: egui_web::State::new(canvas_id)?,
egui_web: egui_web::EguiWeb::new(canvas_id)?,
web_input: Default::default(),
example_app: Default::default(),
})
}
/// id of the canvas html element containing the rendering
pub fn canvas_id(&self) -> &str {
self.egui_web.canvas_id()
}
fn run(&mut self, raw_input: RawInput, web_location_hash: &str) -> Result<Output, JsValue> {
let mut ui = self.egui_web.begin_frame(raw_input);
self.ui(&mut ui, web_location_hash);
@ -58,22 +94,252 @@ impl State {
}
}
#[wasm_bindgen]
pub fn new_webgl_gui(canvas_id: &str) -> Result<State, JsValue> {
State::new(canvas_id)
}
// ----------------------------------------------------------------------------
use parking_lot::Mutex;
use std::sync::Arc;
#[wasm_bindgen]
pub fn resize_to_screen_size(canvas_id: &str) {
egui_web::resize_to_screen_size(canvas_id);
}
#[derive(Clone)]
pub struct StateRef(Arc<Mutex<State>>);
/// 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: bool = true;
#[wasm_bindgen]
pub fn run_gui(state: &mut State, web_input_json: &str) -> Result<(), JsValue> {
// TODO: nicer interface than JSON
let raw_input: RawInput = serde_json::from_str(web_input_json).unwrap();
pub fn start(canvas_id: &str) -> Result<StateRef, JsValue> {
let state = State::new(canvas_id)?;
let state = StateRef(Arc::new(Mutex::new(state)));
install_canvas_events(&state)?;
install_document_events(&state)?;
paint_and_schedule(state.clone())?;
Ok(state)
}
fn paint_and_schedule(state: StateRef) -> Result<(), JsValue> {
paint(&mut state.0.lock())?;
if ANIMATION_FRAME {
request_animation_frame(state)?;
}
Ok(())
}
fn request_animation_frame(state: StateRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let window = web_sys::window().unwrap();
let closure = Closure::once(move || paint_and_schedule(state));
window.request_animation_frame(closure.as_ref().unchecked_ref())?;
closure.forget(); // We must forget it, or else the callback is canceled on drop
Ok(())
}
fn paint(state: &mut State) -> Result<(), JsValue> {
egui_web::resize_to_screen_size(state.canvas_id());
let raw_input = state.web_input.new_frame();
let web_location_hash = egui_web::location_hash().unwrap_or_default();
let output = state.run(raw_input, &web_location_hash)?;
egui_web::handle_output(&output);
Ok(())
}
fn invalidate(state: &mut State) -> Result<(), JsValue> {
if ANIMATION_FRAME {
Ok(()) // No need to invalidate - we repaint all the time
} else {
paint(state) // TODO: schedule repaint instead?
}
}
fn install_document_events(state: &StateRef) -> Result<(), JsValue> {
use wasm_bindgen::JsCast;
let document = web_sys::window().unwrap().document().unwrap();
{
// keydown
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut state = state.0.lock();
let key = event.key();
if let Some(key) = egui_web::translate_key(&key) {
state
.web_input
.events
.push(Event::Key { key, pressed: true });
} else {
state.web_input.events.push(Event::Text(key));
}
invalidate(&mut state).unwrap();
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
// keyup
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
let mut state = state.0.lock();
let key = event.key();
if let Some(key) = egui_web::translate_key(&key) {
state.web_input.events.push(Event::Key {
key,
pressed: false,
});
invalidate(&mut state).unwrap();
}
}) as Box<dyn FnMut(_)>);
document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
closure.forget();
}
for event_name in &["load", "pagehide", "pageshow", "resize"] {
let state = state.clone();
let closure = Closure::wrap(Box::new(move || {
invalidate(&mut state.0.lock()).unwrap();
}) as Box<dyn FnMut()>);
document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}
fn install_canvas_events(state: &StateRef) -> Result<(), JsValue> {
use egui_web::pos_from_mouse_event;
use wasm_bindgen::JsCast;
let canvas = egui_web::canvas_element(state.0.lock().canvas_id()).unwrap();
{
let event_name = "mousedown";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
state.web_input.mouse_down = true;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mousemove";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseup";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
state.web_input.mouse_down = false;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "mouseleave";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
let mut state = state.0.lock();
if !state.web_input.is_touch {
state.web_input.mouse_pos = None;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchstart";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
state.web_input.mouse_down = true;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchmove";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "touchend";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
let mut state = state.0.lock();
state.web_input.is_touch = true;
state.web_input.mouse_down = false; // First release mouse to click...
paint(&mut state).unwrap(); // ...do the clicking...
state.web_input.mouse_pos = None; // ...remove hover effect
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
{
let event_name = "wheel";
let state = state.clone();
let closure = Closure::wrap(Box::new(move |event: web_sys::WheelEvent| {
let mut state = state.0.lock();
state.web_input.scroll_delta.x -= event.delta_x() as f32;
state.web_input.scroll_delta.y -= event.delta_y() as f32;
invalidate(&mut state).unwrap();
event.stop_propagation();
event.prevent_default();
}) as Box<dyn FnMut(_)>);
canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
closure.forget();
}
Ok(())
}