Normalize positions of elements, Ref: #111, Fix double nodes and drawings

src/app/cartography/shared/datasources/datasource.spec.ts

@@ -33,6 +33,18 @@ describe('TestDataSource', () => {
     });
   });
 
+
+  describe('Item can be added when key duplocates', () => {
+    beforeEach(() => {
+      dataSource.add(new Item("test1", "property1"));
+      dataSource.add(new Item("test1", "property2"));
+    });
+
+    it('item should be in data', () => {
+      expect(data).toEqual([new Item("test1", "property2")]);
+    });
+  });
+
   describe('Items can be set', () => {
     beforeEach(() => {
       dataSource.set([new Item("test1", "property1"), new Item("test2", "property2")]);

src/app/cartography/shared/datasources/datasource.ts

@@ -9,8 +9,13 @@ export abstract class DataSource<T> {
   }
 
   public add(item: T) {
-    this.data.push(item);
-    this.dataChange.next(this.data);
+    const index = this.findIndex(item);
+    if (index >= 0) {
+      this.update(item);
+    } else {
+      this.data.push(item);
+      this.dataChange.next(this.data);
+    }
   }
 
   public set(data: T[]) {

src/app/cartography/shared/widgets/ethernet-link.ts

@@ -9,8 +9,8 @@ export class EthernetLinkWidget implements Widget {
 
   public draw(view: SVGSelection, link: Link) {
       const link_data = [[
-        [link.source.x, link.source.y],
-        [link.target.x, link.target.y]
+        [link.source.x + link.source.width / 2., link.source.y + link.source.height / 2.],
+        [link.target.x + link.target.width / 2., link.target.y + link.source.height / 2.]
       ]];
 
       const value_line = line();

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

@@ -17,16 +17,16 @@ export class InterfaceLabelWidget {
       .selectAll<SVGTextElement, InterfaceLabel>('text.interface_label')
       .data((l: Link) => {
         const sourceInterface = new InterfaceLabel(
-          Math.round(l.source.x + l.nodes[0].label.x),
-          Math.round(l.source.y + l.nodes[0].label.y),
+          Math.round(l.source.x + l.source.width + l.nodes[0].label.x),
+          Math.round(l.source.y + l.source.height + l.nodes[0].label.y),
           l.nodes[0].label.text,
           l.nodes[0].label.style,
           l.nodes[0].label.rotation
         );
 
         const targetInterface = new InterfaceLabel(
-          Math.round(l.target.x + l.nodes[1].label.x),
-          Math.round(l.target.y + l.nodes[1].label.y),
+          Math.round(l.target.x + l.target.width / 2. + l.nodes[1].label.x),
+          Math.round(l.target.y + l.target.height / 2.  + l.nodes[1].label.y),
           l.nodes[1].label.text,
           l.nodes[1].label.style,
           l.nodes[1].label.rotation
@@ -45,8 +45,14 @@ export class InterfaceLabelWidget {
 
     merge
       .text((l: InterfaceLabel) => l.text)
-      .attr('x', (l: InterfaceLabel) => l.x)
-      .attr('y', (l: InterfaceLabel) => l.y)
+      .attr('x', function(this: SVGTextElement, l: InterfaceLabel) {
+        const bbox = this.getBBox();
+        return l.x;
+      })
+      .attr('y', function(this: SVGTextElement, l: InterfaceLabel)  {
+        const bbox = this.getBBox();
+        return l.y;
+      })
       .attr('style', (l: InterfaceLabel) => this.cssFixer.fix(l.style))
       .attr('transform', (l: InterfaceLabel) => `rotate(${l.rotation}, ${l.x}, ${l.y})`);
 

src/app/cartography/shared/widgets/links.ts

@@ -51,8 +51,8 @@ export class LinksWidget implements Widget {
 
         const link_path = link_group.select<SVGPathElement>('path');
 
-        const start_point: SVGPoint = link_path.node().getPointAtLength(50);
-        const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 50);
+        const start_point: SVGPoint = link_path.node().getPointAtLength(40);
+        const end_point: SVGPoint = link_path.node().getPointAtLength(link_path.node().getTotalLength() - 40);
 
         const statuses = [
           new LinkStatus(start_point.x, start_point.y, l.source.status),
@@ -72,7 +72,7 @@ export class LinksWidget implements Widget {
             .attr('class', 'status_started')
             .attr('cx', (ls: LinkStatus) => ls.x)
             .attr('cy', (ls: LinkStatus) => ls.y)
-            .attr('r', 4)
+            .attr('r', 6)
             .attr('fill', '#2ecc71');
 
         status_started
@@ -87,7 +87,7 @@ export class LinksWidget implements Widget {
           .enter()
             .append<SVGRectElement>('rect');
 
-        const STOPPED_STATUS_RECT_WIDTH = 6;
+        const STOPPED_STATUS_RECT_WIDTH = 10;
 
         status_stopped
           .merge(status_stopped_enter)

src/app/cartography/shared/widgets/nodes.ts

@@ -68,15 +68,17 @@ export class NodesWidget implements Widget {
             const bbox = this.getBBox();
             return -bbox.width / 2.;
           }
-          return n.label.x - n.width / 2.;
+          return n.label.x;
         })
         .attr('y', function (this: SVGTextElement, n: Node) {
+          let bbox = this.getBBox();
+
           if (n.label.x === null) {
             // center
-            const bbox = this.getBBox();
+            bbox = this.getBBox();
             return - n.height / 2. - bbox.height ;
           }
-          return n.label.y - n.height / 2.;
+          return n.label.y + bbox.height;
         });
 
     selection
@@ -156,8 +158,8 @@ export class NodesWidget implements Widget {
           })
           .attr('width', (n: Node) => n.width)
           .attr('height', (n: Node) => n.height)
-          .attr('x', (n: Node) => -n.width / 2.)
-          .attr('y', (n: Node) => -n.height / 2.)
+          .attr('x', (n: Node) => 0)
+          .attr('y', (n: Node) => 0)
           .on('mouseover', function (this, n: Node) {
             select(this).attr("class", "over");
           })