improve actual and perceived performance
This commit is contained in:
@ -89,6 +89,12 @@ window.handleDataResponse = function(data, textStatus, jqXHR) {
|
||||
|
||||
var portalUpdateAvailable = false;
|
||||
var m = data.result.map;
|
||||
// defer rendering of portals because there is no z-index in SVG.
|
||||
// this means that what’s rendered last ends up on top. While the
|
||||
// portals can be brought to front, this costs extra time. They need
|
||||
// to be in the foreground, or they cannot be clicked. See
|
||||
// https://github.com/Leaflet/Leaflet/issues/185
|
||||
var ppp = [];
|
||||
$.each(m, function(qk, val) {
|
||||
$.each(val.deletedGameEntityGuids, function(ind, guid) {
|
||||
window.removeByGuid(guid);
|
||||
@ -108,7 +114,7 @@ window.handleDataResponse = function(data, textStatus, jqXHR) {
|
||||
urlPortal = null; // only pre-select it once
|
||||
window.renderPortalDetails(ent[0]);
|
||||
}
|
||||
renderPortal(ent);
|
||||
ppp.push(ent); // delay portal render
|
||||
} else if(ent[2].edge !== undefined)
|
||||
renderLink(ent);
|
||||
else if(ent[2].capturedRegion !== undefined)
|
||||
@ -118,11 +124,7 @@ window.handleDataResponse = function(data, textStatus, jqXHR) {
|
||||
});
|
||||
});
|
||||
|
||||
$.each(portals, function(ind, portal) {
|
||||
// otherwise some portals will not be clickable. See
|
||||
// https://github.com/Leaflet/Leaflet/issues/185
|
||||
portal.bringToFront();
|
||||
});
|
||||
$.each(ppp, function(ind, portal) { renderPortal(portal); });
|
||||
|
||||
if(portals[selectedPortal]) portals[selectedPortal].bringToFront();
|
||||
|
||||
@ -134,7 +136,7 @@ window.handleDataResponse = function(data, textStatus, jqXHR) {
|
||||
// do not intersect the current viewport.
|
||||
window.cleanUp = function() {
|
||||
var cnt = [0,0,0];
|
||||
var b = map.getBounds();
|
||||
var b = getPaddedBounds();
|
||||
portalsLayer.eachLayer(function(portal) {
|
||||
if(b.contains(portal.getLatLng())) return;
|
||||
cnt[0]++;
|
||||
@ -183,7 +185,7 @@ window.removeByGuid = function(guid) {
|
||||
window.renderPortal = function(ent) {
|
||||
removeByGuid(ent[0]);
|
||||
var latlng = [ent[2].locationE6.latE6/1E6, ent[2].locationE6.lngE6/1E6];
|
||||
if(!map.getBounds().contains(latlng)) return;
|
||||
if(!getPaddedBounds().contains(latlng)) return;
|
||||
|
||||
// pre-load player names for high zoom levels
|
||||
if(map.getZoom() >= PRECACHE_PLAYER_NAMES_ZOOM) {
|
||||
@ -234,7 +236,7 @@ window.renderLink = function(ent) {
|
||||
guid: ent[0]
|
||||
});
|
||||
|
||||
if(!map.getBounds().intersects(poly.getBounds())) return;
|
||||
if(!getPaddedBounds().intersects(poly.getBounds())) return;
|
||||
|
||||
poly.on('remove', function() { delete window.links[this.options.guid]; });
|
||||
poly.on('add', function() { window.links[this.options.guid] = this; });
|
||||
@ -258,7 +260,7 @@ window.renderField = function(ent) {
|
||||
clickable: false,
|
||||
guid: ent[0]});
|
||||
|
||||
if(!map.getBounds().intersects(poly.getBounds())) return;
|
||||
if(!getPaddedBounds().intersects(poly.getBounds())) return;
|
||||
|
||||
poly.on('remove', function() { delete window.fields[this.options.guid]; });
|
||||
poly.on('add', function() { window.fields[this.options.guid] = this; });
|
||||
|
@ -98,3 +98,17 @@ window.reportPortalIssue = function(info) {
|
||||
if(prompt(t, info) !== null)
|
||||
location.href = 'https://support.google.com/ingress?hl=en';
|
||||
}
|
||||
|
||||
|
||||
window._storedPaddedBounds = undefined;
|
||||
window.getPaddedBounds = function() {
|
||||
if(_storedPaddedBounds === undefined) {
|
||||
map.on('zoomstart zoomend movestart moveend', function() {
|
||||
window._storedPaddedBounds = null;
|
||||
});
|
||||
}
|
||||
if(window._storedPaddedBounds) return window._storedPaddedBounds;
|
||||
var p = window.map.getBounds().pad(VIEWPORT_PAD_RATIO);
|
||||
window._storedPaddedBounds = p;
|
||||
return p;
|
||||
}
|
||||
|
7
main.js
7
main.js
@ -81,6 +81,13 @@ var REFRESH_GAME_SCORE = 5*60; // refresh game score every 5 minutes
|
||||
var MAX_IDLE_TIME = 4; // stop updating map after 4min idling
|
||||
var PRECACHE_PLAYER_NAMES_ZOOM = 17; // zoom level to start pre-resolving player names
|
||||
var SIDEBAR_WIDTH = 300;
|
||||
// this controls how far data is being drawn outside the viewport. Set
|
||||
// it 0 to only draw entities that intersect the current view. A value
|
||||
// of one will render an area twice the size of the viewport (or some-
|
||||
// thing like that, Leaflet doc isn’t too specific). Setting it too low
|
||||
// makes the missing data on move/zoom out more obvious. Setting it too
|
||||
// high causes too many items to be drawn, making drag&drop sluggish.
|
||||
var VIEWPORT_PAD_RATIO = 0.3;
|
||||
|
||||
|
||||
var COLOR_SELECTED_PORTAL = '#f00';
|
||||
|
Reference in New Issue
Block a user