From caca22edb621756f3165dcf0d61aac471b5e6b73 Mon Sep 17 00:00:00 2001 From: ziajka Date: Mon, 5 Nov 2018 15:24:14 +0100 Subject: [PATCH] Map change detector ref --- .../components/map/map.component.ts | 28 ++++++++++--------- .../services/map-change-detector-ref.spec.ts | 15 ++++++++++ .../services/map-change-detector-ref.ts | 8 ++++-- .../project-map/project-map.component.ts | 16 ++++------- 4 files changed, 41 insertions(+), 26 deletions(-) create mode 100644 src/app/cartography/services/map-change-detector-ref.spec.ts diff --git a/src/app/cartography/components/map/map.component.ts b/src/app/cartography/components/map/map.component.ts index ee67cea2..33ee2907 100644 --- a/src/app/cartography/components/map/map.component.ts +++ b/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.redraw(); - } + this.mapChangeDetectorRef.detectChanges(); } @Input('moving-tool') set movingTool(value) { this.movingToolWidget.setEnabled(value); - - if(this.isReady) { - this.redraw(); - } + this.mapChangeDetectorRef.detectChanges(); } - @Input('selection-tool') - set selectionTool(value) { + @Input('selection-tool') + set selectionTool(value) { this.selectionToolWidget.setEnabled(value); - - if(this.isReady) { - this.redraw(); - } + this.mapChangeDetectorRef.detectChanges(); } 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) { diff --git a/src/app/cartography/services/map-change-detector-ref.spec.ts b/src/app/cartography/services/map-change-detector-ref.spec.ts new file mode 100644 index 00000000..1da428ef --- /dev/null +++ b/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); + }) +}); diff --git a/src/app/cartography/services/map-change-detector-ref.ts b/src/app/cartography/services/map-change-detector-ref.ts index 5434bffc..e0644238 100644 --- a/src/app/cartography/services/map-change-detector-ref.ts +++ b/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 changesDetected = new EventEmitter(); + public detectChanges() { - + this.changesDetected.emit(true); } } diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 3ba1cc91..b5ac63df 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/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.mapChild.reload(); - } + this.mapChangeDetectorRef.detectChanges(); }) ); this.subscriptions.push( this.nodesDataSource.changes.subscribe((nodes: Node[]) => { this.nodes = nodes; - if (this.mapChild) { - this.mapChild.reload(); - } + this.mapChangeDetectorRef.detectChanges(); }) ); this.subscriptions.push( this.linksDataSource.changes.subscribe((links: Link[]) => { this.links = links; - if (this.mapChild) { - this.mapChild.reload(); - } + this.mapChangeDetectorRef.detectChanges(); }) ); } @@ -217,7 +213,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy { this.mapChild.graphLayout.getSelectionTool().rectangleSelected) ); - this.mapChild.reload(); + this.mapChangeDetectorRef.detectChanges(); } onNodeCreation(appliance: Appliance) {