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 @@
- +