Apply code style

src/app/app-routing.module.ts

@@ -2,29 +2,29 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { ProjectMapComponent } from './components/project-map/project-map.component';
-import { ServersComponent } from "./components/servers/servers.component";
+import { ServersComponent } from './components/servers/servers.component';
-import { ProjectsComponent } from "./components/projects/projects.component";
+import { ProjectsComponent } from './components/projects/projects.component';
-import { DefaultLayoutComponent } from "./layouts/default-layout/default-layout.component";
+import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
-import { SettingsComponent } from "./components/settings/settings.component";
+import { SettingsComponent } from './components/settings/settings.component';
-import { LocalServerComponent } from "./components/local-server/local-server.component";
+import { LocalServerComponent } from './components/local-server/local-server.component';
-
 
 const routes: Routes = [
-  { path: '',  component: DefaultLayoutComponent,
+  {
+    path: '',
+    component: DefaultLayoutComponent,
     children: [
-      { path: '', redirectTo: 'servers', pathMatch: 'full'},
+      { path: '', redirectTo: 'servers', pathMatch: 'full' },
       { path: 'servers', component: ServersComponent },
       { path: 'local', component: LocalServerComponent },
       { path: 'server/:server_id/projects', component: ProjectsComponent },
-      { path: 'settings', component: SettingsComponent },
+      { path: 'settings', component: SettingsComponent }
     ]
   },
-  { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent },
+  { path: 'server/:server_id/project/:project_id', component: ProjectMapComponent }
 ];
 
-
 @NgModule({
-  imports: [ RouterModule.forRoot(routes) ],
+  imports: [RouterModule.forRoot(routes)],
-  exports: [ RouterModule ]
+  exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.component.spec.ts

@@ -2,13 +2,12 @@ import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';
-import { MatIconModule } from "@angular/material";
+import { MatIconModule } from '@angular/material';
-import { SettingsService } from "./services/settings.service";
+import { SettingsService } from './services/settings.service';
-import { PersistenceService } from "angular-persistence";
+import { PersistenceService } from 'angular-persistence';
-import { ElectronService, NgxElectronModule } from "ngx-electron";
+import { ElectronService, NgxElectronModule } from 'ngx-electron';
 import createSpyObj = jasmine.createSpyObj;
 
-
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
@@ -17,18 +16,9 @@ describe('AppComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-        declarations: [
+      declarations: [AppComponent],
-          AppComponent
+      imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
-        ],
+      providers: [SettingsService, PersistenceService]
-        imports: [
-          RouterTestingModule,
-          MatIconModule,
-          NgxElectronModule
-        ],
-        providers: [
-          SettingsService,
-          PersistenceService,
-        ]
     }).compileComponents();
 
     electronService = TestBed.get(ElectronService);

src/app/app.component.ts

@@ -1,30 +1,27 @@
 import { Component, OnInit } from '@angular/core';
-import { MatIconRegistry } from "@angular/material";
+import { MatIconRegistry } from '@angular/material';
-import { DomSanitizer } from "@angular/platform-browser";
+import { DomSanitizer } from '@angular/platform-browser';
-import { ElectronService } from "ngx-electron";
+import { ElectronService } from 'ngx-electron';
-import { SettingsService } from "./services/settings.service";
+import { SettingsService } from './services/settings.service';
-
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: [
+  styleUrls: ['./app.component.css']
-    './app.component.css'
-  ]
 })
 export class AppComponent implements OnInit {
   constructor(
     iconReg: MatIconRegistry,
     sanitizer: DomSanitizer,
     private settingsService: SettingsService,
-      private electronService: ElectronService) {
+    private electronService: ElectronService
-
+  ) {
     iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
   }
 
   ngOnInit(): void {
     if (this.electronService.isElectronApp) {
-      this.settingsService.subscribe((settings) => {
+      this.settingsService.subscribe(settings => {
         this.electronService.ipcRenderer.send('settings.changed', settings);
       });
     }

src/app/app.module.ts

@@ -2,7 +2,7 @@ import * as Raven from 'raven-js';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, ErrorHandler } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CdkTableModule } from "@angular/cdk/table";
+import { CdkTableModule } from '@angular/cdk/table';
 import { HttpClientModule } from '@angular/common/http';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -16,20 +16,20 @@ import { AppRoutingModule } from './app-routing.module';
 
 import { VersionService } from './services/version.service';
 import { ProjectService } from './services/project.service';
-import { SymbolService } from "./services/symbol.service";
+import { SymbolService } from './services/symbol.service';
-import { ServerService } from "./services/server.service";
+import { ServerService } from './services/server.service';
-import { IndexedDbService } from "./services/indexed-db.service";
+import { IndexedDbService } from './services/indexed-db.service';
-import { HttpServer, ServerErrorHandler } from "./services/http-server.service";
+import { HttpServer, ServerErrorHandler } from './services/http-server.service';
-import { SnapshotService } from "./services/snapshot.service";
+import { SnapshotService } from './services/snapshot.service';
-import { ProgressDialogService } from "./common/progress-dialog/progress-dialog.service";
+import { ProgressDialogService } from './common/progress-dialog/progress-dialog.service';
-import { NodeService } from "./services/node.service";
+import { NodeService } from './services/node.service';
-import { TemplateService } from "./services/template.service";
+import { TemplateService } from './services/template.service';
-import { LinkService } from "./services/link.service";
+import { LinkService } from './services/link.service';
 
 import { ProjectsComponent } from './components/projects/projects.component';
 import { AddBlankProjectDialogComponent } from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { ImportProjectDialogComponent } from './components/projects/import-project-dialog/import-project-dialog.component';
-import { ConfirmationDialogComponent} from './components/projects/confirmation-dialog/confirmation-dialog.component';
+import { ConfirmationDialogComponent } from './components/projects/confirmation-dialog/confirmation-dialog.component';
 import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
 import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component';
 import { AppComponent } from './app.component';
@@ -43,28 +43,28 @@ import { TemplateComponent } from './components/template/template.component';
 import { TemplateListDialogComponent } from './components/template/template-list-dialog/template-list-dialog.component';
 import { CartographyModule } from './cartography/cartography.module';
 import { ToasterService } from './services/toaster.service';
-import { ProjectWebServiceHandler } from "./handlers/project-web-service-handler";
+import { ProjectWebServiceHandler } from './handlers/project-web-service-handler';
-import { LinksDataSource } from "./cartography/datasources/links-datasource";
+import { LinksDataSource } from './cartography/datasources/links-datasource';
-import { NodesDataSource } from "./cartography/datasources/nodes-datasource";
+import { NodesDataSource } from './cartography/datasources/nodes-datasource';
-import { SymbolsDataSource } from "./cartography/datasources/symbols-datasource";
+import { SymbolsDataSource } from './cartography/datasources/symbols-datasource';
-import { SelectionManager } from "./cartography/managers/selection-manager";
+import { SelectionManager } from './cartography/managers/selection-manager';
-import { InRectangleHelper } from "./cartography/helpers/in-rectangle-helper";
+import { InRectangleHelper } from './cartography/helpers/in-rectangle-helper';
-import { DrawingsDataSource } from "./cartography/datasources/drawings-datasource";
+import { DrawingsDataSource } from './cartography/datasources/drawings-datasource';
 import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component';
 import { MoveLayerDownActionComponent } from './components/project-map/context-menu/actions/move-layer-down-action/move-layer-down-action.component';
 import { MoveLayerUpActionComponent } from './components/project-map/context-menu/actions/move-layer-up-action/move-layer-up-action.component';
 import { ProjectMapShortcutsComponent } from './components/project-map/project-map-shortcuts/project-map-shortcuts.component';
 import { SettingsComponent } from './components/settings/settings.component';
-import { SettingsService } from "./services/settings.service";
+import { SettingsService } from './services/settings.service';
 
 import { LocalServerComponent } from './components/local-server/local-server.component';
 import { ProgressComponent } from './common/progress/progress.component';
-import { ProgressService } from "./common/progress/progress.service";
+import { ProgressService } from './common/progress/progress.service';
-import { version } from "./version";
+import { version } from './version';
-import { ToasterErrorHandler } from "./common/error-handlers/toaster-error-handler";
+import { ToasterErrorHandler } from './common/error-handlers/toaster-error-handler';
-import { environment } from "../environments/environment";
+import { environment } from '../environments/environment';
-import { RavenState } from "./common/error-handlers/raven-state-communicator";
+import { RavenState } from './common/error-handlers/raven-state-communicator';
-import { ServerDiscoveryComponent } from "./components/servers/server-discovery/server-discovery.component";
+import { ServerDiscoveryComponent } from './components/servers/server-discovery/server-discovery.component';
 import { ServerDatabase } from './services/server.database';
 import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component';
 import { SnapshotsComponent } from './components/snapshots/snapshots.component';
@@ -89,19 +89,15 @@ import { StyleEditorDialogComponent } from './components/project-map/drawings-ed
 import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component';
 import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component';
 
-
 if (environment.production) {
-  Raven
+  Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
-    .config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
     shouldSendCallback: () => {
       return RavenState.shouldSend;
     },
     release: version
-    })
+  }).install();
-    .install();
 }
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -202,6 +198,6 @@ if (environment.production) {
     StyleEditorDialogComponent,
     TextEditorDialogComponent
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/cartography/angular-map.imports.ts

@@ -11,7 +11,6 @@ import { InterfaceLabelComponent } from './components/experimental-map/interface
 import { DraggableComponent } from './components/experimental-map/draggable/draggable.component';
 import { SelectionComponent } from './components/experimental-map/selection/selection.component';
 
-
 export const ANGULAR_MAP_DECLARATIONS = [
   NodeComponent,
   LinkComponent,

src/app/cartography/cartography.module.ts

@@ -32,7 +32,12 @@ import { PortToMapPortConverter } from './converters/map/port-to-map-port-conver
 import { SymbolToMapSymbolConverter } from './converters/map/symbol-to-map-symbol-converter';
 import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-map-link-node-converter';
 import { GraphDataManager } from './managers/graph-data-manager';
-import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from './datasources/map-datasource';
+import {
+  MapNodesDataSource,
+  MapLinksDataSource,
+  MapDrawingsDataSource,
+  MapSymbolsDataSource
+} from './datasources/map-datasource';
 import { LinksEventSource } from './events/links-event-source';
 import { D3MapComponent } from './components/d3-map/d3-map.component';
 import { ExperimentalMapComponent } from './components/experimental-map/experimental-map.component';
@@ -51,13 +56,8 @@ import { LineElementFactory } from './helpers/drawings-factory/line-element-fact
 import { TextEditorComponent } from './components/text-editor/text-editor.component';
 import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
 
-
 @NgModule({
-  imports: [
+  imports: [CommonModule, MatMenuModule, MatIconModule],
-    CommonModule,
-    MatMenuModule,
-    MatIconModule
-  ],
   declarations: [
     D3MapComponent,
     ExperimentalMapComponent,
@@ -113,6 +113,6 @@ import { DrawingAddingComponent } from './components/drawing-adding/drawing-addi
     StylesToFontConverter,
     ...D3_MAP_IMPORTS
   ],
-  exports: [ D3MapComponent, ExperimentalMapComponent ]
+  exports: [D3MapComponent, ExperimentalMapComponent]
 })
-export class CartographyModule { }
+export class CartographyModule {}

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

@@ -1,11 +1,5 @@
-<svg
+<svg #svg class="map" preserveAspectRatio="none">
-  #svg
+  <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
-  class="map"
-  preserveAspectRatio="none"
->
-  <filter id="grayscale">
-    <feColorMatrix id="feGrayscale" type="saturate" values="0"/>
-  </filter>
 </svg>
 
 <app-drawing-adding [svg]="svg"></app-drawing-adding>

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

@@ -1,5 +1,3 @@
 svg {
   display: block;
 }
-
-

src/app/cartography/components/d3-map/d3-map.component.spec.ts

@@ -8,9 +8,8 @@ describe('D3MapComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ D3MapComponent ]
+      declarations: [D3MapComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   // beforeEach(() => {

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

@@ -1,11 +1,21 @@
 import {
-  Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit, SimpleChange, EventEmitter, Output, ViewChild
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChange,
+  EventEmitter,
+  Output,
+  ViewChild
 } from '@angular/core';
 import { Selection, select } from 'd3-selection';
 
-import { GraphLayout } from "../../widgets/graph-layout";
+import { GraphLayout } from '../../widgets/graph-layout';
-import { Context } from "../../models/context";
+import { Context } from '../../models/context';
-import { Size } from "../../models/size";
+import { Size } from '../../models/size';
 import { Subscription } from 'rxjs';
 import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { SelectionTool } from '../../tools/selection-tool';
@@ -22,7 +32,6 @@ import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
 import { TextEditorComponent } from '../text-editor/text-editor.component';
 
-
 @Component({
   selector: 'app-d3-map',
   templateUrl: './d3-map.component.html',
@@ -50,7 +59,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   private drawLinkTool: boolean;
 
   protected settings = {
-    'show_interface_labels': true
+    show_interface_labels: true
   };
 
   constructor(
@@ -142,7 +151,10 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   public createGraph(domElement: HTMLElement) {
     const rootElement = select(domElement);
     this.svg = rootElement.select<SVGSVGElement>('svg');
-    this.graphLayout.connect(this.svg, this.context);
+    this.graphLayout.connect(
+      this.svg,
+      this.context
+    );
     this.graphLayout.draw(this.svg, this.context);
     this.mapChangeDetectorRef.hasBeenDrawn = true;
   }

src/app/cartography/components/draggable-selection/draggable-selection.component.spec.ts

@@ -22,7 +22,6 @@ import { MapLinkNode } from '../../models/map/map-link-node';
 import { select } from 'd3-selection';
 import { MapLink } from '../../models/map/map-link';
 
-
 describe('DraggableSelectionComponent', () => {
   let component: DraggableSelectionComponent;
   let fixture: ComponentFixture<DraggableSelectionComponent>;
@@ -80,7 +79,7 @@ describe('DraggableSelectionComponent', () => {
       }
     };
     const linksWidgetStub = {
-      redrawLink: () => {},
+      redrawLink: () => {}
     };
 
     const labelWidgetStub = {
@@ -101,14 +100,14 @@ describe('DraggableSelectionComponent', () => {
     };
 
     const nodesEventSourceStub = {
-      dragged: { emit: () => {}},
+      dragged: { emit: () => {} },
-      labelDragged: { emit: () => {}}
+      labelDragged: { emit: () => {} }
     };
     const drawingsEventSourceStub = {
-      dragged: { emit: () => {}}
+      dragged: { emit: () => {} }
     };
     const linksEventSourceStub = {
-      interfaceDragged: { emit: () => {}}
+      interfaceDragged: { emit: () => {} }
     };
 
     TestBed.configureTestingModule({
@@ -122,11 +121,10 @@ describe('DraggableSelectionComponent', () => {
         { provide: NodesEventSource, useValue: nodesEventSourceStub },
         { provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
         { provide: GraphDataManager, useValue: mockedGraphDataManager },
-        { provide: LinksEventSource, useValue: linksEventSourceStub },
+        { provide: LinksEventSource, useValue: linksEventSourceStub }
       ],
-      declarations: [ DraggableSelectionComponent ]
+      declarations: [DraggableSelectionComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {
@@ -151,7 +149,7 @@ describe('DraggableSelectionComponent', () => {
       linksWidgetStub = fixture.debugElement.injector.get(LinksWidget);
       selectionManagerStub = fixture.debugElement.injector.get(SelectionManager);
       node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       node.x = 1;
       node.y = 2;
     });
@@ -237,7 +235,7 @@ describe('DraggableSelectionComponent', () => {
       drawingsWidgetStub = fixture.debugElement.injector.get(DrawingsWidget);
       selectionManagerStub = fixture.debugElement.injector.get(SelectionManager);
       drawing = new MapDrawing();
-      drawing.id = "drawingid";
+      drawing.id = 'drawingid';
       drawing.x = 1;
       drawing.y = 2;
     });
@@ -297,7 +295,7 @@ describe('DraggableSelectionComponent', () => {
       labelWidgetStub = fixture.debugElement.injector.get(LabelWidget);
       selectionManagerStub = fixture.debugElement.injector.get(SelectionManager);
       label = new MapLabel();
-      label.id = "labelid";
+      label.id = 'labelid';
       label.x = 1;
       label.y = 2;
     });
@@ -319,7 +317,7 @@ describe('DraggableSelectionComponent', () => {
       spyOn(labelWidgetStub, 'redrawLabel');
       selectionManagerStub.setSelected([label]);
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       node.label = label;
       label.nodeId = node.id;
 
@@ -339,7 +337,7 @@ describe('DraggableSelectionComponent', () => {
     it('should not update label position when dragging and parent is selected', fakeAsync(() => {
       spyOn(labelWidgetStub, 'redrawLabel');
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       node.label = label;
       label.nodeId = node.id;
 
@@ -357,7 +355,6 @@ describe('DraggableSelectionComponent', () => {
       expect(label.y).toEqual(2);
     }));
 
-
     it('should emit event when label stopped dragging', fakeAsync(() => {
       const nodesEventSourceStub = fixture.debugElement.injector.get(NodesEventSource);
       const spyDragged = spyOn(nodesEventSourceStub.labelDragged, 'emit');
@@ -379,7 +376,7 @@ describe('DraggableSelectionComponent', () => {
       const nodesEventSourceStub = fixture.debugElement.injector.get(NodesEventSource);
       spyOn(nodesEventSourceStub.labelDragged, 'emit');
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       label.nodeId = node.id;
 
       selectionManagerStub.setSelected([label, node]);
@@ -407,7 +404,7 @@ describe('DraggableSelectionComponent', () => {
       linkNode.label = new MapLabel();
       linkNode.label.x = 1;
       linkNode.label.y = 2;
-      linkNode.id = "linknodeid";
+      linkNode.id = 'linknodeid';
     });
 
     it('should select interface label when started dragging', fakeAsync(() => {
@@ -427,14 +424,14 @@ describe('DraggableSelectionComponent', () => {
       spyOn(linksWidgetStub, 'redrawLink');
       selectionManagerStub.setSelected([linkNode]);
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       linkNode.nodeId = node.id;
 
       const secondLinkNode = new MapLinkNode();
       secondLinkNode.label = new MapLabel();
       secondLinkNode.label.x = 1;
       secondLinkNode.label.y = 2;
-      secondLinkNode.id = "secondlinknodeid";
+      secondLinkNode.id = 'secondlinknodeid';
 
       const link = new MapLink();
       link.nodes = [linkNode, secondLinkNode];
@@ -456,14 +453,14 @@ describe('DraggableSelectionComponent', () => {
       spyOn(linksWidgetStub, 'redrawLink');
       selectionManagerStub.setSelected([linkNode]);
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       linkNode.nodeId = node.id;
 
       const secondLinkNode = new MapLinkNode();
       secondLinkNode.label = new MapLabel();
       secondLinkNode.label.x = 1;
       secondLinkNode.label.y = 2;
-      secondLinkNode.id = "secondlinknodeid";
+      secondLinkNode.id = 'secondlinknodeid';
 
       const link = new MapLink();
       link.nodes = [secondLinkNode, linkNode];
@@ -484,7 +481,7 @@ describe('DraggableSelectionComponent', () => {
     it('should not update interface label position when dragging and parent node is selected', fakeAsync(() => {
       spyOn(linksWidgetStub, 'redrawLink');
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       linkNode.nodeId = node.id;
 
       selectionManagerStub.setSelected([linkNode, node]);
@@ -493,7 +490,7 @@ describe('DraggableSelectionComponent', () => {
       secondLinkNode.label = new MapLabel();
       secondLinkNode.label.x = 1;
       secondLinkNode.label.y = 2;
-      secondLinkNode.id = "secondlinknodeid";
+      secondLinkNode.id = 'secondlinknodeid';
 
       const link = new MapLink();
       link.nodes = [linkNode, secondLinkNode];
@@ -533,7 +530,7 @@ describe('DraggableSelectionComponent', () => {
       spyOn(linksEventSourceStub.interfaceDragged, 'emit');
 
       const node = new MapNode();
-      node.id = "nodeid";
+      node.id = 'nodeid';
       linkNode.nodeId = node.id;
 
       selectionManagerStub.setSelected([linkNode, node]);

src/app/cartography/components/draggable-selection/draggable-selection.component.ts

@@ -41,7 +41,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     private drawingsEventSource: DrawingsEventSource,
     private graphDataManager: GraphDataManager,
     private linksEventSource: LinksEventSource
-  ) { }
+  ) {}
 
   ngOnInit() {
     const svg = select(this.svg);
@@ -54,25 +54,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     ).subscribe((evt: DraggableStart<any>) => {
       const selected = this.selectionManager.getSelected();
       if (evt.datum instanceof MapNode) {
-        if (selected.filter((item) => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
+        if (selected.filter(item => item instanceof MapNode && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapDrawing) {
-        if (selected.filter((item) => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
+        if (selected.filter(item => item instanceof MapDrawing && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapLabel) {
-        if (selected.filter((item) => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
+        if (selected.filter(item => item instanceof MapLabel && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
 
       if (evt.datum instanceof MapLinkNode) {
-        if (selected.filter((item) => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
+        if (selected.filter(item => item instanceof MapLinkNode && item.id === evt.datum.id).length === 0) {
           this.selectionManager.setSelected([evt.datum]);
         }
       }
@@ -85,7 +85,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       this.interfaceWidget.draggable.drag
     ).subscribe((evt: DraggableDrag<any>) => {
       const selected = this.selectionManager.getSelected();
-      const selectedNodes = selected.filter((item) => item instanceof MapNode);
+      const selectedNodes = selected.filter(item => item instanceof MapNode);
       // update nodes
       selectedNodes.forEach((node: MapNode) => {
         node.x += evt.dx;
@@ -93,54 +93,66 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
 
         this.nodesWidget.redrawNode(svg, node);
 
-        const links = this.graphDataManager.getLinks().filter(
+        const links = this.graphDataManager
-          (link) => (link.target !== undefined && link.target.id === node.id) || (link.source !== undefined && link.source.id === node.id));
+          .getLinks()
+          .filter(
+            link =>
+              (link.target !== undefined && link.target.id === node.id) ||
+              (link.source !== undefined && link.source.id === node.id)
+          );
 
-        links.forEach((link) => {
+        links.forEach(link => {
           this.linksWidget.redrawLink(svg, link);
         });
       });
 
       // update drawings
-      selected.filter((item) => item instanceof MapDrawing).forEach((drawing: MapDrawing) => {
+      selected
+        .filter(item => item instanceof MapDrawing)
+        .forEach((drawing: MapDrawing) => {
           drawing.x += evt.dx;
           drawing.y += evt.dy;
           this.drawingsWidget.redrawDrawing(svg, drawing);
         });
 
       // update labels
-      selected.filter((item) => item instanceof MapLabel).forEach((label: MapLabel) => {
+      selected
-        const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
+        .filter(item => item instanceof MapLabel)
+        .forEach((label: MapLabel) => {
+          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
 
-        const node = this.graphDataManager.getNodes().filter((node) => node.id === label.nodeId)[0];
+          const node = this.graphDataManager.getNodes().filter(node => node.id === label.nodeId)[0];
           node.label.x += evt.dx;
           node.label.y += evt.dy;
           this.labelWidget.redrawLabel(svg, label);
         });
 
       // update interface labels
-      selected.filter((item) => item instanceof MapLinkNode).forEach((interfaceLabel: MapLinkNode) => {
+      selected
-        const isParentNodeSelected = selectedNodes.filter((node) => node.id === interfaceLabel.nodeId).length > 0;
+        .filter(item => item instanceof MapLinkNode)
+        .forEach((interfaceLabel: MapLinkNode) => {
+          const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
 
-        const link = this.graphDataManager.getLinks().filter((link) => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
+          const link = this.graphDataManager
-        if(link.nodes[0].id === interfaceLabel.id) {
+            .getLinks()
+            .filter(link => link.nodes[0].id === interfaceLabel.id || link.nodes[1].id === interfaceLabel.id)[0];
+          if (link.nodes[0].id === interfaceLabel.id) {
             link.nodes[0].label.x += evt.dx;
             link.nodes[0].label.y += evt.dy;
           }
-        if(link.nodes[1].id === interfaceLabel.id) {
+          if (link.nodes[1].id === interfaceLabel.id) {
             link.nodes[1].label.x += evt.dx;
             link.nodes[1].label.y += evt.dy;
           }
 
           this.linksWidget.redrawLink(svg, link);
         });
-
     });
 
     this.end = merge(
@@ -150,18 +162,22 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       this.interfaceWidget.draggable.end
     ).subscribe((evt: DraggableEnd<any>) => {
       const selected = this.selectionManager.getSelected();
-      const selectedNodes = selected.filter((item) => item instanceof MapNode);
+      const selectedNodes = selected.filter(item => item instanceof MapNode);
 
       selectedNodes.forEach((item: MapNode) => {
         this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
-      })
+      });
 
-      selected.filter((item) => item instanceof MapDrawing).forEach((item: MapDrawing) => {
+      selected
+        .filter(item => item instanceof MapDrawing)
+        .forEach((item: MapDrawing) => {
           this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
         });
 
-      selected.filter((item) => item instanceof MapLabel).forEach((label: MapLabel) => {
+      selected
-        const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
+        .filter(item => item instanceof MapLabel)
+        .forEach((label: MapLabel) => {
+          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
@@ -169,16 +185,16 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
           this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
         });
 
-      selected.filter((item) => item instanceof MapLinkNode).forEach((label: MapLinkNode) => {
+      selected
-        const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
+        .filter(item => item instanceof MapLinkNode)
+        .forEach((label: MapLinkNode) => {
+          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
           this.linksEventSource.interfaceDragged.emit(new DraggedDataEvent<MapLinkNode>(label, evt.dx, evt.dy));
         });
-
     });
-
   }
 
   ngOnDestroy() {
@@ -186,5 +202,4 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
     this.drag.unsubscribe();
     this.end.unsubscribe();
   }
-
 }

src/app/cartography/components/drawing-adding/drawing-adding.component.spec.ts

@@ -1,4 +1,4 @@
-import { DrawingAddingComponent } from "./drawing-adding.component";
+import { DrawingAddingComponent } from './drawing-adding.component';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
@@ -11,18 +11,13 @@ describe('DrawingAddingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-            imports: [
+      imports: [NoopAnimationsModule],
-                NoopAnimationsModule
-            ],
       providers: [
         { provide: DrawingsEventSource, useValue: drawingsEventSource },
         { provide: Context, useClass: Context }
       ],
-            declarations: [
+      declarations: [DrawingAddingComponent]
-                DrawingAddingComponent
+    }).compileComponents();
-            ]
-        })
-        .compileComponents();
   }));
 
   beforeEach(() => {
@@ -38,7 +33,7 @@ describe('DrawingAddingComponent', () => {
   it('should deactivate listener when none of the available drawings is selected', () => {
     spyOn(component, 'deactivate');
 
-        drawingsEventSource.selected.emit("");
+    drawingsEventSource.selected.emit('');
 
     expect(component.deactivate).toHaveBeenCalled();
   });
@@ -46,7 +41,7 @@ describe('DrawingAddingComponent', () => {
   it('should activate listener when drawing is selected', () => {
     spyOn(component, 'activate');
 
-        drawingsEventSource.selected.emit("rectangle");
+    drawingsEventSource.selected.emit('rectangle');
 
     expect(component.activate).toHaveBeenCalled();
   });

src/app/cartography/components/drawing-adding/drawing-adding.component.ts

@@ -1,10 +1,9 @@
-import { Component, Input, OnDestroy, OnInit } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Context } from '../../models/context';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { AddedDataEvent } from '../../events/event-source';
 import { Subscription } from 'rxjs';
 
-
 @Component({
   selector: 'app-drawing-adding',
   templateUrl: './drawing-adding.component.html',
@@ -16,18 +15,15 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
   private mapListener: Function;
   private drawingSelected: Subscription;
 
-    constructor(
+  constructor(private drawingsEventSource: DrawingsEventSource, private context: Context) {}
-        private drawingsEventSource: DrawingsEventSource,
-        private context: Context
-    ){}
 
-    ngOnInit(){
+  ngOnInit() {
-        this.drawingSelected =  this.drawingsEventSource.selected.subscribe((evt) => {
+    this.drawingSelected = this.drawingsEventSource.selected.subscribe(evt => {
-            evt === "" ? this.deactivate() : this.activate();
+      evt === '' ? this.deactivate() : this.activate();
     });
   }
 
-    activate(){
+  activate() {
     let listener = (event: MouseEvent) => {
       let x = event.clientX - this.context.getZeroZeroTransformationPoint().x;
       let y = event.clientY - this.context.getZeroZeroTransformationPoint().y;
@@ -41,11 +37,11 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
     this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
   }
 
-    deactivate(){
+  deactivate() {
     this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
   }
 
-    ngOnDestroy(){
+  ngOnDestroy() {
     this.drawingSelected.unsubscribe();
   }
 }

src/app/cartography/components/drawing-resizing/drawing-resizing.component.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 
-import { DrawingResizingComponent } from './drawing-resizing.component'
+import { DrawingResizingComponent } from './drawing-resizing.component';
 import { DrawingsWidget } from '../../widgets/drawings';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -11,9 +11,9 @@ import { MapDrawing } from '../../models/map/map-drawing';
 export class DrawingWidgetMock {
   resizingFinished = new EventEmitter<ResizingEnd<MapDrawing>>();
   evt: any;
-    constructor(){}
+  constructor() {}
 
-    emitEvent(){
+  emitEvent() {
     const evt = new ResizingEnd<MapDrawing>();
     evt.x = 0;
     evt.y = 0;
@@ -28,23 +28,18 @@ export class DrawingWidgetMock {
 describe('DrawingResizingComponent', () => {
   let component: DrawingResizingComponent;
   let fixture: ComponentFixture<DrawingResizingComponent>;
-    let drawingsWidgetMock = new DrawingWidgetMock;
+  let drawingsWidgetMock = new DrawingWidgetMock();
-    let drawingsEventSource = new DrawingsEventSource;
+  let drawingsEventSource = new DrawingsEventSource();
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-            imports: [
+      imports: [NoopAnimationsModule],
-                NoopAnimationsModule
-            ],
       providers: [
         { provide: DrawingsWidget, useValue: drawingsWidgetMock },
-                { provide: DrawingsEventSource, useValue: drawingsEventSource}
+        { provide: DrawingsEventSource, useValue: drawingsEventSource }
       ],
-            declarations: [
+      declarations: [DrawingResizingComponent]
-                DrawingResizingComponent
+    }).compileComponents();
-            ]
-        })
-        .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts

@@ -6,23 +6,23 @@ import { MapDrawing } from '../../models/map/map-drawing';
 import { ResizedDataEvent } from '../../events/event-source';
 import { ResizingEnd } from '../../events/resizing';
 
-
 @Component({
   selector: 'app-drawing-resizing',
-    template: `<ng-content></ng-content>`,
+  template: `
+    <ng-content></ng-content>
+  `,
   styleUrls: ['./drawing-resizing.component.scss']
 })
-export class DrawingResizingComponent implements OnInit, OnDestroy{
+export class DrawingResizingComponent implements OnInit, OnDestroy {
   resizingFinished: Subscription;
 
-    constructor(
+  constructor(private drawingsWidget: DrawingsWidget, private drawingsEventSource: DrawingsEventSource) {}
-        private drawingsWidget: DrawingsWidget,
-        private drawingsEventSource: DrawingsEventSource
-    ) {}
 
   ngOnInit() {
     this.resizingFinished = this.drawingsWidget.resizingFinished.subscribe((evt: ResizingEnd<MapDrawing>) => {
-            this.drawingsEventSource.resized.emit(new ResizedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y, evt.width, evt.height));
+      this.drawingsEventSource.resized.emit(
+        new ResizedDataEvent<MapDrawing>(evt.datum, evt.x, evt.y, evt.width, evt.height)
+      );
     });
   }
 

src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts

@@ -8,9 +8,8 @@ describe('DraggableComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DraggableComponent ]
+      declarations: [DraggableComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/draggable/draggable.component.ts

@@ -2,20 +2,15 @@ import { Component, OnInit, ElementRef, AfterViewInit, OnDestroy, Input, Output,
 import { Observable, Subscription } from 'rxjs';
 import { Point } from '../../../models/point';
 
-
 export class DraggableDraggedEvent {
-  constructor(
+  constructor(public x: number, public y: number, public dx: number, public dy: number) {}
-    public x: number,
-    public y: number,
-    public dx: number,
-    public dy: number
-  ) {}
 }
 
-
 @Component({
   selector: '[app-draggable]',
-  template:`<ng-content></ng-content>`,
+  template: `
+    <ng-content></ng-content>
+  `,
   styleUrls: ['./draggable.component.scss']
 })
 export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -31,15 +26,14 @@ export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
   private posX: number;
   private posY: number;
 
-  constructor(
+  constructor(private elementRef: ElementRef) {}
-    private elementRef: ElementRef
-  ) { }
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   ngAfterViewInit() {
-    const down = Observable.fromEvent(this.elementRef.nativeElement, 'mousedown').do((e: MouseEvent) => e.preventDefault())
+    const down = Observable.fromEvent(this.elementRef.nativeElement, 'mousedown').do((e: MouseEvent) =>
+      e.preventDefault()
+    );
 
     down.subscribe((e: MouseEvent) => {
       this.posX = this.item.x;
@@ -49,19 +43,13 @@ export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
       this.startY = e.clientY;
     });
 
-    const up = Observable
+    const up = Observable.fromEvent(document, 'mouseup').do((e: MouseEvent) => {
-      .fromEvent(document, 'mouseup')
-      .do((e: MouseEvent) => {
       e.preventDefault();
     });
 
-    const mouseMove = Observable
+    const mouseMove = Observable.fromEvent(document, 'mousemove').do((e: MouseEvent) => e.stopPropagation());
-      .fromEvent(document, 'mousemove')
-      .do((e: MouseEvent) => e.stopPropagation());
 
-    const scrollWindow = Observable
+    const scrollWindow = Observable.fromEvent(document, 'scroll').startWith({});
-      .fromEvent(document, 'scroll')
-      .startWith({});
 
     const move = Observable.combineLatest(mouseMove, scrollWindow);
 
@@ -76,9 +64,8 @@ export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
           this.item.y = Math.round(this.posY - y);
           this.dragging.emit(new DraggableDraggedEvent(this.item.x, this.item.y, -x, -y));
         })
-          .skipUntil(up
+        .skipUntil(
-              .take(1)
+          up.take(1).do((e: MouseEvent) => {
-              .do((e: MouseEvent) => {
             const x = this.startX - e.clientX;
             const y = this.startY - e.clientY;
 
@@ -86,7 +73,8 @@ export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
             this.item.y = Math.round(this.posY - y);
 
             this.dragged.emit(new DraggableDraggedEvent(this.item.x, this.item.y, -x, -y));
-              }))
+          })
+        )
         .take(1);
     });
 

src/app/cartography/components/experimental-map/drawing/drawing.component.html

@@ -5,28 +5,13 @@
   (dragging)="OnDragging($event)"
   (dragged)="OnDragged($event)"
 >
-  <svg:g 
+  <svg:g *ngIf="is(drawing.element, 'ellipse')" [app-ellipse]="drawing.element" />
-    *ngIf="is(drawing.element, 'ellipse')"
-    [app-ellipse]="drawing.element"
-  />
 
-  <svg:g 
+  <svg:g *ngIf="is(drawing.element, 'image')" [app-image]="drawing.element" />
-    *ngIf="is(drawing.element, 'image')"
-    [app-image]="drawing.element"
-  />
 
-  <svg:g 
+  <svg:g *ngIf="is(drawing.element, 'line')" [app-line]="drawing.element" />
-    *ngIf="is(drawing.element, 'line')"
-    [app-line]="drawing.element"
-  />
 
-  <svg:g 
+  <svg:g *ngIf="is(drawing.element, 'rect')" [app-rect]="drawing.element" />
-    *ngIf="is(drawing.element, 'rect')"
-    [app-rect]="drawing.element"
-  />
 
-  <svg:g 
+  <svg:g *ngIf="is(drawing.element, 'text')" [app-text]="drawing.element" />
-    *ngIf="is(drawing.element, 'text')"
-    [app-text]="drawing.element"
-  />
 </svg:g>

src/app/cartography/components/experimental-map/drawing/drawing.component.spec.ts

@@ -8,9 +8,8 @@ describe('DrawingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DrawingComponent ]
+      declarations: [DrawingComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawing.component.ts

@@ -20,8 +20,8 @@ export class DrawingComponent implements OnInit {
   constructor(
     private svgToDrawingConverter: SvgToDrawingConverter,
     private drawingsEventSource: DrawingsEventSource,
-    private cd: ChangeDetectorRef,
+    private cd: ChangeDetectorRef
-  ) { }
+  ) {}
 
   ngOnInit() {
     try {
@@ -39,7 +39,7 @@ export class DrawingComponent implements OnInit {
 
   OnDragged(evt) {
     this.cd.detectChanges();
-    this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(this.drawing, evt.dx, evt.dy))
+    this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(this.drawing, evt.dx, evt.dy));
   }
 
   is(element, type: string) {
@@ -47,19 +47,19 @@ export class DrawingComponent implements OnInit {
       return false;
     }
 
-    if (type === "ellipse") {
+    if (type === 'ellipse') {
       return element instanceof EllipseElement;
     }
-    if (type === "image") {
+    if (type === 'image') {
       return element instanceof ImageElement;
     }
-    if (type === "line") {
+    if (type === 'line') {
       return element instanceof LineElement;
     }
-    if (type === "rect") {
+    if (type === 'rect') {
       return element instanceof RectElement;
     }
-    if (type === "text") {
+    if (type === 'text') {
       return element instanceof TextElement;
     }
     return false;

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.spec.ts

@@ -8,9 +8,8 @@ describe('EllipseComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ EllipseComponent ]
+      declarations: [EllipseComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawings/ellipse/ellipse.component.ts

@@ -10,29 +10,26 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
 export class EllipseComponent implements OnInit {
   @Input('app-ellipse') ellipse: EllipseElement;
 
-  constructor(
+  constructor(private qtDasharrayFixer: QtDasharrayFixer) {}
-    private qtDasharrayFixer: QtDasharrayFixer
-    ) { }
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   get fill_opacity() {
-    if(isFinite(this.ellipse.fill_opacity)) {
+    if (isFinite(this.ellipse.fill_opacity)) {
       return this.ellipse.fill_opacity;
     }
     return null;
   }
 
   get stroke_width() {
-    if(isFinite(this.ellipse.stroke_width)) {
+    if (isFinite(this.ellipse.stroke_width)) {
       return this.ellipse.stroke_width;
     }
-    return null
+    return null;
   }
 
   get stroke_dasharray() {
-    if(this.ellipse.stroke_dasharray) {
+    if (this.ellipse.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.ellipse.stroke_dasharray);
     }
     return null;

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.spec.ts

@@ -8,9 +8,8 @@ describe('ImageComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ImageComponent ]
+      declarations: [ImageComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawings/image/image.component.ts

@@ -7,11 +7,9 @@ import { ImageElement } from '../../../../../models/drawings/image-element';
   styleUrls: ['./image.component.scss']
 })
 export class ImageComponent implements OnInit {
-
   @Input('app-image') image: ImageElement;
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 }

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.spec.ts

@@ -8,9 +8,8 @@ describe('LineComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LineComponent ]
+      declarations: [LineComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawings/line/line.component.ts

@@ -10,25 +10,21 @@ import { LineElement } from '../../../../../models/drawings/line-element';
 export class LineComponent implements OnInit {
   @Input('app-line') line: LineElement;
 
-  constructor(
+  constructor(private qtDasharrayFixer: QtDasharrayFixer) {}
-    private qtDasharrayFixer: QtDasharrayFixer
-    ) { }
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   get stroke_width() {
-    if(isFinite(this.line.stroke_width)) {
+    if (isFinite(this.line.stroke_width)) {
       return this.line.stroke_width;
     }
-    return null
-  }
-
-  get stroke_dasharray() {
-    if(this.line.stroke_dasharray) {
-      return this.qtDasharrayFixer.fix(this.line.stroke_dasharray);
-    }
     return null;
   }
 
+  get stroke_dasharray() {
+    if (this.line.stroke_dasharray) {
+      return this.qtDasharrayFixer.fix(this.line.stroke_dasharray);
+    }
+    return null;
+  }
 }

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.spec.ts

@@ -8,9 +8,8 @@ describe('RectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ RectComponent ]
+      declarations: [RectComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawings/rect/rect.component.ts

@@ -10,32 +10,28 @@ import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
 export class RectComponent implements OnInit {
   @Input('app-rect') rect: RectElement;
 
-  constructor(
+  constructor(private qtDasharrayFixer: QtDasharrayFixer) {}
-    private qtDasharrayFixer: QtDasharrayFixer
-    ) { }
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   get fill_opacity() {
-    if(isFinite(this.rect.fill_opacity)) {
+    if (isFinite(this.rect.fill_opacity)) {
       return this.rect.fill_opacity;
     }
     return null;
   }
 
   get stroke_width() {
-    if(isFinite(this.rect.stroke_width)) {
+    if (isFinite(this.rect.stroke_width)) {
       return this.rect.stroke_width;
     }
-    return null
-  }
-
-  get stroke_dasharray() {
-    if(this.rect.stroke_dasharray) {
-      return this.qtDasharrayFixer.fix(this.rect.stroke_dasharray);
-    }
     return null;
   }
 
+  get stroke_dasharray() {
+    if (this.rect.stroke_dasharray) {
+      return this.qtDasharrayFixer.fix(this.rect.stroke_dasharray);
+    }
+    return null;
+  }
 }

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.html

@@ -1,14 +1,12 @@
-<svg:text #text
+<svg:text
+  #text
   class="text_element noselect"
   [attr.style]="style"
   [attr.text-decoration]="textDecoration"
   [attr.fill]="text.fill"
   [attr.transform]="transformation"
 >
-  <svg:tspan
+  <svg:tspan *ngFor="let line of lines; index as i" xml:space="preserve" x="0" [attr.dy]="i == 0 ? '0em' : '1.4em'">
-    *ngFor="let line of lines; index as i"
+    {{ line }}
-    xml:space="preserve"
+  </svg:tspan>
-    x="0"
-    [attr.dy]="i == 0 ? '0em' : '1.4em'"
-  >{{line}}</svg:tspan>
 </svg:text>

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.spec.ts

@@ -8,9 +8,8 @@ describe('TextComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TextComponent ]
+      declarations: [TextComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts

@@ -17,12 +17,9 @@ export class TextComponent implements OnInit, DoCheck {
 
   lines: string[] = [];
 
-  transformation = "";
+  transformation = '';
 
-  constructor(
+  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) {}
-    private fontFixer: FontFixer,
-    private sanitizer: DomSanitizer
-  ) { }
 
   ngOnInit() {
     this.lines = this.getLines(this.text.text);
@@ -45,7 +42,7 @@ export class TextComponent implements OnInit, DoCheck {
     if (font.font_weight) {
       styles.push(`font-weight: ${this.text.font_weight}`);
     }
-    return this.sanitizer.bypassSecurityTrustStyle(styles.join("; "));
+    return this.sanitizer.bypassSecurityTrustStyle(styles.join('; '));
   }
 
   get textDecoration() {
@@ -54,7 +51,7 @@ export class TextComponent implements OnInit, DoCheck {
 
   calculateTransformation() {
     const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
-    if(tspans.length > 0) {
+    if (tspans.length > 0) {
       const height = this.textRef.nativeElement.getBBox().height / tspans.length;
       return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
     }
@@ -62,7 +59,6 @@ export class TextComponent implements OnInit, DoCheck {
   }
 
   getLines(text: string) {
-    return text.split(/\r?\n/)
+    return text.split(/\r?\n/);
   }
-
 }

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

@@ -1,9 +1,4 @@
-<svg #svg 
+<svg #svg class="map" preserveAspectRatio="none" [attr.width]="width" [attr.height]="height">
-    class="map"
-    preserveAspectRatio="none" 
-    [attr.width]="width"
-    [attr.height]="height"
-    >
   <g [attr.transform]="transform">
     <g *ngFor="let layer of layers">
       <g class="links">
@@ -15,27 +10,16 @@
         <!-- [node-changed]="nodeChanged" -->
       </g>
       <g class="nodes">
-                <g 
+        <g *ngFor="let node of layer.nodes" [app-node]="node" [symbols]="symbols"></g>
-                    *ngFor="let node of layer.nodes"
-                    [app-node]="node" 
-                    [symbols]="symbols"
-                ></g>
         <!-- [node-changed]="nodeChanged"
                 (valueChange)="onNodeChanged($event)" -->
       </g>
-            <g class="drawings">
+      <g class="drawings"><g *ngFor="let drawing of layer.drawings" [app-drawing]="drawing"></g></g>
-                <g 
-                    *ngFor="let drawing of layer.drawings"
-                    [app-drawing]="drawing" >
-                </g>
-            </g>
     </g>
   </g>
 
   <g [app-selection]="svg"></g>
   <!-- (selected)="onSelection($event)" -->
 
-    <filter id="grayscale">
+  <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
-        <feColorMatrix id="feGrayscale" type="saturate" values="0"/>
-    </filter>
 </svg>

src/app/cartography/components/experimental-map/experimental-map.component.scss

@@ -1,5 +1,3 @@
 svg {
   display: block;
 }
-
-

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

@@ -1,11 +1,20 @@
 import {
-  Component, ElementRef, HostListener, Input, OnChanges, OnDestroy, OnInit,
+  Component,
-  SimpleChange, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild
+  ElementRef,
+  HostListener,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChange,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  ViewChild
 } from '@angular/core';
 
-import { GraphLayout } from "../../widgets/graph-layout";
+import { GraphLayout } from '../../widgets/graph-layout';
-import { Context } from "../../models/context";
+import { Context } from '../../models/context';
-import { Size } from "../../models/size";
+import { Size } from '../../models/size';
 import { Subscription } from 'rxjs';
 import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
 import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
@@ -16,7 +25,6 @@ import { Symbol } from '../../../models/symbol';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { LayersManager } from '../../managers/layers-manager';
 
-
 @Component({
   selector: 'app-experimental-map',
   templateUrl: './experimental-map.component.html',
@@ -40,7 +48,7 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   private changesDetected: Subscription;
 
   protected settings = {
-    'show_interface_labels': true
+    show_interface_labels: true
   };
 
   constructor(
@@ -50,9 +58,8 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
     private canvasSizeDetector: CanvasSizeDetector,
     private changeDetectorRef: ChangeDetectorRef,
     private layersManger: LayersManager,
-    public graphLayout: GraphLayout,
+    public graphLayout: GraphLayout
-    ) {
+  ) {}
-  }
 
   @Input('show-interface-labels')
   set showInterfaceLabels(value) {
@@ -72,11 +79,9 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input('draw-link-tool') drawLinkTool: boolean;
 
-  @Input('readonly') set readonly(value) {
+  @Input('readonly') set readonly(value) {}
-  }
 
-  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
+  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {}
-  }
 
   ngOnInit() {
     // this.changeDetectorRef.detach();
@@ -90,7 +95,6 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
       this.changeDetectorRef.detectChanges();
     });
 
-
     // this.changedSubscription = this.changed.subscribe(() => {
     //   this.changeDetectorRef.detectChanges();
     // });
@@ -123,9 +127,6 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
     return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
   }
 
-
   @HostListener('window:resize', ['$event'])
-  onResize(event) {
+  onResize(event) {}
-
-  }
 }

src/app/cartography/components/experimental-map/interface-label/interface-label.component.html

@@ -1,9 +1,4 @@
-<svg:g
+<svg:g class="text_container" [attr.transform]="transform" width="100" height="100">
-  class="text_container"
-  [attr.transform]="transform"
-  width="100"
-  height="100"
-  >
   <svg:rect
     stroke-dasharray="3,3"
     stroke-width="0.5"
@@ -15,14 +10,7 @@
     [attr.height]="rectHeight"
   />
 
-  <svg:text
+  <svg:text #textSvg class="interface_label" [attr.style]="sanitizedStyle" [attr.x]="borderSize" [attr.y]="-borderSize">
-    #textSvg
-    class="interface_label"
-    [attr.style]="sanitizedStyle"
-    [attr.x]="borderSize"
-    [attr.y]="-borderSize"
-  >
     {{ text }}
   </svg:text>
 </svg:g>
-

src/app/cartography/components/experimental-map/interface-label/interface-label.component.spec.ts

@@ -8,9 +8,8 @@ describe('InterfaceLabelComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ InterfaceLabelComponent ]
+      declarations: [InterfaceLabelComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts

@@ -13,11 +13,11 @@ export class InterfaceLabelComponent implements OnInit {
   @ViewChild('textSvg') textRef: ElementRef;
 
   private label = {
-    'x': 0,
+    x: 0,
-    'y': 0,
+    y: 0,
-    'text': '',
+    text: '',
-    'style': '',
+    style: '',
-    'rotation': 0
+    rotation: 0
   };
 
   borderSize = 5;
@@ -30,10 +30,9 @@ export class InterfaceLabelComponent implements OnInit {
     private ref: ChangeDetectorRef,
     private sanitizer: DomSanitizer,
     private cssFixer: CssFixer
-  ) { }
+  ) {}
 
-  ngOnInit() {
+  ngOnInit() {}
-  }
 
   @Input('x')
   set x(value) {
@@ -82,7 +81,7 @@ export class InterfaceLabelComponent implements OnInit {
   }
 
   get rectWidth() {
-    return this.textRef.nativeElement.getBBox().width + this.borderSize*2;
+    return this.textRef.nativeElement.getBBox().width + this.borderSize * 2;
   }
 
   get rectHeight() {

src/app/cartography/components/experimental-map/link/link.component.html

@@ -5,7 +5,8 @@
   [attr.map-target]="link.target.id"
   [attr.transform]="transform"
 >
-  <svg:path #path
+  <svg:path
+    #path
     *ngIf="link.linkType == 'ethernet'"
     class="ethernet_link"
     stroke="#000"
@@ -13,7 +14,8 @@
     [attr.d]="d"
   />
 
-  <svg:path #path
+  <svg:path
+    #path
     *ngIf="link.linkType == 'serial'"
     class="serial_link"
     stroke="#B22222"
@@ -22,25 +24,15 @@
     [attr.d]="d"
   />
 
-  <svg:g 
+  <svg:g [app-status]="link.source.status" [direction]="'source'" [path]="path" [d]="d" />
-    [app-status]="link.source.status"
-    [direction]="'source'"
-    [path]="path"
-    [d]="d"
-  />
 
-  <svg:g 
+  <svg:g [app-status]="link.target.status" [direction]="'target'" [path]="path" [d]="d" />
-    [app-status]="link.target.status"
-    [direction]="'target'"
-    [path]="path"
-    [d]="d"
-  />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.source.x+link.nodes[0].label.x"
+    [x]="link.source.x + link.nodes[0].label.x"
-    [y]="link.source.y+link.nodes[0].label.y"
+    [y]="link.source.y + link.nodes[0].label.y"
     [text]="link.nodes[0].label.text"
     [style]="link.nodes[0].label.style"
     [rotation]="link.nodes[0].label.rotation"
@@ -49,11 +41,10 @@
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.target.x+link.nodes[1].label.x"
+    [x]="link.target.x + link.nodes[1].label.x"
-    [y]="link.target.y+link.nodes[1].label.y"
+    [y]="link.target.y + link.nodes[1].label.y"
     [text]="link.nodes[1].label.text"
     [style]="link.nodes[1].label.style"
     [rotation]="link.nodes[1].label.rotation"
   />
-
 </svg:g>

src/app/cartography/components/experimental-map/link/link.component.spec.ts

@@ -8,9 +8,8 @@ describe('LinkComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LinkComponent ]
+      declarations: [LinkComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/link/link.component.ts

@@ -1,7 +1,13 @@
 import {
-  Component, OnInit, Input, ViewChild, 
+  Component,
-  ElementRef, EventEmitter, ChangeDetectorRef, 
+  OnInit,
-  OnDestroy } from '@angular/core';
+  Input,
+  ViewChild,
+  ElementRef,
+  EventEmitter,
+  ChangeDetectorRef,
+  OnDestroy
+} from '@angular/core';
 import { Subscription } from 'rxjs';
 import { LinkStrategy } from './strategies/link-strategy';
 import { EthernetLinkStrategy } from './strategies/ethernet-link-strategy';
@@ -10,11 +16,10 @@ import { MultiLinkCalculatorHelper } from '../../../helpers/multi-link-calculato
 import { Node } from '../../../models/node';
 import { MapLink } from '../../../models/map/map-link';
 
-
 @Component({
   selector: '[app-link]',
   templateUrl: './link.component.html',
-  styleUrls: ['./link.component.scss'],
+  styleUrls: ['./link.component.scss']
 })
 export class LinkComponent implements OnInit, OnDestroy {
   @Input('app-link') link: MapLink;
@@ -28,10 +33,7 @@ export class LinkComponent implements OnInit, OnDestroy {
 
   private nodeChangedSubscription: Subscription;
 
-  constructor(
+  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) {}
-    private multiLinkCalculatorHelper: MultiLinkCalculatorHelper,
-    private ref: ChangeDetectorRef
-    ) {}
 
   ngOnInit() {
     this.ref.detectChanges();
@@ -54,12 +56,15 @@ export class LinkComponent implements OnInit, OnDestroy {
   }
 
   get transform() {
-    const translation = this.multiLinkCalculatorHelper.linkTranslation(this.link.distance, this.link.source, this.link.target);
+    const translation = this.multiLinkCalculatorHelper.linkTranslation(
+      this.link.distance,
+      this.link.source,
+      this.link.target
+    );
     return `translate (${translation.dx}, ${translation.dy})`;
   }
 
   get d() {
     return this.strategy.d(this.link);
   }
-
 }

src/app/cartography/components/experimental-map/link/strategies/ethernet-link-strategy.ts

@@ -1,13 +1,12 @@
-import { LinkStrategy } from "./link-strategy";
+import { LinkStrategy } from './link-strategy';
-import { path } from "d3-path";
+import { path } from 'd3-path';
-import { MapLink } from "../../../../models/map/map-link";
+import { MapLink } from '../../../../models/map/map-link';
-
 
 export class EthernetLinkStrategy implements LinkStrategy {
   public d(link: MapLink): string {
     const points = [
-        [link.source.x + link.source.width / 2., link.source.y + link.source.height / 2.],
+      [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]
     ];
 
     const line_generator = path();

src/app/cartography/components/experimental-map/link/strategies/link-strategy.ts

@@ -1,4 +1,4 @@
-import { MapLink } from "../../../../models/map/map-link";
+import { MapLink } from '../../../../models/map/map-link';
 
 export interface LinkStrategy {
   d(link: MapLink): string;

src/app/cartography/components/experimental-map/link/strategies/serial-link-strategy.ts

@@ -1,17 +1,16 @@
-import { path } from "d3-path";
+import { path } from 'd3-path';
-import { LinkStrategy } from "./link-strategy";
+import { LinkStrategy } from './link-strategy';
-import { MapLink } from "../../../../models/map/map-link";
+import { MapLink } from '../../../../models/map/map-link';
-
 
 export class SerialLinkStrategy implements LinkStrategy {
   private linkToPoints(link: MapLink) {
     const source = {
-        'x': link.source.x + link.source.width / 2,
+      x: link.source.x + link.source.width / 2,
-        'y': link.source.y + link.source.height / 2
+      y: link.source.y + link.source.height / 2
     };
     const target = {
-        'x': link.target.x + link.target.width / 2,
+      x: link.target.x + link.target.width / 2,
-        'y': link.target.y + link.target.height / 2
+      y: link.target.y + link.target.height / 2
     };
 
     const dx = target.x - source.x;
@@ -19,10 +18,7 @@ export class SerialLinkStrategy implements LinkStrategy {
 
     const vector_angle = Math.atan2(dy, dx);
     const rot_angle = -Math.PI / 4.0;
-      const vect_rot = [
+    const vect_rot = [Math.cos(vector_angle + rot_angle), Math.sin(vector_angle + rot_angle)];
-        Math.cos(vector_angle + rot_angle),
-        Math.sin(vector_angle + rot_angle)
-      ];
 
     const angle_source: [number, number] = [
       source.x + dx / 2.0 + 15 * vect_rot[0],
@@ -34,12 +30,7 @@ export class SerialLinkStrategy implements LinkStrategy {
       target.y - dy / 2.0 - 15 * vect_rot[1]
     ];
 
-      return [
+    return [[source.x, source.y], angle_source, angle_target, [target.x, target.y]];
-        [source.x, source.y], 
-        angle_source,
-        angle_target,
-        [target.x, target.y]
-      ];
   }
 
   d(link: MapLink): string {

src/app/cartography/components/experimental-map/node/node.component.html

@@ -1,7 +1,4 @@
-<svg:g 
+<svg:g class="node" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
-  class="node"
-  [attr.transform]="'translate(' + node.x + ',' + node.y + ')'"
->
   <svg:image
     #image
     [attr.width]="node.width"
@@ -13,13 +10,7 @@
     (dragging)="OnDragging($event)"
     (dragged)="OnDragged($event)"
   />
-  <svg:text
+  <svg:text #label class="label" [attr.style]="label_style" [attr.x]="label_x" [attr.y]="label_y">
-    #label
-    class="label"
-    [attr.style]="label_style"
-    [attr.x]="label_x"
-    [attr.y]="label_y"
-  >
     {{ node.label.text }}
   </svg:text>
 </svg:g>

src/app/cartography/components/experimental-map/node/node.component.spec.ts

@@ -8,9 +8,8 @@ describe('NodeComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NodeComponent ]
+      declarations: [NodeComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/node/node.component.ts

@@ -1,7 +1,17 @@
 import {
-  Component, OnInit, Input, ElementRef, 
+  Component,
-  ViewChild, ChangeDetectorRef, ChangeDetectionStrategy, Output,
+  OnInit,
-  EventEmitter, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+  Input,
+  ElementRef,
+  ViewChild,
+  ChangeDetectorRef,
+  ChangeDetectionStrategy,
+  Output,
+  EventEmitter,
+  OnDestroy,
+  OnChanges,
+  AfterViewInit
+} from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
 import { CssFixer } from '../../../helpers/css-fixer';
@@ -40,7 +50,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
     protected element: ElementRef,
     private cd: ChangeDetectorRef,
     private nodesEventSource: NodesEventSource
-  ) { }
+  ) {}
 
   ngOnInit() {
     // this.nodeChangedSubscription = this.nodeChanged.subscribe((node: Node) => {
@@ -72,10 +82,9 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
 
   OnDragged(evt) {
     this.cd.detectChanges();
-    this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(this.node, evt.dx, evt.dy))
+    this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(this.node, evt.dx, evt.dy));
   }
 
-
   get symbol(): string {
     const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
     if (symbol) {
@@ -86,7 +95,6 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
   }
 
   get label_style() {
-
     let styles = this.cssFixer.fix(this.node.label.style);
     styles = this.fontFixer.fixStyles(styles);
     return this.sanitizer.bypassSecurityTrustStyle(styles);
@@ -97,7 +105,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
       // center
       const bbox = this.label.nativeElement.getBBox();
 
-      return -bbox.width / 2.;
+      return -bbox.width / 2;
     }
     return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
   }
@@ -107,7 +115,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
 
     if (this.node.label.x === null) {
       // center
-      return - this.node.height / 2. - this.labelHeight ;
+      return -this.node.height / 2 - this.labelHeight;
     }
     return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
   }

src/app/cartography/components/experimental-map/selection/selection.component.html

@@ -1,10 +1 @@
-<svg:g
+<svg:g class="selection-line-tool"><svg:path class="selection" *ngIf="visible" [attr.d]="d"></svg:path></svg:g>
-  class="selection-line-tool"
->
-  <svg:path
-    class="selection"
-    *ngIf="visible"
-    [attr.d]="d"
-  >
-  </svg:path>
-</svg:g>

src/app/cartography/components/experimental-map/selection/selection.component.spec.ts

@@ -8,9 +8,8 @@ describe('SelectionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SelectionComponent ]
+      declarations: [SelectionComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/selection/selection.component.ts

@@ -20,22 +20,17 @@ export class SelectionComponent implements OnInit, AfterViewInit {
   visible = false;
   draggable: Subscription;
 
-
   @Output('selected') rectangleSelected = new EventEmitter<Rectangle>();
 
-  constructor(
+  constructor(private ref: ChangeDetectorRef) {}
-    private ref: ChangeDetectorRef
-  ) { }
-
-  ngOnInit() {
-  }
 
+  ngOnInit() {}
 
   ngAfterViewInit() {
     const down = Observable.fromEvent(this.svg, 'mousedown').do((e: MouseEvent) => e.preventDefault());
 
     down.subscribe((e: MouseEvent) => {
-      if(e.target !== this.svg) {
+      if (e.target !== this.svg) {
         return;
       }
 
@@ -48,16 +43,13 @@ export class SelectionComponent implements OnInit, AfterViewInit {
       this.ref.detectChanges();
     });
 
-    const up = Observable.fromEvent(document, 'mouseup')
+    const up = Observable.fromEvent(document, 'mouseup').do((e: MouseEvent) => {
-    .do((e: MouseEvent) => {
       e.preventDefault();
     });
 
-    const mouseMove = Observable.fromEvent(document, 'mousemove')
+    const mouseMove = Observable.fromEvent(document, 'mousemove').do((e: MouseEvent) => e.stopPropagation());
-    .do((e: MouseEvent) => e.stopPropagation());
 
-    const scrollWindow = Observable.fromEvent(document, 'scroll')
+    const scrollWindow = Observable.fromEvent(document, 'scroll').startWith({});
-    .startWith({});
 
     const move = Observable.combineLatest(mouseMove, scrollWindow);
 
@@ -65,7 +57,7 @@ export class SelectionComponent implements OnInit, AfterViewInit {
       return move
         .map(([mm, s]) => mm)
         .do((mm: MouseEvent) => {
-            if(!this.started) {
+          if (!this.started) {
             return;
           }
           this.visible = true;
@@ -76,10 +68,9 @@ export class SelectionComponent implements OnInit, AfterViewInit {
 
           this.selectedEvent([this.startX, this.startY], [this.width, this.height]);
         })
-          .skipUntil(up
+        .skipUntil(
-              .take(1)
+          up.take(1).do((e: MouseEvent) => {
-              .do((e: MouseEvent) => {
+            if (!this.started) {
-                if(!this.started) {
               return;
             }
             this.visible = false;
@@ -91,7 +82,8 @@ export class SelectionComponent implements OnInit, AfterViewInit {
             this.ref.detectChanges();
 
             this.selectedEvent([this.startX, this.startY], [this.width, this.height]);
-              }))
+          })
+        )
         .take(1);
     });
 
@@ -109,7 +101,7 @@ export class SelectionComponent implements OnInit, AfterViewInit {
   }
 
   private rect(x: number, y: number, w: number, h: number) {
-    return "M" + [x, y] + " l" + [w, 0] + " l" + [0, h] + " l" + [-w, 0] + "z";
+    return 'M' + [x, y] + ' l' + [w, 0] + ' l' + [0, h] + ' l' + [-w, 0] + 'z';
   }
 
   private selectedEvent(start, end) {

src/app/cartography/components/experimental-map/status/status.component.html

@@ -11,8 +11,8 @@
   <svg:rect
     *ngIf="status == 'stopped'"
     class="status_stopped"
-    [attr.x]="point.x - 10/2"
+    [attr.x]="point.x - 10 / 2"
-    [attr.y]="point.y - 10/2"
+    [attr.y]="point.y - 10 / 2"
     width="10"
     height="10"
     r="6"

src/app/cartography/components/experimental-map/status/status.component.spec.ts

@@ -8,9 +8,8 @@ describe('StatusComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ StatusComponent ]
+      declarations: [StatusComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/experimental-map/status/status.component.ts

@@ -1,25 +1,21 @@
 import { Component, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
 
-
 @Component({
   selector: '[app-status]',
   templateUrl: './status.component.html',
-  styleUrls: ['./status.component.scss'],
+  styleUrls: ['./status.component.scss']
 })
 export class StatusComponent {
   static STOPPED_STATUS_RECT_WIDTH = 10;
 
   data = {
-    'status': '',
+    status: '',
-    'path': null,
+    path: null,
-    'direction': null,
+    direction: null,
-    'd': null
+    d: null
   };
 
-  constructor(
+  constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}
-    protected element: ElementRef,
-    private ref: ChangeDetectorRef
-  ) {}
 
   @Input('app-status')
   set status(value) {
@@ -79,5 +75,4 @@ export class StatusComponent  {
     }
     return this.targetStatusPoint;
   }
-
 }

src/app/cartography/components/selection-control/selection-control.component.spec.ts

@@ -16,23 +16,22 @@ describe('SelectionControlComponent', () => {
   let selectionEventSource: SelectionEventSource;
 
   beforeEach(() => {
-
     const mockedGraphData = mock(GraphDataManager);
 
     const node_1 = new MapNode();
-    node_1.id = "test1";
+    node_1.id = 'test1';
-    node_1.name = "Node 1";
+    node_1.name = 'Node 1';
     node_1.x = 150;
     node_1.y = 150;
 
     const node_2 = new MapNode();
-    node_2.id = "test2";
+    node_2.id = 'test2';
-    node_2.name = "Node 2";
+    node_2.name = 'Node 2';
     node_2.x = 300;
     node_2.y = 300;
 
     const link_1 = new MapLink();
-    link_1.id = "test1";
+    link_1.id = 'test1';
 
     when(mockedGraphData.getNodes()).thenReturn([node_1, node_2]);
     when(mockedGraphData.getLinks()).thenReturn([link_1]);
@@ -50,7 +49,7 @@ describe('SelectionControlComponent', () => {
 
   afterEach(() => {
     component.ngOnDestroy();
-  })
+  });
 
   it('should create', () => {
     expect(component).toBeTruthy();

src/app/cartography/components/selection-control/selection-control.component.ts

@@ -19,60 +19,66 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
     private graphDataManager: GraphDataManager,
     private inRectangleHelper: InRectangleHelper,
     private selectionManager: SelectionManager
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.onSelection = this.selectionEventSource.selected.subscribe((rectangle: Rectangle) => {
-      const selectedNodes = this.graphDataManager.getNodes().filter((node) => {
+      const selectedNodes = this.graphDataManager.getNodes().filter(node => {
-        return this.inRectangleHelper.inRectangle(rectangle, node.x, node.y)
+        return this.inRectangleHelper.inRectangle(rectangle, node.x, node.y);
       });
 
-      const selectedLinks = this.graphDataManager.getLinks().filter((link) => {
+      const selectedLinks = this.graphDataManager.getLinks().filter(link => {
-        return this.inRectangleHelper.inRectangle(rectangle, link.x, link.y)
+        return this.inRectangleHelper.inRectangle(rectangle, link.x, link.y);
       });
 
-      const selectedDrawings = this.graphDataManager.getDrawings().filter((drawing) => {
+      const selectedDrawings = this.graphDataManager.getDrawings().filter(drawing => {
-        return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y)
+        return this.inRectangleHelper.inRectangle(rectangle, drawing.x, drawing.y);
       });
 
-      const selectedLabels = this.graphDataManager.getNodes().filter((node) => {
+      const selectedLabels = this.graphDataManager
+        .getNodes()
+        .filter(node => {
           if (node.label === undefined) {
             return false;
           }
           const labelX = node.x + node.label.x;
           const labelY = node.y + node.label.y;
           return this.inRectangleHelper.inRectangle(rectangle, labelX, labelY);
-      }).map((node) => node.label);
+        })
+        .map(node => node.label);
 
-      const selectedInterfacesLabelsSources = this.graphDataManager.getLinks().filter((link) => {
+      const selectedInterfacesLabelsSources = this.graphDataManager
+        .getLinks()
+        .filter(link => {
           if (link.source === undefined || link.nodes.length != 2 || link.nodes[0].label === undefined) {
             return false;
           }
           const interfaceLabelX = link.source.x + link.nodes[0].label.x;
           const interfaceLabelY = link.source.y + link.nodes[0].label.y;
           return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
-      }).map((link) => link.nodes[0]);
+        })
+        .map(link => link.nodes[0]);
 
-      const selectedInterfacesLabelsTargets = this.graphDataManager.getLinks().filter((link) => {
+      const selectedInterfacesLabelsTargets = this.graphDataManager
+        .getLinks()
+        .filter(link => {
           if (link.target === undefined || link.nodes.length != 2 || link.nodes[1].label === undefined) {
             return false;
           }
           const interfaceLabelX = link.target.x + link.nodes[1].label.x;
           const interfaceLabelY = link.target.y + link.nodes[1].label.y;
           return this.inRectangleHelper.inRectangle(rectangle, interfaceLabelX, interfaceLabelY);
-      }).map((link) => link.nodes[1]);
+        })
+        .map(link => link.nodes[1]);
 
-      const selectedInterfaces = [
+      const selectedInterfaces = [...selectedInterfacesLabelsSources, ...selectedInterfacesLabelsTargets];
-        ...selectedInterfacesLabelsSources,
-        ...selectedInterfacesLabelsTargets,
-      ]
 
       const selected = [
         ...selectedNodes,
         ...selectedLinks,
         ...selectedDrawings,
         ...selectedLabels,
-        ...selectedInterfaces,
+        ...selectedInterfaces
       ];
 
       this.selectionManager.setSelected(selected);
@@ -82,5 +88,4 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.onSelection.unsubscribe();
   }
-
 }

src/app/cartography/components/selection-select/selection-select.component.spec.ts

@@ -8,9 +8,8 @@ describe('SelectionSelectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SelectionSelectComponent ]
+      declarations: [SelectionSelectComponent]
-    })
+    }).compileComponents();
-    .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/selection-select/selection-select.component.ts

@@ -12,10 +12,7 @@ export class SelectionSelectComponent implements OnInit, OnDestroy {
   private onSelected: Subscription;
   private onUnselected: Subscription;
 
-  constructor(
+  constructor(private selectionManager: SelectionManager, private mapChangeDetectorRef: MapChangeDetectorRef) {}
-    private selectionManager: SelectionManager,
-    private mapChangeDetectorRef: MapChangeDetectorRef
-  ) { }
 
   ngOnInit() {
     this.onSelected = this.selectionManager.selected.subscribe(() => {
@@ -30,5 +27,4 @@ export class SelectionSelectComponent implements OnInit, OnDestroy {
     this.onSelected.unsubscribe();
     this.onUnselected.unsubscribe();
   }
-
 }

src/app/cartography/components/text-editor/text-editor.component.html

@@ -1,5 +1,10 @@
-<div #temporaryTextElement id="temporaryElement" class="temporaryElement" contenteditable="true" 
+<div
-    [style.top]=topPosition 
+  #temporaryTextElement
-    [style.left]=leftPosition>
+  id="temporaryElement"
-    {{innerText}}
+  class="temporaryElement"
+  contenteditable="true"
+  [style.top]="topPosition"
+  [style.left]="leftPosition"
+>
+  {{ innerText }}
 </div>

src/app/cartography/components/text-editor/text-editor.component.scss

@@ -1,4 +1,4 @@
-.temporaryElement{
+.temporaryElement {
   padding-left: 4px;
   width: fit-content;
   position: absolute;

src/app/cartography/components/text-editor/text-editor.component.spec.ts

@@ -1,4 +1,4 @@
-import { TextEditorComponent } from "./text-editor.component";
+import { TextEditorComponent } from './text-editor.component';
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
@@ -12,20 +12,15 @@ describe('TemporaryTextElementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-            imports: [
+      imports: [NoopAnimationsModule],
-                NoopAnimationsModule
-            ],
       providers: [
         { provide: DrawingsEventSource, useClass: DrawingsEventSource },
         { provide: ToolsService, useClass: ToolsService },
         { provide: Context, useClass: Context },
         { provide: Renderer2, useClass: Renderer2 }
       ],
-            declarations: [
+      declarations: [TextEditorComponent]
-                TextEditorComponent
+    }).compileComponents();
-            ]
-        })
-        .compileComponents();
   }));
 
   beforeEach(() => {

src/app/cartography/components/text-editor/text-editor.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2 } from "@angular/core";
+import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
 import { ToolsService } from '../../../services/tools.service';
@@ -7,7 +7,6 @@ import { TextElement } from '../../models/drawings/text-element';
 import { Context } from '../../models/context';
 import { Subscription } from 'rxjs';
 
-
 @Component({
   selector: 'app-text-editor',
   templateUrl: './text-editor.component.html',
@@ -34,17 +33,17 @@ export class TextEditorComponent implements OnInit, OnDestroy {
     private toolsService: ToolsService,
     private context: Context,
     private renderer: Renderer2
-    ){}
+  ) {}
 
-    ngOnInit(){
+  ngOnInit() {
     this.textAddingSubscription = this.toolsService.isTextAddingToolActivated.subscribe((isActive: boolean) => {
-            isActive ? this.activateTextAdding() : this.deactivateTextAdding()
+      isActive ? this.activateTextAdding() : this.deactivateTextAdding();
     });
 
     this.activateTextEditing();
   }
 
-    activateTextAdding(){
+  activateTextAdding() {
     let addTextListener = (event: MouseEvent) => {
       this.leftPosition = event.clientX.toString() + 'px';
       this.topPosition = (event.clientY + window.pageYOffset).toString() + 'px';
@@ -52,41 +51,46 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       this.temporaryTextElement.nativeElement.focus();
 
       let textListener = () => {
-                this.drawingsEventSource.textAdded.emit(new TextAddedDataEvent(this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ""), event.clientX, event.clientY));
+        this.drawingsEventSource.textAdded.emit(
+          new TextAddedDataEvent(
+            this.temporaryTextElement.nativeElement.innerText.replace(/\n$/, ''),
+            event.clientX,
+            event.clientY
+          )
+        );
         this.deactivateTextAdding();
         this.innerText = '';
-                this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
+        this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
-            }
+      };
       this.textListener = textListener;
       this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
-        }
+    };
 
     this.deactivateTextAdding();
     this.mapListener = addTextListener;
     this.svg.addEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
   }
 
-    deactivateTextAdding(){
+  deactivateTextAdding() {
     this.svg.removeEventListener('click', this.mapListener as EventListenerOrEventListenerObject);
   }
 
-    activateTextEditing(){
+  activateTextEditing() {
     const rootElement = select(this.svg);
 
-        rootElement.selectAll<SVGTextElement, TextElement>('text.text_element')
+    rootElement
-            .on("dblclick", (elem, index, textElements) => {
+      .selectAll<SVGTextElement, TextElement>('text.text_element')
+      .on('dblclick', (elem, index, textElements) => {
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
         this.editedElement = elem;
 
-                select(textElements[index])
+        select(textElements[index]).attr('visibility', 'hidden');
-                    .attr("visibility", "hidden");
 
-                select(textElements[index])
+        select(textElements[index]).classed('editingMode', true);
-                    .classed("editingMode", true);
 
-                    this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute("drawing_id");
+        this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
-                    var transformData = textElements[index].parentElement.getAttribute("transform").split(/\(|\)/);
+        var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
         var x = Number(transformData[1].split(/,/)[0]) + this.context.getZeroZeroTransformationPoint().x;
         var y = Number(transformData[1].split(/,/)[1]) + this.context.getZeroZeroTransformationPoint().y;
         this.leftPosition = x.toString() + 'px';
@@ -100,30 +104,33 @@ export class TextEditorComponent implements OnInit, OnDestroy {
 
         let listener = () => {
           let innerText = this.temporaryTextElement.nativeElement.innerText;
-                        this.drawingsEventSource.textEdited.emit(new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ""), this.editedElement));
+          this.drawingsEventSource.textEdited.emit(
+            new TextEditedDataEvent(this.editingDrawingId, innerText.replace(/\n$/, ''), this.editedElement)
+          );
 
-                        rootElement.selectAll<SVGTextElement, TextElement>('text.editingMode')
+          rootElement
-                            .attr("visibility", "visible")
+            .selectAll<SVGTextElement, TextElement>('text.editingMode')
-                            .classed("editingMode", false);
+            .attr('visibility', 'visible')
+            .classed('editingMode', false);
 
           this.innerText = '';
           this.temporaryTextElement.nativeElement.innerText = '';
-                        this.temporaryTextElement.nativeElement.removeEventListener("focusout", this.textListener);
+          this.temporaryTextElement.nativeElement.removeEventListener('focusout', this.textListener);
 
           this.clearStyle();
           this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'none');
         };
         this.textListener = listener;
-                    this.temporaryTextElement.nativeElement.addEventListener("focusout", this.textListener);
+        this.temporaryTextElement.nativeElement.addEventListener('focusout', this.textListener);
         this.temporaryTextElement.nativeElement.focus();
       });
   }
 
-    ngOnDestroy(){
+  ngOnDestroy() {
     this.textAddingSubscription.unsubscribe();
   }
 
-    clearStyle(){
+  clearStyle() {
     this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', '#000000');
     this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', 'Noto Sans');
     this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', '11pt');

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

@@ -1,14 +1,12 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { Drawing } from "../../models/drawing";
-import { MapDrawing } from "../../models/map/map-drawing";
 
+import { Converter } from '../converter';
+import { Drawing } from '../../models/drawing';
+import { MapDrawing } from '../../models/map/map-drawing';
 
 @Injectable()
 export class DrawingToMapDrawingConverter implements Converter<Drawing, MapDrawing> {
-  constructor(
+  constructor() {}
-  ) {}
 
   convert(drawing: Drawing) {
     const mapDrawing = new MapDrawing();

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

@@ -1,13 +1,12 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
-import { Converter } from "../converter";
+import { Converter } from '../converter';
-import { Label } from "../../models/label";
+import { Label } from '../../models/label';
-import { MapLabel } from "../../models/map/map-label";
+import { MapLabel } from '../../models/map/map-label';
 import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
 import { CssFixer } from '../../helpers/css-fixer';
 import { FontFixer } from '../../helpers/font-fixer';
 
-
 @Injectable()
 export class LabelToMapLabelConverter implements Converter<Label, MapLabel> {
   constructor(
@@ -15,7 +14,7 @@ export class LabelToMapLabelConverter implements Converter<Label, MapLabel> {
     private cssFixer: CssFixer,
     private fontFixer: FontFixer
   ) {}
-  convert(label: Label, paramaters?: {[node_id: string]: string}) {
+  convert(label: Label, paramaters?: { [node_id: string]: string }) {
     const mapLabel = new MapLabel();
     mapLabel.rotation = label.rotation;
     mapLabel.style = label.style;

src/app/cartography/converters/map/link-node-to-map-link-node-converter.ts

@@ -1,18 +1,15 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { LabelToMapLabelConverter } from "./label-to-map-label-converter";
-import { LinkNode } from "../../../models/link-node";
-import { MapLinkNode } from "../../models/map/map-link-node";
 
+import { Converter } from '../converter';
+import { LabelToMapLabelConverter } from './label-to-map-label-converter';
+import { LinkNode } from '../../../models/link-node';
+import { MapLinkNode } from '../../models/map/map-link-node';
 
 @Injectable()
 export class LinkNodeToMapLinkNodeConverter implements Converter<LinkNode, MapLinkNode> {
-    constructor(
+  constructor(private labelToMapLabel: LabelToMapLabelConverter) {}
-        private labelToMapLabel: LabelToMapLabelConverter,
-    ) {}
 
-    convert(linkNode: LinkNode, paramaters?: {[link_id: string]: string}) {
+  convert(linkNode: LinkNode, paramaters?: { [link_id: string]: string }) {
     const mapLinkNode = new MapLinkNode();
     mapLinkNode.nodeId = linkNode.node_id;
     mapLinkNode.adapterNumber = linkNode.adapter_number;

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

@@ -1,16 +1,13 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { LinkNodeToMapLinkNodeConverter } from "./link-node-to-map-link-node-converter";
-import { Link } from "../../../models/link";
-import { MapLink } from "../../models/map/map-link";
 
+import { Converter } from '../converter';
+import { LinkNodeToMapLinkNodeConverter } from './link-node-to-map-link-node-converter';
+import { Link } from '../../../models/link';
+import { MapLink } from '../../models/map/map-link';
 
 @Injectable()
 export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
-    constructor(
+  constructor(private linkNodeToMapLinkNode: LinkNodeToMapLinkNodeConverter) {}
-        private linkNodeToMapLinkNode: LinkNodeToMapLinkNodeConverter
-    ) {}
 
   convert(link: Link) {
     const mapLink = new MapLink();
@@ -19,7 +16,7 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     mapLink.captureFilePath = link.capture_file_path;
     mapLink.capturing = link.capturing;
     mapLink.linkType = link.link_type;
-        mapLink.nodes = link.nodes.map((linkNode) => this.linkNodeToMapLinkNode.convert(linkNode,{ link_id: link.link_id }));
+    mapLink.nodes = link.nodes.map(linkNode => this.linkNodeToMapLinkNode.convert(linkNode, { link_id: link.link_id }));
     mapLink.projectId = link.project_id;
     return mapLink;
   }

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

@@ -1,14 +1,12 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { Drawing } from "../../models/drawing";
-import { MapDrawing } from "../../models/map/map-drawing";
 
+import { Converter } from '../converter';
+import { Drawing } from '../../models/drawing';
+import { MapDrawing } from '../../models/map/map-drawing';
 
 @Injectable()
 export class MapDrawingToDrawingConverter implements Converter<MapDrawing, Drawing> {
-    constructor(
+  constructor() {}
-    ) {}
 
   convert(mapDrawing: MapDrawing) {
     const drawing = new Drawing();

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

@@ -7,24 +7,36 @@ import { EllipseElement } from '../../models/drawings/ellipse-element';
 import { LineElement } from '../../models/drawings/line-element';
 import { TextElement } from '../../models/drawings/text-element';
 
-
 @Injectable()
 export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
-    constructor(
+  constructor() {}
-    ) {}
 
   convert(mapDrawing: MapDrawing) {
     let elem = ``;
 
     if (mapDrawing.element instanceof RectElement) {
-            elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
+      elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${
+        mapDrawing.element.height
+      }\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
+        mapDrawing.element.stroke_width
+      }\" />`;
     } else if (mapDrawing.element instanceof EllipseElement) {
-            elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
+      elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${
+        mapDrawing.element.cx
+      }\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
+        mapDrawing.element.stroke
+      }\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
     } else if (mapDrawing.element instanceof LineElement) {
-            elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`
+      elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${
+        mapDrawing.element.x1
+      }\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
     } else if (mapDrawing.element instanceof TextElement) {
-            elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
+      elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${
-        } else return "";
+        mapDrawing.element.font_family
+      }\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${
+        mapDrawing.element.text
+      }</text>`;
+    } else return '';
 
     return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;
   }

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

@@ -1,13 +1,12 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
-import { Converter } from "../converter";
+import { Converter } from '../converter';
-import { Label } from "../../models/label";
+import { Label } from '../../models/label';
-import { MapLabel } from "../../models/map/map-label";
+import { MapLabel } from '../../models/map/map-label';
 import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
 import { CssFixer } from '../../helpers/css-fixer';
 import { FontFixer } from '../../helpers/font-fixer';
 
-
 @Injectable()
 export class MapLabelToLabelConverter implements Converter<MapLabel, Label> {
   constructor(

src/app/cartography/converters/map/map-link-node-to-link-node-converter.ts

@@ -1,16 +1,13 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { MapLinkNode } from "../../models/map/map-link-node";
-import { MapLabelToLabelConverter } from "./map-label-to-label-converter";
-import { LinkNode } from "../../../models/link-node";
 
+import { Converter } from '../converter';
+import { MapLinkNode } from '../../models/map/map-link-node';
+import { MapLabelToLabelConverter } from './map-label-to-label-converter';
+import { LinkNode } from '../../../models/link-node';
 
 @Injectable()
 export class MapLinkNodeToLinkNodeConverter implements Converter<MapLinkNode, LinkNode> {
-    constructor(
+  constructor(private mapLabelToLabel: MapLabelToLabelConverter) {}
-        private mapLabelToLabel: MapLabelToLabelConverter
-    ) {}
 
   convert(mapLinkNode: MapLinkNode) {
     const linkNode = new LinkNode();

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

@@ -1,16 +1,13 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { MapLinkNodeToLinkNodeConverter } from "./map-link-node-to-link-node-converter";
-import { Link } from "../../../models/link";
-import { MapLink } from "../../models/map/map-link";
 
+import { Converter } from '../converter';
+import { MapLinkNodeToLinkNodeConverter } from './map-link-node-to-link-node-converter';
+import { Link } from '../../../models/link';
+import { MapLink } from '../../models/map/map-link';
 
 @Injectable()
 export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
-    constructor(
+  constructor(private mapLinkNodeToMapLinkNode: MapLinkNodeToLinkNodeConverter) {}
-        private mapLinkNodeToMapLinkNode: MapLinkNodeToLinkNodeConverter
-    ) {}
 
   convert(mapLink: MapLink) {
     const link = new Link();
@@ -19,7 +16,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
     link.capture_file_path = mapLink.captureFilePath;
     link.capturing = mapLink.capturing;
     link.link_type = mapLink.linkType;
-        link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
+    link.nodes = mapLink.nodes.map(mapLinkNode => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
     link.project_id = mapLink.projectId;
     return link;
   }

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

@@ -1,18 +1,14 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { MapNode } from "../../models/map/map-node";
-import { MapLabelToLabelConverter } from "./map-label-to-label-converter";
-import { MapPortToPortConverter } from "./map-port-to-port-converter";
-import { Node } from "../../models/node";
 
+import { Converter } from '../converter';
+import { MapNode } from '../../models/map/map-node';
+import { MapLabelToLabelConverter } from './map-label-to-label-converter';
+import { MapPortToPortConverter } from './map-port-to-port-converter';
+import { Node } from '../../models/node';
 
 @Injectable()
 export class MapNodeToNodeConverter implements Converter<MapNode, Node> {
-  constructor(
+  constructor(private mapLabelToLabel: MapLabelToLabelConverter, private mapPortToPort: MapPortToPortConverter) {}
-    private mapLabelToLabel: MapLabelToLabelConverter,
-    private mapPortToPort: MapPortToPortConverter
-  ) {}
 
   convert(mapNode: MapNode) {
     const node = new Node();
@@ -29,7 +25,7 @@ export class MapNodeToNodeConverter implements Converter<MapNode, Node> {
     node.node_type = mapNode.nodeType;
     node.port_name_format = mapNode.portNameFormat;
     node.port_segment_size = mapNode.portSegmentSize;
-    node.ports = mapNode.ports ? mapNode.ports.map((mapPort) => this.mapPortToPort.convert(mapPort)) : [];
+    node.ports = mapNode.ports ? mapNode.ports.map(mapPort => this.mapPortToPort.convert(mapPort)) : [];
     node.project_id = mapNode.projectId;
     node.status = mapNode.status;
     node.symbol = mapNode.symbol;

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

@@ -1,9 +1,8 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { Port } from "../../../models/port";
-import { MapPort } from "../../models/map/map-port";
 
+import { Converter } from '../converter';
+import { Port } from '../../../models/port';
+import { MapPort } from '../../models/map/map-port';
 
 @Injectable()
 export class MapPortToPortConverter implements Converter<MapPort, Port> {

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

@@ -1,9 +1,8 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { MapSymbol } from "../../models/map/map-symbol";
-import { Symbol } from "../../../models/symbol";
 
+import { Converter } from '../converter';
+import { MapSymbol } from '../../models/map/map-symbol';
+import { Symbol } from '../../../models/symbol';
 
 @Injectable()
 export class MapSymbolToSymbolConverter implements Converter<MapSymbol, Symbol> {

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

@@ -1,15 +1,14 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
-import { Converter } from "../converter";
+import { Converter } from '../converter';
-import { MapNode } from "../../models/map/map-node";
+import { MapNode } from '../../models/map/map-node';
-import { Node } from "../../models/node";
+import { Node } from '../../models/node';
-import { LabelToMapLabelConverter } from "./label-to-map-label-converter";
+import { LabelToMapLabelConverter } from './label-to-map-label-converter';
-import { PortToMapPortConverter } from "./port-to-map-port-converter";
+import { PortToMapPortConverter } from './port-to-map-port-converter';
 import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
 import { CssFixer } from '../../helpers/css-fixer';
 import { FontFixer } from '../../helpers/font-fixer';
 
-
 @Injectable()
 export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
   constructor(
@@ -35,7 +34,7 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.nodeType = node.node_type;
     mapNode.portNameFormat = node.port_name_format;
     mapNode.portSegmentSize = node.port_segment_size;
-    mapNode.ports = node.ports.map((port) => this.portToMapPort.convert(port));
+    mapNode.ports = node.ports.map(port => this.portToMapPort.convert(port));
     mapNode.projectId = node.project_id;
     mapNode.status = node.status;
     mapNode.symbol = node.symbol;
@@ -45,14 +44,13 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.y = node.y;
     mapNode.z = node.z;
 
-
     if (mapNode.label !== undefined) {
       const fixedCss = this.cssFixer.fix(mapNode.label.style);
       const fixedFont = this.fontFixer.fixStyles(fixedCss);
       const box = this.fontBBoxCalculator.calculate(mapNode.label.text, fixedFont);
 
       if (node.label.x === null || node.label.y === null) {
-        mapNode.label.x = node.width / 2. - box.width / 2. + 3;
+        mapNode.label.x = node.width / 2 - box.width / 2 + 3;
         mapNode.label.y = -8;
       }
     }

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

@@ -1,9 +1,8 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { Port } from "../../../models/port";
-import { MapPort } from "../../models/map/map-port";
 
+import { Converter } from '../converter';
+import { Port } from '../../../models/port';
+import { MapPort } from '../../models/map/map-port';
 
 @Injectable()
 export class PortToMapPortConverter implements Converter<Port, MapPort> {

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

@@ -1,9 +1,8 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Converter } from "../converter";
-import { Symbol } from "../../../models/symbol";
-import { MapSymbol } from "../../models/map/map-symbol";
 
+import { Converter } from '../converter';
+import { Symbol } from '../../../models/symbol';
+import { MapSymbol } from '../../models/map/map-symbol';
 
 @Injectable()
 export class SymbolToMapSymbolConverter implements Converter<Symbol, MapSymbol> {

src/app/cartography/converters/styles-to-font-converter.spec.ts

@@ -1,7 +1,6 @@
-import { Font } from "../models/font";
+import { Font } from '../models/font';
 import { StylesToFontConverter } from './styles-to-font-converter';
 
-
 describe('StylesToFontConverter', () => {
   let converter: StylesToFontConverter;
 
@@ -10,15 +9,14 @@ describe('StylesToFontConverter', () => {
   });
 
   it('should parse fonts from styles', () => {
-    const styles = "font-family: TypeWriter; font-size: 10px; font-weight: bold";
+    const styles = 'font-family: TypeWriter; font-size: 10px; font-weight: bold';
 
     const expectedFont: Font = {
-      'font_family': 'TypeWriter',
+      font_family: 'TypeWriter',
-      'font_size': 10,
+      font_size: 10,
-      'font_weight': 'bold'
+      font_weight: 'bold'
     };
 
     expect(converter.convert(styles)).toEqual(expectedFont);
   });
-
 });

src/app/cartography/converters/styles-to-font-converter.ts

@@ -1,41 +1,40 @@
 import * as csstree from 'css-tree';
 
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 import { Converter } from './converter';
 import { Font } from '../models/font';
 
-
 @Injectable()
 export class StylesToFontConverter implements Converter<string, Font> {
   convert(styles: string) {
     const font: Font = {
-      'font_family': undefined,
+      font_family: undefined,
-      'font_size': undefined,
+      font_size: undefined,
-      'font_weight': undefined
+      font_weight: undefined
     };
 
     const ast = csstree.parse(styles, {
-      'context': 'declarationList'
+      context: 'declarationList'
     });
 
-    ast.children.forEach((child) => {
+    ast.children.forEach(child => {
       if (child.property === 'font-size') {
-        child.value.children.forEach((value) => {
+        child.value.children.forEach(value => {
           if (value.type === 'Dimension') {
             font.font_size = parseInt(value.value);
           }
         });
       }
       if (child.property === 'font-family') {
-        child.value.children.forEach((value) => {
+        child.value.children.forEach(value => {
-          if (value.type === "Identifier") {
+          if (value.type === 'Identifier') {
             font.font_family = value.name;
           }
         });
       }
       if (child.property === 'font-weight') {
-        child.value.children.forEach((value) => {
+        child.value.children.forEach(value => {
-          if (value.type === "Identifier") {
+          if (value.type === 'Identifier') {
             font.font_weight = value.name;
           }
         });

src/app/cartography/datasources/datasource.spec.ts

@@ -1,17 +1,15 @@
-import { DataSource } from "./datasource";
+import { DataSource } from './datasource';
 
 class Item {
   constructor(public id: string, public property1?: string, public property2?: string) {}
 }
 
-
 class TestDataSource extends DataSource<Item> {
   protected getItemKey(item: Item) {
     return item.id;
-  };
+  }
 }
 
-
 describe('TestDataSource', () => {
   let dataSource: TestDataSource;
   let data: Item[];
@@ -25,72 +23,65 @@ describe('TestDataSource', () => {
 
   describe('Item can be added', () => {
     beforeEach(() => {
-      dataSource.add(new Item("test1", "property1"));
+      dataSource.add(new Item('test1', 'property1'));
     });
 
     it('item should be in data', () => {
-      expect(data).toEqual([new Item("test1", "property1")]);
+      expect(data).toEqual([new Item('test1', 'property1')]);
     });
   });
 
-
   describe('Item can be added when key duplocates', () => {
     beforeEach(() => {
-      dataSource.add(new Item("test1", "property1"));
+      dataSource.add(new Item('test1', 'property1'));
-      dataSource.add(new Item("test1", "property2"));
+      dataSource.add(new Item('test1', 'property2'));
     });
 
     it('item should be in data', () => {
-      expect(data).toEqual([new Item("test1", "property2")]);
+      expect(data).toEqual([new Item('test1', 'property2')]);
     });
   });
 
   describe('Items can be set', () => {
     beforeEach(() => {
-      dataSource.set([new Item("test1", "property1"), new Item("test2", "property2")]);
+      dataSource.set([new Item('test1', 'property1'), new Item('test2', 'property2')]);
     });
 
     it('items should be in data', () => {
-      expect(data).toEqual([new Item("test1", "property1"), new Item("test2", "property2")]);
+      expect(data).toEqual([new Item('test1', 'property1'), new Item('test2', 'property2')]);
     });
   });
 
   describe('Items can be removed', () => {
     beforeEach(() => {
-      dataSource.set([new Item("test1", "property1"), new Item("test2", "property2")]);
+      dataSource.set([new Item('test1', 'property1'), new Item('test2', 'property2')]);
-      dataSource.remove(new Item("test1", "property1"));
+      dataSource.remove(new Item('test1', 'property1'));
     });
 
     it('item should not be in data', () => {
-      expect(data).toEqual([new Item("test2", "property2")]);
+      expect(data).toEqual([new Item('test2', 'property2')]);
     });
   });
 
   describe('Item can be updated', () => {
     beforeEach(() => {
-      dataSource.set([new Item("test1", "property1", "another"), new Item("test2", "property2")]);
+      dataSource.set([new Item('test1', 'property1', 'another'), new Item('test2', 'property2')]);
-      dataSource.update(new Item("test1", "property3"));
+      dataSource.update(new Item('test1', 'property3'));
     });
 
     it('item should be updated', () => {
-      expect(data).toEqual([
+      expect(data).toEqual([new Item('test1', 'property3'), new Item('test2', 'property2')]);
-        new Item("test1", "property3"),
-        new Item("test2", "property2")
-      ]);
     });
-
   });
 
   describe('Items should be cleared', () => {
     beforeEach(() => {
-      dataSource.set([new Item("test1", "property1", "another"), new Item("test2", "property2")]);
+      dataSource.set([new Item('test1', 'property1', 'another'), new Item('test2', 'property2')]);
       dataSource.clear();
     });
 
     it('items should be cleared', () => {
       expect(data).toEqual([]);
     });
-
   });
-
 });

src/app/cartography/datasources/datasource.ts

@@ -1,4 +1,4 @@
-import { BehaviorSubject, Subject } from "rxjs";
+import { BehaviorSubject, Subject } from 'rxjs';
 
 export abstract class DataSource<T> {
   protected data: T[] = [];
@@ -20,19 +20,20 @@ export abstract class DataSource<T> {
   }
 
   public set(data: T[]) {
-    data.forEach((item) => {
+    data.forEach(item => {
       const index = this.findIndex(item);
       if (index >= 0) {
         const updated = Object.assign(this.data[index], item);
         this.data[index] = updated;
-      }
+      } else {
-      else {
         this.data.push(item);
       }
     });
 
-    const toRemove = this.data.filter((item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0);
+    const toRemove = this.data.filter(
-    toRemove.forEach((item) => this.remove(item));
+      item => data.filter(i => this.getItemKey(i) === this.getItemKey(item)).length === 0
+    );
+    toRemove.forEach(item => this.remove(item));
 
     this.dataChange.next(this.data);
   }

src/app/cartography/datasources/drawings-datasource.spec.ts

@@ -1,6 +1,5 @@
-import { DrawingsDataSource } from "./drawings-datasource";
+import { DrawingsDataSource } from './drawings-datasource';
-import { Drawing } from "../models/drawing";
+import { Drawing } from '../models/drawing';
-
 
 describe('DrawingsDataSource', () => {
   let dataSource: DrawingsDataSource;
@@ -16,18 +15,17 @@ describe('DrawingsDataSource', () => {
   describe('Drawing can be updated', () => {
     beforeEach(() => {
       const drawing = new Drawing();
-      drawing.drawing_id = "1";
+      drawing.drawing_id = '1';
-      drawing.project_id = "project1";
+      drawing.project_id = 'project1';
       dataSource.add(drawing);
 
-      drawing.project_id = "project2";
+      drawing.project_id = 'project2';
       dataSource.update(drawing);
     });
 
     it('project_id should change', () => {
-      expect(data[0].drawing_id).toEqual("1");
+      expect(data[0].drawing_id).toEqual('1');
-      expect(data[0].project_id).toEqual("project2");
+      expect(data[0].project_id).toEqual('project2');
     });
   });
-
 });

src/app/cartography/datasources/drawings-datasource.ts

@@ -1,8 +1,7 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { DataSource } from "./datasource";
-import { Drawing } from "../models/drawing";
 
+import { DataSource } from './datasource';
+import { Drawing } from '../models/drawing';
 
 @Injectable()
 export class DrawingsDataSource extends DataSource<Drawing> {

src/app/cartography/datasources/links-datasource.spec.ts

@@ -1,6 +1,5 @@
-import { LinksDataSource } from "./links-datasource";
+import { LinksDataSource } from './links-datasource';
-import { Link } from "../../models/link";
+import { Link } from '../../models/link';
-
 
 describe('LinksDataSource', () => {
   let dataSource: LinksDataSource;
@@ -16,18 +15,17 @@ describe('LinksDataSource', () => {
   describe('Link can be updated', () => {
     beforeEach(() => {
       const link = new Link();
-      link.link_id = "1";
+      link.link_id = '1';
-      link.project_id = "project-1";
+      link.project_id = 'project-1';
       dataSource.add(link);
 
-      link.project_id = "project-2";
+      link.project_id = 'project-2';
       dataSource.update(link);
     });
 
     it('project_id should change', () => {
-      expect(data[0].link_id).toEqual("1");
+      expect(data[0].link_id).toEqual('1');
-      expect(data[0].project_id).toEqual("project-2");
+      expect(data[0].project_id).toEqual('project-2');
     });
   });
-
 });

src/app/cartography/datasources/links-datasource.ts

@@ -1,8 +1,7 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { DataSource } from "./datasource";
-import { Link } from "../../models/link";
 
+import { DataSource } from './datasource';
+import { Link } from '../../models/link';
 
 @Injectable()
 export class LinksDataSource extends DataSource<Link> {

src/app/cartography/datasources/map-datasource.ts

@@ -1,9 +1,9 @@
-import { DataSource } from "./datasource";
+import { DataSource } from './datasource';
-import { MapNode } from "../models/map/map-node";
+import { MapNode } from '../models/map/map-node';
-import { MapLink } from "../models/map/map-link";
+import { MapLink } from '../models/map/map-link';
-import { MapDrawing } from "../models/map/map-drawing";
+import { MapDrawing } from '../models/map/map-drawing';
-import { MapSymbol } from "../models/map/map-symbol";
+import { MapSymbol } from '../models/map/map-symbol';
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
 
 export interface Indexed {
   id: number | string;

src/app/cartography/datasources/nodes-datasource.spec.ts

@@ -1,6 +1,5 @@
-import { NodesDataSource } from "./nodes-datasource";
+import { NodesDataSource } from './nodes-datasource';
-import { Node } from "../models/node";
+import { Node } from '../models/node';
-
 
 describe('NodesDataSource', () => {
   let dataSource: NodesDataSource;
@@ -16,18 +15,17 @@ describe('NodesDataSource', () => {
   describe('Node can be updated', () => {
     beforeEach(() => {
       const node = new Node();
-      node.node_id = "1";
+      node.node_id = '1';
-      node.name = "Node 1";
+      node.name = 'Node 1';
       dataSource.add(node);
 
-      node.name = "Node 2";
+      node.name = 'Node 2';
       dataSource.update(node);
     });
 
     it('name should change', () => {
-      expect(data[0].node_id).toEqual("1");
+      expect(data[0].node_id).toEqual('1');
-      expect(data[0].name).toEqual("Node 2");
+      expect(data[0].name).toEqual('Node 2');
     });
   });
-
 });

src/app/cartography/datasources/nodes-datasource.ts

@@ -1,8 +1,7 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { Node } from "../models/node";
-import { DataSource } from "./datasource";
 
+import { Node } from '../models/node';
+import { DataSource } from './datasource';
 
 @Injectable()
 export class NodesDataSource extends DataSource<Node> {

src/app/cartography/datasources/symbols-datasource.spec.ts

@@ -1,6 +1,5 @@
-import { SymbolsDataSource } from "./symbols-datasource";
+import { SymbolsDataSource } from './symbols-datasource';
-import { Symbol } from "../../models/symbol";
+import { Symbol } from '../../models/symbol';
-
 
 describe('SymbolsDataSource', () => {
   let dataSource: SymbolsDataSource;
@@ -16,18 +15,17 @@ describe('SymbolsDataSource', () => {
   describe('Symbol can be updated', () => {
     beforeEach(() => {
       const symbol = new Symbol();
-      symbol.symbol_id = "1";
+      symbol.symbol_id = '1';
-      symbol.filename = "test-1";
+      symbol.filename = 'test-1';
       dataSource.add(symbol);
 
-      symbol.filename = "test-2";
+      symbol.filename = 'test-2';
       dataSource.update(symbol);
     });
 
     it('filename should change', () => {
-      expect(data[0].symbol_id).toEqual("1");
+      expect(data[0].symbol_id).toEqual('1');
-      expect(data[0].filename).toEqual("test-2");
+      expect(data[0].filename).toEqual('test-2');
     });
   });
-
 });

src/app/cartography/datasources/symbols-datasource.ts

@@ -1,8 +1,7 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
-import { DataSource } from "./datasource";
-import { Symbol } from "../../models/symbol";
 
+import { DataSource } from './datasource';
+import { Symbol } from '../../models/symbol';
 
 @Injectable()
 export class SymbolsDataSource extends DataSource<Symbol> {

src/app/cartography/events/draggable.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "@angular/core";
+import { EventEmitter } from '@angular/core';
-import { drag, DraggedElementBaseType } from "d3-drag";
+import { drag, DraggedElementBaseType } from 'd3-drag';
-import { event } from "d3-selection";
+import { event } from 'd3-selection';
 
 class DraggableEvent {
   public x: number;
@@ -10,25 +10,19 @@ class DraggableEvent {
 }
 
 export class DraggableStart<T> extends DraggableEvent {
-  constructor(
+  constructor(public datum: T) {
-    public datum: T
-  ){
     super();
   }
 }
 
 export class DraggableDrag<T> extends DraggableEvent {
-  constructor(
+  constructor(public datum: T) {
-    public datum: T
-  ){
     super();
   }
 }
 
 export class DraggableEnd<T> extends DraggableEvent {
-  constructor(
+  constructor(public datum: T) {
-    public datum: T
-  ){
     super();
   }
 }

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

@@ -1,7 +1,12 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable, EventEmitter } from '@angular/core';
-import { DraggedDataEvent, ResizedDataEvent, TextAddedDataEvent, TextEditedDataEvent, AddedDataEvent } from "./event-source";
+import {
-import { MapDrawing } from "../models/map/map-drawing";
+  DraggedDataEvent,
-
+  ResizedDataEvent,
+  TextAddedDataEvent,
+  TextEditedDataEvent,
+  AddedDataEvent
+} from './event-source';
+import { MapDrawing } from '../models/map/map-drawing';
 
 @Injectable()
 export class DrawingsEventSource {

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

@@ -2,59 +2,31 @@ import { TextElement } from '../models/drawings/text-element';
 import { MapDrawing } from '../models/map/map-drawing';
 
 export class DataEventSource<T> {
-  constructor(
+  constructor(public datum: T, public dx: number, public dy: number) {}
-    public datum: T,
-    public dx: number,
-    public dy: number
-  ) {}
 }
 
 export class DraggedDataEvent<T> extends DataEventSource<T> {}
 
 export class ResizedDataEvent<T> {
-  constructor(
+  constructor(public datum: T, public x: number, public y: number, public width: number, public height: number) {}
-    public datum: T,
-    public x: number,
-    public y: number,
-    public width: number,
-    public height: number
-  ) {}
 }
 
 export class AddedDataEvent {
-  constructor(
+  constructor(public x: number, public y: number) {}
-    public x: number,
-    public y: number
-  ) {}
 }
 
 export class ClickedDataEvent<T> {
-  constructor(
+  constructor(public datum: T, public x: number, public y: number) {}
-    public datum: T,
-    public x: number,
-    public y: number
-  ) {}
 }
 
 export class TextAddedDataEvent {
-  constructor(
+  constructor(public savedText: string, public x: number, public y: number) {}
-    public savedText: string,
-    public x: number,
-    public y: number
-  ) {}
 }
 
 export class TextEditedDataEvent {
-  constructor(
+  constructor(public textDrawingId: string, public editedText: string, public textElement: TextElement) {}
-    public textDrawingId: string,
-    public editedText: string,
-    public textElement: TextElement
-  ) {}
 }
 
 export class DrawingContextMenu {
-  constructor(
+  constructor(public event: any, public drawing: MapDrawing) {}
-    public event: any,
-    public drawing: MapDrawing
-  ) {}
 }

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

@@ -1,8 +1,7 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable, EventEmitter } from '@angular/core';
-import { MapLinkCreated } from "./links";
+import { MapLinkCreated } from './links';
-import { MapLinkNode } from "../models/map/map-link-node";
+import { MapLinkNode } from '../models/map/map-link-node';
-import { DraggedDataEvent } from "./event-source";
+import { DraggedDataEvent } from './event-source';
-
 
 @Injectable()
 export class LinksEventSource {

src/app/cartography/events/links.ts

@@ -1,6 +1,5 @@
-import { MapNode } from "../models/map/map-node";
+import { MapNode } from '../models/map/map-node';
-import { MapPort } from "../models/map/map-port";
+import { MapPort } from '../models/map/map-port';
-
 
 export class MapLinkCreated {
   constructor(

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

@@ -1,8 +1,7 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { Injectable, EventEmitter } from '@angular/core';
-import { DraggedDataEvent, ClickedDataEvent } from "./event-source";
+import { DraggedDataEvent, ClickedDataEvent } from './event-source';
-import { MapNode } from "../models/map/map-node";
+import { MapNode } from '../models/map/map-node';
-import { MapLabel } from "../models/map/map-label";
+import { MapLabel } from '../models/map/map-label';
-
 
 @Injectable()
 export class NodesEventSource {

src/app/cartography/events/nodes.ts

@@ -1,10 +1,7 @@
-import { MapNode } from "../models/map/map-node";
+import { MapNode } from '../models/map/map-node';
 
 class NodeEvent {
-    constructor(
+  constructor(public event: any, public node: MapNode) {}
-        public event: any,
-        public node: MapNode
-    ) {}
 }
 
 export class NodeClicked extends NodeEvent {}

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

@@ -1,7 +1,6 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { Subject } from "rxjs";
+import { Subject } from 'rxjs';
-import { Rectangle } from "../models/rectangle";
+import { Rectangle } from '../models/rectangle';
-
 
 @Injectable()
 export class SelectionEventSource {

src/app/cartography/helpers/canvas-size-detector.ts

@@ -1,6 +1,5 @@
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-import { Size } from "../models/size";
+import { Size } from '../models/size';
-
 
 @Injectable()
 export class CanvasSizeDetector {

src/app/cartography/helpers/css-fixer.spec.ts

@@ -1,5 +1,4 @@
-
+import { CssFixer } from './css-fixer';
-import { CssFixer } from "./css-fixer";
 
 describe('CssFixer', () => {
   let fixer: CssFixer;
@@ -9,22 +8,22 @@ describe('CssFixer', () => {
   });
 
   it('should fix font-size', () => {
-    const css = "font-size: 10.0;";
+    const css = 'font-size: 10.0;';
-    expect(fixer.fix(css)).toEqual("font-size:10.0pt");
+    expect(fixer.fix(css)).toEqual('font-size:10.0pt');
   });
 
   it('should not fix font-size when pt unit is defined', () => {
-    const css = "font-size: 10.0pt;";
+    const css = 'font-size: 10.0pt;';
-    expect(fixer.fix(css)).toEqual("font-size:10.0pt");
+    expect(fixer.fix(css)).toEqual('font-size:10.0pt');
   });
 
   it('should not fix font-size when px unit is defined', () => {
-    const css = "font-size: 10.0px;";
+    const css = 'font-size: 10.0px;';
-    expect(fixer.fix(css)).toEqual("font-size:10.0px");
+    expect(fixer.fix(css)).toEqual('font-size:10.0px');
   });
 
   it('should fix font-size with other attributes', () => {
-    const css = "font: Verdana; font-size: 10.0;";
+    const css = 'font: Verdana; font-size: 10.0;';
-    expect(fixer.fix(css)).toEqual("font:Verdana;font-size:10.0pt");
+    expect(fixer.fix(css)).toEqual('font:Verdana;font-size:10.0pt');
   });
 });

src/app/cartography/helpers/css-fixer.ts

@@ -1,23 +1,21 @@
 import * as csstree from 'css-tree';
 
-import { Injectable } from "@angular/core";
+import { Injectable } from '@angular/core';
-
 
 @Injectable()
 export class CssFixer {
-
   public fix(styles: string): string {
     const ast = csstree.parse(styles, {
-      'context': 'declarationList'
+      context: 'declarationList'
     });
 
     // fixes font-size when unit (pt|px) is not defined
-    ast.children.forEach((child) => {
+    ast.children.forEach(child => {
       if (child.property === 'font-size') {
-        child.value.children.forEach((value) => {
+        child.value.children.forEach(value => {
           if (value.type === 'Number') {
             const fontSize = value.value.toString();
-            if (!(fontSize.indexOf("pt") >= 0 || fontSize.indexOf("px") >=  0)) {
+            if (!(fontSize.indexOf('pt') >= 0 || fontSize.indexOf('px') >= 0)) {
               value.value = `${fontSize}pt`;
             }
           }