Move link creation to cartography

src/app/app.module.ts

@@ -39,7 +39,6 @@ import { StartNodeActionComponent } from './components/project-map/node-context-
 import { StopNodeActionComponent } from './components/project-map/node-context-menu/actions/stop-node-action/stop-node-action.component';
 import { ApplianceComponent } from './components/appliance/appliance.component';
 import { ApplianceListDialogComponent } from './components/appliance/appliance-list-dialog/appliance-list-dialog.component';
-import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
 import { CartographyModule } from './cartography/cartography.module';
 import { ToasterService } from './services/toaster.service';
 import { ProjectWebServiceHandler } from "./handlers/project-web-service-handler";
@@ -99,7 +98,6 @@ if (environment.production) {
     StopNodeActionComponent,
     ApplianceComponent,
     ApplianceListDialogComponent,
-    NodeSelectInterfaceComponent,
     MoveLayerDownActionComponent,
     MoveLayerUpActionComponent,
     ProjectMapShortcutsComponent,

src/app/cartography/cartography.module.ts

@@ -25,13 +25,20 @@ import { RectDrawingWidget } from './widgets/drawings/rect-drawing';
 import { TextDrawingWidget } from './widgets/drawings/text-drawing';
 import { LineDrawingWidget } from './widgets/drawings/line-drawing';
 import { Context } from './models/context';
+import { DrawLinkToolComponent } from './components/draw-link-tool/draw-link-tool.component';
+import { NodeSelectInterfaceComponent } from './components/node-select-interface/node-select-interface.component';
+import { MatMenuModule, MatIconModule } from '@angular/material';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    MatMenuModule,
+    MatIconModule
   ],
   declarations: [
     MapComponent,
+    DrawLinkToolComponent,
+    NodeSelectInterfaceComponent
   ],
   providers: [
     CssFixer,
@@ -57,7 +64,7 @@ import { Context } from './models/context';
     LineDrawingWidget,
     RectDrawingWidget,
     TextDrawingWidget,
-    Context
+    Context,
   ],
   exports: [MapComponent]
 })

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

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

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DrawLinkToolComponent } from './draw-link-tool.component';
+
+describe('DrawLinkToolComponent', () => {
+  let component: DrawLinkToolComponent;
+  let fixture: ComponentFixture<DrawLinkToolComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DrawLinkToolComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DrawLinkToolComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,70 @@
+import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core';
+import { Port } from '../../../models/port';
+import { DrawingLineWidget } from '../../widgets/drawing-line';
+import { Node } from '../../models/node';
+import { NodesWidget, NodeEvent } from '../../widgets/nodes';
+import { Subscription } from 'rxjs';
+import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component';
+
+
+export class LinkCreated {
+  constructor(
+    public sourceNode: Node,
+    public sourcePort: Port,
+    public targetNode: Node,
+    public targetPort: Port
+  ){}
+}
+
+@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<LinkCreated>();
+
+  private onNodeClicked: Subscription;
+
+  constructor(
+    private drawingLineTool: DrawingLineWidget,
+    private nodesWidget: NodesWidget
+  ) { }
+
+  ngOnInit() {
+    this.onNodeClicked = this.nodesWidget.onNodeClicked.subscribe((eventNode: NodeEvent) => {
+        this.nodeSelectInterfaceMenu.open(eventNode.node, eventNode.event.clientY, eventNode.event.clientX);
+    });
+  }
+
+  ngOnDestroy() {
+    if(this.drawingLineTool.isDrawing()) {
+      this.drawingLineTool.stop();
+    }
+    this.onNodeClicked.unsubscribe();
+  }
+
+  // public toggleDrawLineMode() {
+  //   this.drawLineMode = !this.drawLineMode;
+  //   if (!this.drawLineMode) {
+  //     this.mapChild.graphLayout.getDrawingLineTool().stop();
+  //   }
+  // }
+
+  public onChooseInterface(event) {
+    const node: Node = event.node;
+    const port: Port = event.port;
+    // const drawingLineTool = this.mapChild.graphLayout.getDrawingLineTool();
+    if (this.drawingLineTool.isDrawing()) {
+      const data = this.drawingLineTool.stop();
+      this.linkCreated.emit(new LinkCreated(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/components/map/map.component.html

@@ -2,3 +2,5 @@
     class="map"
     preserveAspectRatio="none"
 ></svg>
+
+<app-draw-link-tool *ngIf="drawLinkTool" (linkCreated)="linkCreated($event)"></app-draw-link-tool>

src/app/cartography/components/map/map.component.ts

@@ -18,6 +18,7 @@ import { SelectionTool } from '../../tools/selection-tool';
 import { MovingTool } from '../../tools/moving-tool';
 import { LinksWidget } from '../../widgets/links';
 import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
+import { LinkCreated } from '../draw-link-tool/draw-link-tool.component';
 
 
 @Component({
@@ -35,6 +36,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() height = 600;
 
   @Output() onNodeDragged: EventEmitter<NodeEvent>;
+  @Output() onLinkCreated = new EventEmitter<LinkCreated>();
 
   private d3: D3;
   private parentNativeElement: any;
@@ -84,6 +86,8 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     this.selectionToolWidget.setEnabled(value);
     this.mapChangeDetectorRef.detectChanges();
   }
+
+  @Input('draw-link-tool') drawLinkTool: boolean;
   
   ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
     if (
@@ -156,6 +160,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     return new Size(width, height);
   }
 
+  protected linkCreated(evt) {
+    this.onLinkCreated.emit(evt);
+  }
+  
   private changeLayout() {
     if (this.parentNativeElement != null) {
       this.context.size = this.getSize();
@@ -208,6 +216,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     this.redraw();
   }
 
+  protected onLinkdddCreated(evt) {
+
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.changeLayout();

src/app/cartography/components/node-select-interface/node-select-interface.component.ts

@@ -1,8 +1,9 @@
-import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, OnDestroy} from '@angular/core';
 import {MatMenuTrigger} from "@angular/material";
 import {DomSanitizer} from "@angular/platform-browser";
 import {Node} from "../../../cartography/models/node";
 import {Port} from "../../../models/port";
+import { Subscription } from 'rxjs';
 
 
 @Component({
@@ -17,11 +18,13 @@ export class NodeSelectInterfaceComponent implements OnInit {
 
   protected topPosition;
   protected leftPosition;
+
   public node: Node;
 
   constructor(
     private sanitizer: DomSanitizer,
-    private changeDetector: ChangeDetectorRef) {}
+    private changeDetector: ChangeDetectorRef,
+    ) {}
 
   ngOnInit() {
     this.setPosition(0, 0);

src/app/cartography/tools/moving-tool.ts

@@ -9,8 +9,6 @@ import { Context} from "../models/context";
 
 @Injectable()
 export class MovingTool {
-  // private selection: SVGSelection;
-  
   private zoom: ZoomBehavior<SVGSVGElement, any>;
   private enabled = false;
   private needsDeactivate = false;

src/app/cartography/widgets/drawing-line.ts

@@ -15,7 +15,7 @@ export class DrawingLineWidget {
   private selection: SVGSelection;
   private drawing = false;
   private data = {};
-
+  
   public start(x: number, y: number, data: {}) {
     const self = this;
 

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

@@ -9,9 +9,10 @@
     [show-interface-labels]="project.show_interface_labels"
     [selection-tool]="tools.selection"
     [moving-tool]="tools.moving"
+    [draw-link-tool]="tools.draw_link"
     (onNodeDragged)="onNodeDragged($event)"
+    (onLinkCreated)="onLinkCreated($event)"
   ></app-map>
-
   <div class="project-toolbar">
     <mat-toolbar color="primary" class="project-toolbar">
 
@@ -49,7 +50,7 @@
       </mat-menu>
 
       <mat-toolbar-row *ngIf="!readonly">
-        <button mat-icon-button [color]="drawLineMode ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
+        <button mat-icon-button [color]="tools.draw_link ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
           <mat-icon>timeline</mat-icon>
         </button>
       </mat-toolbar-row>
@@ -78,7 +79,6 @@
   </div>
 
   <app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
-  <app-node-select-interface (onChooseInterface)="onChooseInterface($event)"></app-node-select-interface>
 </div>
 
 <app-progress></app-progress>

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

@@ -18,8 +18,6 @@ import { NodeContextMenuComponent } from "./node-context-menu/node-context-menu.
 import { Appliance } from "../../models/appliance";
 import { NodeService } from "../../services/node.service";
 import { Symbol } from "../../models/symbol";
-import { NodeSelectInterfaceComponent } from "./node-select-interface/node-select-interface.component";
-import { Port } from "../../models/port";
 import { LinkService } from "../../services/link.service";
 import { NodesDataSource } from "../../cartography/datasources/nodes-datasource";
 import { LinksDataSource } from "../../cartography/datasources/links-datasource";
@@ -30,6 +28,7 @@ import { DrawingsDataSource } from "../../cartography/datasources/drawings-datas
 import { ProgressService } from "../../common/progress/progress.service";
 import { NodeEvent } from '../../cartography/widgets/nodes';
 import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
+import { LinkCreated } from '../../cartography/components/draw-link-tool/draw-link-tool.component';
 
 
 @Component({
@@ -48,11 +47,11 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public server: Server;
 
   private ws: Subject<any>;
-  private drawLineMode =  false;
 
   protected tools = {
     'selection': true,
-    'moving': false
+    'moving': false,
+    'draw_link': false
   };
 
   private inReadOnlyMode = false;
@@ -62,7 +61,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   @ViewChild(MapComponent) mapChild: MapComponent;
 
   @ViewChild(NodeContextMenuComponent) nodeContextMenu: NodeContextMenuComponent;
-  @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
 
   private subscriptions: Subscription[];
 
@@ -198,16 +196,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.subscriptions.push(onContextMenu);
 
-    const onNodeClicked = this.mapChild.graphLayout.getNodesWidget().onNodeClicked.subscribe((eventNode: NodeEvent) => {
-      this.selectionManager.clearSelection();
-      this.selectionManager.setSelectedNodes([eventNode.node]);
-      if (this.drawLineMode) {
-        this.nodeSelectInterfaceMenu.open(eventNode.node, eventNode.event.clientY, eventNode.event.clientX);
-      }
-    });
-
-    this.subscriptions.push(onNodeClicked);
-
     this.subscriptions.push(
       this.selectionManager.subscribe(
         this.mapChild.graphLayout.getSelectionTool().rectangleSelected)
@@ -259,30 +247,12 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   }
 
   public toggleDrawLineMode() {
-    this.drawLineMode = !this.drawLineMode;
-    if (!this.drawLineMode) {
-      this.mapChild.graphLayout.getDrawingLineTool().stop();
-    }
+    this.tools.draw_link = !this.tools.draw_link;
   }
 
-  public onChooseInterface(event) {
-    const node: Node = event.node;
-    const port: Port = event.port;
-    const drawingLineTool = this.mapChild.graphLayout.getDrawingLineTool();
-    if (drawingLineTool.isDrawing()) {
-      const data = drawingLineTool.stop();
-      this.onLineCreation(data['node'], data['port'], node, port);
-    } else {
-      drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
-        'node': node,
-        'port': port
-      });
-    }
-  }
-
-  public onLineCreation(source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
+  public onLinkCreated(linkCreated: LinkCreated) {
     this.linkService
-      .createLink(this.server, source_node, source_port, target_node, target_port)
+      .createLink(this.server, linkCreated.sourceNode, linkCreated.sourcePort, linkCreated.targetNode, linkCreated.targetPort)
       .subscribe(() => {
         this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
           this.linksDataSource.set(links);

src/app/services/server.service.spec.ts

@@ -5,8 +5,6 @@ import { Server } from "../models/server";
 import { IndexedDbService } from "./indexed-db.service";
 import { AngularIndexedDB } from "angular2-indexeddb";
 import Spy = jasmine.Spy;
-import { resolve } from 'path';
-import { reject } from 'q';
 
 
 export class MockedServerService {

src/app/services/settings.service.spec.ts

@@ -2,7 +2,6 @@ import { TestBed, inject } from '@angular/core/testing';
 import { PersistenceService, StorageType } from "angular-persistence";
 
 import { Settings, SettingsService } from './settings.service';
-import createSpyObj = jasmine.createSpyObj;
 
 
 export class MockedSettingsService {