Merge pull request #535 from GNS3/Support-for-layers

Support for layers

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

@@ -12,6 +12,8 @@ import { MapDrawing } from '../models/map/map-drawing';
 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 {
@@ -23,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,
@@ -50,6 +53,42 @@ export class DrawingWidget implements Widget {
       widget.draw(drawing_body_merge);
     });
 
+    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')
+        .attr('class', 'layer_label_wrapper')
+        .attr('width', '26')
+        .attr('height', '26')
+        .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')
+        .attr('class', 'layer_label')
+        .text((elem) => elem.z)
+        .attr('x', function(n) {
+          if(n.z >= 100 ) return n.element ? n.element.width/2 - 13 : 0
+          else if(n.z >= 10 ) return n.element ? n.element.width/2 - 9 : 0
+          else return n.element.width/2 - 5
+        })
+        .attr('y', n => n.element ? n.element.height/2 + 5 : 0)
+        .attr('style', () => {
+          const styles: string[] = [];
+          styles.push(`font-family: "Noto Sans"`);
+          styles.push(`font-size: 11pt`);
+          styles.push(`font-weight: bold`);
+          return styles.join('; ');
+        })
+        .attr('fill', `#ffffff`);
+    }
+
     drawing_body_merge
       .select<SVGAElement>('line.top')
       .attr('stroke', 'transparent')

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) {
@@ -42,6 +44,40 @@ export class NodeWidget implements Widget {
         this.nodesEventSource.clicked.emit(new ClickedDataEvent<MapNode>(node, event.pageX, event.pageY));
       });
 
+    node_body_merge.select('.layer_label_wrapper').remove();
+    if (this.mapSettingsService.isLayerNumberVisible) {
+      node_body_merge
+        .append<SVGRectElement>('rect')
+        .attr('class', 'layer_label_wrapper')
+        .attr('width', '26')
+        .attr('height', '26')
+        .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')
+        .text((n: MapNode) => { return n.z})
+        .attr('x', function(n: MapNode) {
+          if(n.z >= 100 ) return n.width/2 - 13
+          else if(n.z >= 10 ) return n.width/2 - 9
+          else return n.width/2 - 5
+        })
+        .attr('y', (n: MapNode) => n.height/2 + 5)
+        .attr('style', () => {
+          const styles: string[] = [];
+          styles.push(`font-family: "Noto Sans"`);
+          styles.push(`font-size: 11pt`);
+          styles.push(`font-weight: bold`);
+          return styles.join('; ');
+        })
+        .attr('fill', `#ffffff`);
+    }
+
     // update image of node
     node_body_merge
       .select<SVGImageElement>('image')

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);
     }