Skip to content

Commit

Permalink
Simply EGL/GLFW/SDL/GLUT canvas access. NFC
Browse files Browse the repository at this point in the history 
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 unify these and extend this to all use of
`Module['canvas']`.
  • Loading branch information
@sbc100
sbc100 committed Feb 6, 2025
1 parent f103d9f commit 6bf2bad
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 88 deletions.
8 changes: 5 additions & 3 deletions src/lib/libegl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ var LibraryEGL = {

stringCache: {},

getCanvas: () => Module['canvas'],

setErrorCode(code) {
EGL.errorCode = code;
},
Expand Down Expand Up @@ -356,7 +358,7 @@ var LibraryEGL = {
EGL.contextAttributes.majorVersion = glesContextVersion - 1; // WebGL 1 is GLES 2, WebGL2 is GLES3
EGL.contextAttributes.minorVersion = 0;

EGL.context = GL.createContext(Module['canvas'], EGL.contextAttributes);
EGL.context = GL.createContext(EGL.getCanvas(), EGL.contextAttributes);

if (EGL.context != 0) {
EGL.setErrorCode(0x3000 /* EGL_SUCCESS */);
Expand Down Expand Up @@ -422,10 +424,10 @@ var LibraryEGL = {
// Existing Android implementation seems to do so at least.
return 1;
case 0x3057: // EGL_WIDTH
{{{ makeSetValue('value', '0', "Module['canvas'].width", 'i32') }}};
{{{ makeSetValue('value', '0', "EGL.getCanvas().width", 'i32') }}};
return 1;
case 0x3056: // EGL_HEIGHT
{{{ makeSetValue('value', '0', "Module['canvas'].height", 'i32') }}};
{{{ makeSetValue('value', '0', "EGL.getCanvas().height", 'i32') }}};
return 1;
case 0x3090: // EGL_HORIZONTAL_RESOLUTION
{{{ makeSetValue('value', '0', '-1' /* EGL_UNKNOWN */, 'i32') }}};
Expand Down
96 changes: 52 additions & 44 deletions src/lib/libglfw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,8 @@ var LibraryGLFW = {
0x00022008:0, // GLFW_OPENGL_PROFILE
},

getCanvas: () => Module['canvas'],

/*******************************************************************************
* DOM EVENT CALLBACKS
******************************************************************************/
Expand Down Expand Up @@ -467,7 +469,7 @@ var LibraryGLFW = {
Browser.calculateMouseEvent(event);
}

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

if (GLFW.active.cursorPosFunc) {
#if USE_GLFW == 2
Expand Down Expand Up @@ -496,7 +498,7 @@ var LibraryGLFW = {
onMouseenter: (event) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != GLFW.getCanvas()) return;

#if USE_GLFW == 3
if (GLFW.active.cursorEnterFunc) {
Expand All @@ -508,7 +510,7 @@ var LibraryGLFW = {
onMouseleave: (event) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != GLFW.getCanvas()) return;

#if USE_GLFW == 3
if (GLFW.active.cursorEnterFunc) {
Expand All @@ -520,7 +522,7 @@ var LibraryGLFW = {
onMouseButtonChanged: (event, status) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != GLFW.getCanvas()) return;

// Is this from a touch event?
const isTouchType = event.type === 'touchstart' || event.type === 'touchend' || event.type === 'touchcancel';
Expand Down Expand Up @@ -602,7 +604,7 @@ var LibraryGLFW = {
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.
GLFW.wheelPos += delta;

if (!GLFW.active || !GLFW.active.scrollFunc || event.target != Module['canvas']) return;
if (!GLFW.active || !GLFW.active.scrollFunc || event.target != GLFW.getCanvas()) return;
#if USE_GLFW == 2
{{{ makeDynCall('vi', 'GLFW.active.scrollFunc') }}}(GLFW.wheelPos);
#endif
Expand Down Expand Up @@ -923,8 +925,9 @@ var LibraryGLFW = {
},

onClickRequestPointerLock: (e) => {
if (!Browser.pointerLock && Module['canvas'].requestPointerLock) {
Module['canvas'].requestPointerLock();
var canvas = GLFW.getCanvas();
if (!Browser.pointerLock && canvas.requestPointerLock) {
canvas.requestPointerLock();
e.preventDefault();
}
},
Expand All @@ -935,11 +938,12 @@ var LibraryGLFW = {

switch (mode) {
case 0x00033001: { // GLFW_CURSOR
var canvas = GLFW.getCanvas();
switch (value) {
case 0x00034001: { // GLFW_CURSOR_NORMAL
win.inputModes[mode] = value;
Module['canvas'].removeEventListener('click', GLFW.onClickRequestPointerLock, true);
Module['canvas'].exitPointerLock();
canvas.removeEventListener('click', GLFW.onClickRequestPointerLock, true);
canvas.exitPointerLock();
break;
}
case 0x00034002: { // GLFW_CURSOR_HIDDEN
Expand All @@ -948,8 +952,8 @@ var LibraryGLFW = {
}
case 0x00034003: { // GLFW_CURSOR_DISABLED
win.inputModes[mode] = value;
Module['canvas'].addEventListener('click', GLFW.onClickRequestPointerLock, true);
Module['canvas'].requestPointerLock();
canvas.addEventListener('click', GLFW.onClickRequestPointerLock, true);
canvas.requestPointerLock();
break;
}
default: {
Expand Down Expand Up @@ -1088,6 +1092,9 @@ var LibraryGLFW = {
for (i = 0; i < GLFW.windows.length && GLFW.windows[i] == null; i++) {
// no-op
}

const canvas = GLFW.getCanvas();

var useWebGL = GLFW.hints[0x00022001] > 0; // Use WebGL when we are told to based on GLFW_CLIENT_API
if (i == GLFW.windows.length) {
if (useWebGL) {
Expand All @@ -1101,7 +1108,7 @@ var LibraryGLFW = {
// TODO: Make GLFW explicitly aware of whether it is being proxied or not, and set these to true only when proxying is being performed.
GL.enableOffscreenFramebufferAttributes(contextAttributes);
#endif
Browser.createContext(Module['canvas'], /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
Browser.createContext(canvas, /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
} else {
Browser.init();
}
Expand All @@ -1111,7 +1118,6 @@ var LibraryGLFW = {
if (!Module['ctx'] && useWebGL) return 0;

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

// Set window to array
Expand Down Expand Up @@ -1157,7 +1163,7 @@ var LibraryGLFW = {
if (typeof Browser.lockPointer == 'undefined') Browser.lockPointer = true;
if (typeof Browser.resizeCanvas == 'undefined') Browser.resizeCanvas = false;

var canvas = Module['canvas'];
var canvas = GLFW.getCanvas();
function fullscreenChange() {
Browser.isFullscreen = false;
var canvasContainer = canvas.parentNode;
Expand Down Expand Up @@ -1262,7 +1268,7 @@ var LibraryGLFW = {
calculateMouseCoords(pageX, pageY) {
// Calculate the movement based on the changes
// in the coordinates.
const rect = Module['canvas'].getBoundingClientRect();
const rect = GLFW.getCanvas().getBoundingClientRect();

// Neither .scrollX or .pageXOffset are defined in a spec, but
// we prefer .scrollX because it is currently in a spec draft.
Expand Down Expand Up @@ -1319,7 +1325,7 @@ var LibraryGLFW = {

adjustCanvasDimensions() {
if (GLFW.active) {
Browser.updateCanvasDimensions(Module['canvas'], GLFW.active.width, GLFW.active.height);
Browser.updateCanvasDimensions(GLFW.getCanvas(), GLFW.active.width, GLFW.active.height);
Browser.updateResizeListeners();
}
},
Expand Down Expand Up @@ -1395,19 +1401,20 @@ var LibraryGLFW = {
GLFW.devicePixelRatioMQL = window.matchMedia('(resolution: ' + GLFW.getDevicePixelRatio() + 'dppx)');
GLFW.devicePixelRatioMQL.addEventListener('change', GLFW.onDevicePixelRatioChange);

Module['canvas'].addEventListener('touchmove', GLFW.onMousemove, true);
Module['canvas'].addEventListener('touchstart', GLFW.onMouseButtonDown, true);
Module['canvas'].addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('touchend', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('mousemove', GLFW.onMousemove, true);
Module['canvas'].addEventListener('mousedown', GLFW.onMouseButtonDown, true);
Module['canvas'].addEventListener('mouseup', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('wheel', GLFW.onMouseWheel, true);
Module['canvas'].addEventListener('mousewheel', GLFW.onMouseWheel, true);
Module['canvas'].addEventListener('mouseenter', GLFW.onMouseenter, true);
Module['canvas'].addEventListener('mouseleave', GLFW.onMouseleave, true);
Module['canvas'].addEventListener('drop', GLFW.onDrop, true);
Module['canvas'].addEventListener('dragover', GLFW.onDragover, true);
var canvas = GLFW.getCanvas();
canvas.addEventListener('touchmove', GLFW.onMousemove, true);
canvas.addEventListener('touchstart', GLFW.onMouseButtonDown, true);
canvas.addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
canvas.addEventListener('touchend', GLFW.onMouseButtonUp, true);
canvas.addEventListener('mousemove', GLFW.onMousemove, true);
canvas.addEventListener('mousedown', GLFW.onMouseButtonDown, true);
canvas.addEventListener("mouseup", GLFW.onMouseButtonUp, true);
canvas.addEventListener('wheel', GLFW.onMouseWheel, true);
canvas.addEventListener('mousewheel', GLFW.onMouseWheel, true);
canvas.addEventListener('mouseenter', GLFW.onMouseenter, true);
canvas.addEventListener('mouseleave', GLFW.onMouseleave, true);
canvas.addEventListener('drop', GLFW.onDrop, true);
canvas.addEventListener('dragover', GLFW.onDragover, true);

// Overriding implementation to account for HiDPI
Browser.requestFullscreen = GLFW.requestFullscreen;
Expand All @@ -1416,7 +1423,7 @@ var LibraryGLFW = {

Browser.resizeListeners.push((width, height) => {
if (GLFW.isHiDPIAware()) {
var canvas = Module['canvas'];
var canvas = GLFW.getCanvas();
GLFW.onCanvasResize(canvas.clientWidth, canvas.clientHeight, width, height);
} else {
GLFW.onCanvasResize(width, height, width, height);
Expand All @@ -1433,24 +1440,25 @@ var LibraryGLFW = {
window.removeEventListener('keypress', GLFW.onKeyPress, true);
window.removeEventListener('keyup', GLFW.onKeyup, true);
window.removeEventListener('blur', GLFW.onBlur, true);
Module['canvas'].removeEventListener('touchmove', GLFW.onMousemove, true);
Module['canvas'].removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
Module['canvas'].removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('touchend', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('mousemove', GLFW.onMousemove, true);
Module['canvas'].removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
Module['canvas'].removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('wheel', GLFW.onMouseWheel, true);
Module['canvas'].removeEventListener('mousewheel', GLFW.onMouseWheel, true);
Module['canvas'].removeEventListener('mouseenter', GLFW.onMouseenter, true);
Module['canvas'].removeEventListener('mouseleave', GLFW.onMouseleave, true);
Module['canvas'].removeEventListener('drop', GLFW.onDrop, true);
Module['canvas'].removeEventListener('dragover', GLFW.onDragover, true);
var canvas = GLFW.getCanvas();
canvas.removeEventListener('touchmove', GLFW.onMousemove, true);
canvas.removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
canvas.removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('touchend', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('mousemove', GLFW.onMousemove, true);
canvas.removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
canvas.removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('wheel', GLFW.onMouseWheel, true);
canvas.removeEventListener('mousewheel', GLFW.onMouseWheel, true);
canvas.removeEventListener('mouseenter', GLFW.onMouseenter, true);
canvas.removeEventListener('mouseleave', GLFW.onMouseleave, true);
canvas.removeEventListener('drop', GLFW.onDrop, true);
canvas.removeEventListener('dragover', GLFW.onDragover, true);

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

Module['canvas'].width = Module['canvas'].height = 1;
canvas.width = canvas.height = 1;
GLFW.windows = null;
GLFW.active = null;
},
Expand Down
31 changes: 18 additions & 13 deletions src/lib/libglut.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ var LibraryGLUT = {
windowHeight: 0,
requestedAnimationFrame: false,

getCanvas: () => Module['canvas'],

saveModifiers: (event) => {
GLUT.modifiers = 0;
if (event['shiftKey'])
Expand All @@ -52,7 +54,7 @@ var LibraryGLUT = {
var newY = Browser.mouseY;
if (newX == lastX && newY == lastY) return;

if (GLUT.buttons == 0 && event.target == Module['canvas'] && GLUT.passiveMotionFunc) {
if (GLUT.buttons == 0 && event.target == GLUT.getCanvas() && GLUT.passiveMotionFunc) {
event.preventDefault();
GLUT.saveModifiers(event);
{{{ makeDynCall('vii', 'GLUT.passiveMotionFunc') }}}(lastX, lastY);
Expand Down Expand Up @@ -201,7 +203,7 @@ var LibraryGLUT = {
},

touchHandler: (event) => {
if (event.target != Module['canvas']) {
if (event.target != GLUT.getCanvas()) {
return;
}

Expand Down Expand Up @@ -231,7 +233,7 @@ var LibraryGLUT = {

GLUT.buttons |= (1 << event['button']);

if (event.target == Module['canvas'] && GLUT.mouseFunc) {
if (event.target == GLUT.getCanvas() && GLUT.mouseFunc) {
try {
event.target.setCapture();
} catch (e) {}
Expand Down Expand Up @@ -359,7 +361,8 @@ var LibraryGLUT = {
// Firefox
window.removeEventListener('DOMMouseScroll', GLUT.onMouseWheel, true);

Module['canvas'].width = Module['canvas'].height = 1;
var canvas = GLUT.getCanvas();
canvas.width = canvas.height = 1;
});
},

Expand All @@ -380,13 +383,13 @@ var LibraryGLUT = {
case 101: /* GLUT_WINDOW_Y */
return 0; /* TODO */
case 102: /* GLUT_WINDOW_WIDTH */
return Module['canvas'].width;
return GLUT.getCanvas().width;
case 103: /* GLUT_WINDOW_HEIGHT */
return Module['canvas'].height;
return GLUT.getCanvas().height;
case 200: /* GLUT_SCREEN_WIDTH */
return Module['canvas'].width;
return GLUT.getCanvas().width;
case 201: /* GLUT_SCREEN_HEIGHT */
return Module['canvas'].height;
return GLUT.getCanvas().height;
case 500: /* GLUT_INIT_WINDOW_X */
return 0; /* TODO */
case 501: /* GLUT_INIT_WINDOW_Y */
Expand Down Expand Up @@ -550,7 +553,7 @@ var LibraryGLUT = {
default:
throw "glutSetCursor: Unknown cursor type: " + cursor;
}
Module['canvas'].style.cursor = cursorStyle;
GLUT.getCanvas().style.cursor = cursorStyle;
},

glutCreateWindow__proxy: 'sync',
Expand All @@ -566,7 +569,7 @@ var LibraryGLUT = {
// TODO: Make glutCreateWindow explicitly aware of whether it is being proxied or not, and set these to true only when proxying is being performed.
GL.enableOffscreenFramebufferAttributes(contextAttributes);
#endif
if (!Browser.createContext(Module['canvas'], /*useWebGL=*/true, /*setInModule=*/true, contextAttributes)) {
if (!Browser.createContext(GLUT.getCanvas(), /*useWebGL=*/true, /*setInModule=*/true, contextAttributes)) {
return 0; // failure
}
return 1; // a new GLUT window ID for the created context
Expand Down Expand Up @@ -604,8 +607,9 @@ var LibraryGLUT = {
glutFullScreen: () => {
GLUT.windowX = 0; // TODO
GLUT.windowY = 0; // TODO
GLUT.windowWidth = Module['canvas'].width;
GLUT.windowHeight = Module['canvas'].height;
var canvas = GLUT.getCanvas();
GLUT.windowWidth = canvas.width;
GLUT.windowHeight = canvas.height;
document.addEventListener('fullscreenchange', GLUT.onFullscreenEventChange, true);
document.addEventListener('mozfullscreenchange', GLUT.onFullscreenEventChange, true);
document.addEventListener('webkitfullscreenchange', GLUT.onFullscreenEventChange, true);
Expand Down Expand Up @@ -633,7 +637,8 @@ var LibraryGLUT = {
glutMainLoop__proxy: 'sync',
glutMainLoop__deps: ['$GLUT', 'glutReshapeWindow', 'glutPostRedisplay'],
glutMainLoop: () => {
_glutReshapeWindow(Module['canvas'].width, Module['canvas'].height);
var canvas = GLUT.getCanvas();
_glutReshapeWindow(canvas.width, canvas.height);
_glutPostRedisplay();
throw 'unwind';
},
Expand Down
Loading

0 comments on commit 6bf2bad

Please sign in to comment.