Skip to content

Commit

Permalink
sokol_app.h emsc: fix a longstanding webgl canvas element id-vs-selec…
Browse files Browse the repository at this point in the history 
…tor confusion
  • Loading branch information
@floooh
floooh committed Oct 27, 2020
1 parent 345fa62 commit 61730df
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 35 deletions.
8 changes: 7 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Simple
[STB-style](https://github.com/nothings/stb/blob/master/docs/stb_howto.txt)
cross-platform libraries for C and C++, written in C.

[See what's new](#updates) (**22-Oct-2020** sokol_app.h: initial drag'n'drop support for win32/macos/linux)
[See what's new](#updates) (**27-Oct-2020** sokol_app.h emscripten: canvas id vs css selector bugfix)

[Live Samples](https://floooh.github.io/sokol-html5/index.html) via WASM.

Expand Down Expand Up @@ -434,6 +434,12 @@ Emulators](https://floooh.github.io/tiny8bit/) for more interesting usage exampl
# Updates
- **27-Oct-2020**: I committed a bugfix for a lonstanding WebGK canvas id versus
css-selector confusion in the emscripten/WASM backend code in sokol_app.h.
I think the fix should not require any changes in your code (because if
you'd be using a canvas name different from the default "canvas" it wouldn't
have worked anyway). See this bug for details: https://github.com/floooh/sokol/issues/407
- **22-Oct-2020**: sokol_app.h now has file drag'n'drop support on Win32,
macOS and Linux. WASM/HTML5 support will be added soon-ish. This will
work a bit differently because of security-related restrictions in the
Expand Down
69 changes: 35 additions & 34 deletions sokol_app.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1954,7 +1954,7 @@ typedef struct {
_sapp_x11_t x11;
_sapp_glx_t glx;
#endif
char html5_canvas_name[_SAPP_MAX_TITLE_LENGTH];
char html5_canvas_selector[_SAPP_MAX_TITLE_LENGTH];
char window_title[_SAPP_MAX_TITLE_LENGTH]; /* UTF-8 */
wchar_t window_title_wide[_SAPP_MAX_TITLE_LENGTH]; /* UTF-32 or UCS-2 */
sapp_keycode keycodes[SAPP_MAX_KEYCODES];
Expand Down Expand Up @@ -2442,8 +2442,9 @@ _SOKOL_PRIVATE void _sapp_init_state(const sapp_desc* desc) {
_sapp.framebuffer_height = _sapp.window_height;
_sapp.sample_count = _sapp.desc.sample_count;
_sapp.swap_interval = _sapp.desc.swap_interval;
_sapp_strcpy(_sapp.desc.html5_canvas_name, _sapp.html5_canvas_name, sizeof(_sapp.html5_canvas_name));
_sapp.desc.html5_canvas_name = _sapp.html5_canvas_name;
_sapp.html5_canvas_selector[0] = '#';
_sapp_strcpy(_sapp.desc.html5_canvas_name, &_sapp.html5_canvas_selector[1], sizeof(_sapp.html5_canvas_selector) - 1);
_sapp.desc.html5_canvas_name = &_sapp.html5_canvas_selector[1];
_sapp.html5_ask_leave_site = _sapp.desc.html5_ask_leave_site;
_sapp.clipboard.enabled = _sapp.desc.enable_clipboard;
if (_sapp.clipboard.enabled) {
Expand Down Expand Up @@ -3840,7 +3841,7 @@ _SOKOL_PRIVATE EM_BOOL _sapp_emsc_size_changed(int event_type, const EmscriptenU
_SOKOL_UNUSED(event_type);
_SOKOL_UNUSED(user_data);
double w, h;
emscripten_get_element_css_size(_sapp.html5_canvas_name, &w, &h);
emscripten_get_element_css_size(_sapp.html5_canvas_selector, &w, &h);
/* The above method might report zero when toggling HTML5 fullscreen,
in that case use the window's inner width reported by the
emscripten event. This works ok when toggling *into* fullscreen
Expand Down Expand Up @@ -3879,7 +3880,7 @@ _SOKOL_PRIVATE EM_BOOL _sapp_emsc_size_changed(int event_type, const EmscriptenU
_sapp.framebuffer_width = (int) (w * _sapp.dpi_scale);
_sapp.framebuffer_height = (int) (h * _sapp.dpi_scale);
SOKOL_ASSERT((_sapp.framebuffer_width > 0) && (_sapp.framebuffer_height > 0));
emscripten_set_canvas_element_size(_sapp.html5_canvas_name, _sapp.framebuffer_width, _sapp.framebuffer_height);
emscripten_set_canvas_element_size(_sapp.html5_canvas_selector, _sapp.framebuffer_width, _sapp.framebuffer_height);
#if defined(SOKOL_WGPU)
/* on WebGPU: recreate size-dependent rendering surfaces */
_sapp_emsc_wgpu_surfaces_discard();
Expand Down Expand Up @@ -4338,10 +4339,10 @@ _SOKOL_PRIVATE void _sapp_emsc_webgl_init(void) {
attrs.majorVersion = 2;
}
#endif
EMSCRIPTEN_WEBGL_CONTEXT_HANDLE ctx = emscripten_webgl_create_context(_sapp.html5_canvas_name, &attrs);
EMSCRIPTEN_WEBGL_CONTEXT_HANDLE ctx = emscripten_webgl_create_context(_sapp.html5_canvas_selector, &attrs);
if (!ctx) {
attrs.majorVersion = 1;
ctx = emscripten_webgl_create_context(_sapp.html5_canvas_name, &attrs);
ctx = emscripten_webgl_create_context(_sapp.html5_canvas_selector, &attrs);
_sapp.gles2_fallback = true;
}
emscripten_webgl_make_context_current(ctx);
Expand Down Expand Up @@ -4462,54 +4463,54 @@ _SOKOL_PRIVATE void _sapp_emsc_wgpu_next_frame(void) {
#endif

_SOKOL_PRIVATE void _sapp_emsc_register_eventhandlers(void) {
emscripten_set_mousedown_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseup_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mousemove_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseenter_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseleave_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_wheel_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_wheel_cb);
emscripten_set_mousedown_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseup_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mousemove_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseenter_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_mouseleave_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_mouse_cb);
emscripten_set_wheel_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_wheel_cb);
emscripten_set_keydown_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);
emscripten_set_keyup_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);
emscripten_set_keypress_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, _sapp_emsc_key_cb);
emscripten_set_touchstart_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchmove_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchend_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchcancel_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchstart_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchmove_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchend_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_touch_cb);
emscripten_set_touchcancel_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_touch_cb);
emscripten_set_pointerlockchange_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, 0, true, _sapp_emsc_pointerlockchange_cb);
emscripten_set_pointerlockerror_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, 0, true, _sapp_emsc_pointerlockerror_cb);
sapp_js_add_hook_beforeunload();
if (_sapp.clipboard.enabled) {
sapp_js_add_hook_clipboard();
}
#if defined(SOKOL_GLES2) || defined(SOKOL_GLES3)
emscripten_set_webglcontextlost_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_webgl_context_cb);
emscripten_set_webglcontextrestored_callback(_sapp.html5_canvas_name, 0, true, _sapp_emsc_webgl_context_cb);
emscripten_set_webglcontextlost_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_webgl_context_cb);
emscripten_set_webglcontextrestored_callback(_sapp.html5_canvas_selector, 0, true, _sapp_emsc_webgl_context_cb);
#endif
}

