diff --git a/src/app/cartography/widgets/link.ts b/src/app/cartography/widgets/link.ts index e5d56774..6b2fd60e 100644 --- a/src/app/cartography/widgets/link.ts +++ b/src/app/cartography/widgets/link.ts @@ -29,7 +29,8 @@ export class LinkWidget implements Widget { const link_body_enter = link_body.enter().append('g').attr('class', 'link_body'); - const link_body_merge = link_body.merge(link_body_enter).attr('transform', (link) => { + const link_body_merge = link_body.merge(link_body_enter) + .attr('transform', (link) => { const translation = this.multiLinkCalculatorHelper.linkTranslation(link.distance, link.source, link.target); return `translate (${translation.dx}, ${translation.dy})`; }); diff --git a/src/app/cartography/widgets/links/ethernet-link.ts b/src/app/cartography/widgets/links/ethernet-link.ts index 3de741e0..77fda0be 100644 --- a/src/app/cartography/widgets/links/ethernet-link.ts +++ b/src/app/cartography/widgets/links/ethernet-link.ts @@ -4,21 +4,29 @@ import { LinkContextMenu } from '../../events/event-source'; import { MapLink } from '../../models/map/map-link'; import { SVGSelection } from '../../models/types'; import { Widget } from '../widget'; +import { LinkStyle } from '../../../models/link-style'; +import { StyleTranslator} from './style-translator'; class EthernetLinkPath { - constructor(public source: [number, number], public target: [number, number]) {} + constructor(public source: [number, number], public target: [number, number], public style: LinkStyle) {} } @Injectable() export class EthernetLinkWidget implements Widget { public onContextMenu = new EventEmitter(); + private defaultEthernetLinkStyle : LinkStyle = { + color: "#000", + width: 2, + type: 0 + }; constructor() {} private linktoEthernetLink(link: MapLink) { return new EthernetLinkPath( [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.target.height / 2] + [link.target.x + link.target.width / 2, link.target.y + link.target.height / 2], + link.link_style ? link.link_style : this.defaultEthernetLinkStyle ); } @@ -41,8 +49,17 @@ export class EthernetLinkWidget implements Widget { }); link_enter - .attr('stroke', '#000') - .attr('stroke-width', '2') + .attr('stroke', (datum) => { + let link: MapLink = (datum as unknown) as MapLink; + return datum.style.color; + }) + .attr('stroke-width', (datum) => { + let link: MapLink = (datum as unknown) as MapLink; + return datum.style.width; + }) + .attr('stroke-dasharray', (datum) => { + return StyleTranslator.getLinkStyle(datum.style); + }) .on('contextmenu', (datum) => { let link: MapLink = (datum as unknown) as MapLink; const evt = event; diff --git a/src/app/cartography/widgets/links/style-translator.ts b/src/app/cartography/widgets/links/style-translator.ts new file mode 100644 index 00000000..34762529 --- /dev/null +++ b/src/app/cartography/widgets/links/style-translator.ts @@ -0,0 +1,16 @@ +import { LinkStyle } from '../../../models/link-style'; + +export class StyleTranslator { + static getLinkStyle(linkStyle: LinkStyle) { + if (linkStyle.type == 1) { + return `10, 10` + } + if (linkStyle.type == 2) { + return `${linkStyle.width}, ${linkStyle.width}` + } + if (linkStyle.type == 3) { + return `20, 10, ${linkStyle.width}, ${linkStyle.width}, ${linkStyle.width}, 10` + } + return `0, 0` + } +}