diff --git a/src/app/cartography/shared/datasources/datasource.spec.ts b/src/app/cartography/shared/datasources/datasource.spec.ts index e80a6722..bd5f87f6 100644 --- a/src/app/cartography/shared/datasources/datasource.spec.ts +++ b/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")]); diff --git a/src/app/cartography/shared/datasources/datasource.ts b/src/app/cartography/shared/datasources/datasource.ts index 86ba8474..9d7d0cfc 100644 --- a/src/app/cartography/shared/datasources/datasource.ts +++ b/src/app/cartography/shared/datasources/datasource.ts @@ -9,8 +9,13 @@ export abstract class DataSource { } 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[]) { diff --git a/src/app/cartography/shared/widgets/ethernet-link.ts b/src/app/cartography/shared/widgets/ethernet-link.ts index e84f5c4a..fa46abc6 100644 --- a/src/app/cartography/shared/widgets/ethernet-link.ts +++ b/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(); diff --git a/src/app/cartography/shared/widgets/interface-label.ts b/src/app/cartography/shared/widgets/interface-label.ts index dbd3d9f7..977b8202 100644 --- a/src/app/cartography/shared/widgets/interface-label.ts +++ b/src/app/cartography/shared/widgets/interface-label.ts @@ -17,16 +17,16 @@ export class InterfaceLabelWidget { .selectAll('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})`); diff --git a/src/app/cartography/shared/widgets/links.ts b/src/app/cartography/shared/widgets/links.ts index 89d2b720..6def1bee 100644 --- a/src/app/cartography/shared/widgets/links.ts +++ b/src/app/cartography/shared/widgets/links.ts @@ -51,8 +51,8 @@ export class LinksWidget implements Widget { const link_path = link_group.select('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('rect'); - const STOPPED_STATUS_RECT_WIDTH = 6; + const STOPPED_STATUS_RECT_WIDTH = 10; status_stopped .merge(status_stopped_enter) diff --git a/src/app/cartography/shared/widgets/nodes.ts b/src/app/cartography/shared/widgets/nodes.ts index b0e41b3f..f79bb640 100644 --- a/src/app/cartography/shared/widgets/nodes.ts +++ b/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"); })