Support hovering on data features

css/65_data.css

@@ -60,12 +60,18 @@
 }
 
 .layer-mapdata path.shadow {
+    pointer-events: stroke;
     stroke: #f6634f;
     stroke-width: 16;
     stroke-opacity: 0;
     fill: none;
 }
-.layer-mapdata path.shadow.related:not(.selected),
+.layer-mapdata path.MultiPoint.shadow,
+.layer-mapdata path.Point.shadow {
+    pointer-events: fill;
+    fill: #f6634f;
+    fill-opacity: 0;
+}
 .layer-mapdata path.shadow.hover:not(.selected) {
     stroke-opacity: 0.4;
 }
@@ -97,6 +103,10 @@
 .layer-mapdata text.label {
     fill: #ff26d4;
 }
+.layer-mapdata text.label.hover,
+.layer-mapdata text.label.selected {
+    fill: #f6634f;
+}
 .layer-mapdata text.label-halo {
     opacity: 0.7;
     stroke: #000;

modules/behavior/hover.js

@@ -110,13 +110,32 @@ export function behaviorHover(context) {
             _selection.selectAll('.hover-suppressed')
                 .classed('hover-suppressed', false);
 
-            var entity;
-            if (datum instanceof osmNote || datum instanceof osmEntity) {
+            // What are we hovering over?
+            var entity, selector;
+            if (datum && datum.__featurehash__) {
                 entity = datum;
-            } else {
-                entity = datum && datum.properties && datum.properties.entity;
+                selector = '.data' + datum.__featurehash__;
+
+            } else if (datum instanceof osmNote) {
+                entity = datum;
+                selector = '.note-' + datum.id;
+
+            } else if (datum instanceof osmEntity) {
+                entity = datum;
+                selector = '.' + entity.id;
+                if (entity.type === 'relation') {
+                    entity.members.forEach(function(member) { selector += ', .' + member.id; });
+                }
+
+            } else if (datum && datum.properties && (datum.properties.entity instanceof osmEntity)) {
+                entity = datum.properties.entity;
+                selector = '.' + entity.id;
+                if (entity.type === 'relation') {
+                    entity.members.forEach(function(member) { selector += ', .' + member.id; });
+                }
             }
 
+            // Update hover state and dispatch event
             if (entity && entity.id !== _newId) {
                 // If drawing a way, don't hover on a node that was just placed. #3974
                 var mode = context.mode() && context.mode().id;
@@ -125,24 +144,11 @@ export function behaviorHover(context) {
                     return;
                 }
 
-                var selector =  (datum instanceof osmNote) ? 'note-' + entity.id : '.' + entity.id;
-
-                if (entity.type === 'relation') {
-                    entity.members.forEach(function(member) {
-                        selector += ', .' + member.id;
-                    });
-                }
-
                 var suppressed = _altDisables && d3_event && d3_event.altKey;
-
                 _selection.selectAll(selector)
                     .classed(suppressed ? 'hover-suppressed' : 'hover', true);
 
-                if (datum instanceof osmNote) {
-                    dispatch.call('hover', this, !suppressed && entity);
-                } else {
-                    dispatch.call('hover', this, !suppressed && entity.id);
-                }
+                dispatch.call('hover', this, !suppressed && entity);
 
             } else {
                 dispatch.call('hover', this, null);

modules/svg/data.js

@@ -170,8 +170,9 @@ export function svgData(projection, context, dispatch) {
         return [
             'data' + d.__featurehash__,
             d.geometry.type,
+            isPolygon(d) ? 'area' : '',
             d.__layerID__ || ''
-        ].join(' ');
+        ].filter(Boolean).join(' ');
     }
 
 
@@ -228,7 +229,7 @@ export function svgData(projection, context, dispatch) {
            .attr('d', getPath);
 
 
-       // Draw fill, shadow, stroke layers
+        // Draw fill, shadow, stroke layers
         var datagroups = layer
             .selectAll('g.datagroup')
             .data(['fill', 'shadow', 'stroke']);
@@ -239,7 +240,7 @@ export function svgData(projection, context, dispatch) {
             .merge(datagroups);
 
 
-       // Draw paths
+        // Draw paths
         var pathData = {
             shadow: geoData,
             stroke: geoData,
@@ -259,8 +260,7 @@ export function svgData(projection, context, dispatch) {
             .append('path')
             .attr('class', function(d) {
                 var datagroup = this.parentNode.__data__;
-                var area = (datagroup === 'fill' ? 'area ' : '');
-                return 'pathdata ' + area + datagroup + ' ' + featureClasses(d);
+                return 'pathdata ' + datagroup + ' ' + featureClasses(d);
             })
             .attr('clip-path', function(d) {
                 var datagroup = this.parentNode.__data__;

modules/ui/sidebar.js

@@ -2,7 +2,7 @@ import _throttle from 'lodash-es/throttle';
 
 import { selectAll as d3_selectAll } from 'd3-selection';
 
-import { osmNote } from '../osm';
+import { osmEntity, osmNote } from '../osm';
 import { uiFeatureList } from './feature_list';
 import { uiInspector } from './inspector';
 import { uiNoteEditor } from './note_editor';
@@ -13,7 +13,6 @@ export function uiSidebar(context) {
     var noteEditor = uiNoteEditor(context);
     var _current;
     var _wasNote = false;
-    // var layer = d3_select(null);
 
 
     function sidebar(selection) {
@@ -22,26 +21,27 @@ export function uiSidebar(context) {
             .attr('class', 'feature-list-pane')
             .call(uiFeatureList(context));
 
-
         var inspectorWrap = selection
             .append('div')
             .attr('class', 'inspector-hidden inspector-wrap fr');
 
 
-        function hover(what) {
-            if ((what instanceof osmNote) && (context.mode().id !== 'drag-note')) {
-                // TODO: figure out why `what` isn't an updated note. Won't hover since .loc doesn't match
-                _wasNote = true;
-                var notes = d3_selectAll('.note');
-                notes
-                    .classed('hover', function(d) { return d === what; });
+        function hover(datum) {
+            if (datum && datum.__featurehash__) {   // hovering on data
+                console.log ('hover on data ' + datum.__featurehash__);
+                // show something
 
-                sidebar.show(noteEditor.note(what));
+            } else if (datum instanceof osmNote) {
+                if (context.mode().id === 'drag-note') return;
+                _wasNote = true;
+
+                sidebar
+                    .show(noteEditor.note(datum));
 
                 selection.selectAll('.sidebar-component')
                     .classed('inspector-hover', true);
 
-            } else if (!_current && context.hasEntity(what)) {
+            } else if (!_current && (datum instanceof osmEntity)) {
                 featureListWrap
                     .classed('inspector-hidden', true);
 
@@ -49,10 +49,10 @@ export function uiSidebar(context) {
                     .classed('inspector-hidden', false)
                     .classed('inspector-hover', true);
 
-                if (inspector.entityID() !== what || inspector.state() !== 'hover') {
+                if (inspector.entityID() !== datum.id || inspector.state() !== 'hover') {
                     inspector
                         .state('hover')
-                        .entityID(what);
+                        .entityID(datum.id);
 
                     inspectorWrap
                         .call(inspector);