Delete link UI/UX (ITISFoundation#2743)

Author: odeimaiz

services/web/client/source/class/osparc/component/workbench/WorkbenchUI.js

@@ -440,8 +440,9 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
       return selectedNodeIDs;
     },
 
-    resetSelectedNodes: function() {
+    resetSelection: function() {
       this.__setSelectedNodes([]);
+      this.__selectedItemChanged(null);
     },
 
     __setSelectedNodes: function(selectedNodeUIs) {
@@ -526,6 +527,11 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
         this.__edgesUI.push(edgeUI);
 
         const that = this;
+        edgeUI.getRepresentation().widerCurve.node.addEventListener("click", e => {
+          // this is needed to get out of the context of svg
+          that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
+          e.stopPropagation();
+        }, this);
         edgeUI.getRepresentation().node.addEventListener("click", e => {
           // this is needed to get out of the context of svg
           that.__selectedItemChanged(edgeUI.getEdgeId()); // eslint-disable-line no-underscore-dangle
@@ -994,7 +1000,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
 
     _loadModel: async function(model) {
       this._clearAll();
-      this.resetSelectedNodes();
+      this.resetSelection();
       this._currentModel = model;
       if (model) {
         const isContainer = model.isContainer();
@@ -1419,7 +1425,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
               this.fireDataEvent("removeNode", selectedNodeIDs[0]);
               break;
             case "Escape":
-              this.resetSelectedNodes();
+              this.resetSelection();
               break;
           }
         } else if (keyEvent.getKeyIdentifier() === "Delete" && this.__isSelectedItemAnEdge()) {
@@ -1428,16 +1434,13 @@ qx.Class.define("osparc.component.workbench.WorkbenchUI", {
         } else if (keyEvent.getKeyIdentifier() === "Delete") {
           this.fireDataEvent("removeNodes", selectedNodeIDs);
         } else if (keyEvent.getKeyIdentifier() === "Escape") {
-          this.resetSelectedNodes();
+          this.resetSelection();
           this.__removeTempEdge();
           this.__removePointerMoveListener();
         }
       }, this);
 
-      this.__workbenchLayout.addListener("tap", () => {
-        this.resetSelectedNodes();
-        this.__selectedItemChanged(null);
-      }, this);
+      this.__workbenchLayout.addListener("tap", () => this.resetSelection(), this);
       this.__workbenchLayout.addListener("dbltap", e => this.__openServiceCatalog(e), this);
       this.__workbenchLayout.addListener("resize", () => this.__updateHint(), this);
 

services/web/client/source/class/osparc/component/workbench/WorkbenchUIPreview.js

@@ -54,7 +54,7 @@ qx.Class.define("osparc.component.workbench.WorkbenchUIPreview", {
     // overridden
     _loadModel: function(model) {
       this._clearAll();
-      this.resetSelectedNodes();
+      this.resetSelection();
       this._currentModel = model;
       if (model) {
         qx.ui.core.queue.Visibility.flush();

services/web/client/source/class/osparc/desktop/WorkbenchView.js

@@ -1091,7 +1091,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       this.nodeSelected(currentModel.getNodeId ? currentModel.getNodeId() : this.getStudy().getUuid());
       this.__workbenchChanged();
 
-      this.__workbenchUI.resetSelectedNodes();
+      this.__workbenchUI.resetSelection();
     },
 
     __ungroupSelection: function() {
@@ -1121,7 +1121,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       this.nodeSelected(currentModel.getNodeId ? currentModel.getNodeId() : this.getStudy().getUuid());
       this.__workbenchChanged();
 
-      this.__workbenchUI.resetSelectedNodes();
+      this.__workbenchUI.resetSelection();
     },
 
     __attachEventHandlers: function() {

services/web/client/source/class/osparc/theme/ColorDark.js

@@ -4,7 +4,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
   colors: {
     "workbench-edge-comp-active": "#777777",
     "workbench-edge-api-active": "#BBBBBB",
-    "workbench-edge-selected": "#0000FF",
     "workbench-start-hint": "#505050",
 
     "node-selected-background": "#666666",
@@ -13,8 +12,6 @@ qx.Theme.define("osparc.theme.ColorDark", {
 
     "logger-debug-message": "#FFFFFF",
     "logger-info-message": "#FFFFFF",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
 
     "service-window-hint": "#808080",
 

services/web/client/source/class/osparc/theme/ColorLight.js

@@ -4,7 +4,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
   colors: {
     "workbench-edge-comp-active": "#888888",
     "workbench-edge-api-active": "#444444",
-    "workbench-edge-selected": "#FFFF00",
     "workbench-start-hint": "#AFAFAF",
 
     "node-selected-background": "#999999",
@@ -13,8 +12,6 @@ qx.Theme.define("osparc.theme.ColorLight", {
 
     "logger-debug-message": "#000000",
     "logger-info-message": "#000000",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
 
     "service-window-hint": "#7F7F7F",
 

services/web/client/source/class/osparc/theme/ColorLightBlue.js

@@ -148,7 +148,6 @@ qx.Theme.define("osparc.theme.ColorLightBlue", {
 
     "workbench-edge-comp-active": "#888888",
     "workbench-edge-api-active": "#444444",
-    "workbench-edge-selected": "#FFFF00",
     "workbench-start-hint": "#AFAFAF",
 
     "node-selected-background": "#999999",
@@ -157,8 +156,6 @@ qx.Theme.define("osparc.theme.ColorLightBlue", {
 
     "logger-debug-message": "#000000",
     "logger-info-message": "#000000",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
 
     "service-window-hint": "#7F7F7F",
 

services/web/client/source/class/osparc/theme/ColorPurple.js

@@ -4,7 +4,6 @@ qx.Theme.define("osparc.theme.ColorPurple", {
   colors: {
     "workbench-edge-comp-active": "#888888",
     "workbench-edge-api-active": "#444444",
-    "workbench-edge-selected": "#FFFF00",
     "workbench-start-hint": "#AFAFAF",
 
     "node-selected-background": "#5495d2",
@@ -13,8 +12,6 @@ qx.Theme.define("osparc.theme.ColorPurple", {
 
     "logger-debug-message": "#000000",
     "logger-info-message": "#000000",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
 
     "service-window-hint": "#7F7F7F",
 

services/web/client/source/class/osparc/theme/mixin/Color.js

@@ -2,11 +2,18 @@ qx.Theme.define("osparc.theme.mixin.Color", {
   colors: {
     "activitytree-background-cpu": "#2C7CCE",
     "activitytree-background-memory": "#358475",
+
     "ready-green": "#58A6FF", // It is not really green because of reasons
     "warning-yellow": "#FFFF00",
     "failed-red": "#FF2D2D",
     "busy-orange": "#FFA500",
+
+    "logger-warning-message": "#FFFF00",
+    "logger-error-message": "#FF0000",
+
     "contrasted-text-dark": "#222222",
-    "contrasted-text-light": "#EEEEEE"
+    "contrasted-text-light": "#EEEEEE",
+
+    "workbench-edge-selected": "#FFFF00"
   }
 });

services/web/client/source/class/osparc/wrapper/Svg.js

@@ -68,7 +68,18 @@ qx.Class.define("osparc.wrapper.Svg", {
 
       osparc.wrapper.Svg.curateCurveControls(controls);
 
-      const edge = draw.path()
+      const widerCurve = draw.path()
+        .M(controls[0].x, controls[0].y)
+        .C(controls[1], controls[2], controls[3])
+        .style({
+          cursor: "pointer"
+        })
+        .opacity(0)
+        .stroke({
+          width: edgeWidth*4
+        });
+
+      const curve = draw.path()
         .M(controls[0].x, controls[0].y)
         .C(controls[1], controls[2], controls[3])
         .fill("none")
@@ -80,33 +91,40 @@ qx.Class.define("osparc.wrapper.Svg", {
           color: edgeColor,
           dasharray: dashed ? 5 : 0
         });
+      curve.widerCurve = widerCurve;
 
       const portArrow = draw.marker(arrowSize, arrowSize, add => {
         add.path("M 0 0 V 4 L 2 2 Z")
           .fill(edgeColor)
           .size(arrowSize, arrowSize);
       });
-      edge.marker("end", portArrow);
+      curve.marker("end", portArrow);
+      curve.markers = [portArrow];
 
-      edge.markers = [portArrow];
-
-      return edge;
+      return curve;
     },
 
     updateCurve: function(curve, controls) {
       if (curve.type === "path") {
         let mSegment = curve.getSegment(0);
         mSegment.coords = [controls[0].x, controls[0].y];
-        curve.replaceSegment(0, mSegment);
-
         let cSegment = curve.getSegment(1);
         cSegment.coords = [controls[1].x, controls[1].y, controls[2].x, controls[2].y, controls[3].x, controls[3].y];
+
+        if (curve.widerCurve) {
+          curve.widerCurve.replaceSegment(0, mSegment);
+          curve.widerCurve.replaceSegment(1, cSegment);
+        }
+        curve.replaceSegment(0, mSegment);
         curve.replaceSegment(1, cSegment);
       }
     },
 
     removeCurve: function(curve) {
       if (curve.type === "path") {
+        if (curve.widerCurve) {
+          curve.widerCurve.remove();
+        }
         curve.remove();
       }
     },