aboutsummaryrefslogtreecommitdiff
path: root/src/library_browser.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/library_browser.js')
-rw-r--r--src/library_browser.js153
1 files changed, 124 insertions, 29 deletions
diff --git a/src/library_browser.js b/src/library_browser.js
index 9261a2cf..03da394e 100644
--- a/src/library_browser.js
+++ b/src/library_browser.js
@@ -12,6 +12,7 @@ mergeInto(LibraryManager.library, {
$Browser: {
mainLoop: {
scheduler: null,
+ method: '',
shouldPause: false,
paused: false,
queue: [],
@@ -195,24 +196,33 @@ mergeInto(LibraryManager.library, {
// Canvas event setup
var canvas = Module['canvas'];
+
+ // forced aspect ratio can be enabled by defining 'forcedAspectRatio' on Module
+ // Module['forcedAspectRatio'] = 4 / 3;
+
canvas.requestPointerLock = canvas['requestPointerLock'] ||
canvas['mozRequestPointerLock'] ||
- canvas['webkitRequestPointerLock'];
+ canvas['webkitRequestPointerLock'] ||
+ canvas['msRequestPointerLock'] ||
+ function(){};
canvas.exitPointerLock = document['exitPointerLock'] ||
document['mozExitPointerLock'] ||
document['webkitExitPointerLock'] ||
+ document['msExitPointerLock'] ||
function(){}; // no-op if function does not exist
canvas.exitPointerLock = canvas.exitPointerLock.bind(document);
function pointerLockChange() {
Browser.pointerLock = document['pointerLockElement'] === canvas ||
document['mozPointerLockElement'] === canvas ||
- document['webkitPointerLockElement'] === canvas;
+ document['webkitPointerLockElement'] === canvas ||
+ document['msPointerLockElement'] === canvas;
}
document.addEventListener('pointerlockchange', pointerLockChange, false);
document.addEventListener('mozpointerlockchange', pointerLockChange, false);
document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+ document.addEventListener('mspointerlockchange', pointerLockChange, false);
if (Module['elementPointerLock']) {
canvas.addEventListener("click", function(ev) {
@@ -232,6 +242,10 @@ mergeInto(LibraryManager.library, {
}
#endif
var ctx;
+ var errorInfo = '?';
+ function onContextCreationError(event) {
+ errorInfo = event.statusMessage || errorInfo;
+ }
try {
if (useWebGL) {
var contextAttributes = {
@@ -249,10 +263,6 @@ mergeInto(LibraryManager.library, {
contextAttributes.preserveDrawingBuffer = true;
#endif
- var errorInfo = '?';
- function onContextCreationError(event) {
- errorInfo = event.statusMessage || errorInfo;
- }
canvas.addEventListener('webglcontextcreationerror', onContextCreationError, false);
try {
['experimental-webgl', 'webgl'].some(function(webglId) {
@@ -338,22 +348,35 @@ mergeInto(LibraryManager.library, {
if (typeof Browser.resizeCanvas === 'undefined') Browser.resizeCanvas = false;
var canvas = Module['canvas'];
+ var canvasContainer = canvas.parentNode;
function fullScreenChange() {
Browser.isFullScreen = false;
if ((document['webkitFullScreenElement'] || document['webkitFullscreenElement'] ||
document['mozFullScreenElement'] || document['mozFullscreenElement'] ||
- document['fullScreenElement'] || document['fullscreenElement']) === canvas) {
+ document['fullScreenElement'] || document['fullscreenElement'] ||
+ document['msFullScreenElement'] || document['msFullscreenElement'] ||
+ document['webkitCurrentFullScreenElement']) === canvasContainer) {
canvas.cancelFullScreen = document['cancelFullScreen'] ||
document['mozCancelFullScreen'] ||
- document['webkitCancelFullScreen'];
+ document['webkitCancelFullScreen'] ||
+ document['msExitFullscreen'] ||
+ document['exitFullscreen'] ||
+ function() {};
canvas.cancelFullScreen = canvas.cancelFullScreen.bind(document);
if (Browser.lockPointer) canvas.requestPointerLock();
Browser.isFullScreen = true;
if (Browser.resizeCanvas) Browser.setFullScreenCanvasSize();
- } else if (Browser.resizeCanvas){
- Browser.setWindowedCanvasSize();
+ } else {
+
+ // remove the full screen specific parent of the canvas again to restore the HTML structure from before going full screen
+ var canvasContainer = canvas.parentNode;
+ canvasContainer.parentNode.insertBefore(canvas, canvasContainer);
+ canvasContainer.parentNode.removeChild(canvasContainer);
+
+ if (Browser.resizeCanvas) Browser.setWindowedCanvasSize();
}
if (Module['onFullScreen']) Module['onFullScreen'](Browser.isFullScreen);
+ Browser.updateCanvasDimensions(canvas);
}
if (!Browser.fullScreenHandlersInstalled) {
@@ -361,12 +384,20 @@ mergeInto(LibraryManager.library, {
document.addEventListener('fullscreenchange', fullScreenChange, false);
document.addEventListener('mozfullscreenchange', fullScreenChange, false);
document.addEventListener('webkitfullscreenchange', fullScreenChange, false);
+ document.addEventListener('MSFullscreenChange', fullScreenChange, false);
}
- canvas.requestFullScreen = canvas['requestFullScreen'] ||
- canvas['mozRequestFullScreen'] ||
- (canvas['webkitRequestFullScreen'] ? function() { canvas['webkitRequestFullScreen'](Element['ALLOW_KEYBOARD_INPUT']) } : null);
- canvas.requestFullScreen();
+ // create a new parent to ensure the canvas has no siblings. this allows browsers to optimize full screen performance when its parent is the full screen root
+ var canvasContainer = document.createElement("div");
+ canvas.parentNode.insertBefore(canvasContainer, canvas);
+ canvasContainer.appendChild(canvas);
+
+ // use parent of canvas as full screen root to allow aspect ratio correction (Firefox stretches the root to screen size)
+ canvasContainer.requestFullScreen = canvasContainer['requestFullScreen'] ||
+ canvasContainer['mozRequestFullScreen'] ||
+ canvasContainer['msRequestFullscreen'] ||
+ (canvasContainer['webkitRequestFullScreen'] ? function() { canvasContainer['webkitRequestFullScreen'](Element['ALLOW_KEYBOARD_INPUT']) } : null);
+ canvasContainer.requestFullScreen();
},
requestAnimationFrame: function requestAnimationFrame(func) {
@@ -444,6 +475,10 @@ mergeInto(LibraryManager.library, {
0;
},
+ getMouseWheelDelta: function(event) {
+ return Math.max(-1, Math.min(1, event.type === 'DOMMouseScroll' ? event.detail : -event.wheelDelta));
+ },
+
mouseX: 0,
mouseY: 0,
mouseMovementX: 0,
@@ -559,19 +594,13 @@ mergeInto(LibraryManager.library, {
setCanvasSize: function(width, height, noUpdates) {
var canvas = Module['canvas'];
- canvas.width = width;
- canvas.height = height;
+ Browser.updateCanvasDimensions(canvas, width, height);
if (!noUpdates) Browser.updateResizeListeners();
},
windowedWidth: 0,
windowedHeight: 0,
setFullScreenCanvasSize: function() {
- var canvas = Module['canvas'];
- this.windowedWidth = canvas.width;
- this.windowedHeight = canvas.height;
- canvas.width = screen.width;
- canvas.height = screen.height;
// check if SDL is available
if (typeof SDL != "undefined") {
var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}};
@@ -582,9 +611,6 @@ mergeInto(LibraryManager.library, {
},
setWindowedCanvasSize: function() {
- var canvas = Module['canvas'];
- canvas.width = this.windowedWidth;
- canvas.height = this.windowedHeight;
// check if SDL is available
if (typeof SDL != "undefined") {
var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}};
@@ -592,8 +618,55 @@ mergeInto(LibraryManager.library, {
{{{ makeSetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'flags', 'i32') }}}
}
Browser.updateResizeListeners();
- }
+ },
+ updateCanvasDimensions : function(canvas, wNative, hNative) {
+ if (wNative && hNative) {
+ canvas.widthNative = wNative;
+ canvas.heightNative = hNative;
+ } else {
+ wNative = canvas.widthNative;
+ hNative = canvas.heightNative;
+ }
+ var w = wNative;
+ var h = hNative;
+ if (Module['forcedAspectRatio'] && Module['forcedAspectRatio'] > 0) {
+ if (w/h < Module['forcedAspectRatio']) {
+ w = Math.round(h * Module['forcedAspectRatio']);
+ } else {
+ h = Math.round(w / Module['forcedAspectRatio']);
+ }
+ }
+ if (((document['webkitFullScreenElement'] || document['webkitFullscreenElement'] ||
+ document['mozFullScreenElement'] || document['mozFullscreenElement'] ||
+ document['fullScreenElement'] || document['fullscreenElement'] ||
+ document['msFullScreenElement'] || document['msFullscreenElement'] ||
+ document['webkitCurrentFullScreenElement']) === canvas.parentNode) && (typeof screen != 'undefined')) {
+ var factor = Math.min(screen.width / w, screen.height / h);
+ w = Math.round(w * factor);
+ h = Math.round(h * factor);
+ }
+ if (Browser.resizeCanvas) {
+ if (canvas.width != w) canvas.width = w;
+ if (canvas.height != h) canvas.height = h;
+ if (typeof canvas.style != 'undefined') {
+ canvas.style.removeProperty( "width");
+ canvas.style.removeProperty("height");
+ }
+ } else {
+ if (canvas.width != wNative) canvas.width = wNative;
+ if (canvas.height != hNative) canvas.height = hNative;
+ if (typeof canvas.style != 'undefined') {
+ if (w != wNative || h != hNative) {
+ canvas.style.setProperty( "width", w + "px", "important");
+ canvas.style.setProperty("height", h + "px", "important");
+ } else {
+ canvas.style.removeProperty( "width");
+ canvas.style.removeProperty("height");
+ }
+ }
+ }
+ }
},
emscripten_async_wget: function(url, file, onload, onerror) {
@@ -673,6 +746,8 @@ mergeInto(LibraryManager.library, {
},
emscripten_async_prepare: function(file, onload, onerror) {
+ Module['noExitRuntime'] = true;
+
var _file = Pointer_stringify(file);
var data = FS.analyzePath(_file);
if (!data.exists) return -1;
@@ -692,6 +767,8 @@ mergeInto(LibraryManager.library, {
},
emscripten_async_prepare_data: function(data, size, suffix, arg, onload, onerror) {
+ Module['noExitRuntime'] = true;
+
var _suffix = Pointer_stringify(suffix);
if (!Browser.asyncPrepareDataCounter) Browser.asyncPrepareDataCounter = 0;
var name = 'prepare_data_' + (Browser.asyncPrepareDataCounter++) + '.' + _suffix;
@@ -742,7 +819,7 @@ mergeInto(LibraryManager.library, {
document.body.appendChild(script);
},
- emscripten_set_main_loop: function(func, fps, simulateInfiniteLoop) {
+ emscripten_set_main_loop: function(func, fps, simulateInfiniteLoop, arg) {
Module['noExitRuntime'] = true;
Browser.mainLoop.runner = function Browser_mainLoop_runner() {
@@ -783,12 +860,21 @@ mergeInto(LibraryManager.library, {
GL.newRenderingFrameStarted();
#endif
+ if (Browser.mainLoop.method === 'timeout' && Module.ctx) {
+ Module.printErr('Looks like you are rendering without using requestAnimationFrame for the main loop. You should use 0 for the frame rate in emscripten_set_main_loop in order to use requestAnimationFrame, as that can greatly improve your frame rates!');
+ Browser.mainLoop.method = ''; // just warn once per call to set main loop
+ }
+
if (Module['preMainLoop']) {
Module['preMainLoop']();
}
try {
- Runtime.dynCall('v', func);
+ if (typeof arg !== 'undefined') {
+ Runtime.dynCall('vi', func, [arg]);
+ } else {
+ Runtime.dynCall('v', func);
+ }
} catch (e) {
if (e instanceof ExitStatus) {
return;
@@ -813,11 +899,13 @@ mergeInto(LibraryManager.library, {
if (fps && fps > 0) {
Browser.mainLoop.scheduler = function Browser_mainLoop_scheduler() {
setTimeout(Browser.mainLoop.runner, 1000/fps); // doing this each time means that on exception, we stop
- }
+ };
+ Browser.mainLoop.method = 'timeout';
} else {
Browser.mainLoop.scheduler = function Browser_mainLoop_scheduler() {
Browser.requestAnimationFrame(Browser.mainLoop.runner);
- }
+ };
+ Browser.mainLoop.method = 'rAF';
}
Browser.mainLoop.scheduler();
@@ -826,6 +914,11 @@ mergeInto(LibraryManager.library, {
}
},
+ emscripten_set_main_loop_arg__deps: ['emscripten_set_main_loop'],
+ emscripten_set_main_loop_arg: function(func, arg, fps, simulateInfiniteLoop) {
+ _emscripten_set_main_loop(func, fps, simulateInfiniteLoop, arg);
+ },
+
emscripten_cancel_main_loop: function() {
Browser.mainLoop.scheduler = null;
Browser.mainLoop.shouldPause = true;
@@ -948,6 +1041,8 @@ mergeInto(LibraryManager.library, {
},
emscripten_call_worker: function(id, funcName, data, size, callback, arg) {
+ Module['noExitRuntime'] = true; // should we only do this if there is a callback?
+
funcName = Pointer_stringify(funcName);
var info = Browser.workers[id];
var callbackId = -1;
generated by cgit v1.2.3-18-g5258 (git 2.32.0) at 2025-07-20 20:13:14 +0000