sigonasr2
/
olcPixelGameEngine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

emscripten resizer overhaul!

Browse Source
develop
Moros1138 2 years ago
parent 3280f71307
commit df9595d19a
1 changed files with 80 additions and 98 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 178
      olcPixelGameEngine.h

178
olcPixelGameEngine.h
Unescape View File

@ -197,7 +197,7 @@
Author Author
~~~~~~ ~~~~~~
David Barr, aka javidx9, ©OneLoneCoder 2018, 2019, 2020, 2021, 2022 David Barr, aka javidx9, <EFBFBD>OneLoneCoder 2018, 2019, 2020, 2021, 2022
*/ */
#pragma endregion #pragma endregion
@ -5817,118 +5817,100 @@ namespace olc
// the giant web baby. // the giant web baby.
// Fullscreen and Resize Observers
EM_ASM({ EM_ASM({
// cache for reuse // olc_ApsectRatio
Module._olc_EmscriptenShellCss = "width: 100%; height: 70vh; margin-left: auto; margin-right: auto;"; //
// Used by olc_ResizeHandler to calculate the viewport from the
// dimensions of the canvas container's element.
Module.olc_AspectRatio = $0 / $1;
// HACK ALERT!
//
// Here we assume any html shell that uses 3 or more instance of the class "emscripten"
// is using one of the default or minimal emscripten page layouts
Module.olc_AssumeDefaultShells = (document.querySelectorAll('.emscripten').length >= 3) ? true : false;
// olc_ResizeHandler
//
// Used by olc_Init, and is called when a resize observer and fullscreenchange event is triggered.
var olc_ResizeHandler = function()
{
// are we in fullscreen mode?
let isFullscreen = (document.fullscreenElement != null);
// width / height = aspect ratio // get the width of the containing element
Module._olc_WindowAspectRatio = $0 / $1; let width = (isFullscreen || !Module.olc_AssumeDefaultShells) ? window.innerWidth : Module.canvas.parentNode.clientWidth;
Module.canvas.parentNode.addEventListener("resize", function(e) { let height = (isFullscreen || !Module.olc_AssumeDefaultShells) ? window.innerHeight : Module.canvas.parentNode.clientHeight;
if (e.defaultPrevented) { e.stopPropagation(); return; } // calculate the expected viewport size
var viewWidth = e.detail.width; let viewWidth = width;
var viewHeight = e.detail.width / Module._olc_WindowAspectRatio; let viewHeight = width / Module.olc_AspectRatio;
if (viewHeight > e.detail.height)
// if we're taller than the containing element, recalculate based on height
if(viewHeight > height)
{ {
viewHeight = e.detail.height; viewWidth = height * Module.olc_AspectRatio;
viewWidth = e.detail.height * Module._olc_WindowAspectRatio; viewHeight = height;
}
if (Module.canvas.parentNode.className == 'emscripten_border')
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss + " width: " + viewWidth.toString() + "px; height: " + viewHeight.toString() + "px;";
Module.canvas.setAttribute("width", viewWidth);
Module.canvas.setAttribute("height", viewHeight);
if (document.fullscreenElement != null)
{
var top = (e.detail.height - viewHeight) / 2;
var left = (e.detail.width - viewWidth) / 2;
Module.canvas.style.position = "fixed";
Module.canvas.style.top = top.toString() + "px";
Module.canvas.style.left = left.toString() + "px";
Module.canvas.style.width = "";
Module.canvas.style.height = "";
} }
// ensure resulting viewport is in integer space
viewWidth = parseInt(viewWidth);
viewHeight = parseInt(viewHeight);
// trigger PGE update
Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
// this is really only needed when enter/exiting fullscreen
Module.canvas.focus();
// prevent this event from ever affecting the document beyond this element
e.stopPropagation();
});
// helper function to prevent repeating the same code everywhere
Module._olc_ResizeCanvas = function()
{
// yes, we still have to wait, sigh..
setTimeout(function() setTimeout(function()
{ {
// if default template, stretch width as well // if default shells, apply default styles
if (Module.canvas.parentNode.className == 'emscripten_border') if(Module.olc_AssumeDefaultShells)
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss; Module.canvas.parentNode.setAttribute('style', 'width: 100%; height: 70vh; margin-left: auto; margin-right: auto;');
// override it's styling so we can get it's stretched size // apply viewport dimensions to teh canvas
Module.canvas.style.cssText = "width: 100%; height: 100%; outline: none;"; Module.canvas.setAttribute('width', viewWidth);
Module.canvas.setAttribute('height', viewHeight);
// setup custom resize event Module.canvas.setAttribute('style', `width: ${viewWidth}px; height: ${viewHeight}px;`);
var resizeEvent = new CustomEvent('resize',
{ // update the PGE window size
detail: { Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
width: Module.canvas.clientWidth,
height : Module.canvas.clientHeight // force focus on our PGE canvas
}, Module.canvas.focus();
bubbles : true, }, 200);
cancelable : true
});
// trigger custom resize event on canvas element
Module.canvas.dispatchEvent(resizeEvent);
}, 50);
}; };
// Disable Refresh Gesture on mobile // olc_Init
document.body.style.cssText += " overscroll-behavior-y: contain;"; //
// set up resize observer and fullscreenchange event handler
if (Module.canvas.parentNode.className == 'emscripten_border') var olc_Init = function()
{ {
// force body to have no margin in emscripten's minimal shell if(Module.olc_AspectRatio === undefined)
document.body.style.margin = "0"; {
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss; setTimeout(function() { Module.olc_Init(); }, 50);
} return;
}
Module._olc_ResizeCanvas();
let resizeObserver = new ResizeObserver(function(entries)
{
Module.olc_ResizeHandler();
}).observe(Module.canvas.parentNode);
// observe and react to resizing of the container element let mutationObserver = new MutationObserver(function(mutationsList, observer)
var resizeObserver = new ResizeObserver(function(entries) {Module._olc_ResizeCanvas();}).observe(Module.canvas.parentNode); {
setTimeout(function() { Module.olc_ResizeHandler(); }, 200);
}).observe(Module.canvas.parentNode, { attributes: false, childList: true, subtree: false });
// observe and react to changes that occur when entering/exiting fullscreen window.addEventListener('fullscreenchange', function(e)
var mutationObserver = new MutationObserver(function(mutationsList, observer)
{
// a change has occurred, let's check them out!
for (var i = 0; i < mutationsList.length; i++)
{ {
// cycle through all of the newly added elements setTimeout(function() { Module.olc_ResizeHandler();}, 200);
for (var j = 0; j < mutationsList[i].addedNodes.length; j++) });
{ };
// if this element is a our canvas, trigger resize
if (mutationsList[i].addedNodes[j].id == 'canvas') // set up hooks
Module._olc_ResizeCanvas(); Module.olc_ResizeHandler = (Module.olc_ResizeHandler != undefined) ? Module.olc_ResizeHandler : olc_ResizeHandler;
} Module.olc_Init = (Module.olc_Init != undefined) ? Module.olc_Init : olc_Init;
}
}).observe(Module.canvas.parentNode,
{
attributes: false,
childList : true,
subtree : false
});
// add resize listener on window // run everything!
window.addEventListener("resize", function(e) { Module._olc_ResizeCanvas(); }); Module.olc_Init();
}, vWindowSize.x, vWindowSize.y); // Fullscreen and Resize Observers }, vWindowSize.x, vWindowSize.y); // Fullscreen and Resize Observers
#pragma warning restore format #pragma warning restore format

Write Preview
Loading…
Cancel
Save