Merge pull request #1059 from GNS3/Improve-overall-performance

Improve overall performance

e2e/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('GNS3 Web UI Application', () => {
   it('should have correct page title', async () => {
     // arrange
     await page.navigateTo();
-    
+
     // act
     let text = await page.getTitleText();
 

e2e/helpers/common.po.ts

@@ -1,22 +1,21 @@
-import { browser, by, element } from 'protractor';
-import { ServersPage } from './server.po';
+import { browser } from 'protractor';
 
 export class TestHelper {
-    sleep(value: number) {
-        browser.sleep(value);
-    }
+  sleep(value: number) {
+    browser.sleep(value);
+  }
 
-    waitForLoading() {
-        browser.waitForAngular();
-    }
+  waitForLoading() {
+    browser.waitForAngular();
+  }
 
-    async asyncForEach(array, callback) {
-        for (let index = 0; index < array.length; index++) {
-            await callback(array[index], index, array);
-        }
+  async asyncForEach(array, callback) {
+    for (let index = 0; index < array.length; index++) {
+      await callback(array[index], index, array);
     }
+  }
 
-    getCurrentUrl() {
-        return browser.getCurrentUrl();
-    }
+  getCurrentUrl() {
+    return browser.getCurrentUrl();
+  }
 }

e2e/helpers/project-map.po.ts

@@ -1,50 +1,50 @@
-import { TestHelper } from "./common.po"
-import { browser, by } from "protractor";
+import { browser, by } from 'protractor';
+import { TestHelper } from './common.po';
 
 export class ProjectMapPage {
-    helper = new TestHelper();
+  helper = new TestHelper();
 
-    async openAddProjectDialog() {
-        let addButton = await browser.driver.findElement(by.css('button.addNode'));
-        await addButton.click();
+  async openAddProjectDialog() {
+    let addButton = await browser.driver.findElement(by.css('button.addNode'));
+    await addButton.click();
+  }
+
+  async addNode() {
+    let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+    await inputs[0].sendKeys('VPCS');
+    this.helper.sleep(1000);
+
+    let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+    await selects[1].click();
+    this.helper.sleep(1000);
+
+    let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+    await options[1].click(); //first option should be chosen
+    this.helper.sleep(1000);
+
+    // new select appears after refreshing data
+    selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+    if (selects[2]) {
+      await selects[2].click();
+      this.helper.sleep(1000);
+
+      options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+      await options[0].click();
+      this.helper.sleep(1000);
     }
 
-    async addNode() {
-        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
-        await inputs[0].sendKeys('VPCS');
-        this.helper.sleep(1000);
+    let addButton = await browser.driver.findElement(by.css('button.addButton'));
+    await addButton.click();
+    this.helper.sleep(1000);
+  }
 
-        let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
-        await selects[1].click();
-        this.helper.sleep(1000);
+  async verifyIfNodeWithLabelExists(labelToFind: string) {
+    this.helper.sleep(5000);
+    let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
+    let selectedNode;
+    let textFromNodeLabel = await nodeLabel.getText();
+    if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
 
-        let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
-        await options[1].click(); //first option should be chosen
-        this.helper.sleep(1000);
-
-        // new select appears after refreshing data
-        selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
-        if (selects[2]) {
-            await selects[2].click();
-            this.helper.sleep(1000);
-    
-            options = await browser.driver.findElements(by.css('mat-option.mat-option'));
-            await options[0].click();
-            this.helper.sleep(1000);
-        }
-
-        let addButton = await browser.driver.findElement(by.css('button.addButton'));
-        await addButton.click();
-        this.helper.sleep(1000);
-    }
-
-    async verifyIfNodeWithLabelExists(labelToFind: string) {
-        this.helper.sleep(5000);
-        let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
-        let selectedNode;
-        let textFromNodeLabel = await nodeLabel.getText();
-        if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
-
-        return selectedNode ? true : false;
-    }
+    return selectedNode ? true : false;
+  }
 }

e2e/helpers/project.po.ts

@@ -1,20 +1,20 @@
-import { TestHelper } from "./common.po"
-import { browser, by } from "protractor";
+import { browser, by } from 'protractor';
+import { TestHelper } from './common.po';
 
 export class ProjectsPage {
-    helper = new TestHelper();
+  helper = new TestHelper();
 
-    async openAddProjectDialog() {
-        let addButton = await browser.driver.findElement(by.css('button.add-button'));
-        await addButton.click();
-    }
+  async openAddProjectDialog() {
+    let addButton = await browser.driver.findElement(by.css('button.add-button'));
+    await addButton.click();
+  }
 
-    async createProject() {
-        let today = new Date();
-        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
-        await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
-        this.helper.sleep(2000);
-        let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
-        await dialogButton.click();
-    }
+  async createProject() {
+    let today = new Date();
+    let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+    await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
+    this.helper.sleep(2000);
+    let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
+    await dialogButton.click();
+  }
 }

e2e/helpers/server.po.ts

@@ -1,41 +1,41 @@
-import { browser, by, element } from 'protractor';
+import { browser, by } from 'protractor';
 import { TestHelper } from './common.po';
 
 export class ServersPage {
-    helper = new TestHelper;
+  helper = new TestHelper();
 
-    maximizeWindow() {
-        browser.driver.manage().window().maximize();
-    }
+  maximizeWindow() {
+    browser.driver.manage().window().maximize();
+  }
 
-    navigateToServersPage() {
-        return browser.get('/servers');
-    }
+  navigateToServersPage() {
+    return browser.get('/servers');
+  }
 
-    getAddServerNotificationText() {
-        return browser.driver.findElement(by.className('mat-card-content')).getText();
-    }
+  getAddServerNotificationText() {
+    return browser.driver.findElement(by.className('mat-card-content')).getText();
+  }
 
-    async clickAddServer() {
-        let serversTable = await this.checkServersTable();
-        if (serversTable.length === 0) {
-            let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
-            await buttons[3].click();   
-        }
+  async clickAddServer() {
+    let serversTable = await this.checkServersTable();
+    if (serversTable.length === 0) {
+      let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
+      await buttons[3].click();
     }
+  }
 
-    checkServersTable() {
-        return browser.driver.findElements(by.css('mat-cell'));
-    }
+  checkServersTable() {
+    return browser.driver.findElements(by.css('mat-cell'));
+  }
 
-    async navigateToServerProjects() {
-        this.helper.sleep(2000);
-        let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
-        let serverLink;
-        await this.helper.asyncForEach(hyperlinks, async element => {
-            let text = await element.getText();
-            if (text === '127.0.0.1') serverLink = element;
-        });
-        await serverLink.click();
-    }
+  async navigateToServerProjects() {
+    this.helper.sleep(2000);
+    let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
+    let serverLink;
+    await this.helper.asyncForEach(hyperlinks, async (element) => {
+      let text = await element.getText();
+      if (text === '127.0.0.1') serverLink = element;
+    });
+    await serverLink.click();
+  }
 }

e2e/project-map.e2e-spec.ts

@@ -1,41 +1,40 @@
-import { ServersPage } from './helpers/server.po';
 import { TestHelper } from './helpers/common.po';
-import { element } from 'protractor';
-import { ProjectsPage } from './helpers/project.po';
 import { ProjectMapPage } from './helpers/project-map.po';
+import { ProjectsPage } from './helpers/project.po';
+import { ServersPage } from './helpers/server.po';
 
 describe('Project map page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let projectMapPage: ProjectMapPage;
-    let helper: TestHelper;
+  let serversPage: ServersPage;
+  let projectsPage: ProjectsPage;
+  let projectMapPage: ProjectMapPage;
+  let helper: TestHelper;
 
-    beforeEach(async () => {
-        serversPage = new ServersPage();
-        projectsPage = new ProjectsPage();
-        projectMapPage = new ProjectMapPage();
-        helper = new TestHelper();
+  beforeEach(async () => {
+    serversPage = new ServersPage();
+    projectsPage = new ProjectsPage();
+    projectMapPage = new ProjectMapPage();
+    helper = new TestHelper();
 
-        serversPage.maximizeWindow();
-        await serversPage.navigateToServersPage();
-        await serversPage.clickAddServer();
-        await serversPage.navigateToServerProjects();
-        await projectsPage.openAddProjectDialog();
-        helper.sleep(2000);
-        await projectsPage.createProject();
-        helper.sleep(2000);
-    });
+    serversPage.maximizeWindow();
+    await serversPage.navigateToServersPage();
+    await serversPage.clickAddServer();
+    await serversPage.navigateToServerProjects();
+    await projectsPage.openAddProjectDialog();
+    helper.sleep(2000);
+    await projectsPage.createProject();
+    helper.sleep(2000);
+  });
 
-    it('user should have possibility to add nodes to map', async () => {
-        // arrange
-        projectMapPage.openAddProjectDialog();
-        helper.sleep(2000);
+  it('user should have possibility to add nodes to map', async () => {
+    // arrange
+    projectMapPage.openAddProjectDialog();
+    helper.sleep(2000);
 
-        //act
-        projectMapPage.addNode();
-        helper.sleep(2000);
+    //act
+    projectMapPage.addNode();
+    helper.sleep(2000);
 
-        //assert
-        expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
-    });
+    //assert
+    expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
+  });
 });

e2e/projects.e2e-spec.ts

@@ -1,34 +1,33 @@
-import { ServersPage } from './helpers/server.po';
 import { TestHelper } from './helpers/common.po';
-import { element } from 'protractor';
 import { ProjectsPage } from './helpers/project.po';
+import { ServersPage } from './helpers/server.po';
 
 describe('Projects page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let helper: TestHelper;
+  let serversPage: ServersPage;
+  let projectsPage: ProjectsPage;
+  let helper: TestHelper;
 
-    beforeEach(() => {
-        serversPage = new ServersPage();
-        projectsPage = new ProjectsPage();
-        helper = new TestHelper();
-    });
+  beforeEach(() => {
+    serversPage = new ServersPage();
+    projectsPage = new ProjectsPage();
+    helper = new TestHelper();
+  });
 
-    it('user should have possibility to create new project', async () => {
-        // arrange
-        serversPage.maximizeWindow();
-        await serversPage.navigateToServersPage();
-        await serversPage.clickAddServer();
-        await serversPage.navigateToServerProjects();
-        helper.sleep(2000);
+  it('user should have possibility to create new project', async () => {
+    // arrange
+    serversPage.maximizeWindow();
+    await serversPage.navigateToServersPage();
+    await serversPage.clickAddServer();
+    await serversPage.navigateToServerProjects();
+    helper.sleep(2000);
 
-        //act
-        await projectsPage.openAddProjectDialog();
-        helper.sleep(2000);
-        await projectsPage.createProject();
-        helper.sleep(2000);
+    //act
+    await projectsPage.openAddProjectDialog();
+    helper.sleep(2000);
+    await projectsPage.createProject();
+    helper.sleep(2000);
 
-        //assert
-        expect(helper.getCurrentUrl()).toMatch('server/1/project/');
-    });
+    //assert
+    expect(helper.getCurrentUrl()).toMatch('server/1/project/');
+  });
 });

e2e/servers.e2e-spec.ts

@@ -1,44 +1,43 @@
-import { ServersPage } from './helpers/server.po';
 import { TestHelper } from './helpers/common.po';
-import { element } from 'protractor';
+import { ServersPage } from './helpers/server.po';
 
 describe('Servers page', () => {
-    let page: ServersPage;
-    let helper: TestHelper;
+  let page: ServersPage;
+  let helper: TestHelper;
 
-    beforeEach(() => {
-        page = new ServersPage();
-        helper = new TestHelper();
+  beforeEach(() => {
+    page = new ServersPage();
+    helper = new TestHelper();
+  });
+
+  xit('user should have possibility to add server', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToServersPage();
+
+    // act
+    let text = await page.getAddServerNotificationText();
+
+    // assert
+    expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
+  });
+
+  it('user should see added server in the list', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToServersPage();
+    await page.clickAddServer();
+    helper.sleep(1000);
+
+    // act
+    let firstRowOfServersTable = await page.checkServersTable();
+    let serverData = [];
+    await helper.asyncForEach(firstRowOfServersTable, async (element) => {
+      serverData.push(await element.getText());
     });
 
-    xit('user should have possibility to add server', async () => {
-        // arrange
-        page.maximizeWindow();
-        await page.navigateToServersPage();
-
-        // act
-        let text = await page.getAddServerNotificationText();
-
-        // assert
-        expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
-    });
-
-    it('user should see added server in the list', async () => {
-        // arrange
-        page.maximizeWindow();
-        await page.navigateToServersPage();
-        await page.clickAddServer();
-        helper.sleep(1000);
-
-        // act
-        let firstRowOfServersTable = await page.checkServersTable();
-        let serverData = [];
-        await helper.asyncForEach(firstRowOfServersTable, async element => {
-            serverData.push(await element.getText());
-        });
-
-        // assert
-        expect(serverData).toContain('127.0.0.1');
-        expect(serverData).toContain('3080');
-    });
+    // assert
+    expect(serverData).toContain('127.0.0.1');
+    expect(serverData).toContain('3080');
+  });
 });

package.json

@@ -17,6 +17,7 @@
     "start": "ng serve",
     "startforelectron": "ng serve --configuration=electronDev",
     "build": "ng build",
+    "buildforproduction": "ng build --source-map=false --build-optimizer --configuration=production --base-href /static/web-ui/",
     "buildforelectron": "ng build --configuration=electronProd",
     "buildforgithub": "ng build --configuration=githubProd",
     "test": "ng test",
@@ -80,6 +81,7 @@
     "node-fetch": "^2.6.1",
     "notosans-fontface": "1.2.2",
     "office-ui-fabric-react": "^7.166.0",
+    "prettier-plugin-organize-imports": "^1.1.1",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",

src/app/app-routing.module.ts

@@ -1,70 +1,59 @@
 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 { ProjectsComponent } from './components/projects/projects.component';
-import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
-import { SettingsComponent } from './components/settings/settings.component';
 import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
-import { PreferencesComponent } from './components/preferences/preferences.component';
-import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
-import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
-import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
-import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
-import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component';
-import { VpcsPreferencesComponent } from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component';
-import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component';
-import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component';
-import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component';
-import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component';
-import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component';
-import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
-import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { DirectLinkComponent } from './components/direct-link/direct-link.component';
+import { HelpComponent } from './components/help/help.component';
+import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
+import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
-import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
-import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
-import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
-import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
 import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component';
 import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component';
-import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
+import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
+import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
+import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
+import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
 import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
 import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
-import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
-import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
-import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
-import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
-import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
-import { VmwarePreferencesComponent } from './components/preferences/vmware/vmware-preferences/vmware-preferences.component';
-import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component';
-import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component';
-import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component';
-import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component';
+import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
 import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component';
-import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
-import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
-import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
-import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
-import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
-import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
 import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
-import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
-import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
-import { ConsoleComponent } from './components/settings/console/console.component';
-import { HelpComponent } from './components/help/help.component';
-import { TracengPreferencesComponent } from './components/preferences/traceng/traceng-preferences/traceng-preferences.component';
-import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
-import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
-import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
-import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
+import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component';
+import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
+import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
+import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
+import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
 import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
-import { DirectLinkComponent } from './components/direct-link/direct-link.component';
+import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
+import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
+import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
+import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
+import { PreferencesComponent } from './components/preferences/preferences.component';
+import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
+import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
+import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
+import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
+import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
+import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component';
+import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component';
+import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component';
+import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component';
+import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component';
+import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component';
+import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component';
+import { ProjectMapComponent } from './components/project-map/project-map.component';
+import { ProjectsComponent } from './components/projects/projects.component';
+import { ServersComponent } from './components/servers/servers.component';
+import { ConsoleComponent } from './components/settings/console/console.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
 import { SystemStatusComponent } from './components/system-status/system-status.component';
-import { ServerResolve } from './resolvers/server-resolve';
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
 import { ConsoleGuard } from './guards/console-guard';
-import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
+import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
+import { ServerResolve } from './resolvers/server-resolve';
 
 const routes: Routes = [
   {
@@ -74,10 +63,10 @@ const routes: Routes = [
       { path: '', redirectTo: 'servers', pathMatch: 'full' },
       { path: 'servers', component: ServersComponent },
       { path: 'bundled', component: BundledServerFinderComponent },
-      { 
-        path: 'server/:server_id/projects', 
+      {
+        path: 'server/:server_id/projects',
         component: ProjectsComponent,
-        resolve: { server : ServerResolve }
+        resolve: { server: ServerResolve },
       },
       { path: 'help', component: HelpComponent },
       { path: 'help/reportissue', component: ReportIssueComponent },
@@ -86,54 +75,87 @@ const routes: Routes = [
       { path: 'installed-software', component: InstalledSoftwareComponent },
       { path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
 
-      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent},
-      { 
-        path: 'server/:server_id/project/:project_id/snapshots', 
+      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent },
+      {
+        path: 'server/:server_id/project/:project_id/snapshots',
         component: ListOfSnapshotsComponent,
-        resolve: { server : ServerResolve }
+        resolve: { server: ServerResolve },
       },
       { path: 'server/:server_id/preferences', component: PreferencesComponent },
       { path: 'server/:server_id/preferences/gns3vm', component: Gns3vmComponent },
       // { path: 'server/:server_id/preferences/general', component: GeneralPreferencesComponent },
-      { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent},
+      { path: 'server/:server_id/preferences/builtin', component: BuiltInPreferencesComponent },
 
       { path: 'server/:server_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate', component: EthernetHubsAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id', component: EthernetHubsTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-hubs/addtemplate',
+        component: EthernetHubsAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-hubs/:template_id',
+        component: EthernetHubsTemplateDetailsComponent,
+      },
 
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches', component: EthernetSwitchesTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate', component: EthernetSwitchesAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id', component: EthernetSwitchesTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches',
+        component: EthernetSwitchesTemplatesComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches/addtemplate',
+        component: EthernetSwitchesAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/ethernet-switches/:template_id',
+        component: EthernetSwitchesTemplateDetailsComponent,
+      },
 
       { path: 'server/:server_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent },
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate', component: CloudNodesAddTemplateComponent },
-      { path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id', component: CloudNodesTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/builtin/cloud-nodes/addtemplate',
+        component: CloudNodesAddTemplateComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/builtin/cloud-nodes/:template_id',
+        component: CloudNodesTemplateDetailsComponent,
+      },
 
       //{ path: 'server/:server_id/preferences/dynamips', component: DynamipsPreferencesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates', component: IosTemplatesComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent },
       { path: 'server/:server_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy', component: CopyIosTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/dynamips/templates/:template_id/copy',
+        component: CopyIosTemplateComponent,
+      },
 
       // { path: 'server/:server_id/preferences/qemu', component: QemuPreferencesComponent },
       { path: 'server/:server_id/preferences/qemu/templates', component: QemuVmTemplatesComponent },
-      { path: 'server/:server_id/preferences/qemu/templates/:template_id/copy', component: CopyQemuVmTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/qemu/templates/:template_id/copy',
+        component: CopyQemuVmTemplateComponent,
+      },
       { path: 'server/:server_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
 
       // { path: 'server/:server_id/preferences/vpcs', component: VpcsPreferencesComponent },
       { path: 'server/:server_id/preferences/vpcs/templates', component: VpcsTemplatesComponent },
-      { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent},
+      { path: 'server/:server_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent },
 
       // { path: 'server/:server_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
       { path: 'server/:server_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent },
-      { path: 'server/:server_id/preferences/virtualbox/templates/:template_id', component: VirtualBoxTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/virtualbox/templates/:template_id',
+        component: VirtualBoxTemplateDetailsComponent,
+      },
       { path: 'server/:server_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent },
 
       // { path: 'server/:server_id/preferences/vmware', component: VmwarePreferencesComponent },
       { path: 'server/:server_id/preferences/vmware/templates', component: VmwareTemplatesComponent },
-      { path: 'server/:server_id/preferences/vmware/templates/:template_id', component: VmwareTemplateDetailsComponent },
+      {
+        path: 'server/:server_id/preferences/vmware/templates/:template_id',
+        component: VmwareTemplateDetailsComponent,
+      },
       { path: 'server/:server_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent },
 
       // { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
@@ -142,37 +164,49 @@ const routes: Routes = [
       // { path: 'server/:server_id/preferences/traceng/addtemplate', component: AddTracengTemplateComponent },
 
       { path: 'server/:server_id/preferences/docker/templates', component: DockerTemplatesComponent },
-      { path: 'server/:server_id/preferences/docker/templates/:template_id', component: DockerTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/docker/templates/:template_id/copy', component: CopyDockerTemplateComponent },
+      {
+        path: 'server/:server_id/preferences/docker/templates/:template_id',
+        component: DockerTemplateDetailsComponent,
+      },
+      {
+        path: 'server/:server_id/preferences/docker/templates/:template_id/copy',
+        component: CopyDockerTemplateComponent,
+      },
       { path: 'server/:server_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent },
 
       { path: 'server/:server_id/preferences/iou/templates', component: IouTemplatesComponent },
       { path: 'server/:server_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent },
       { path: 'server/:server_id/preferences/iou/templates/:template_id/copy', component: CopyIouTemplateComponent },
-      { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent }
-    ]
+      { path: 'server/:server_id/preferences/iou/addtemplate', component: AddIouTemplateComponent },
+    ],
   },
-  { 
-    path: 'server/:server_id/project/:project_id', 
+  {
+    path: 'server/:server_id/project/:project_id',
     component: ProjectMapComponent,
-    canDeactivate: [ConsoleGuard]
+    canDeactivate: [ConsoleGuard],
   },
-  { 
-    path: 'server/:server_id/project/:project_id/nodes/:node_id', 
-    component: WebConsoleFullWindowComponent
+  {
+    path: 'server/:server_id/project/:project_id/nodes/:node_id',
+    component: WebConsoleFullWindowComponent,
   },
-  { 
-    path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id', 
-    component: WebConsoleFullWindowComponent
+  {
+    path: 'static/web-ui/server/:server_id/project/:project_id/nodes/:node_id',
+    component: WebConsoleFullWindowComponent,
   },
   {
     path: '**',
-    component: PageNotFoundComponent
-  }
+    component: PageNotFoundComponent,
+  },
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', enableTracing: false, scrollPositionRestoration: 'enabled'})],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes, {
+      anchorScrolling: 'enabled',
+      enableTracing: false,
+      scrollPositionRestoration: 'enabled',
+    }),
+  ],
+  exports: [RouterModule],
 })
 export class AppRoutingModule {}

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{dark: darkThemeEnabled, light: !darkThemeEnabled}">
-    <router-outlet></router-outlet>
-    <app-adbutler></app-adbutler>
+<div [ngClass]="{ dark: darkThemeEnabled, light: !darkThemeEnabled }">
+  <router-outlet></router-outlet>
+  <app-adbutler></app-adbutler>
 </div>

src/app/app.component.scss

@@ -1,11 +1,11 @@
 mat-menu-panel {
-    min-height: 0px;
+  min-height: 0px;
 }
 
 .dark {
-    background: #263238!important;
+  background: #263238 !important;
 }
 
 .light {
-    background: white!important;
+  background: white !important;
 }

src/app/app.component.spec.ts

@@ -1,14 +1,14 @@
-import { TestBed, async, ComponentFixture } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-
-import { AppComponent } from './app.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
-import { SettingsService } from './services/settings.service';
+import { RouterTestingModule } from '@angular/router/testing';
 import { PersistenceService } from 'angular-persistence';
 import { ElectronService, NgxElectronModule } from 'ngx-electron';
-import createSpyObj = jasmine.createSpyObj;
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { AppComponent } from './app.component';
 import { ProgressService } from './common/progress/progress.service';
+import { SettingsService } from './services/settings.service';
+
+import createSpyObj = jasmine.createSpyObj;
 // import 'jasmine';
 
 describe('AppComponent', () => {
@@ -22,7 +22,7 @@ describe('AppComponent', () => {
       declarations: [AppComponent],
       imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
       providers: [SettingsService, PersistenceService, ProgressService],
-      schemas: [NO_ERRORS_SCHEMA]
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
     electronService = TestBed.get(ElectronService);

src/app/app.component.ts

@@ -1,17 +1,17 @@
+import { OverlayContainer } from '@angular/cdk/overlay';
 import { Component, HostBinding, OnInit } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
+import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
 import { ElectronService } from 'ngx-electron';
+import { ProgressService } from './common/progress/progress.service';
 import { SettingsService } from './services/settings.service';
 import { ThemeService } from './services/theme.service';
-import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
-import { ProgressService } from './common/progress/progress.service';
-import { OverlayContainer} from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
   public darkThemeEnabled: boolean = false;
@@ -38,7 +38,7 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     if (this.electronService.isElectronApp) {
-      this.settingsService.subscribe(settings => {
+      this.settingsService.subscribe((settings) => {
         this.electronService.ipcRenderer.send('settings.changed', settings);
       });
     }
@@ -59,14 +59,14 @@ export class AppComponent implements OnInit {
     this.componentCssClass = theme;
   }
 
-  checkEvent(routerEvent) : void {
+  checkEvent(routerEvent): void {
     if (routerEvent instanceof NavigationStart) {
       this.progressService.activate();
-    }
- 
-    else if (routerEvent instanceof NavigationEnd ||
-             routerEvent instanceof NavigationCancel ||
-             routerEvent instanceof NavigationError) {
+    } else if (
+      routerEvent instanceof NavigationEnd ||
+      routerEvent instanceof NavigationCancel ||
+      routerEvent instanceof NavigationError
+    ) {
       this.progressService.deactivate();
     }
   }

src/app/app.module.ts

@@ -1,289 +1,277 @@
-import { BrowserModule, Title } from '@angular/platform-browser';
-import { NgModule, ErrorHandler } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AngularReactBrowserModule } from '@angular-react/core';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { HttpClientModule } from '@angular/common/http';
-
+import { ErrorHandler, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { BrowserModule, Title } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { D3Service } from 'd3-ng2-service';
+import { DragAndDropModule } from 'angular-draggable-droppable';
 import { PersistenceModule } from 'angular-persistence';
-import { NgxElectronModule } from 'ngx-electron';
+import { ResizableModule } from 'angular-resizable-element';
+import { D3Service } from 'd3-ng2-service';
+import { NgCircleProgressModule } from 'ng-circle-progress';
 import { FileUploadModule } from 'ng2-file-upload';
+import { NgxChildProcessModule } from 'ngx-childprocess';
+import { NgxElectronModule } from 'ngx-electron';
 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 { ServerService } from './services/server.service';
-import { IndexedDbService } from './services/indexed-db.service';
-import { HttpServer, ServerErrorHandler } from './services/http-server.service';
-import { SnapshotService } from './services/snapshot.service';
-import { ProgressDialogService } from './common/progress-dialog/progress-dialog.service';
-import { NodeService } from './services/node.service';
-import { TemplateService } from './services/template.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 { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
-import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component';
 import { AppComponent } from './app.component';
-
-import { ProjectMapComponent } from './components/project-map/project-map.component';
-import { ServersComponent } from './components/servers/servers.component';
-import { AddServerDialogComponent } from './components/servers/add-server-dialog/add-server-dialog.component';
-import { ContextMenuComponent } from './components/project-map/context-menu/context-menu.component';
-import { ContextConsoleMenuComponent } from './components/project-map/context-console-menu/context-console-menu.component';
-import { StartNodeActionComponent } from './components/project-map/context-menu/actions/start-node-action/start-node-action.component';
-import { StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component';
-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 { DrawingsDataSource } from './cartography/datasources/drawings-datasource';
 import { LinksDataSource } from './cartography/datasources/links-datasource';
 import { NodesDataSource } from './cartography/datasources/nodes-datasource';
 import { SymbolsDataSource } from './cartography/datasources/symbols-datasource';
-import { SelectionManager } from './cartography/managers/selection-manager';
 import { InRectangleHelper } from './cartography/helpers/in-rectangle-helper';
-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 { SettingsComponent } from './components/settings/settings.component';
-import { SettingsService } from './services/settings.service';
-
-import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
+import { SelectionManager } from './cartography/managers/selection-manager';
+import { ToasterErrorHandler } from './common/error-handlers/toaster-error-handler';
+import { ProgressDialogComponent } from './common/progress-dialog/progress-dialog.component';
+import { ProgressDialogService } from './common/progress-dialog/progress-dialog.service';
 import { ProgressComponent } from './common/progress/progress.component';
 import { ProgressService } from './common/progress/progress.service';
-import { version } from './version';
-import { ToasterErrorHandler } from './common/error-handlers/toaster-error-handler';
-import { environment } from '../environments/environment';
-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 { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component';
-import { MATERIAL_IMPORTS } from './material.imports';
-import { DrawingService } from './services/drawing.service';
-import { ProjectNameValidator } from './components/projects/models/projectNameValidator';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
-import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
-
-import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { AdbutlerComponent } from './components/adbutler/adbutler.component';
+import { BundledServerFinderComponent } from './components/bundled-server-finder/bundled-server-finder.component';
+import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
+import { DirectLinkComponent } from './components/direct-link/direct-link.component';
+import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component';
+import { DrawingDraggedComponent } from './components/drawings-listeners/drawing-dragged/drawing-dragged.component';
 import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component';
-import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component';
+import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component';
+import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component';
 import { NodeDraggedComponent } from './components/drawings-listeners/node-dragged/node-dragged.component';
 import { NodeLabelDraggedComponent } from './components/drawings-listeners/node-label-dragged/node-label-dragged.component';
-import { DrawingDraggedComponent } from './components/drawings-listeners/drawing-dragged/drawing-dragged.component';
-import { LinkCreatedComponent } from './components/drawings-listeners/link-created/link-created.component';
-import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/interface-label-dragged/interface-label-dragged.component';
-import { ToolsService } from './services/tools.service';
 import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component';
-import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component';
+import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.component';
+import { HelpComponent } from './components/help/help.component';
+import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
 import { InstallSoftwareComponent } from './components/installed-software/install-software/install-software.component';
-
-import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component';
-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';
-import { PreferencesComponent } from './components/preferences/preferences.component';
-import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
-import { ServerSettingsService } from './services/server-settings.service';
-import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
-import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
-import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
-import { QemuService } from './services/qemu.service';
-import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component';
-import { VpcsPreferencesComponent } from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component';
-import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component';
-import { VpcsService } from './services/vpcs.service';
-import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component';
-import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component';
-import { TemplateMocksService } from './services/template-mocks.service';
-import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component';
-import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component';
-import { VirtualBoxService } from './services/virtual-box.service';
-import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
-import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
 import { BuiltInPreferencesComponent } from './components/preferences/built-in/built-in-preferences.component';
-import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
-import { BuiltInTemplatesService } from './services/built-in-templates.service';
-import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
-import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
-import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
 import { CloudNodesAddTemplateComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-add-template/cloud-nodes-add-template.component';
 import { CloudNodesTemplateDetailsComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-template-details/cloud-nodes-template-details.component';
-import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
+import { CloudNodesTemplatesComponent } from './components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component';
+import { EthernetHubsAddTemplateComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-add-template/ethernet-hubs-add-template.component';
+import { EthernetHubsTemplateDetailsComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-template-details/ethernet-hubs-template-details.component';
+import { EthernetHubsTemplatesComponent } from './components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component';
 import { EthernetSwitchesAddTemplateComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-add-template/ethernet-switches-add-template.component';
 import { EthernetSwitchesTemplateDetailsComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component';
-import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
-import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
-import { IosService } from './services/ios.service';
-import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component';
-import { InstalledSoftwareService } from './services/installed-software.service';
-import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service';
-import { PlatformService } from './services/platform.service';
-import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
-import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
-import { IosConfigurationService } from './services/ios-configuration.service';
-import { QemuConfigurationService } from './services/qemu-configuration.service';
-import { VirtualBoxConfigurationService } from './services/virtual-box-configuration.service';
-import { VpcsConfigurationService } from './services/vpcs-configuration.service';
-import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service';
-import { VmwarePreferencesComponent } from './components/preferences/vmware/vmware-preferences/vmware-preferences.component';
-import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component';
-import { VmwareService } from './services/vmware.service';
-import { VmwareConfigurationService } from './services/vmware-configuration.service';
-import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component';
-import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component';
+import { EthernetSwitchesTemplatesComponent } from './components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component';
+import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component';
+import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
 import { DeleteConfirmationDialogComponent } from './components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component';
 import { DeleteTemplateComponent } from './components/preferences/common/delete-template-component/delete-template.component';
-import { DockerService } from './services/docker.service';
-import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component';
-import { DockerConfigurationService } from './services/docker-configuration.service';
-import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component';
-import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
-import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
-import { IouService } from './services/iou.service';
-import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
-import { IouConfigurationService } from './services/iou-configuration.service';
-import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
-import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
-import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
-import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
-import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
 import { EmptyTemplatesListComponent } from './components/preferences/common/empty-templates-list/empty-templates-list.component';
-import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component';
-import { SearchFilter } from './filters/searchFilter.pipe';
-import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service';
-import { ServerManagementService } from './services/server-management.service';
-import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component';
-import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
-import { DateFilter } from './filters/dateFilter.pipe';
-import { NameFilter } from './filters/nameFilter.pipe';
-import { CustomAdaptersComponent } from './components/preferences/common/custom-adapters/custom-adapters.component';
-
-import { ConsoleDeviceActionComponent } from './components/project-map/context-menu/actions/console-device-action/console-device-action.component';
-import { ConsoleComponent } from './components/settings/console/console.component';
-import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component';
-import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component';
-import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component';
-import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component';
-import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component';
-import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component';
-import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
-import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
-import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
-import { MapScaleService } from './services/mapScale.service';
-import { AdbutlerComponent } from './components/adbutler/adbutler.component';
-import { ConsoleService } from './services/settings/console.service';
-import { DefaultConsoleService } from './services/settings/default-console.service';
-import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
-import { NonNegativeValidator } from './validators/non-negative-validator';
-import { RotationValidator } from './validators/rotation-validator';
-import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
-import { MapSettingsService } from './services/mapsettings.service';
-import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
-import { HelpComponent } from './components/help/help.component';
-import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component';
-import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component';
-import { LogConsoleComponent } from './components/project-map/log-console/log-console.component';
-import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource';
-import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
-import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
-import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
-import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
-import { InfoService } from './services/info.service';
-import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
-import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
-import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component';
-import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
-import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
-import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
-import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
-import { ProjectsFilter } from './filters/projectsFilter.pipe';
-import { ComputeService } from './services/compute.service';
-import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component';
-import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component';
-import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component';
-import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component';
-import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component';
-import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component';
 import { PortsComponent } from './components/preferences/common/ports/ports.component';
-import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component';
-import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
-import { CustomAdaptersTableComponent } from './components/preferences/common/custom-adapters-table/custom-adapters-table.component';
-import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
-import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component';
+import { SymbolsMenuComponent } from './components/preferences/common/symbols-menu/symbols-menu.component';
+import { SymbolsComponent } from './components/preferences/common/symbols/symbols.component';
 import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component';
-import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component';
-import { ConfiguratorDialogVmwareComponent } from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component';
-import { ConfiguratorDialogIouComponent } from './components/project-map/node-editors/configurator/iou/configurator-iou.component';
-import { ConfiguratorDialogIosComponent } from './components/project-map/node-editors/configurator/ios/configurator-ios.component';
-import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component';
-import { EditNetworkConfigurationDialogComponent } from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component';
-import { ConfigureCustomAdaptersDialogComponent } from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component';
-import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component';
-import { ConfiguratorDialogTracengComponent } from './components/project-map/node-editors/configurator/traceng/configurator-traceng.component';
+import { AddDockerTemplateComponent } from './components/preferences/docker/add-docker-template/add-docker-template.component';
+import { CopyDockerTemplateComponent } from './components/preferences/docker/copy-docker-template/copy-docker-template.component';
+import { DockerTemplateDetailsComponent } from './components/preferences/docker/docker-template-details/docker-template-details.component';
+import { DockerTemplatesComponent } from './components/preferences/docker/docker-templates/docker-templates.component';
+import { AddIosTemplateComponent } from './components/preferences/dynamips/add-ios-template/add-ios-template.component';
+import { CopyIosTemplateComponent } from './components/preferences/dynamips/copy-ios-template/copy-ios-template.component';
+import { DynamipsPreferencesComponent } from './components/preferences/dynamips/dynamips-preferences/dynamips-preferences.component';
+import { IosTemplateDetailsComponent } from './components/preferences/dynamips/ios-template-details/ios-template-details.component';
+import { IosTemplatesComponent } from './components/preferences/dynamips/ios-templates/ios-templates.component';
+import { GeneralPreferencesComponent } from './components/preferences/general/general-preferences.component';
+import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
+import { AddIouTemplateComponent } from './components/preferences/ios-on-unix/add-iou-template/add-iou-template.component';
+import { CopyIouTemplateComponent } from './components/preferences/ios-on-unix/copy-iou-template/copy-iou-template.component';
+import { IouTemplateDetailsComponent } from './components/preferences/ios-on-unix/iou-template-details/iou-template-details.component';
+import { IouTemplatesComponent } from './components/preferences/ios-on-unix/iou-templates/iou-templates.component';
+import { PreferencesComponent } from './components/preferences/preferences.component';
+import { AddQemuVmTemplateComponent } from './components/preferences/qemu/add-qemu-vm-template/add-qemu-vm-template.component';
+import { CopyQemuVmTemplateComponent } from './components/preferences/qemu/copy-qemu-vm-template/copy-qemu-vm-template.component';
+import { QemuPreferencesComponent } from './components/preferences/qemu/qemu-preferences/qemu-preferences.component';
+import { QemuVmTemplateDetailsComponent } from './components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component';
+import { QemuVmTemplatesComponent } from './components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component';
 import { AddTracengTemplateComponent } from './components/preferences/traceng/add-traceng/add-traceng-template.component';
 import { TracengPreferencesComponent } from './components/preferences/traceng/traceng-preferences/traceng-preferences.component';
-import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
-import { TracengService } from './services/traceng.service';
 import { TracengTemplateDetailsComponent } from './components/preferences/traceng/traceng-template-details/traceng-template-details.component';
-import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component';
-import { ChooseNameDialogComponent } from './components/projects/choose-name-dialog/choose-name-dialog.component';
-import { PacketCaptureService } from './services/packet-capture.service';
-import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component';
-import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component';
-import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
-import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component';
-import { ResizableModule } from 'angular-resizable-element';
-import { DragAndDropModule } from 'angular-draggable-droppable';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
+import { TracengTemplatesComponent } from './components/preferences/traceng/traceng-templates/traceng-templates.component';
+import { AddVirtualBoxTemplateComponent } from './components/preferences/virtual-box/add-virtual-box-template/add-virtual-box-template.component';
+import { VirtualBoxPreferencesComponent } from './components/preferences/virtual-box/virtual-box-preferences/virtual-box-preferences.component';
+import { VirtualBoxTemplateDetailsComponent } from './components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component';
+import { VirtualBoxTemplatesComponent } from './components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component';
+import { AddVmwareTemplateComponent } from './components/preferences/vmware/add-vmware-template/add-vmware-template.component';
+import { VmwarePreferencesComponent } from './components/preferences/vmware/vmware-preferences/vmware-preferences.component';
+import { VmwareTemplateDetailsComponent } from './components/preferences/vmware/vmware-template-details/vmware-template-details.component';
+import { VmwareTemplatesComponent } from './components/preferences/vmware/vmware-templates/vmware-templates.component';
+import { AddVpcsTemplateComponent } from './components/preferences/vpcs/add-vpcs-template/add-vpcs-template.component';
+import { VpcsPreferencesComponent } from './components/preferences/vpcs/vpcs-preferences/vpcs-preferences.component';
+import { VpcsTemplateDetailsComponent } from './components/preferences/vpcs/vpcs-template-details/vpcs-template-details.component';
+import { VpcsTemplatesComponent } from './components/preferences/vpcs/vpcs-templates/vpcs-templates.component';
+import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component';
+import { ChangeSymbolDialogComponent } from './components/project-map/change-symbol-dialog/change-symbol-dialog.component';
+import { ConsoleWrapperComponent } from './components/project-map/console-wrapper/console-wrapper.component';
+import { ContextConsoleMenuComponent } from './components/project-map/context-console-menu/context-console-menu.component';
 import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component';
 import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component';
-import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
-import { TemplateFilter } from './filters/templateFilter.pipe';
-import { NotificationService } from './services/notification.service';
-import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
-import { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
-import { Gns3vmService } from './services/gns3vm.service';
-import { ThemeService } from './services/theme.service';
-import { ConfigureGns3VMDialogComponent } from './components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
-import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component';
-import { GoogleAnalyticsService } from './services/google-analytics.service';
-import { DirectLinkComponent } from './components/direct-link/direct-link.component';
-import { SystemStatusComponent } from './components/system-status/system-status.component';
-import { StatusInfoComponent } from './components/system-status/status-info/status-info.component';
-import { StatusChartComponent } from './components/system-status/status-chart/status-chart.component';
-import { NgCircleProgressModule } from 'ng-circle-progress';
-import { OpenFileExplorerActionComponent } from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component';
-import { NgxChildProcessModule } from 'ngx-childprocess';
-import { ServerResolve } from './resolvers/server-resolve';
-import { HttpConsoleActionComponent } from './components/project-map/context-menu/actions/http-console/http-console-action.component';
-import { WebConsoleComponent } from './components/project-map/web-console/web-console.component';
-import { ConsoleWrapperComponent } from './components/project-map/console-wrapper/console-wrapper.component';
-import { NodeConsoleService } from './services/nodeConsole.service';
-import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component';
-import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
-import { ConsoleGuard } from './guards/console-guard';
-import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component';
-import { ApplianceService } from './services/appliances.service';
-import { DataSourceFilter } from './filters/dataSourceFilter';
+import { BringToFrontActionComponent } from './components/project-map/context-menu/actions/bring-to-front-action/bring-to-front-action.component';
 import { ChangeHostnameActionComponent } from './components/project-map/context-menu/actions/change-hostname/change-hostname-action.component';
-import { ChangeHostnameDialogComponent } from './components/project-map/change-hostname-dialog/change-hostname-dialog.component';
+import { ChangeSymbolActionComponent } from './components/project-map/context-menu/actions/change-symbol/change-symbol-action.component';
+import { ConfigActionComponent } from './components/project-map/context-menu/actions/config-action/config-action.component';
+import { ConsoleDeviceActionBrowserComponent } from './components/project-map/context-menu/actions/console-device-action-browser/console-device-action-browser.component';
+import { ConsoleDeviceActionComponent } from './components/project-map/context-menu/actions/console-device-action/console-device-action.component';
+import { DeleteActionComponent } from './components/project-map/context-menu/actions/delete-action/delete-action.component';
+import { DuplicateActionComponent } from './components/project-map/context-menu/actions/duplicate-action/duplicate-action.component';
+import { EditConfigActionComponent } from './components/project-map/context-menu/actions/edit-config/edit-config-action.component';
+import { EditStyleActionComponent } from './components/project-map/context-menu/actions/edit-style-action/edit-style-action.component';
+import { EditTextActionComponent } from './components/project-map/context-menu/actions/edit-text-action/edit-text-action.component';
+import { ExportConfigActionComponent } from './components/project-map/context-menu/actions/export-config/export-config-action.component';
+import { HttpConsoleNewTabActionComponent } from './components/project-map/context-menu/actions/http-console-new-tab/http-console-new-tab-action.component';
+import { HttpConsoleActionComponent } from './components/project-map/context-menu/actions/http-console/http-console-action.component';
+import { ImportConfigActionComponent } from './components/project-map/context-menu/actions/import-config/import-config-action.component';
+import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-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 { OpenFileExplorerActionComponent } from './components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component';
+import { PacketFiltersActionComponent } from './components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component';
+import { ReloadNodeActionComponent } from './components/project-map/context-menu/actions/reload-node-action/reload-node-action.component';
+import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
+import { ShowNodeActionComponent } from './components/project-map/context-menu/actions/show-node-action/show-node-action.component';
+import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component';
+import { StartCaptureActionComponent } from './components/project-map/context-menu/actions/start-capture/start-capture-action.component';
+import { StartNodeActionComponent } from './components/project-map/context-menu/actions/start-node-action/start-node-action.component';
+import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
+import { StopNodeActionComponent } from './components/project-map/context-menu/actions/stop-node-action/stop-node-action.component';
+import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
+import { SuspendNodeActionComponent } from './components/project-map/context-menu/actions/suspend-node-action/suspend-node-action.component';
+import { ContextMenuComponent } from './components/project-map/context-menu/context-menu.component';
+import { ConfigDialogComponent } from './components/project-map/context-menu/dialogs/config-dialog/config-dialog.component';
+import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';
+import { StyleEditorDialogComponent } from './components/project-map/drawings-editors/style-editor/style-editor.component';
+import { TextEditorDialogComponent } from './components/project-map/drawings-editors/text-editor/text-editor.component';
+import { HelpDialogComponent } from './components/project-map/help-dialog/help-dialog.component';
+import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
+import { ImportApplianceComponent } from './components/project-map/import-appliance/import-appliance.component';
+import { InfoDialogComponent } from './components/project-map/info-dialog/info-dialog.component';
+import { LogConsoleComponent } from './components/project-map/log-console/log-console.component';
+import { LogEventsDataSource } from './components/project-map/log-console/log-events-datasource';
 import { ApplianceInfoDialogComponent } from './components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component';
-import { InformationDialogComponent } from './components/dialogs/information-dialog.component';
+import { NewTemplateDialogComponent } from './components/project-map/new-template-dialog/new-template-dialog.component';
 import { TemplateNameDialogComponent } from './components/project-map/new-template-dialog/template-name-dialog/template-name-dialog.component';
+import { ConfigEditorDialogComponent } from './components/project-map/node-editors/config-editor/config-editor.component';
+import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component';
+import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component';
+import { ConfiguratorDialogDockerComponent } from './components/project-map/node-editors/configurator/docker/configurator-docker.component';
+import { ConfigureCustomAdaptersDialogComponent } from './components/project-map/node-editors/configurator/docker/configure-custom-adapters/configure-custom-adapters.component';
+import { EditNetworkConfigurationDialogComponent } from './components/project-map/node-editors/configurator/docker/edit-network-configuration/edit-network-configuration.component';
+import { ConfiguratorDialogEthernetSwitchComponent } from './components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component';
+import { ConfiguratorDialogEthernetHubComponent } from './components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component';
+import { ConfiguratorDialogIosComponent } from './components/project-map/node-editors/configurator/ios/configurator-ios.component';
+import { ConfiguratorDialogIouComponent } from './components/project-map/node-editors/configurator/iou/configurator-iou.component';
+import { ConfiguratorDialogNatComponent } from './components/project-map/node-editors/configurator/nat/configurator-nat.component';
+import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
+import { QemuImageCreatorComponent } from './components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component';
+import { ConfiguratorDialogSwitchComponent } from './components/project-map/node-editors/configurator/switch/configurator-switch.component';
+import { ConfiguratorDialogTracengComponent } from './components/project-map/node-editors/configurator/traceng/configurator-traceng.component';
+import { ConfiguratorDialogVirtualBoxComponent } from './components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component';
+import { ConfiguratorDialogVmwareComponent } from './components/project-map/node-editors/configurator/vmware/configurator-vmware.component';
+import { ConfiguratorDialogVpcsComponent } from './components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component';
+import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
+import { NodesMenuComponent } from './components/project-map/nodes-menu/nodes-menu.component';
+import { PacketFiltersDialogComponent } from './components/project-map/packet-capturing/packet-filters/packet-filters.component';
+import { StartCaptureDialogComponent } from './components/project-map/packet-capturing/start-capture/start-capture.component';
+import { ProjectMapMenuComponent } from './components/project-map/project-map-menu/project-map-menu.component';
+import { ProjectMapComponent } from './components/project-map/project-map.component';
+import { ScreenshotDialogComponent } from './components/project-map/screenshot-dialog/screenshot-dialog.component';
+import { WebConsoleComponent } from './components/project-map/web-console/web-console.component';
+import { AddBlankProjectDialogComponent } from './components/projects/add-blank-project-dialog/add-blank-project-dialog.component';
+import { ChooseNameDialogComponent } from './components/projects/choose-name-dialog/choose-name-dialog.component';
+import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component';
+import { ConfirmationDialogComponent } from './components/projects/confirmation-dialog/confirmation-dialog.component';
+import { EditProjectDialogComponent } from './components/projects/edit-project-dialog/edit-project-dialog.component';
+import { ImportProjectDialogComponent } from './components/projects/import-project-dialog/import-project-dialog.component';
+import { ProjectNameValidator } from './components/projects/models/projectNameValidator';
+import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
+import { ProjectsComponent } from './components/projects/projects.component';
+import { SaveProjectDialogComponent } from './components/projects/save-project-dialog/save-project-dialog.component';
+import { AddServerDialogComponent } from './components/servers/add-server-dialog/add-server-dialog.component';
+import { ConfigureGns3VMDialogComponent } from './components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component';
+import { ServerDiscoveryComponent } from './components/servers/server-discovery/server-discovery.component';
+import { ServersComponent } from './components/servers/servers.component';
+import { ConsoleComponent } from './components/settings/console/console.component';
+import { SettingsComponent } from './components/settings/settings.component';
+import { CreateSnapshotDialogComponent } from './components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component';
+import { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.component';
+import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-item/snapshot-menu-item.component';
+import { StatusChartComponent } from './components/system-status/status-chart/status-chart.component';
+import { StatusInfoComponent } from './components/system-status/status-info/status-info.component';
+import { SystemStatusComponent } from './components/system-status/system-status.component';
+import { TemplateListDialogComponent } from './components/template/template-list-dialog/template-list-dialog.component';
+import { TemplateComponent } from './components/template/template.component';
+import { TopologySummaryComponent } from './components/topology-summary/topology-summary.component';
+import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
+import { DataSourceFilter } from './filters/dataSourceFilter';
+import { DateFilter } from './filters/dateFilter.pipe';
+import { NameFilter } from './filters/nameFilter.pipe';
+import { ProjectsFilter } from './filters/projectsFilter.pipe';
+import { SearchFilter } from './filters/searchFilter.pipe';
+import { TemplateFilter } from './filters/templateFilter.pipe';
+import { ConsoleGuard } from './guards/console-guard';
+import { ProjectWebServiceHandler } from './handlers/project-web-service-handler';
+import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
+import { MATERIAL_IMPORTS } from './material.imports';
+import { ServerResolve } from './resolvers/server-resolve';
+import { ApplianceService } from './services/appliances.service';
+import { BuiltInTemplatesConfigurationService } from './services/built-in-templates-configuration.service';
+import { BuiltInTemplatesService } from './services/built-in-templates.service';
+import { ComputeService } from './services/compute.service';
+import { DockerConfigurationService } from './services/docker-configuration.service';
+import { DockerService } from './services/docker.service';
+import { DrawingService } from './services/drawing.service';
+import { ExternalSoftwareDefinitionService } from './services/external-software-definition.service';
+import { Gns3vmService } from './services/gns3vm.service';
+import { GoogleAnalyticsService } from './services/google-analytics.service';
+import { HttpServer, ServerErrorHandler } from './services/http-server.service';
+import { IndexedDbService } from './services/indexed-db.service';
+import { InfoService } from './services/info.service';
+import { InstalledSoftwareService } from './services/installed-software.service';
+import { IosConfigurationService } from './services/ios-configuration.service';
+import { IosService } from './services/ios.service';
+import { IouConfigurationService } from './services/iou-configuration.service';
+import { IouService } from './services/iou.service';
+import { LinkService } from './services/link.service';
+import { MapScaleService } from './services/mapScale.service';
+import { MapSettingsService } from './services/mapsettings.service';
+import { NodeService } from './services/node.service';
+import { NodeConsoleService } from './services/nodeConsole.service';
+import { NotificationService } from './services/notification.service';
+import { PacketCaptureService } from './services/packet-capture.service';
+import { PlatformService } from './services/platform.service';
+import { ProjectService } from './services/project.service';
+import { QemuConfigurationService } from './services/qemu-configuration.service';
+import { QemuService } from './services/qemu.service';
+import { RecentlyOpenedProjectService } from './services/recentlyOpenedProject.service';
+import { ServerManagementService } from './services/server-management.service';
+import { ServerSettingsService } from './services/server-settings.service';
+import { ServerDatabase } from './services/server.database';
+import { ServerService } from './services/server.service';
+import { SettingsService } from './services/settings.service';
+import { ConsoleService } from './services/settings/console.service';
+import { DefaultConsoleService } from './services/settings/default-console.service';
+import { SnapshotService } from './services/snapshot.service';
+import { SymbolService } from './services/symbol.service';
+import { TemplateMocksService } from './services/template-mocks.service';
+import { TemplateService } from './services/template.service';
+import { ThemeService } from './services/theme.service';
+import { ToasterService } from './services/toaster.service';
+import { ToolsService } from './services/tools.service';
+import { TracengService } from './services/traceng.service';
 import { UpdatesService } from './services/updates.service';
-import { ReportIssueComponent } from './components/help/report-issue/report-issue.component';
-import { AngularReactBrowserModule } from '@angular-react/core';
-import { FabDialogModule, FabButtonModule } from '@angular-react/fabric';
-import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
+import { VersionService } from './services/version.service';
+import { VirtualBoxConfigurationService } from './services/virtual-box-configuration.service';
+import { VirtualBoxService } from './services/virtual-box.service';
+import { VmwareConfigurationService } from './services/vmware-configuration.service';
+import { VmwareService } from './services/vmware.service';
+import { VpcsConfigurationService } from './services/vpcs-configuration.service';
+import { VpcsService } from './services/vpcs.service';
+import { NonNegativeValidator } from './validators/non-negative-validator';
+import { RotationValidator } from './validators/rotation-validator';
 
 @NgModule({
   declarations: [
@@ -470,7 +458,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     TemplateNameDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
     EditNetworkConfigurationDialogComponent,
-    ReportIssueComponent
+    ReportIssueComponent,
   ],
   imports: [
     AngularReactBrowserModule,
@@ -492,7 +480,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     NgxChildProcessModule,
     MATERIAL_IMPORTS,
     NgCircleProgressModule.forRoot(),
-    OverlayModule
+    OverlayModule,
   ],
   providers: [
     SettingsService,
@@ -567,7 +555,7 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     ConsoleGuard,
     Title,
     ApplianceService,
-    UpdatesService
+    UpdatesService,
   ],
   entryComponents: [
     AddServerDialogComponent,
@@ -615,10 +603,10 @@ import { OverlayContainer, OverlayModule } from '@angular/cdk/overlay';
     ChangeHostnameDialogComponent,
     ApplianceInfoDialogComponent,
     ConfigureCustomAdaptersDialogComponent,
-    EditNetworkConfigurationDialogComponent
+    EditNetworkConfigurationDialogComponent,
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {
-  constructor(protected _googleAnalyticsService: GoogleAnalyticsService) { }
+  constructor(protected _googleAnalyticsService: GoogleAnalyticsService) {}
 }

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

@@ -1,6 +1,4 @@
-import { NodeComponent } from './components/experimental-map/node/node.component';
-import { LinkComponent } from './components/experimental-map/link/link.component';
-import { StatusComponent } from './components/experimental-map/status/status.component';
+import { DraggableComponent } from './components/experimental-map/draggable/draggable.component';
 import { DrawingComponent } from './components/experimental-map/drawing/drawing.component';
 import { EllipseComponent } from './components/experimental-map/drawing/drawings/ellipse/ellipse.component';
 import { ImageComponent } from './components/experimental-map/drawing/drawings/image/image.component';
@@ -8,8 +6,10 @@ import { LineComponent } from './components/experimental-map/drawing/drawings/li
 import { RectComponent } from './components/experimental-map/drawing/drawings/rect/rect.component';
 import { TextComponent } from './components/experimental-map/drawing/drawings/text/text.component';
 import { InterfaceLabelComponent } from './components/experimental-map/interface-label/interface-label.component';
-import { DraggableComponent } from './components/experimental-map/draggable/draggable.component';
+import { LinkComponent } from './components/experimental-map/link/link.component';
+import { NodeComponent } from './components/experimental-map/node/node.component';
 import { SelectionComponent } from './components/experimental-map/selection/selection.component';
+import { StatusComponent } from './components/experimental-map/status/status.component';
 
 export const ANGULAR_MAP_DECLARATIONS = [
   NodeComponent,
@@ -23,5 +23,5 @@ export const ANGULAR_MAP_DECLARATIONS = [
   TextComponent,
   DraggableComponent,
   SelectionComponent,
-  InterfaceLabelComponent
+  InterfaceLabelComponent,
 ];

src/app/cartography/cartography.module.ts

@@ -1,27 +1,22 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-
-import { CssFixer } from './helpers/css-fixer';
-import { FontFixer } from './helpers/font-fixer';
-import { DefaultDrawingsFactory } from './helpers/default-drawings-factory';
-import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper';
-import { SvgToDrawingConverter } from './helpers/svg-to-drawing-converter';
-import { QtDasharrayFixer } from './helpers/qt-dasharray-fixer';
-import { LayersManager } from './managers/layers-manager';
-import { MapChangeDetectorRef } from './services/map-change-detector-ref';
-import { Context } from './models/context';
 import { ANGULAR_MAP_DECLARATIONS } from './angular-map.imports';
-import { D3_MAP_IMPORTS } from './d3-map.imports';
-import { CanvasSizeDetector } from './helpers/canvas-size-detector';
-import { DrawingsEventSource } from './events/drawings-event-source';
-import { NodesEventSource } from './events/nodes-event-source';
-import { MapDrawingToSvgConverter } from './converters/map/map-drawing-to-svg-converter';
+import { D3MapComponent } from './components/d3-map/d3-map.component';
+import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
+import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
+import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
+import { ExperimentalMapComponent } from './components/experimental-map/experimental-map.component';
+import { SelectionControlComponent } from './components/selection-control/selection-control.component';
+import { SelectionSelectComponent } from './components/selection-select/selection-select.component';
+import { TextEditorComponent } from './components/text-editor/text-editor.component';
 import { DrawingToMapDrawingConverter } from './converters/map/drawing-to-map-drawing-converter';
 import { LabelToMapLabelConverter } from './converters/map/label-to-map-label-converter';
+import { LinkNodeToMapLinkNodeConverter } from './converters/map/link-node-to-map-link-node-converter';
 import { LinkToMapLinkConverter } from './converters/map/link-to-map-link-converter';
 import { MapDrawingToDrawingConverter } from './converters/map/map-drawing-to-drawing-converter';
+import { MapDrawingToSvgConverter } from './converters/map/map-drawing-to-svg-converter';
 import { MapLabelToLabelConverter } from './converters/map/map-label-to-label-converter';
 import { MapLinkNodeToLinkNodeConverter } from './converters/map/map-link-node-to-link-node-converter';
 import { MapLinkToLinkConverter } from './converters/map/map-link-to-link-converter';
@@ -31,34 +26,38 @@ import { MapSymbolToSymbolConverter } from './converters/map/map-symbol-to-symbo
 import { NodeToMapNodeConverter } from './converters/map/node-to-map-node-converter';
 import { PortToMapPortConverter } from './converters/map/port-to-map-port-converter';
 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 { LinksEventSource } from './events/links-event-source';
-import { D3MapComponent } from './components/d3-map/d3-map.component';
-import { ExperimentalMapComponent } from './components/experimental-map/experimental-map.component';
-import { SelectionEventSource } from './events/selection-event-source';
-import { SelectionControlComponent } from './components/selection-control/selection-control.component';
-import { SelectionSelectComponent } from './components/selection-select/selection-select.component';
-import { DraggableSelectionComponent } from './components/draggable-selection/draggable-selection.component';
-import { MapSettingsManager } from './managers/map-settings-manager';
-import { DrawingResizingComponent } from './components/drawing-resizing/drawing-resizing.component';
-import { FontBBoxCalculator } from './helpers/font-bbox-calculator';
 import { StylesToFontConverter } from './converters/styles-to-font-converter';
-import { TextElementFactory } from './helpers/drawings-factory/text-element-factory';
-import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-element-factory';
-import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-element-factory';
-import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
-import { TextEditorComponent } from './components/text-editor/text-editor.component';
-import { DrawingAddingComponent } from './components/drawing-adding/drawing-adding.component';
-import { MovingEventSource } from './events/moving-event-source';
+import { D3_MAP_IMPORTS } from './d3-map.imports';
+import {
+  MapDrawingsDataSource,
+  MapLinksDataSource,
+  MapNodesDataSource,
+  MapSymbolsDataSource,
+} from './datasources/map-datasource';
 import { MovingCanvasDirective } from './directives/moving-canvas.directive';
 import { ZoomingCanvasDirective } from './directives/zooming-canvas.directive';
+import { DrawingsEventSource } from './events/drawings-event-source';
+import { LinksEventSource } from './events/links-event-source';
+import { MovingEventSource } from './events/moving-event-source';
+import { NodesEventSource } from './events/nodes-event-source';
+import { SelectionEventSource } from './events/selection-event-source';
+import { CanvasSizeDetector } from './helpers/canvas-size-detector';
+import { CssFixer } from './helpers/css-fixer';
+import { DefaultDrawingsFactory } from './helpers/default-drawings-factory';
+import { EllipseElementFactory } from './helpers/drawings-factory/ellipse-element-factory';
+import { LineElementFactory } from './helpers/drawings-factory/line-element-factory';
+import { RectangleElementFactory } from './helpers/drawings-factory/rectangle-element-factory';
+import { TextElementFactory } from './helpers/drawings-factory/text-element-factory';
+import { FontBBoxCalculator } from './helpers/font-bbox-calculator';
+import { FontFixer } from './helpers/font-fixer';
+import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper';
+import { QtDasharrayFixer } from './helpers/qt-dasharray-fixer';
+import { SvgToDrawingConverter } from './helpers/svg-to-drawing-converter';
+import { GraphDataManager } from './managers/graph-data-manager';
+import { LayersManager } from './managers/layers-manager';
+import { MapSettingsManager } from './managers/map-settings-manager';
+import { Context } from './models/context';
+import { MapChangeDetectorRef } from './services/map-change-detector-ref';
 import { EthernetLinkWidget } from './widgets/links/ethernet-link';
 import { SerialLinkWidget } from './widgets/links/serial-link';
 
@@ -75,7 +74,7 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     SelectionSelectComponent,
     DraggableSelectionComponent,
     MovingCanvasDirective,
-    ZoomingCanvasDirective
+    ZoomingCanvasDirective,
   ],
   providers: [
     CssFixer,
@@ -122,8 +121,8 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     StylesToFontConverter,
     EthernetLinkWidget,
     SerialLinkWidget,
-    ...D3_MAP_IMPORTS
+    ...D3_MAP_IMPORTS,
   ],
-  exports: [D3MapComponent, ExperimentalMapComponent]
+  exports: [D3MapComponent, ExperimentalMapComponent],
 })
 export class CartographyModule {}

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

@@ -1,14 +1,38 @@
 <svg id="map" #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
   <defs>
-    <pattern attr.x="{{drawingGridX}}" attr.y="{{drawingGridY}}" id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">
-      <path attr.d="M {{project.drawing_grid_size}} 0 L 0 0 0 {{project.drawing_grid_size}}" fill="none" stroke="silver" attr.stroke-width="{{gridVisibility}}"/>
+    <pattern
+      attr.x="{{ drawingGridX }}"
+      attr.y="{{ drawingGridY }}"
+      id="gridDrawing"
+      attr.width="{{ project.drawing_grid_size }}"
+      attr.height="{{ project.drawing_grid_size }}"
+      patternUnits="userSpaceOnUse"
+    >
+      <path
+        attr.d="M {{ project.drawing_grid_size }} 0 L 0 0 0 {{ project.drawing_grid_size }}"
+        fill="none"
+        stroke="silver"
+        attr.stroke-width="{{ gridVisibility }}"
+      />
     </pattern>
   </defs>
 
   <defs>
-    <pattern attr.x="{{nodeGridX}}" attr.y="{{nodeGridY}}" id="gridNode" attr.width="{{project.grid_size}}" attr.height="{{project.grid_size}}" patternUnits="userSpaceOnUse">
-      <path attr.d="M {{project.grid_size}} 0 L 0 0 0 {{project.grid_size}}" fill="none" stroke="DarkSlateGray" attr.stroke-width="{{gridVisibility}}"/>
+    <pattern
+      attr.x="{{ nodeGridX }}"
+      attr.y="{{ nodeGridY }}"
+      id="gridNode"
+      attr.width="{{ project.grid_size }}"
+      attr.height="{{ project.grid_size }}"
+      patternUnits="userSpaceOnUse"
+    >
+      <path
+        attr.d="M {{ project.grid_size }} 0 L 0 0 0 {{ project.grid_size }}"
+        fill="none"
+        stroke="DarkSlateGray"
+        attr.stroke-width="{{ gridVisibility }}"
+      />
     </pattern>
   </defs>
 

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { D3MapComponent } from './d3-map.component';
 
 describe('D3MapComponent', () => {
@@ -8,7 +7,7 @@ describe('D3MapComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [D3MapComponent]
+      declarations: [D3MapComponent],
     }).compileComponents();
   }));
 

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

@@ -7,38 +7,35 @@ import {
   OnDestroy,
   OnInit,
   SimpleChange,
-  EventEmitter,
-  Output,
-  ViewChild
+  ViewChild,
 } from '@angular/core';
-import { Selection, select } from 'd3-selection';
-
-import { GraphLayout } from '../../widgets/graph-layout';
-import { Context } from '../../models/context';
-import { Size } from '../../models/size';
+import { select, Selection } from 'd3-selection';
 import { Subscription } from 'rxjs';
-import { InterfaceLabelWidget } from '../../widgets/interface-label';
-import { SelectionTool } from '../../tools/selection-tool';
-import { MovingTool } from '../../tools/moving-tool';
-import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
-import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
-import { Node } from '../../models/node';
 import { Link } from '../../../models/link';
-import { Drawing } from '../../models/drawing';
+import { Project } from '../../../models/project';
+import { Server } from '../../../models/server';
 import { Symbol } from '../../../models/symbol';
+import { MapScaleService } from '../../../services/mapScale.service';
+import { MapSettingsService } from '../../../services/mapsettings.service';
+import { ToolsService } from '../../../services/tools.service';
+import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { MapSettingsManager } from '../../managers/map-settings-manager';
-import { Server } from '../../../models/server';
-import { ToolsService } from '../../../services/tools.service';
+import { Context } from '../../models/context';
+import { Drawing } from '../../models/drawing';
+import { Node } from '../../models/node';
+import { Size } from '../../models/size';
+import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
+import { MovingTool } from '../../tools/moving-tool';
+import { SelectionTool } from '../../tools/selection-tool';
+import { GraphLayout } from '../../widgets/graph-layout';
+import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { TextEditorComponent } from '../text-editor/text-editor.component';
-import { MapScaleService } from '../../../services/mapScale.service';
-import { Project } from '../../../models/project';
-import { MapSettingsService } from '../../../services/mapsettings.service';
 
 @Component({
   selector: 'app-d3-map',
   templateUrl: './d3-map.component.html',
-  styleUrls: ['./d3-map.component.scss']
+  styleUrls: ['./d3-map.component.scss'],
 })
 export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nodes: Node[] = [];
@@ -60,7 +57,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   private subscriptions: Subscription[] = [];
   private drawLinkTool: boolean;
   protected settings = {
-    show_interface_labels: true
+    show_interface_labels: true,
   };
   public gridVisibility: number = 0;
 
@@ -148,9 +145,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
       }
     });
 
-    this.subscriptions.push(
-      this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
-    );
+    this.subscriptions.push(this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw()));
 
     this.subscriptions.push(
       this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
@@ -172,7 +167,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     );
 
     this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0;
-    this.mapSettingsService.isScrollDisabled.subscribe(val => this.resize(val));
+    this.mapSettingsService.isScrollDisabled.subscribe((val) => this.resize(val));
   }
 
   ngOnDestroy() {
@@ -190,10 +185,7 @@ 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;
   }
@@ -227,11 +219,23 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   updateGrid() {
-    if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.grid_size) * this.project.grid_size));
-    if (this.project.grid_size && this.project.grid_size > 0) this.nodeGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.grid_size) * this.project.grid_size));
+    if (this.project.grid_size && this.project.grid_size > 0)
+      this.nodeGridX =
+        this.project.scene_width / 2 -
+        Math.floor(this.project.scene_width / 2 / this.project.grid_size) * this.project.grid_size;
+    if (this.project.grid_size && this.project.grid_size > 0)
+      this.nodeGridY =
+        this.project.scene_height / 2 -
+        Math.floor(this.project.scene_height / 2 / this.project.grid_size) * this.project.grid_size;
 
-    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridX = (this.project.scene_width/2 - (Math.floor(this.project.scene_width/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
-    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0) this.drawingGridY = (this.project.scene_height/2 - (Math.floor(this.project.scene_height/2 / this.project.drawing_grid_size) * this.project.drawing_grid_size));
+    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
+      this.drawingGridX =
+        this.project.scene_width / 2 -
+        Math.floor(this.project.scene_width / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
+    if (this.project.drawing_grid_size && this.project.drawing_grid_size > 0)
+      this.drawingGridY =
+        this.project.scene_height / 2 -
+        Math.floor(this.project.scene_height / 2 / this.project.drawing_grid_size) * this.project.drawing_grid_size;
   }
 
   @HostListener('window:resize', ['$event'])

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

@@ -1,27 +1,26 @@
-import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-
-import { DraggableSelectionComponent } from './draggable-selection.component';
-import { NodesWidget } from '../../widgets/nodes';
-import { DrawingsWidget } from '../../widgets/drawings';
-import { LinksWidget } from '../../widgets/links';
-import { LabelWidget } from '../../widgets/label';
-import { InterfaceLabelWidget } from '../../widgets/interface-label';
-import { SelectionManager } from '../../managers/selection-manager';
-import { SelectionManagerMock } from '../../managers/selection-manager.spec';
-import { NodesEventSource } from '../../events/nodes-event-source';
+import { EventEmitter } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { select } from 'd3-selection';
+import { MapSettingsService } from '../../../services/mapsettings.service';
+import { DraggableDrag, DraggableEnd, DraggableStart } from '../../events/draggable';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
+import { LinksEventSource } from '../../events/links-event-source';
+import { NodesEventSource } from '../../events/nodes-event-source';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { MockedGraphDataManager } from '../../managers/graph-data-manager.spec';
-import { LinksEventSource } from '../../events/links-event-source';
-import { DraggableStart, DraggableDrag, DraggableEnd } from '../../events/draggable';
-import { MapNode } from '../../models/map/map-node';
-import { EventEmitter } from '@angular/core';
+import { SelectionManager } from '../../managers/selection-manager';
+import { SelectionManagerMock } from '../../managers/selection-manager.spec';
 import { MapDrawing } from '../../models/map/map-drawing';
 import { MapLabel } from '../../models/map/map-label';
-import { MapLinkNode } from '../../models/map/map-link-node';
-import { select } from 'd3-selection';
 import { MapLink } from '../../models/map/map-link';
-import { MapSettingsService } from '../../../services/mapsettings.service';
+import { MapLinkNode } from '../../models/map/map-link-node';
+import { MapNode } from '../../models/map/map-node';
+import { DrawingsWidget } from '../../widgets/drawings';
+import { InterfaceLabelWidget } from '../../widgets/interface-label';
+import { LabelWidget } from '../../widgets/label';
+import { LinksWidget } from '../../widgets/links';
+import { NodesWidget } from '../../widgets/nodes';
+import { DraggableSelectionComponent } from './draggable-selection.component';
 
 describe('DraggableSelectionComponent', () => {
   let component: DraggableSelectionComponent;
@@ -67,8 +66,8 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: nodesStartEventEmitter,
         drag: nodesDragEventEmitter,
-        end: nodesEndEventEmitter
-      }
+        end: nodesEndEventEmitter,
+      },
     };
 
     const drawingsWidgetStub = {
@@ -76,11 +75,11 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: drawingsStartEventEmitter,
         drag: drawingsDragEventEmitter,
-        end: drawingsEndEventEmitter
-      }
+        end: drawingsEndEventEmitter,
+      },
     };
     const linksWidgetStub = {
-      redrawLink: () => {}
+      redrawLink: () => {},
     };
 
     const labelWidgetStub = {
@@ -88,27 +87,27 @@ describe('DraggableSelectionComponent', () => {
       draggable: {
         start: labelStartEventEmitter,
         drag: labelDragEventEmitter,
-        end: labelEndEventEmitter
-      }
+        end: labelEndEventEmitter,
+      },
     };
 
     const interfaceLabelWidgetStub = {
       draggable: {
         start: interfaceLabelStartEventEmitter,
         drag: interfaceLabelDragEventEmitter,
-        end: interfaceLabelEndEventEmitter
-      }
+        end: interfaceLabelEndEventEmitter,
+      },
     };
 
     const nodesEventSourceStub = {
       dragged: { emit: () => {} },
-      labelDragged: { emit: () => {} }
+      labelDragged: { emit: () => {} },
     };
     const drawingsEventSourceStub = {
-      dragged: { emit: () => {} }
+      dragged: { emit: () => {} },
     };
     const linksEventSourceStub = {
-      interfaceDragged: { emit: () => {} }
+      interfaceDragged: { emit: () => {} },
     };
 
     TestBed.configureTestingModule({
@@ -123,9 +122,9 @@ describe('DraggableSelectionComponent', () => {
         { provide: DrawingsEventSource, useValue: drawingsEventSourceStub },
         { provide: GraphDataManager, useValue: mockedGraphDataManager },
         { provide: LinksEventSource, useValue: linksEventSourceStub },
-        { provide: MapSettingsService, useClass: MapSettingsService }
+        { provide: MapSettingsService, useClass: MapSettingsService },
       ],
-      declarations: [DraggableSelectionComponent]
+      declarations: [DraggableSelectionComponent],
     }).compileComponents();
   }));
 

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

@@ -1,28 +1,28 @@
-import { Component, OnInit, OnDestroy, Input } from '@angular/core';
-import { Subscription, merge } from 'rxjs';
-import { NodesWidget } from '../../widgets/nodes';
-import { DrawingsWidget } from '../../widgets/drawings';
-import { LinksWidget } from '../../widgets/links';
-import { SelectionManager } from '../../managers/selection-manager';
-import { NodesEventSource } from '../../events/nodes-event-source';
-import { DrawingsEventSource } from '../../events/drawings-event-source';
-import { GraphDataManager } from '../../managers/graph-data-manager';
-import { DraggableStart, DraggableDrag, DraggableEnd } from '../../events/draggable';
-import { MapNode } from '../../models/map/map-node';
-import { MapDrawing } from '../../models/map/map-drawing';
-import { DraggedDataEvent } from '../../events/event-source';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { select } from 'd3-selection';
-import { MapLabel } from '../../models/map/map-label';
-import { LabelWidget } from '../../widgets/label';
-import { InterfaceLabelWidget } from '../../widgets/interface-label';
-import { MapLinkNode } from '../../models/map/map-link-node';
-import { LinksEventSource } from '../../events/links-event-source';
+import { merge, Subscription } from 'rxjs';
 import { MapSettingsService } from '../../../services/mapsettings.service';
+import { DraggableDrag, DraggableEnd, DraggableStart } from '../../events/draggable';
+import { DrawingsEventSource } from '../../events/drawings-event-source';
+import { DraggedDataEvent } from '../../events/event-source';
+import { LinksEventSource } from '../../events/links-event-source';
+import { NodesEventSource } from '../../events/nodes-event-source';
+import { GraphDataManager } from '../../managers/graph-data-manager';
+import { SelectionManager } from '../../managers/selection-manager';
+import { MapDrawing } from '../../models/map/map-drawing';
+import { MapLabel } from '../../models/map/map-label';
+import { MapLinkNode } from '../../models/map/map-link-node';
+import { MapNode } from '../../models/map/map-node';
+import { DrawingsWidget } from '../../widgets/drawings';
+import { InterfaceLabelWidget } from '../../widgets/interface-label';
+import { LabelWidget } from '../../widgets/label';
+import { LinksWidget } from '../../widgets/links';
+import { NodesWidget } from '../../widgets/nodes';
 
 @Component({
   selector: 'app-draggable-selection',
   templateUrl: './draggable-selection.component.html',
-  styleUrls: ['./draggable-selection.component.scss']
+  styleUrls: ['./draggable-selection.component.scss'],
 })
 export class DraggableSelectionComponent implements OnInit, OnDestroy {
   private start: Subscription;
@@ -62,25 +62,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]);
         }
       }
@@ -95,7 +95,7 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       if (!this.isMapLocked) {
         const selected = this.selectionManager.getSelected();
         // update nodes
-        let mapNodes = selected.filter(item => item instanceof MapNode);
+        let mapNodes = selected.filter((item) => item instanceof MapNode);
         const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
         const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
         selectedNodes.forEach((node: MapNode) => {
@@ -107,18 +107,18 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
           const links = this.graphDataManager
             .getLinks()
             .filter(
-              link =>
+              (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
-        let mapDrawings = selected.filter(item => item instanceof MapDrawing);
+        let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
         const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
         selectedDrawings.forEach((drawing: MapDrawing) => {
           drawing.x += evt.dx;
@@ -127,32 +127,36 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
         });
 
         // update labels
-        let mapLabels = selected.filter(item => item instanceof MapLabel);
-        const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLabels = selected.filter((item) => item instanceof MapLabel);
+        const selectedLabels = mapLabels.filter(
+          (item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLabels.forEach((label: MapLabel) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          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
-        let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
-        const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
+        const selectedLinkNodes = mapLinkNodes.filter(
+          (item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLinkNodes.forEach((interfaceLabel: MapLinkNode) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === interfaceLabel.nodeId).length > 0;
+          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];
+            .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;
@@ -176,23 +180,25 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
       if (!this.isMapLocked) {
         const selected = this.selectionManager.getSelected();
 
-        let mapNodes = selected.filter(item => item instanceof MapNode);
+        let mapNodes = selected.filter((item) => item instanceof MapNode);
         const lockedNodes = mapNodes.filter((item: MapNode) => item.locked);
         const selectedNodes = mapNodes.filter((item: MapNode) => !item.locked);
         selectedNodes.forEach((item: MapNode) => {
           this.nodesEventSource.dragged.emit(new DraggedDataEvent<MapNode>(item, evt.dx, evt.dy));
         });
 
-        let mapDrawings = selected.filter(item => item instanceof MapDrawing);
+        let mapDrawings = selected.filter((item) => item instanceof MapDrawing);
         const selectedDrawings = mapDrawings.filter((item: MapDrawing) => !item.locked);
         selectedDrawings.forEach((item: MapDrawing) => {
           this.drawingsEventSource.dragged.emit(new DraggedDataEvent<MapDrawing>(item, evt.dx, evt.dy));
         });
 
-        let mapLabels = selected.filter(item => item instanceof MapLabel);
-        const selectedLabels = mapLabels.filter((item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0);
+        let mapLabels = selected.filter((item) => item instanceof MapLabel);
+        const selectedLabels = mapLabels.filter(
+          (item: MapLabel) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLabels.forEach((label: MapLabel) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }
@@ -200,10 +206,12 @@ export class DraggableSelectionComponent implements OnInit, OnDestroy {
           this.nodesEventSource.labelDragged.emit(new DraggedDataEvent<MapLabel>(label, evt.dx, evt.dy));
         });
 
-        let mapLinkNodes = selected.filter(item => item instanceof MapLinkNode);
-        const selectedLinkNodes = mapLinkNodes.filter((item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0)
+        let mapLinkNodes = selected.filter((item) => item instanceof MapLinkNode);
+        const selectedLinkNodes = mapLinkNodes.filter(
+          (item: MapLinkNode) => lockedNodes.filter((node) => node.id === item.nodeId).length === 0
+        );
         selectedLinkNodes.forEach((label: MapLinkNode) => {
-          const isParentNodeSelected = selectedNodes.filter(node => node.id === label.nodeId).length > 0;
+          const isParentNodeSelected = selectedNodes.filter((node) => node.id === label.nodeId).length > 0;
           if (isParentNodeSelected) {
             return;
           }

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

@@ -1,8 +1,8 @@
-import { DrawingAddingComponent } from './drawing-adding.component';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { Context } from '../../models/context';
+import { DrawingAddingComponent } from './drawing-adding.component';
 
 describe('DrawingAddingComponent', () => {
   let component: DrawingAddingComponent;
@@ -14,9 +14,9 @@ describe('DrawingAddingComponent', () => {
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsEventSource, useValue: drawingsEventSource },
-        { provide: Context, useClass: Context }
+        { provide: Context, useClass: Context },
       ],
-      declarations: [DrawingAddingComponent]
+      declarations: [DrawingAddingComponent],
     }).compileComponents();
   }));
 

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

@@ -1,13 +1,13 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Context } from '../../models/context';
+import { Subscription } from 'rxjs';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { AddedDataEvent } from '../../events/event-source';
-import { Subscription } from 'rxjs';
+import { Context } from '../../models/context';
 
 @Component({
   selector: 'app-drawing-adding',
   templateUrl: './drawing-adding.component.html',
-  styleUrls: ['./drawing-adding.component.scss']
+  styleUrls: ['./drawing-adding.component.scss'],
 })
 export class DrawingAddingComponent implements OnInit, OnDestroy {
   @Input('svg') svg: SVGSVGElement;
@@ -18,15 +18,19 @@ export class DrawingAddingComponent implements OnInit, OnDestroy {
   constructor(private drawingsEventSource: DrawingsEventSource, private context: Context) {}
 
   ngOnInit() {
-    this.drawingSelected = this.drawingsEventSource.selected.subscribe(evt => {
+    this.drawingSelected = this.drawingsEventSource.selected.subscribe((evt) => {
       evt === '' ? this.deactivate() : this.activate();
     });
   }
 
   activate() {
     let listener = (event: MouseEvent) => {
-      let x = (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x))/this.context.transformation.k;
-      let y = (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y))/this.context.transformation.k;
+      let x =
+        (event.pageX - (this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x)) /
+        this.context.transformation.k;
+      let y =
+        (event.pageY - (this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y)) /
+        this.context.transformation.k;
 
       this.drawingsEventSource.pointToAddSelected.emit(new AddedDataEvent(x, y));
       this.deactivate();

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

@@ -1,12 +1,11 @@
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
-
-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';
 import { EventEmitter } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { ResizingEnd } from '../../events/resizing';
 import { MapDrawing } from '../../models/map/map-drawing';
+import { DrawingsWidget } from '../../widgets/drawings';
+import { DrawingResizingComponent } from './drawing-resizing.component';
 
 export class DrawingWidgetMock {
   resizingFinished = new EventEmitter<ResizingEnd<MapDrawing>>();
@@ -36,9 +35,9 @@ describe('DrawingResizingComponent', () => {
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsWidget, useValue: drawingsWidgetMock },
-        { provide: DrawingsEventSource, useValue: drawingsEventSource }
+        { provide: DrawingsEventSource, useValue: drawingsEventSource },
       ],
-      declarations: [DrawingResizingComponent]
+      declarations: [DrawingResizingComponent],
     }).compileComponents();
   }));
 

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

@@ -1,17 +1,15 @@
-import { Component, OnInit, ElementRef, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
-import { DrawingsWidget } from '../../widgets/drawings';
-import { MapDrawing } from '../../models/map/map-drawing';
 import { ResizedDataEvent } from '../../events/event-source';
 import { ResizingEnd } from '../../events/resizing';
+import { MapDrawing } from '../../models/map/map-drawing';
+import { DrawingsWidget } from '../../widgets/drawings';
 
 @Component({
   selector: 'app-drawing-resizing',
-  template: `
-    <ng-content></ng-content>
-  `,
-  styleUrls: ['./drawing-resizing.component.scss']
+  template: ` <ng-content></ng-content> `,
+  styleUrls: ['./drawing-resizing.component.scss'],
 })
 export class DrawingResizingComponent implements OnInit, OnDestroy {
   resizingFinished: Subscription;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DraggableComponent } from './draggable.component';
 
 describe('DraggableComponent', () => {
@@ -8,7 +7,7 @@ describe('DraggableComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DraggableComponent]
+      declarations: [DraggableComponent],
     }).compileComponents();
   }));
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { Point } from '../../../models/point';
 
@@ -8,10 +8,8 @@ export class DraggableDraggedEvent {
 
 @Component({
   selector: '[app-draggable]',
-  template: `
-    <ng-content></ng-content>
-  `,
-  styleUrls: ['./draggable.component.scss']
+  template: ` <ng-content></ng-content> `,
+  styleUrls: ['./draggable.component.scss'],
 })
 export class DraggableComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input('app-draggable') item: Point;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { DrawingComponent } from './drawing.component';
 
 describe('DrawingComponent', () => {
@@ -8,7 +7,7 @@ describe('DrawingComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [DrawingComponent]
+      declarations: [DrawingComponent],
     }).compileComponents();
   }));
 

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

@@ -1,18 +1,18 @@
-import { Component, OnInit, Input, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { DrawingsEventSource } from '../../../events/drawings-event-source';
+import { DraggedDataEvent } from '../../../events/event-source';
+import { SvgToDrawingConverter } from '../../../helpers/svg-to-drawing-converter';
 import { EllipseElement } from '../../../models/drawings/ellipse-element';
 import { ImageElement } from '../../../models/drawings/image-element';
 import { LineElement } from '../../../models/drawings/line-element';
 import { RectElement } from '../../../models/drawings/rect-element';
 import { TextElement } from '../../../models/drawings/text-element';
-import { SvgToDrawingConverter } from '../../../helpers/svg-to-drawing-converter';
-import { DraggedDataEvent } from '../../../events/event-source';
 import { MapDrawing } from '../../../models/map/map-drawing';
-import { DrawingsEventSource } from '../../../events/drawings-event-source';
 
 @Component({
   selector: '[app-drawing]',
   templateUrl: './drawing.component.html',
-  styleUrls: ['./drawing.component.scss']
+  styleUrls: ['./drawing.component.scss'],
 })
 export class DrawingComponent implements OnInit {
   @Input('app-drawing') drawing: MapDrawing;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { EllipseComponent } from './ellipse.component';
 
 describe('EllipseComponent', () => {
@@ -8,7 +7,7 @@ describe('EllipseComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [EllipseComponent]
+      declarations: [EllipseComponent],
     }).compileComponents();
   }));
 

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { EllipseElement } from '../../../../../models/drawings/ellipse-element';
+import { Component, Input, OnInit } from '@angular/core';
 import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
+import { EllipseElement } from '../../../../../models/drawings/ellipse-element';
 
 @Component({
   selector: '[app-ellipse]',
   templateUrl: './ellipse.component.html',
-  styleUrls: ['./ellipse.component.scss']
+  styleUrls: ['./ellipse.component.scss'],
 })
 export class EllipseComponent implements OnInit {
   @Input('app-ellipse') ellipse: EllipseElement;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ImageComponent } from './image.component';
 
 describe('ImageComponent', () => {
@@ -8,7 +7,7 @@ describe('ImageComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ImageComponent]
+      declarations: [ImageComponent],
     }).compileComponents();
   }));
 

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

@@ -1,10 +1,10 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { ImageElement } from '../../../../../models/drawings/image-element';
 
 @Component({
   selector: '[app-image]',
   templateUrl: './image.component.html',
-  styleUrls: ['./image.component.scss']
+  styleUrls: ['./image.component.scss'],
 })
 export class ImageComponent implements OnInit {
   @Input('app-image') image: ImageElement;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { LineComponent } from './line.component';
 
 describe('LineComponent', () => {
@@ -8,7 +7,7 @@ describe('LineComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LineComponent]
+      declarations: [LineComponent],
     }).compileComponents();
   }));
 

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
 import { LineElement } from '../../../../../models/drawings/line-element';
 
 @Component({
   selector: '[app-line]',
   templateUrl: './line.component.html',
-  styleUrls: ['./line.component.scss']
+  styleUrls: ['./line.component.scss'],
 })
 export class LineComponent implements OnInit {
   @Input('app-line') line: LineElement;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { RectComponent } from './rect.component';
 
 describe('RectComponent', () => {
@@ -8,7 +7,7 @@ describe('RectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [RectComponent]
+      declarations: [RectComponent],
     }).compileComponents();
   }));
 

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { RectElement } from '../../../../../models/drawings/rect-element';
+import { Component, Input, OnInit } from '@angular/core';
 import { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
+import { RectElement } from '../../../../../models/drawings/rect-element';
 
 @Component({
   selector: '[app-rect]',
   templateUrl: './rect.component.html',
-  styleUrls: ['./rect.component.scss']
+  styleUrls: ['./rect.component.scss'],
 })
 export class RectComponent implements OnInit {
   @Input('app-rect') rect: RectElement;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { TextComponent } from './text.component';
 
 describe('TextComponent', () => {
@@ -8,7 +7,7 @@ describe('TextComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TextComponent]
+      declarations: [TextComponent],
     }).compileComponents();
   }));
 

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

@@ -1,12 +1,12 @@
-import { Component, OnInit, Input, ViewChild, ElementRef, DoCheck } from '@angular/core';
+import { Component, DoCheck, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { TextElement } from '../../../../../models/drawings/text-element';
 import { FontFixer } from '../../../../../helpers/font-fixer';
+import { TextElement } from '../../../../../models/drawings/text-element';
 
 @Component({
   selector: '[app-text]',
   templateUrl: './text.component.html',
-  styleUrls: ['./text.component.scss']
+  styleUrls: ['./text.component.scss'],
 })
 export class TextComponent implements OnInit, DoCheck {
   static MARGIN = 4;

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

@@ -1,4 +1,6 @@
 import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   HostListener,
@@ -7,29 +9,26 @@ import {
   OnDestroy,
   OnInit,
   SimpleChange,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  ViewChild
+  ViewChild,
 } from '@angular/core';
-
-import { GraphLayout } from '../../widgets/graph-layout';
-import { Context } from '../../models/context';
-import { Size } from '../../models/size';
 import { Subscription } from 'rxjs';
-import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
-import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
-import { Node } from '../../models/node';
 import { Link } from '../../../models/link';
-import { Drawing } from '../../models/drawing';
 import { Symbol } from '../../../models/symbol';
+import { CanvasSizeDetector } from '../../helpers/canvas-size-detector';
 import { GraphDataManager } from '../../managers/graph-data-manager';
 import { LayersManager } from '../../managers/layers-manager';
+import { Context } from '../../models/context';
+import { Drawing } from '../../models/drawing';
+import { Node } from '../../models/node';
+import { Size } from '../../models/size';
+import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
+import { GraphLayout } from '../../widgets/graph-layout';
 
 @Component({
   selector: 'app-experimental-map',
   templateUrl: './experimental-map.component.html',
   styleUrls: ['./experimental-map.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() nodes: Node[] = [];
@@ -48,7 +47,7 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   private changesDetected: Subscription;
 
   protected settings = {
-    show_interface_labels: true
+    show_interface_labels: true,
   };
 
   constructor(

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { InterfaceLabelComponent } from './interface-label.component';
 
 describe('InterfaceLabelComponent', () => {
@@ -8,7 +7,7 @@ describe('InterfaceLabelComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [InterfaceLabelComponent]
+      declarations: [InterfaceLabelComponent],
     }).compileComponents();
   }));
 

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CssFixer } from '../../../helpers/css-fixer';
 
 @Component({
   selector: '[app-interface-label]',
   templateUrl: './interface-label.component.html',
-  styleUrls: ['./interface-label.component.scss']
+  styleUrls: ['./interface-label.component.scss'],
 })
 export class InterfaceLabelComponent implements OnInit {
   @Input('app-interface-label') ignore: any;
@@ -17,7 +17,7 @@ export class InterfaceLabelComponent implements OnInit {
     y: 0,
     text: '',
     style: '',
-    rotation: 0
+    rotation: 0,
   };
 
   borderSize = 5;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { LinkComponent } from './link.component';
 
 describe('LinkComponent', () => {
@@ -8,7 +7,7 @@ describe('LinkComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [LinkComponent]
+      declarations: [LinkComponent],
     }).compileComponents();
   }));
 

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

@@ -1,25 +1,25 @@
 import {
+  ChangeDetectorRef,
   Component,
-  OnInit,
-  Input,
-  ViewChild,
   ElementRef,
   EventEmitter,
-  ChangeDetectorRef,
-  OnDestroy
+  Input,
+  OnDestroy,
+  OnInit,
+  ViewChild,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { LinkStrategy } from './strategies/link-strategy';
-import { EthernetLinkStrategy } from './strategies/ethernet-link-strategy';
-import { SerialLinkStrategy } from './strategies/serial-link-strategy';
 import { MultiLinkCalculatorHelper } from '../../../helpers/multi-link-calculator-helper';
-import { Node } from '../../../models/node';
 import { MapLink } from '../../../models/map/map-link';
+import { Node } from '../../../models/node';
+import { EthernetLinkStrategy } from './strategies/ethernet-link-strategy';
+import { LinkStrategy } from './strategies/link-strategy';
+import { SerialLinkStrategy } from './strategies/serial-link-strategy';
 
 @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;

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

@@ -1,12 +1,12 @@
-import { LinkStrategy } from './link-strategy';
 import { path } from 'd3-path';
 import { MapLink } from '../../../../models/map/map-link';
+import { LinkStrategy } from './link-strategy';
 
 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.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/serial-link-strategy.ts

@@ -1,16 +1,16 @@
 import { path } from 'd3-path';
-import { LinkStrategy } from './link-strategy';
 import { MapLink } from '../../../../models/map/map-link';
+import { LinkStrategy } from './link-strategy';
 
 export class SerialLinkStrategy implements LinkStrategy {
   private linkToPoints(link: MapLink) {
     const source = {
       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,
-      y: link.target.y + link.target.height / 2
+      y: link.target.y + link.target.height / 2,
     };
 
     const dx = target.x - source.x;
@@ -22,12 +22,12 @@ export class SerialLinkStrategy implements LinkStrategy {
 
     const angle_source: [number, number] = [
       source.x + dx / 2.0 + 15 * vect_rot[0],
-      source.y + dy / 2.0 + 15 * vect_rot[1]
+      source.y + dy / 2.0 + 15 * vect_rot[1],
     ];
 
     const angle_target: [number, number] = [
       target.x - dx / 2.0 - 15 * vect_rot[0],
-      target.y - dy / 2.0 - 15 * vect_rot[1]
+      target.y - dy / 2.0 - 15 * vect_rot[1],
     ];
 
     return [[source.x, source.y], angle_source, angle_target, [target.x, target.y]];

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { NodeComponent } from './node.component';
 
 describe('NodeComponent', () => {
@@ -8,7 +7,7 @@ describe('NodeComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [NodeComponent]
+      declarations: [NodeComponent],
     }).compileComponents();
   }));
 

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

@@ -1,31 +1,30 @@
 import {
-  Component,
-  OnInit,
-  Input,
-  ElementRef,
-  ViewChild,
-  ChangeDetectorRef,
+  AfterViewInit,
   ChangeDetectionStrategy,
-  Output,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
   EventEmitter,
-  OnDestroy,
+  Input,
   OnChanges,
-  AfterViewInit
+  OnDestroy,
+  OnInit,
+  ViewChild,
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
+import { Symbol } from '../../../../models/symbol';
+import { DraggedDataEvent } from '../../../events/event-source';
+import { NodesEventSource } from '../../../events/nodes-event-source';
 import { CssFixer } from '../../../helpers/css-fixer';
 import { FontFixer } from '../../../helpers/font-fixer';
-import { Symbol } from '../../../../models/symbol';
 import { MapNode } from '../../../models/map/map-node';
-import { NodesEventSource } from '../../../events/nodes-event-source';
-import { DraggedDataEvent } from '../../../events/event-source';
 
 @Component({
   selector: '[app-node]',
   templateUrl: './node.component.html',
   styleUrls: ['./node.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
   static NODE_LABEL_MARGIN = 3;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { SelectionComponent } from './selection.component';
 
 describe('SelectionComponent', () => {
@@ -8,7 +7,7 @@ describe('SelectionComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [SelectionComponent]
+      declarations: [SelectionComponent],
     }).compileComponents();
   }));
 

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

@@ -1,11 +1,11 @@
-import { Component, OnInit, Input, AfterViewInit, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
-import { Observable, Subscription, Subject } from 'rxjs';
+import { AfterViewInit, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
 import { Rectangle } from '../../../models/rectangle';
 
 @Component({
   selector: '[app-selection]',
   templateUrl: './selection.component.html',
-  styleUrls: ['./selection.component.scss']
+  styleUrls: ['./selection.component.scss'],
 })
 export class SelectionComponent implements OnInit, AfterViewInit {
   @Input('app-selection') svg: SVGSVGElement;

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { StatusComponent } from './status.component';
 
 describe('StatusComponent', () => {
@@ -8,7 +7,7 @@ describe('StatusComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [StatusComponent]
+      declarations: [StatusComponent],
     }).compileComponents();
   }));
 

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

@@ -1,9 +1,9 @@
-import { Component, ElementRef, Input, ChangeDetectorRef } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, Input } 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;
@@ -12,7 +12,7 @@ export class StatusComponent {
     status: '',
     path: null,
     direction: null,
-    d: null
+    d: null,
   };
 
   constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}

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

@@ -1,14 +1,13 @@
 import { fakeAsync, tick } from '@angular/core/testing';
-
-import { SelectionControlComponent } from './selection-control.component';
-import { SelectionManager } from '../../managers/selection-manager';
+import { instance, mock, when } from 'ts-mockito';
 import { SelectionEventSource } from '../../events/selection-event-source';
-import { mock, when, instance } from 'ts-mockito';
-import { GraphDataManager } from '../../managers/graph-data-manager';
-import { MapNode } from '../../models/map/map-node';
-import { MapLink } from '../../models/map/map-link';
 import { InRectangleHelper } from '../../helpers/in-rectangle-helper';
+import { GraphDataManager } from '../../managers/graph-data-manager';
+import { SelectionManager } from '../../managers/selection-manager';
+import { MapLink } from '../../models/map/map-link';
+import { MapNode } from '../../models/map/map-node';
 import { Rectangle } from '../../models/rectangle';
+import { SelectionControlComponent } from './selection-control.component';
 
 describe('SelectionControlComponent', () => {
   let component: SelectionControlComponent;

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

@@ -1,15 +1,15 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { SelectionEventSource } from '../../events/selection-event-source';
-import { GraphDataManager } from '../../managers/graph-data-manager';
 import { InRectangleHelper } from '../../helpers/in-rectangle-helper';
+import { GraphDataManager } from '../../managers/graph-data-manager';
 import { SelectionManager } from '../../managers/selection-manager';
 import { Rectangle } from '../../models/rectangle';
 
 @Component({
   selector: 'app-selection-control',
   templateUrl: './selection-control.component.html',
-  styleUrls: ['./selection-control.component.scss']
+  styleUrls: ['./selection-control.component.scss'],
 })
 export class SelectionControlComponent implements OnInit, OnDestroy {
   private onSelection: Subscription;
@@ -23,21 +23,21 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
 
   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);
       });
 
-      const selectedLinks = this.graphDataManager.getLinks().filter(link => {
+      const selectedLinks = this.graphDataManager.getLinks().filter((link) => {
         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);
       });
 
       const selectedLabels = this.graphDataManager
         .getNodes()
-        .filter(node => {
+        .filter((node) => {
           if (node.label === undefined) {
             return false;
           }
@@ -45,11 +45,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           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 => {
+        .filter((link) => {
           if (link.source === undefined || link.nodes.length != 2 || link.nodes[0].label === undefined) {
             return false;
           }
@@ -57,11 +57,11 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           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 => {
+        .filter((link) => {
           if (link.target === undefined || link.nodes.length != 2 || link.nodes[1].label === undefined) {
             return false;
           }
@@ -69,7 +69,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
           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 = [...selectedInterfacesLabelsSources, ...selectedInterfacesLabelsTargets];
 
@@ -78,7 +78,7 @@ export class SelectionControlComponent implements OnInit, OnDestroy {
         ...selectedLinks,
         ...selectedDrawings,
         ...selectedLabels,
-        ...selectedInterfaces
+        ...selectedInterfaces,
       ];
 
       this.selectionManager.setSelected(selected);

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

@@ -1,5 +1,4 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { SelectionSelectComponent } from './selection-select.component';
 
 describe('SelectionSelectComponent', () => {
@@ -8,7 +7,7 @@ describe('SelectionSelectComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [SelectionSelectComponent]
+      declarations: [SelectionSelectComponent],
     }).compileComponents();
   }));
 

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { SelectionManager } from '../../managers/selection-manager';
 import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
@@ -6,16 +6,13 @@ import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
 @Component({
   selector: 'app-selection-select',
   templateUrl: './selection-select.component.html',
-  styleUrls: ['./selection-select.component.scss']
+  styleUrls: ['./selection-select.component.scss'],
 })
 export class SelectionSelectComponent implements OnInit, OnDestroy {
   private onSelected: Subscription;
   private onUnselected: Subscription;
 
-  constructor(
-    private selectionManager: SelectionManager, 
-    private mapChangeDetectorRef: MapChangeDetectorRef
-  ) {}
+  constructor(private selectionManager: SelectionManager, private mapChangeDetectorRef: MapChangeDetectorRef) {}
 
   ngOnInit() {
     this.onSelected = this.selectionManager.selected.subscribe(() => {

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

@@ -1,17 +1,17 @@
-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';
-import { ToolsService } from '../../../services/tools.service';
-import { Context } from '../../models/context';
 import { Renderer2 } from '@angular/core';
-import { MapScaleService } from '../../../services/mapScale.service';
-import { LinkService } from '../../../services/link.service';
-import { NodesDataSource } from '../../datasources/nodes-datasource';
-import { LinksDataSource } from '../../datasources/links-datasource';
-import { SelectionManager } from '../../managers/selection-manager';
-import { FontFixer } from '../../helpers/font-fixer';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MockedLinkService } from '../../../components/project-map/project-map.component.spec';
+import { LinkService } from '../../../services/link.service';
+import { MapScaleService } from '../../../services/mapScale.service';
+import { ToolsService } from '../../../services/tools.service';
+import { LinksDataSource } from '../../datasources/links-datasource';
+import { NodesDataSource } from '../../datasources/nodes-datasource';
+import { DrawingsEventSource } from '../../events/drawings-event-source';
+import { FontFixer } from '../../helpers/font-fixer';
+import { SelectionManager } from '../../managers/selection-manager';
+import { Context } from '../../models/context';
+import { TextEditorComponent } from './text-editor.component';
 
 describe('TextEditorComponent', () => {
   let component: TextEditorComponent;
@@ -31,9 +31,9 @@ describe('TextEditorComponent', () => {
         { provide: NodesDataSource, useClass: NodesDataSource },
         { provide: LinksDataSource, useClass: LinksDataSource },
         { provide: SelectionManager, useClass: SelectionManager },
-        { provide: FontFixer, useClass: FontFixer }
+        { provide: FontFixer, useClass: FontFixer },
       ],
-      declarations: [TextEditorComponent]
+      declarations: [TextEditorComponent],
     }).compileComponents();
   }));
 

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

@@ -1,30 +1,38 @@
-import { Component, ViewChild, ElementRef, OnInit, Input, EventEmitter, OnDestroy, Renderer2, NgZone } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnDestroy,
+  OnInit,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { select } from 'd3-selection';
+import { Subscription } from 'rxjs';
+import { StyleProperty } from '../../../components/project-map/drawings-editors/text-editor/text-editor.component';
+import { Link } from '../../../models/link';
+import { Server } from '../../../models/server';
+import { LinkService } from '../../../services/link.service';
+import { MapScaleService } from '../../../services/mapScale.service';
+import { ToolsService } from '../../../services/tools.service';
+import { LinksDataSource } from '../../datasources/links-datasource';
+import { NodesDataSource } from '../../datasources/nodes-datasource';
 import { DrawingsEventSource } from '../../events/drawings-event-source';
 import { TextAddedDataEvent, TextEditedDataEvent } from '../../events/event-source';
-import { ToolsService } from '../../../services/tools.service';
-import { select } from 'd3-selection';
-import { TextElement } from '../../models/drawings/text-element';
-import { Context } from '../../models/context';
-import { Subscription } from 'rxjs';
-import { MapScaleService } from '../../../services/mapScale.service';
-import { MapLabel } from '../../models/map/map-label';
-import { MapNode } from '../../models/map/map-node';
-import { NodesDataSource } from '../../datasources/nodes-datasource';
-import { Node } from '../../models/node';
-import { SelectionManager } from '../../managers/selection-manager';
-import { Server } from '../../../models/server';
-import { MapLinkNode } from '../../models/map/map-link-node';
-import { LinkService } from '../../../services/link.service';
-import { LinksDataSource } from '../../datasources/links-datasource';
-import { Link } from '../../../models/link';
-import { StyleProperty } from '../../../components/project-map/drawings-editors/text-editor/text-editor.component';
 import { FontFixer } from '../../helpers/font-fixer';
+import { SelectionManager } from '../../managers/selection-manager';
+import { Context } from '../../models/context';
+import { TextElement } from '../../models/drawings/text-element';
 import { Font } from '../../models/font';
+import { MapLinkNode } from '../../models/map/map-link-node';
+import { Node } from '../../models/node';
 
 @Component({
   selector: 'app-text-editor',
   templateUrl: './text-editor.component.html',
-  styleUrls: ['./text-editor.component.scss']
+  styleUrls: ['./text-editor.component.scss'],
 })
 export class TextEditorComponent implements OnInit, OnDestroy {
   @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
@@ -73,7 +81,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       this.leftPosition = event.pageX.toString() + 'px';
       this.topPosition = event.pageY.toString() + 'px';
       this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-      this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+      this.renderer.setStyle(
+        this.temporaryTextElement.nativeElement,
+        'transform',
+        `scale(${this.mapScaleService.getScale()})`
+      );
       this.temporaryTextElement.nativeElement.focus();
 
       let textListener = () => {
@@ -113,7 +125,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
         this.selectionManager.setSelected([]);
 
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'transform',
+          `scale(${this.mapScaleService.getScale()})`
+        );
         this.editedLink = elem;
 
         select(textElements[index]).attr('visibility', 'hidden');
@@ -121,34 +137,52 @@ export class TextEditorComponent implements OnInit, OnDestroy {
 
         this.editedNode = this.nodesDataSource.get(elem.nodeId);
         this.editedLink = elem;
-        let x = ((elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-        let y = ((elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        let x =
+          (elem.label.originalX + this.editedNode.x - 1) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().x +
+          this.context.transformation.x;
+        let y =
+          (elem.label.originalY + this.editedNode.y + 4) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().y +
+          this.context.transformation.y;
         this.leftPosition = x.toString() + 'px';
         this.topPosition = y.toString() + 'px';
         this.temporaryTextElement.nativeElement.innerText = elem.label.text;
 
         let styleProperties: StyleProperty[] = [];
-        for (let property of elem.label.style.split(";")){
+        for (let property of elem.label.style.split(';')) {
           styleProperties.push({
-            property: property.split(": ")[0],
-            value: property.split(": ")[1]
+            property: property.split(': ')[0],
+            value: property.split(': ')[1],
           });
         }
         let font: Font = {
-          font_family: styleProperties.find(p => p.property === 'font-family') ? styleProperties.find(p => p.property === 'font-family').value : 'TypeWriter',
-          font_size: styleProperties.find(p => p.property === 'font-size') ? Number(styleProperties.find(p => p.property === 'font-size').value) : 10.0,
-          font_weight: styleProperties.find(p => p.property === 'font-weight') ? styleProperties.find(p => p.property === 'font-weight').value : 'normal'
+          font_family: styleProperties.find((p) => p.property === 'font-family')
+            ? styleProperties.find((p) => p.property === 'font-family').value
+            : 'TypeWriter',
+          font_size: styleProperties.find((p) => p.property === 'font-size')
+            ? Number(styleProperties.find((p) => p.property === 'font-size').value)
+            : 10.0,
+          font_weight: styleProperties.find((p) => p.property === 'font-weight')
+            ? styleProperties.find((p) => p.property === 'font-weight').value
+            : 'normal',
         };
         font = this.fontFixer.fix(font);
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'color', styleProperties.find(p => p.property === 'fill') ? styleProperties.find(p => p.property === 'fill').value : '#000000');
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'color',
+          styleProperties.find((p) => p.property === 'fill')
+            ? styleProperties.find((p) => p.property === 'fill').value
+            : '#000000'
+        );
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-family', font.font_family);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-size', `${font.font_size}pt`);
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'font-weight', font.font_weight);
-        
+
         let listener = () => {
           let innerText = this.temporaryTextElement.nativeElement.innerText;
           let link: Link = this.linksDataSource.get(this.editedLink.linkId);
-          link.nodes.find(n => n.node_id === this.editedNode.node_id).label.text = innerText;
+          link.nodes.find((n) => n.node_id === this.editedNode.node_id).label.text = innerText;
 
           this.linkService.updateLink(this.server, link).subscribe((link: Link) => {
             rootElement
@@ -177,7 +211,11 @@ export class TextEditorComponent implements OnInit, OnDestroy {
       .selectAll<SVGTextElement, TextElement>('text.text_element')
       .on('dblclick', (elem, index, textElements) => {
         this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'display', 'initial');
-        this.renderer.setStyle(this.temporaryTextElement.nativeElement, 'transform', `scale(${this.mapScaleService.getScale()})`);
+        this.renderer.setStyle(
+          this.temporaryTextElement.nativeElement,
+          'transform',
+          `scale(${this.mapScaleService.getScale()})`
+        );
         this.editedElement = elem;
 
         select(textElements[index]).attr('visibility', 'hidden');
@@ -185,8 +223,14 @@ export class TextEditorComponent implements OnInit, OnDestroy {
 
         this.editingDrawingId = textElements[index].parentElement.parentElement.getAttribute('drawing_id');
         var transformData = textElements[index].parentElement.getAttribute('transform').split(/\(|\)/);
-        var x = (Number(transformData[1].split(/,/)[0]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-        var y = (Number(transformData[1].split(/,/)[1]) * this.context.transformation.k) + this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        var x =
+          Number(transformData[1].split(/,/)[0]) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().x +
+          this.context.transformation.x;
+        var y =
+          Number(transformData[1].split(/,/)[1]) * this.context.transformation.k +
+          this.context.getZeroZeroTransformationPoint().y +
+          this.context.transformation.y;
         this.leftPosition = x.toString() + 'px';
         this.topPosition = y.toString() + 'px';
         this.temporaryTextElement.nativeElement.innerText = elem.text;

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

@@ -1,8 +1,7 @@
 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';
 
 @Injectable()
 export class DrawingToMapDrawingConverter implements Converter<Drawing, MapDrawing> {

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

@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core';
-
-import { Converter } from '../converter';
+import { CssFixer } from '../../helpers/css-fixer';
+import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
+import { FontFixer } from '../../helpers/font-fixer';
 import { Label } from '../../models/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';
+import { Converter } from '../converter';
 
 @Injectable()
 export class LabelToMapLabelConverter implements Converter<Label, MapLabel> {

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

@@ -1,9 +1,8 @@
 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';
 
 @Injectable()
 export class LinkNodeToMapLinkNodeConverter implements Converter<LinkNode, MapLinkNode> {

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

@@ -1,9 +1,8 @@
 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';
 
 @Injectable()
 export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
@@ -17,7 +16,9 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     mapLink.capturing = link.capturing;
     mapLink.filters = link.filters;
     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;
     mapLink.suspend = link.suspend;
     return mapLink;

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

@@ -1,8 +1,7 @@
 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';
 
 @Injectable()
 export class MapDrawingToDrawingConverter implements Converter<MapDrawing, Drawing> {

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

@@ -1,11 +1,10 @@
 import { Injectable } from '@angular/core';
-
-import { Converter } from '../converter';
-import { MapDrawing } from '../../models/map/map-drawing';
-import { RectElement } from '../../models/drawings/rect-element';
 import { EllipseElement } from '../../models/drawings/ellipse-element';
 import { LineElement } from '../../models/drawings/line-element';
+import { RectElement } from '../../models/drawings/rect-element';
 import { TextElement } from '../../models/drawings/text-element';
+import { MapDrawing } from '../../models/map/map-drawing';
+import { Converter } from '../converter';
 
 @Injectable()
 export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
@@ -15,27 +14,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
     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=\"${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,11 +1,10 @@
 import { Injectable } from '@angular/core';
-
-import { Converter } from '../converter';
+import { CssFixer } from '../../helpers/css-fixer';
+import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
+import { FontFixer } from '../../helpers/font-fixer';
 import { Label } from '../../models/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';
+import { Converter } from '../converter';
 
 @Injectable()
 export class MapLabelToLabelConverter implements Converter<MapLabel, Label> {

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

@@ -1,9 +1,8 @@
 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 { MapLinkNode } from '../../models/map/map-link-node';
+import { Converter } from '../converter';
+import { MapLabelToLabelConverter } from './map-label-to-label-converter';
 
 @Injectable()
 export class MapLinkNodeToLinkNodeConverter implements Converter<MapLinkNode, LinkNode> {

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

@@ -1,9 +1,8 @@
 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';
 
 @Injectable()
 export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
@@ -17,7 +16,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
     link.capturing = mapLink.capturing;
     link.filters = mapLink.filters;
     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;
     link.suspend = mapLink.suspend;
     return link;

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

@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core';
-
-import { Converter } from '../converter';
 import { MapNode } from '../../models/map/map-node';
+import { Node } from '../../models/node';
+import { Converter } from '../converter';
 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> {
@@ -27,7 +26,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,8 +1,7 @@
 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';
 
 @Injectable()
 export class MapPortToPortConverter implements Converter<MapPort, Port> {

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

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

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

@@ -1,13 +1,12 @@
 import { Injectable } from '@angular/core';
-
-import { Converter } from '../converter';
+import { CssFixer } from '../../helpers/css-fixer';
+import { FontBBoxCalculator } from '../../helpers/font-bbox-calculator';
+import { FontFixer } from '../../helpers/font-fixer';
 import { MapNode } from '../../models/map/map-node';
 import { Node } from '../../models/node';
+import { Converter } from '../converter';
 import { LabelToMapLabelConverter } from './label-to-map-label-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> {
@@ -29,14 +28,16 @@ export class NodeToMapNodeConverter implements Converter<Node, MapNode> {
     mapNode.consoleType = node.console_type;
     mapNode.firstPortName = node.first_port_name;
     mapNode.height = node.height;
-    mapNode.label = this.labelToMapLabel ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id }) : undefined;
+    mapNode.label = this.labelToMapLabel
+      ? this.labelToMapLabel.convert(node.label, { node_id: node.node_id })
+      : undefined;
     mapNode.locked = node.locked;
     mapNode.name = node.name;
     mapNode.nodeDirectory = node.node_directory;
     mapNode.nodeType = node.node_type;
     mapNode.portNameFormat = node.port_name_format;
     mapNode.portSegmentSize = node.port_segment_size;
-    mapNode.ports = node.ports ? node.ports.map(port => this.portToMapPort.convert(port)) : [];
+    mapNode.ports = node.ports ? node.ports.map((port) => this.portToMapPort.convert(port)) : [];
     mapNode.projectId = node.project_id;
     mapNode.status = node.status;
     mapNode.symbol = node.symbol;

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

@@ -1,8 +1,7 @@
 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';
 
 @Injectable()
 export class PortToMapPortConverter implements Converter<Port, MapPort> {

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

@@ -1,8 +1,7 @@
 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';
 
 @Injectable()
 export class SymbolToMapSymbolConverter implements Converter<Symbol, MapSymbol> {

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

@@ -14,7 +14,7 @@ describe('StylesToFontConverter', () => {
     const expectedFont: Font = {
       font_family: 'TypeWriter',
       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,8 +1,7 @@
-import * as csstree from 'css-tree';
-
 import { Injectable } from '@angular/core';
-import { Converter } from './converter';
+import * as csstree from 'css-tree';
 import { Font } from '../models/font';
+import { Converter } from './converter';
 
 @Injectable()
 export class StylesToFontConverter implements Converter<string, Font> {
@@ -10,30 +9,30 @@ export class StylesToFontConverter implements Converter<string, Font> {
     const font: Font = {
       font_family: 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 && child.value.children) {
-        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 && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Identifier') {
             font.font_family = value.name;
           }
         });
       }
       if (child.property === 'font-weight' && child.value && child.value.children) {
-        child.value.children.forEach(value => {
+        child.value.children.forEach((value) => {
           if (value.type === 'Identifier') {
             font.font_weight = value.name;
           }

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

@@ -1,22 +1,22 @@
-import { GraphLayout } from './widgets/graph-layout';
-import { LinksWidget } from './widgets/links';
-import { NodesWidget } from './widgets/nodes';
-import { DrawingsWidget } from './widgets/drawings';
-import { DrawingLineWidget } from './widgets/drawing-line';
-import { SelectionTool } from './tools/selection-tool';
 import { MovingTool } from './tools/moving-tool';
-import { LayersWidget } from './widgets/layers';
-import { LinkWidget } from './widgets/link';
-import { InterfaceStatusWidget } from './widgets/interface-status';
-import { InterfaceLabelWidget } from './widgets/interface-label';
+import { SelectionTool } from './tools/selection-tool';
+import { DrawingWidget } from './widgets/drawing';
+import { DrawingLineWidget } from './widgets/drawing-line';
+import { DrawingsWidget } from './widgets/drawings';
 import { EllipseDrawingWidget } from './widgets/drawings/ellipse-drawing';
 import { ImageDrawingWidget } from './widgets/drawings/image-drawing';
+import { LineDrawingWidget } from './widgets/drawings/line-drawing';
 import { RectDrawingWidget } from './widgets/drawings/rect-drawing';
 import { TextDrawingWidget } from './widgets/drawings/text-drawing';
-import { LineDrawingWidget } from './widgets/drawings/line-drawing';
-import { NodeWidget } from './widgets/node';
-import { DrawingWidget } from './widgets/drawing';
+import { GraphLayout } from './widgets/graph-layout';
+import { InterfaceLabelWidget } from './widgets/interface-label';
+import { InterfaceStatusWidget } from './widgets/interface-status';
 import { LabelWidget } from './widgets/label';
+import { LayersWidget } from './widgets/layers';
+import { LinkWidget } from './widgets/link';
+import { LinksWidget } from './widgets/links';
+import { NodeWidget } from './widgets/node';
+import { NodesWidget } from './widgets/nodes';
 
 export const D3_MAP_IMPORTS = [
   GraphLayout,
@@ -37,5 +37,5 @@ export const D3_MAP_IMPORTS = [
   LineDrawingWidget,
   RectDrawingWidget,
   TextDrawingWidget,
-  DrawingWidget
+  DrawingWidget,
 ];

src/app/cartography/datasources/datasource.ts

@@ -20,7 +20,7 @@ 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);
@@ -31,9 +31,9 @@ export abstract class DataSource<T> {
     });
 
     const toRemove = this.data.filter(
-      item => data.filter(i => this.getItemKey(i) === this.getItemKey(item)).length === 0
+      (item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0
     );
-    toRemove.forEach(item => this.remove(item));
+    toRemove.forEach((item) => this.remove(item));
 
     this.dataChange.next(this.data);
   }

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

@@ -1,5 +1,5 @@
-import { DrawingsDataSource } from './drawings-datasource';
 import { Drawing } from '../models/drawing';
+import { DrawingsDataSource } from './drawings-datasource';
 
 describe('DrawingsDataSource', () => {
   let dataSource: DrawingsDataSource;

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

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

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

@@ -1,5 +1,5 @@
-import { LinksDataSource } from './links-datasource';
 import { Link } from '../../models/link';
+import { LinksDataSource } from './links-datasource';
 
 describe('LinksDataSource', () => {
   let dataSource: LinksDataSource;

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

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

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

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

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

@@ -1,5 +1,5 @@
-import { NodesDataSource } from './nodes-datasource';
 import { Node } from '../models/node';
+import { NodesDataSource } from './nodes-datasource';
 
 describe('NodesDataSource', () => {
   let dataSource: NodesDataSource;

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

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-
 import { Node } from '../models/node';
 import { DataSource } from './datasource';
 

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

@@ -1,5 +1,5 @@
-import { SymbolsDataSource } from './symbols-datasource';
 import { Symbol } from '../../models/symbol';
+import { SymbolsDataSource } from './symbols-datasource';
 
 describe('SymbolsDataSource', () => {
   let dataSource: SymbolsDataSource;

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

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

src/app/cartography/directives/moving-canvas.directive.spec.ts

@@ -1,169 +1,193 @@
-import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Context } from '../models/context';
-import { MovingEventSource } from '../events/moving-event-source';
-import { MovingCanvasDirective } from './moving-canvas.directive';
 import { Component } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { MovingEventSource } from '../events/moving-event-source';
+import { Context } from '../models/context';
+import { MovingCanvasDirective } from './moving-canvas.directive';
 
 @Component({
-    template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+  template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas>
+    <g class="canvas" transform="translate(0, 0) scale(1)"></g>
+  </svg>`,
 })
 class DummyComponent {
-    constructor(){}
+  constructor() {}
 }
 
 describe('MovingCanvasDirective', () => {
-    let component: DummyComponent;
-    let fixture: ComponentFixture<DummyComponent>;
-    let movingEventSource = new MovingEventSource();
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+  let movingEventSource = new MovingEventSource();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule],
-        providers: [
-            { provide: MovingEventSource, useValue: movingEventSource },
-            { provide: Context, useClass: Context }
-        ],
-        declarations: [DummyComponent, MovingCanvasDirective]
-        }).compileComponents();
-    }));
-    
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DummyComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      providers: [
+        { provide: MovingEventSource, useValue: movingEventSource },
+        { provide: Context, useClass: Context },
+      ],
+      declarations: [DummyComponent, MovingCanvasDirective],
+    }).compileComponents();
+  }));
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should move canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+  it('should move canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
 
-    it('should not move canvas if moving mode is not activated', fakeAsync(() => {
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
-    }));
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
 
-    it('should not move canvas after mouseup event', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should not move canvas if moving mode is not activated', fakeAsync(() => {
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-        
-        canvas.dispatchEvent(new MouseEvent('mouseup', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000
-        } as MouseEventInit));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
 
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+    expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
+  }));
 
-    it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let xMovement: number = 200;
-        let yMovement: number = 200;
+  it('should not move canvas after mouseup event', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
 
-        canvas.dispatchEvent(new MouseEvent('mousedown', {
-            bubbles: true,
-            clientX: 0,
-            clientY: 0,
-            screenY: 0,
-            screenX: 0,
-            view: window
-        }));
-        tick();
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: xMovement, 
-            movementY: yMovement 
-        } as MouseEventInit));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-        
-        movingEventSource.movingModeState.emit(false);
-        canvas.dispatchEvent(new MouseEvent('mousemove', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            movementX: 1000, 
-            movementY: 1000
-        } as MouseEventInit));
-        tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
 
-        expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
-    }));
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+
+    canvas.dispatchEvent(
+      new MouseEvent('mouseup', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
+
+  it('should not move canvas after deactivation of moving mode', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let xMovement: number = 200;
+    let yMovement: number = 200;
+
+    canvas.dispatchEvent(
+      new MouseEvent('mousedown', {
+        bubbles: true,
+        clientX: 0,
+        clientY: 0,
+        screenY: 0,
+        screenX: 0,
+        view: window,
+      })
+    );
+    tick();
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: xMovement,
+        movementY: yMovement,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+
+    movingEventSource.movingModeState.emit(false);
+    canvas.dispatchEvent(
+      new MouseEvent('mousemove', {
+        bubbles: true,
+        relatedTarget: canvas,
+        movementX: 1000,
+        movementY: 1000,
+      } as MouseEventInit)
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
+  }));
 });

src/app/cartography/directives/moving-canvas.directive.ts

@@ -1,65 +1,73 @@
-import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core'
+import { Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
+import { select } from 'd3-selection';
 import { Subscription } from 'rxjs';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
-import { select } from 'd3-selection';
 
 @Directive({
-    selector: '[movingCanvas]',
+  selector: '[movingCanvas]',
 })
 export class MovingCanvasDirective implements OnInit, OnDestroy {
-    private mouseupListener: Function;
-    private mousemoveListener: Function;
-    private movingModeState: Subscription;
-    private activated: boolean = false;
-    
-    constructor(
-        private element: ElementRef,
-        private movingEventSource: MovingEventSource,
-        private context: Context
-    ) {}
+  private mouseupListener: Function;
+  private mousemoveListener: Function;
+  private movingModeState: Subscription;
+  private activated: boolean = false;
 
-    ngOnInit() {
-        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
-            this.activated = event;
-            if (!event) this.removelisteners();
+  constructor(private element: ElementRef, private movingEventSource: MovingEventSource, private context: Context) {}
+
+  ngOnInit() {
+    this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+      this.activated = event;
+      if (!event) this.removelisteners();
+    });
+  }
+
+  ngOnDestroy() {
+    this.movingModeState.unsubscribe();
+  }
+
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    if (this.activated) {
+      this.mousemoveListener = (event: MouseEvent) => {
+        const view = select(this.element.nativeElement);
+        const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
+
+        canvas.attr('transform', () => {
+          this.context.transformation.x = this.context.transformation.x + event.movementX;
+          this.context.transformation.y = this.context.transformation.y + event.movementY;
+
+          const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+          const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+          const kTrans = this.context.transformation.k;
+
+          return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
         });
-    }
+      };
 
-    ngOnDestroy() {
-        this.movingModeState.unsubscribe();
-    }
+      this.mouseupListener = (event: MouseEvent) => {
+        this.removelisteners();
+      };
 
-    @HostListener('mousedown', ['$event'])
-    onMouseDown(event: MouseEvent) {
-        if (this.activated) {
-            this.mousemoveListener = (event: MouseEvent) => {
-                const view = select(this.element.nativeElement);
-                const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
-                
-                canvas.attr('transform', () => {
-                    this.context.transformation.x = this.context.transformation.x + event.movementX;
-                    this.context.transformation.y = this.context.transformation.y + event.movementY;
-    
-                    const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-                    const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
-                    const kTrans = this.context.transformation.k;
-    
-                    return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
-                });
-            };
-    
-            this.mouseupListener = (event: MouseEvent) => {
-                this.removelisteners();
-            };
-    
-            this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
-            this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
-        }
+      this.element.nativeElement.addEventListener(
+        'mouseup',
+        this.mouseupListener as EventListenerOrEventListenerObject
+      );
+      this.element.nativeElement.addEventListener(
+        'mousemove',
+        this.mousemoveListener as EventListenerOrEventListenerObject
+      );
     }
+  }
 
-    removelisteners() {
-        this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject);
-        this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject);
-    }
+  removelisteners() {
+    this.element.nativeElement.removeEventListener(
+      'mouseup',
+      this.mouseupListener as EventListenerOrEventListenerObject
+    );
+    this.element.nativeElement.removeEventListener(
+      'mousemove',
+      this.mousemoveListener as EventListenerOrEventListenerObject
+    );
+  }
 }

src/app/cartography/directives/zooming-canvas.directive.spec.ts

@@ -1,139 +1,151 @@
-import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Context } from '../models/context';
-import { MovingEventSource } from '../events/moving-event-source';
 import { Component } from '@angular/core';
-import { ZoomingCanvasDirective } from './zooming-canvas.directive';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { MapScaleService } from '../../services/mapScale.service';
+import { MovingEventSource } from '../events/moving-event-source';
+import { Context } from '../models/context';
+import { ZoomingCanvasDirective } from './zooming-canvas.directive';
 
 @Component({
-    template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>`
+  template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas>
+    <g class="canvas" transform="translate(0, 0) scale(1)"></g>
+  </svg>`,
 })
 class DummyComponent {
-    constructor(){}
+  constructor() {}
 }
 
 describe('ZoomingCanvasDirective', () => {
-    let component: DummyComponent;
-    let fixture: ComponentFixture<DummyComponent>;
-    let movingEventSource = new MovingEventSource();
+  let component: DummyComponent;
+  let fixture: ComponentFixture<DummyComponent>;
+  let movingEventSource = new MovingEventSource();
 
-    beforeEach(async(() => {
-        TestBed.configureTestingModule({
-        imports: [NoopAnimationsModule],
-        providers: [
-            { provide: MovingEventSource, useValue: movingEventSource },
-            { provide: Context, useClass: Context },
-            { provide: MapScaleService, useClass: MapScaleService }
-        ],
-        declarations: [DummyComponent, ZoomingCanvasDirective]
-        }).compileComponents();
-    }));
-    
-    beforeEach(() => {
-        fixture = TestBed.createComponent(DummyComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule],
+      providers: [
+        { provide: MovingEventSource, useValue: movingEventSource },
+        { provide: Context, useClass: Context },
+        { provide: MapScaleService, useClass: MapScaleService },
+      ],
+      declarations: [DummyComponent, ZoomingCanvasDirective],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DummyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+  }));
+
+  it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = 100;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
+  }));
+
+  it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+
+    movingEventSource.movingModeState.emit(false);
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
+  }));
+
+  it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+
+    canvas.dispatchEvent(
+      new WheelEvent('wheel', {
+        bubbles: true,
+        relatedTarget: canvas,
+        deltaMode: deltaMode,
+        deltaY: zoom,
+      })
+    );
+    tick();
+
+    expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
+  }));
+
+  it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
+    movingEventSource.movingModeState.emit(true);
+    const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
+    let deltaMode: number = 0;
+    let zoom: number = -1000;
+    const event = new WheelEvent('wheel', {
+      bubbles: true,
+      relatedTarget: canvas,
+      deltaMode: deltaMode,
+      deltaY: zoom,
     });
+    spyOn(event, 'preventDefault');
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+    canvas.dispatchEvent(event);
+    tick();
 
-    it('should zoom in canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-    }));
-
-    it('should zoom out canvas if moving mode is activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = 100;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
-    }));
-
-    it('should not zoom in/out canvas if moving mode is not activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-        
-        movingEventSource.movingModeState.emit(false);
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
-    }));
-
-    it('should not zoom in/out canvas after deactivation of moving mode', fakeAsync(() => {
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-
-        canvas.dispatchEvent(new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        }));
-        tick();
-    
-        expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
-    }));
-
-    it('should prevent from default wheel behaviour when moving mode activated', fakeAsync(() => {
-        movingEventSource.movingModeState.emit(true);
-        const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
-        let deltaMode: number = 0;
-        let zoom: number = -1000;
-        const event = new WheelEvent('wheel', { 
-            bubbles: true, 
-            relatedTarget: canvas, 
-            deltaMode: deltaMode, 
-            deltaY: zoom
-        });
-        spyOn(event, 'preventDefault');
-
-        canvas.dispatchEvent(event);
-        tick();
-    
-        expect(event.preventDefault).toHaveBeenCalled();
-    }));
+    expect(event.preventDefault).toHaveBeenCalled();
+  }));
 });

src/app/cartography/directives/zooming-canvas.directive.ts

@@ -1,61 +1,63 @@
-import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core'
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { select } from 'd3-selection';
 import { Subscription } from 'rxjs';
+import { MapScaleService } from '../../services/mapScale.service';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
-import { select } from 'd3-selection';
-import { MapScaleService } from '../../services/mapScale.service';
 
 @Directive({
-    selector: '[zoomingCanvas]',
+  selector: '[zoomingCanvas]',
 })
 export class ZoomingCanvasDirective implements OnInit, OnDestroy {
-    private wheelListener: Function;
-    private movingModeState: Subscription;
-    
-    constructor(
-        private element: ElementRef,
-        private movingEventSource: MovingEventSource,
-        private context: Context,
-        private mapsScaleService: MapScaleService
-    ) {}
+  private wheelListener: Function;
+  private movingModeState: Subscription;
 
-    ngOnInit() {
-        this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
-            event ? this.addListener() : this.removeListener();
-        });
-    }
+  constructor(
+    private element: ElementRef,
+    private movingEventSource: MovingEventSource,
+    private context: Context,
+    private mapsScaleService: MapScaleService
+  ) {}
 
-    ngOnDestroy() {
-        this.movingModeState.unsubscribe();
-    }
+  ngOnInit() {
+    this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
+      event ? this.addListener() : this.removeListener();
+    });
+  }
 
-    addListener() {
-        this.wheelListener = (event: WheelEvent) => {
-            event.stopPropagation();
-            event.preventDefault();
+  ngOnDestroy() {
+    this.movingModeState.unsubscribe();
+  }
 
-            let zoom = event.deltaY;
-            zoom = event.deltaMode === 0 ? zoom/100 : zoom/3;
+  addListener() {
+    this.wheelListener = (event: WheelEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
 
-            const view = select(this.element.nativeElement);
-            const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
-            
-            canvas.attr('transform', () => {
-                this.context.transformation.k = this.context.transformation.k - zoom/10;
+      let zoom = event.deltaY;
+      zoom = event.deltaMode === 0 ? zoom / 100 : zoom / 3;
 
-                const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
-                const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
-                const kTrans = this.context.transformation.k;
-                this.mapsScaleService.setScale(kTrans);
+      const view = select(this.element.nativeElement);
+      const canvas = view.selectAll<SVGGElement, Context>('g.canvas').data([this.context]);
 
-                return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
-            });
-        };
+      canvas.attr('transform', () => {
+        this.context.transformation.k = this.context.transformation.k - zoom / 10;
 
-        this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false});
-    }
+        const xTrans = this.context.getZeroZeroTransformationPoint().x + this.context.transformation.x;
+        const yTrans = this.context.getZeroZeroTransformationPoint().y + this.context.transformation.y;
+        const kTrans = this.context.transformation.k;
+        this.mapsScaleService.setScale(kTrans);
 
-    removeListener() {
-        this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
-    }
+        return `translate(${xTrans}, ${yTrans}) scale(${kTrans})`;
+      });
+    };
+
+    this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {
+      passive: false,
+    });
+  }
+
+  removeListener() {
+    this.element.nativeElement.removeEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject);
+  }
 }

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

@@ -1,12 +1,12 @@
-import { Injectable, EventEmitter } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
+import { MapDrawing } from '../models/map/map-drawing';
 import {
+  AddedDataEvent,
   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

@@ -1,8 +1,8 @@
 import { TextElement } from '../models/drawings/text-element';
 import { MapDrawing } from '../models/map/map-drawing';
+import { MapLabel } from '../models/map/map-label';
 import { MapLink } from '../models/map/map-link';
 import { MapLinkNode } from '../models/map/map-link-node';
-import { MapLabel } from '../models/map/map-label';
 
 export class DataEventSource<T> {
   constructor(public datum: T, public dx: number, public dy: number) {}

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

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

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

@@ -1,6 +1,6 @@
-import { Injectable, EventEmitter } from "@angular/core";
+import { EventEmitter, Injectable } from '@angular/core';
 
 @Injectable()
 export class MovingEventSource {
-    public movingModeState = new EventEmitter<boolean>();
+  public movingModeState = new EventEmitter<boolean>();
 }

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

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

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

@@ -1,18 +1,17 @@
-import * as csstree from 'css-tree';
-
 import { Injectable } from '@angular/core';
+import * as csstree from 'css-tree';
 
 @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 && child.value.children) {
-        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)) {

src/app/cartography/helpers/default-drawings-factory.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { TextElementFactory } from './drawings-factory/text-element-factory';
-import { EllipseElementFactory } from './drawings-factory/ellipse-element-factory';
-import { RectangleElementFactory } from './drawings-factory/rectangle-element-factory';
-import { LineElementFactory } from './drawings-factory/line-element-factory';
-import { DrawingElementFactory } from './drawings-factory/drawing-element-factory';
 import { MapDrawing } from '../models/map/map-drawing';
+import { DrawingElementFactory } from './drawings-factory/drawing-element-factory';
+import { EllipseElementFactory } from './drawings-factory/ellipse-element-factory';
+import { LineElementFactory } from './drawings-factory/line-element-factory';
+import { RectangleElementFactory } from './drawings-factory/rectangle-element-factory';
+import { TextElementFactory } from './drawings-factory/text-element-factory';
 
 @Injectable()
 export class DefaultDrawingsFactory {
@@ -21,7 +21,7 @@ export class DefaultDrawingsFactory {
       text: this.textElementFactory,
       ellipse: this.ellipseElementFactory,
       rectangle: this.rectangleElementFactory,
-      line: this.lineElementFactory
+      line: this.lineElementFactory,
     };
   }
 

src/app/cartography/helpers/drawings-factory/ellipse-element-factory.ts

@@ -1,7 +1,7 @@
-import { DrawingElementFactory } from './drawing-element-factory';
+import { Injectable } from '@angular/core';
 import { DrawingElement } from '../../models/drawings/drawing-element';
 import { EllipseElement } from '../../models/drawings/ellipse-element';
-import { Injectable } from '@angular/core';
+import { DrawingElementFactory } from './drawing-element-factory';
 
 @Injectable()
 export class EllipseElementFactory implements DrawingElementFactory {

src/app/cartography/helpers/drawings-factory/line-element-factory.ts

@@ -1,7 +1,7 @@
-import { DrawingElementFactory } from './drawing-element-factory';
+import { Injectable } from '@angular/core';
 import { DrawingElement } from '../../models/drawings/drawing-element';
 import { LineElement } from '../../models/drawings/line-element';
-import { Injectable } from '@angular/core';
+import { DrawingElementFactory } from './drawing-element-factory';
 
 @Injectable()
 export class LineElementFactory implements DrawingElementFactory {