Draw node label selection

src/app/cartography/components/selection-control/selection-control.component.ts

@@ -35,7 +35,18 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
         return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y)
       });
   
-      const selected = [...selectedNodes, ...selectedLinks, ...selectedDrawings];
+      const selectedLabels = this.graphDataManager.getNodes().filter((node) => {
+        const labelX = node.x + node.label.x;
+        const labelY = node.y + node.label.y;
+        return this.inRectangleHelper.inRectangle(rectangle, labelX, labelY);
+      }).map((node) => node.label);
+
+      const selected = [
+        ...selectedNodes,
+        ...selectedLinks,
+        ...selectedDrawings,
+        ...selectedLabels
+      ];
   
       this.selectionManager.setSelected(selected);
     });

src/app/cartography/converters/map/label-to-map-label-converter.ts

@@ -7,13 +7,17 @@ import { MapLabel } from "../../models/map/map-label";
 
 @Injectable()
 export class LabelToMapLabelConverter implements Converter<Label, MapLabel> {
-    convert(label: Label) {
+    convert(label: Label, paramaters?: {[node_id: string]: string}) {
         const mapLabel = new MapLabel();
         mapLabel.rotation = label.rotation;
         mapLabel.style = label.style;
         mapLabel.text = label.text;
         mapLabel.x = label.x;
         mapLabel.y = label.y;
+        if (paramaters !== undefined) {
+          mapLabel.id = paramaters.node_id;
+          mapLabel.nodeId = paramaters.node_id;
+        }
         return mapLabel;
     }
 }

src/app/cartography/converters/map/map-label-to-label-converter.ts

@@ -7,7 +7,7 @@ import { MapLabel } from "../../models/map/map-label";
 
 @Injectable()
 export class MapLabelToLabelConverter implements Converter<MapLabel, Label> {
-    convert(mapLabel: MapLabel) {
+    convert(mapLabel: MapLabel, paramters?: any) {
         const label = new Label();
         label.rotation = mapLabel.rotation;
         label.style = mapLabel.style;

src/app/cartography/converters/map/node-to-map-node-converter.ts

@@ -23,7 +23,7 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
         mapNode.consoleHost = node.console_host;
         mapNode.firstPortName = node.first_port_name;
         mapNode.height = node.height;
-        mapNode.label = this.labelToMapLabel.convert(node.label);
+        mapNode.label = this.labelToMapLabel.convert(node.label, { node_id: node.node_id });
         mapNode.name = node.name;
         mapNode.nodeDirectory = node.node_directory;
         mapNode.nodeType = node.node_type;

src/app/cartography/managers/selection-manager.ts

@@ -23,9 +23,14 @@ export class SelectionManager {
 
     this.selection = dictItems;
 
+    if (selected.length > 0) {
       this.selected.emit(selected);
+    }
+    
+    if (unselected.length > 0) {
       this.unselected.emit(unselected);
     }
+  }
 
   public getSelected(): Indexed[] {
     return Object.keys(this.selection).map(key => this.selection[key]);

src/app/cartography/models/map/map-label.ts

@@ -1,8 +1,11 @@
-export class MapLabel {
+import { Indexed } from "../../datasources/map-datasource";
+
+export class MapLabel implements Indexed {
+  id: string;
   rotation: number;
   style: string;
   text: string;
   x: number;
   y: number;
-    isSelected: boolean;
+  nodeId: string;
 }

src/app/cartography/widgets/node.ts

@@ -44,6 +44,10 @@ export class NodeWidget implements Widget {
         .append<SVGTextElement>('text')
           .attr('class', 'label');
 
+    node_body_enter
+      .append<SVGRectElement>('rect')
+        .attr('class', 'label_selection');
+
     const node_body_merge = node_body.merge(node_body_enter)
         .classed('selected', (n: MapNode) => this.selectionManager.isSelected(n))
         .on("contextmenu", function (n: MapNode, i: number) {
@@ -83,6 +87,7 @@ export class NodeWidget implements Widget {
   
     node_body_merge
       .select<SVGTextElement>('text.label')
+        .attr('label_id', (n: MapNode) => n.label.id)
         // .attr('y', (n: Node) => n.label.y - n.height / 2. + 10)  // @todo: server computes y in auto way
         .attr('style', (n: MapNode) => {
           let styles = this.cssFixer.fix(n.label.style);
@@ -107,6 +112,28 @@ export class NodeWidget implements Widget {
             return - n.height / 2. - bbox.height ;
           }
           return n.label.y + bbox.height - NodeWidget.NODE_LABEL_MARGIN;
+        })
+        .attr('transform', (node) => {
+          return `rotate(${node.label.rotation}, 0, 0)`;
+        })
+
+    node_body_merge
+      .select<SVGRectElement>('rect.label_selection')
+      .attr('visibility', (n: MapNode) => this.selectionManager.isSelected(n.label) ? 'visible' : 'hidden')
+        .attr('stroke', 'black')
+        .attr('stroke-dasharray', '3,3')
+        .attr('stroke-width', '0.5')
+        .attr('fill', 'none')
+        .each(function (this: SVGRectElement, node: MapNode) {
+          const current = select(this);
+          const textLabel = node_body_merge.select<SVGTextElement>(`text[label_id="${node.label.id}"]`);
+          const bbox = textLabel.node().getBBox();
+          const border = 2;
+
+          current.attr('width', bbox.width + border * 2);
+          current.attr('height', bbox.height + border * 2);
+          current.attr('x', bbox.x - border);
+          current.attr('y', bbox.y - border);
         });
   }
 }