Added hover buttons to operation in op int editor. Fixes #1020 (#1021)

* WIP Added some hover handlers * WIP #1020 Finished the hover handling for the op int editor
deepforge-dev · Apr 28, 2017 · 4c876dd · 4c876dd
1 parent 236c1aa
commit 4c876dd
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js b/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js
@@ -61,9 +61,11 @@ define([
             var layer = this;
             this._widget.showHoverButtons(layer);
         };
+
         this.ItemClass.prototype.hideHoverButtons = function() {
             this._widget.hideHoverButtons();
         };
+
         this.ItemClass.prototype.isHoverAllowed = function() {
             return !this._widget.isConnecting();
         };

diff --git a/src/visualizers/widgets/OperationInterfaceEditor/Item.js b/src/visualizers/widgets/OperationInterfaceEditor/Item.js
@@ -11,6 +11,9 @@ define([
         DAGItem.call(this, parentEl, desc);
         this.decorator.color = desc.displayColor || this.decorator.color;
 
+        this._hovering = false;
+        this.$el.on('mouseenter', () => this.onHover());
+        this.$el.on('mouseleave', () => this._hovering && this.onUnhover());
 
         // Show the warnings
         this.$warning = null;
@@ -19,6 +22,18 @@ define([
     };
 
     _.extend(Item.prototype, DAGItem.prototype);
+
+    Item.prototype.onUnhover = function() {
+        this._hovering = false;
+        this.hideHoverButtons();
+    };
+
+    Item.prototype.onHover = function() {
+        if (!this.isSelected()) {
+            this._hovering = true;
+            this.showHoverButtons();
+        }
+    };
 
     Item.prototype.update = function(desc) {
         this.decorator.color = desc.displayColor || this.decorator.color;
@@ -82,6 +97,10 @@ define([
         if (this.desc.isUnknown) {
             this.onSetRefClicked(this.desc.name);
         }
+
+        if (this._hovering) {
+            this.onUnhover();
+        }
     };
 
     Item.prototype.setupDecoratorCallbacks = function() {

diff --git a/src/visualizers/widgets/OperationInterfaceEditor/OperationInterfaceEditorWidget.js b/src/visualizers/widgets/OperationInterfaceEditor/OperationInterfaceEditorWidget.js
@@ -6,6 +6,7 @@ define([
     'widgets/EasyDAG/EasyDAGWidget',
     'widgets/EasyDAG/AddNodeDialog',
     './SelectionManager',
+    './Buttons',
     './Item',
     'underscore',
     'css!./styles/OperationInterfaceEditorWidget.css'
@@ -14,6 +15,7 @@ define([
     EasyDAG,
     AddNodeDialog,
     SelectionManager,
+    Buttons,
     Item,
     _
 ) {
@@ -38,6 +40,20 @@ define([
         // Add ptr rename callback
         this.ItemClass.prototype.changePtrName = (from, to) => this.changePtrName(from, to);
         this.ItemClass.prototype.onSetRefClicked = OperationInterfaceEditorWidget.prototype.onSetRefClicked.bind(this);
+
+        this.ItemClass.prototype.showHoverButtons = function() {
+            var item = this;
+            this._widget.showHoverButtons(item);
+        };
+
+        this.ItemClass.prototype.hideHoverButtons = function() {
+            this._widget.hideHoverButtons();
+        };
+
+        this.ItemClass.prototype.isHoverAllowed = function() {
+            return true;
+        };
+
     };
 
     OperationInterfaceEditorWidget.prototype.onAddItemSelected = function(selected, isInput) {
@@ -126,5 +142,57 @@ define([
         conn.$el.on('click', null);
     };
 
+    // Hover buttons
+    OperationInterfaceEditorWidget.prototype.showHoverButtons = function(item) {
+        var dataNodes = this.allDataTypeIds(),
+            refNodes = this.allValidReferences(),
+            height = item.height,
+            cx = item.width/2;
+
+        if (this.$hoverBtns) {
+            this.hideHoverButtons();
+        }
+
+        this.$hoverBtns = item.$el
+            .append('g')
+            .attr('class', 'hover-container');
+
+        if (item.desc.baseName === 'Operation') {
+            new Buttons.AddOutput({  // Add output data
+                context: this,
+                $pEl: this.$hoverBtns,
+                disabled: dataNodes.length === 0,
+                item: item,
+                x: cx,
+                y: height
+            });
+
+            new Buttons.AddInput({  // Add input data
+                context: this,
+                $pEl: this.$hoverBtns,
+                disabled: dataNodes.length === 0,
+                item: item,
+                x: item.width/3,
+                y: 0
+            });
+
+            new Buttons.AddRef({  // Add reference
+                context: this,
+                $pEl: this.$hoverBtns,
+                disabled: refNodes.length === 0,
+                item: item,
+                x: 2*item.width/3,
+                y: 0
+            });
+        }
+    };
+
+    OperationInterfaceEditorWidget.prototype.hideHoverButtons = function() {
+        if (this.$hoverBtns) {
+            this.$hoverBtns.remove();
+            this.$hoverBtns = null;
+        }
+    };
+
     return OperationInterfaceEditorWidget;
 });