Merge pull request #14 from Huzifa1/master

Added Predefined Connection Configurations

css/application.css

@@ -129,4 +129,55 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', end
 
 rect.draw2d_ResizeHandle {
   display: none;
+}
+
+
+/******************************************************************
+ * CSS for custom menu
+ ******************************************************************/
+
+.custom-menu {
+  margin: 0;
+  display: none;
+  z-index: 1000;
+  position: absolute;
+  overflow: hidden;
+  border: 1px solid #CCC;
+  white-space: nowrap;
+  font-family: sans-serif;
+  background: #FFF;
+  color: #333;
+  border-radius: 5px;
+  padding: 0;
+}
+
+.custom-menu .title {
+  padding: 8px 12px;
+  font-size: 13px;
+  color: rgb(61, 113, 130);
+  border-bottom: 1px solid #CCC;
+}
+
+.custom-menu ul {
+  margin: 0;
+  padding: 0;
+}
+
+/* Each of the items in the list */
+.custom-menu li {
+  padding: 8px 12px;
+  cursor: pointer;
+  list-style-type: none;
+  transition: all .3s ease;
+  user-select: none;
+}
+
+.custom-menu li.clear {
+  border-top: 1px solid #CCC;
+  color: red;
+
+}
+
+.custom-menu li:hover {
+  background-color: #DEF;
 }

gui/HoverConnection.js

@@ -2,6 +2,108 @@ var defaultRouterClassName = "draw2d.layout.connection.SplineConnectionRouter";
 var defaultRouter = new draw2d.layout.connection.SplineConnectionRouter();
 
 
