Option to show grid available from menu

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

@@ -2,13 +2,13 @@
   <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" stroke-width="1"/>
+      <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" stroke-width="1"/>
+      <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>
 

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

@@ -55,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,
@@ -145,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

@@ -93,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);