Move draw-link-tool

src/app/app.module.ts

@@ -73,6 +73,7 @@ import { MATERIAL_IMPORTS } from './material.imports';
 import { DrawingService } from './services/drawing.service';
 import { ProjectNameValidator } from './components/projects/models/projectNameValidator';
 import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
+import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
 
 
 if (environment.production) {
@@ -114,7 +115,8 @@ if (environment.production) {
     LocalServerComponent,
     ProgressComponent,
     ServerDiscoveryComponent,
-    NodeSelectInterfaceComponent
+    NodeSelectInterfaceComponent,
+    DrawLinkToolComponent
   ],
   imports: [
     NgbModule.forRoot(),

src/app/cartography/cartography.module.ts

@@ -2,8 +2,6 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule, MatIconModule } from '@angular/material';
 
-import { DrawLinkToolComponent } from './components/draw-link-tool/draw-link-tool.component';
-
 import { CssFixer } from './helpers/css-fixer';
 import { FontFixer } from './helpers/font-fixer';
 import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper';
@@ -52,7 +50,6 @@ import { MapSettingsManager } from './managers/map-settings-manager';
   declarations: [
     D3MapComponent,
     ExperimentalMapComponent,
-    DrawLinkToolComponent,
     ...ANGULAR_MAP_DECLARATIONS,
     SelectionControlComponent,
     SelectionSelectComponent,

src/app/cartography/components/d3-map/d3-map.component.html

@@ -8,7 +8,6 @@
   </filter>
 </svg>
 
-<app-draw-link-tool *ngIf="drawLinkTool"></app-draw-link-tool>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>

src/app/cartography/components/draw-link-tool/draw-link-tool.component.html

@@ -1 +0,0 @@
-<!-- <app-node-select-interface (onChooseInterface)="onChooseInterface($event)"></app-node-select-interface> -->

src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts

@@ -1,61 +0,0 @@
-import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
-import { DrawingLineWidget } from '../../widgets/drawing-line';
-import { Subscription } from 'rxjs';
-// import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component';
-import { MapLinkCreated } from '../../events/links';
-import { NodeClicked } from '../../events/nodes';
-import { NodeWidget } from '../../widgets/node';
-import { MapNode } from '../../models/map/map-node';
-import { MapPort } from '../../models/map/map-port';
-import { LinksEventSource } from '../../events/links-event-source';
-
-
-@Component({
-  selector: 'app-draw-link-tool',
-  templateUrl: './draw-link-tool.component.html',
-  styleUrls: ['./draw-link-tool.component.scss']
-})
-export class DrawLinkToolComponent implements OnInit, OnDestroy {
-  // @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
-  
-  // @Output('linkCreated') linkCreated = new EventEmitter<MapLinkCreated>();
-
-  private onNodeClicked: Subscription;
-
-  constructor(
-    private drawingLineTool: DrawingLineWidget,
-    private nodeWidget: NodeWidget,
-    private linksEventSource: LinksEventSource
-  ) { }
-
-  ngOnInit() {
-    // this.onNodeClicked = this.nodeWidget.onNodeClicked.subscribe((eventNode: NodeClicked) => {
-    //     this.nodeSelectInterfaceMenu.open(
-    //       eventNode.node,
-    //       eventNode.event.clientY,
-    //       eventNode.event.clientX
-    //     );
-    // });
-  }
-
-  ngOnDestroy() {
-    if (this.drawingLineTool.isDrawing()) {
-      this.drawingLineTool.stop();
-    }
-    // this.onNodeClicked.unsubscribe();
-  }
-
-  public onChooseInterface(event) {
-    const node: MapNode = event.node;
-    const port: MapPort = event.port;
-    if (this.drawingLineTool.isDrawing()) {
-      const data = this.drawingLineTool.stop();
-      this.linksEventSource.created.emit(new MapLinkCreated(data['node'], data['port'], node, port));
-    } else {
-      this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
-        'node': node,
-        'port': port
-      });
-    }
-  }
-}

src/app/cartography/converters/map/drawing-to-map-drawing-converter.ts

