ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-03 03:26:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into master-2.3

Browse Source
This commit is contained in:
piotrpekala7 2021-04-16 12:51:51 +02:00
commit 0015c09ba5
813 changed files with 28219 additions and 24962 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.appveyor.yml
View File

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

23
.circleci/config.yml
View File

@ -1,5 +1,9 @@
# iOS CircleCI 2.1 configuration file # iOS CircleCI 2.1 configuration file
version: 2.1 version: 2.1
orbs:
node: circleci/node@4.2.0
jobs: jobs:
build: build:
macos: macos:
@ -7,13 +11,16 @@ jobs:
steps: steps:
- checkout - checkout
- node/install:
install-yarn: true
- run: - run:
name: Install nodejs name: Update BREW and print configs
command: | command: |
brew update brew update
brew upgrade yarn brew analytics off
brew upgrade node brew --env
brew --config
- run: - run:
name: Set timezone and check current datetime 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 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 # 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 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 unlink python
brew uninstall --ignore-dependencies readline brew uninstall --ignore-dependencies readline
brew install readline brew install readline
@ -41,7 +50,7 @@ jobs:
brew pin readline brew pin readline
# --ignore-dependencies is used to prevent this issue: https://github.com/tensorflow/tensorflow/issues/25093 # --ignore-dependencies is used to prevent this issue: https://github.com/tensorflow/tensorflow/issues/25093
brew install --ignore-dependencies python brew install --ignore-dependencies python
brew switch python 3.6.5_1 #brew link python 3.6.5_1
brew info python brew info python
brew pin python brew pin python
@ -77,8 +86,11 @@ jobs:
name: Building gns3server name: Building gns3server
command: | command: |
python3 -V 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 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 build_exe -b dist/exe.gns3server -s
python3 scripts/build.py validate -b dist python3 scripts/build.py validate -b dist
@ -105,4 +117,3 @@ workflows:
filters: filters:
tags: tags:
only: /v.*/ only: /v.*/

4
.travis.yml
View File

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

9
README.md
View File

@ -3,7 +3,6 @@
[![Travis CI](https://api.travis-ci.org/GNS3/gns3-web-ui.svg?branch=master)](https://travis-ci.org) [![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/) [![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) [![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)
[![Dependency](https://img.shields.io/librariesio/github/GNS3/gns3-web-ui)](https://libraries.io/github/GNS3/gns3-web-ui) [![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 versions](https://repology.org/badge/latest-versions/gns3.svg)](https://repology.org/metapackage/gns3/versions)
@ -28,6 +27,14 @@ We're using [yarn](https://yarnpkg.com/lang/en/) for packages installation:
yarn install 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 #### Run GNS3 server
Visit [gns3-server](https://github.com/GNS3/gns3-server) for guide how to run GNS3 server. Visit [gns3-server](https://github.com/GNS3/gns3-server) for guide how to run GNS3 server.

21
angular.json
View File

@ -25,7 +25,12 @@
"@mattlewis92/dom-autoscroller", "@mattlewis92/dom-autoscroller",
"rxjs/Rx", "rxjs/Rx",
"rxjs/add/operator/map", "rxjs/add/operator/map",
"rxjs-compat/add/operator/map" "rxjs-compat/add/operator/map",
"angular-react-core.js",
"react",
"react-dom",
"classnames",
"stylenames"
], ],
"aot": true, "aot": true,
"outputPath": "dist", "outputPath": "dist",
@ -42,16 +47,7 @@
"node_modules/bootstrap/dist/css/bootstrap.min.css", "node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/notosans-fontface/css/notosans-fontface.min.css", "node_modules/notosans-fontface/css/notosans-fontface.min.css",
"src/styles.scss", "src/styles.scss",
{ "src/theme.scss"
"inject": true,
"input": "src/theme.scss",
"bundleName": "theme-default-dark"
},
{
"inject": true,
"input": "src/theme-light.scss",
"bundleName": "theme-default"
}
], ],
"scripts": [] "scripts": []
}, },
@ -185,9 +181,6 @@
"assets": [ "assets": [
"src/assets", "src/assets",
"src/favicon.ico" "src/favicon.ico"
],
"codeCoverageExclude": [
"src/app/cartography/components/experimental-map/**/*"
] ]
} }
}, },

3
e2e/helpers/common.po.ts
View File

