diff --git a/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js b/src/visualizers/widgets/ArchEditor/ArchEditorWidget.js index 0576cb5..31276b2 100644 --- 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 index 94bff36..c91a846 100644 --- 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 index d02f62b..1971609 100644 --- 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; });