_SOKOL_PRIVATE void _sapp_emsc_unregister_eventhandlers() {
emscripten_set_mousedown_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_mouseup_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_mousemove_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_mouseenter_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_mouseleave_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_wheel_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_mousedown_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_mouseup_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_mousemove_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_mouseenter_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_mouseleave_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_wheel_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_keydown_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, 0);
emscripten_set_keyup_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, 0);
emscripten_set_keypress_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, true, 0);
emscripten_set_touchstart_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_touchmove_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_touchend_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_touchcancel_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_touchstart_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_touchmove_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_touchend_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_touchcancel_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_pointerlockchange_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, 0, true, 0);
emscripten_set_pointerlockerror_callback(EMSCRIPTEN_EVENT_TARGET_DOCUMENT, 0, true, 0);
sapp_js_remove_hook_beforeunload();
if (_sapp.clipboard.enabled) {
sapp_js_remove_hook_clipboard();
}
#if defined(SOKOL_GLES2) || defined(SOKOL_GLES3)
emscripten_set_webglcontextlost_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_webglcontextrestored_callback(_sapp.html5_canvas_name, 0, true, 0);
emscripten_set_webglcontextlost_callback(_sapp.html5_canvas_selector, 0, true, 0);
emscripten_set_webglcontextrestored_callback(_sapp.html5_canvas_selector, 0, true, 0);
#endif
}

Expand Down Expand Up @@ -4562,15 +4563,15 @@ _SOKOL_PRIVATE EM_BOOL _sapp_emsc_frame(double time, void* userData) {

_SOKOL_PRIVATE void _sapp_emsc_run(const sapp_desc* desc) {
_sapp_init_state(desc);
sapp_js_pointer_init(_sapp.html5_canvas_name);
sapp_js_pointer_init(&_sapp.html5_canvas_selector[1]);
_sapp_emsc_keytable_init();
double w, h;
if (_sapp.desc.html5_canvas_resize) {
w = (double) _sapp.desc.width;
h = (double) _sapp.desc.height;
}
else {
emscripten_get_element_css_size(_sapp.html5_canvas_name, &w, &h);
emscripten_get_element_css_size(_sapp.html5_canvas_selector, &w, &h);
emscripten_set_resize_callback(EMSCRIPTEN_EVENT_TARGET_WINDOW, 0, false, _sapp_emsc_size_changed);
}
if (_sapp.desc.high_dpi) {
Expand All @@ -4580,7 +4581,7 @@ _SOKOL_PRIVATE void _sapp_emsc_run(const sapp_desc* desc) {
_sapp.window_height = (int) h;
_sapp.framebuffer_width = (int) (w * _sapp.dpi_scale);
_sapp.framebuffer_height = (int) (h * _sapp.dpi_scale);
emscripten_set_canvas_element_size(_sapp.html5_canvas_name, _sapp.framebuffer_width, _sapp.framebuffer_height);
emscripten_set_canvas_element_size(_sapp.html5_canvas_selector, _sapp.framebuffer_width, _sapp.framebuffer_height);
#if defined(SOKOL_GLES2) || defined(SOKOL_GLES3)
_sapp_emsc_webgl_init();
#elif defined(SOKOL_WGPU)
Expand Down

0 comments on commit 61730df

Please sign in to comment.