@@ -7,18 +7,18 @@ import { MapDrawing } from "../../models/map/map-drawing";
 
 @Injectable()
 export class DrawingToMapDrawingConverter implements Converter<Drawing, MapDrawing> {
-    constructor(
-    ) {}
-    
-    convert(drawing: Drawing) {
-        const mapDrawing = new MapDrawing();
-        mapDrawing.id = drawing.drawing_id;
-        mapDrawing.projectId = drawing.project_id;
-        mapDrawing.rotation = drawing.rotation;
-        mapDrawing.svg = drawing.svg;
-        mapDrawing.x = drawing.x;
-        mapDrawing.y = drawing.y;
-        mapDrawing.z = drawing.z;
-        return mapDrawing;
-    }
+  constructor(
+  ) {}
+  
+  convert(drawing: Drawing) {
+    const mapDrawing = new MapDrawing();
+    mapDrawing.id = drawing.drawing_id;
+    mapDrawing.projectId = drawing.project_id;
+    mapDrawing.rotation = drawing.rotation;
+    mapDrawing.svg = drawing.svg;
+    mapDrawing.x = drawing.x;
+    mapDrawing.y = drawing.y;
+    mapDrawing.z = drawing.z;
+    return mapDrawing;
+  }
 }

src/app/cartography/converters/map/label-to-map-label-converter.ts

@@ -7,17 +7,17 @@ import { MapLabel } from "../../models/map/map-label";
 
 @Injectable()
 export class LabelToMapLabelConverter implements Converter<Label, MapLabel> {
-    convert(label: Label, paramaters?: {[node_id: string]: string}) {
-        const mapLabel = new MapLabel();
-        mapLabel.rotation = label.rotation;
-        mapLabel.style = label.style;
-        mapLabel.text = label.text;
-        mapLabel.x = label.x;
-        mapLabel.y = label.y;
-        if (paramaters !== undefined) {
-          mapLabel.id = paramaters.node_id;
-          mapLabel.nodeId = paramaters.node_id;
-        }
-        return mapLabel;
+  convert(label: Label, paramaters?: {[node_id: string]: string}) {
+    const mapLabel = new MapLabel();
+    mapLabel.rotation = label.rotation;
+    mapLabel.style = label.style;
+    mapLabel.text = label.text;
+    mapLabel.x = label.x;
+    mapLabel.y = label.y;
+    if (paramaters !== undefined) {
+      mapLabel.id = paramaters.node_id;
+      mapLabel.nodeId = paramaters.node_id;
     }
+    return mapLabel;
+  }
 }

src/app/cartography/events/event-source.ts

@@ -7,3 +7,11 @@ export class DataEventSource<T> {
 }
 
 export class DraggedDataEvent<T> extends DataEventSource<T> {}
+
+export class ClickedDataEvent<T> {
+  constructor(
+    public datum: T,
+    public x: number,
+    public y: number
+  ) {}
+}

src/app/cartography/events/nodes-event-source.ts

@@ -1,5 +1,5 @@
 import { Injectable, EventEmitter } from "@angular/core";
-import { DraggedDataEvent } from "./event-source";
+import { DraggedDataEvent, ClickedDataEvent } from "./event-source";
 import { MapNode } from "../models/map/map-node";
 import { MapLabel } from "../models/map/map-label";
 
@@ -8,4 +8,5 @@ import { MapLabel } from "../models/map/map-label";
 export class NodesEventSource {
   public dragged = new EventEmitter<DraggedDataEvent<MapNode>>();
   public labelDragged = new EventEmitter<DraggedDataEvent<MapLabel>>();
+  public clicked = new EventEmitter<ClickedDataEvent<MapNode>>();
 }

src/app/cartography/widgets/node.ts

@@ -9,6 +9,8 @@ import { MapNode } from "../models/map/map-node";
 import { GraphDataManager } from "../managers/graph-data-manager";
 import { SelectionManager } from "../managers/selection-manager";
 import { LabelWidget } from "./label";
+import { NodesEventSource } from '../events/nodes-event-source';
+import { ClickedDataEvent } from '../events/event-source';
 
 
 @Injectable()
@@ -19,7 +21,8 @@ export class NodeWidget implements Widget {
   constructor(
     private graphDataManager: GraphDataManager,
     private selectionManager: SelectionManager,
-    private labelWidget: LabelWidget
+    private labelWidget: LabelWidget,
+    private nodesEventSource: NodesEventSource,
   ) {}
 
   public draw(view: SVGSelection) {
@@ -42,8 +45,9 @@ export class NodeWidget implements Widget {
           event.preventDefault();
           self.onContextMenu.emit(new NodeContextMenu(event, n));
         })
-        .on('click', (n: MapNode) => {
-          this.onNodeClicked.emit(new NodeClicked(event, n));
+        .on('click', (node: MapNode) => {
+          this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.clientX, event.clientY))
+          // this.onNodeClicked.emit(new NodeClicked(event, n));
         });
 
     // update image of node

src/app/components/project-map/draw-link-tool/draw-link-tool.component.html

@@ -0,0 +1 @@
+<app-node-select-interface (onChooseInterface)="onChooseInterface($event)"></app-node-select-interface>

src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts

@@ -0,0 +1,58 @@
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NodeSelectInterfaceComponent } from '../../../components/project-map/node-select-interface/node-select-interface.component';
+import { DrawingLineWidget } from '../../../cartography/widgets/drawing-line';
+import { NodesEventSource } from '../../../cartography/events/nodes-event-source';
+import { LinksEventSource } from '../../../cartography/events/links-event-source';
+import { MapNode } from '../../../cartography/models/map/map-node';
+import { MapPort } from '../../../cartography/models/map/map-port';
+import { MapLinkCreated } from '../../../cartography/events/links';
+
+
+@Component({
+  selector: 'app-draw-link-tool',
+  templateUrl: './draw-link-tool.component.html',
+  styleUrls: ['./draw-link-tool.component.scss']
+})
+export class DrawLinkToolComponent implements OnInit, OnDestroy {
+  @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
+  
+  private nodeClicked$: Subscription;
+
+  constructor(
+    private drawingLineTool: DrawingLineWidget,
+    private nodesEventSource: NodesEventSource,
+    private linksEventSource: LinksEventSource
+  ) { }
+
+  ngOnInit() {
+    this.nodeClicked$ = this.nodesEventSource.clicked.subscribe((clickedEvent) => {
+      this.nodeSelectInterfaceMenu.open(
+        clickedEvent.datum,
+        clickedEvent.y,
+        clickedEvent.x
+      );
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.drawingLineTool.isDrawing()) {
+      this.drawingLineTool.stop();
+    }
+    this.nodeClicked$.unsubscribe();
+  }
+
+  public onChooseInterface(event) {
+    const node: MapNode = event.node;
+    const port: MapPort = event.port;
+    if (this.drawingLineTool.isDrawing()) {
+      const data = this.drawingLineTool.stop();
+      this.linksEventSource.created.emit(new MapLinkCreated(data['node'], data['port'], node, port));
+    } else {
+      this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
+        'node': node,
+        'port': port
+      });
+    }
+  }
+}