@ -1,5 +1,4 @@
import { browser, by, element } from 'protractor'; import { browser } from 'protractor';
import { ServersPage } from './server.po';
export class TestHelper { export class TestHelper {
sleep(value: number) { sleep(value: number) {

4
e2e/helpers/project-map.po.ts
View File

@ -1,5 +1,5 @@
import { TestHelper } from "./common.po" import { browser, by } from 'protractor';
import { browser, by } from "protractor"; import { TestHelper } from './common.po';
export class ProjectMapPage { export class ProjectMapPage {
helper = new TestHelper(); helper = new TestHelper();

4
e2e/helpers/project.po.ts
View File

@ -1,5 +1,5 @@
import { TestHelper } from "./common.po" import { browser, by } from 'protractor';
import { browser, by } from "protractor"; import { TestHelper } from './common.po';
export class ProjectsPage { export class ProjectsPage {
helper = new TestHelper(); helper = new TestHelper();

6
e2e/helpers/server.po.ts
View File

@ -1,8 +1,8 @@
import { browser, by, element } from 'protractor'; import { browser, by } from 'protractor';
import { TestHelper } from './common.po'; import { TestHelper } from './common.po';
export class ServersPage { export class ServersPage {
helper = new TestHelper; helper = new TestHelper();
maximizeWindow() { maximizeWindow() {
browser.driver.manage().window().maximize(); browser.driver.manage().window().maximize();
@ -32,7 +32,7 @@ export class ServersPage {
this.helper.sleep(2000); this.helper.sleep(2000);
let hyperlinks = await browser.driver.findElements(by.css('a.table-link')); let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
let serverLink; let serverLink;
await this.helper.asyncForEach(hyperlinks, async element => { await this.helper.asyncForEach(hyperlinks, async (element) => {
let text = await element.getText(); let text = await element.getText();
if (text === '127.0.0.1') serverLink = element; if (text === '127.0.0.1') serverLink = element;
}); });

5
e2e/project-map.e2e-spec.ts
View File

@ -1,8 +1,7 @@
import { ServersPage } from './helpers/server.po';
import { TestHelper } from './helpers/common.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 { ProjectMapPage } from './helpers/project-map.po';
import { ProjectsPage } from './helpers/project.po';
import { ServersPage } from './helpers/server.po';
describe('Project map page', () => { describe('Project map page', () => {
let serversPage: ServersPage; let serversPage: ServersPage;

3
e2e/projects.e2e-spec.ts
View File

@ -1,7 +1,6 @@
import { ServersPage } from './helpers/server.po';
import { TestHelper } from './helpers/common.po'; import { TestHelper } from './helpers/common.po';
import { element } from 'protractor';
import { ProjectsPage } from './helpers/project.po'; import { ProjectsPage } from './helpers/project.po';
import { ServersPage } from './helpers/server.po';
describe('Projects page', () => { describe('Projects page', () => {
let serversPage: ServersPage; let serversPage: ServersPage;

5
e2e/servers.e2e-spec.ts
View File

@ -1,6 +1,5 @@
import { ServersPage } from './helpers/server.po';
import { TestHelper } from './helpers/common.po'; import { TestHelper } from './helpers/common.po';
import { element } from 'protractor'; import { ServersPage } from './helpers/server.po';
describe('Servers page', () => { describe('Servers page', () => {
let page: ServersPage; let page: ServersPage;
@ -33,7 +32,7 @@ describe('Servers page', () => {
// act // act
let firstRowOfServersTable = await page.checkServersTable(); let firstRowOfServersTable = await page.checkServersTable();
let serverData = []; let serverData = [];
await helper.asyncForEach(firstRowOfServersTable, async element => { await helper.asyncForEach(firstRowOfServersTable, async (element) => {
serverData.push(await element.getText()); serverData.push(await element.getText());
}); });

119
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "gns3-web-ui", "name": "gns3-web-ui",
"version": "2.2.18dev", "version": "2.2.21dev",
"author": { "author": {
"name": "GNS3 Technology Inc.", "name": "GNS3 Technology Inc.",
"email": "developers@gns3.com" "email": "developers@gns3.com"
@ -17,6 +17,7 @@
"start": "ng serve", "start": "ng serve",
"startforelectron": "ng serve --configuration=electronDev", "startforelectron": "ng serve --configuration=electronDev",
"build": "ng build", "build": "ng build",
"buildforproduction": "ng build --source-map=false --build-optimizer --configuration=production --base-href /static/web-ui/",
"buildforelectron": "ng build --configuration=electronProd", "buildforelectron": "ng build --configuration=electronProd",
"buildforgithub": "ng build --configuration=githubProd", "buildforgithub": "ng build --configuration=githubProd",
"test": "ng test", "test": "ng test",
@ -40,93 +41,103 @@
}, },
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "^11.0.8", "@angular-react/core": "^3.0.0",
"@angular/cdk": "^11.0.3", "@angular-react/fabric": "^3.0.0",
"@angular/common": "^11.0.8", "@angular/animations": "^11.2.8",
"@angular/compiler": "^11.0.8", "@angular/cdk": "^11.2.7",
"@angular/core": "^11.0.8", "@angular/common": "^11.2.8",
"@angular/forms": "^11.0.8", "@angular/compiler": "^11.2.8",
"@angular/core": "^11.2.8",
"@angular/forms": "^11.2.8",
"@angular/http": "^7.2.16", "@angular/http": "^7.2.16",
"@angular/material": "^11.0.3", "@angular/material": "^11.2.7",
"@angular/platform-browser": "^11.0.8", "@angular/platform-browser": "^11.2.8",
"@angular/platform-browser-dynamic": "^11.0.8", "@angular/platform-browser-dynamic": "^11.2.8",
"@angular/router": "^11.0.8", "@angular/router": "^11.2.8",
"@sentry/browser": "^5.29.2", "@sentry/browser": "^6.2.5",
"@types/jest": "^26.0.20", "@types/jest": "^26.0.22",
"@types/mocha": "^8.2.0", "@types/mocha": "^8.2.2",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"angular-draggable-droppable": "^4.6.0", "angular-draggable-droppable": "^4.6.0",
"angular-persistence": "^1.0.1", "angular-persistence": "^1.0.1",
"angular-resizable-element": "^3.3.4", "angular-resizable-element": "^3.3.5",
"angular2-draggable": "^2.3.2", "angular2-draggable": "^2.3.2",
"angular2-hotkeys": "^2.2.0", "angular2-hotkeys": "^2.2.0",
"angular2-indexeddb": "^1.2.3", "angular2-indexeddb": "^1.2.3",
"bootstrap": "^4.5.3", "bootstrap": "^4.6.0",
"command-exists": "^1.2.9", "command-exists": "^1.2.9",
"core-js": "^3.8.2",
"d3-ng2-service": "^2.1.0",
"marked": "^1.1.1", "marked": "^1.1.1",
"core-js": "^3.10.0",
"d3-ng2-service": "^2.2.0",
"eev": "^0.1.5",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"ini": "^1.3.8", "ini": "^2.0.0",
"material-design-icons": "^3.0.1", "material-design-icons": "^3.0.1",
"ng-circle-progress": "^1.6.0", "ng-circle-progress": "^1.6.0",
"ng2-file-upload": "^1.3.0", "ng2-file-upload": "^1.4.0",
"ngx-childprocess": "^0.0.6", "ngx-childprocess": "^0.0.6",
"ngx-device-detector": "^2.0.5", "ngx-device-detector": "^2.0.6",
"ngx-electron": "^2.1.1", "ngx-electron": "^2.2.0",
"node-fetch": "^2.6.1", "node-fetch": "^2.6.1",
"notosans-fontface": "1.2.2", "notosans-fontface": "1.2.2",
"rxjs": "^6.6.3", "office-ui-fabric-react": "^7.166.0",
"rxjs-compat": "^6.6.3", "prettier-plugin-organize-imports": "^1.1.1",
"save-html-as-image": "^1.3.4", "react": "^17.0.2",
"save-svg-as-png": "^1.4.14", "react-bootstrap": "^1.5.2",
"schematics-scss-migrate": "^1.2.10", "react-dom": "^17.0.2",
"snyk": "^1.437.3", "rxjs": "^6.6.7",
"rxjs-compat": "^6.6.7",
"save-html-as-image": "^1.5.2",
"save-svg-as-png": "^1.4.17",
"schematics-scss-migrate": "^1.3.13",
"snyk": "^1.528.0",
"spark-md5": "^3.0.1", "spark-md5": "^3.0.1",
"svg-crowbar": "^0.6.5", "svg-crowbar": "^0.6.5",
"tree-kill": "^1.2.1", "tree-kill": "^1.2.2",
"tslib": "^2.1.0", "tslib": "^2.2.0",
"typeface-roboto": "^1.1.13", "typeface-roboto": "^1.1.13",
"xterm": "^4.9.0", "xterm": "^4.11.0",
"xterm-addon-attach": "^0.6.0", "xterm-addon-attach": "^0.6.0",
"xterm-addon-fit": "^0.4.0", "xterm-addon-fit": "^0.5.0",
"yargs": "^16.2.0", "yargs": "^16.2.0",
"zone.js": "^0.11.3" "zone.js": "^0.11.4"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "^0.1100.6", "@angular-devkit/build-angular": "^0.1102.7",
"@angular/cli": "^11.0.6", "@angular/cli": "^11.2.7",
"@angular/compiler-cli": "^11.0.8", "@angular/compiler-cli": "^11.2.8",
"@angular/language-service": "^11.0.8", "@angular/language-service": "^11.2.8",
"@sentry/cli": "^1.61.0", "@sentry/cli": "^1.63.2",
"@sentry/electron": "^2.1.0", "@sentry/electron": "^2.4.0",
"@types/jasmine": "~3.6.0", "@types/jasmine": "~3.6.9",
"@types/jasminewd2": "^2.0.8", "@types/jasminewd2": "^2.0.8",
"@types/node": "14.14.10", "@types/node": "14.14.37",
"codelyzer": "^6.0.0", "codelyzer": "^6.0.1",
"electron": "^11.2.0", "electron": "^12.0.2",
"electron-builder": "22.9.1", "electron-builder": "22.10.5",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"jasmine-core": "~3.6.0", "jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~5.0.0", "jasmine-spec-reporter": "~6.0.0",
"jquery": "^3.5.1", "jquery": "^3.6.0",
"karma": "^5.2.3", "karma": "^6.3.2",
"karma-chrome-launcher": "~3.1.0", "karma-chrome-launcher": "~3.1.0",
"karma-cli": "^2.0.0", "karma-cli": "^2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2", "karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.0", "karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.5.0", "karma-jasmine-html-reporter": "^1.5.4",
"license-checker": "^25.0.1", "license-checker": "^25.0.1",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"protractor": "^7.0.0", "protractor": "^7.0.0",
"replace": "^1.2.0", "replace": "^1.2.1",
"rxjs-tslint": "^0.1.8", "rxjs-tslint": "^0.1.8",
"ts-mockito": "^2.6.1", "ts-mockito": "^2.6.1",
"ts-node": "~9.0.0", "ts-node": "~9.1.1",
"tslint": "^6.1.3", "tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0", "tslint-config-prettier": "^1.18.0",
"typescript": "4.0.2", "typescript": "4.0.2",
"webpack": "4.44.2", "webpack": "5.31.0",
"yarn-upgrade-all": "^0.5.4" "yarn-upgrade-all": "^0.5.4"
}, },
"greenkeeper": { "greenkeeper": {

2
scripts/build.py
View File

@ -237,6 +237,8 @@ def download_command(arguments):
if platform.system() == "Windows": if platform.system() == "Windows":
requirements = 'win-requirements.txt' requirements = 'win-requirements.txt'
elif platform.system() == "Darwin":
requirements = 'mac-requirements.txt'
else: else:
requirements = 'requirements.txt' requirements = 'requirements.txt'

13
scripts/requirements.txt
View File

@ -1,9 +1,6 @@
setuptools==40.8.0 setuptools==54.2.0
cx_Freeze==5.1.1 cx_Freeze==5.1.1
requests==2.21.0 requests==2.25.1
packaging==19.0 packaging==20.9
appdirs==1.4.3 appdirs==1.4.4
psutil==5.6.7 psutil==5.8.0
jsonschema==2.6.0 # lock down jsonschema, 3.0 makes problems
urllib3>=1.25.9 # not directly required, pinned by Snyk to avoid a vulnerability

2
src/ReleaseNotes.txt
View File

@ -1,5 +1,7 @@
GNS3 WebUI is web implementation of user interface for GNS3 software. GNS3 WebUI is web implementation of user interface for GNS3 software.
Current version: 2.2.19
Current version: 2020.4.0-beta.1 Current version: 2020.4.0-beta.1
Bug Fixes & enhancements Bug Fixes & enhancements

188
src/app/app-routing.module.ts
View File

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

4
src/app/app.component.html
View File

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

8
src/app/app.component.scss
View File

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

16
src/app/app.component.spec.ts
View File

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

43
src/app/app.component.ts
View File

@ -1,19 +1,23 @@
import { Component, OnInit } from '@angular/core'; import { OverlayContainer } from '@angular/cdk/overlay';
import { Component, HostBinding, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/icon'; import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
import { ElectronService } from 'ngx-electron'; import { ElectronService } from 'ngx-electron';
import { ProgressService } from './common/progress/progress.service';
import { SettingsService } from './services/settings.service'; import { SettingsService } from './services/settings.service';
import { ThemeService } from './services/theme.service'; import { ThemeService } from './services/theme.service';
import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { ProgressService } from './common/progress/progress.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'] styleUrls: ['./app.component.scss'],
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
public darkThemeEnabled: boolean = false;
constructor( constructor(
private overlayContainer: OverlayContainer,
iconReg: MatIconRegistry, iconReg: MatIconRegistry,
sanitizer: DomSanitizer, sanitizer: DomSanitizer,
private settingsService: SettingsService, private settingsService: SettingsService,
@ -30,28 +34,39 @@ export class AppComponent implements OnInit {
}); });
} }
@HostBinding('class') componentCssClass;
ngOnInit(): void { ngOnInit(): void {
if (this.electronService.isElectronApp) { if (this.electronService.isElectronApp) {
this.settingsService.subscribe(settings => { this.settingsService.subscribe((settings) => {
this.electronService.ipcRenderer.send('settings.changed', settings); this.electronService.ipcRenderer.send('settings.changed', settings);
}); });
} }
let theme = localStorage.getItem('theme');
if (theme === 'light') { this.applyTheme(this.themeService.savedTheme + '-theme');
this.themeService.setDarkMode(false); this.themeService.themeChanged.subscribe((event: string) => {
} else { this.applyTheme(event);
this.themeService.setDarkMode(true); });
} }
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 { checkEvent(routerEvent): void {
if (routerEvent instanceof NavigationStart) { if (routerEvent instanceof NavigationStart) {
this.progressService.activate(); this.progressService.activate();
} } else if (
routerEvent instanceof NavigationEnd ||
else if (routerEvent instanceof NavigationEnd ||
routerEvent instanceof NavigationCancel || routerEvent instanceof NavigationCancel ||
routerEvent instanceof NavigationError) { routerEvent instanceof NavigationError
) {
this.progressService.deactivate(); this.progressService.deactivate();
} }
} }

502
src/app/app.module.ts
View File

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

10
src/app/cartography/angular-map.imports.ts
View File

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

87
src/app/cartography/cartography.module.ts
View File

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

32
src/app/cartography/components/d3-map/d3-map.component.html
View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

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

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

78
src/app/cartography/components/d3-map/d3-map.component.ts
View File

@ -7,38 +7,35 @@ import {
OnDestroy, OnDestroy,
OnInit, OnInit,
SimpleChange, SimpleChange,
EventEmitter, ViewChild,
Output,
ViewChild
} from '@angular/core'; } from '@angular/core';
import { Selection, select } from 'd3-selection'; import { select, Selection } from 'd3-selection';
import { GraphLayout } from '../../widgets/graph-layout';
import { Context } from '../../models/context';
import { Size } from '../../models/size';
import { Subscription } from 'rxjs'; 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 { Link } from '../../../models/link';
import { Drawing } from '../../models/drawing'; import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { Symbol } from '../../../models/symbol'; import { 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 { GraphDataManager } from '../../managers/graph-data-manager';
import { MapSettingsManager } from '../../managers/map-settings-manager'; import { MapSettingsManager } from '../../managers/map-settings-manager';
import { Server } from '../../../models/server'; import { Context } from '../../models/context';
import { ToolsService } from '../../../services/tools.service'; 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 { 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({ @Component({
selector: 'app-d3-map', selector: 'app-d3-map',
templateUrl: './d3-map.component.html', templateUrl: './d3-map.component.html',
styleUrls: ['./d3-map.component.scss'] styleUrls: ['./d3-map.component.scss'],
}) })
export class D3MapComponent implements OnInit, OnChanges, OnDestroy { export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() nodes: Node[] = []; @Input() nodes: Node[] = [];
@ -60,7 +57,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
private drawLinkTool: boolean; private drawLinkTool: boolean;
protected settings = { protected settings = {
show_interface_labels: true show_interface_labels: true,
}; };
public gridVisibility: number = 0; public gridVisibility: number = 0;
@ -108,7 +105,13 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
if (val) { if (val) {
this.svg.attr('height', window.innerHeight + window.scrollY - 16); this.svg.attr('height', window.innerHeight + window.scrollY - 16);
} else { } else {
let heightOfProjectWindow = window.innerHeight - 16;
if (this.height > heightOfProjectWindow) {
this.svg.attr('height', this.height); this.svg.attr('height', this.height);
} else {
this.svg.attr('height', heightOfProjectWindow);
}
} }
} }
@ -142,9 +145,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
} }
}); });
this.subscriptions.push( this.subscriptions.push(this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw()));
this.mapScaleService.scaleChangeEmitter.subscribe((value: number) => this.redraw())
);
this.subscriptions.push( this.subscriptions.push(
this.toolsService.isMovingToolActivated.subscribe((value: boolean) => { this.toolsService.isMovingToolActivated.subscribe((value: boolean) => {
@ -166,7 +167,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
); );
this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0; this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0;
this.mapSettingsService.isScrollDisabled.subscribe(val => this.resize(val)); this.mapSettingsService.isScrollDisabled.subscribe((val) => this.resize(val));
} }
ngOnDestroy() { ngOnDestroy() {
@ -184,10 +185,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
public createGraph(domElement: HTMLElement) { public createGraph(domElement: HTMLElement) {
const rootElement = select(domElement); const rootElement = select(domElement);
this.svg = rootElement.select<SVGSVGElement>('svg'); this.svg = rootElement.select<SVGSVGElement>('svg');
this.graphLayout.connect( this.graphLayout.connect(this.svg, this.context);
this.svg,
this.context
);
this.graphLayout.draw(this.svg, this.context); this.graphLayout.draw(this.svg, this.context);
this.mapChangeDetectorRef.hasBeenDrawn = true; this.mapChangeDetectorRef.hasBeenDrawn = true;
} }
@ -221,11 +219,23 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
} }
updateGrid() { 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)
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)); 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)
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)); 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']) @HostListener('window:resize', ['$event'])

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

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

94
src/app/cartography/components/draggable-selection/draggable-selection.component.ts
View File

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

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

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

16
src/app/cartography/components/drawing-adding/drawing-adding.component.ts
View File

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

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

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

12
src/app/cartography/components/drawing-resizing/drawing-resizing.component.ts
View File

@ -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 { Subscription } from 'rxjs';
import { DrawingsEventSource } from '../../events/drawings-event-source'; 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 { ResizedDataEvent } from '../../events/event-source';
import { ResizingEnd } from '../../events/resizing'; import { ResizingEnd } from '../../events/resizing';
import { MapDrawing } from '../../models/map/map-drawing';
import { DrawingsWidget } from '../../widgets/drawings';
@Component({ @Component({
selector: 'app-drawing-resizing', selector: 'app-drawing-resizing',
template: ` template: ` <ng-content></ng-content> `,
<ng-content></ng-content> styleUrls: ['./drawing-resizing.component.scss'],
`,
styleUrls: ['./drawing-resizing.component.scss']
}) })
export class DrawingResizingComponent implements OnInit, OnDestroy { export class DrawingResizingComponent implements OnInit, OnDestroy {
resizingFinished: Subscription; resizingFinished: Subscription;

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

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

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

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

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

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

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

@ -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 { EllipseElement } from '../../../models/drawings/ellipse-element';
import { ImageElement } from '../../../models/drawings/image-element'; import { ImageElement } from '../../../models/drawings/image-element';
import { LineElement } from '../../../models/drawings/line-element'; import { LineElement } from '../../../models/drawings/line-element';
import { RectElement } from '../../../models/drawings/rect-element'; import { RectElement } from '../../../models/drawings/rect-element';
import { TextElement } from '../../../models/drawings/text-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 { MapDrawing } from '../../../models/map/map-drawing';
import { DrawingsEventSource } from '../../../events/drawings-event-source';
@Component({ @Component({
selector: '[app-drawing]', selector: '[app-drawing]',
templateUrl: './drawing.component.html', templateUrl: './drawing.component.html',
styleUrls: ['./drawing.component.scss'] styleUrls: ['./drawing.component.scss'],
}) })
export class DrawingComponent implements OnInit { export class DrawingComponent implements OnInit {
@Input('app-drawing') drawing: MapDrawing; @Input('app-drawing') drawing: MapDrawing;

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

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

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

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

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

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

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

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

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

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

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

@ -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 { QtDasharrayFixer } from '../../../../../helpers/qt-dasharray-fixer';
import { LineElement } from '../../../../../models/drawings/line-element'; import { LineElement } from '../../../../../models/drawings/line-element';
@Component({ @Component({
selector: '[app-line]', selector: '[app-line]',
templateUrl: './line.component.html', templateUrl: './line.component.html',
styleUrls: ['./line.component.scss'] styleUrls: ['./line.component.scss'],
}) })
export class LineComponent implements OnInit { export class LineComponent implements OnInit {
@Input('app-line') line: LineElement; @Input('app-line') line: LineElement;

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

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

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

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

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

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

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

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

25
src/app/cartography/components/experimental-map/experimental-map.component.ts
View File

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

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

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

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

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

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

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

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

@ -1,25 +1,25 @@
import { import {
ChangeDetectorRef,
Component, Component,
OnInit,
Input,
ViewChild,
ElementRef, ElementRef,
EventEmitter, EventEmitter,
ChangeDetectorRef, Input,
OnDestroy OnDestroy,
OnInit,
ViewChild,
} from '@angular/core'; } from '@angular/core';
import { Subscription } from 'rxjs'; 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 { MultiLinkCalculatorHelper } from '../../../helpers/multi-link-calculator-helper';
import { Node } from '../../../models/node';
import { MapLink } from '../../../models/map/map-link'; 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({ @Component({
selector: '[app-link]', selector: '[app-link]',
templateUrl: './link.component.html', templateUrl: './link.component.html',
styleUrls: ['./link.component.scss'] styleUrls: ['./link.component.scss'],
}) })
export class LinkComponent implements OnInit, OnDestroy { export class LinkComponent implements OnInit, OnDestroy {
@Input('app-link') link: MapLink; @Input('app-link') link: MapLink;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,9 +1,9 @@
import { Component, ElementRef, Input, ChangeDetectorRef } from '@angular/core'; import { ChangeDetectorRef, Component, ElementRef, Input } from '@angular/core';
@Component({ @Component({
selector: '[app-status]', selector: '[app-status]',
templateUrl: './status.component.html', templateUrl: './status.component.html',
styleUrls: ['./status.component.scss'] styleUrls: ['./status.component.scss'],
}) })
export class StatusComponent { export class StatusComponent {
static STOPPED_STATUS_RECT_WIDTH = 10; static STOPPED_STATUS_RECT_WIDTH = 10;
@ -12,7 +12,7 @@ export class StatusComponent {
status: '', status: '',
path: null, path: null,
direction: null, direction: null,
d: null d: null,
}; };
constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {} constructor(protected element: ElementRef, private ref: ChangeDetectorRef) {}

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

@ -1,14 +1,13 @@
import { fakeAsync, tick } from '@angular/core/testing'; import { fakeAsync, tick } from '@angular/core/testing';
import { instance, mock, when } from 'ts-mockito';
import { SelectionControlComponent } from './selection-control.component';
import { SelectionManager } from '../../managers/selection-manager';
import { SelectionEventSource } from '../../events/selection-event-source'; 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 { 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 { Rectangle } from '../../models/rectangle';
import { SelectionControlComponent } from './selection-control.component';
describe('SelectionControlComponent', () => { describe('SelectionControlComponent', () => {
let component: SelectionControlComponent; let component: SelectionControlComponent;

26
src/app/cartography/components/selection-control/selection-control.component.ts
View File

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

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

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

9
src/app/cartography/components/selection-select/selection-select.component.ts
View File

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

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

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

112
src/app/cartography/components/text-editor/text-editor.component.ts
View File

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

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

@ -1,8 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { Drawing } from '../../models/drawing'; import { Drawing } from '../../models/drawing';
import { MapDrawing } from '../../models/map/map-drawing'; import { MapDrawing } from '../../models/map/map-drawing';
import { Converter } from '../converter';
@Injectable() @Injectable()
export class DrawingToMapDrawingConverter implements Converter<Drawing, MapDrawing> { export class DrawingToMapDrawingConverter implements Converter<Drawing, MapDrawing> {

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

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

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

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { LabelToMapLabelConverter } from './label-to-map-label-converter';
import { LinkNode } from '../../../models/link-node'; import { LinkNode } from '../../../models/link-node';
import { MapLinkNode } from '../../models/map/map-link-node'; import { MapLinkNode } from '../../models/map/map-link-node';
import { Converter } from '../converter';
import { LabelToMapLabelConverter } from './label-to-map-label-converter';
@Injectable() @Injectable()
export class LinkNodeToMapLinkNodeConverter implements Converter<LinkNode, MapLinkNode> { export class LinkNodeToMapLinkNodeConverter implements Converter<LinkNode, MapLinkNode> {

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

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { LinkNodeToMapLinkNodeConverter } from './link-node-to-map-link-node-converter';
import { Link } from '../../../models/link'; import { Link } from '../../../models/link';
import { MapLink } from '../../models/map/map-link'; import { MapLink } from '../../models/map/map-link';
import { Converter } from '../converter';
import { LinkNodeToMapLinkNodeConverter } from './link-node-to-map-link-node-converter';
@Injectable() @Injectable()
export class LinkToMapLinkConverter implements Converter<Link, MapLink> { export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
@ -17,7 +16,9 @@ export class LinkToMapLinkConverter implements Converter<Link, MapLink> {
mapLink.capturing = link.capturing; mapLink.capturing = link.capturing;
mapLink.filters = link.filters; mapLink.filters = link.filters;
mapLink.linkType = link.link_type; 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.projectId = link.project_id;
mapLink.suspend = link.suspend; mapLink.suspend = link.suspend;
return mapLink; return mapLink;

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

@ -1,8 +1,7 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { Drawing } from '../../models/drawing'; import { Drawing } from '../../models/drawing';
import { MapDrawing } from '../../models/map/map-drawing'; import { MapDrawing } from '../../models/map/map-drawing';
import { Converter } from '../converter';
@Injectable() @Injectable()
export class MapDrawingToDrawingConverter implements Converter<MapDrawing, Drawing> { export class MapDrawingToDrawingConverter implements Converter<MapDrawing, Drawing> {

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

@ -1,11 +1,10 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { MapDrawing } from '../../models/map/map-drawing';
import { RectElement } from '../../models/drawings/rect-element';
import { EllipseElement } from '../../models/drawings/ellipse-element'; import { EllipseElement } from '../../models/drawings/ellipse-element';
import { LineElement } from '../../models/drawings/line-element'; import { LineElement } from '../../models/drawings/line-element';
import { RectElement } from '../../models/drawings/rect-element';
import { TextElement } from '../../models/drawings/text-element'; import { TextElement } from '../../models/drawings/text-element';
import { MapDrawing } from '../../models/map/map-drawing';
import { Converter } from '../converter';
@Injectable() @Injectable()
export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> { export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
@ -15,27 +14,13 @@ export class MapDrawingToSvgConverter implements Converter<MapDrawing, string> {
let elem = ``; let elem = ``;
if (mapDrawing.element instanceof RectElement) { if (mapDrawing.element instanceof RectElement) {
elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${ elem = `<rect fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
mapDrawing.element.height
}\" width=\"${mapDrawing.element.width}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${
mapDrawing.element.stroke_width
}\" />`;
} else if (mapDrawing.element instanceof EllipseElement) { } else if (mapDrawing.element instanceof EllipseElement) {
elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${ elem = `<ellipse fill=\"${mapDrawing.element.fill}\" fill-opacity=\"${mapDrawing.element.fill_opacity}\" cx=\"${mapDrawing.element.cx}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
mapDrawing.element.cx
}\" cy=\"${mapDrawing.element.cy}\" rx=\"${mapDrawing.element.rx}\" ry=\"${mapDrawing.element.ry}\" stroke=\"${
mapDrawing.element.stroke
}\" stroke-width=\"${mapDrawing.element.stroke_width}\" />`;
} else if (mapDrawing.element instanceof LineElement) { } else if (mapDrawing.element instanceof LineElement) {
elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${ elem = `<line stroke=\"${mapDrawing.element.stroke}\" stroke-width=\"${mapDrawing.element.stroke_width}\" x1=\"${mapDrawing.element.x1}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
mapDrawing.element.x1
}\" x2=\"${mapDrawing.element.x2}\" y1=\"${mapDrawing.element.y1}\" y2=\"${mapDrawing.element.y2}\" />`;
} else if (mapDrawing.element instanceof TextElement) { } else if (mapDrawing.element instanceof TextElement) {
elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${ elem = `<text fill=\"${mapDrawing.element.fill}\" fill-opacity=\"1.0\" font-family=\"${mapDrawing.element.font_family}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${mapDrawing.element.text}</text>`;
mapDrawing.element.font_family
}\" font-size=\"${mapDrawing.element.font_size}\" font-weight=\"${mapDrawing.element.font_weight}\">${
mapDrawing.element.text
}</text>`;
} else return ''; } else return '';
return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`; return `<svg height=\"${mapDrawing.element.height}\" width=\"${mapDrawing.element.width}\">${elem}</svg>`;

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

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

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

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

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

@ -1,9 +1,8 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { Converter } from '../converter';
import { MapLinkNodeToLinkNodeConverter } from './map-link-node-to-link-node-converter';
import { Link } from '../../../models/link'; import { Link } from '../../../models/link';
import { MapLink } from '../../models/map/map-link'; import { MapLink } from '../../models/map/map-link';
import { Converter } from '../converter';
import { MapLinkNodeToLinkNodeConverter } from './map-link-node-to-link-node-converter';
@Injectable() @Injectable()
export class MapLinkToLinkConverter implements Converter<MapLink, Link> { export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
@ -17,7 +16,7 @@ export class MapLinkToLinkConverter implements Converter<MapLink, Link> {
link.capturing = mapLink.capturing; link.capturing = mapLink.capturing;
link.filters = mapLink.filters; link.filters = mapLink.filters;
link.link_type = mapLink.linkType; link.link_type = mapLink.linkType;
link.nodes = mapLink.nodes.map(mapLinkNode => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode)); link.nodes = mapLink.nodes.map((mapLinkNode) => this.mapLinkNodeToMapLinkNode.convert(mapLinkNode));
link.project_id = mapLink.projectId; link.project_id = mapLink.projectId;
link.suspend = mapLink.suspend; link.suspend = mapLink.suspend;
return link; return link;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -14,7 +14,7 @@ describe('StylesToFontConverter', () => {
const expectedFont: Font = { const expectedFont: Font = {
font_family: 'TypeWriter', font_family: 'TypeWriter',
font_size: 10, font_size: 10,
font_weight: 'bold' font_weight: 'bold',
}; };
expect(converter.convert(styles)).toEqual(expectedFont); expect(converter.convert(styles)).toEqual(expectedFont);

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

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

28
src/app/cartography/d3-map.imports.ts
View File

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

6
src/app/cartography/datasources/datasource.ts
View File

@ -20,7 +20,7 @@ export abstract class DataSource<T> {
} }
public set(data: T[]) { public set(data: T[]) {
data.forEach(item => { data.forEach((item) => {
const index = this.findIndex(item); const index = this.findIndex(item);
if (index >= 0) { if (index >= 0) {
const updated = Object.assign(this.data[index], item); const updated = Object.assign(this.data[index], item);
@ -31,9 +31,9 @@ export abstract class DataSource<T> {
}); });
const toRemove = this.data.filter( const toRemove = this.data.filter(
item => data.filter(i => this.getItemKey(i) === this.getItemKey(item)).length === 0 (item) => data.filter((i) => this.getItemKey(i) === this.getItemKey(item)).length === 0
); );
toRemove.forEach(item => this.remove(item)); toRemove.forEach((item) => this.remove(item));
this.dataChange.next(this.data); this.dataChange.next(this.data);
} }

2
src/app/cartography/datasources/drawings-datasource.spec.ts
View File

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

3
src/app/cartography/datasources/drawings-datasource.ts
View File

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

2
src/app/cartography/datasources/links-datasource.spec.ts
View File

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

3
src/app/cartography/datasources/links-datasource.ts
View File

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

10
src/app/cartography/datasources/map-datasource.ts
View File

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

2
src/app/cartography/datasources/nodes-datasource.spec.ts
View File

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

1
src/app/cartography/datasources/nodes-datasource.ts
View File

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

2
src/app/cartography/datasources/symbols-datasource.spec.ts
View File

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

3
src/app/cartography/datasources/symbols-datasource.ts
View File

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

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

@ -1,12 +1,14 @@
import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Context } from '../models/context';
import { MovingEventSource } from '../events/moving-event-source';
import { MovingCanvasDirective } from './moving-canvas.directive';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
import { MovingCanvasDirective } from './moving-canvas.directive';
@Component({ @Component({
template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>` template: `<svg #svg class="map" preserveAspectRatio="none" movingCanvas>
<g class="canvas" transform="translate(0, 0) scale(1)"></g>
</svg>`,
}) })
class DummyComponent { class DummyComponent {
constructor() {} constructor() {}
@ -22,9 +24,9 @@ describe('MovingCanvasDirective', () => {
imports: [NoopAnimationsModule], imports: [NoopAnimationsModule],
providers: [ providers: [
{ provide: MovingEventSource, useValue: movingEventSource }, { provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context } { provide: Context, useClass: Context },
], ],
declarations: [DummyComponent, MovingCanvasDirective] declarations: [DummyComponent, MovingCanvasDirective],
}).compileComponents(); }).compileComponents();
})); }));
@ -44,21 +46,25 @@ describe('MovingCanvasDirective', () => {
let xMovement: number = 200; let xMovement: number = 200;
let yMovement: number = 200; let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', { canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true, bubbles: true,
clientX: 0, clientX: 0,
clientY: 0, clientY: 0,
screenY: 0, screenY: 0,
screenX: 0, screenX: 0,
view: window view: window,
})); })
);
tick(); tick();
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: xMovement, movementX: xMovement,
movementY: yMovement movementY: yMovement,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
@ -67,21 +73,25 @@ describe('MovingCanvasDirective', () => {
it('should not move canvas if moving mode is not activated', fakeAsync(() => { it('should not move canvas if moving mode is not activated', fakeAsync(() => {
const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas'); const canvas: HTMLElement = fixture.debugElement.nativeElement.querySelector('.canvas');
canvas.dispatchEvent(new MouseEvent('mousedown', { canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true, bubbles: true,
clientX: 0, clientX: 0,
clientY: 0, clientY: 0,
screenY: 0, screenY: 0,
screenX: 0, screenX: 0,
view: window view: window,
})); })
);
tick(); tick();
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: 1000, movementX: 1000,
movementY: 1000 movementY: 1000,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)'); expect(canvas.getAttribute('transform')).toEqual('translate(0, 0) scale(1)');
@ -93,38 +103,46 @@ describe('MovingCanvasDirective', () => {
let xMovement: number = 200; let xMovement: number = 200;
let yMovement: number = 200; let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', { canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true, bubbles: true,
clientX: 0, clientX: 0,
clientY: 0, clientY: 0,
screenY: 0, screenY: 0,
screenX: 0, screenX: 0,
view: window view: window,
})); })
);
tick(); tick();
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: xMovement, movementX: xMovement,
movementY: yMovement movementY: yMovement,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
canvas.dispatchEvent(new MouseEvent('mouseup', { canvas.dispatchEvent(
new MouseEvent('mouseup', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: 1000, movementX: 1000,
movementY: 1000 movementY: 1000,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: xMovement, movementX: xMovement,
movementY: yMovement movementY: yMovement,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
@ -136,32 +154,38 @@ describe('MovingCanvasDirective', () => {
let xMovement: number = 200; let xMovement: number = 200;
let yMovement: number = 200; let yMovement: number = 200;
canvas.dispatchEvent(new MouseEvent('mousedown', { canvas.dispatchEvent(
new MouseEvent('mousedown', {
bubbles: true, bubbles: true,
clientX: 0, clientX: 0,
clientY: 0, clientY: 0,
screenY: 0, screenY: 0,
screenX: 0, screenX: 0,
view: window view: window,
})); })
);
tick(); tick();
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: xMovement, movementX: xMovement,
movementY: yMovement movementY: yMovement,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);
movingEventSource.movingModeState.emit(false); movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new MouseEvent('mousemove', { canvas.dispatchEvent(
new MouseEvent('mousemove', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
movementX: 1000, movementX: 1000,
movementY: 1000 movementY: 1000,
} as MouseEventInit)); } as MouseEventInit)
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(${xMovement}, ${yMovement}) scale(1)`);

30
src/app/cartography/directives/moving-canvas.directive.ts
View File

@ -1,8 +1,8 @@
import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core' import { Directive, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
import { select } from 'd3-selection';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { MovingEventSource } from '../events/moving-event-source'; import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context'; import { Context } from '../models/context';
import { select } from 'd3-selection';
@Directive({ @Directive({
selector: '[movingCanvas]', selector: '[movingCanvas]',
@ -13,11 +13,7 @@ export class MovingCanvasDirective implements OnInit, OnDestroy {
private movingModeState: Subscription; private movingModeState: Subscription;
private activated: boolean = false; private activated: boolean = false;
constructor( constructor(private element: ElementRef, private movingEventSource: MovingEventSource, private context: Context) {}
private element: ElementRef,
private movingEventSource: MovingEventSource,
private context: Context
) {}
ngOnInit() { ngOnInit() {
this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => { this.movingModeState = this.movingEventSource.movingModeState.subscribe((event: boolean) => {
@ -53,13 +49,25 @@ export class MovingCanvasDirective implements OnInit, OnDestroy {
this.removelisteners(); this.removelisteners();
}; };
this.element.nativeElement.addEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject); this.element.nativeElement.addEventListener(
this.element.nativeElement.addEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject); 'mouseup',
this.mouseupListener as EventListenerOrEventListenerObject
);
this.element.nativeElement.addEventListener(
'mousemove',
this.mousemoveListener as EventListenerOrEventListenerObject
);
} }
} }
removelisteners() { removelisteners() {
this.element.nativeElement.removeEventListener('mouseup', this.mouseupListener as EventListenerOrEventListenerObject); this.element.nativeElement.removeEventListener(
this.element.nativeElement.removeEventListener('mousemove', this.mousemoveListener as EventListenerOrEventListenerObject); 'mouseup',
this.mouseupListener as EventListenerOrEventListenerObject
);
this.element.nativeElement.removeEventListener(
'mousemove',
this.mousemoveListener as EventListenerOrEventListenerObject
);
} }
} }

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

@ -1,13 +1,15 @@
import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { Context } from '../models/context';
import { MovingEventSource } from '../events/moving-event-source';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ZoomingCanvasDirective } from './zooming-canvas.directive'; import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MapScaleService } from '../../services/mapScale.service'; import { MapScaleService } from '../../services/mapScale.service';
import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context';
import { ZoomingCanvasDirective } from './zooming-canvas.directive';
@Component({ @Component({
template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas><g class="canvas" transform="translate(0, 0) scale(1)"></g></svg>` template: `<svg #svg class="map" preserveAspectRatio="none" zoomingCanvas>
<g class="canvas" transform="translate(0, 0) scale(1)"></g>
</svg>`,
}) })
class DummyComponent { class DummyComponent {
constructor() {} constructor() {}
@ -24,9 +26,9 @@ describe('ZoomingCanvasDirective', () => {
providers: [ providers: [
{ provide: MovingEventSource, useValue: movingEventSource }, { provide: MovingEventSource, useValue: movingEventSource },
{ provide: Context, useClass: Context }, { provide: Context, useClass: Context },
{ provide: MapScaleService, useClass: MapScaleService } { provide: MapScaleService, useClass: MapScaleService },
], ],
declarations: [DummyComponent, ZoomingCanvasDirective] declarations: [DummyComponent, ZoomingCanvasDirective],
}).compileComponents(); }).compileComponents();
})); }));
@ -46,12 +48,14 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0; let deltaMode: number = 0;
let zoom: number = -1000; let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', { canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
})); })
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
@ -63,12 +67,14 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0; let deltaMode: number = 0;
let zoom: number = 100; let zoom: number = 100;
canvas.dispatchEvent(new WheelEvent('wheel', { canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
})); })
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`); expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(0.9)`);
@ -80,23 +86,27 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0; let deltaMode: number = 0;
let zoom: number = -1000; let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', { canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
})); })
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
movingEventSource.movingModeState.emit(false); movingEventSource.movingModeState.emit(false);
canvas.dispatchEvent(new WheelEvent('wheel', { canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
})); })
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`); expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(2)`);
@ -107,12 +117,14 @@ describe('ZoomingCanvasDirective', () => {
let deltaMode: number = 0; let deltaMode: number = 0;
let zoom: number = -1000; let zoom: number = -1000;
canvas.dispatchEvent(new WheelEvent('wheel', { canvas.dispatchEvent(
new WheelEvent('wheel', {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
})); })
);
tick(); tick();
expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`); expect(canvas.getAttribute('transform')).toEqual(`translate(0, 0) scale(1)`);
@ -127,7 +139,7 @@ describe('ZoomingCanvasDirective', () => {
bubbles: true, bubbles: true,
relatedTarget: canvas, relatedTarget: canvas,
deltaMode: deltaMode, deltaMode: deltaMode,
deltaY: zoom deltaY: zoom,
}); });
spyOn(event, 'preventDefault'); spyOn(event, 'preventDefault');

10
src/app/cartography/directives/zooming-canvas.directive.ts
View File

@ -1,9 +1,9 @@
import { ElementRef, Directive, OnInit, OnDestroy } from '@angular/core' import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { select } from 'd3-selection';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
import { MapScaleService } from '../../services/mapScale.service';
import { MovingEventSource } from '../events/moving-event-source'; import { MovingEventSource } from '../events/moving-event-source';
import { Context } from '../models/context'; import { Context } from '../models/context';
import { select } from 'd3-selection';
import { MapScaleService } from '../../services/mapScale.service';
@Directive({ @Directive({
selector: '[zoomingCanvas]', selector: '[zoomingCanvas]',
@ -52,7 +52,9 @@ export class ZoomingCanvasDirective implements OnInit, OnDestroy {
}); });
}; };
this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {passive: false}); this.element.nativeElement.addEventListener('wheel', this.wheelListener as EventListenerOrEventListenerObject, {
passive: false,
});
} }
removeListener() { removeListener() {

6
src/app/cartography/events/drawings-event-source.ts
View File

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

2
src/app/cartography/events/event-source.ts
View File

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

Some files were not shown because too many files have changed in this diff Show More