Fix for #515

src/app/cartography/cartography.module.ts

@@ -58,6 +58,8 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
 import { MovingEventSource } from './events/moving-event-source';
 import { MovingCanvasDirective } from './directives/moving-canvas.directive';
 import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
+import { EthernetLinkWidget } from './widgets/links/ethernet-link';
+import { SerialLinkWidget } from './widgets/links/serial-link';
 
 @NgModule({
   imports: [CommonModule, MatMenuModule, MatIconModule],
@@ -117,6 +119,8 @@ import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
     MapSettingsManager,
     FontBBoxCalculator,
     StylesToFontConverter,
+    EthernetLinkWidget,
+    SerialLinkWidget,
     ...D3_MAP_IMPORTS
   ],
   exports: [D3MapComponent, ExperimentalMapComponent]

src/app/cartography/widgets/link.ts

@@ -20,7 +20,9 @@ export class LinkWidget implements Widget {
     private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
     private interfaceLabelWidget: InterfaceLabelWidget,
     private interfaceStatusWidget: InterfaceStatusWidget,
-    private selectionManager: SelectionManager
+    private selectionManager: SelectionManager,
+    private ethernetLinkWidget: EthernetLinkWidget,
+    private serialLinkWidget: SerialLinkWidget
   ) {}
 
   public draw(view: SVGSelection) {
@@ -88,11 +90,8 @@ export class LinkWidget implements Widget {
         .attr('height', '48px')
         .attr("xlink:href", "assets/resources/images/filter.svg");
 
-    const serial_link_widget = new SerialLinkWidget();
+    this.serialLinkWidget.draw(link_body_merge);
-    serial_link_widget.draw(link_body_merge);
+    this.ethernetLinkWidget.draw(link_body_merge);
-
-    const ethernet_link_widget = new EthernetLinkWidget();
-    ethernet_link_widget.draw(link_body_merge);
 
     link_body_merge
       .select<SVGPathElement>('path')

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

@@ -1,14 +1,19 @@
 import { path } from 'd3-path';
-
+import { EventEmitter, Injectable } from '@angular/core';
 import { Widget } from '../widget';
 import { SVGSelection } from '../../models/types';
 import { MapLink } from '../../models/map/map-link';
+import { LinkContextMenu } from '../../events/event-source';
 
 class EthernetLinkPath {
   constructor(public source: [number, number], public target: [number, number]) {}
 }
 
-export class EthernetLinkWidget implements Widget {
+@Injectable() export class EthernetLinkWidget implements Widget {
+  public onContextMenu = new EventEmitter<LinkContextMenu>();
+
+  constructor() {}
+  
   private linktoEthernetLink(link: MapLink) {
     return new EthernetLinkPath(
       [link.source.x + link.source.width / 2, link.source.y + link.source.height / 2],
@@ -27,9 +32,21 @@ export class EthernetLinkWidget implements Widget {
     const link_enter = link
       .enter()
       .append<SVGPathElement>('path')
-      .attr('class', 'ethernet_link');
+      .attr('class', 'ethernet_link')
+      .on('contextmenu', (datum) => {
+        let link: MapLink = datum as unknown as MapLink;
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, link));
+      });
 
-    link_enter.attr('stroke', '#000').attr('stroke-width', '2');
+    link_enter
+      .attr('stroke', '#000')
+      .attr('stroke-width', '2')
+      .on('contextmenu', (datum) => {
+        let link: MapLink = datum as unknown as MapLink;
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, link));
+      });
 
     const link_merge = link.merge(link_enter);
 

src/app/cartography/widgets/links/serial-link.ts

@@ -3,6 +3,8 @@ import { path } from 'd3-path';
 import { Widget } from '../widget';
 import { SVGSelection } from '../../models/types';
 import { MapLink } from '../../models/map/map-link';
+import { Injectable, EventEmitter } from '@angular/core';
+import { LinkContextMenu } from '../../events/event-source';
 
 class SerialLinkPath {
   constructor(
@@ -13,7 +15,11 @@ class SerialLinkPath {
   ) {}
 }
 
-export class SerialLinkWidget implements Widget {
+@Injectable() export class SerialLinkWidget implements Widget {
+  public onContextMenu = new EventEmitter<LinkContextMenu>();
+
+  constructor() {}
+  
   private linkToSerialLink(link: MapLink) {
     const source = {
       x: link.source.x + link.source.width / 2,
@@ -55,7 +61,12 @@ export class SerialLinkWidget implements Widget {
     const link_enter = link
       .enter()
       .append<SVGPathElement>('path')
-      .attr('class', 'serial_link');
+      .attr('class', 'serial_link')
+      .on('contextmenu', (datum) => {
+        let link: MapLink = datum as unknown as MapLink;
+        const evt = event;
+        this.onContextMenu.emit(new LinkContextMenu(evt, link));
+      });
 
     link_enter
       .attr('stroke', '#B22222')

src/app/components/project-map/project-map.component.spec.ts

@@ -54,6 +54,8 @@ import { MockedToasterService } from '../../services/toaster.service.spec';
 import { ToasterService } from '../../services/toaster.service';
 import { MockedActivatedRoute } from '../snapshots/list-of-snapshots/list-of-snaphshots.component.spec';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from '../../cartography/datasources/map-datasource';
+import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
+import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
 
 export class MockedProgressService {
   public activate() {}
@@ -265,6 +267,8 @@ describe('ProjectMapComponent', () => {
         { provide: MapChangeDetectorRef },
         { provide: NodeWidget },
         { provide: LinkWidget },
+        { provide: EthernetLinkWidget },
+        { provide: SerialLinkWidget },
         { provide: DrawingsWidget },
         { provide: LabelWidget },
         { provide: InterfaceLabelWidget },

src/app/components/project-map/project-map.component.ts

@@ -59,6 +59,8 @@ import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
 import { MapSettingsService } from '../../services/mapsettings.service';
 import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
+import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
+import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
 
 
 @Component({
@@ -133,7 +135,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private mapLinksDataSource: MapLinksDataSource,
     private mapDrawingsDataSource: MapDrawingsDataSource,
     private mapSymbolsDataSource: MapSymbolsDataSource,
-    private mapSettingsService: MapSettingsService
+    private mapSettingsService: MapSettingsService,
+    private ethernetLinkWidget: EthernetLinkWidget,
+    private serialLinkWidget: SerialLinkWidget
   ) {}
 
   ngOnInit() {
@@ -303,6 +307,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
     });
 
+    const onEthernetLinkContextMenu = this.ethernetLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
+      const link = this.mapLinkToLink.convert(eventLink.link);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
+    });
+
+    const onSerialLinkContextMenu = this.serialLinkWidget.onContextMenu.subscribe((eventLink: LinkContextMenu) => {
+      const link = this.mapLinkToLink.convert(eventLink.link);
+      this.contextMenu.openMenuForListOfElements([], [], [], [link], eventLink.event.pageY, eventLink.event.pageX);
+    });
+
     const onNodeContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
       const node = this.mapNodeToNode.convert(eventNode.node);
       this.contextMenu.openMenuForNode(node, eventNode.event.pageY, eventNode.event.pageX);
@@ -350,6 +364,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     });
 
     this.subscriptions.push(onLinkContextMenu);
+    this.subscriptions.push(onEthernetLinkContextMenu);
+    this.subscriptions.push(onSerialLinkContextMenu);
     this.subscriptions.push(onNodeContextMenu);
     this.subscriptions.push(onDrawingContextMenu);
     this.subscriptions.push(onContextMenu);