diff --git a/emcclib.js b/emcclib.js index 60dbbf9..cee6d85 100644 --- a/emcclib.js +++ b/emcclib.js @@ -574,6 +574,12 @@ mergeInto(LibraryManager.library, { * alone and return false. */ js_canvas_get_preferred_size: function(wp, hp) { + if (document.readyState == "complete" && containing_div !== null) { + var dpr = window.devicePixelRatio || 1; + setValue(wp, containing_div.clientWidth * dpr, "i32"); + setValue(hp, containing_div.clientHeight * dpr, "i32"); + return true; + } return false; }, @@ -591,6 +597,12 @@ mergeInto(LibraryManager.library, { if (resizable_div !== null) resizable_div.style.width = w / (window.devicePixelRatio || 1) + "px"; + else { + onscreen_canvas.style.width = + w / (window.devicePixelRatio || 1) + "px"; + onscreen_canvas.style.height = + h / (window.devicePixelRatio || 1) + "px"; + } onscreen_canvas.height = h; offscreen_canvas.height = h; diff --git a/emccpre.js b/emccpre.js index f7e0cc5..318f799 100644 --- a/emccpre.js +++ b/emccpre.js @@ -144,6 +144,10 @@ var undo_button, redo_button; // for positioning the resize handle. var resizable_div; +// Alternatively, an extrinsically sized div that we will size the +// puzzle to fit. +var containing_div; + // Helper function to find the absolute position of a given DOM // element on a page, by iterating upwards through the DOM finding // each element's offset from its parent, and thus calculating the @@ -659,6 +663,24 @@ function initPuzzle() { rescale_puzzle(); } + /* + * If the puzzle is sized to fit the page, try to detect changes + * of size of the containing element. Ideally this would use a + * ResizeObserver on the containing_div, but I want this to work + * on KaiOS 2.5, which doesn't have ResizeObserver. Instead we + * watch events that might indicate that the div has changed size. + */ + containing_div = document.getElementById("puzzlecanvascontain"); + if (containing_div !== null) { + var resize_handler = function(event) { + rescale_puzzle(); + } + window.addEventListener("resize", resize_handler); + // Also catch the point when the document finishes loading, + // since sometimes we seem to get the div's size too early. + window.addEventListener("load", resize_handler); + } + Module.preRun = function() { // Merge environment variables from HTML script element. // This means you can add something like this to the HTML: