Removing listeners from project map component

src/app/app.module.ts

@@ -77,6 +77,11 @@ import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/d
 import { AddDrawingComponent } from './components/project-map/add-drawing/add-drawing.component';
 import { DrawingResizedComponent } from './components/drawings-listeners/drawing-resized/drawing-resized.component';
 import { TextEditedComponent } from './components/drawings-listeners/text-edited/text-edited.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 { 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';
 
 
 if (environment.production) {
@@ -122,7 +127,12 @@ if (environment.production) {
     DrawLinkToolComponent,
     AddDrawingComponent,
     DrawingResizedComponent,
-    TextEditedComponent
+    TextEditedComponent,
+    NodeDraggedComponent,
+    NodeLabelDraggedComponent,
+    DrawingDraggedComponent,
+    LinkCreatedComponent,
+    InterfaceLabelDraggedComponent
   ],
   imports: [
     BrowserModule,

src/app/cartography/components/d3-map/d3-map.component.html

@@ -14,3 +14,4 @@
 <app-text-adding></app-text-adding>
 <app-text-editing></app-text-editing>
 <app-draggable-selection [svg]="svg"></app-draggable-selection>
+<!-- markup z odwolaniem do svg przekazany do toola-->

src/app/components/drawings-listeners/drawing-dragged/drawing-dragged.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit, OnDestroy } from "@angular/core";
+import { Subscription } from 'rxjs';
+import { DrawingsDataSource } from '../../../cartography/datasources/drawings-datasource';
+import { Server } from '../../../models/server';
+import { DrawingService } from '../../../services/drawing.service';
+import { DraggedDataEvent } from '../../../cartography/events/event-source';
+import { MapDrawing } from '../../../cartography/models/map/map-drawing';
+import { Drawing } from '../../../cartography/models/drawing';
+import { DrawingsEventSource } from '../../../cartography/events/drawings-event-source';
+
+
+@Component({
+    selector: 'app-drawing-dragged',
+    templateUrl: './drawing-dragged.component.html',
+    styleUrls: ['./drawing-dragged.component.css']
+})
+export class DrawingDraggedComponent implements OnInit, OnDestroy{
+    @Input() server: Server;
+    private drawingDragged: Subscription;
+
+    constructor(
+        private drawingService: DrawingService,
+        private drawingsDataSource: DrawingsDataSource,
+        private drawingsEventSource: DrawingsEventSource
+    ){}
+
+    ngOnInit(){
+        this.drawingDragged = this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt));
+    }
+
+    onDrawingDragged(draggedEvent: DraggedDataEvent<MapDrawing>) {
+        const drawing = this.drawingsDataSource.get(draggedEvent.datum.id);
+        drawing.x += draggedEvent.dx;
+        drawing.y += draggedEvent.dy;
+    
+        this.drawingService
+        .updatePosition(this.server, drawing, drawing.x, drawing.y)
+        .subscribe((serverDrawing: Drawing) => {
+            this.drawingsDataSource.update(serverDrawing);
+        });
+    }
+    
+    ngOnDestroy(){
+        this.drawingDragged.unsubscribe();
+    }
+}

src/app/components/drawings-listeners/drawing-resized/drawing-resized.component.ts

@@ -30,13 +30,13 @@ export class DrawingResizedComponent implements OnInit, OnDestroy{
         this.drawingResized = this.drawingsEventSource.resized.subscribe((evt) => this.onDrawingResized(evt))
     }
 
