Add the following features:

1) Different tutorials to explain the functionality of the tool
2) Add options (Rotate, delete, change color) to Labels
3) Export SVG now downloads the file directly

css/application.css

@@ -86,12 +86,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', end
  padding:10px;
  cursor:move;
  width:90px;
- margin: 30px auto 30px auto;
+ margin: 15px auto 15px auto;
  text-align:center;
- align:center;
  border-radius: 5px;
 }
 
+.tutorial-btn {
+  margin-bottom: 15px;
+}
+
 .shadow {
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
@@ -158,6 +161,13 @@ rect.draw2d_ResizeHandle {
   border-bottom: 1px solid #CCC;
 }
 
+.custom-menu.label .title {
+  padding: 4px 6px;
+  font-size: 11px;
+  color: rgb(61, 113, 130);
+  border-bottom: 1px solid #CCC;
+}
+
 .custom-menu ul {
   margin: 0;
   padding: 0;
@@ -172,6 +182,11 @@ rect.draw2d_ResizeHandle {
   user-select: none;
 }
 
+.custom-menu.label li {
+  padding: 4px 6px;
+  font-size: 12px;
+}
+
 .custom-menu li.clear {
   border-top: 1px solid #CCC;
   color: red;
@@ -180,4 +195,14 @@ rect.draw2d_ResizeHandle {
 
 .custom-menu li:hover {
   background-color: #DEF;
+}
+
+/******************************************************************
+ * CSS for Tutorial
+ ******************************************************************/
+.pointer-none,
+.pointer-none *,
+.to-be-deleted,
+.to-be-deleted * {
+  pointer-events: none !important;
 }

gui/HoverConnection.js

@@ -76,12 +76,6 @@ function showCustomConfigs(x, y, connection) {
                     connectBasedOnConfig([node], "one-by-one", eth_switch)
                 }
 
-                break;
-            case "second":
-                alert("second");
-                break;
-            case "third":
-                alert("Third");
                 break;
         }
 

gui/Label.js

@@ -0,0 +1,63 @@
+Label = draw2d.shape.basic.Label.extend({
+    NAME: "Label",
+
+    ORIENTATION_PROPERTIES: Object.freeze({
+        [OrientationEnum.north]: {
+            "rotationAngle": 0,
+            "padding": { left: 10, top: 5, right: 10, bottom: 5 },
+            "locator": new draw2d.layout.locator.BottomLocator(),
+        },
+        [OrientationEnum.east]: {
+            "rotationAngle": -90,
+            "padding": { left: 10, top: 5, right: 10, bottom: 5 },
+            "locator": new draw2d.layout.locator.RightLocator(),
+        },
+        [OrientationEnum.south]: {
+            "rotationAngle": 0,
+            "padding": { left: 10, top: 5, right: 10, bottom: 5 },
+            "locator": new draw2d.layout.locator.TopLocator(),
+        },
+        [OrientationEnum.west]: {
+            "rotationAngle": -270,
+            "padding": { left: 10, top: 5, right: 10, bottom: 5 },
+            "locator": new draw2d.layout.locator.LeftLocator(),
+        },
+    }),
+
+    init: function (attr) {
+        this._super($.extend({
+            text: "Label text",
+            radius: 4,
+            bgColor: "#5b5b5b",
+            color: "#5b5b5b",
+            fontColor: "white",
+            resizeable: true,
+        }, attr));
+
+
+        this.setOrientation(attr.orientation, false);
+        this.installEditPolicy(new SelectionMenuPolicy());
+        this.installEditor(new draw2d.ui.LabelInplaceEditor());
+    },
+
+    setLinksToChannel: function (partner) {
+        this.linksToChannel.push(partner);
+    },
+
+    getOrientation: function () {
+        return this.orientation;
+    },
+
+
+    setOrientation: function (orientation, repaint = true) {
+        this.orientation = orientation;
+        let prop = this.ORIENTATION_PROPERTIES[orientation];
+        this.rotationAngle = prop.rotationAngle;
+        this.height = 0;
+        this.setPadding(prop.padding);
+        if (repaint) {
+            this.repaint();
+        }
+    }
+});
+

gui/NodeShape.js

@@ -76,8 +76,6 @@ ChannelShape = draw2d.shape.basic.Label.extend({
 
         port.on("connect", function () {
             this.setVisible(false);
-            console.log("Firing");
-
             if (siblingChannel) siblingChannel.setVisible(false)
         }, port)
         port.on("disconnect", function () {

gui/SelectionMenuPolicy.js

@@ -65,28 +65,29 @@ var SelectionMenuPolicy = draw2d.policy.figure.SelectionPolicy.extend({
 			let deleteBtn = $("<div class='overlayMenuItem overlayMenuDeleteItem'>&#10006;</div>");
 			let rotateLeftBtn = $("<div class='overlayMenuItem'>&#10226;</div>");
 			let rotateRightBtn = $("<div class='overlayMenuItem'>&#10227;</div>");
-			let options = $("<div class='overlayMenuItem' style='padding-right: 10px;'>&#8942;</div>");
+			let nodeOptions = $("<div class='overlayMenuItem options' style='padding-right: 10px;'>&#8942;</div>");
+			let labelOptions = $("<div class='overlayMenuItem options' style='padding-right: 10px;'>&#8942;</div>");
 
 			this.overlay.append(deleteBtn);
 			this.overlay.append(rotateLeftBtn);
 			this.overlay.append(rotateRightBtn);
 
 			if (figure instanceof NodeShape) {
-				this.overlay.append(options);
+				this.overlay.append(nodeOptions);
+			}
+
+			if (figure instanceof Label) {
+				this.overlay.append(labelOptions);
 			}
 
 			$("body").append(this.overlay);
 
 			rotateLeftBtn.on("click", function () {
-				if (figure instanceof NodeShape || figure instanceof SwitchShape) {
-					figure.setOrientation(OrientationEnum.next(figure.getOrientation()));
-				}
+				figure.setOrientation(OrientationEnum.next(figure.getOrientation()));
 			});
 
 			rotateRightBtn.on("click", function () {
-				if (figure instanceof NodeShape || figure instanceof SwitchShape) {
-					figure.setOrientation(OrientationEnum.prev(figure.getOrientation()));
-				}
+				figure.setOrientation(OrientationEnum.prev(figure.getOrientation()));
 			});
 
 			deleteBtn.on("click", function () {
@@ -165,7 +166,7 @@ var SelectionMenuPolicy = draw2d.policy.figure.SelectionPolicy.extend({
 				// canvas.getCommandStack().execute(command);
 			})
 
-			options.on("click", function(ev) {
+			nodeOptions.on("click", function(ev) {
 
 				// If the document is clicked somewhere
 				$(document).bind("mousedown", function (e) {
@@ -226,11 +227,55 @@ var SelectionMenuPolicy = draw2d.policy.figure.SelectionPolicy.extend({
 					$(".custom-menu.single li").unbind("click");
 				});
 
+				let { x, y } = ev.target.getBoundingClientRect();
+				$(".custom-menu.single").finish().toggle(100).css({
+					top: (y + 30) + "px",
+					left: x + "px"
+				});
+			});
+
+			labelOptions.on("click", function(ev) {
+
+				// If the document is clicked somewhere
+				$(document).bind("mousedown", function (e) {
+					// If the clicked element is not the menu, hide the menu
+					if (!$(e.target).parents(".custom-menu.label").length > 0) {
+						$(".custom-menu.label").hide(100);
+
+						$(document).unbind("mousedown");
+						$(".custom-menu.label li").unbind("click");
+					}
+				});
 
+				// If the menu element is clicked
+				$(".custom-menu.label li").one("click", function () {
+					// This is the triggered action name
+					let action = $(this).attr("data-action");
+					let color = action.split("-")[1];
+
+					// Change background color
+					if (action.startsWith("bg")) {
+						figure.setBackgroundColor(color);
+						figure.setColor(color);
+					} else {
+						figure.setFontColor(color);
+					}
+
+
+
+
+
 
-				$(".custom-menu.single").finish().toggle(100).css({
-					top: ev.clientY + "px",
-					left: ev.clientX + "px"
+					// Hide it AFTER the action was triggered
+					$(".custom-menu.label").hide(100);
+					$(document).unbind("mousedown");
+					$(".custom-menu.label li").unbind("click");
+				});
+
+				let { x, y } = ev.target.getBoundingClientRect();
+				$(".custom-menu.label").finish().toggle(100).css({
+					top: (y + 30) + "px",
+					left: x + "px"
 				});
 			});
 		}