Update hovered state in layers

src/dom_components/index.js

@@ -32,6 +32,8 @@
  * }
  * ...
  */
+import { isEmpty } from 'underscore';
+
 module.exports = () => {
   var c = {};
   let em;
@@ -190,6 +192,7 @@ module.exports = () => {
         c.am = em.get('AssetManager') || '';
         em.get('Parser').compTypes = componentTypes;
         em.on('change:selectedComponent', this.componentChanged, this);
+        em.on('change:componentHovered', this.componentHovered, this);
       }
 
       // Build wrapper
@@ -525,6 +528,27 @@ module.exports = () => {
         });
 
       model && model.set('status', 'selected');
+    },
+
+    /**
+     * Triggered when the component is hovered
+     * @private
+     */
+    componentHovered() {
+      const em = c.em;
+      const model = em.get('componentHovered');
+      const previous = em.previous('componentHovered');
+      const state = 'hovered';
+
+      // Deselect the previous component
+      previous &&
+        previous.get('status') == state &&
+        previous.set({
+          status: '',
+          state: ''
+        });
+
+      model && isEmpty(model.get('status')) && model.set('status', state);
     }
   };
 };

src/dom_components/view/ComponentView.js

@@ -99,14 +99,17 @@ module.exports = Backbone.View.extend({
    * @private
    * */
   updateStatus(e) {
-    var el = this.el;
-    var status = this.model.get('status');
-    var pfx = this.pfx;
-    var ppfx = this.ppfx;
-    var selectedCls = pfx + 'selected';
-    var selectedParentCls = selectedCls + '-parent';
-    var freezedCls = `${ppfx}freezed`;
-    this.$el.removeClass(`${selectedCls} ${selectedParentCls} ${freezedCls}`);
+    const em = this.em;
+    const el = this.el;
+    const status = this.model.get('status');
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    const selectedCls = `${pfx}selected`;
+    const selectedParentCls = `${selectedCls}-parent`;
+    const freezedCls = `${ppfx}freezed`;
+    const hoveredCls = `${ppfx}hovered`;
+    const toRemove = [selectedCls, selectedParentCls, freezedCls, hoveredCls];
+    this.$el.removeClass(toRemove.join(' '));
     var actualCls = el.getAttribute('class') || '';
     var cls = '';
 
@@ -123,6 +126,9 @@ module.exports = Backbone.View.extend({
       case 'freezed-selected':
         cls = `${actualCls} ${freezedCls} ${selectedCls}`;
         break;
+      case 'hovered':
+        cls = `${actualCls} ${hoveredCls}`;
+        break;
     }
 
     cls = cls.trim();

src/styles/scss/_gjs_layers.scss

@@ -90,6 +90,10 @@
       top: 0;
     }
 
+    &.#{$nv-prefix}hovered .#{$nv-prefix}layer-title {
+      background-color: rgba(255, 255, 255, 0.015);
+    }
+
     &.#{$nv-prefix}selected .#{$nv-prefix}layer-title {
       background-color: rgba(255, 255, 255, 0.1);
     }