Merge branch 'master-3.0' into bugfix-1398

Upgrade to Angular 14

.appveyor.yml

@@ -20,6 +20,7 @@ install:
 build_script:
   - cmd: set NODE_OPTIONS=--max-old-space-size=8092
   - yarn buildforelectron
+  - "%PYTHON%\\python.exe -m pip install -U pip"
   - "%PYTHON%\\python.exe -m pip install -r scripts\\requirements.txt"
   - "%PYTHON%\\python.exe scripts\\build.py download -a"
   - "%PYTHON%\\python.exe scripts\\build.py build_exe -b dist/exe.gns3server -s"

.circleci/config.yml

@@ -1,5 +1,9 @@
 # iOS CircleCI 2.1 configuration file
 version: 2.1
+
+orbs:
+  node: circleci/node@4.2.0
+
 jobs:
   build:
     macos:
@@ -7,13 +11,16 @@ jobs:
 
     steps:
       - checkout
+      - node/install:
+          install-yarn: true
 
       - run:
-          name: Install nodejs
+          name: Update BREW and print configs
           command: |
             brew update
-            brew upgrade yarn
-            brew upgrade node
+            brew analytics off
+            brew --env
+            brew --config
 
       - run:
           name: Set timezone and check current datetime
@@ -34,6 +41,8 @@ jobs:
             curl -o /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/readline.rb https://raw.githubusercontent.com/Homebrew/homebrew-core/b1bd1c4a62e1336422de3614d1fc49ffbce589a8/Formula/readline.rb
             # remove check for old compilers which creates the error described in https://github.com/sashkab/homebrew-python/issues/36
             sed -i.bak -e '58,61d' /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/python.rb
+            # remove 'do devel' block to avoid error: Calling 'devel' blocks in formulae is disabled!
+            sed -i.bak -e '14,17d' /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/Formula/python.rb
             brew unlink python
             brew uninstall --ignore-dependencies readline
             brew install readline
@@ -41,7 +50,7 @@ jobs:
             brew pin readline
             # --ignore-dependencies is used to prevent this issue: https://github.com/tensorflow/tensorflow/issues/25093
             brew install --ignore-dependencies python
-            brew switch python 3.6.5_1
+            #brew link python 3.6.5_1
             brew info python
             brew pin python
 
@@ -77,8 +86,11 @@ jobs:
           name: Building gns3server
           command: |
             python3 -V
-            pip3 install -r scripts/requirements.txt
+            python3 -m pip install -U pip
+            python3 -m pip install -r scripts/requirements.txt
             python3 scripts/build.py download -a
+            # necessary because of https://github.com/GNS3/gns3-gui/issues/2849
+            python3 -m pip install jsonschema==2.6.0
             python3 scripts/build.py build_exe -b dist/exe.gns3server -s
             python3 scripts/build.py validate -b dist
 
@@ -105,4 +117,3 @@ workflows:
           filters:
             tags:
               only: /v.*/
-

.github/workflows/add-new-issues-to-project.yml

@@ -0,0 +1,16 @@
+name: Add new issues to GNS3 project
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.4.0
+        with:
+          project-url: https://github.com/orgs/GNS3/projects/3
+          github-token: ${{ secrets.ADD_NEW_ISSUES_TO_PROJECT }}

.github/workflows/codeql.yml

@@ -0,0 +1,76 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ "master", "master-3.0" ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ "master", "master-3.0" ]
+  schedule:
+    - cron: '38 18 * * 6'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript', 'python' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Use only 'java' to analyze code written in Java, Kotlin or both
+        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/main.yml

@@ -0,0 +1,28 @@
+name: Build
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - master
+      - master-3.0
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [ 14, 16, 18 ]
+    name: Node ${{ matrix.node }}
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+      - name: Install JS dependencies
+        run: yarn install --frozen-lockfile --immutable
+      - name: Test
+        run: yarn test

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 # compiled output
+/.angular
 /dist
 /tmp
 /out-tsc
@@ -11,6 +12,7 @@
 /scripts/build
 /scripts/dist
 /env
+/.angular
 
 # dependencies
 /node_modules

.snyk

@@ -0,0 +1,8 @@
+# Snyk (https://snyk.io) policy file, patches or ignores known vulnerabilities.
+version: v1.16.0
+ignore: {}
+# patches apply the minimum changes required to fix a vulnerability
+patch:
+  SNYK-JS-LODASH-567746:
+    - ngx-childprocess > @types/electron > electron > @electron/get > global-tunnel-ng > lodash:
+        patched: '2020-07-10T04:10:11.863Z'

.travis.yml

@@ -37,12 +37,12 @@ before_install:
 before_script:
   # greenkeeper-lockfile support
    - greenkeeper-lockfile-update
-   - npm install -g codecov
+  #  - npm install -g codecov
 
 script: yarn coverage
 
 after_success:
-  - codecov
+  # - codecov
 
 after_script:
   # greenkeeper-lockfile support

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "angular.enable-strict-mode-prompt": false
+}

.whitesource

@@ -0,0 +1,14 @@
+{
+  "scanSettings": {
+    "configMode": "AUTO",
+    "configExternalURL": "",
+    "projectToken" : "",
+    "baseBranches": ["master", "master-3.0"]
+  },
+  "checkRunSettings": {
+    "vulnerableCheckRunConclusionLevel": "failure"
+  },
+  "issueSettings": {
+    "minSeverityLevel": "LOW"
+  }
+}

.yarnclean

@@ -3,11 +3,11 @@ __tests__
 node_modules/*/test
 node_modules/*/tests
 powered-test
-e2e
+#e2e
 
 # asset directories
 docs
-doc
+#doc
 website
 images
 

Dockerfile

@@ -1,5 +1,5 @@
 # Dockerfile for GNS3 Web-ui development
-FROM node:carbon
+FROM node:stretch
 
 # Create user
 RUN useradd --user-group --create-home --shell /bin/false gns3-web-ui

README.md

@@ -1,16 +1,9 @@
 # gns3-web-ui
 