-    public onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
+    onDrawingResized(resizedEvent: ResizedDataEvent<MapDrawing>) {
         const drawing = this.drawingsDataSource.get(resizedEvent.datum.id);
         let svgString = this.mapDrawingToSvgConverter.convert(resizedEvent.datum);
         
         this.drawingService
-          .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)
+        .updateSizeAndPosition(this.server, drawing, resizedEvent.x, resizedEvent.y, svgString)
-          .subscribe((serverDrawing: Drawing) => {
+        .subscribe((serverDrawing: Drawing) => {
             this.drawingsDataSource.update(serverDrawing);
         });
     }

src/app/components/drawings-listeners/interface-label-dragged/interface-label-dragged.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input } from "@angular/core";
+import { Server } from '../../../models/server';
+import { LinksDataSource } from '../../../cartography/datasources/links-datasource';
+import { LinkService } from '../../../services/link.service';
+import { DraggedDataEvent } from '../../../cartography/events/event-source';
+import { MapLinkNode } from '../../../cartography/models/map/map-link-node';
+import { Link } from '../../../models/link';
+import { Subscription } from 'rxjs';
+import { LinksEventSource } from '../../../cartography/events/links-event-source';
+
+
+@Component({
+    selector: 'app-interface-label-dragged',
+    templateUrl: './interface-label-dragged.component.html',
+    styleUrls: ['./interface-label-dragged.component.css']
+})
+export class InterfaceLabelDraggedComponent{
+    @Input() server: Server;
+    private interfaceDragged: Subscription;
+
+    constructor(
+        private linkService: LinkService,
+        private linksDataSource: LinksDataSource,
+        private linksEventSource: LinksEventSource
+    ){}
+
+    ngOnInit(){
+        this.interfaceDragged = this.linksEventSource.interfaceDragged.subscribe((evt) => this.onInterfaceLabelDragged(evt));
+    }
+
+    onInterfaceLabelDragged(draggedEvent: DraggedDataEvent<MapLinkNode>) {
+        const link = this.linksDataSource.get(draggedEvent.datum.linkId);
+        if (link.nodes[0].node_id === draggedEvent.datum.nodeId) {
+            link.nodes[0].label.x += draggedEvent.dx;
+            link.nodes[0].label.y += draggedEvent.dy;
+        }
+        if (link.nodes[1].node_id === draggedEvent.datum.nodeId) {
+            link.nodes[1].label.x += draggedEvent.dx;
+            link.nodes[1].label.y += draggedEvent.dy;
+        }
+    
+        this.linkService
+        .updateNodes(this.server, link, link.nodes)
+        .subscribe((serverLink: Link) => {
+            this.linksDataSource.update(serverLink);
+        });
+    }
+
+    ngOnDestroy(){
+        this.interfaceDragged.unsubscribe();
+    }
+}

src/app/components/drawings-listeners/link-created/link-created.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnDestroy, Input, OnInit } from "@angular/core";
+import { Server } from '../../../models/server';
+import { LinkService } from '../../../services/link.service';
+import { ProjectService } from '../../../services/project.service';
+import { MapNodeToNodeConverter } from '../../../cartography/converters/map/map-node-to-node-converter';
+import { MapPortToPortConverter } from '../../../cartography/converters/map/map-port-to-port-converter';
+import { LinksDataSource } from '../../../cartography/datasources/links-datasource';
+import { Subscription } from 'rxjs';
+import { Project } from '../../../models/project';
+import { MapLinkCreated } from '../../../cartography/events/links';
+import { Link } from "../../../models/link";
+import { LinksEventSource } from '../../../cartography/events/links-event-source';
+
+
+@Component({
+    selector: 'app-link-created',
+    templateUrl: './link-created.component.html',
+    styleUrls: ['./link-created.component.css']
+})
+export class LinkCreatedComponent implements OnInit, OnDestroy{
+    @Input() server: Server;
+    @Input() project: Project;
+    private linkCreated: Subscription;
+
+    constructor(
+        private projectService: ProjectService,
+        private linkService: LinkService,
+        private linksDataSource: LinksDataSource,
+        private linksEventSource: LinksEventSource,
+        private mapNodeToNode: MapNodeToNodeConverter,
+        private mapPortToPort: MapPortToPortConverter
+    ){}
+
+    ngOnInit(){
+        this.linkCreated = this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt));
+    }
+
+    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);
+            });
+        });
+    }
+
+    ngOnDestroy(){
+        this.linkCreated.unsubscribe();
+    }
+}

