Retain status background color when selected

The border now turns a thicker black to indicate it is selected
while keeping the selected color.

Also add a box around the status name to indicate the clickable
area, center the status name, and use a default cursor rather
than the text I-beam since you can't edit the text directly.

Author: cbrandtbuffalo

share/static/css/elevator/lifecycleui.css

@@ -5,12 +5,9 @@ path.link {
     cursor: pointer;
 }
 
-g text {
-    cursor: text;
-}
 
 g circle.node-selected {
-    fill: #98b9eb !important;
+    stroke-width: 3px !important;
 }
 
 .dragline {

share/static/js/lifecycleui-editor.js

@@ -641,6 +641,7 @@ RT.NewLifecycleEditor ||= class {
             .attr("class", "node");
 
         nodeEnter.append("circle");
+        nodeEnter.append("rect").attr("class", "label-bg");
         nodeEnter.append("text");
         nodeEnter.append("title");
 
@@ -713,7 +714,9 @@ RT.NewLifecycleEditor ||= class {
                 return -textLength/2;
             })
             .attr("y", 0)
+            .attr("dominant-baseline", "central")
             .style("font-size", "10px")
+            .style("cursor", "default")
             .attr("fill", function(d) {
                 var bg = d.color;
                 if ( !bg ) {
@@ -731,6 +734,35 @@ RT.NewLifecycleEditor ||= class {
                 self.UpdateNode(d);
             });
 
+        self.node.select("rect.label-bg")
+            .each(function(d) {
+                var textEl = d3.select(this.parentNode).select("text").node();
+                var bbox = textEl.getBBox();
+                var padding = 3;
+                var bg = d.color;
+                if ( !bg ) {
+                    switch(d.type) {
+                        case 'active':   bg = '#547CCC'; break;
+                        case 'inactive': bg = '#4bb2cc'; break;
+                        case 'initial':  bg = '#599ACC'; break;
+                    }
+                }
+                d3.select(this)
+                    .attr("x", bbox.x - padding)
+                    .attr("y", bbox.y - padding)
+                    .attr("width", bbox.width + padding * 2)
+                    .attr("height", bbox.height + padding * 2)
+                    .attr("rx", 2)
+                    .attr("fill", "none")
+                    .attr("stroke", contrastTextColor(bg))
+                    .attr("stroke-width", 1);
+            })
+            .on("click", function(d) {
+                d3.event.stopPropagation();
+                d3.event.preventDefault();
+                self.UpdateNode(d);
+            });
+
         self.node.select("title")
             .text(function(d) { return d.type; });
     }