Merge pull request #1359 from jschleic/highlight-style-for-selected-lines

highlight selected feature

umap/static/umap/js/umap.features.js

@@ -547,6 +547,14 @@ L.U.Marker = L.Marker.extend({
     this.setIcon(this.getIcon())
   },
 
+  highlight: function () {
+    L.DomUtil.addClass(this.options.icon.elements.main, 'umap-icon-active')
+  },
+
+  resetHighlight: function () {
+    L.DomUtil.removeClass(this.options.icon.elements.main, 'umap-icon-active')
+  },
+
   addInteractions: function () {
     L.U.FeatureMixin.addInteractions.call(this)
     this.on(
@@ -560,6 +568,8 @@ L.U.Marker = L.Marker.extend({
     if (!this.isReadOnly()) this.on('mouseover', this._enableDragging)
     this.on('mouseout', this._onMouseOut)
     this._popupHandlersAdded = true // prevent Leaflet from binding event on bindPopup
+    this.on('popupopen', this.highlight)
+    this.on('popupclose', this.resetHighlight)
   },
 
   hasGeom: function () {
@@ -816,6 +826,14 @@ L.U.PathMixin = {
     L.U.FeatureMixin.endEdit.call(this)
   },
 
+  highlightPath: function () {
+    this.parentClass.prototype.setStyle.call(this, {
+      fillOpacity: Math.sqrt(this.getDynamicOption('fillOpacity', 1.0)),
+      opacity: 1.0,
+      weight: 1.3 * this.getDynamicOption('weight'),
+    })
+  },
+
   _onMouseOver: function () {
     if (this.map.measureTools && this.map.measureTools.enabled()) {
       this.map.ui.tooltip({ content: this.getMeasure(), anchor: this })
@@ -829,6 +847,8 @@ L.U.PathMixin = {
     this.on('mouseover', this._onMouseOver)
     this.on('edit', this.makeDirty)
     this.on('drag editable:drag', this._onDrag)
+    this.on('popupopen', this.highlightPath)
+    this.on('popupclose', this._redraw)
   },
 
   _onDrag: function () {

umap/static/umap/js/umap.icon.js

@@ -110,7 +110,6 @@ L.U.Icon.Default = L.U.Icon.extend({
 L.U.Icon.Circle = L.U.Icon.extend({
   initialize: function (map, options) {
     const default_options = {
-      iconAnchor: new L.Point(6, 6),
       popupAnchor: new L.Point(0, -6),
       tooltipAnchor: new L.Point(6, 0),
       className: 'umap-circle-icon',

umap/static/umap/js/umap.popup.js

@@ -68,10 +68,28 @@ L.U.Popup.Panel = L.U.Popup.extend({
       data: { html: this._content },
       actions: [this.allButton()],
     })
+
+    // fire events as in base class Popup.js:onAdd
+    map.fire('popupopen', { popup: this })
+    if (this._source) {
+      this._source.fire('popupopen', { popup: this }, true)
+      if (!(this._source instanceof L.Path)) {
+        this._source.on('preclick', L.DomEvent.stopPropagation)
+      }
+    }
   },
 
   onRemove: function (map) {
     map.ui.closePanel()
+
+    // fire events as in base class Popup.js:onRemove
+    map.fire('popupclose', { popup: this })
+    if (this._source) {
+      this._source.fire('popupclose', { popup: this }, true)
+      if (!(this._source instanceof L.Path)) {
+        this._source.off('preclick', L.DomEvent.stopPropagation)
+      }
+    }
   },
 
   update: function () {},

umap/static/umap/map.css

@@ -1223,6 +1223,16 @@ a.add-datalayer:hover,
     text-align: center;
     line-height: 32px;
 }
+.umap-div-icon.umap-icon-active .icon_container {
+    border-radius: 5px;
+    box-shadow: 7px 10px 10px -1px black;
+    height: 36px;
+    line-height: 36px;
+    margin-left: -2px;
+    margin-top: -4px;
+    opacity: 1.0!important;
+    width: 36px;
+}
 .umap-div-icon .icon_container img {
     vertical-align: middle;
     max-width: 24px!important; /* leaflet.css has !important, so... */
@@ -1237,7 +1247,9 @@ a.add-datalayer:hover,
     position: relative;
     width: 0;
     opacity: 0.9;
-    /*box-shadow: 4px 8px 6px -3px black;*/
+}
+.umap-div-icon.umap-icon-active .icon_arrow {
+    opacity: 1.0!important;
 }
 .umap-drop-icon .icon_arrow {
     border-left: 10px solid transparent;
@@ -1249,6 +1261,13 @@ a.add-datalayer:hover,
     top: -4px;
     width: 0;
 }
+.umap-drop-icon.umap-icon-active .icon_arrow {
+    border-left-width: 12px;
+    border-right-width: 12px;
+    border-top-width: 18px;
+    left: 4px;
+    opacity: 1.0!important;
+}
 .umap-drop-icon .icon_container {
     background-color: #2470B5;
     border-radius: 16px 16px 16px 16px;
@@ -1259,6 +1278,16 @@ a.add-datalayer:hover,
     text-align: center;
     width: 32px;
 }
+.umap-drop-icon.umap-icon-active .icon_container {
+    box-shadow: 4px 11px 10px -2px black;
+    border-radius: 18px 18px 18px 18px;
+    height: 36px;
+    line-height: 36px;
+    margin-left: -2px;
+    margin-top: -6px;
+    opacity: 1.0!important;
+    width: 36px;
+}
 .umap-drop-icon .icon_container img {
     vertical-align: middle;
     max-width: 24px !important;
@@ -1273,9 +1302,18 @@ a.add-datalayer:hover,
 .umap-circle-icon {
     border: 1px solid white;
     border-radius: 10px 10px 10px 10px;
+    margin-left: -6px;
+    margin-top: -6px;
     height: 12px;
     width: 12px;
 }
+.umap-circle-icon.umap-icon-active {
+    height: 16px;
+    margin-left: -8px;
+    margin-top: -8px;
+    opacity: 1.0!important;
+    width: 16px;
+}
 .umap-ball-icon .icon_container {
     background-color: darkblue;
     background: radial-gradient(circle at 6px 38% , white -4px, darkblue 8px) repeat scroll 0 0 transparent;
@@ -1286,6 +1324,15 @@ a.add-datalayer:hover,
     text-align: center;
     width: 16px;
 }
+.umap-ball-icon.umap-icon-active .icon_container {
+    border-radius: 10px 10px 10px 10px;
+    box-shadow: 1px 23px 7px -1px black;
+    margin-left: -2px;
+    margin-top: -4px;
+    height: 20px;
+    opacity: 1.0!important;
+    width: 20px;
+}
 .umap-ball-icon .icon_arrow {
     background-color: black;
     height: 16px;
@@ -1295,6 +1342,10 @@ a.add-datalayer:hover,
     top: -1px;
     width: 2px;
 }
+.umap-icon-active {
+    z-index: 9500!important;
+    opacity: 1.0!important;
+}
 .umap-edit-enabled .readonly {
     cursor: not-allowed;
 }

umap/static/umap/test/Feature.js

@@ -223,6 +223,35 @@ describe('L.U.FeatureMixin', function () {
     })
   })
 
+  describe('#highlight()', function () {
+    it('should highlight marker on click', function () {
+      assert.notOk(qs('.umap-icon-active'))
+      happen.click(qs('div.leaflet-marker-icon'))
+      assert.ok(qs('.umap-icon-active'))
+      happen.click(qs('#map')) // Close popup
+      assert.notOk(qs('.umap-icon-active'))
+    })
+
+    it('should still highlight marker after hide() and show()', function () {
+      this.datalayer.hide()
+      this.datalayer.show()
+      happen.click(qs('div.leaflet-marker-icon'))
+      assert.ok(qs('.umap-icon-active'))
+    })
+
+    it('should highlight path', function () {
+      happen.click(qs('path[stroke-opacity="0.6"]'))
+      var path = qs('path[stroke-opacity="1"]')
+      assert.ok(path)
+    })
+
+    it('should highlight polygon', function () {
+      var path = qs('path[fill="DarkBlue"]')
+      happen.click(path)
+      assert.isAbove(path.attributes['fill-opacity'].value, 0.5)
+    })
+  })
+
   describe('#tooltip', function () {
     it('should have a tooltip when active and allow variables', function () {
       this.map.options.showLabel = true

umap/static/umap/test/Map.Export.js

@@ -64,6 +64,7 @@ describe('L.U.Map.Export', function () {
             properties: {
               _umap_options: {
                 fill: false,
+                opacity: 0.6,
               },
               name: 'test',
             },

umap/static/umap/test/_pre.js

@@ -92,14 +92,12 @@ var defaultDatalayerData = function (custom) {
     displayOnLoad: true,
     id: 62,
     pictogram_url: null,
-    opacity: null,
     weight: null,
     fillColor: '',
     color: '',
     stroke: true,
     smoothFactor: null,
     dashArray: '',
-    fillOpacity: null,
     fill: true,
   }
   return L.extend({}, _default, custom)
@@ -255,7 +253,7 @@ var RESPONSES = {
         },
         type: 'Feature',
         id: 20,
-        properties: { _umap_options: { fill: false }, name: 'test' },
+        properties: { _umap_options: { fill: false, opacity: 0.6 }, name: 'test' },
       },
       {
         geometry: {