From 8de7e58dec6059574f0854f007e949780c522ef1 Mon Sep 17 00:00:00 2001 From: ziajka Date: Fri, 16 Nov 2018 11:38:42 +0100 Subject: [PATCH] Move out responsibilities to project-map --- src/app/cartography/cartography.module.ts | 2 + .../draw-link-tool.component.ts | 8 ++- .../components/map/map.component.html | 2 +- .../components/map/map.component.ts | 39 ------------ .../cartography/events/links-event-source.ts | 8 +++ src/app/cartography/events/links.ts | 18 +++--- .../project-map/project-map.component.html | 3 - .../project-map/project-map.component.ts | 63 +++++++++++++------ 8 files changed, 69 insertions(+), 74 deletions(-) create mode 100644 src/app/cartography/events/links-event-source.ts diff --git a/src/app/cartography/cartography.module.ts b/src/app/cartography/cartography.module.ts index c87cc881..8b9080fd 100644 --- a/src/app/cartography/cartography.module.ts +++ b/src/app/cartography/cartography.module.ts @@ -38,6 +38,7 @@ import { GraphDataManager } from './managers/graph-data-manager'; import { SelectionUpdateListener } from './listeners/selection-update-listener'; import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource } from './datasources/map-datasource'; import { SelectionListener } from './listeners/selection-listener'; +import { LinksEventSource } from './events/links-event-source'; @NgModule({ @@ -67,6 +68,7 @@ import { SelectionListener } from './listeners/selection-listener'; SelectionListener, DrawingsEventSource, NodesEventSource, + LinksEventSource, DrawingToMapDrawingConverter, LabelToMapLabelConverter, LinkToMapLinkConverter, 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 index c687f5ea..b4452b08 100644 --- 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 @@ -7,6 +7,7 @@ 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({ @@ -17,13 +18,14 @@ import { MapPort } from '../../models/map/map-port'; export class DrawLinkToolComponent implements OnInit, OnDestroy { @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent; - @Output('linkCreated') linkCreated = new EventEmitter(); + // @Output('linkCreated') linkCreated = new EventEmitter(); private onNodeClicked: Subscription; constructor( private drawingLineTool: DrawingLineWidget, - private nodeWidget: NodeWidget + private nodeWidget: NodeWidget, + private linksEventSource: LinksEventSource ) { } ngOnInit() { @@ -48,7 +50,7 @@ export class DrawLinkToolComponent implements OnInit, OnDestroy { const port: MapPort = event.port; if (this.drawingLineTool.isDrawing()) { const data = this.drawingLineTool.stop(); - this.linkCreated.emit(new MapLinkCreated(data['node'], data['port'], node, port)); + 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, diff --git a/src/app/cartography/components/map/map.component.html b/src/app/cartography/components/map/map.component.html index a1c15cc3..dc9747ac 100644 --- a/src/app/cartography/components/map/map.component.html +++ b/src/app/cartography/components/map/map.component.html @@ -7,4 +7,4 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/cartography/components/map/map.component.ts b/src/app/cartography/components/map/map.component.ts index 9e132299..d3879d8b 100644 --- a/src/app/cartography/components/map/map.component.ts +++ b/src/app/cartography/components/map/map.component.ts @@ -12,21 +12,14 @@ 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 { LinkCreated } from '../../events/links'; import { CanvasSizeDetector } from '../../helpers/canvas-size-detector'; import { MapListeners } from '../../listeners/map-listeners'; -import { DraggedDataEvent } from '../../events/event-source'; -import { NodesEventSource } from '../../events/nodes-event-source'; -import { DrawingsEventSource } from '../../events/drawings-event-source'; import { DrawingsWidget } from '../../widgets/drawings'; import { Node } from '../../models/node'; import { Link } from '../../../models/link'; import { Drawing } from '../../models/drawing'; import { Symbol } from '../../../models/symbol'; -import { MapNodeToNodeConverter } from '../../converters/map/map-node-to-node-converter'; -import { MapPortToPortConverter } from '../../converters/map/map-port-to-port-converter'; import { GraphDataManager } from '../../managers/graph-data-manager'; -import { MapDrawingToDrawingConverter } from '../../converters/map/map-drawing-to-drawing-converter'; @Component({ @@ -43,16 +36,10 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { @Input() width = 1500; @Input() height = 600; - @Output() nodeDragged = new EventEmitter>(); - @Output() drawingDragged = new EventEmitter>(); - @Output() onLinkCreated = new EventEmitter(); - private parentNativeElement: any; private svg: Selection; private onChangesDetected: Subscription; - private nodeDraggedSub: Subscription; - private drawingDraggedSub: Subscription; protected settings = { 'show_interface_labels': true @@ -64,9 +51,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { private mapChangeDetectorRef: MapChangeDetectorRef, private canvasSizeDetector: CanvasSizeDetector, private mapListeners: MapListeners, - private mapNodeToNode: MapNodeToNodeConverter, - private mapPortToPort: MapPortToPortConverter, - private mapDrawingToDrawing: MapDrawingToDrawingConverter, protected element: ElementRef, protected nodesWidget: NodesWidget, protected drawingsWidget: DrawingsWidget, @@ -74,8 +58,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { protected selectionToolWidget: SelectionTool, protected movingToolWidget: MovingTool, public graphLayout: GraphLayout, - private nodesEventSource: NodesEventSource, - private drawingsEventSource: DrawingsEventSource, ) { this.parentNativeElement = element.nativeElement; } @@ -136,14 +118,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { } }); - this.nodeDraggedSub = this.nodesEventSource.dragged.subscribe((evt) => { - this.nodeDragged.emit(new DraggedDataEvent(this.mapNodeToNode.convert(evt.datum), evt.dx, evt.dy)); - }); - - this.drawingDraggedSub = this.drawingsEventSource.dragged.subscribe((evt) => { - this.drawingDragged.emit(new DraggedDataEvent(this.mapDrawingToDrawing.convert(evt.datum), evt.dx, evt.dy)); - }); - this.mapListeners.onInit(this.svg); } @@ -151,8 +125,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { this.graphLayout.disconnect(this.svg); this.onChangesDetected.unsubscribe(); this.mapListeners.onDestroy(); - this.nodeDraggedSub.unsubscribe(); - this.drawingDraggedSub.unsubscribe(); } public createGraph(domElement: HTMLElement) { @@ -167,17 +139,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy { return this.canvasSizeDetector.getOptimalSize(this.width, this.height); } - protected linkCreated(evt) { - const linkCreated = new LinkCreated( - this.mapNodeToNode.convert(evt.sourceNode), - this.mapPortToPort.convert(evt.sourcePort), - this.mapNodeToNode.convert(evt.targetNode), - this.mapPortToPort.convert(evt.targetPort) - ); - - this.onLinkCreated.emit(linkCreated); - } - private changeLayout() { if (this.parentNativeElement != null) { this.context.size = this.getSize(); diff --git a/src/app/cartography/events/links-event-source.ts b/src/app/cartography/events/links-event-source.ts new file mode 100644 index 00000000..5632a0e4 --- /dev/null +++ b/src/app/cartography/events/links-event-source.ts @@ -0,0 +1,8 @@ +import { Injectable, EventEmitter } from "@angular/core"; +import { MapLinkCreated } from "./links"; + + +@Injectable() +export class LinksEventSource { + public created = new EventEmitter(); +} diff --git a/src/app/cartography/events/links.ts b/src/app/cartography/events/links.ts index 3b2d4599..7bb442c1 100644 --- a/src/app/cartography/events/links.ts +++ b/src/app/cartography/events/links.ts @@ -1,17 +1,15 @@ -import { Port } from "../../models/port"; -import { Node } from "../models/node"; import { MapNode } from "../models/map/map-node"; import { MapPort } from "../models/map/map-port"; -export class LinkCreated { - constructor( - public sourceNode: Node, - public sourcePort: Port, - public targetNode: Node, - public targetPort: Port - ) {} -} +// export class LinkCreated { +// constructor( +// public sourceNode: Node, +// public sourcePort: Port, +// public targetNode: Node, +// public targetPort: Port +// ) {} +// } export class MapLinkCreated { constructor( diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index 9bfda43d..f3e02314 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -11,9 +11,6 @@ [moving-tool]="tools.moving" [draw-link-tool]="tools.draw_link" [readonly]="inReadOnlyMode" - (nodeDragged)="onNodeDragged($event)" - (drawingDragged)="onDrawingDragged($event)" - (onLinkCreated)="onLinkCreated($event)" >
diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 1f0343d9..a3ecd2de 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -26,11 +26,17 @@ import { DrawingsDataSource } from "../../cartography/datasources/drawings-datas import { ProgressService } from "../../common/progress/progress.service"; import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref'; import { NodeContextMenu } from '../../cartography/events/nodes'; -import { LinkCreated } from '../../cartography/events/links'; +import { MapLinkCreated } from '../../cartography/events/links'; import { NodeWidget } from '../../cartography/widgets/node'; import { DraggedDataEvent } from '../../cartography/events/event-source'; import { DrawingService } from '../../services/drawing.service'; import { MapNodeToNodeConverter } from '../../cartography/converters/map/map-node-to-node-converter'; +import { NodesEventSource } from '../../cartography/events/nodes-event-source'; +import { DrawingsEventSource } from '../../cartography/events/drawings-event-source'; +import { MapNode } from '../../cartography/models/map/map-node'; +import { LinksEventSource } from '../../cartography/events/links-event-source'; +import { MapDrawing } from '../../cartography/models/map/map-drawing'; +import { MapPortToPortConverter } from '../../cartography/converters/map/map-port-to-port-converter'; @Component({ @@ -77,9 +83,13 @@ export class ProjectMapComponent implements OnInit, OnDestroy { private mapChangeDetectorRef: MapChangeDetectorRef, private nodeWidget: NodeWidget, private mapNodeToNode: MapNodeToNodeConverter, - protected nodesDataSource: NodesDataSource, - protected linksDataSource: LinksDataSource, - protected drawingsDataSource: DrawingsDataSource, + private mapPortToPort: MapPortToPortConverter, + private nodesDataSource: NodesDataSource, + private linksDataSource: LinksDataSource, + private drawingsDataSource: DrawingsDataSource, + private nodesEventSource: NodesEventSource, + private drawingsEventSource: DrawingsEventSource, + private linksEventSource: LinksEventSource ) {} ngOnInit() { @@ -145,6 +155,18 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.mapChangeDetectorRef.detectChanges(); }) ); + + this.subscriptions.push( + this.nodesEventSource.dragged.subscribe((evt) => this.onNodeDragged(evt)) + ); + + this.subscriptions.push( + this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt)) + ); + + this.subscriptions.push( + this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt)) + ); } onProjectLoad(project: Project) { @@ -211,8 +233,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }); } - onNodeDragged(draggedEvent: DraggedDataEvent) { - const node = this.nodesDataSource.get(draggedEvent.datum.node_id); + private onNodeDragged(draggedEvent: DraggedDataEvent) { + const node = this.nodesDataSource.get(draggedEvent.datum.id); node.x += draggedEvent.dx; node.y += draggedEvent.dy; @@ -223,8 +245,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }); } - onDrawingDragged(draggedEvent: DraggedDataEvent) { - const drawing = this.drawingsDataSource.get(draggedEvent.datum.drawing_id); + private onDrawingDragged(draggedEvent: DraggedDataEvent) { + const drawing = this.drawingsDataSource.get(draggedEvent.datum.id); drawing.x += draggedEvent.dx; drawing.y += draggedEvent.dy; @@ -235,6 +257,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy { }); } + private onLinkCreated(linkCreated: MapLinkCreated) { + const sourceNode = this.mapNodeToNode.convert(linkCreated.sourceNode); + const sourcePort = this.mapPortToPort.convert(linkCreated.sourcePort); + const targetNode = this.mapNodeToNode.convert(linkCreated.targetNode); + const targetPort = this.mapPortToPort.convert(linkCreated.targetPort); + + this.linkService + .createLink(this.server, sourceNode, sourcePort, targetNode, targetPort) + .subscribe(() => { + this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => { + this.linksDataSource.set(links); + }); + }); + } + public set readonly(value) { this.inReadOnlyMode = value; if (value) { @@ -259,16 +296,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.tools.draw_link = !this.tools.draw_link; } - public onLinkCreated(linkCreated: LinkCreated) { - this.linkService - .createLink(this.server, linkCreated.sourceNode, linkCreated.sourcePort, linkCreated.targetNode, linkCreated.targetPort) - .subscribe(() => { - this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => { - this.linksDataSource.set(links); - }); - }); - } - public toggleShowInterfaceLabels(enabled: boolean) { this.project.show_interface_labels = enabled; }