Improve multiline text position

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html

@@ -9,6 +9,6 @@
     *ngFor="let line of lines; index as i"
     xml:space="preserve"
     x="0"
-    [attr.dy]="i == 0 ? '0em' : '1.2em'"
+    [attr.dy]="i == 0 ? '0em' : '1.4em'"
   >{{line}}</svg:tspan>
 </svg:text>

src/app/cartography/widgets/drawings/text-drawing.spec.ts

@@ -67,7 +67,7 @@ describe('TextDrawingWidget', () => {
 
     expect(drew.nodes()[1].innerHTML).toEqual('IS TEXT');
     expect(drew.nodes()[1].getAttribute('x')).toEqual('0');
-    expect(drew.nodes()[1].getAttribute('dy')).toEqual('1.2em');
+    expect(drew.nodes()[1].getAttribute('dy')).toEqual('1.4em');
   });
 
   it('should draw whitespaces', () => {

src/app/cartography/widgets/drawings/text-drawing.ts

@@ -64,7 +64,7 @@ export class TextDrawingWidget implements DrawingShapeWidget {
       .text((line) => line)
         .attr('xml:space', 'preserve')
         .attr('x', 0)
-        .attr("dy", (line, i) => i === 0 ? '0em' : '1.2em');
+        .attr("dy", (line, i) => i === 0 ? '0em' : '1.4em');
 
     lines
       .exit()

src/app/cartography/widgets/interface-label.ts

@@ -28,6 +28,7 @@ export class InterfaceLabelWidget {
     const labels = selection
       .selectAll<SVGGElement, InterfaceLabel>('g.interface_label_container')
       .data((l: MapLink) => {
+        console.log( l.nodes[0].label);
         const sourceInterface = new InterfaceLabel(
           l.id,
           'source',
@@ -60,14 +61,15 @@ export class InterfaceLabelWidget {
         .classed('interface_label_container', true);
 
     // create surrounding rect
-    enter
+    // enter
-      .append<SVGRectElement>('rect')
+    //   .append<SVGRectElement>('rect')
-        .attr('class', 'interface_label_border');
+    //     .attr('class', 'interface_label_border');
 
     // create label
     enter
       .append<SVGTextElement>('text')
-        .attr('class', 'interface_label noselect');
+        .attr('class', 'interface_label noselect')
+        .attr('interface_label_id', (i: InterfaceLabel) => `${i.direction}-${i.link_id}`)
 
     const merge = labels
       .merge(enter);
@@ -76,9 +78,14 @@ export class InterfaceLabelWidget {
       .attr('width', 100)
       .attr('height', 100)
       .attr('transform', function(this: SVGGElement, l: InterfaceLabel) {
-        const bbox = this.getBBox();
+        const textLabel = merge.select<SVGTextElement>(`text[interface_label_id="${l.direction}-${l.link_id}"]`);
+
+        const bbox = textLabel.node().getBBox();
+        console.log(bbox);
         const x = l.x ;
-        const y = l.y + bbox.height;
+        const y = l.y + bbox.height; //-17
+        // const x = l.x;
+        // const y = l.y + bbox.height;
         return `translate(${x}, ${y}) rotate(${l.rotation}, ${x}, ${y})`;
       })
       .classed('selected', (l: InterfaceLabel) => false);
@@ -91,30 +98,30 @@ export class InterfaceLabelWidget {
           let styles = this.cssFixer.fix(l.style);
           styles = this.fontFixer.fixStyles(styles);
           return styles;
-        })
+        });
-        .attr('x', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER)
+        // .attr('x', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER)
-        .attr('y', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER);
+        // .attr('y', -InterfaceLabelWidget.SURROUNDING_TEXT_BORDER);
 
 
     // update surrounding rect
-    merge
+    // merge
-      .select<SVGRectElement>('rect.interface_label_border')
+    //   .select<SVGRectElement>('rect.interface_label_border')
-        .attr('visibility', (l: InterfaceLabel) => false ? 'visible' : 'hidden')
+    //     .attr('visibility', (l: InterfaceLabel) => false ? 'visible' : 'hidden')
-        .attr('stroke-dasharray', '3,3')
+    //     .attr('stroke-dasharray', '3,3')
-        .attr('stroke-width', '0.5')
+    //     .attr('stroke-width', '0.5')
-        .each(function (this: SVGRectElement, l: InterfaceLabel) {
+    //     .each(function (this: SVGRectElement, l: InterfaceLabel) {
-          const current = select(this);
+    //       const current = select(this);
-          const parent = select(this.parentElement);
+    //       const parent = select(this.parentElement);
-          const text = parent.select<SVGTextElement>('text');
+    //       const text = parent.select<SVGTextElement>('text');
-          const bbox = text.node().getBBox();
+    //       const bbox = text.node().getBBox();
 
-          const border = InterfaceLabelWidget.SURROUNDING_TEXT_BORDER;
+    //       const border = InterfaceLabelWidget.SURROUNDING_TEXT_BORDER;
 
-          current.attr('width', bbox.width + border * 2);
+    //       current.attr('width', bbox.width + border * 2);
-          current.attr('height', bbox.height + border);
+    //       current.attr('height', bbox.height + border);
-          current.attr('x', - border);
+    //       current.attr('x', - border);
-          current.attr('y', - bbox.height);
+    //       current.attr('y', - bbox.height);
-        });
+    //     });
 
     labels
       .exit()

src/app/cartography/widgets/label.ts

@@ -96,7 +96,7 @@ export class LabelWidget implements Widget {
           //   bbox = this.getBBox();
           //   return - n.height / 2. - bbox.height ;
           // }
-          return l.y + bbox.height - LabelWidget.NODE_LABEL_MARGIN;
+          return l.y + bbox.height - LabelWidget.NODE_LABEL_MARGIN - bbox.height*0.14;
         })
         .attr('transform', (l: MapLabel) => {
           return `rotate(${l.rotation}, ${l.x}, ${l.y})`;