Merge pull request #175 from Xelio/patch-select-highlight-resos

New feature: Highlight resonators of selected portal

code/map_data.js

@@ -337,26 +337,29 @@ window.renderResonators = function(ent, portalLayer) {
     var resoGuid = portalResonatorGuid(ent[0], i);
 
     // the resonator
-    var reso =  L.circleMarker(Rlatlng, {
+    var resoStyle = 
-        radius: 3,
+      ent[0] === selectedPortal ? OPTIONS_RESONATOR_SELECTED : OPTIONS_RESONATOR_NON_SELECTED;
-        // #AAAAAA outline seems easier to see the fill opacity
+    var resoProperty = $.extend({
-        color: '#AAAAAA',
         opacity: 1,
-        weight: 1,
         fillColor: COLORS_LVL[rdata.level],
         fillOpacity: rdata.energyTotal/RESO_NRG[rdata.level],
         clickable: false,
-        guid: resoGuid // need this here as well for add/remove events
+        guid: resoGuid
-    });
+      }, resoStyle);
+
+    var reso =  L.circleMarker(Rlatlng, resoProperty);
 
     // line connecting reso to portal
-    var conn = L.polyline([portalLatLng, Rlatlng], {
+    var connStyle = 
-        weight: 2,
+      ent[0] === selectedPortal ? OPTIONS_RESONATOR_LINE_SELECTED : OPTIONS_RESONATOR_LINE_NON_SELECTED;
+    var connProperty =  $.extend({
         color: '#FFA000',
-        opacity: 0.25,
         dashArray: '0,10,8,4,8,4,8,4,8,4,8,4,8,4,8,4,8,4,8,4',
         fill: false,
-        clickable: false});
+        clickable: false
+      }, connStyle);
+
+    var conn = L.polyline([portalLatLng, Rlatlng], connProperty);
 
 
     // put both in one group, so they can be handled by the same logic.
@@ -373,7 +376,10 @@ window.renderResonators = function(ent, portalLayer) {
     // doesn’t matter to which element these are bound since Leaflet
     // will add/remove all elements of the LayerGroup at once.
     reso.on('remove', function() { delete window.resonators[this.options.guid]; });
-    reso.on('add',    function() { window.resonators[this.options.guid] = r; });
+    reso.on('add',    function() { 
+      if(window.resonators[this.options.guid]) throw('duplicate resonator detected');
+      window.resonators[this.options.guid] = r; 
+    });
 
     r.addTo(portalsLayers[parseInt(portalLevel)]);
     reRendered = true;
@@ -402,6 +408,39 @@ window.isSameResonator = function(oldRes, newRes) {
 
 window.portalResetColor = function(portal) {
   portal.setStyle({color:  COLORS[getTeam(portal.options.details)]});
+  resonatorsResetStyle(portal.options.guid);
+}
+
+window.resonatorsResetStyle = function(portalGuid) {
+  for(var i = 0; i < 8; i++) {
+    resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
+    if(!resonatorLayerGroup) continue;
+    resonatorLayerGroup.eachLayer(function(layer) {
+      if (layer.options.guid) {
+        // Resonator
+        layer.setStyle(OPTIONS_RESONATOR_NON_SELECTED);
+      } else {
+        // Resonator line
+        layer.setStyle(OPTIONS_RESONATOR_LINE_NON_SELECTED);
+      }
+    });
+  }
+}
+
+window.resonatorsSetSelectStyle = function(portalGuid) {
+  for(var i = 0; i < 8; i++) {
+    resonatorLayerGroup = resonators[portalResonatorGuid(portalGuid, i)];
+    if(!resonatorLayerGroup) continue;
+    resonatorLayerGroup.eachLayer(function(layer) {
+      if (layer.options.guid) {
+        // Resonator
+        layer.bringToFront().setStyle(OPTIONS_RESONATOR_SELECTED);
+      } else {
+        // Resonator line
+        layer.bringToFront().setStyle(OPTIONS_RESONATOR_LINE_SELECTED);
+      }
+    });
+  }
 }
 
 // renders a link on the map from the given entity

code/portal_detail_display.js

@@ -113,8 +113,10 @@ window.selectPortal = function(guid) {
 
   selectedPortal = guid;
 
-  if(portals[guid])
+  if(portals[guid]) {
+    resonatorsSetSelectStyle(guid);
     portals[guid].bringToFront().setStyle({color: COLOR_SELECTED_PORTAL});
+  }
 
   return update;
 }
@@ -122,8 +124,7 @@ window.selectPortal = function(guid) {
 
 window.unselectOldPortal = function() {
   var oldPortal = portals[selectedPortal];
-  if(oldPortal)
+  if(oldPortal) portalResetColor(oldPortal);
-    oldPortal.setStyle({color: oldPortal.options.fillColor});
   selectedPortal = null;
   $('#portaldetails').html('');
 }

main.js

@@ -146,6 +146,11 @@ window.COLORS = ['#FFCE00', '#0088FF', '#03FE03']; // none, res, enl
 window.COLORS_LVL = ['#000', '#FECE5A', '#FFA630', '#FF7315', '#E40000', '#FD2992', '#EB26CD', '#C124E0', '#9627F4'];
 window.COLORS_MOD = {VERY_RARE: '#F78AF6', RARE: '#AD8AFF', COMMON: '#84FBBD'};
 
+window.OPTIONS_RESONATOR_SELECTED = { color: '#fff', weight: 2, radius: 4};
+window.OPTIONS_RESONATOR_NON_SELECTED = { color: '#aaa', weight: 1, radius: 3};
+
+window.OPTIONS_RESONATOR_LINE_SELECTED = {opacity: 0.7, weight: 3};
+window.OPTIONS_RESONATOR_LINE_NON_SELECTED = {opacity: 0.25, weight: 2};
 
 // circles around a selected portal that show from where you can hack
 // it and how far the portal reaches (i.e. how far links may be made