Merge pull request #552 from GNS3/Option-to-show-the-grid

Option to show the grid

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

@@ -1,5 +1,19 @@
 <svg #svg class="map" preserveAspectRatio="none" movingCanvas zoomingCanvas>
   <filter id="grayscale"><feColorMatrix id="feGrayscale" type="saturate" values="0" /></filter>
+  <defs>
+    <pattern id="gridDrawing" attr.width="{{project.drawing_grid_size}}" attr.height="{{project.drawing_grid_size}}" patternUnits="userSpaceOnUse">
+      <path attr.d="M {{project.drawing_grid_size}} 0 L 0 0 0 {{project.drawing_grid_size}}" fill="none" stroke="silver" attr.stroke-width="{{gridVisibility}}"/>
+    </pattern>
+  </defs>
+
+  <defs>
+    <pattern id="gridNode" attr.width="{{project.grid_size}}" attr.height="{{project.grid_size}}" patternUnits="userSpaceOnUse">
+      <path attr.d="M {{project.grid_size}} 0 L 0 0 0 {{project.grid_size}}" fill="none" stroke="DarkSlateGray" attr.stroke-width="{{gridVisibility}}"/>
+    </pattern>
+  </defs>
+
+  <rect width="100%" height="100%" fill="url(#gridDrawing)" />
+  <rect width="100%" height="100%" fill="url(#gridNode)" />
 </svg>
 
 <app-drawing-adding [svg]="svg"></app-drawing-adding>

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

@@ -32,6 +32,7 @@ import { Server } from '../../../models/server';
 import { ToolsService } from '../../../services/tools.service';
 import { TextEditorComponent } from '../text-editor/text-editor.component';
 import { MapScaleService } from '../../../services/mapScale.service';
+import { Project } from '../../../models/project';
 
 @Component({
   selector: 'app-d3-map',
@@ -43,6 +44,7 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() links: Link[] = [];
   @Input() drawings: Drawing[] = [];
   @Input() symbols: Symbol[] = [];
+  @Input() project: Project;
   @Input() server: Server;
 
   @Input() width = 1500;
@@ -53,15 +55,13 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
 
   private parentNativeElement: any;
   private svg: Selection<SVGSVGElement, any, null, undefined>;
-
   private onChangesDetected: Subscription;
   private subscriptions: Subscription[] = [];
-
   private drawLinkTool: boolean;
-
   protected settings = {
     show_interface_labels: true
   };
+  public gridVisibility: number = 0;
 
   constructor(
     private graphDataManager: GraphDataManager,
@@ -143,6 +143,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
         this.drawLinkTool = value;
       })
     );
+
+    this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? 1 : 0;
   }
 
   ngOnDestroy() {

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

@@ -2,6 +2,7 @@
   <app-d3-map
     *ngIf="!settings.angular_map"
     [server]="server"
+    [project]="project"
     [symbols]="symbols"
     [nodes]="nodes"
     [links]="links"
@@ -92,6 +93,9 @@
           </mat-checkbox>
           <mat-checkbox [ngModel]="layersVisibility" (change)="toggleLayers($event.checked)">
             Show layers
+          </mat-checkbox><br/>
+          <mat-checkbox [ngModel]="gridVisibility" (change)="toggleGrid($event.checked)">
+            Show grid
           </mat-checkbox>
         </div>
       </mat-menu>

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

@@ -84,6 +84,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public isInterfaceLabelVisible: boolean = false;
   public notificationsVisibility: boolean = false;
   public layersVisibility: boolean = false;
+  public gridVisibility: boolean = false;
 
   tools = {
     selection: true,
@@ -240,6 +241,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
 
     this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
     this.layersVisibility = localStorage.getItem('layersVisibility') === 'true' ? true : false;
+    this.gridVisibility = localStorage.getItem('gridVisibility') === 'true' ? true : false;
     this.addKeyboardListeners();
   }
 
@@ -492,6 +494,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.mapChild.applyMapSettingsChanges();
   }
 
+  public toggleGrid(visible: boolean) {
+    this.gridVisibility = visible;
+    if (this.gridVisibility) {
+      localStorage.setItem('gridVisibility', 'true');
+    } else {
+      localStorage.removeItem('gridVisibility');
+    }
+    this.mapChild.gridVisibility =  this.gridVisibility ? 1 : 0;
+  }
+
   private showMessage(msg) {
     if (this.notificationsVisibility) {
       if (msg.type === 'error') this.toasterService.error(msg.message);