From 81f9a65617396c7d3f681e96aaed3b7851dd4e7a Mon Sep 17 00:00:00 2001 From: ziajka Date: Mon, 26 Nov 2018 16:45:13 +0100 Subject: [PATCH 01/11] Simplify coverage command --- .travis.yml | 2 +- package.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.travis.yml b/.travis.yml index 80362253..6d2671cd 100644 --- a/.travis.yml +++ b/.travis.yml @@ -46,7 +46,7 @@ before_script: - greenkeeper-lockfile-update - npm install -g codecov -script: yarn ng test --watch=false --code-coverage +script: yarn coverage after_success: - codecov diff --git a/package.json b/package.json index 03f56f86..2c6dcfca 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "distlinux": "yarn buildforelectron && electron-builder --linux --x64", "distwin": "yarn buildforelectron && electron-builder --win --x64", "distmac": "yarn buildforelectron && electron-builder --mac --x64", - "release": "build" + "release": "build", + "coverage": "ng test --watch=false --code-coverage" }, "private": true, "dependencies": { From b83d2c8efde4672955ba69ac9bcc5f860fcbdb96 Mon Sep 17 00:00:00 2001 From: ziajka Date: Tue, 27 Nov 2018 11:26:23 +0100 Subject: [PATCH 02/11] Debugging configruation and merge with latest angular --- .editorconfig | 2 +- .vscode/launch.json | 16 +++++++++++++++ src/environments/environment.ts | 16 +++++++++++---- src/main.ts | 3 ++- src/polyfills.ts | 36 ++++++++++++++++++++++++--------- src/test.ts | 14 +------------ tsconfig.json | 5 ++++- tslint.json | 30 +++++++++------------------ 8 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.editorconfig b/.editorconfig index 6e87a003..e89330a6 100644 --- a/.editorconfig +++ b/.editorconfig @@ -1,4 +1,4 @@ -# Editor configuration, see http://editorconfig.org +# Editor configuration, see https://editorconfig.org root = true [*] diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000..cb8ae355 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,16 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch localhost", + "type": "firefox", + "request": "launch", + "reAttach": true, + "url": "http://localhost:4200", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/environments/environment.ts b/src/environments/environment.ts index c7e44b00..02712c06 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,10 +1,18 @@ -// The file contents for the current environment will overwrite these during build. -// The build system defaults to the dev environment which uses `environment.ts`, but if you do -// `ng build --env=prod` then `environment.prod.ts` will be used instead. -// The list of which env maps to which file can be found in `.angular-cli.json`. +// This file can be replaced during build by using the `fileReplacements` array. +// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. +// The list of file replacements can be found in `angular.json`. export const environment = { production: false, electron: false, githubio: false }; + +/* + * For easier debugging in development mode, you can import the following file + * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. + * + * This import should be commented out in production mode because it will have a negative impact + * on performance if an error is thrown. + */ +// import 'zone.js/dist/zone-error'; // Included with Angular CLI. diff --git a/src/main.ts b/src/main.ts index a9ca1caf..c7b673cf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,4 +8,5 @@ if (environment.production) { enableProdMode(); } -platformBrowserDynamic().bootstrapModule(AppModule); +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/src/polyfills.ts b/src/polyfills.ts index 7831e97b..2d143481 100644 --- a/src/polyfills.ts +++ b/src/polyfills.ts @@ -11,7 +11,7 @@ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * - * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html + * Learn more in https://angular.io/guide/browser-support */ /*************************************************************************************************** @@ -34,29 +34,47 @@ // import 'core-js/es6/weak-map'; // import 'core-js/es6/set'; +/** + * If the application will be indexed by Google Search, the following is required. + * Googlebot uses a renderer based on Chrome 41. + * https://developers.google.com/search/docs/guides/rendering + **/ +// import 'core-js/es6/array'; + /** IE10 and IE11 requires the following for NgClass support on SVG elements */ // import 'classlist.js'; // Run `npm install --save classlist.js`. -/** Evergreen browsers require these. **/ -import 'core-js/es6/reflect'; -import 'core-js/es7/reflect'; - +/** IE10 and IE11 requires the following for the Reflect API. */ +// import 'core-js/es6/reflect'; /** - * Required to support Web Animations `@angular/animation`. - * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + * Web Animations `@angular/platform-browser/animations` + * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. + * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). **/ // import 'web-animations-js'; // Run `npm install --save web-animations-js`. +/** + * By default, zone.js will patch all possible macroTask and DomEvents + * user can disable parts of macroTask/DomEvents patch by setting following flags + */ + // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame + // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick + // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames + + /* + * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js + * with the following flag, it will bypass `zone.js` patch for IE/Edge + */ +// (window as any).__Zone_enable_cross_context_check = true; /*************************************************************************************************** - * Zone JS is required by Angular itself. + * Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. - /*************************************************************************************************** * APPLICATION IMPORTS */ diff --git a/src/test.ts b/src/test.ts index cd612eeb..16317897 100644 --- a/src/test.ts +++ b/src/test.ts @@ -1,24 +1,14 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js/dist/long-stack-trace-zone'; -import 'zone.js/dist/proxy.js'; -import 'zone.js/dist/sync-test'; -import 'zone.js/dist/jasmine-patch'; -import 'zone.js/dist/async-test'; -import 'zone.js/dist/fake-async-test'; +import 'zone.js/dist/zone-testing'; import { getTestBed } from '@angular/core/testing'; import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; -// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. -declare const __karma__: any; declare const require: any; -// Prevent Karma from running prematurely. -__karma__.loaded = function () {}; - // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( BrowserDynamicTestingModule, @@ -28,5 +18,3 @@ getTestBed().initTestEnvironment( const context = require.context('./', true, /\.spec\.ts$/); // And load the modules. context.keys().map(context); -// Finally, start Karma to run the tests. -__karma__.start(); diff --git a/tsconfig.json b/tsconfig.json index 72d54ded..90f316b6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,18 +1,21 @@ { "compileOnSave": false, "compilerOptions": { + "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, + "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, + "importHelpers": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ - "es2016", + "es2018", "dom" ], }, diff --git a/tslint.json b/tslint.json index b1ed5170..6ddb6b29 100644 --- a/tslint.json +++ b/tslint.json @@ -11,10 +11,14 @@ "check-space" ], "curly": true, + "deprecation": { + "severity": "warn" + }, "eofline": true, "forin": true, "import-blacklist": [ - true + true, + "rxjs/Rx" ], "import-spacing": true, "indent": [ @@ -61,11 +65,12 @@ ], "no-misused-new": true, "no-non-null-assertion": true, + "no-redundant-jsdoc": true, "no-shadowed-variable": true, "no-string-literal": false, "no-string-throw": true, "no-switch-case-fall-through": true, - "no-trailing-whitespace": false, + "no-trailing-whitespace": true, "no-unnecessary-initializer": true, "no-unused-expression": true, "no-use-before-declare": true, @@ -80,7 +85,7 @@ ], "prefer-const": true, "quotemark": [ - false, + true, "single" ], "radix": true, @@ -102,7 +107,6 @@ "variable-declaration": "nospace" } ], - "typeof-compare": true, "unified-signatures": true, "variable-name": false, "whitespace": [ @@ -113,18 +117,7 @@ "check-separator", "check-type" ], - "directive-selector": [ - true, - "attribute", - "app", - "camelCase" - ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], + "no-output-on-prefix": true, "use-input-property-decorator": true, "use-output-property-decorator": true, "use-host-property-decorator": true, @@ -133,9 +126,6 @@ "use-life-cycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, - "directive-class-suffix": true, - "no-access-missing-member": true, - "templates-use-public": true, - "invoke-injectable": true + "directive-class-suffix": true } } From 0f29270cb82b56b102f81ddbcfac077d2ee62c2e Mon Sep 17 00:00:00 2001 From: ziajka Date: Tue, 27 Nov 2018 11:31:12 +0100 Subject: [PATCH 03/11] Exclude experimental map from coverage --- angular.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/angular.json b/angular.json index 66e1b1ba..08e6c2f8 100644 --- a/angular.json +++ b/angular.json @@ -133,6 +133,9 @@ "assets": [ "src/assets", "src/favicon.ico" + ], + "codeCoverageExclude": [ + "src/app/cartography/components/experimental-map/**/*" ] } }, From e0b84d81cbe45c367e0a74505a9059fb68ec6eab Mon Sep 17 00:00:00 2001 From: ziajka Date: Tue, 27 Nov 2018 12:38:39 +0100 Subject: [PATCH 04/11] Move experimental components into experimental-map --- src/app/cartography/angular-map.imports.ts | 4 ++-- .../{ => experimental-map}/draggable/draggable.component.scss | 0 .../draggable/draggable.component.spec.ts | 0 .../{ => experimental-map}/draggable/draggable.component.ts | 2 +- .../{ => experimental-map}/selection/selection.component.html | 0 .../{ => experimental-map}/selection/selection.component.scss | 0 .../selection/selection.component.spec.ts | 0 .../{ => experimental-map}/selection/selection.component.ts | 2 +- 8 files changed, 4 insertions(+), 4 deletions(-) rename src/app/cartography/components/{ => experimental-map}/draggable/draggable.component.scss (100%) rename src/app/cartography/components/{ => experimental-map}/draggable/draggable.component.spec.ts (100%) rename src/app/cartography/components/{ => experimental-map}/draggable/draggable.component.ts (97%) rename src/app/cartography/components/{ => experimental-map}/selection/selection.component.html (100%) rename src/app/cartography/components/{ => experimental-map}/selection/selection.component.scss (100%) rename src/app/cartography/components/{ => experimental-map}/selection/selection.component.spec.ts (100%) rename src/app/cartography/components/{ => experimental-map}/selection/selection.component.ts (98%) diff --git a/src/app/cartography/angular-map.imports.ts b/src/app/cartography/angular-map.imports.ts index 3a78c523..b98e6247 100644 --- a/src/app/cartography/angular-map.imports.ts +++ b/src/app/cartography/angular-map.imports.ts @@ -1,5 +1,3 @@ -import { DraggableComponent } from './components/draggable/draggable.component'; -import { SelectionComponent } from './components/selection/selection.component'; import { NodeComponent } from './components/experimental-map/node/node.component'; import { LinkComponent } from './components/experimental-map/link/link.component'; import { StatusComponent } from './components/experimental-map/status/status.component'; @@ -10,6 +8,8 @@ import { LineComponent } from './components/experimental-map/drawing/drawings/li import { RectComponent } from './components/experimental-map/drawing/drawings/rect/rect.component'; import { TextComponent } from './components/experimental-map/drawing/drawings/text/text.component'; import { InterfaceLabelComponent } from './components/experimental-map/interface-label/interface-label.component'; +import { DraggableComponent } from './components/experimental-map/draggable/draggable.component'; +import { SelectionComponent } from './components/experimental-map/selection/selection.component'; export const ANGULAR_MAP_DECLARATIONS = [ diff --git a/src/app/cartography/components/draggable/draggable.component.scss b/src/app/cartography/components/experimental-map/draggable/draggable.component.scss similarity index 100% rename from src/app/cartography/components/draggable/draggable.component.scss rename to src/app/cartography/components/experimental-map/draggable/draggable.component.scss diff --git a/src/app/cartography/components/draggable/draggable.component.spec.ts b/src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts similarity index 100% rename from src/app/cartography/components/draggable/draggable.component.spec.ts rename to src/app/cartography/components/experimental-map/draggable/draggable.component.spec.ts diff --git a/src/app/cartography/components/draggable/draggable.component.ts b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts similarity index 97% rename from src/app/cartography/components/draggable/draggable.component.ts rename to src/app/cartography/components/experimental-map/draggable/draggable.component.ts index 1cd1c20f..8ca95b00 100644 --- a/src/app/cartography/components/draggable/draggable.component.ts +++ b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ElementRef, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; -import { Point } from '../../models/point'; +import { Point } from 'src/app/cartography/models/point'; export class DraggableDraggedEvent { diff --git a/src/app/cartography/components/selection/selection.component.html b/src/app/cartography/components/experimental-map/selection/selection.component.html similarity index 100% rename from src/app/cartography/components/selection/selection.component.html rename to src/app/cartography/components/experimental-map/selection/selection.component.html diff --git a/src/app/cartography/components/selection/selection.component.scss b/src/app/cartography/components/experimental-map/selection/selection.component.scss similarity index 100% rename from src/app/cartography/components/selection/selection.component.scss rename to src/app/cartography/components/experimental-map/selection/selection.component.scss diff --git a/src/app/cartography/components/selection/selection.component.spec.ts b/src/app/cartography/components/experimental-map/selection/selection.component.spec.ts similarity index 100% rename from src/app/cartography/components/selection/selection.component.spec.ts rename to src/app/cartography/components/experimental-map/selection/selection.component.spec.ts diff --git a/src/app/cartography/components/selection/selection.component.ts b/src/app/cartography/components/experimental-map/selection/selection.component.ts similarity index 98% rename from src/app/cartography/components/selection/selection.component.ts rename to src/app/cartography/components/experimental-map/selection/selection.component.ts index b9589b29..0eb736ed 100644 --- a/src/app/cartography/components/selection/selection.component.ts +++ b/src/app/cartography/components/experimental-map/selection/selection.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Input, AfterViewInit, ChangeDetectorRef, Output, EventEmitter } from '@angular/core'; import { Observable, Subscription, Subject } from 'rxjs'; -import { Rectangle } from '../../models/rectangle'; +import { Rectangle } from 'src/app/cartography/models/rectangle'; @Component({ selector: '[app-selection]', From f0f3ee1bf7ee6c82f048e0999df088e9cb0be77e Mon Sep 17 00:00:00 2001 From: ziajka Date: Tue, 27 Nov 2018 12:40:13 +0100 Subject: [PATCH 05/11] Fix paths --- .../experimental-map/draggable/draggable.component.ts | 2 +- .../experimental-map/selection/selection.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/cartography/components/experimental-map/draggable/draggable.component.ts b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts index 8ca95b00..e612b1eb 100644 --- a/src/app/cartography/components/experimental-map/draggable/draggable.component.ts +++ b/src/app/cartography/components/experimental-map/draggable/draggable.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ElementRef, AfterViewInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; import { Observable, Subscription } from 'rxjs'; -import { Point } from 'src/app/cartography/models/point'; +import { Point } from '../../../models/point'; export class DraggableDraggedEvent { diff --git a/src/app/cartography/components/experimental-map/selection/selection.component.ts b/src/app/cartography/components/experimental-map/selection/selection.component.ts index 0eb736ed..d7327a5d 100644 --- a/src/app/cartography/components/experimental-map/selection/selection.component.ts +++ b/src/app/cartography/components/experimental-map/selection/selection.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, Input, AfterViewInit, ChangeDetectorRef, Output, EventEmitter } from '@angular/core'; import { Observable, Subscription, Subject } from 'rxjs'; -import { Rectangle } from 'src/app/cartography/models/rectangle'; +import { Rectangle } from '../../../models/rectangle'; @Component({ selector: '[app-selection]', From 91849138039150527f9f054983809b0aeddfddb5 Mon Sep 17 00:00:00 2001 From: ziajka Date: Tue, 27 Nov 2018 13:48:30 +0100 Subject: [PATCH 06/11] Move draw-link-tool --- src/app/app.module.ts | 4 +- src/app/cartography/cartography.module.ts | 3 - .../components/d3-map/d3-map.component.html | 1 - .../draw-link-tool.component.html | 1 - .../draw-link-tool.component.ts | 61 ------------------- .../map/drawing-to-map-drawing-converter.ts | 28 ++++----- .../map/label-to-map-label-converter.ts | 24 ++++---- src/app/cartography/events/event-source.ts | 8 +++ .../cartography/events/nodes-event-source.ts | 3 +- src/app/cartography/widgets/node.ts | 10 ++- .../draw-link-tool.component.html | 1 + .../draw-link-tool.component.scss | 0 .../draw-link-tool.component.spec.ts | 0 .../draw-link-tool.component.ts | 58 ++++++++++++++++++ .../node-context-menu.component.ts | 2 +- .../node-select-interface.component.html | 2 +- .../node-select-interface.component.ts | 4 +- .../project-map/project-map.component.html | 2 + 18 files changed, 111 insertions(+), 101 deletions(-) delete mode 100644 src/app/cartography/components/draw-link-tool/draw-link-tool.component.html delete mode 100644 src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts create mode 100644 src/app/components/project-map/draw-link-tool/draw-link-tool.component.html rename src/app/{cartography/components => components/project-map}/draw-link-tool/draw-link-tool.component.scss (100%) rename src/app/{cartography/components => components/project-map}/draw-link-tool/draw-link-tool.component.spec.ts (100%) create mode 100644 src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 023c08d9..9b382efd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -73,6 +73,7 @@ import { MATERIAL_IMPORTS } from './material.imports'; import { DrawingService } from './services/drawing.service'; import { ProjectNameValidator } from './components/projects/models/projectNameValidator'; 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'; if (environment.production) { @@ -114,7 +115,8 @@ if (environment.production) { LocalServerComponent, ProgressComponent, ServerDiscoveryComponent, - NodeSelectInterfaceComponent + NodeSelectInterfaceComponent, + DrawLinkToolComponent ], imports: [ NgbModule.forRoot(), diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index bf50f5ec..6c47bbdf 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -2,8 +2,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatMenuModule, MatIconModule } from '@angular/material'; -import { DrawLinkToolComponent } from './components/draw-link-tool/draw-link-tool.component'; - import { CssFixer } from './helpers/css-fixer'; import { FontFixer } from './helpers/font-fixer'; import { MultiLinkCalculatorHelper } from './helpers/multi-link-calculator-helper'; @@ -52,7 +50,6 @@ import { MapSettingsManager } from './managers/map-settings-manager'; declarations: [ D3MapComponent, ExperimentalMapComponent, - DrawLinkToolComponent, ...ANGULAR_MAP_DECLARATIONS, SelectionControlComponent, SelectionSelectComponent, diff --git a/src/app/cartography/components/d3-map/d3-map.component.html b/src/app/cartography/components/d3-map/d3-map.component.html index bebf16a7..018e64f0 100644 --- a/src/app/cartography/components/d3-map/d3-map.component.html +++ b/src/app/cartography/components/d3-map/d3-map.component.html @@ -8,7 +8,6 @@ - \ No newline at end of file diff --git a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.html b/src/app/cartography/components/draw-link-tool/draw-link-tool.component.html deleted file mode 100644 index 89ab7db7..00000000 --- a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts b/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts deleted file mode 100644 index 7fd0e837..00000000 --- a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { Component, OnInit, Output, EventEmitter, OnDestroy, ViewChild } from '@angular/core'; -import { DrawingLineWidget } from '../../widgets/drawing-line'; -import { Subscription } from 'rxjs'; -// import { NodeSelectInterfaceComponent } from '../node-select-interface/node-select-interface.component'; -import { MapLinkCreated } from '../../events/links'; -import { NodeClicked } from '../../events/nodes'; -import { NodeWidget } from '../../widgets/node'; -import { MapNode } from '../../models/map/map-node'; -import { MapPort } from '../../models/map/map-port'; -import { LinksEventSource } from '../../events/links-event-source'; - - -@Component({ - selector: 'app-draw-link-tool', - templateUrl: './draw-link-tool.component.html', - styleUrls: ['./draw-link-tool.component.scss'] -}) -export class DrawLinkToolComponent implements OnInit, OnDestroy { - // @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent; - - // @Output('linkCreated') linkCreated = new EventEmitter(); - - private onNodeClicked: Subscription; - - constructor( - private drawingLineTool: DrawingLineWidget, - private nodeWidget: NodeWidget, - private linksEventSource: LinksEventSource - ) { } - - ngOnInit() { - // this.onNodeClicked = this.nodeWidget.onNodeClicked.subscribe((eventNode: NodeClicked) => { - // this.nodeSelectInterfaceMenu.open( - // eventNode.node, - // eventNode.event.clientY, - // eventNode.event.clientX - // ); - // }); - } - - ngOnDestroy() { - if (this.drawingLineTool.isDrawing()) { - this.drawingLineTool.stop(); - } - // this.onNodeClicked.unsubscribe(); - } - - public onChooseInterface(event) { - const node: MapNode = event.node; - const port: MapPort = event.port; - if (this.drawingLineTool.isDrawing()) { - const data = this.drawingLineTool.stop(); - this.linksEventSource.created.emit(new MapLinkCreated(data['node'], data['port'], node, port)); - } else { - this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., { - 'node': node, - 'port': port - }); - } - } -} diff --git a/src/app/cartography/converters/map/drawing-to-map-drawing-converter.ts b/src/app/cartography/converters/map/drawing-to-map-drawing-converter.ts index e6d2ff09..26a7af35 100644 --- a/src/app/cartography/converters/map/drawing-to-map-drawing-converter.ts +++ b/src/app/cartography/converters/map/drawing-to-map-drawing-converter.ts @@ -7,18 +7,18 @@ import { MapDrawing } from "../../models/map/map-drawing"; @Injectable() export class DrawingToMapDrawingConverter implements Converter { - constructor( - ) {} - - convert(drawing: Drawing) { - const mapDrawing = new MapDrawing(); - mapDrawing.id = drawing.drawing_id; - mapDrawing.projectId = drawing.project_id; - mapDrawing.rotation = drawing.rotation; - mapDrawing.svg = drawing.svg; - mapDrawing.x = drawing.x; - mapDrawing.y = drawing.y; - mapDrawing.z = drawing.z; - return mapDrawing; - } + constructor( + ) {} + + convert(drawing: Drawing) { + const mapDrawing = new MapDrawing(); + mapDrawing.id = drawing.drawing_id; + mapDrawing.projectId = drawing.project_id; + mapDrawing.rotation = drawing.rotation; + mapDrawing.svg = drawing.svg; + mapDrawing.x = drawing.x; + mapDrawing.y = drawing.y; + mapDrawing.z = drawing.z; + return mapDrawing; + } } diff --git a/src/app/cartography/converters/map/label-to-map-label-converter.ts b/src/app/cartography/converters/map/label-to-map-label-converter.ts index 3f19485b..5b154696 100644 --- a/src/app/cartography/converters/map/label-to-map-label-converter.ts +++ b/src/app/cartography/converters/map/label-to-map-label-converter.ts @@ -7,17 +7,17 @@ import { MapLabel } from "../../models/map/map-label"; @Injectable() export class LabelToMapLabelConverter implements Converter { - convert(label: Label, paramaters?: {[node_id: string]: string}) { - const mapLabel = new MapLabel(); - mapLabel.rotation = label.rotation; - mapLabel.style = label.style; - mapLabel.text = label.text; - mapLabel.x = label.x; - mapLabel.y = label.y; - if (paramaters !== undefined) { - mapLabel.id = paramaters.node_id; - mapLabel.nodeId = paramaters.node_id; - } - return mapLabel; + convert(label: Label, paramaters?: {[node_id: string]: string}) { + const mapLabel = new MapLabel(); + mapLabel.rotation = label.rotation; + mapLabel.style = label.style; + mapLabel.text = label.text; + mapLabel.x = label.x; + mapLabel.y = label.y; + if (paramaters !== undefined) { + mapLabel.id = paramaters.node_id; + mapLabel.nodeId = paramaters.node_id; } + return mapLabel; + } } diff --git a/src/app/cartography/events/event-source.ts b/src/app/cartography/events/event-source.ts index c6a2368a..c108097c 100644 --- a/src/app/cartography/events/event-source.ts +++ b/src/app/cartography/events/event-source.ts @@ -7,3 +7,11 @@ export class DataEventSource { } export class DraggedDataEvent extends DataEventSource {} + +export class ClickedDataEvent { + constructor( + public datum: T, + public x: number, + public y: number + ) {} +} \ No newline at end of file diff --git a/src/app/cartography/events/nodes-event-source.ts b/src/app/cartography/events/nodes-event-source.ts index 564de247..4f7d3c3e 100644 --- a/src/app/cartography/events/nodes-event-source.ts +++ b/src/app/cartography/events/nodes-event-source.ts @@ -1,5 +1,5 @@ import { Injectable, EventEmitter } from "@angular/core"; -import { DraggedDataEvent } from "./event-source"; +import { DraggedDataEvent, ClickedDataEvent } from "./event-source"; import { MapNode } from "../models/map/map-node"; import { MapLabel } from "../models/map/map-label"; @@ -8,4 +8,5 @@ import { MapLabel } from "../models/map/map-label"; export class NodesEventSource { public dragged = new EventEmitter>(); public labelDragged = new EventEmitter>(); + public clicked = new EventEmitter>(); } diff --git a/src/app/cartography/widgets/node.ts b/src/app/cartography/widgets/node.ts index df38fe48..42e12fec 100644 --- a/src/app/cartography/widgets/node.ts +++ b/src/app/cartography/widgets/node.ts @@ -9,6 +9,8 @@ import { MapNode } from "../models/map/map-node"; import { GraphDataManager } from "../managers/graph-data-manager"; import { SelectionManager } from "../managers/selection-manager"; import { LabelWidget } from "./label"; +import { NodesEventSource } from '../events/nodes-event-source'; +import { ClickedDataEvent } from '../events/event-source'; @Injectable() @@ -19,7 +21,8 @@ export class NodeWidget implements Widget { constructor( private graphDataManager: GraphDataManager, private selectionManager: SelectionManager, - private labelWidget: LabelWidget + private labelWidget: LabelWidget, + private nodesEventSource: NodesEventSource, ) {} public draw(view: SVGSelection) { @@ -42,8 +45,9 @@ export class NodeWidget implements Widget { event.preventDefault(); self.onContextMenu.emit(new NodeContextMenu(event, n)); }) - .on('click', (n: MapNode) => { - this.onNodeClicked.emit(new NodeClicked(event, n)); + .on('click', (node: MapNode) => { + this.nodesEventSource.clicked.emit(new ClickedDataEvent(node, event.clientX, event.clientY)) + // this.onNodeClicked.emit(new NodeClicked(event, n)); }); // update image of node diff --git a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.html b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.html new file mode 100644 index 00000000..16188157 --- /dev/null +++ b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.scss b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.scss similarity index 100% rename from src/app/cartography/components/draw-link-tool/draw-link-tool.component.scss rename to src/app/components/project-map/draw-link-tool/draw-link-tool.component.scss diff --git a/src/app/cartography/components/draw-link-tool/draw-link-tool.component.spec.ts b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts similarity index 100% rename from src/app/cartography/components/draw-link-tool/draw-link-tool.component.spec.ts rename to src/app/components/project-map/draw-link-tool/draw-link-tool.component.spec.ts diff --git a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts new file mode 100644 index 00000000..880ff7ce --- /dev/null +++ b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; +import { Subscription } from 'rxjs'; +import { NodeSelectInterfaceComponent } from '../../../components/project-map/node-select-interface/node-select-interface.component'; +import { DrawingLineWidget } from '../../../cartography/widgets/drawing-line'; +import { NodesEventSource } from '../../../cartography/events/nodes-event-source'; +import { LinksEventSource } from '../../../cartography/events/links-event-source'; +import { MapNode } from '../../../cartography/models/map/map-node'; +import { MapPort } from '../../../cartography/models/map/map-port'; +import { MapLinkCreated } from '../../../cartography/events/links'; + + +@Component({ + selector: 'app-draw-link-tool', + templateUrl: './draw-link-tool.component.html', + styleUrls: ['./draw-link-tool.component.scss'] +}) +export class DrawLinkToolComponent implements OnInit, OnDestroy { + @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent; + + private nodeClicked$: Subscription; + + constructor( + private drawingLineTool: DrawingLineWidget, + private nodesEventSource: NodesEventSource, + private linksEventSource: LinksEventSource + ) { } + + ngOnInit() { + this.nodeClicked$ = this.nodesEventSource.clicked.subscribe((clickedEvent) => { + this.nodeSelectInterfaceMenu.open( + clickedEvent.datum, + clickedEvent.y, + clickedEvent.x + ); + }); + } + + ngOnDestroy() { + if (this.drawingLineTool.isDrawing()) { + this.drawingLineTool.stop(); + } + this.nodeClicked$.unsubscribe(); + } + + public onChooseInterface(event) { + const node: MapNode = event.node; + const port: MapPort = event.port; + if (this.drawingLineTool.isDrawing()) { + const data = this.drawingLineTool.stop(); + this.linksEventSource.created.emit(new MapLinkCreated(data['node'], data['port'], node, port)); + } else { + this.drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., { + 'node': node, + 'port': port + }); + } + } +} diff --git a/src/app/components/project-map/node-context-menu/node-context-menu.component.ts b/src/app/components/project-map/node-context-menu/node-context-menu.component.ts index 16d67795..369f5c9e 100644 --- a/src/app/components/project-map/node-context-menu/node-context-menu.component.ts +++ b/src/app/components/project-map/node-context-menu/node-context-menu.component.ts @@ -20,7 +20,7 @@ export class NodeContextMenuComponent implements OnInit { protected topPosition; protected leftPosition; - public node: Node; + protected node: Node; constructor( private sanitizer: DomSanitizer, diff --git a/src/app/components/project-map/node-select-interface/node-select-interface.component.html b/src/app/components/project-map/node-select-interface/node-select-interface.component.html index d912c26b..8900bba8 100644 --- a/src/app/components/project-map/node-select-interface/node-select-interface.component.html +++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.html @@ -1,6 +1,6 @@
- +