Link styling for ethernet links

src/app/cartography/widgets/link.ts

@@ -29,7 +29,8 @@ export class LinkWidget implements Widget {
 
     const link_body_enter = link_body.enter().append<SVGGElement>('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})`;
     });

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<LinkContextMenu>();
+  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', (datum) => {
-      .attr('stroke-width', '2')
+        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;

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`
+    }
+}