src/app/components/drawings-listeners/node-dragged/node-dragged.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnInit, OnDestroy } from "@angular/core";
+import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
+import { NodeService } from '../../../services/node.service';
+import { DraggedDataEvent } from '../../../cartography/events/event-source';
+import { Node } from '../../../cartography/models/node';
+import { Server } from '../../../models/server';
+import { NodesEventSource } from '../../../cartography/events/nodes-event-source';
+import { MapNode } from '../../../cartography/models/map/map-node';
+import { Subscription } from 'rxjs';
+
+
+@Component({
+    selector: 'app-node-dragged',
+    templateUrl: './node-dragged.component.html',
+    styleUrls: ['./node-dragged.component.css']
+})
+export class NodeDraggedComponent implements OnInit, OnDestroy{
+    @Input() server: Server;
+    private nodeDragged: Subscription;
+
+    constructor(
+        private nodesDataSource: NodesDataSource,
+        private nodeService: NodeService,
+        private nodesEventSource: NodesEventSource
+    ){}
+
+    ngOnInit(){
+        this.nodeDragged = this.nodesEventSource.dragged.subscribe((evt) => this.onNodeDragged(evt));
+    }
+
+    onNodeDragged(draggedEvent: DraggedDataEvent<MapNode>) {
+        const node = this.nodesDataSource.get(draggedEvent.datum.id);
+        node.x += draggedEvent.dx;
+        node.y += draggedEvent.dy;
+    
+        this.nodeService
+        .updatePosition(this.server, node, node.x, node.y)
+        .subscribe((serverNode: Node) => {
+            this.nodesDataSource.update(serverNode);
+        });
+    }
+
+    ngOnDestroy(){
+        this.nodeDragged.unsubscribe();
+    }
+}

src/app/components/drawings-listeners/node-label-dragged/node-label-dragged.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit, OnDestroy } from "@angular/core";
+import { NodesDataSource } from '../../../cartography/datasources/nodes-datasource';
+import { NodesEventSource } from '../../../cartography/events/nodes-event-source';
+import { NodeService } from '../../../services/node.service';
+import { MapLabelToLabelConverter } from '../../../cartography/converters/map/map-label-to-label-converter';
+import { Node } from '../../../cartography/models/node';
+import { Server } from '../../../models/server';
+import { Subscription } from 'rxjs';
+import { DraggedDataEvent } from '../../../cartography/events/event-source';
+import { MapLabel } from '../../../cartography/models/map/map-label';
+
+
+@Component({
+    selector: 'app-node-label-dragged',
+    templateUrl: './node-label-dragged.component.html',
+    styleUrls: ['./node-label-dragged.component.css']
+})
+export class NodeLabelDraggedComponent implements OnInit, OnDestroy{
+    @Input() server: Server;
+    private nodeLabelDragged: Subscription;
+
+    constructor(
+        private nodesDataSource: NodesDataSource,
+        private nodeService: NodeService,
+        private nodesEventSource: NodesEventSource,
+        private mapLabelToLabel: MapLabelToLabelConverter
+    ){}
+
+    ngOnInit(){
+        this.nodeLabelDragged = this.nodesEventSource.labelDragged.subscribe((evt) => this.onNodeLabelDragged(evt));
+    }
+
+    onNodeLabelDragged(draggedEvent: DraggedDataEvent<MapLabel>) {
+        const node = this.nodesDataSource.get(draggedEvent.datum.nodeId);
+        const mapLabel = draggedEvent.datum;
+        mapLabel.x += draggedEvent.dx;
+        mapLabel.y += draggedEvent.dy;
+    
+        const label = this.mapLabelToLabel.convert(mapLabel);
+        node.label = label;
+    
+        this.nodeService
+        .updateLabel(this.server, node, node.label)
+        .subscribe((serverNode: Node) => {
+            this.nodesDataSource.update(serverNode);
+        });
+    }
+    
+    ngOnDestroy(){
+        this.nodeLabelDragged.unsubscribe();
+    }
+}

src/app/components/drawings-listeners/text-edited/text-edited.component.ts

@@ -31,7 +31,7 @@ export class TextEditedComponent implements OnInit, OnDestroy{
         this.textEdited = this.drawingsEventSource.textEdited.subscribe((evt) => this.onTextEdited(evt));
     }
 