src/app/components/project-map/node-context-menu/node-context-menu.component.ts

@@ -20,7 +20,7 @@ export class NodeContextMenuComponent implements OnInit {
 
   protected topPosition;
   protected leftPosition;
-  public node: Node;
+  protected node: Node;
 
   constructor(
     private sanitizer: DomSanitizer,

src/app/components/project-map/node-select-interface/node-select-interface.component.html

@@ -1,6 +1,6 @@
 <div class="context-menu" [style.left]="leftPosition" [style.top]="topPosition" *ngIf="node">
   <span [matMenuTriggerFor]="selectInterfaceMenu"></span>
-  <mat-menu #selectInterfaceMenu="matMenu">
+  <mat-menu #selectInterfaceMenu="matMenu" class="context-menu-items">
       <button mat-menu-item *ngFor="let port of node.ports" (click)="chooseInterface(port)">
         <mat-icon>add_circle_outline</mat-icon>
         <span>{{ port.name }}</span>

src/app/components/project-map/node-select-interface/node-select-interface.component.ts

@@ -15,8 +15,8 @@ export class NodeSelectInterfaceComponent implements OnInit {
 
   @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
 
-  private topPosition;
-  private leftPosition;
+  protected topPosition;
+  protected leftPosition;
   public node: Node;
 
   constructor(

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

@@ -104,3 +104,5 @@
   [project]="project"
   [server]="server">
 </app-project-map-shortcuts>
+
+<app-draw-link-tool *ngIf="tools.draw_link"></app-draw-link-tool>