Highlight relations when hovering over them in the raw membership dropdown list (close #2946)

modules/ui/combobox.js

@@ -25,6 +25,7 @@ export function uiCombobox(context, klass) {
     var _cancelFetch = false;
     var _minItems = 2;
     var _tDown = 0;
+    var _mouseEnterHandler, _mouseLeaveHandler;
 
     var _fetcher = function(val, cb) {
         cb(_data.filter(function(d) {
@@ -380,6 +381,8 @@ export function uiCombobox(context, klass) {
                 .attr('class', 'combobox-option')
                 .attr('title', function(d) { return d.title; })
                 .text(function(d) { return d.display || d.value; })
+                .on('mouseenter', _mouseEnterHandler)
+                .on('mouseleave', _mouseLeaveHandler)
                 .merge(options)
                 .classed('selected', function(d) { return d.value === _selected; })
                 .on('click.combo-option', accept)
@@ -467,6 +470,17 @@ export function uiCombobox(context, klass) {
         return combobox;
     };
 
+    combobox.itemsMouseEnter = function(val) {
+        if (!arguments.length) return _mouseEnterHandler;
+        _mouseEnterHandler = val;
+        return combobox;
+    };
+
+    combobox.itemsMouseLeave = function(val) {
+        if (!arguments.length) return _mouseLeaveHandler;
+        _mouseLeaveHandler = val;
+        return combobox;
+    };
 
     return utilRebind(combobox, dispatch, 'on');
 }

modules/ui/raw_membership_editor.js

@@ -24,7 +24,13 @@ export function uiRawMembershipEditor(context) {
     var taginfo = services.taginfo;
     var nearbyCombo = uiCombobox(context, 'parent-relation')
         .minItems(1)
-        .fetcher(fetchNearbyRelations);
+        .fetcher(fetchNearbyRelations)
+        .itemsMouseEnter(function(d) {
+            utilHighlightEntities([d.relation.id], true, context);
+        })
+        .itemsMouseLeave(function(d) {
+            utilHighlightEntities([d.relation.id], false, context);
+        });
     var _inChange = false;
     var _entityID;
     var _showBlank;
@@ -359,6 +365,9 @@ export function uiRawMembershipEditor(context) {
                     cancelEntity();
                     return;
                 }
+                // remove hover-higlighting
+                utilHighlightEntities([d.relation.id], false, context);
+
                 var role = list.selectAll('.member-row-new .member-role').property('value');
                 addMembership(d, role);
             }
@@ -367,6 +376,10 @@ export function uiRawMembershipEditor(context) {
             function cancelEntity() {
                 var input = newMembership.selectAll('.member-entity-input');
                 input.property('value', '');
+                
+                // remove hover-higlighting
+                context.surface().selectAll('.highlighted')
+                    .classed('highlighted', false);
             }