+function showCustomConfigs(x, y, connection) {
+
+    let canvas = connection.getCanvas();
+
+    // If the document is clicked somewhere
+    $(document).bind("mousedown", function (e) {
+        // If the clicked element is not the menu, hide the menu
+        // and remove the config connection
+        if (!$(e.target).parents(".custom-menu.mult").length > 0) {
+            $(".custom-menu.mult").hide(100);
+            // Also remove it from the stack
+            canvas.getCommandStack().undostack.pop();
+            canvas.remove(connection);
+
+            $(document).unbind("mousedown");
+            $(".custom-menu.mult li").unbind("click");
+        }
+    });
+
+    // If the menu element is clicked
+    $(".custom-menu.mult li").one("click", function () {
+        // Get the nodes
+        let node1 = connection.sourcePort.parent;
+        let node2 = connection.targetPort.parent;
+
+        // Check if either nodes has connections and display 
+        // a warning message, if accepted, then remove all
+        // current connections
+        let node1_connections = node1.getAllConnections();
+        let node2_connections = node2.getAllConnections();
+
+        let continueAction = true;
+
+        if ((node1 instanceof NodeShape && node1_connections.length) || (node2 instanceof NodeShape && node2_connections.length)) {
+            continueAction = confirm("The current connections will be overrided, do you want to continue?");
+        }
+
+        // Remove the config connection from the commands stack
+        canvas.getCommandStack().undostack.pop();
+
+        if (!continueAction) {
+            // Remove the config connection
+            canvas.remove(connection);
+            return;
+        }
+
+        // Delete current connections if it's not a switch
+        if (node1 instanceof NodeShape) {
+            delete_connections(node1_connections, canvas);
+        }
+        if (node2 instanceof NodeShape) {
+            delete_connections(node2_connections, canvas);
+        }
+
+        // This is the triggered action name
+        switch ($(this).attr("data-action")) {
+            // Connect the nodes based on the action
+            case "one-by-one":
+                if (node1 instanceof NodeShape && node2 instanceof NodeShape) {
+                    connectBasedOnConfig([node1, node2], "one-by-one");
+                } else {
+                    // One of the nodes is a switch
+
+                    let node = node1;
+                    let eth_switch = node2;
+
+                    if (node1 instanceof SwitchShape) {
+                        node = node2;
+                        eth_switch = node1;
+                    }
+
+                    connectBasedOnConfig([node], "one-by-one", eth_switch)
+                }
+
+                break;
+            case "second":
+                alert("second");
+                break;
+            case "third":
+                alert("Third");
+                break;
+        }
+
+        // Remove the config connection without adding it to the command stack
+        canvas.remove(connection);
+
+
+        // Hide it AFTER the action was triggered
+        $(".custom-menu.mult").hide(100);
+        $(document).unbind("mousedown");
+        $(".custom-menu.mult li").unbind("click");
+    });
+
+
+
+    $(".custom-menu.mult").finish().toggle(100).css({
+        top: y + "px",
+        left: x + "px"
+    });
+}
+
+
 var HoverConnection = draw2d.Connection.extend({
 
     init: function (sourcePort, targetPort) {
@@ -17,6 +119,15 @@ var HoverConnection = draw2d.Connection.extend({
             color: "b9dd69"
         });
 
+        // Show custom configs only for config ports 
+        setTimeout(() => {
+            if (self.sourcePort.name.includes("config_port")) {
+                let x = this.start.x - 60 + ((this.end.x - this.start.x) / 2)
+                let y = this.start.y + ((this.end.y - this.start.y) / 2)
+                showCustomConfigs(x, y, self);
+            }
+        }, 10);
+
         // this.installEditPolicy(new SelectionMenuPolicy());
 
         // this.on("dragEnter", function (emitter, event) {

gui/NodeShape.js

@@ -105,13 +105,30 @@ ChannelShape = draw2d.shape.basic.Label.extend({
 
 
         port.on("dragstart", function (e) {
+            toggle_config_ports(app.view.figures.data, false);
+
             if (siblingChannel) {
                 siblingChannel.setVisible(true)
                 siblingChannel.setVisible(true)
             }
+
+            // Intel nodes cannot connect to a switch so if I am
+            // an intel node, then hide all switch ports
+            // Loop over all figures and all ports and hide all config ports            
+            if (self.getFPGA().getNode().getType() == "Intel") {
+                toggle_all_switch_ports(app.view.figures.data, false)
+            }
+
         }, port);
         port.on("dragend", function () {
+            toggle_config_ports(app.view.figures.data, true);
+
             if (siblingChannel) siblingChannel.setVisible(false)
+
+            // Show switch ports again
+            if (self.getFPGA().getNode().getType() == "Intel") {
+                toggle_all_switch_ports(app.view.figures.data, true)
+            }
         }, port);
 
         // this.orientation = attr.orientation;
@@ -291,7 +308,7 @@ FPGAShape = draw2d.shape.layout.FlexGridLayout.extend({
     getChannelFromFpgalink: function (string_channel, isSibling) {
         // ch0, ch1, ch2, ch3"
         // n00, ..
-        
+
         var num = parseInt(string_channel.substring(2)) * 2 + (isSibling ? 0 : 1);
         return this.getChildren().get(1).getChildren().get(num);
     },
@@ -330,7 +347,7 @@ FPGAShape = draw2d.shape.layout.FlexGridLayout.extend({
         this.fpgaLabel.__cellConstraint.row = prop.labelRow;
         this.channelLayout.__cellConstraint.row = prop.channelLayoutRow;
 
-        
+
 
         gridDef[`def_${prop.arrangement[0]}s`] = Array(1).fill(-1);
         gridDef[`def_${prop.arrangement[1]}s`] = Array(this.getChannels().getSize() / 2).fill(-1);
@@ -360,28 +377,34 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
             labelRow: 0,
             fpgaLayoutRow: 1,
             arrangement: ["row", "col"],
+            port_locator: new draw2d.layout.locator.XYRelPortLocator(100, 10)
         },
         [OrientationEnum.east]: {
             // labelPadding: {left: 25, right: 25},
             labelRow: 0,
             fpgaLayoutRow: 1,
             arrangement: ["col", "row"],
+            port_locator: new draw2d.layout.locator.XYRelPortLocator(101, 3)
         },
         [OrientationEnum.south]: {
             // labelPadding: {left: 100, right: 100},
             labelRow: 1,
             fpgaLayoutRow: 0,
             arrangement: ["row", "col"],
+            port_locator: new draw2d.layout.locator.XYRelPortLocator(100, 90)
         },
         [OrientationEnum.west]: {
             // labelPadding: {left: 25, right: 25},
             labelRow: 0,
             fpgaLayoutRow: 1,
             arrangement: ["col", "row"],
+            port_locator: new draw2d.layout.locator.XYRelPortLocator(0, 3)
         },
     }),
 
     init: function (attr) {
+        let self = this;
+
         this._super($.extend({
             bgColor: "#dbddde",
             color: "#d7d7d7",
@@ -414,6 +437,23 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
 
         this.installEditPolicy(new SelectionMenuPolicy());
         this.orientation = orientation;
+
+
+
+        let config_port = this.createPort("hybrid", prop.port_locator);
+        config_port.setName("config_port_" + this.id);
+        config_port.setMaxFanOut(1);
+        config_port.setName(`config_port_` + this.id);
+        config_port.setBackgroundColor("#00FF00");
+        config_port.setColor("#000000");
+
+        config_port.on("dragstart", function (e) {
+            toggle_non_config_ports(app.view.figures.data, "hide", self.getType());
+        }, config_port);
+
+        config_port.on("dragend", function () {
+            toggle_non_config_ports(app.view.figures.data, "show", self.getType());
+        }, config_port);
     },
 
     addFPGA: function (string_acl, channelsCount) {
@@ -459,6 +499,8 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
             fpga.setOrientation(orientation, false);
         });
 
+        this.getHybridPort(0).setLocator(prop.port_locator);
+
         this.height = 0;
         this.width = 0;
 
@@ -476,6 +518,40 @@ NodeShape = draw2d.shape.layout.FlexGridLayout.extend({
         return this.orientation;
     },
 
+    getType: function () {
+        return this.getFPGAs().data.length == 3 ? "Xilinx" : "Intel";
+    },
+
+    getChannelPorts: function () {
+        let ports = [];
+
+        let fpgas = this.getFPGAs().data;
+        for (let j = 0; j < fpgas.length; j++) {
+            const fpga = fpgas[j];
+            let channels = fpga.getChannels().data;
+
+            for (let k = 0; k < channels.length; k++) {
+                const channel = channels[k];
+                ports.push(...channel.hybridPorts.data);
+            }
+        }
+
+        return ports;
+    },
+
+    getAllConnections: function () {
+        let connections = [];
+
+        let ports = this.getChannelPorts();
+        for (let i = 0; i < ports.length; i++) {
+            const p = ports[i];
+
+            connections.push(...p.connections.data);
+        }
+
+        return connections;
+    },
+
     getFPGAFromFpgalink: function (string_acl) {
         // acl0 = FPGA 0
         // acl1 = FPGA 1