WIP #178 Fixed port color on change

deepforge-dev · Jun 2, 2016 · be1f6cd · be1f6cd
1 parent 70e69cf
commit be1f6cd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 21 deletions.
diff --git a/src/decorators/OperationDecorator/EasyDAG/OperationDecorator.EasyDAGWidget.js b/src/decorators/OperationDecorator/EasyDAG/OperationDecorator.EasyDAGWidget.js
@@ -95,11 +95,6 @@ define([
         });
     };
 
-    OperationDecorator.prototype.showAllPorts = function() {
-        this.showPorts(null, true);
-        this.showPorts(null, false);
-    };
-
     OperationDecorator.prototype.renderPort = function(port, x, y, isInput) {
         var color = this.PORT_COLOR.OPEN,
             portIcon = this.$ports.append('g');
@@ -136,11 +131,6 @@ define([
             .attr('id', 'ports');
     };
 
-    OperationDecorator.prototype._highlightPort = function(/*name*/) {
-        // Highlight port with the given name
-        // TODO
-    };
-
     OperationDecorator.prototype.getPortLocation = function(id, isInput) {
         // Report location of given port
         var ports = isInput ? this._node.inputs : this._node.outputs,
@@ -161,17 +151,6 @@ define([
         return null;
     };
 
-    OperationDecorator.prototype.unhighlightPort = function(/*name*/) {
-        // Highlight port with the given name
-        // TODO
-    };
-
-    OperationDecorator.prototype.onSelect =
-        OperationDecorator.prototype.showAllPorts;
-
-    OperationDecorator.prototype.onDeselect =
-        OperationDecorator.prototype.hidePorts;
-
     OperationDecorator.prototype.onPortClick = function() {
         // Overridden in the widget
     };

diff --git a/src/visualizers/widgets/PipelineEditor/OperationNode.js b/src/visualizers/widgets/PipelineEditor/OperationNode.js
@@ -12,6 +12,7 @@ define([
         DAGItem.call(this, parentEl, desc);
         this.inputs = desc.inputs;
         this.outputs = desc.outputs;
+        this._visiblePorts = null;
     };
 
     _.extend(OperationNode.prototype, DAGItem.prototype);
@@ -28,9 +29,22 @@ define([
         };
     };
 
+    // TODO: Change showPorts to just toggle the ports and show them on render
     OperationNode.prototype.showPorts = function(ids, areInputs) {
         this.decorator.hidePorts();
         this.decorator.showPorts(ids, areInputs);
+
+        if (arguments.length === 0) {  // Show all
+            this.decorator.showPorts(ids, !areInputs);
+        }
+
+        this._visiblePorts = arguments;
+    };
+
+    OperationNode.prototype.refreshPorts = function() {
+        if (this._visiblePorts) {
+            this.showPorts.apply(this, this._visiblePorts);
+        }
     };
 
     OperationNode.prototype.getPortLocation = function(id, isInput) {
@@ -43,6 +57,7 @@ define([
 
     OperationNode.prototype.hidePorts = function() {
         this.decorator.hidePorts();
+        this._visiblePorts = null;
     };
 
     OperationNode.prototype.updatePort = function(/*desc*/) {
@@ -53,5 +68,15 @@ define([
         // TODO
     };
 
+    OperationNode.prototype.onSelect = function() {
+        this.decorator.onSelect();
+        this.showPorts();
+    };
+
+    OperationNode.prototype.onDeselect = function() {
+        this.decorator.onDeselect();
+        this.hidePorts();
+    };
+
     return OperationNode;
 });
diff --git a/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js b/src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js
@@ -72,6 +72,8 @@ define([
             }
 
             dstPort.connection = desc.id;
+            // Update the given port...
+            dstItem.refreshPorts();
         }
     };
 
@@ -83,6 +85,8 @@ define([
             item.inputs.forEach(port => 
                 port.connection = this._connForPort[port.id]
             );
+            // Update the item's ports
+            item.refreshPorts();
         }
     };
 
@@ -95,6 +99,7 @@ define([
         if (dst) {
             port = dst.inputs.find(port => port.id === conn.dstPort);
             port.connection = null;
+            dst.refreshPorts();
         }
         EasyDAGWidget.prototype._removeConnection.call(this, id);
     };