Skip to content

Commit a9651ff

Browse files
sbc100sbc100
authored
Simplify EGL/GLFW/SDL/GLUT/Browser canvas access. NFC (#23614)
All of these frameworks still use `Module['canvas']`. This change simplifies and unifies the access to the canvas to single helper function per library. As a followup we may want to extend this to all use of `Module['canvas']`.
1 parent d8c2e41 commit a9651ff

File tree

5 files changed

+117
-107
lines changed

5 files changed

+117
-107
lines changed

‎src/lib/libbrowser.js

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ var LibraryBrowser = {
3737
preloadedImages: {},
3838
preloadedAudios: {},
3939

40+
getCanvas: () => Module['canvas'],
41+
4042
init() {
4143
if (Browser.initted) return;
4244
Browser.initted = true;
@@ -153,12 +155,13 @@ var LibraryBrowser = {
153155
// Canvas event setup
154156

155157
function pointerLockChange() {
156-
Browser.pointerLock = document['pointerLockElement'] === Module['canvas'] ||
157-
document['mozPointerLockElement'] === Module['canvas'] ||
158-
document['webkitPointerLockElement'] === Module['canvas'] ||
159-
document['msPointerLockElement'] === Module['canvas'];
158+
var canvas = Browser.getCanvas();
159+
Browser.pointerLock = document['pointerLockElement'] === canvas ||
160+
document['mozPointerLockElement'] === canvas ||
161+
document['webkitPointerLockElement'] === canvas ||
162+
document['msPointerLockElement'] === canvas;
160163
}
161-
var canvas = Module['canvas'];
164+
var canvas = Browser.getCanvas();
162165
if (canvas) {
163166
// forced aspect ratio can be enabled by defining 'forcedAspectRatio' on Module
164167
// Module['forcedAspectRatio'] = 4 / 3;
@@ -182,8 +185,8 @@ var LibraryBrowser = {
182185

183186
if (Module['elementPointerLock']) {
184187
canvas.addEventListener("click", (ev) => {
185-
if (!Browser.pointerLock && Module['canvas'].requestPointerLock) {
186-
Module['canvas'].requestPointerLock();
188+
if (!Browser.pointerLock && Browser.getCanvas().requestPointerLock) {
189+
Browser.getCanvas().requestPointerLock();
187190
ev.preventDefault();
188191
}
189192
}, false);
@@ -192,7 +195,7 @@ var LibraryBrowser = {
192195
},
193196

194197
createContext(/** @type {HTMLCanvasElement} */ canvas, useWebGL, setInModule, webGLContextAttributes) {
195-
if (useWebGL && Module['ctx'] && canvas == Module['canvas']) return Module['ctx']; // no need to recreate GL context if it's already been created for this canvas.
198+
if (useWebGL && Module['ctx'] && canvas == Browser.getCanvas()) return Module['ctx']; // no need to recreate GL context if it's already been created for this canvas.
196199

197200
var ctx;
198201
var contextHandle;
@@ -253,7 +256,7 @@ var LibraryBrowser = {
253256
if (typeof Browser.lockPointer == 'undefined') Browser.lockPointer = true;
254257
if (typeof Browser.resizeCanvas == 'undefined') Browser.resizeCanvas = false;
255258

256-
var canvas = Module['canvas'];
259+
var canvas = Browser.getCanvas();
257260
function fullscreenChange() {
258261
Browser.isFullscreen = false;
259262
var canvasContainer = canvas.parentNode;
@@ -428,9 +431,8 @@ var LibraryBrowser = {
428431
calculateMouseCoords(pageX, pageY) {
429432
// Calculate the movement based on the changes
430433
// in the coordinates.
431-
var rect = Module['canvas'].getBoundingClientRect();
432-
var cw = Module['canvas'].width;
433-
var ch = Module['canvas'].height;
434+
var canvas = Browser.getCanvas();
435+
var rect = canvas.getBoundingClientRect();
434436

435437
// Neither .scrollX or .pageXOffset are defined in a spec, but
436438
// we prefer .scrollX because it is currently in a spec draft.
@@ -448,8 +450,8 @@ var LibraryBrowser = {
448450
// the canvas might be CSS-scaled compared to its backbuffer;
449451
// SDL-using content will want mouse coordinates in terms
450452
// of backbuffer units.
451-
adjustedX = adjustedX * (cw / rect.width);
452-
adjustedY = adjustedY * (ch / rect.height);
453+
adjustedX = adjustedX * (canvas.width / rect.width);
454+
adjustedY = adjustedY * (canvas.height / rect.height);
453455

454456
return { x: adjustedX, y: adjustedY };
455457
},
@@ -508,12 +510,12 @@ var LibraryBrowser = {
508510
resizeListeners: [],
509511

510512
updateResizeListeners() {
511-
var canvas = Module['canvas'];
513+
var canvas = Browser.getCanvas();
512514
Browser.resizeListeners.forEach((listener) => listener(canvas.width, canvas.height));
513515
},
514516

515517
setCanvasSize(width, height, noUpdates) {
516-
var canvas = Module['canvas'];
518+
var canvas = Browser.getCanvas();
517519
Browser.updateCanvasDimensions(canvas, width, height);
518520
if (!noUpdates) Browser.updateResizeListeners();
519521
},
@@ -527,7 +529,7 @@ var LibraryBrowser = {
527529
flags = flags | 0x00800000; // set SDL_FULLSCREEN flag
528530
{{{ makeSetValue('SDL.screen', '0', 'flags', 'i32') }}};
529531
}
530-
Browser.updateCanvasDimensions(Module['canvas']);
532+
Browser.updateCanvasDimensions(Browser.getCanvas());
531533
Browser.updateResizeListeners();
532534
},
533535

@@ -538,7 +540,7 @@ var LibraryBrowser = {
538540
flags = flags & ~0x00800000; // clear SDL_FULLSCREEN flag
539541
{{{ makeSetValue('SDL.screen', '0', 'flags', 'i32') }}};
540542
}
541-
Browser.updateCanvasDimensions(Module['canvas']);
543+
Browser.updateCanvasDimensions(Browser.getCanvas());
542544
Browser.updateResizeListeners();
543545
},
544546

@@ -745,7 +747,7 @@ var LibraryBrowser = {
745747

746748
emscripten_get_canvas_size__proxy: 'sync',
747749
emscripten_get_canvas_size: (width, height, isFullscreen) => {
748-
var canvas = Module['canvas'];
750+
var canvas = Browser.getCanvas();
749751
{{{ makeSetValue('width', '0', 'canvas.width', 'i32') }}};
750752
{{{ makeSetValue('height', '0', 'canvas.height', 'i32') }}};
751753
{{{ makeSetValue('isFullscreen', '0', 'Browser.isFullscreen ? 1 : 0', 'i32') }}};

‎src/lib/libegl.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ var LibraryEGL = {
356356
EGL.contextAttributes.majorVersion = glesContextVersion - 1; // WebGL 1 is GLES 2, WebGL2 is GLES3
357357
EGL.contextAttributes.minorVersion = 0;
358358

359-
EGL.context = GL.createContext(Module['canvas'], EGL.contextAttributes);
359+
EGL.context = GL.createContext(Browser.getCanvas(), EGL.contextAttributes);
360360

361361
if (EGL.context != 0) {
362362
EGL.setErrorCode(0x3000 /* EGL_SUCCESS */);
@@ -422,10 +422,10 @@ var LibraryEGL = {
422422
// Existing Android implementation seems to do so at least.
423423
return 1;
424424
case 0x3057: // EGL_WIDTH
425-
{{{ makeSetValue('value', '0', "Module['canvas'].width", 'i32') }}};
425+
{{{ makeSetValue('value', '0', "Browser.getCanvas().width", 'i32') }}};
426426
return 1;
427427
case 0x3056: // EGL_HEIGHT
428-
{{{ makeSetValue('value', '0', "Module['canvas'].height", 'i32') }}};
428+
{{{ makeSetValue('value', '0', "Browser.getCanvas().height", 'i32') }}};
429429
return 1;
430430
case 0x3090: // EGL_HORIZONTAL_RESOLUTION
431431
{{{ makeSetValue('value', '0', '-1' /* EGL_UNKNOWN */, 'i32') }}};

‎src/lib/libglfw.js

Lines changed: 50 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,7 @@ var LibraryGLFW = {
467467
Browser.calculateMouseEvent(event);
468468
}
469469

470-
if (event.target != Module['canvas'] || !GLFW.active.cursorPosFunc) return;
470+
if (event.target != Browser.getCanvas() || !GLFW.active.cursorPosFunc) return;
471471

472472
if (GLFW.active.cursorPosFunc) {
473473
#if USE_GLFW == 2
@@ -496,7 +496,7 @@ var LibraryGLFW = {
496496
onMouseenter: (event) => {
497497
if (!GLFW.active) return;
498498

499-
if (event.target != Module['canvas']) return;
499+
if (event.target != Browser.getCanvas()) return;
500500

501501
#if USE_GLFW == 3
502502
if (GLFW.active.cursorEnterFunc) {
@@ -508,7 +508,7 @@ var LibraryGLFW = {
508508
onMouseleave: (event) => {
509509
if (!GLFW.active) return;
510510

511-
if (event.target != Module['canvas']) return;
511+
if (event.target != Browser.getCanvas()) return;
512512

513513
#if USE_GLFW == 3
514514
if (GLFW.active.cursorEnterFunc) {
@@ -520,7 +520,7 @@ var LibraryGLFW = {
520520
onMouseButtonChanged: (event, status) => {
521521
if (!GLFW.active) return;
522522

523-
if (event.target != Module['canvas']) return;
523+
if (event.target != Browser.getCanvas()) return;
524524

525525
// Is this from a touch event?
526526
const isTouchType = event.type === 'touchstart' || event.type === 'touchend' || event.type === 'touchcancel';
@@ -602,7 +602,7 @@ var LibraryGLFW = {
602602
delta = (delta == 0) ? 0 : (delta > 0 ? Math.max(delta, 1) : Math.min(delta, -1)); // Quantize to integer so that minimum scroll is at least +/- 1.
603603
GLFW.wheelPos += delta;
604604

605-
if (!GLFW.active || !GLFW.active.scrollFunc || event.target != Module['canvas']) return;
605+
if (!GLFW.active || !GLFW.active.scrollFunc || event.target != Browser.getCanvas()) return;
606606
#if USE_GLFW == 2
607607
{{{ makeDynCall('vi', 'GLFW.active.scrollFunc') }}}(GLFW.wheelPos);
608608
#endif
@@ -923,8 +923,9 @@ var LibraryGLFW = {
923923
},
924924

925925
onClickRequestPointerLock: (e) => {
926-
if (!Browser.pointerLock && Module['canvas'].requestPointerLock) {
927-
Module['canvas'].requestPointerLock();
926+
var canvas = Browser.getCanvas();
927+
if (!Browser.pointerLock && canvas.requestPointerLock) {
928+
canvas.requestPointerLock();
928929
e.preventDefault();
929930
}
930931
},
@@ -935,11 +936,12 @@ var LibraryGLFW = {
935936

936937
switch (mode) {
937938
case 0x00033001: { // GLFW_CURSOR
939+
var canvas = Browser.getCanvas();
938940
switch (value) {
939941
case 0x00034001: { // GLFW_CURSOR_NORMAL
940942
win.inputModes[mode] = value;
941-
Module['canvas'].removeEventListener('click', GLFW.onClickRequestPointerLock, true);
942-
Module['canvas'].exitPointerLock();
943+
canvas.removeEventListener('click', GLFW.onClickRequestPointerLock, true);
944+
canvas.exitPointerLock();
943945
break;
944946
}
945947
case 0x00034002: { // GLFW_CURSOR_HIDDEN
@@ -948,8 +950,8 @@ var LibraryGLFW = {
948950
}
949951
case 0x00034003: { // GLFW_CURSOR_DISABLED
950952
win.inputModes[mode] = value;
951-
Module['canvas'].addEventListener('click', GLFW.onClickRequestPointerLock, true);
952-
Module['canvas'].requestPointerLock();
953+
canvas.addEventListener('click', GLFW.onClickRequestPointerLock, true);
954+
canvas.requestPointerLock();
953955
break;
954956
}
955957
default: {
@@ -1088,6 +1090,9 @@ var LibraryGLFW = {
10881090
for (i = 0; i < GLFW.windows.length && GLFW.windows[i] == null; i++) {
10891091
// no-op
10901092
}
1093+
1094+
const canvas = Browser.getCanvas();
1095+
10911096
var useWebGL = GLFW.hints[0x00022001] > 0; // Use WebGL when we are told to based on GLFW_CLIENT_API
10921097
if (i == GLFW.windows.length) {
10931098
if (useWebGL) {
@@ -1101,7 +1106,7 @@ var LibraryGLFW = {
11011106
// TODO: Make GLFW explicitly aware of whether it is being proxied or not, and set these to true only when proxying is being performed.
11021107
GL.enableOffscreenFramebufferAttributes(contextAttributes);
11031108
#endif
1104-
Browser.createContext(Module['canvas'], /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
1109+
Browser.createContext(canvas, /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
11051110
} else {
11061111
Browser.init();
11071112
}
@@ -1111,7 +1116,6 @@ var LibraryGLFW = {
11111116
if (!Module['ctx'] && useWebGL) return 0;
11121117

11131118
// Initializes the framebuffer size from the canvas
1114-
const canvas = Module['canvas'];
11151119
var win = new GLFW_Window(id, width, height, canvas.width, canvas.height, title, monitor, share);
11161120

11171121
// Set window to array
@@ -1157,7 +1161,7 @@ var LibraryGLFW = {
11571161
if (typeof Browser.lockPointer == 'undefined') Browser.lockPointer = true;
11581162
if (typeof Browser.resizeCanvas == 'undefined') Browser.resizeCanvas = false;
11591163

1160-
var canvas = Module['canvas'];
1164+
var canvas = Browser.getCanvas();
11611165
function fullscreenChange() {
11621166
Browser.isFullscreen = false;
11631167
var canvasContainer = canvas.parentNode;
@@ -1262,7 +1266,7 @@ var LibraryGLFW = {
12621266
calculateMouseCoords(pageX, pageY) {
12631267
// Calculate the movement based on the changes
12641268
// in the coordinates.
1265-
const rect = Module['canvas'].getBoundingClientRect();
1269+
const rect = Browser.getCanvas().getBoundingClientRect();
12661270

12671271
// Neither .scrollX or .pageXOffset are defined in a spec, but
12681272
// we prefer .scrollX because it is currently in a spec draft.
@@ -1319,7 +1323,7 @@ var LibraryGLFW = {
13191323

13201324
adjustCanvasDimensions() {
13211325
if (GLFW.active) {
1322-
Browser.updateCanvasDimensions(Module['canvas'], GLFW.active.width, GLFW.active.height);
1326+
Browser.updateCanvasDimensions(Browser.getCanvas(), GLFW.active.width, GLFW.active.height);
13231327
Browser.updateResizeListeners();
13241328
}
13251329
},
@@ -1395,19 +1399,20 @@ var LibraryGLFW = {
13951399
GLFW.devicePixelRatioMQL = window.matchMedia('(resolution: ' + GLFW.getDevicePixelRatio() + 'dppx)');
13961400
GLFW.devicePixelRatioMQL.addEventListener('change', GLFW.onDevicePixelRatioChange);
13971401

1398-
Module['canvas'].addEventListener('touchmove', GLFW.onMousemove, true);
1399-
Module['canvas'].addEventListener('touchstart', GLFW.onMouseButtonDown, true);
1400-
Module['canvas'].addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
1401-
Module['canvas'].addEventListener('touchend', GLFW.onMouseButtonUp, true);
1402-
Module['canvas'].addEventListener('mousemove', GLFW.onMousemove, true);
1403-
Module['canvas'].addEventListener('mousedown', GLFW.onMouseButtonDown, true);
1404-
Module['canvas'].addEventListener('mouseup', GLFW.onMouseButtonUp, true);
1405-
Module['canvas'].addEventListener('wheel', GLFW.onMouseWheel, true);
1406-
Module['canvas'].addEventListener('mousewheel', GLFW.onMouseWheel, true);
1407-
Module['canvas'].addEventListener('mouseenter', GLFW.onMouseenter, true);
1408-
Module['canvas'].addEventListener('mouseleave', GLFW.onMouseleave, true);
1409-
Module['canvas'].addEventListener('drop', GLFW.onDrop, true);
1410-
Module['canvas'].addEventListener('dragover', GLFW.onDragover, true);
1402+
var canvas = Browser.getCanvas();
1403+
canvas.addEventListener('touchmove', GLFW.onMousemove, true);
1404+
canvas.addEventListener('touchstart', GLFW.onMouseButtonDown, true);
1405+
canvas.addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
1406+
canvas.addEventListener('touchend', GLFW.onMouseButtonUp, true);
1407+
canvas.addEventListener('mousemove', GLFW.onMousemove, true);
1408+
canvas.addEventListener('mousedown', GLFW.onMouseButtonDown, true);
1409+
canvas.addEventListener("mouseup", GLFW.onMouseButtonUp, true);
1410+
canvas.addEventListener('wheel', GLFW.onMouseWheel, true);
1411+
canvas.addEventListener('mousewheel', GLFW.onMouseWheel, true);
1412+
canvas.addEventListener('mouseenter', GLFW.onMouseenter, true);
1413+
canvas.addEventListener('mouseleave', GLFW.onMouseleave, true);
1414+
canvas.addEventListener('drop', GLFW.onDrop, true);
1415+
canvas.addEventListener('dragover', GLFW.onDragover, true);
14111416

14121417
// Overriding implementation to account for HiDPI
14131418
Browser.requestFullscreen = GLFW.requestFullscreen;
@@ -1416,7 +1421,7 @@ var LibraryGLFW = {
14161421

14171422
Browser.resizeListeners.push((width, height) => {
14181423
if (GLFW.isHiDPIAware()) {
1419-
var canvas = Module['canvas'];
1424+
var canvas = Browser.getCanvas();
14201425
GLFW.onCanvasResize(canvas.clientWidth, canvas.clientHeight, width, height);
14211426
} else {
14221427
GLFW.onCanvasResize(width, height, width, height);
@@ -1433,24 +1438,25 @@ var LibraryGLFW = {
14331438
window.removeEventListener('keypress', GLFW.onKeyPress, true);
14341439
window.removeEventListener('keyup', GLFW.onKeyup, true);
14351440
window.removeEventListener('blur', GLFW.onBlur, true);
1436-
Module['canvas'].removeEventListener('touchmove', GLFW.onMousemove, true);
1437-
Module['canvas'].removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
1438-
Module['canvas'].removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
1439-
Module['canvas'].removeEventListener('touchend', GLFW.onMouseButtonUp, true);
1440-
Module['canvas'].removeEventListener('mousemove', GLFW.onMousemove, true);
1441-
Module['canvas'].removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
1442-
Module['canvas'].removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
1443-
Module['canvas'].removeEventListener('wheel', GLFW.onMouseWheel, true);
1444-
Module['canvas'].removeEventListener('mousewheel', GLFW.onMouseWheel, true);
1445-
Module['canvas'].removeEventListener('mouseenter', GLFW.onMouseenter, true);
1446-
Module['canvas'].removeEventListener('mouseleave', GLFW.onMouseleave, true);
1447-
Module['canvas'].removeEventListener('drop', GLFW.onDrop, true);
1448-
Module['canvas'].removeEventListener('dragover', GLFW.onDragover, true);
1441+
var canvas = Browser.getCanvas();
1442+
canvas.removeEventListener('touchmove', GLFW.onMousemove, true);
1443+
canvas.removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
1444+
canvas.removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
1445+
canvas.removeEventListener('touchend', GLFW.onMouseButtonUp, true);
1446+
canvas.removeEventListener('mousemove', GLFW.onMousemove, true);
1447+
canvas.removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
1448+
canvas.removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
1449+
canvas.removeEventListener('wheel', GLFW.onMouseWheel, true);
1450+
canvas.removeEventListener('mousewheel', GLFW.onMouseWheel, true);
1451+
canvas.removeEventListener('mouseenter', GLFW.onMouseenter, true);
1452+
canvas.removeEventListener('mouseleave', GLFW.onMouseleave, true);
1453+
canvas.removeEventListener('drop', GLFW.onDrop, true);
1454+
canvas.removeEventListener('dragover', GLFW.onDragover, true);
14491455

14501456
if (GLFW.devicePixelRatioMQL)
14511457
GLFW.devicePixelRatioMQL.removeEventListener('change', GLFW.onDevicePixelRatioChange);
14521458

1453-
Module['canvas'].width = Module['canvas'].height = 1;
1459+
canvas.width = canvas.height = 1;
14541460
GLFW.windows = null;
14551461
GLFW.active = null;
14561462
},

0 commit comments

Comments
 (0)