-    public onTextEdited(evt: TextEditedDataEvent){
+    onTextEdited(evt: TextEditedDataEvent){
         let mapDrawing: MapDrawing = new MapDrawing();
         mapDrawing.element = evt.textElement;
         (mapDrawing.element as TextElement).text = evt.editedText;

src/app/components/project-map/project-map.component.html

@@ -11,7 +11,7 @@
     [selection-tool]="tools.selection"
     [moving-tool]="tools.moving"
     [text-editing-tool]="tools.text_editing"
-    [text-adding-tool]="drawTools.isAddingTextChosen"
+    [text-adding-tool]="drawTools.isTextChosen"
     [draw-link-tool]="tools.draw_link"
     [readonly]="inReadOnlyMode"
     (nodeDragged)="onNodeDragged($event)"
@@ -155,5 +155,10 @@
   (drawingSaved)="onDrawingSaved($event)">
 </app-add-drawing>
 
+<app-drawing-dragged [server]="server"></app-drawing-dragged>
 <app-drawing-resized [server]="server"></app-drawing-resized>
+<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
+<app-link-created [server]="server" [project]="project"></app-link-created>
+<app-node-dragged [server]="server"></app-node-dragged>
+<app-node-label-dragged [server]="server"></app-node-label-dragged>
 <app-text-edited [server]="server"></app-text-edited>

src/app/components/project-map/project-map.component.ts

@@ -16,7 +16,6 @@ import { NodeContextMenuComponent } from "./node-context-menu/node-context-menu.
 import { Template } from "../../models/template";
 import { NodeService } from "../../services/node.service";
 import { Symbol } from "../../models/symbol";
-import { LinkService } from "../../services/link.service";
 import { NodesDataSource } from "../../cartography/datasources/nodes-datasource";
 import { LinksDataSource } from "../../cartography/datasources/links-datasource";
 import { ProjectWebServiceHandler } from "../../handlers/project-web-service-handler";
@@ -24,24 +23,12 @@ 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 { 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';
-import { MapDrawingToSvgConverter } from '../../cartography/converters/map/map-drawing-to-svg-converter';
 import { SettingsService, Settings } from '../../services/settings.service';
-import { MapLabel } from '../../cartography/models/map/map-label';
 import { D3MapComponent } from '../../cartography/components/d3-map/d3-map.component';
-import { MapLinkNode } from '../../cartography/models/map/map-link-node';
-import { MapLabelToLabelConverter } from '../../cartography/converters/map/map-label-to-label-converter';
-import { DefaultDrawingsFactory } from '../../cartography/helpers/default-drawings-factory';
 
 
 @Component({
@@ -57,7 +44,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public symbols: Symbol[] = [];
   public project: Project;
   public server: Server;
-  private drawListener: Function;
   private ws: Subject<any>;
 
   tools = {
@@ -91,24 +77,17 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private serverService: ServerService,
     private projectService: ProjectService,
     private nodeService: NodeService,
-    private linkService: LinkService,
     public drawingService: DrawingService,
     private progressService: ProgressService,
     private projectWebServiceHandler: ProjectWebServiceHandler,
     private mapChangeDetectorRef: MapChangeDetectorRef,
     private nodeWidget: NodeWidget,
     private mapNodeToNode: MapNodeToNodeConverter,
-    private mapPortToPort: MapPortToPortConverter,
     private nodesDataSource: NodesDataSource,
     private linksDataSource: LinksDataSource,
     private drawingsDataSource: DrawingsDataSource,
-    private nodesEventSource: NodesEventSource,
-    private drawingsEventSource: DrawingsEventSource,
     private linksEventSource: LinksEventSource,
-    private mapDrawingToSvgConverter: MapDrawingToSvgConverter,
+    private settingsService: SettingsService
-    private settingsService: SettingsService,
-    private mapLabelToLabel: MapLabelToLabelConverter,
-    private drawingsFactory: DefaultDrawingsFactory
   ) {}
 
   ngOnInit() {
@@ -174,22 +153,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       })
     );
 
-    this.subscriptions.push(
-      this.nodesEventSource.dragged.subscribe((evt) => this.onNodeDragged(evt))
-    );
-
-    this.subscriptions.push(
-      this.nodesEventSource.labelDragged.subscribe((evt) => this.onNodeLabelDragged(evt))
-    );
-
-    this.subscriptions.push(
-      this.drawingsEventSource.dragged.subscribe((evt) => this.onDrawingDragged(evt))
-    );
-
-    this.subscriptions.push(
-      this.linksEventSource.created.subscribe((evt) => this.onLinkCreated(evt))
-    );
-
     this.subscriptions.push(
       this.linksEventSource.interfaceDragged.subscribe((evt) => this.onInterfaceLabelDragged(evt))
     );
@@ -213,7 +176,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       .subscribe((drawings: Drawing[]) => {
         this.drawingsDataSource.set(drawings);
 
-        this.setUpMapCallbacks(project);
+        this.setUpMapCallbacks();
         this.setUpWS(project);
 
         this.progressService.deactivate();
@@ -230,7 +193,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     );
   }
 
-  setUpMapCallbacks(project: Project) {
+  setUpMapCallbacks() {
     const onContextMenu = this.nodeWidget.onContextMenu.subscribe((eventNode: NodeContextMenu) => {
       const node = this.mapNodeToNode.convert(eventNode.node);
       this.nodeContextMenu.open(
@@ -247,89 +210,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   onNodeCreation(template: Template) {
     this.nodeService
       .createFromTemplate(this.server, this.project, template, 0, 0, 'local')
-      .subscribe((createdNode: Node) => {
-        this.projectService
-          .nodes(this.server, this.project.project_id)
-          .subscribe((nodes: Node[]) => {
-            this.nodesDataSource.set(nodes);
-        });
-      });
-  }
-
-  private onNodeDragged(draggedEvent: DraggedDataEvent<MapNode>) {
-    const node = this.nodesDataSource.get(draggedEvent.datum.id);
-    node.x += draggedEvent.dx;
-    node.y += draggedEvent.dy;
-
-    this.nodeService
-      .updatePosition(this.server, node, node.x, node.y)
-      .subscribe((serverNode: Node) => {
-        this.nodesDataSource.update(serverNode);
-      });
-  }
-
-  private onNodeLabelDragged(draggedEvent: DraggedDataEvent<MapLabel>) {
-    const node = this.nodesDataSource.get(draggedEvent.datum.nodeId);
-    const mapLabel = draggedEvent.datum;
-    mapLabel.x += draggedEvent.dx;
-    mapLabel.y += draggedEvent.dy;
-
-    const label = this.mapLabelToLabel.convert(mapLabel);
-    node.label = label;
-
-    this.nodeService
-      .updateLabel(this.server, node, node.label)
-      .subscribe((serverNode: Node) => {
-        this.nodesDataSource.update(serverNode);
-      });
-  }
-
-  private onDrawingDragged(draggedEvent: DraggedDataEvent<MapDrawing>) {
-    const drawing = this.drawingsDataSource.get(draggedEvent.datum.id);
-    drawing.x += draggedEvent.dx;
-    drawing.y += draggedEvent.dy;
-
-    this.drawingService
-      .updatePosition(this.server, drawing, drawing.x, drawing.y)
-      .subscribe((serverDrawing: Drawing) => {
-        this.drawingsDataSource.update(serverDrawing);
-      });
-  }
-
-  private onInterfaceLabelDragged(draggedEvent: DraggedDataEvent<MapLinkNode>) {
-    const link = this.linksDataSource.get(draggedEvent.datum.linkId);
-    if (link.nodes[0].node_id === draggedEvent.datum.nodeId) {
-      link.nodes[0].label.x += draggedEvent.dx;
-      link.nodes[0].label.y += draggedEvent.dy;
-    }
-    if (link.nodes[1].node_id === draggedEvent.datum.nodeId) {
-      link.nodes[1].label.x += draggedEvent.dx;
-      link.nodes[1].label.y += draggedEvent.dy;
-    }
-
-    this.linkService
-      .updateNodes(this.server, link, link.nodes)
-      .subscribe((serverLink: Link) => {
-        this.linksDataSource.update(serverLink);
-      });
-  }
-
-  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.projectService
-          this.linksDataSource.set(links);
+            .nodes(this.server, this.project.project_id)
+            .subscribe((nodes: Node[]) => {
+              this.nodesDataSource.set(nodes);
+            });
         });
-      });
   }
 
-  public onDrawingSaved(evt: boolean){
+  public onDrawingSaved(){
     this.resetDrawToolChoice();
   }