🎨 [Frontend] Do not change annotations' color when selected (#6048)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/workbench/Annotation.js

@@ -130,7 +130,7 @@ qx.Class.define("osparc.workbench.Annotation", {
       }
     },
 
-    getRepresenationPosition: function() {
+    getRepresentationPosition: function() {
       const representation = this.getRepresentation();
       if (representation) {
         const attrs = osparc.wrapper.Svg.getRectAttributes(representation);
@@ -183,15 +183,20 @@ qx.Class.define("osparc.workbench.Annotation", {
     setSelected: function(selected) {
       const representation = this.getRepresentation();
       if (representation) {
-        const selectedColor = qx.theme.manager.Color.getInstance().resolve("busy-orange");
         switch (this.getType()) {
           case "rect":
-            osparc.wrapper.Svg.updateItemColor(representation, selected ? selectedColor : this.getColor());
-            break;
-          case "note":
-          case "text":
-            osparc.wrapper.Svg.updateTextColor(representation, selected ? selectedColor : this.getColor());
+          case "text": {
+            if (selected) {
+              if (!("bBox" in representation.node)) {
+                const bBox = this.__svgLayer.drawBoundingBox(this);
+                representation.node["bBox"] = bBox;
+              }
+            } else if ("bBox" in representation.node) {
+              osparc.wrapper.Svg.removeItem(representation.node["bBox"]);
+              delete representation.node["bBox"];
+            }
             break;
+          }
         }
       }
     },

services/static-webserver/client/source/class/osparc/workbench/SvgWidget.js

@@ -115,6 +115,16 @@ qx.Class.define("osparc.workbench.SvgWidget", {
 
     drawNodeUI: function(width = osparc.workbench.NodeUI.NODE_WIDTH, height = osparc.workbench.NodeUI.NODE_HEIGHT, radius = 4, x = 0, y = 0) {
       return osparc.wrapper.Svg.drawNodeUI(this.__canvas, width, height, radius, x, y);
+    },
+
+    drawBoundingBox: function(annotation) {
+      const offset = 10;
+      const bBox = annotation.getRepresentation().bbox();
+      const width = bBox.width + 2*offset;
+      const height = bBox.height + 2*offset;
+      const x = bBox.x - offset;
+      const y = bBox.y - offset;
+      return osparc.wrapper.Svg.drawDashedRect(this.__canvas, width, height, x, y);
     }
   }
 });

services/static-webserver/client/source/class/osparc/workbench/WorkbenchUI.js

@@ -523,7 +523,7 @@ qx.Class.define("osparc.workbench.WorkbenchUI", {
       }, this);
       annotation.addListener("annotationMoving", () => {
         if ("initPos" in annotation) {
-          const reprPos = annotation.getRepresenationPosition();
+          const reprPos = annotation.getRepresentationPosition();
           const xDiff = reprPos.x - annotation.initPos.x;
           const yDiff = reprPos.y - annotation.initPos.y;
           this.__itemMoving(annotation.getId(), xDiff, yDiff);

services/static-webserver/client/source/class/osparc/wrapper/Svg.js

@@ -132,6 +132,8 @@ qx.Class.define("osparc.wrapper.Svg", {
       }
     },
 
+    /* ANNOTATIONS */
+
     getRectAttributes: function(rect) {
       const rectAttrs = rect.node.attributes;
       return {
@@ -272,6 +274,29 @@ qx.Class.define("osparc.wrapper.Svg", {
       return rect;
     },
 
+    updateText: function(representation, label) {
+      if (representation.type === "text") {
+        representation.text(label);
+      } else if (representation.type === "svg") {
+        // nested
+        representation["textChild"].innerText = label;
+      }
+    },
+
+    updateTextColor: function(text, color) {
+      text.font({
+        fill: color
+      });
+    },
+
+    updateTextSize: function(text, size) {
+      text.font({
+        size: size + "px"
+      });
+    },
+
+    /* / ANNOTATIONS */
+
     drawDashedRect: function(draw, width, height, x, y) {
       const edgeColor = qx.theme.manager.Color.getInstance().getTheme().colors["workbench-edge-comp-active"];
       const rect = draw.rect(width, height)
@@ -335,27 +360,6 @@ qx.Class.define("osparc.wrapper.Svg", {
       item.remove();
     },
 
-    updateText: function(representation, label) {
-      if (representation.type === "text") {
-        representation.text(label);
-      } else if (representation.type === "svg") {
-        // nested
-        representation["textChild"].innerText = label;
-      }
-    },
-
-    updateTextColor: function(text, color) {
-      text.font({
-        fill: color
-      });
-    },
-
-    updateTextSize: function(text, size) {
-      text.font({
-        size: size + "px"
-      });
-    },
-
     updateCurveDashes: function(curve, dashed) {
       curve.attr({
         "stroke-dasharray": dashed ? 5 : 0