Merge pull request #7628 from jgscherber/2949-highlight-selection-list

Add highlight to multi-select sidebar on hover of entity

css/80_app.css

@@ -945,6 +945,9 @@ a.hide-toggle {
         background-color: #ececec;
     }
 }
+.feature-list-item.hover {
+    background-color: #ececec;
+}
 .feature-list-item button {
     background: transparent;
 }

modules/modes/select.js

@@ -41,7 +41,7 @@ export function modeSelect(context, selectedIDs) {
     var behaviors = [
         behaviorPaste(context),
         breatheBehavior,
-        behaviorHover(context),
+        behaviorHover(context).on('hover', context.ui().sidebar.hoverModeSelect),
         behaviorSelect(context),
         behaviorLasso(context),
         modeDragNode(context).restoreSelectedIDs(selectedIDs).behavior,

modules/ui/sidebar.js

@@ -153,6 +153,24 @@ export function uiSidebar(context) {
             .append('div')
             .attr('class', 'inspector-hidden inspector-wrap fr');
 
+        var hoverModeSelect = function(datum) {
+            context.container().selectAll('.feature-list-item').classed('hover', false);
+
+            if (context.mode().selectedIDs().length > 1 
+                && (datum instanceof osmEntity)){
+                
+                var elements = context.container().selectAll('.feature-list-item')
+                    .filter(function (node) {
+                        return node.id === datum.id;
+                });
+                
+                if (!elements.empty()){
+                    elements.classed('hover', true);
+                }
+            }
+        }
+
+        sidebar.hoverModeSelect = _throttle(hoverModeSelect, 200);
 
         function hover(datum) {
             if (datum && datum.__featurehash__) {   // hovering on data