diff --git a/CHANGELOG.md b/CHANGELOG.md index 10387db1ce..6d6e23a92e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ ### Bug Fixes - Removed extra calls to sceneObject constructors (#1039) +- Fixed an issue with rendering on hidden tabs in Chrome (#1042) ## Version 0.19.7 @@ -15,13 +16,13 @@ - When only updating point styles, don't recompute geometry transforms (#1022) - Optimized a transform code path for pixel coordinates (#1023) - WebGL point features automatically use the most memory-efficient primitive shape for the point sizes used based on the system's graphics capabilities (#1031) -- Less data is transfered to the GPU when only styles have changed in webgl line or polygon features (#1016) +- Less data is transferred to the GPU when only styles have changed in webgl line or polygon features (#1016) ### Changes - Switched the default tile server to Stamen Design's toner-lite (#1020) ### Bug Fixes -- Mouse wheel events didn't recompute gcs coordinates, so a wheel event without a previous move event coult list the wrong location (#1027) +- Mouse wheel events didn't recompute gcs coordinates, so a wheel event without a previous move event could list the wrong location (#1027) - Original event data was not included with actionwheel events (#1030) ## Version 0.19.6 diff --git a/src/event.js b/src/event.js index 55b9d5b6cb..7bf6ed51b9 100644 --- a/src/event.js +++ b/src/event.js @@ -115,6 +115,24 @@ geo_event.draw = 'geo_draw'; */ geo_event.drawEnd = 'geo_drawEnd'; +/** + * Triggered when the map is shown (the browser tab is made visible) + * + * @event geo.event.unhidden + * @type {geo.event.base} + * @property {geo.map} target The current map. + */ +geo_event.unhidden = 'geo_unhidden'; + +/** + * Triggered when the map is hidden (the browser tab is no longer visible) + * + * @event geo.event.hidden + * @type {geo.event.base} + * @property {geo.map} target The current map. + */ +geo_event.hidden = 'geo_hidden'; + /** * Triggered on every `mousemove` over the map's DOM element unless a click * might occur. The event object extends {@link geo.mouseState}. diff --git a/src/map.js b/src/map.js index f292668c9e..406cbdff8d 100644 --- a/src/map.js +++ b/src/map.js @@ -907,6 +907,49 @@ var map = function (arg) { return m_this; }; + /** + * Trigger an event when the browser is hidden or unhidden. + * + * See {@link geo.map.trackBrowserHidden}. + */ + function handleBrowserHidden() { + var hidden; + + if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support + hidden = 'hidden'; + } else if (typeof document.msHidden !== 'undefined') { + hidden = 'msHidden'; + } else if (typeof document.webkitHidden !== 'undefined') { + hidden = 'webkitHidden'; + } + m_this.geoTrigger(document[hidden] ? geo_event.hidden : geo_event.unhidden); + } + + /** + * Track when the browser tab is hidden or unhidden. + * + * Based on + * https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API + * as accessed on 2019-10-24. + * + * @param {boolean} [enable] If `false`, remove the event listener. + */ + function trackBrowserHidden(enable) { + var visibilityChange; + + if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support + visibilityChange = 'visibilitychange'; + } else if (typeof document.msHidden !== 'undefined') { + visibilityChange = 'msvisibilitychange'; + } else if (typeof document.webkitHidden !== 'undefined') { + visibilityChange = 'webkitvisibilitychange'; + } + document.removeEventListener(visibilityChange, handleBrowserHidden); + if (enable !== false) { + document.addEventListener(visibilityChange, handleBrowserHidden); + } + } + /** * Initialize the map. * @@ -923,6 +966,8 @@ var map = function (arg) { } m_node.addClass('geojs-map'); m_node.data('data-geojs-map', m_this); + + trackBrowserHidden(); return m_this; }; @@ -947,6 +992,7 @@ var map = function (arg) { * empties the associated DOM node. */ this.exit = function () { + trackBrowserHidden(false); var i, layers = m_this.children(); for (i = layers.length - 1; i >= 0; i -= 1) { layers[i]._exit(); diff --git a/src/webgl/tileLayer.js b/src/webgl/tileLayer.js index 8a0a526b66..793a60ced8 100644 --- a/src/webgl/tileLayer.js +++ b/src/webgl/tileLayer.js @@ -195,6 +195,9 @@ var webgl_tileLayer = function () { * Destroy. */ this._exit = function () { + var map = m_this.map(); + map.geoOff(geo_event.layerAdd, m_this._clearQuads); + map.geoOff(geo_event.layerRemove, m_this._clearQuads); m_this._cleanup(); m_this.deleteFeature(m_quadFeature); m_quadFeature = null; @@ -219,6 +222,13 @@ var webgl_tileLayer = function () { var map = m_this.map(); map.geoOn(geo_event.layerAdd, m_this._clearQuads); map.geoOn(geo_event.layerRemove, m_this._clearQuads); + + m_this.geoOn(geo_event.unhidden, () => { + m_this.map().scheduleAnimationFrame(() => { + m_this._clearQuads(); + m_this.map().draw(); + }); + }); }; /* These functions don't need to do anything. */