Toggle button added

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

@@ -153,6 +153,10 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
     });
   }
 
+  public applyMapSettingsChanges() {
+    this.redraw();
+  }
+
   public createGraph(domElement: HTMLElement) {
     const rootElement = select(domElement);
     this.svg = rootElement.select<SVGSVGElement>('svg');

src/app/cartography/widgets/drawing.ts

@@ -13,6 +13,7 @@ import { SelectionManager } from '../managers/selection-manager';
 import { LineElement } from '../models/drawings/line-element';
 import { EllipseElement } from '../models/drawings/ellipse-element';
 import { RectElement } from '../models/drawings/rect-element';
+import { MapSettingsService } from '../../services/mapsettings.service';
 
 @Injectable()
 export class DrawingWidget implements Widget {
@@ -24,7 +25,8 @@ export class DrawingWidget implements Widget {
     private rectDrawingWidget: RectDrawingWidget,
     private lineDrawingWidget: LineDrawingWidget,
     private ellipseDrawingWidget: EllipseDrawingWidget,
-    private selectionManager: SelectionManager
+    private selectionManager: SelectionManager,
+    private mapSettingsService: MapSettingsService
   ) {
     this.drawingWidgets = [
       this.textDrawingWidget,
@@ -52,6 +54,7 @@ export class DrawingWidget implements Widget {
     });
 
     drawing_body_merge.select('.layer_label_wrapper').remove();
+    if (this.mapSettingsService.isLayerNumberVisible) {
       drawing_body_merge
         .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
         .append<SVGRectElement>('rect')
@@ -61,8 +64,10 @@ export class DrawingWidget implements Widget {
         .attr('x', n => n.element ? n.element.width/2 - 13 : 0)
         .attr('y', n => n.element ? n.element.height/2 - 13 : 0)
         .attr('fill', 'red');
+    }
 
     drawing_body_merge.select('.layer_label').remove();
+    if (this.mapSettingsService.isLayerNumberVisible) {
       drawing_body_merge
         .filter(n => ((n.element instanceof RectElement) || (n.element instanceof EllipseElement)))
         .append<SVGTextElement>('text')
@@ -82,6 +87,7 @@ export class DrawingWidget implements Widget {
           return styles.join('; ');
         })
         .attr('fill', `#ffffff`);
+    }
 
     drawing_body_merge
       .select<SVGAElement>('line.top')

src/app/cartography/widgets/node.ts

@@ -10,6 +10,7 @@ import { SelectionManager } from '../managers/selection-manager';
 import { LabelWidget } from './label';
 import { NodesEventSource } from '../events/nodes-event-source';
 import { ClickedDataEvent } from '../events/event-source';
+import { MapSettingsService } from '../../services/mapsettings.service';
 
 @Injectable()
 export class NodeWidget implements Widget {
@@ -20,7 +21,8 @@ export class NodeWidget implements Widget {
     private graphDataManager: GraphDataManager,
     private selectionManager: SelectionManager,
     private labelWidget: LabelWidget,
-    private nodesEventSource: NodesEventSource
+    private nodesEventSource: NodesEventSource,
+    private mapSettingsService: MapSettingsService
   ) {}
 
   public draw(view: SVGSelection) {
@@ -43,6 +45,7 @@ export class NodeWidget implements Widget {
       });
 
     node_body_merge.select('.layer_label_wrapper').remove();
+    if (this.mapSettingsService.isLayerNumberVisible) {
       node_body_merge
         .append<SVGRectElement>('rect')
         .attr('class', 'layer_label_wrapper')
@@ -51,8 +54,10 @@ export class NodeWidget implements Widget {
         .attr('x', (n: MapNode) => n.width/2 - 13)
         .attr('y', (n: MapNode) => n.height/2 - 13)
         .attr('fill', 'red');
+    }
 
     node_body_merge.select('.layer_label').remove();
+    if (this.mapSettingsService.isLayerNumberVisible) {
       node_body_merge
         .append<SVGTextElement>('text')
         .attr('class', 'layer_label')
@@ -71,6 +76,7 @@ export class NodeWidget implements Widget {
           return styles.join('; ');
         })
         .attr('fill', `#ffffff`);
+    }
 
     // update image of node
     node_body_merge

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

@@ -90,6 +90,9 @@
           <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
             Show notifications
           </mat-checkbox>
+          <mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
+            Show layers
+          </mat-checkbox>
         </div>
       </mat-menu>
 

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

@@ -83,6 +83,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public isTopologySummaryVisible: boolean = false;
   public isInterfaceLabelVisible: boolean = false;
   public notificationsVisibility: boolean = false;
+  public layersVisibility: boolean = false;
 
   tools = {
     selection: true,
@@ -238,6 +239,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     }));
 
     this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
+    this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
     this.addKeyboardListeners();
   }
 
@@ -479,6 +481,17 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     }
   }
 
+  public toggleLayers(visible: boolean) {
+    this.layersVisibility = visible;
+    this.mapSettingsService.toggleLayers(visible);
+    if (this.layersVisibility) {
+      localStorage.setItem('layersVisibility', 'true');
+    } else {
+      localStorage.removeItem('layersVisibility')
+    }
+    this.mapChild.applyMapSettingsChanges();
+  }
+
   private showMessage(msg) {
     if (this.notificationsVisibility) {
       if (msg.type === 'error') this.toasterService.error(msg.message);

src/app/services/mapsettings.service.ts

@@ -6,9 +6,12 @@ export class MapSettingsService {
     public isMapLocked = new Subject<boolean>();
     public isTopologySummaryVisible: boolean = false;
     public isLogConsoleVisible: boolean = false;
+    public isLayerNumberVisible: boolean = false;
     public interfaceLabels: Map<string, boolean> = new Map<string, boolean>();
 
-    constructor() {}
+    constructor() {
+        this.isLayerNumberVisible = localStorage.getItem('layersVisibility') === 'true' ? true : false;
+    }
 
     changeMapLockValue(value: boolean) {
         this.isMapLocked.next(value);
@@ -22,6 +25,10 @@ export class MapSettingsService {
         this.isLogConsoleVisible = value;
     }
 
+    toggleLayers(value: boolean) {
+        this.isLayerNumberVisible = value;
+    }
+
     toggleShowInterfaceLabels(projectId: string, value: boolean) {
         this.interfaceLabels.set(projectId, value);
     }