Map change detector ref

src/app/cartography/components/map/map.component.ts

@@ -17,6 +17,7 @@ import { InterfaceLabelWidget } from '../../widgets/interface-label';
 import { SelectionTool } from '../../tools/selection-tool';
 import { MovingTool } from '../../tools/moving-tool';
 import { LinksWidget } from '../../widgets/links';
+import { MapChangeDetectorRef } from '../../services/map-change-detector-ref';
 
 
 @Component({
@@ -42,6 +43,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   private isReady = false;
 
   private onNodeDraggingSubscription: Subscription;
+  private onChangesDetected: Subscription;
 
   protected settings = {
     'show_interface_labels': true
@@ -49,6 +51,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
   constructor(
     private context: Context,
+    private mapChangeDetectorRef: MapChangeDetectorRef,
     protected element: ElementRef,
     protected d3Service: D3Service,
     protected nodesWidget: NodesWidget,
@@ -67,27 +70,19 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   set showInterfaceLabels(value) {
     this.settings.show_interface_labels = value;
     this.interfaceLabelWidget.setEnabled(value);
-    if (this.isReady) {
+    this.mapChangeDetectorRef.detectChanges();
-      this.redraw();
-    }
   }
 
   @Input('moving-tool')
   set movingTool(value) {
     this.movingToolWidget.setEnabled(value);
-
+    this.mapChangeDetectorRef.detectChanges();
-    if(this.isReady) {
-      this.redraw();
-    }
   }
 
-   @Input('selection-tool')
+  @Input('selection-tool')
-   set selectionTool(value) {
+  set selectionTool(value) {
     this.selectionToolWidget.setEnabled(value);
-
+    this.mapChangeDetectorRef.detectChanges();
-     if(this.isReady) {
-       this.redraw();
-     }
   }
   
   ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
@@ -117,6 +112,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   ngOnDestroy() {
     this.graphLayout.disconnect(this.svg);
     this.onNodeDraggingSubscription.unsubscribe();
+    this.onChangesDetected.unsubscribe();
   }
 
   ngOnInit() {
@@ -132,6 +128,12 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
         this.linksWidget.redrawLink(this.svg, link);
       });
     });
+
+    this.onChangesDetected = this.mapChangeDetectorRef.changesDetected.subscribe(() => {
+      if (this.isReady) {
+        this.reload();
+      }
+    });
   }
 
   public createGraph(domElement: HTMLElement) {

src/app/cartography/services/map-change-detector-ref.spec.ts

@@ -0,0 +1,15 @@
+import { MapChangeDetectorRef } from "./map-change-detector-ref";
+
+describe('MapChangeDetectorRef', () => {
+  let detector: MapChangeDetectorRef;
+
+  beforeEach(() => {
+    detector = new MapChangeDetectorRef();
+  });
+
+  it("should emit event", () => {
+    spyOn(detector.changesDetected, 'emit');
+    detector.detectChanges();
+    expect(detector.changesDetected.emit).toHaveBeenCalledWith(true);
+  })
+});

src/app/cartography/services/map-change-detector-ref.ts

@@ -1,9 +1,11 @@
-import { Injectable } from "@angular/core";
+import { Injectable, EventEmitter } from "@angular/core";
+
 
 @Injectable()
-
 export class MapChangeDetectorRef {
-    public detectChanges() {
+    public changesDetected = new EventEmitter<boolean>();
 
+    public detectChanges() {
+        this.changesDetected.emit(true);
     }
 }

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

@@ -29,6 +29,7 @@ import { InRectangleHelper } from "../../cartography/helpers/in-rectangle-helper
 import { DrawingsDataSource } from "../../cartography/datasources/drawings-datasource";
 import { ProgressService } from "../../common/progress/progress.service";
 import { NodeEvent } from '../../cartography/widgets/nodes';
+import { MapChangeDetectorRef } from '../../cartography/services/map-change-detector-ref';
 
 
 @Component({
@@ -74,6 +75,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
               private linkService: LinkService,
               private progressService: ProgressService,
               private projectWebServiceHandler: ProjectWebServiceHandler,
+              private mapChangeDetectorRef: MapChangeDetectorRef,
               protected nodesDataSource: NodesDataSource,
               protected linksDataSource: LinksDataSource,
               protected drawingsDataSource: DrawingsDataSource,
@@ -130,27 +132,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.drawingsDataSource.changes.subscribe((drawings: Drawing[]) => {
         this.drawings = drawings;
-        if (this.mapChild) {
+        this.mapChangeDetectorRef.detectChanges();
-          this.mapChild.reload();
-        }
       })
     );
 
     this.subscriptions.push(
       this.nodesDataSource.changes.subscribe((nodes: Node[]) => {
         this.nodes = nodes;
-        if (this.mapChild) {
+        this.mapChangeDetectorRef.detectChanges();
-          this.mapChild.reload();
-        }
       })
     );
 
     this.subscriptions.push(
       this.linksDataSource.changes.subscribe((links: Link[]) => {
         this.links = links;
-        if (this.mapChild) {
+        this.mapChangeDetectorRef.detectChanges();
-          this.mapChild.reload();
-        }
       })
     );
   }
@@ -217,7 +213,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
         this.mapChild.graphLayout.getSelectionTool().rectangleSelected)
     );
 
-    this.mapChild.reload();
+    this.mapChangeDetectorRef.detectChanges();
   }
 
   onNodeCreation(appliance: Appliance) {