Fix an issue with Chrome and hidden tabs.
When the webpage is on a hidden tab, tiles are not rendered.  This seems
to only be a problem with Chrome.  This adds 'hidden' and 'unhidden'
events, so any feature can hook into these.
The webgl tile layer refreshes its tile cache when unhidden.
MODIFY
CHANGELOG.md
CHANGELOG.md
### Bug Fixes
- Removed extra calls to sceneObject constructors (#1039)
+- Fixed an issue with rendering on hidden tabs in Chrome (#1042)
## Version 0.19.7
- 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

MODIFY
src/event.js
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}.

MODIFY
src/map.js
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();

MODIFY
src/webgl/tileLayer.js
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. */

Fix an issue with Chrome and hidden tabs.

When the webpage is on a hidden tab, tiles are not rendered.  This seems
to only be a problem with Chrome.  This adds 'hidden' and 'unhidden'
events, so any feature can hook into these.

The webgl tile layer refreshes its tile cache when unhidden.