WIP #178 Added conn deletion

src/decorators/OperationDecorator/EasyDAG/OperationDecorator.EasyDAGWidget.js

@@ -38,7 +38,7 @@ define([
     OperationDecorator.prototype.DECORATOR_ID = DECORATOR_ID;
     OperationDecorator.prototype.PORT_COLOR = {
         OPEN: '#90caf9',
-        OCCUPIED: '#616161'
+        OCCUPIED: '#e57373'
     };
     OperationDecorator.prototype.condense = function() {
         var path,
@@ -105,7 +105,7 @@ define([
             portIcon = this.$ports.append('g');
 
         // If the port is incoming and occupied, render it differently
-        if (isInput && port.source) {
+        if (isInput && port.connection) {
             color = this.PORT_COLOR.OCCUPIED;
         }
 

src/visualizers/panels/PipelineEditor/PipelineEditorControl.js

@@ -109,6 +109,7 @@ define([
         EasyDAGControl.prototype._initWidgetEventHandlers.call(this);
         this._widget.getExistingPortMatches = this.getExistingPortMatches.bind(this);
         this._widget.createConnection = this.createConnection.bind(this);
+        this._widget.removeConnection = this.removeConnection.bind(this);
     };
 
     PipelineEditorControl.prototype.isContainedInActive = function (gmeId) {
@@ -192,6 +193,24 @@ define([
             });
     };
 
+    PipelineEditorControl.prototype.removeConnection = function (id) {
+        var conn = this._client.getNode(id),
+            names,
+            msg;
+
+        names = ['src', 'dst']  // srcPort, srcOp, dstPort, dstOp
+            .map(type => conn.getPointer(type).to)
+            .map(portId => [portId, this.getSiblingContaining(portId)])
+            .reduce((l1, l2) => l1.concat(l2))
+            .map(id => this._client.getNode(id));
+
+        msg = `Disconnecting ${names[0]} of ${names[1]} from ${names[2]} of ${names[3]}`;
+
+        this._client.startTransaction(msg);
+        this._client.delMoreNodes([id]);
+        this._client.completeTransaction();
+    };
+
     PipelineEditorControl.prototype.getExistingPortMatches = function (portId, isOutput) {
         // Get the children nodeIds
         var childrenIds = this._client.getNode(this._currentNodeId).getChildrenIds(),
@@ -228,7 +247,6 @@ define([
 
         return opNodes
             .map(getNodes)  // Get all valid src/dst ports
-            //.reduce((l1, l2) => l1.concat(l2), [])
             .filter(tuple => tuple[1].length);
     };
 
@@ -239,7 +257,8 @@ define([
 
         names = [srcId, dstId]  // srcPort, srcOp, dstPort, dstOp
             .map(id => [id, this.getSiblingContaining(srcId)])
-            .map(ids => ids.map(id => this._client.getNode(id)));
+            .reduce((l1, l2) => l1.concat(l2))
+            .map(id => this._client.getNode(id));
 
         msg = `Connecting ${names[0]} of ${names[1]} to ${names[2]} of ${names[4]}`;
 

src/visualizers/widgets/PipelineEditor/OperationNode.js

@@ -10,14 +10,21 @@ define([
     'use strict';
     var OperationNode = function(parentEl, desc) {
         DAGItem.call(this, parentEl, desc);
+        this.inputs = desc.inputs;
+        this.outputs = desc.outputs;
     };
 
     _.extend(OperationNode.prototype, DAGItem.prototype);
 
     OperationNode.prototype.setupDecoratorCallbacks = function() {
         DAGItem.prototype.setupDecoratorCallbacks.call(this);
         this.decorator.onPortClick = (id, portId, isSrc) => {
-            this.connectPort(id, portId, isSrc);
+            var srcPort = this.inputs.find(port => port.id === portId);
+            if (srcPort && srcPort.connection) {
+                this.disconnectPort(portId, srcPort.connection);
+            } else {
+                this.connectPort(id, portId, isSrc);
+            }
         };
     };
 

src/visualizers/widgets/PipelineEditor/PipelineEditorWidget.js

@@ -33,6 +33,7 @@ define([
         this.$el.addClass(WIDGET_CLASS);
         this.portIdToNode = {};
         this.PORT_STATE = STATE.DEFAULT;
+        this._connForPort = {};
         this._itemsShowingPorts = [];
     };
 
@@ -47,9 +48,55 @@ define([
         EasyDAGWidget.prototype.setupItemCallbacks.call(this);
         this.ItemClass.prototype.connectPort =
             PipelineEditorWidget.prototype.connectPort.bind(this);
+        this.ItemClass.prototype.disconnectPort =
+            PipelineEditorWidget.prototype.disconnectPort.bind(this);
     };
 
     //////////////////// Port Support ////////////////////
+    PipelineEditorWidget.prototype.addConnection = function(desc) {
+        EasyDAGWidget.prototype.addConnection.call(this, desc);
+        // Record the connection with the input (dst) port
+        var dstItem = this.items[desc.dst],
+            dstPort;
+
+        this._connForPort[desc.dstPort] = desc.id;
+        if (dstItem) {
+            dstPort = dstItem.inputs.find(port => port.id === desc.dstPort);
+
+            if (!dstPort) {
+                this._logger.error(`Could not find port ${desc.dstPort}`);
+                return;
+            }
+
+            dstPort.connection = desc.id;
+        }
+    };
+
+    PipelineEditorWidget.prototype.addNode = function(desc) {
+        EasyDAGWidget.prototype.addNode.call(this, desc);
+        // Update the input port connections (if not connection)
+        var item = this.items[desc.id];
+        if (item) {
+            item.inputs.forEach(port => 
+                port.connection = this._connForPort[port.id]
+            );
+        }
+    };
+
+    PipelineEditorWidget.prototype._removeConnection = function(id) {
+        // Update the input node (dstPort)
+        var conn = this.connections[id].desc,
+            dst = this.items[conn.dst],
+            port;
+
+        if (dst) {
+            port = dst.inputs.find(port => port.id === conn.dstPort);
+            port.connection = null;
+        }
+        EasyDAGWidget.prototype._removeConnection.call(this, id);
+    };
+
+    // May not actually need these port methods
     PipelineEditorWidget.prototype.addPort = function(desc) {
         this.items[desc.nodeId].addPort(desc);
         this.portIdToNode[desc.id] = desc.nodeId;
@@ -77,6 +124,12 @@ define([
         }
     };
 
+    PipelineEditorWidget.prototype.disconnectPort = function(portId, connId) {
+        // Get the src, dst ports (used for better commit messages)
+        // TODO
+        this.removeConnection(connId);
+    };
+
     PipelineEditorWidget.prototype.connectPort = function(nodeId, id, isOutput) {
         console.log('port ' + id + ' has been clicked! (', isOutput, ')');
         if (this.PORT_STATE === STATE.DEFAULT) {