-[![Greenkeeper badge](https://badges.greenkeeper.io/GNS3/gns3-web-ui.svg)](https://greenkeeper.io/)
-[![Travis CI](https://api.travis-ci.org/GNS3/gns3-web-ui.svg?branch=master)](https://travis-ci.org)
-[![AppVeyor](https://ci.appveyor.com/api/projects/status/github/GNS3/gns3-web-ui?branch=master&svg=true)](https://www.appveyor.com/)
-[![CircleCI](https://circleci.com/gh/GNS3/gns3-web-ui/tree/master.png)](https://circleci.com/gh/GNS3/gns3-web-ui/tree/master.png)
-[![codecov](https://codecov.io/gh/GNS3/gns3-web-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/GNS3/gns3-web-ui)
-
-
-Test WebUI implementation for GNS3. 
-
-This is not production ready version. It has been made to evaluate possibility of creation Web User Interface for GNS3 application.
-
+[![Build](https://github.com/GNS3/gns3-web-ui/actions/workflows/main.yml/badge.svg)](https://github.com/GNS3/gns3-web-ui/actions/workflows/main.yml)
+[![Dependency](https://img.shields.io/librariesio/github/GNS3/gns3-web-ui)](https://libraries.io/github/GNS3/gns3-web-ui)
+[![Packages versions](https://repology.org/badge/latest-versions/gns3.svg)](https://repology.org/metapackage/gns3/versions)
+[![Packages](https://repology.org/badge/tiny-repos/gns3.svg)](https://repology.org/metapackage/gns3/versions)
 
 ## Demo
 
@@ -30,6 +23,14 @@ We're using [yarn](https://yarnpkg.com/lang/en/) for packages installation:
 yarn install
 ```
 
+## JavaScript heap out of memory
+
+Increase the memory allocated to Node if you get JavaScript heap out of memory errors.
+
+```
+export NODE_OPTIONS=--max-old-space-size=8192
+```
+
 #### Run GNS3 server
 
 Visit [gns3-server](https://github.com/GNS3/gns3-server) for guide how to run GNS3 server.

SECURITY.md

@@ -0,0 +1,5 @@
+# Security Policy
+
+## Reporting a Vulnerability
+
+Please use GitHub's report a vulnerability feature. More information can be found in https://docs.github.com/en/code-security/security-advisories/guidance-on-reporting-and-writing/privately-reporting-a-security-vulnerability

angular.json

@@ -1,207 +1,234 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "gns3-web-ui": {
-      "root": "",
-      "sourceRoot": "src",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
-            "extractCss": true,
-            "assets": [
-              "src/assets",
-              "src/favicon.ico",
-              "src/ReleaseNotes.txt"
-            ],
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/notosans-fontface/css/notosans-fontface.min.css",
-              "src/styles.css",
-              {
-                "input": "src/theme.scss",
-                "lazy": true,
-                "bundleName": "theme-default-dark"
-              },
-              {
-                "input": "src/theme-light.scss",
-                "lazy": true,
-                "bundleName": "theme-default"
-              }
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": {
-                "hidden": true,
-                "scripts": true,
-                "styles": false
-              },
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "gns3-web-ui": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "allowedCommonJsDependencies": [
+                            "rxjs",
+                            "rxjs-compat",
+                            "uuid",
+                            "css-tree",
+                            "save-svg-as-png",
+                            "angular-draggable-droppable",
+                            "dom-set",
+                            "dom-plane",
+                            "mousetrap",
+                            "@mattlewis92/dom-autoscroller",
+                            "rxjs/Rx",
+                            "rxjs/add/operator/map",
+                            "rxjs-compat/add/operator/map",
+                            "classnames",
+                            "stylenames",
+                            "source-map-js",
+                            "spark-md5",
+                            "xterm",
+                            "xterm-addon-attach",
+                            "xterm-addon-fit"
+                        ],
+                        "outputPath": "dist",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "polyfills": "src/polyfills.ts",
+                        "assets": [
+                            "src/assets",
+                            "src/favicon.ico",
+                            "src/ReleaseNotes.txt"
+                        ],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/notosans-fontface/css/notosans-fontface.min.css",
+                            "src/styles.scss",
+                            "src/theme.scss"
+                        ],
+                        "scripts": [],
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": true,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true,
+                        "aot": true
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": {
+                                "hidden": true,
+                                "scripts": true,
+                                "styles": false
+                            },
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }]
+                        },
+                        "electronProd": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.electron.prod.ts"
+                            }]
+                        },
+                        "electronDev": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.electron.ts"
+                            }]
+                        },
+                        "githubProd": {
+                            "budgets": [{
+                                "type": "anyComponentStyle",
+                                "maximumWarning": "6kb"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "namedChunks": false,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true,
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.github.prod.ts"
+                            }]
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "gns3-web-ui:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "gns3-web-ui:build:production"
+                        },
+                        "electronProd": {
+                            "browserTarget": "gns3-web-ui:build:electronProd"
+                        },
+                        "electronDev": {
+                            "browserTarget": "gns3-web-ui:build:electronDev"
+                        },
+                        "githubProd": {
+                            "browserTarget": "gns3-web-ui:build:githubProd"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "gns3-web-ui:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "karmaConfig": "./karma.conf.js",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "scripts": [],
+                        "styles": [
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/notosans-fontface/css/notosans-fontface.min.css",
+                            "src/styles.scss",
+                            "src/theme.scss"
+                        ],
+                        "sourceMap": false,
+                        "assets": [
+                            "src/assets",
+                            "src/favicon.ico"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**",
+                            "**/*.spec.ts"
+                        ]
+                    }
                 }
-              ]
             },
-            "electronProd": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.electron.prod.ts"
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
                 }
-              ]
-            },
-            "electronDev": {
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.electron.ts"
-                }
-              ]
-            },
-            "githubProd": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.github.prod.ts"
-                }
-              ]
             }
-          }
         },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "gns3-web-ui:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "gns3-web-ui:build:production"
-            },
-            "electronProd": {
-              "browserTarget": "gns3-web-ui:build:electronProd"
-            },
-            "electronDev": {
-              "browserTarget": "gns3-web-ui:build:electronDev"
-            },
-            "githubProd": {
-              "browserTarget": "gns3-web-ui:build:githubProd"
+        "gns3-web-ui-e2e": {
+            "root": "e2e",
+            "sourceRoot": "e2e",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "./protractor.conf.js",
+                        "devServerTarget": "gns3-web-ui:serve"
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "e2e/tsconfig.e2e.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
             }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "gns3-web-ui:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
-            "scripts": [],
-            "styles": [
-              "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/notosans-fontface/css/notosans-fontface.min.css",
-              "src/styles.css",
-              "src/theme.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "codeCoverageExclude": [
-              "src/app/cartography/components/experimental-map/**/*"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
-      }
     },
-    "gns3-web-ui-e2e": {
-      "root": "e2e",
-      "sourceRoot": "e2e",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "gns3-web-ui:serve"
-          }
+    "schematics": {
+        "@schematics/angular:component": {
+            "prefix": "app",
+            "style": "scss"
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
+        "@schematics/angular:directive": {
+            "prefix": "app"
         }
-      }
-    }
-  },
-  "defaultProject": "gns3-web-ui",
-  "schematics": {
-    "@schematics/angular:component": {
-      "prefix": "app",
-      "styleext": "scss"
     },
-    "@schematics/angular:directive": {
-      "prefix": "app"
+    "cli": {
+        "analytics": false
     }
-  }
 }

debug.log

@@ -0,0 +1 @@
+[1109/003452.026:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

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/controllers.e2e-spec.ts

@@ -0,0 +1,43 @@
+import { TestHelper } from './helpers/common.po';
+import { ControllersPage } from './helpers/controller.po';
+
+describe('Controllers page', () => {
+  let page: ControllersPage;
+  let helper: TestHelper;
+
+  beforeEach(() => {
+    page = new ControllersPage();
+    helper = new TestHelper();
+  });
+
+  xit('user should have possibility to add controller', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToControllersPage();
+
+    // act
+    let text = await page.getAddControllerNotificationText();
+
+    // assert
+    expect(text).toBe("We've discovered GNS3 controller on 127.0.0.1:3080, would you like to add to the list?");
+  });
+
+  it('user should see added controller in the list', async () => {
+    // arrange
+    page.maximizeWindow();
+    await page.navigateToControllersPage();
+    await page.clickAddController();
+    helper.sleep(1000);
+
+    // act
+    let firstRowOfControllersTable = await page.checkControllersTable();
+    let controllerData = [];
+    await helper.asyncForEach(firstRowOfControllersTable, async (element) => {
+      controllerData.push(await element.getText());
+    });
+
+    // assert
+    expect(controllerData).toContain('127.0.0.1');
+    expect(controllerData).toContain('3080');
+  });
+});

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/controller.po.ts

@@ -0,0 +1,41 @@
+import { browser, by } from 'protractor';
+import { TestHelper } from './common.po';
+
+export class ControllersPage {
+  helper = new TestHelper();
+
+  maximizeWindow() {
+    browser.driver.manage().window().maximize();
+  }
+
+  navigateToControllersPage() {
+    return browser.get('/controllers');
+  }
+
+  getAddControllerNotificationText() {
+    return browser.driver.findElement(by.className('mat-card-content')).getText();
+  }
+
+  async clickAddController() {
+    let controllerTable = await this.checkControllersTable();
+    if (controllerTable.length === 0) {
+      let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
+      await buttons[3].click();
+    }
+  }
+
+  checkControllersTable() {
+    return browser.driver.findElements(by.css('mat-cell'));
+  }
+
+  async navigateToControllerProjects() {
+    this.helper.sleep(2000);
+    let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
+    let controllerLink;
+    await this.helper.asyncForEach(hyperlinks, async (element) => {
+      let text = await element.getText();
+      if (text === '127.0.0.1') controllerLink = element;
+    });
+    await controllerLink.click();
+  }
+}

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 +0,0 @@
-import { browser, by, element } from 'protractor';
-import { TestHelper } from './common.po';
-
-export class ServersPage {
-    helper = new TestHelper;
-
-    maximizeWindow() {
-        browser.driver.manage().window().maximize();
-    }
-
-    navigateToServersPage() {
-        return browser.get('/servers');
-    }
-
-    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();   
-        }
-    }
-
-    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();
-    }
-}

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 { ControllersPage } from './helpers/controller.po';
 
 describe('Project map page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let projectMapPage: ProjectMapPage;
-    let helper: TestHelper;
+  let controllersPage: ControllersPage;
+  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 () => {
+    controllersPage = new ControllersPage();
+    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);
-    });
+    controllersPage.maximizeWindow();
+    await controllersPage.navigateToControllersPage();
+    await controllersPage.clickAddController();
+    await controllersPage.navigateToControllerProjects();
+    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 { ControllersPage } from './helpers/controller.po';
 
 describe('Projects page', () => {
-    let serversPage: ServersPage;
-    let projectsPage: ProjectsPage;
-    let helper: TestHelper;
+  let controllersPage: ControllersPage;
+  let projectsPage: ProjectsPage;
+  let helper: TestHelper;
 
-    beforeEach(() => {
-        serversPage = new ServersPage();
-        projectsPage = new ProjectsPage();
-        helper = new TestHelper();
-    });
+  beforeEach(() => {
+    controllersPage = new ControllersPage();
+    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
+    controllersPage.maximizeWindow();
+    await controllersPage.navigateToControllersPage();
+    await controllersPage.clickAddController();
+    await controllersPage.navigateToControllerProjects();
+    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('controller/1/project/');
+  });
 });

e2e/servers.e2e-spec.ts

@@ -1,44 +0,0 @@
-import { ServersPage } from './helpers/server.po';
-import { TestHelper } from './helpers/common.po';
-import { element } from 'protractor';
-
-describe('Servers page', () => {
-    let page: ServersPage;
-    let helper: 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());
-        });
-
-        // assert
-        expect(serverData).toContain('127.0.0.1');
-        expect(serverData).toContain('3080');
-    });
-});

e2e/tsconfig.e2e.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
     "baseUrl": "./",

electron-builder.yml

@@ -15,7 +15,7 @@ files:
   - renderer.js
   - sentry.js
   - installed-software.js
-  - local-server.js
+  - local-controller.js
   - console-executor.js
   - package.json
 

karma.conf.js

@@ -19,13 +19,13 @@ module.exports = function (config) {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    
+
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
+    browsers: ['ChromeHeadless'],
+    singleRun: true
   });
 };

local-controller.js

@@ -8,9 +8,9 @@ const { app } = require('electron')
 
 const isWin = /^win/.test(process.platform);
 
-let runningServers = {};
+let runningControllers = {};
 
-exports.getLocalServerPath = async () => {
+exports.getLocalControllerPath = async () => {
   let binary = isWin ? 'gns3server.exe': 'gns3server';
   return findBinary('exe.', binary);
 }
@@ -20,27 +20,27 @@ exports.getUbridgePath = async () => {
   return findBinary('ubridge', binary);
 }
 
-exports.startLocalServer = async (server) => {
-  return await run(server, {
+exports.startLocalController = async (controller) => {
+  return await run(controller, {
     logStdout: true
   });
 }
 
-exports.stopLocalServer = async (server) => {
-  return await stop(server.name);
+exports.stopLocalController = async (controller) => {
+  return await stop(controller.name);
 }
 
-exports.getRunningServers = () => {
-  return Object.keys(runningServers);
+exports.getRunningControllers = () => {
+  return Object.keys(runningControllers);
 }
 
-exports.stopAllLocalServers = async () => {
+exports.stopAllLocalControllers = async () => {
   return await stopAll();
 }
 
 async function findBinary(binaryDirectory, filename) {
   const lookupDirectories = [
-    __dirname, 
+    __dirname,
     path.dirname(app.getPath('exe'))
   ];
 
@@ -60,7 +60,7 @@ async function findBinaryInDirectory(baseDirectory, binaryDirectory, filename) {
   }
 
   const files = fs.readdirSync(distDirectory);
-  
+
   let binaryPath = null;
 
   files.forEach((directory) => {
@@ -77,33 +77,33 @@ async function findBinaryInDirectory(baseDirectory, binaryDirectory, filename) {
 }
 
 
-function getServerArguments(server, overrides, configPath) {
-  let serverArguments = [];
-  if(server.host) {
-    serverArguments.push('--host');
-    serverArguments.push(server.host);
+function getControllerArguments(controller, overrides, configPath) {
+  let controllerArguments = [];
+  if(controller.host) {
+    controllerArguments.push('--host');
+    controllerArguments.push(controller.host);
   }
-  if(server.port) {
-    serverArguments.push('--port');
-    serverArguments.push(server.port);
+  if(controller.port) {
+    controllerArguments.push('--port');
+    controllerArguments.push(controller.port);
   }
 
-  serverArguments.push('--local');
+  controllerArguments.push('--local');
 
   if(configPath) {
-    serverArguments.push('--config');
-    serverArguments.push(configPath);
+    controllerArguments.push('--config');
+    controllerArguments.push(configPath);
   }
 
-  return serverArguments;
+  return controllerArguments;
 }
 
-function getChannelForServer(server) {
-  return `local-server-run-${server.name}`;
+function getChannelForController(controller) {
+  return `local-controller-run-${controller.name}`;
 }
 
 function notifyStatus(status) {
-  ipcMain.emit('local-server-status-events', status);
+  ipcMain.emit('local-controller-status-events', status);
 }
 
 function filterOutput(line) {
@@ -120,44 +120,44 @@ function filterOutput(line) {
 }
 
 async function stopAll() {
-  for(var serverName in runningServers) {
-    let result, error = await stop(serverName);
+  for(var controllerName in runningControllers) {
+    let result, error = await stop(controllerName);
   }
-  console.log(`Stopped all servers`);
+  console.log(`Stopped all controllers`);
 }
 
-async function stop(serverName) {
+async function stop(controllerName) {
   let pid = undefined;
 
-  const runningServer = runningServers[serverName];
+  const runningController = runningControllers[controllerName];
 
-  if(runningServer !== undefined && runningServer.process) {
-    pid = runningServer.process.pid;
+  if(runningController !== undefined && runningController.process) {
+    pid = runningController.process.pid;
   }
 
-  console.log(`Stopping '${serverName}' with PID='${pid}'`);
-  
+  console.log(`Stopping '${controllerName}' with PID='${pid}'`);
+
   const stopped = new Promise((resolve, reject) => {
     if(pid === undefined) {
-      resolve(`Server '${serverName} is already stopped`);
-      delete runningServers[serverName];
+      resolve(`Controller '${controllerName} is already stopped`);
+      delete runningControllers[controllerName];
       return;
     }
 
     kill(pid, (error) => {
       if(error) {
-        console.error(`Error occured during stopping '${serverName}' with PID='${pid}'`);
+        console.error(`Error occured during stopping '${controllerName}' with PID='${pid}'`);
         reject(error);
       }
       else {
-        delete runningServers[serverName];
-        console.log(`Stopped '${serverName}' with PID='${pid}'`);
-        resolve(`Stopped '${serverName}' with PID='${pid}'`);
+        delete runningControllers[controllerName];
+        console.log(`Stopped '${controllerName}' with PID='${pid}'`);
+        resolve(`Stopped '${controllerName}' with PID='${pid}'`);
 
         notifyStatus({
-          serverName: serverName,
+          controllerName: controllerName,
           status: 'stopped',
-          message: `Server '${serverName}' stopped'`
+          message: `Controller '${controllerName}' stopped'`
         });
       }
     });
@@ -166,11 +166,11 @@ async function stop(serverName) {
   return stopped;
 }
 
-async function getIniFile(server) {
-  return path.join(app.getPath('userData'), `gns3_server_${server.id}.ini`);
+async function getIniFile(controller) {
+  return path.join(app.getPath('userData'), `gns3_controller_${controller.id}.ini`);
 }
 
-async function configure(configPath, server) {
+async function configure(configPath, controller) {
   if(!fs.existsSync(configPath)) {
     fs.closeSync(fs.openSync(configPath, 'w'));
     console.log(`Configuration file '${configPath}' has been created.`);
@@ -178,20 +178,20 @@ async function configure(configPath, server) {
 
   var config = ini.parse(fs.readFileSync(configPath, 'utf-8'));
 
-  if(server.path) {
-    config.path = server.path;
+  if(controller.path) {
+    config.path = controller.path;
   }
-  if(server.host) {
-    config.host = server.host;
+  if(controller.host) {
+    config.host = controller.host;
   }
-  if(server.port) {
-    config.port = server.port;
+  if(controller.port) {
+    config.port = controller.port;
   }
-  if(server.ubridge_path) {
-    config.ubridge_path = server.ubridge_path;
+  if(controller.ubridge_path) {
+    config.ubridge_path = controller.ubridge_path;
   }
 
-  fs.writeFileSync(configPath, ini.stringify(config, { section: 'Server' }));
+  fs.writeFileSync(configPath, ini.stringify(config, { section: 'Controller' }));
 }
 
 async function setPATHEnv() {
@@ -216,7 +216,7 @@ async function setPATHEnv() {
   process.env.PATH = extra.join(";");
 }
 
-async function run(server, options) {
+async function run(controller, options) {
   if(!options) {
     options = {};
   }
@@ -226,34 +226,34 @@ async function run(server, options) {
 
   console.log(`Configuring`);
 
-  const configPath = await getIniFile(server);
-  await configure(configPath, server);
+  const configPath = await getIniFile(controller);
+  await configure(configPath, controller);
 
   console.log(`Setting up PATH`);
   await setPATHEnv();
 
-  console.log(`Running '${server.path}'`);
+  console.log(`Running '${controller.path}'`);
 
-  let serverProcess = spawn(server.path, getServerArguments(server, {}, configPath));
+  let controllerProcess = spawn(controller.path, getControllerArguments(controller, {}, configPath));
 
   notifyStatus({
-    serverName: server.name,
+    controllerName: controller.name,
     status: 'started',
-    message: `Server '${server.name}' started'`
+    message: `Controller '${controller.name}' started'`
   });
-  
-  runningServers[server.name] = {
-    process: serverProcess
+
+  runningControllers[controller.name] = {
+    process: controllerProcess
   };
 
-  serverProcess.stdout.on('data', function(data) {
+  controllerProcess.stdout.on('data', function(data) {
     const line = data.toString();
     const { isCritical, errorMessage } = filterOutput(line);
     if(isCritical) {
       notifyStatus({
-        serverName: server.name,
+        controllerName: controller.name,
         status: 'stderr',
-        message: `Server reported error: '${errorMessage}`
+        message: `Controller reported error: '${errorMessage}`
       });
     }
 
@@ -262,25 +262,25 @@ async function run(server, options) {
     }
   });
 
-  serverProcess.stderr.on('data', function(data) {
+  controllerProcess.stderr.on('data', function(data) {
     if(logSterr) {
       console.log(data.toString());
     }
   });
 
-  serverProcess.on('exit', (code, signal) => {
+  controllerProcess.on('exit', (code, signal) => {
     notifyStatus({
-      serverName: server.name,
+      controllerName: controller.name,
       status: 'errored',
-      message: `Server '${server.name}' has exited with status='${code}'`
+      message: `controller '${controller.name}' has exited with status='${code}'`
     });
   });
 
-  serverProcess.on('error', (err) => {
+  controllerProcess.on('error', (err) => {
     notifyStatus({
-      serverName: server.name,
+      controllerName: controller.name,
       status: 'errored',
-      message: `Server errored: '${err}`
+      message: `Controller errored: '${err}`
     });
   });
 
@@ -297,9 +297,9 @@ async function main() {
 }
 
 if(ipcMain) {
-  ipcMain.on('local-server-run', async function (event, server) {
-    const responseChannel = getChannelForServer();
-    await run(server);
+  ipcMain.on('local-controller-run', async function (event, controller) {
+    const responseChannel = getChannelForController();
+    await run(controller);
     event.sender.send(responseChannel, {
       success: true
     });
@@ -318,4 +318,4 @@ if (require.main === module) {
   });
 
   main();
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gns3-web-ui",
-  "version": "2020.2.0-beta.1",
+  "version": "3.0.0.dev7",
   "author": {
     "name": "GNS3 Technology Inc.",
     "email": "developers@gns3.com"
@@ -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",
@@ -34,94 +35,106 @@
     "prettier:write": "yarn prettier:base -- --write \"src/**/*.{ts,js,html,scss}\"",
     "generate-licenses-file": "yarn license-checker --production --csv --out licenses.csv",
     "prebuildforelectron": "node set-variables-in-env.js --set src/environments/environment.electron.prod.ts",
-    "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts"
+    "postbuildforelectron": "node set-variables-in-env.js --unset src/environments/environment.electron.prod.ts",
+    "postinstall": "ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\" && ngcc --properties es2020 browser module main --first-only --create-ivy-entry-points --tsconfig \"./src/tsconfig.app.json\"",
+    "snyk-protect": "snyk-protect",
+    "prepare": "yarn run snyk-protect"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^8.2.11",
-    "@angular/cdk": "^8.2.3",
-    "@angular/common": "^8.2.11",
-    "@angular/compiler": "^8.2.11",
-    "@angular/core": "^8.2.11",
-    "@angular/forms": "^8.2.11",
-    "@angular/http": "^7.2.15",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "^8.2.11",
-    "@angular/platform-browser-dynamic": "^8.2.11",
-    "@angular/router": "^8.2.11",
-    "angular-draggable-droppable": "^4.3.8",
-    "angular-persistence": "^1.0.1",
-    "angular-resizable-element": "^3.2.6",
-    "angular2-draggable": "^2.3.2",
-    "angular2-hotkeys": "^2.1.5",
-    "angular2-indexeddb": "^1.2.3",
-    "bootstrap": "4.3.1",
-    "command-exists": "^1.2.8",
-    "core-js": "^3.3.2",
-    "css-tree": "^1.0.0-alpha.36",
-    "d3-ng2-service": "^2.1.0",
-    "file-saver": "^2.0.2",
-    "hammerjs": "^2.0.8",
-    "ini": "^1.3.5",
+    "@angular/animations": "^14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/common": "^14.3.0",
+    "@angular/compiler": "^14.3.0",
+    "@angular/core": "^14.3.0",
+    "@angular/forms": "^14.3.0",
+    "@angular/material": "^14.2.7",
+    "@angular/platform-browser": "^14.3.0",
+    "@angular/platform-browser-dynamic": "^14.3.0",
+    "@angular/router": "^14.3.0",
+    "@sentry/browser": "^6.14.1",
+    "@snyk/protect": "^1.972.0",
+    "@types/jest": "^27.0.2",
+    "@types/mocha": "^9.1.1",
+    "@types/react": "^17.0.34",
+    "@types/react-dom": "^17.0.11",
+    "angular-draggable-droppable": "^6.1.0",
+    "angular-resizable-element": "^3.4.0",
+    "autoprefixer": "10.4.5",
+    "bootstrap": "^5.1.3",
+    "command-exists": "^1.2.9",
+    "core-js": "^3.22.3",
+    "css-tree": "^2.1.0",
+    "d3-ng2-service": "^2.2.0",
+    "eev": "^0.1.5",
+    "ini": "^3.0.0",
+    "marked": "^4.0.14",
     "material-design-icons": "^3.0.1",
-    "ng-circle-progress": "^1.5.1",
-    "ng2-file-upload": "^1.3.0",
+    "mousetrap": "^1.6.5",
+    "ng-circle-progress": "^1.6.0",
+    "ng2-file-upload": "^3.0.0",
     "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^1.3.18",
-    "ngx-electron": "^2.1.1",
-    "node-fetch": "^2.6.0",
-    "notosans-fontface": "^1.1.0",
-    "raven-js": "^3.27.2",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
-    "save-html-as-image": "^1.2.0",
-    "save-svg-as-png": "^1.4.14",
-    "svg-crowbar": "^0.2.4",
-    "tree-kill": "^1.2.1",
-    "typeface-roboto": "^0.0.75",
-    "xterm": "^4.1.0",
-    "xterm-addon-attach": "^0.5.0",
-    "xterm-addon-fit": "^0.3.0",
-    "yargs": "^15.0.2",
-    "zone.js": "^0.10.2"
+    "ngx-device-detector": "4.0.1",
+    "ngx-electron": "^2.2.0",
+    "node-fetch": "^3.2.10",
+    "notosans-fontface": "^1.3.0",
+    "postcss-loader": "^6.2.1",
+    "prettier-plugin-organize-imports": "^2.3.4",
+    "rxjs": "^6.6.7",
+    "rxjs-compat": "^6.6.7",
+    "save-svg-as-png": "^1.4.17",
+    "spark-md5": "^3.0.2",
+    "svg-crowbar": "^0.7.0",
+    "tree-kill": "^1.2.2",
+    "tslib": "^2.4.0",
+    "typeface-roboto": "^1.1.13",
+    "xterm": "^4.18.0",
+    "xterm-addon-attach": "^0.6.0",
+    "xterm-addon-fit": "^0.5.0",
+    "yargs": "^17.4.1",
+    "zone.js": "^0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.10",
-    "@angular/cli": "^8.3.10",
-    "@angular/compiler-cli": "^8.2.11",
-    "@angular/language-service": "^8.2.11",
-    "@sentry/cli": "^1.48.0",
-    "@sentry/electron": "^0.17.4",
-    "@types/jasmine": "^3.4.4",
-    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.10",
-    "codelyzer": "^5.1.2",
-    "electron": "7.1.2",
-    "electron-builder": "21.2.0",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "jquery": "^3.4.1",
-    "karma": "~4.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "^2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "@angular-devkit/build-angular": "^14.2.12",
+    "@angular/cli": "^14.2.12",
+    "@angular/compiler-cli": "^14.3.0",
+    "@angular/language-service": "^14.3.0",
+    "@sentry/cli": "^2.0.4",
+    "@sentry/electron": "^3.0.7",
+    "@types/jasmine": "^4.0.3",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/node": "^17.0.31",
+    "codelyzer": "^0.0.28",
+    "electron": "13.6.6",
+    "electron-builder": "^23.0.3",
+    "file-loader": "^6.2.0",
+    "jasmine-core": "^4.1.0",
+    "jasmine-spec-reporter": "^7.0.0",
+    "jquery": "^3.6.0",
+    "karma": "^6.3.19",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-cli": "^2.0.0",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
+    "karma-jasmine": "^5.0.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "license-checker": "^25.0.1",
-    "node-sass": "^4.12.0",
-    "popper.js": "^1.16.0",
-    "prettier": "^1.18.2",
-    "protractor": "~5.4.2",
-    "replace": "^1.1.1",
-    "ts-mockito": "^2.5.0",
-    "ts-node": "~8.4.1",
-    "tslint": "~5.20.0",
+    "popper.js": "^1.16.1",
+    "prettier": "^2.6.2",
+    "protractor": "^7.0.0",
+    "replace": "^1.2.1",
+    "rxjs-tslint": "^0.1.8",
+    "ts-mockito": "^2.6.1",
+    "ts-node": "^10.7.0",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
-    "typescript": ">=3.4.0 <3.6.0"
+    "typescript": "4.6.4",
+    "webpack": "^5.72.0",
+    "yarn-upgrade-all": "^0.7.1"
   },
   "greenkeeper": {
     "ignore": [
       "typescript"
     ]
-  }
-}
+  },
+  "snyk": true
+}

scripts/build.py

@@ -144,7 +144,7 @@ def download_from_github(name, definition, output_directory):
     files = []
     if platform.system() == "Windows":
         files = definition['files']['windows']
-    
+
     for filename in files:
         dependency_file = os.path.join(dependency_dir, filename)
         dependency_url = list(filter(lambda x: x['name'] == filename, release['assets']))[0]['browser_download_url']
@@ -161,7 +161,7 @@ def download_from_http(name, definition, output_directory):
     files = []
     if platform.system() == "Windows":
         files = definition['files']['windows']
-    
+
     for filename in files:
         dependency_file = os.path.join(dependency_dir, filename)
         download(url, dependency_file)
@@ -193,7 +193,7 @@ def is_tagged():
       return True
     if os.environ.get('APPVEYOR_REPO_TAG', False) in (1, "True", "true"):
       return True
-    
+
 
 def is_web_ui_non_dev():
     package_file = os.path.join(FILE_DIR, '..', 'package.json')
@@ -237,6 +237,8 @@ def download_command(arguments):
 
     if platform.system() == "Windows":
         requirements = 'win-requirements.txt'
+    elif platform.system() == "Darwin":
+        requirements = 'mac-requirements.txt'
     else:
         requirements = 'requirements.txt'
 
@@ -277,13 +279,11 @@ def build_command(arguments):
     ]
 
     excludes = [
-        "raven.deprecation",  # reported problem in raven package (6.4.0)
         "distutils",  # issue on macOS
         "tkinter",  # issue on Windows
     ]
 
     packages = [
-        "raven",
         "psutil",
         "asyncio",
         "packaging",  # needed for linux

scripts/requirements.txt

@@ -1,7 +1,6 @@
-setuptools==40.8.0
+setuptools==65.5.1
 cx_Freeze==5.1.1
-requests==2.21.0
-packaging==19.0
-appdirs==1.4.3
-psutil==5.6.3
-jsonschema==2.6.0 # lock down jsonschema, 3.0 makes problems
+requests==2.31.0
+packaging==20.9
+appdirs==1.4.4
+psutil==5.8.0

src/ReleaseNotes.txt

@@ -1,6 +1,111 @@
 GNS3 WebUI is web implementation of user interface for GNS3 software.
 
-Current version: GNS3 Web UI 2020.2.0
+Current version: 2.2.24
+
+Bug Fixes & enhancements
+- security fixes
+
+Current version: 2020.4.0-beta.1
+
+Bug Fixes & enhancements
+- symbol is not properly selected in change symbol dialog
+- issue when using the scroll wheel on the web console
+- missing settings for Docker nodes
+- error on servers page
+
+What's new
+- double click nodes to open the console
+
+Current version: 2020.3.0-beta.3
+
+Bug Fixes & enhancements
+- direct download URL in template dialog
+- fix for issues with suspnded nodes
+- fix for bug with deleting templates
+- fix for importing images
+
+What's new
+- Option to resize console
+- Improvements in creating templates
+
+GNS3 Web UI 2020.3.0-beta.1
+
+Bug Fixes & enhancements
+- refreshing list of templates after adding new template from project map 
+- link to preferences from project page 
+- disallow user to create Qemu template when binary is not selected 
+- extending the time for notification to appear 
+- open first settings menu at start 
+- the menu for the map rearranged 
+- restyling SystemStatus page 
+- marking files which already exist in appliance wizard
+
+What's new
+- Option to import appliances
+
+GNS3 Web UI 2020.2.0-beta.5
+
+Bug Fixes
+
+- Bug in symbol selection
+- Same question is asked after going back to project
+- Cannot read property 'forEach' of undefined
+- Error when selecting existing Docker image
+- Invalid property when adding VMware VM template
+- Invalid type for adapters field when adding Docker template
+- Prevent user to move to another step when adding template
+- Web UI cannot set flag "Leave this project running in the background after closing"
+
+What's new
+- Default values in templates
+- New option for Qemu VMs
+- Ability to quickly change Hostname from right click
+- Progress bar for node creation
+
+GNS3 Web UI 2020.2.0-beta.4
+
+Bug Fixes
+- New port setting for GNS3 VM preferences
+- Option to auto-hide menu toolbar on the left side
+-Controller  type in template preferences
+- Error when selecting existing Docker image
+- Default values in templates
+- TypeError: Cannot read property 'message' of undefined
+- TypeError: e.error is undefined
+- TypeError: Cannot read property 'placements' of null
+- Creating IOS templates -> fix for platforms and network adapters
+
+GNS3 Web UI 2020.2.0-beta.2
+
+What's New
+- Drag & drop to add new nodes on topology
+- Option to minimize/maximize and hide console widget
+- Ability to add IOS templates
+- Node names in HTTP console tabs
+- Default settings for templates
+- Support for adding IOS images
+- Node dialog updated
+- Messages with description in toasts
+- Adding interfaces to cloud nodes
+- Changes in notification box mechanism (once per day option)
+- Additional tooltips added
+- Copy/paste options in console (only Chrome full support)
+- More details for server failed connections
+
+Bug Fixes
+- Fix for console icons
+- Fix for creating ethernet switches and hubs
+- Fix for opening console from context menu
+- Qemu configurator now works properly
+- Fixes in snap to grid option
+- Symbols preview now works correctly
+- Error messages in preferences should be displayed
+- Default values for New Ethernet devices in configurator
+- Fix for wrong adapter types in Qemu
+- Fix for fit in view option on Firefox
+- Fix for navigation errors
+
+GNS3 Web UI 2020.2.0-beta.1
 
 What's New
 - Support for suspended status added

src/app/app-routing.module.ts

@@ -1,173 +1,320 @@
 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 { BundledControllerFinderComponent } from './components/bundled-controller-finder/bundled-controller-finder.component';
+import { DirectLinkComponent } from './components/direct-link/direct-link.component';
+import { HelpComponent } from './components/help/help.component';
+import { InstalledSoftwareComponent } from './components/installed-software/installed-software.component';
+import { LoginComponent } from './components/login/login.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 { 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 { 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 { ListOfSnapshotsComponent } from './components/snapshots/list-of-snapshots/list-of-snapshots.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 { ControllersComponent } from './components/controllers/controllers.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 { Gns3vmComponent } from './components/preferences/gns3vm/gns3vm.component';
-import { DirectLinkComponent } from './components/direct-link/direct-link.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 { ProjectMapGuard } from './guards/project-map-guard';
 import { WebConsoleFullWindowComponent } from './components/web-console-full-window/web-console-full-window.component';
+import { ConsoleGuard } from './guards/console-guard';
+import { LoginGuard } from './guards/login-guard';
+import { DefaultLayoutComponent } from './layouts/default-layout/default-layout.component';
+import { ControllerResolve } from './resolvers/controller-resolve';
+import { UserManagementComponent } from './components/user-management/user-management.component';
+import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
+import { ImageManagerComponent } from './components/image-manager/image-manager.component';
+import { UserDetailComponent } from "./components/user-management/user-detail/user-detail.component";
+import { UserDetailResolver } from "./resolvers/user-detail.resolver";
+import { ManagementComponent } from "./components/management/management.component";
+import { PermissionResolver } from "./resolvers/permission.resolver";
+import { UserGroupsResolver } from "./resolvers/user-groups.resolver";
+import { UserPermissionsResolver } from "./resolvers/user-permissions.resolver";
+import { GroupManagementComponent } from "./components/group-management/group-management.component";
+import { RoleManagementComponent } from "./components/role-management/role-management.component";
+import { PermissionsManagementComponent } from "./components/permissions-management/permissions-management.component";
+import { GroupDetailsComponent } from "./components/group-details/group-details.component";
+import { GroupMembersResolver } from "./resolvers/group-members.resolver";
+import { GroupResolver } from "./resolvers/group.resolver";
+import { GroupRoleResolver } from "./resolvers/group-role.resolver";
+import { RoleDetailComponent } from "./components/role-management/role-detail/role-detail.component";
+import { RoleDetailResolver } from "./resolvers/role-detail.resolver";
+import { RolePermissionsComponent } from "./components/role-management/role-detail/role-permissions/role-permissions.component";
+import { UserPermissionsComponent } from "./components/user-management/user-detail/user-permissions/user-permissions.component";
 
 const routes: Routes = [
   {
     path: '',
     component: DefaultLayoutComponent,
     children: [
-      { path: '', redirectTo: 'servers', pathMatch: 'full' },
-      { path: 'servers', component: ServersComponent },
-      { path: 'bundled', component: BundledServerFinderComponent },
-      { 
-        path: 'server/:server_id/projects', 
+      { path: '', redirectTo: 'controllers', pathMatch: 'full' },
+      { path: 'controllers', component: ControllersComponent },
+      { path: 'bundled', component: BundledControllerFinderComponent },
+      { path: 'controller/:controller_id/login', component: LoginComponent },
+      { path: 'controller/:controller_id/loggeduser', component: LoggedUserComponent },
+      {path : 'controller/:controller_id/image-manager', component: ImageManagerComponent},
+      {
+        path: 'controller/:controller_id/projects',
         component: ProjectsComponent,
-        resolve: { server : ServerResolve }
+        canActivate: [LoginGuard],
+        resolve: { controller: ControllerResolve },
+      },
+      { path: 'controller/:controller_id/help', component: HelpComponent },
+      { path: 'controller/:controller_id/settings', component: SettingsComponent },
+      { path: 'controller/:controller_id/settings/console', component: ConsoleComponent },
+      {
+        path: 'controller/:controller_id/management/users/:user_id',
+        component: UserDetailComponent,
+        canActivate: [LoginGuard],
+        resolve: {
+          user: UserDetailResolver,
+          groups: UserGroupsResolver,
+          permissions: UserPermissionsResolver,
+          controller: ControllerResolve},
       },
-      { path: 'help', component: HelpComponent },
-      { path: 'settings', component: SettingsComponent },
-      { path: 'settings/console', component: ConsoleComponent },
       { path: 'installed-software', component: InstalledSoftwareComponent },
-      { path: 'server/:server_id/systemstatus', component: SystemStatusComponent },
+      { path: 'controller/:controller_id/systemstatus', component: SystemStatusComponent, canActivate: [LoginGuard] },
 
-      { path: 'server/:server_ip/:server_port/project/:project_id', component: DirectLinkComponent},
-      { 
-        path: 'server/:server_id/project/:project_id/snapshots', 
+      { path: 'controller/:controller_ip/:controller_port/project/:project_id', component: DirectLinkComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/project/:project_id/snapshots',
         component: ListOfSnapshotsComponent,
-        resolve: { server : ServerResolve }
+        canActivate: [LoginGuard],
+        resolve: { controller: ControllerResolve },
       },
-      { 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: 'controller/:controller_id/preferences', component: PreferencesComponent, canActivate: [LoginGuard] },
+      // { path: 'controller/:controller_id/preferences/general', component: GeneralPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/builtin', component: BuiltInPreferencesComponent, canActivate: [LoginGuard] },
 
-      { 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: 'controller/:controller_id/preferences/builtin/ethernet-hubs', component: EthernetHubsTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/builtin/ethernet-hubs/addtemplate',
+        component: EthernetHubsAddTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      {
+        path: 'controller/:controller_id/preferences/builtin/ethernet-hubs/:template_id',
+        component: EthernetHubsTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
 
-      { 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: 'controller/:controller_id/preferences/builtin/ethernet-switches',
+        component: EthernetSwitchesTemplatesComponent,
+        canActivate: [LoginGuard]
+      },
+      {
+        path: 'controller/:controller_id/preferences/builtin/ethernet-switches/addtemplate',
+        component: EthernetSwitchesAddTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      {
+        path: 'controller/:controller_id/preferences/builtin/ethernet-switches/:template_id',
+        component: EthernetSwitchesTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
 
-      { 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: 'controller/:controller_id/preferences/builtin/cloud-nodes', component: CloudNodesTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/builtin/cloud-nodes/addtemplate',
+        component: CloudNodesAddTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      {
+        path: 'controller/:controller_id/preferences/builtin/cloud-nodes/:template_id',
+        component: CloudNodesTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
 
-      //{ 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: 'controller/:controller_id/preferences/dynamips', component: DynamipsPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/dynamips/templates', component: IosTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/dynamips/templates/addtemplate', component: AddIosTemplateComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/dynamips/templates/:template_id', component: IosTemplateDetailsComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/dynamips/templates/:template_id/copy',
+        component: CopyIosTemplateComponent,
+        canActivate: [LoginGuard]
+      },
 
-      // { 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', component: QemuVmTemplateDetailsComponent },
-      { path: 'server/:server_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent },
+      // { path: 'controller/:controller_id/preferences/qemu', component: QemuPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/qemu/templates', component: QemuVmTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/qemu/templates/:template_id/copy',
+        component: CopyQemuVmTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/qemu/templates/:template_id', component: QemuVmTemplateDetailsComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/qemu/addtemplate', component: AddQemuVmTemplateComponent, canActivate: [LoginGuard] },
 
-      // { 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/addtemplate', component: AddVpcsTemplateComponent },
+      // { path: 'controller/:controller_id/preferences/vpcs', component: VpcsPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/vpcs/templates', component: VpcsTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/vpcs/templates/:template_id', component: VpcsTemplateDetailsComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/vpcs/addtemplate', component: AddVpcsTemplateComponent, canActivate: [LoginGuard] },
 
-      // { 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/addtemplate', component: AddVirtualBoxTemplateComponent },
+      // { path: 'controller/:controller_id/preferences/virtualbox', component: VirtualBoxPreferencesComponent },
+      { path: 'controller/:controller_id/preferences/virtualbox/templates', component: VirtualBoxTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/virtualbox/templates/:template_id',
+        component: VirtualBoxTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/virtualbox/addtemplate', component: AddVirtualBoxTemplateComponent, canActivate: [LoginGuard] },
 
-      // { 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/addtemplate', component: AddVmwareTemplateComponent },
+      // { path: 'controller/:controller_id/preferences/vmware', component: VmwarePreferencesComponent },
+      { path: 'controller/:controller_id/preferences/vmware/templates', component: VmwareTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/vmware/templates/:template_id',
+        component: VmwareTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/vmware/addtemplate', component: AddVmwareTemplateComponent, canActivate: [LoginGuard] },
 
-      // { path: 'server/:server_id/preferences/traceng', component: TracengPreferencesComponent },
-      // { path: 'server/:server_id/preferences/traceng/templates', component: TracengTemplatesComponent },
-      // { path: 'server/:server_id/preferences/traceng/templates/:template_id', component: TracengTemplateDetailsComponent },
-      // { 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/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: 'controller/:controller_id/preferences/docker/templates', component: DockerTemplatesComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/docker/templates/:template_id',
+        component: DockerTemplateDetailsComponent,
+        canActivate: [LoginGuard]
+      },
+      {
+        path: 'controller/:controller_id/preferences/docker/templates/:template_id/copy',
+        component: CopyDockerTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/docker/addtemplate', component: AddDockerTemplateComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/iou/templates', component: IouTemplatesComponent, canActivate: [LoginGuard] },
+      { path: 'controller/:controller_id/preferences/iou/templates/:template_id', component: IouTemplateDetailsComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/preferences/iou/templates/:template_id/copy',
+        component: CopyIouTemplateComponent,
+        canActivate: [LoginGuard]
+      },
+      { path: 'controller/:controller_id/preferences/iou/addtemplate', component: AddIouTemplateComponent, canActivate: [LoginGuard] },
+      {
+        path: 'controller/:controller_id/management',
+        component: ManagementComponent,
+        children: [
+          {
+            path: 'users',
+            component: UserManagementComponent
+          },
+          {
+            path: 'groups',
+            component: GroupManagementComponent
+          },
+          {
+            path: 'roles',
+            component: RoleManagementComponent
+          },
+          {
+            path: 'permissions',
+            component: PermissionsManagementComponent
+          }
+        ]
+      },
+      {
+        path: 'controller/:controller_id/management/groups/:user_group_id',
+        component: GroupDetailsComponent,
+        resolve: {
+          members: GroupMembersResolver,
+          controller: ControllerResolve,
+          group: GroupResolver,
+          roles: GroupRoleResolver
+        }
+      },
+      {
+        path: 'controller/:controller_id/management/roles/:role_id',
+        component: RoleDetailComponent,
+        resolve: {
+          role: RoleDetailResolver,
+          controller: ControllerResolve
+        }
+      },
+      {
+        path: 'controller/:controller_id/management/roles/:role_id/permissions',
+        component: RolePermissionsComponent,
+        resolve: {
+          role: RoleDetailResolver,
+          controller: ControllerResolve,
+          permissions: PermissionResolver
+        }
+      },
+      {
+        path: 'controller/:controller_id/management/users/:user_id/permissions',
+        component: UserPermissionsComponent,
+        resolve: {
+          user: UserDetailResolver,
+          userPermissions: UserPermissionsResolver,
+          controller: ControllerResolve,
+          permissions: PermissionResolver
+        }
+      }
+    ],
   },
-  { 
-    path: 'server/:server_id/project/:project_id', 
+  {
+    path: 'controller/:controller_id/project/:project_id',
     component: ProjectMapComponent,
-    canActivate: [ProjectMapGuard]
+    canActivate: [LoginGuard],
+    canDeactivate: [ConsoleGuard],
   },
-  { 
-    path: 'server/:server_id/project/:project_id/nodes/:node_id', 
+  {
+    path: 'controller/:controller_id/project/:project_id/nodes/:node_id',
     component: WebConsoleFullWindowComponent,
-    canActivate: [ProjectMapGuard]
+    canActivate: [LoginGuard]
+  },
+  {
+    path: 'static/web-ui/controller/:controller_id/project/:project_id/nodes/:node_id',
+    component: WebConsoleFullWindowComponent,
+    canActivate: [LoginGuard]
   },
   {
     path: '**',
-    component: PageNotFoundComponent
+    component: PageNotFoundComponent,
   }
+
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled', enableTracing: true, scrollPositionRestoration: 'enabled'})],
-  exports: [RouterModule]
+  imports: [
+    RouterModule.forRoot(routes, {
+      anchorScrolling: 'enabled',
+      enableTracing: false,
+      scrollPositionRestoration: 'enabled',
+    }),
+  ],
+  exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

src/app/app.component.css

@@ -1,3 +0,0 @@
-mat-menu-panel {
-    min-height: 0px;
-}

src/app/app.component.html

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

src/app/app.component.scss

@@ -0,0 +1,11 @@
+mat-menu-panel {
+  min-height: 0px;
+}
+
+.dark {
+  background: #263238 !important;
+}
+
+.light {
+  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 { MatIconModule } from '@angular/material';
-import { SettingsService } from './services/settings.service';
-import { PersistenceService } from 'angular-persistence';
-import { ElectronService, NgxElectronModule } from 'ngx-electron';
-import createSpyObj = jasmine.createSpyObj;
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { RouterTestingModule } from '@angular/router/testing';
+import { ElectronService, NgxElectronModule } from 'ngx-electron';
+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', () => {
   let component: AppComponent;
@@ -16,17 +16,17 @@ describe('AppComponent', () => {
   let electronService: ElectronService;
   let settingsService: SettingsService;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       declarations: [AppComponent],
       imports: [RouterTestingModule, MatIconModule, NgxElectronModule],
-      providers: [SettingsService, PersistenceService, ProgressService],
-      schemas: [NO_ERRORS_SCHEMA]
+      providers: [SettingsService, ProgressService],
+      schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();
 
-    electronService = TestBed.get(ElectronService);
-    settingsService = TestBed.get(SettingsService);
-  }));
+    electronService = TestBed.inject(ElectronService);
+    settingsService = TestBed.inject(SettingsService);
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
@@ -34,34 +34,29 @@ describe('AppComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create the app', async(() => {
+  it('should create the app', async() => {
     const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
+    await expect(app).toBeTruthy();
+  });
 
-  it('should have footer', async(() => {
+  it('should have footer', async() => {
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('router-outlet').textContent).toEqual('');
-  }));
+    await expect(compiled.querySelector('router-outlet').textContent).toEqual('');
+  });
 
-  it('should receive changed settings and forward to electron', async(() => {
-    const spy = createSpyObj('Electron.IpcRenderer', ['send']);
-    spyOnProperty(electronService, 'isElectronApp').and.returnValue(true);
-    spyOnProperty(electronService, 'ipcRenderer').and.returnValue(spy);
-    settingsService.set('crash_reports', true);
+  it('should receive changed settings and forward to electron', async() => {
+    await spyOnProperty(electronService, 'isElectronApp').and.returnValue(true);
+    settingsService.setReportsSettings(true);
     component.ngOnInit();
-    settingsService.set('crash_reports', false);
-    expect(spy.send).toHaveBeenCalled();
-    expect(spy.send.calls.mostRecent().args[0]).toEqual('settings.changed');
-    expect(spy.send.calls.mostRecent().args[1].crash_reports).toEqual(false);
-  }));
+    settingsService.setReportsSettings(false);
+  });
 
-  it('should receive changed settings and do not forward to electron', async(() => {
+  it('should receive changed settings and do not forward to electron', async() => {
     const spy = createSpyObj('Electron.IpcRenderer', ['send']);
     spyOnProperty(electronService, 'isElectronApp').and.returnValue(false);
-    settingsService.set('crash_reports', true);
+    settingsService.setReportsSettings(true);
     component.ngOnInit();
-    settingsService.set('crash_reports', false);
-    expect(spy.send).not.toHaveBeenCalled();
-  }));
+    settingsService.setReportsSettings(false);
+    await expect(spy.send).not.toHaveBeenCalled();
+  });
 });

src/app/app.component.ts

@@ -1,19 +1,23 @@
-import { Component, OnInit } from '@angular/core';
-import { MatIconRegistry } from '@angular/material';
+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';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
+  public darkThemeEnabled: boolean = false;
+
   constructor(
+    private overlayContainer: OverlayContainer,
     iconReg: MatIconRegistry,
     sanitizer: DomSanitizer,
     private settingsService: SettingsService,
@@ -30,28 +34,33 @@ export class AppComponent implements OnInit {
     });
   }
 
+  @HostBinding('class') componentCssClass;
+
   ngOnInit(): void {
-    if (this.electronService.isElectronApp) {
-      this.settingsService.subscribe(settings => {
-        this.electronService.ipcRenderer.send('settings.changed', settings);
-      });
-    }
-    let theme = localStorage.getItem('theme');
-    if (theme === 'light') {
-      this.themeService.setDarkMode(false);
-    } else {
-      this.themeService.setDarkMode(true);
-    }
+    this.applyTheme(this.themeService.savedTheme + '-theme');
+    this.themeService.themeChanged.subscribe((event: string) => {
+      this.applyTheme(event);
+    });
   }
 
-  checkEvent(routerEvent) : void {
+  applyTheme(theme: string) {
+    if (theme === 'dark-theme') {
+      this.darkThemeEnabled = true;
+    } else {
+      this.darkThemeEnabled = false;
+    }
+    this.overlayContainer.getContainerElement().classList.add(theme);
+    this.componentCssClass = theme;
+  }
+
+  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/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,26 +1,23 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatMenuModule, MatIconModule } from '@angular/material';
-
-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 { NgModule } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
 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 { LinkEditingComponent } from './components/link-editing/link-editing.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';
@@ -30,34 +27,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';
 
@@ -73,8 +74,9 @@ import { SerialLinkWidget } from './widgets/links/serial-link';
     SelectionControlComponent,
     SelectionSelectComponent,
     DraggableSelectionComponent,
+    LinkEditingComponent,
     MovingCanvasDirective,
-    ZoomingCanvasDirective
+    ZoomingCanvasDirective,
   ],
   providers: [
     CssFixer,
@@ -121,8 +123,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 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 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>
 
@@ -20,5 +44,6 @@
 <app-drawing-resizing></app-drawing-resizing>
 <app-selection-control></app-selection-control>
 <app-selection-select></app-selection-select>
-<app-text-editor #textEditor [server]="server" [svg]="svg"></app-text-editor>
+<app-text-editor #textEditor [controller]="controller" [svg]="svg"></app-text-editor>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
+<app-link-editing [svg]="svg"></app-link-editing>

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

@@ -1,24 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { D3MapComponent } from './d3-map.component';
 
 describe('D3MapComponent', () => {
   let component: D3MapComponent;
   let fixture: ComponentFixture<D3MapComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [D3MapComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [D3MapComponent],
     }).compileComponents();
-  }));
+  });
 
-  // beforeEach(() => {
-  //   fixture = TestBed.createComponent(MapComponent);
-  //   component = fixture.componentInstance;
-  //   fixture.detectChanges();
-  // });
-  //
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component)
+  });
 });

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 { Controller } from '../../../models/controller';
 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[] = [];
@@ -46,13 +43,13 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() drawings: Drawing[] = [];
   @Input() symbols: Symbol[] = [];
   @Input() project: Project;
-  @Input() server: Server;
+  @Input() controller: Controller;
 
   @Input() width = 1500;
   @Input() height = 600;
 
-  @ViewChild('svg', {static: false}) svgRef: ElementRef;
-  @ViewChild('textEditor', {static: false}) textEditor: TextEditorComponent;
+  @ViewChild('svg') svgRef: ElementRef;
+  @ViewChild('textEditor') textEditor: TextEditorComponent;
 
   private parentNativeElement: any;
   private svg: Selection<SVGSVGElement, any, null, undefined>;
@@ -60,10 +57,15 @@ 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;
 
+  public nodeGridX: number = 0;
+  public nodeGridY: number = 0;
+  public drawingGridX: number = 0;
+  public drawingGridY: number = 0;
+
   constructor(
     private graphDataManager: GraphDataManager,
     public context: Context,
@@ -84,8 +86,14 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input('show-interface-labels')
   set showInterfaceLabels(value) {
-    this.settings.show_interface_labels = value;
-    this.interfaceLabelWidget.setEnabled(value);
+    if (value && !this.mapSettingsService.integrateLinkLabelsToLinks) {
+      this.settings.show_interface_labels = true;
+      this.interfaceLabelWidget.setEnabled(true);
+    } else {
+      this.settings.show_interface_labels = false;
+      this.interfaceLabelWidget.setEnabled(false);
+    }
+
     this.mapChangeDetectorRef.detectChanges();
   }
 
@@ -93,6 +101,20 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.mapSettings.isReadOnly = value;
   }
 
+  resize(val: boolean) {
+    if (val) {
+      this.svg.attr('height', window.innerHeight + window.scrollY - 16);
+    } else {
+      let heightOfProjectWindow = window.innerHeight - 16;
+
+      if (this.height > heightOfProjectWindow) {
+        this.svg.attr('height', this.height);
+      } else {
+        this.svg.attr('height', heightOfProjectWindow);
+      }
+    }
+  }
+
   ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
     if (
       (changes['width'] && !changes['width'].isFirstChange()) ||
@@ -123,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) => {
@@ -147,6 +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));
   }
 
   ngOnDestroy() {
@@ -164,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;
   }
@@ -189,6 +207,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   private redraw() {
+    this.updateGrid();
+
     this.graphDataManager.setNodes(this.nodes);
     this.graphDataManager.setLinks(this.links);
     this.graphDataManager.setDrawings(this.drawings);
@@ -198,6 +218,26 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     this.mapSettingsService.mapRenderedEmitter.emit(true);
   }
 
+  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.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'])
   onResize(event) {
     this.changeLayout();

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;
@@ -43,7 +42,7 @@ describe('DraggableSelectionComponent', () => {
   let interfaceLabelDragEventEmitter: EventEmitter<DraggableDrag<MapLinkNode>>;
   let interfaceLabelEndEventEmitter: EventEmitter<DraggableEnd<MapLinkNode>>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     mockedGraphDataManager = new MockedGraphDataManager();
 
     nodesStartEventEmitter = new EventEmitter<DraggableStart<MapNode>>();
@@ -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,30 +87,30 @@ 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({
+   await TestBed.configureTestingModule({
       providers: [
         { provide: NodesWidget, useValue: nodesWidgetStub },
         { provide: DrawingsWidget, useValue: drawingsWidgetStub },
@@ -123,11 +122,11 @@ 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();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DraggableSelectionComponent);

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,24 +1,24 @@
-import { DrawingAddingComponent } from './drawing-adding.component';
-import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { 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;
   let fixture: ComponentFixture<DrawingAddingComponent>;
   let drawingsEventSource = new DrawingsEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsEventSource, useValue: drawingsEventSource },
-        { provide: Context, useClass: Context }
+        { provide: Context, useClass: Context },
       ],
-      declarations: [DrawingAddingComponent]
+      declarations: [DrawingAddingComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingAddingComponent);

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 { 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>>();
@@ -31,16 +30,16 @@ describe('DrawingResizingComponent', () => {
   let drawingsWidgetMock = new DrawingWidgetMock();
   let drawingsEventSource = new DrawingsEventSource();
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
         { provide: DrawingsWidget, useValue: drawingsWidgetMock },
-        { provide: DrawingsEventSource, useValue: drawingsEventSource }
+        { provide: DrawingsEventSource, useValue: drawingsEventSource },
       ],
-      declarations: [DrawingResizingComponent]
+      declarations: [DrawingResizingComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingResizingComponent);

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,16 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DraggableComponent } from './draggable.component';
 
 describe('DraggableComponent', () => {
   let component: DraggableComponent;
   let fixture: ComponentFixture<DraggableComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      declarations: [DraggableComponent]
+      declarations: [DraggableComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DraggableComponent);
@@ -18,7 +17,7 @@ describe('DraggableComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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.html

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

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

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { DrawingsEventSource } from 'app/cartography/events/drawings-event-source';
+import { SvgToDrawingConverter } from 'app/cartography/helpers/svg-to-drawing-converter';
 import { DrawingComponent } from './drawing.component';
 
 describe('DrawingComponent', () => {
   let component: DrawingComponent;
   let fixture: ComponentFixture<DrawingComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [DrawingComponent]
+  beforeEach(async() => {
+    await TestBed.configureTestingModule({
+      declarations: [DrawingComponent],
+      providers:[SvgToDrawingConverter,DrawingsEventSource]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DrawingComponent);
@@ -18,7 +20,7 @@ describe('DrawingComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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;
@@ -21,19 +21,17 @@ export class DrawingComponent implements OnInit {
     private svgToDrawingConverter: SvgToDrawingConverter,
     private drawingsEventSource: DrawingsEventSource,
     private cd: ChangeDetectorRef
-  ) {}
+  ) { }
 
   ngOnInit() {
     try {
       this.drawing.element = this.svgToDrawingConverter.convert(this.drawing.svg);
-    } catch (error) {
-      console.log(`Cannot convert due to Error: '${error}'`);
-    }
+    } catch (error) { }
   }
 
   OnDragging(evt) {
-    this.drawing.x = evt.x;
-    this.drawing.y = evt.y;
+    this.drawing.x = evt ? evt.x : '';
+    this.drawing.y = evt ? evt.y : '';
     this.cd.detectChanges();
   }
 
@@ -66,6 +64,8 @@ export class DrawingComponent implements OnInit {
   }
 
   get transformation() {
-    return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    if (this.drawing) {
+      return `translate(${this.drawing.x},${this.drawing.y}) rotate(${this.drawing.rotation})`;
+    }
   }
 }

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

@@ -1,12 +1,12 @@
 <svg:ellipse
   class="ellipse_element noselect"
-  [attr.fill]="ellipse.fill"
+  [attr.fill]="ellipse?.fill"
   [attr.fill-opacity]="fill_opacity"
-  [attr.stroke]="ellipse.stroke"
+  [attr.stroke]="ellipse?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.cx]="ellipse.cx"
-  [attr.cy]="ellipse.cy"
-  [attr.rx]="ellipse.rx"
-  [attr.ry]="ellipse.ry"
+  [attr.cx]="ellipse?.cx"
+  [attr.cy]="ellipse?.cy"
+  [attr.rx]="ellipse?.rx"
+  [attr.ry]="ellipse?.ry"
 />

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

@@ -1,16 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { EllipseComponent } from './ellipse.component';
 
 describe('EllipseComponent', () => {
   let component: EllipseComponent;
   let fixture: ComponentFixture<EllipseComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [EllipseComponent]
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
+      declarations: [EllipseComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(EllipseComponent);
@@ -18,7 +19,7 @@ describe('EllipseComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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;
@@ -15,21 +15,21 @@ export class EllipseComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.ellipse.fill_opacity)) {
+    if (this.ellipse && isFinite(this.ellipse.fill_opacity)) {
       return this.ellipse.fill_opacity;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.ellipse.stroke_width)) {
+    if (this.ellipse && isFinite(this.ellipse.stroke_width)) {
       return this.ellipse.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.ellipse.stroke_dasharray) {
+    if (this.ellipse &&  this.ellipse.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.ellipse.stroke_dasharray);
     }
     return null;

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

@@ -1,6 +1,6 @@
 <svg:image
   class="image_element noselect"
-  [attr.xlink:href]="image.data"
-  [attr.width]="image.width"
-  [attr.height]="image.height"
+  [attr.xlink:href]="image?.data"
+  [attr.width]="image?.width"
+  [attr.height]="image?.height"
 />

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

@@ -1,16 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ImageComponent } from './image.component';
 
 describe('ImageComponent', () => {
   let component: ImageComponent;
   let fixture: ComponentFixture<ImageComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ImageComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ImageComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ImageComponent);
@@ -18,7 +17,7 @@ describe('ImageComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,13 +1,14 @@
-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;
+  data:any
 
   constructor() {}
 

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

@@ -1,10 +1,10 @@
 <svg:line
   class="line_element noselect"
-  [attr.stroke]="line.stroke"
-  [attr.stroke-width]="stroke_width"
+  [attr.stroke]="line?.stroke"
+  [attr.stroke-width]="stroke_width ?? ''"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.x1]="line.x1"
-  [attr.x2]="line.x2"
-  [attr.y1]="line.y1"
-  [attr.y2]="line.y2"
+  [attr.x1]="line?.x1"
+  [attr.x2]="line?.x2"
+  [attr.y1]="line?.y1"
+  [attr.y2]="line?.y2"
 />

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

@@ -1,16 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { LineComponent } from './line.component';
 
 describe('LineComponent', () => {
   let component: LineComponent;
   let fixture: ComponentFixture<LineComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
-      declarations: [LineComponent]
+      declarations: [LineComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LineComponent);
@@ -18,7 +19,7 @@ describe('LineComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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;
@@ -15,14 +15,14 @@ export class LineComponent implements OnInit {
   ngOnInit() {}
 
   get stroke_width() {
-    if (isFinite(this.line.stroke_width)) {
+    if (this.line && isFinite(this.line.stroke_width)) {
       return this.line.stroke_width;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.line.stroke_dasharray) {
+    if ( this.line && this.line.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.line.stroke_dasharray);
     }
     return null;

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

@@ -1,10 +1,12 @@
 <svg:rect
   class="rect_element noselect"
-  [attr.fill]="rect.fill"
-  [attr.fill-opacity]="fill_opacity"
-  [attr.stroke]="rect.stroke"
+  [attr.fill]="rect?.fill"
+  [attr.fill-opacity]="fill_opacity ? fill_opacity : '' "
+  [attr.stroke]="rect?.stroke"
   [attr.stroke-width]="stroke_width"
   [attr.stroke-dasharray]="stroke_dasharray"
-  [attr.width]="rect.width"
-  [attr.height]="rect.height"
+  [attr.width]="rect?.width"
+  [attr.height]="rect?.height"
+  [attr.rx]="rect?.rx"
+  [attr.ry]="rect?.ry"
 />

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

@@ -1,16 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+import { QtDasharrayFixer } from 'app/cartography/helpers/qt-dasharray-fixer';
 import { RectComponent } from './rect.component';
 
 describe('RectComponent', () => {
   let component: RectComponent;
   let fixture: ComponentFixture<RectComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [RectComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RectComponent],
+      providers:[QtDasharrayFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(RectComponent);
@@ -18,7 +19,7 @@ describe('RectComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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;
@@ -15,21 +15,21 @@ export class RectComponent implements OnInit {
   ngOnInit() {}
 
   get fill_opacity() {
-    if (isFinite(this.rect.fill_opacity)) {
-      return this.rect.fill_opacity;
+    if (this.rect && isFinite(this.rect.fill_opacity)) {
+      return this.rect.fill_opacity ? this.rect.fill_opacity : null;
     }
     return null;
   }
 
   get stroke_width() {
-    if (isFinite(this.rect.stroke_width)) {
-      return this.rect.stroke_width;
+    if (this.rect && isFinite(this.rect.stroke_width)) {
+      return this.rect.stroke_width ? this.rect.stroke_width : null;
     }
     return null;
   }
 
   get stroke_dasharray() {
-    if (this.rect.stroke_dasharray) {
+    if (this.rect && this.rect.stroke_dasharray) {
       return this.qtDasharrayFixer.fix(this.rect.stroke_dasharray);
     }
     return null;

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

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

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

@@ -1,16 +1,17 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { TextComponent } from './text.component';
 
 describe('TextComponent', () => {
   let component: TextComponent;
   let fixture: ComponentFixture<TextComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [TextComponent]
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
+      declarations: [TextComponent],
+      providers:[FontFixer]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextComponent);
@@ -18,7 +19,7 @@ describe('TextComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,28 +1,30 @@
-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;
 
   @Input('app-text') text: TextElement;
 
-  @ViewChild('text', {static: false}) textRef: ElementRef;
+  @ViewChild('text') textRef: ElementRef;
 
   lines: string[] = [];
 
   transformation = '';
 
-  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) {}
+  constructor(private fontFixer: FontFixer, private sanitizer: DomSanitizer) { }
 
   ngOnInit() {
-    this.lines = this.getLines(this.text.text);
+    if (this.text) {
+      this.lines = this.getLines(this.text.text);
+    }
   }
 
   ngDoCheck() {
@@ -30,32 +32,38 @@ export class TextComponent implements OnInit, DoCheck {
   }
 
   get style() {
-    const font = this.fontFixer.fix(this.text);
+    if (this.text) {
+      const font = this.fontFixer.fix(this.text);
 
-    const styles: string[] = [];
-    if (font.font_family) {
-      styles.push(`font-family: "${this.text.font_family}"`);
+      const styles: string[] = [];
+      if (font.font_family) {
+        styles.push(`font-family: "${this.text.font_family}"`);
+      }
+      if (font.font_size) {
+        styles.push(`font-size: ${this.text.font_size}pt`);
+      }
+      if (font.font_weight) {
+        styles.push(`font-weight: ${this.text.font_weight}`);
+      }
+      return this.sanitizer.bypassSecurityTrustStyle(styles.join('; '));
     }
-    if (font.font_size) {
-      styles.push(`font-size: ${this.text.font_size}pt`);
-    }
-    if (font.font_weight) {
-      styles.push(`font-weight: ${this.text.font_weight}`);
-    }
-    return this.sanitizer.bypassSecurityTrustStyle(styles.join('; '));
   }
 
   get textDecoration() {
-    return this.text.text_decoration;
+    if (this.text) {
+      return this.text.text_decoration;
+    }
   }
 
   calculateTransformation() {
-    const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
-    if (tspans.length > 0) {
-      const height = this.textRef.nativeElement.getBBox().height / tspans.length;
-      return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
+    if (this.textRef != undefined) {
+      const tspans = this.textRef.nativeElement.getElementsByTagName('tspan');
+      if (tspans.length > 0) {
+        const height = this.textRef.nativeElement.getBBox().height / tspans.length;
+        return `translate(${TextComponent.MARGIN}, ${height - TextComponent.MARGIN})`;
+      }
+      return '';
     }
-    return '';
   }
 
   getLines(text: string) {

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[] = [];
@@ -43,12 +42,12 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() width = 1500;
   @Input() height = 600;
 
-  @ViewChild('svg', {static: false}) svg: ElementRef;
+  @ViewChild('svg') svg: ElementRef;
 
   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,16 +1,28 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ChangeDetectorRef, ElementRef, Injectable } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
 import { InterfaceLabelComponent } from './interface-label.component';
 
-describe('InterfaceLabelComponent', () => {
+export class MockElementRef extends ElementRef {
+  constructor() { super(null || undefined); }
+  nativeElement={}
+}
+
+
+xdescribe('InterfaceLabelComponent', () => {
   let component: InterfaceLabelComponent;
   let fixture: ComponentFixture<InterfaceLabelComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [InterfaceLabelComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [InterfaceLabelComponent],
+      providers: [
+        CssFixer,
+        ChangeDetectorRef,
+        { provide: ElementRef, useValue: new MockElementRef() },
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(InterfaceLabelComponent);
@@ -18,7 +30,7 @@ describe('InterfaceLabelComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  });
 });

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

@@ -1,23 +1,23 @@
-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;
 
-  @ViewChild('textSvg', {static: false}) textRef: ElementRef;
+  @ViewChild('textSvg') textRef: ElementRef;
 
   private label = {
     x: 0,
     y: 0,
     text: '',
     style: '',
-    rotation: 0
+    rotation: 0,
   };
 
   borderSize = 5;
@@ -30,9 +30,9 @@ export class InterfaceLabelComponent implements OnInit {
     private ref: ChangeDetectorRef,
     private sanitizer: DomSanitizer,
     private cssFixer: CssFixer
-  ) {}
+  ) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   @Input('x')
   set x(value) {
@@ -89,9 +89,11 @@ export class InterfaceLabelComponent implements OnInit {
   }
 
   get transform() {
-    const bbox = this.elementRef.nativeElement.getBBox();
-    const x = this.label.x;
-    const y = this.label.y + bbox.height;
-    return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+    if (this.elementRef.nativeElement.getBBox) {
+      const bbox = this.elementRef.nativeElement.getBBox()
+      const x = this.label.x;
+      const y = this.label.y + bbox.height;
+      return `translate(${x}, ${y}) rotate(${this.label.rotation}, ${x}, ${y})`;
+    }
   }
 }

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

@@ -1,13 +1,13 @@
 <svg:g
   class="link"
-  [attr.link_id]="link.id"
-  [attr.map-source]="link.source.id"
-  [attr.map-target]="link.target.id"
+  [attr.link_id]="link?.id"
+  [attr.map-source]="link?.source?.id"
+  [attr.map-target]="link?.target?.id"
   [attr.transform]="transform"
 >
   <svg:path
     #path
-    *ngIf="link.linkType == 'ethernet'"
+    *ngIf="link?.linkType == 'ethernet'"
     class="ethernet_link"
     stroke="#000"
     stroke-width="2"
@@ -16,7 +16,7 @@
 
   <svg:path
     #path
-    *ngIf="link.linkType == 'serial'"
+    *ngIf="link?.linkType == 'serial'"
     class="serial_link"
     stroke="#B22222"
     fill="none"
@@ -24,27 +24,27 @@
     [attr.d]="d"
   />
 
-  <svg:g [app-status]="link.source.status" [direction]="'source'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.source?.status" [direction]="'source'" [path]="path" [d]="d" />
 
-  <svg:g [app-status]="link.target.status" [direction]="'target'" [path]="path" [d]="d" />
+  <svg:g [app-status]="link?.target?.status" [direction]="'target'" [path]="path" [d]="d" />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.source.x + link.nodes[0].label.x"
-    [y]="link.source.y + link.nodes[0].label.y"
-    [text]="link.nodes[0].label.text"
-    [style]="link.nodes[0].label.style"
-    [rotation]="link.nodes[0].label.rotation"
+    [x]="link?.source?.x + link?.nodes[0]?.label?.x"
+    [y]="link?.source?.y + link?.nodes[0]?.label?.y"
+    [text]="link?.nodes[0]?.label?.text"
+    [style]="link?.nodes[0]?.label?.style"
+    [rotation]="link?.nodes[0]?.label?.rotation"
   />
 
   <svg:g
     *ngIf="showInterfaceLabels"
     [app-interface-label]
-    [x]="link.target.x + link.nodes[1].label.x"
-    [y]="link.target.y + link.nodes[1].label.y"
-    [text]="link.nodes[1].label.text"
-    [style]="link.nodes[1].label.style"
-    [rotation]="link.nodes[1].label.rotation"
+    [x]="link?.target?.x + link?.nodes[1]?.label?.x"
+    [y]="link?.target?.y + link?.nodes[1]?.label?.y"
+    [text]="link?.nodes[1]?.label?.text"
+    [style]="link?.nodes[1]?.label?.style"
+    [rotation]="link?.nodes[1]?.label?.rotation"
   />
 </svg:g>

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

@@ -1,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MultiLinkCalculatorHelper } from 'app/cartography/helpers/multi-link-calculator-helper';
 import { LinkComponent } from './link.component';
 
 describe('LinkComponent', () => {
   let component: LinkComponent;
   let fixture: ComponentFixture<LinkComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [LinkComponent]
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LinkComponent],
+      providers: [
+        { provide: MultiLinkCalculatorHelper, useValue: {} }
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkComponent);
@@ -18,7 +20,7 @@ describe('LinkComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,39 +1,39 @@
 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;
   @Input('node-changed') nodeChanged: EventEmitter<Node>;
   @Input('show-interface-labels') showInterfaceLabels: boolean;
 
-  @ViewChild('path', {static: false}) path: ElementRef;
+  @ViewChild('path') path: ElementRef;
 
   private ethernetLinkStrategy = new EthernetLinkStrategy();
   private serialLinkStrategy = new SerialLinkStrategy();
 
   private nodeChangedSubscription: Subscription;
 
-  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) {}
+  constructor(private multiLinkCalculatorHelper: MultiLinkCalculatorHelper, private ref: ChangeDetectorRef) { }
 
   ngOnInit() {
     this.ref.detectChanges();
@@ -49,19 +49,21 @@ export class LinkComponent implements OnInit, OnDestroy {
   }
 
   get strategy(): LinkStrategy {
-    if (this.link.linkType === 'serial') {
+    if (this.link && this.link != undefined && this.link.linkType === 'serial') {
       return this.serialLinkStrategy;
     }
     return this.ethernetLinkStrategy;
   }
 
   get transform() {
-    const translation = this.multiLinkCalculatorHelper.linkTranslation(
-      this.link.distance,
-      this.link.source,
-      this.link.target
-    );
-    return `translate (${translation.dx}, ${translation.dy})`;
+    if (this.link) {
+      const translation = this.multiLinkCalculatorHelper.linkTranslation(
+        this.link.distance,
+        this.link.source,
+        this.link.target
+      );
+      return `translate (${translation.dx}, ${translation.dy})`;
+    }
   }
 
   get d() {

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

@@ -1,12 +1,13 @@
-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?.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],
     ];
 
     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.html

@@ -1,8 +1,8 @@
-<svg:g class="node" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
+<svg:g class="node" [attr.transform]="'translate(' + node?.x + ',' + node?.y + ')'">
   <svg:image
     #image
-    [attr.width]="node.width"
-    [attr.height]="node.height"
+    [attr.width]="node?.width"
+    [attr.height]="node?.height"
     [attr.x]="0"
     [attr.y]="0"
     [attr.xlink:href]="symbol"
@@ -11,6 +11,6 @@
     (dragged)="OnDragged($event)"
   />
   <svg:text #label class="label" [attr.style]="label_style" [attr.x]="label_x" [attr.y]="label_y">
-    {{ node.label.text }}
+    {{ node?.label?.text }}
   </svg:text>
 </svg:g>

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

@@ -1,16 +1,23 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NodesEventSource } from 'app/cartography/events/nodes-event-source';
+import { CssFixer } from 'app/cartography/helpers/css-fixer';
+import { FontFixer } from 'app/cartography/helpers/font-fixer';
 import { NodeComponent } from './node.component';
 
 describe('NodeComponent', () => {
   let component: NodeComponent;
   let fixture: ComponentFixture<NodeComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [NodeComponent]
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
+      declarations: [NodeComponent],
+      providers:[ 
+        CssFixer,
+        FontFixer,
+        NodesEventSource,
+      ]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NodeComponent);
@@ -18,7 +25,7 @@ describe('NodeComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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

@@ -1,37 +1,36 @@
 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;
 
-  @ViewChild('label', {static: false}) label: ElementRef;
-  @ViewChild('image', {static: false}) imageRef: ElementRef;
+  @ViewChild('label') label: ElementRef;
+  @ViewChild('image') imageRef: ElementRef;
 
   @Input('app-node') node: MapNode;
   @Input('symbols') symbols: Symbol[];
@@ -50,7 +49,7 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
     protected element: ElementRef,
     private cd: ChangeDetectorRef,
     private nodesEventSource: NodesEventSource
-  ) {}
+  ) { }
 
   ngOnInit() {
     // this.nodeChangedSubscription = this.nodeChanged.subscribe((node: Node) => {
@@ -86,42 +85,52 @@ export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewIni
   }
 
   get symbol(): string {
-    const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
-    if (symbol) {
-      return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+    if (this.symbols) {
+      const symbol = this.symbols.find((s: Symbol) => s.symbol_id === this.node.symbol);
+      if (symbol) {
+        return 'data:image/svg+xml;base64,' + btoa(symbol.raw);
+      }
+      // @todo; we need to have default image
+      return 'data:image/svg+xml;base64,none';
     }
-    // @todo; we need to have default image
-    return 'data:image/svg+xml;base64,none';
   }
 
   get label_style() {
-    let styles = this.cssFixer.fix(this.node.label.style);
-    styles = this.fontFixer.fixStyles(styles);
-    return this.sanitizer.bypassSecurityTrustStyle(styles);
+    if (this.node != undefined) {
+      let styles = this.cssFixer.fix(this.node.label.style);
+      styles = this.fontFixer.fixStyles(styles);
+      return this.sanitizer.bypassSecurityTrustStyle(styles);
+    }
   }
 
   get label_x(): number {
-    if (this.node.label.x === null) {
-      // center
-      const bbox = this.label.nativeElement.getBBox();
+    if (this.node != undefined) {
+      if (this.node.label.x === null) {
+        // center
+        const bbox = this.label.nativeElement.getBBox();
 
-      return -bbox.width / 2;
+        return -bbox.width / 2;
+      }
+      return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.x + NodeComponent.NODE_LABEL_MARGIN;
   }
 
   get label_y(): number {
     this.labelHeight = this.getLabelHeight();
 
-    if (this.node.label.x === null) {
-      // center
-      return -this.node.height / 2 - this.labelHeight;
+    if (this.node != undefined) {
+      if (this.node.label.x === null) {
+        // center
+        return -this.node.height / 2 - this.labelHeight;
+      }
+      return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
     }
-    return this.node.label.y + this.labelHeight - NodeComponent.NODE_LABEL_MARGIN;
   }
 
   private getLabelHeight() {
-    const bbox = this.label.nativeElement.getBBox();
-    return bbox.height;
+    if (this.label != undefined) {
+      const bbox = this.label.nativeElement.getBBox();
+      return bbox.height;
+    }
   }
 }

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

@@ -1,24 +1,24 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { SelectionComponent } from './selection.component';
 
 describe('SelectionComponent', () => {
   let component: SelectionComponent;
   let fixture: ComponentFixture<SelectionComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [SelectionComponent]
-    }).compileComponents();
-  }));
-
   beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [SelectionComponent],
+    }).compileComponents();
     fixture = TestBed.createComponent(SelectionComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
+  afterEach(() => {
+    fixture.destroy()
+  })
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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;
@@ -28,15 +28,14 @@ export class SelectionComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit() {
     const down = Observable.fromEvent(this.svg, 'mousedown').do((e: MouseEvent) => e.preventDefault());
-
     down.subscribe((e: MouseEvent) => {
       if (e.target !== this.svg) {
         return;
       }
 
       this.started = true;
-      this.startX = e.clientX + window.scrollX;
-      this.startY = e.clientY + window.scrollY;
+      this.startX = e?.clientX + window?.scrollX;
+      this.startY = e?.clientY + window?.scrollY;
       this.width = 0;
       this.height = 0;
       this.visible = true;
@@ -51,7 +50,7 @@ export class SelectionComponent implements OnInit, AfterViewInit {
 
     const scrollWindow = Observable.fromEvent(document, 'scroll').startWith({});
 
-    const move = Observable.combineLatest(mouseMove, scrollWindow);
+    const move = Observable.combineLatest([mouseMove, scrollWindow]);
 
     const drag = down.mergeMap((md: MouseEvent) => {
       return move
@@ -76,11 +75,11 @@ export class SelectionComponent implements OnInit, AfterViewInit {
             this.visible = false;
             this.started = false;
 
+            
             this.width = e.clientX - this.startX + window.scrollX;
             this.height = e.clientY - this.startY + window.scrollY;
 
             this.ref.detectChanges();
-
             this.selectedEvent([this.startX, this.startY], [this.width, this.height]);
           })
         )

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

@@ -1,16 +1,15 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { StatusComponent } from './status.component';
 
 describe('StatusComponent', () => {
   let component: StatusComponent;
   let fixture: ComponentFixture<StatusComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [StatusComponent]
+  beforeEach(async() => {
+   await TestBed.configureTestingModule({
+      declarations: [StatusComponent],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(StatusComponent);

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/link-editing/link-editing.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { select } from 'd3-selection';
+import { Subscription } from 'rxjs';
+import { LinksEventSource } from '../../events/links-event-source';
+import { MapLink } from '../../models/map/map-link';
+import { LinksWidget } from '../../widgets/links';
+
+@Component({
+  selector: 'app-link-editing',
+  templateUrl: './link-editing.component.html',
+  styleUrls: ['./link-editing.component.scss'],
+})
+export class LinkEditingComponent implements OnInit, OnDestroy {
+  private linkEditedSubscription: Subscription;
+  @Input('svg') svg: SVGSVGElement;
+
+  constructor(
+    private linksWidget: LinksWidget,
+    private linksEventSource: LinksEventSource  ) {}
+
+  ngOnInit() {
+    const svg = select(this.svg);
+    this.linkEditedSubscription = this.linksEventSource.edited.subscribe((link: MapLink) => {
+        this.linksWidget.redrawLink(svg, link);
+    });
+  }
+
+  ngOnDestroy() {
+    this.linkEditedSubscription.unsubscribe();
+  }
+}

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,16 +1,18 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SelectionManager } from 'app/cartography/managers/selection-manager';
+import { MapChangeDetectorRef } from 'app/cartography/services/map-change-detector-ref';
 import { SelectionSelectComponent } from './selection-select.component';
 
 describe('SelectionSelectComponent', () => {
   let component: SelectionSelectComponent;
   let fixture: ComponentFixture<SelectionSelectComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [SelectionSelectComponent]
+      declarations: [SelectionSelectComponent],
+      providers: [MapChangeDetectorRef,SelectionManager]
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(SelectionSelectComponent);
@@ -18,7 +20,7 @@ describe('SelectionSelectComponent', () => {
     fixture.detectChanges();
   });
 
-  // it('should create', () => {
-  //   expect(component).toBeTruthy();
-  // });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

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,24 +1,24 @@
-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 { 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;
   let fixture: ComponentFixture<TextEditorComponent>;
   let mockedLinkService: MockedLinkService = new MockedLinkService();
 
-  beforeEach(async(() => {
+  beforeEach(async() => {
     TestBed.configureTestingModule({
       imports: [NoopAnimationsModule],
       providers: [
@@ -31,11 +31,11 @@ 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();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TextEditorComponent);

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

@@ -1,35 +1,43 @@
-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 { Controller } from '../../../models/controller';
+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', {static: false}) temporaryTextElement: ElementRef;
+  @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
   @Input('svg') svg: SVGSVGElement;
-  @Input('server') server: Server;
+  @Input('controller') controller: Controller;
 
   leftPosition: string = '0px';
   topPosition: string = '0px';
@@ -73,8 +81,13 @@ 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();
+      document.documentElement.style.cursor = "default";
 
       let textListener = () => {
         this.drawingsEventSource.textAdded.emit(
@@ -113,7 +126,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,36 +138,54 @@ 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) => {
+          this.linkService.updateLink(this.controller, link).subscribe((link: Link) => {
             rootElement
               .selectAll<SVGTextElement, TextElement>('text.editingMode')
               .attr('visibility', 'visible')
@@ -177,7 +212,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 +224,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> {
@@ -16,8 +15,11 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
     mapLink.captureFilePath = link.capture_file_path;
     mapLink.capturing = link.capturing;
     mapLink.filters = link.filters;
+    mapLink.link_style = link.link_style;
     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;