From 2b5b73ba3814dd44b29fa7a16a55608caea929d0 Mon Sep 17 00:00:00 2001
From: ziajka <dominik@gns3.net>
Date: Mon, 11 Jun 2018 14:08:35 +0200
Subject: [PATCH] Show/hide interfaces labels support, Fixes: #133

---
 .../shared/widgets/interface-label.spec.ts           |  9 +++++++++
 .../cartography/shared/widgets/interface-label.ts    | 10 +++++++++-
 src/app/project-map/project-map.component.css        |  6 ++++++
 src/app/project-map/project-map.component.html       | 12 ++++++++++++
 src/app/project-map/project-map.component.ts         |  8 ++++++++
 src/app/shared/models/project.ts                     |  6 +++++-
 6 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/app/cartography/shared/widgets/interface-label.spec.ts b/src/app/cartography/shared/widgets/interface-label.spec.ts
index 90d499d7..84c151bb 100644
--- a/src/app/cartography/shared/widgets/interface-label.spec.ts
+++ b/src/app/cartography/shared/widgets/interface-label.spec.ts
@@ -100,6 +100,15 @@ describe('InterfaceLabelsWidget', () => {
 
   });
 
+  it('should not draw interface labels when disabled', () => {
+    widget.setEnabled(false);
+    widget.draw(linksEnter);
+
+    const drew = svg.canvas.selectAll<SVGGElement, InterfaceLabel>('g.interface_label_container');
+
+    expect(drew.nodes().length).toEqual(0);
+  });
+
   it('should draw interface label with class `selected` when selected', () => {
     links[0].nodes[0].label.is_selected = true;
 
diff --git a/src/app/cartography/shared/widgets/interface-label.ts b/src/app/cartography/shared/widgets/interface-label.ts
index 4eafb9f1..a69e421f 100644
--- a/src/app/cartography/shared/widgets/interface-label.ts
+++ b/src/app/cartography/shared/widgets/interface-label.ts
@@ -9,11 +9,16 @@ export class InterfaceLabelWidget {
   static SURROUNDING_TEXT_BORDER = 5;
 
   private cssFixer: CssFixer;
+  private enabled = true;
 
   constructor() {
     this.cssFixer = new CssFixer();
   }
 
+  public setEnabled(enabled: boolean) {
+    this.enabled = enabled;
+  }
+
   draw(selection: SVGSelection) {
 
     const labels = selection
@@ -41,7 +46,10 @@ export class InterfaceLabelWidget {
           l.nodes[1].label.is_selected
         );
 
-        return [sourceInterface, targetInterface];
+        if (this.enabled) {
+          return [sourceInterface, targetInterface];
+        }
+        return [];
       });
 
     const enter = labels
diff --git a/src/app/project-map/project-map.component.css b/src/app/project-map/project-map.component.css
index 472dceb9..ee61573f 100644
--- a/src/app/project-map/project-map.component.css
+++ b/src/app/project-map/project-map.component.css
@@ -75,3 +75,9 @@ g.node text,
   border: none;
   -moz-outline-style: none
 }
+
+.options-item {
+  padding-left: 15px;
+  padding-right: 15px;
+
+}
diff --git a/src/app/project-map/project-map.component.html b/src/app/project-map/project-map.component.html
index 8a437510..067bff29 100644
--- a/src/app/project-map/project-map.component.html
+++ b/src/app/project-map/project-map.component.html
@@ -21,6 +21,18 @@
         </button>
       </mat-menu>
 
+      <mat-toolbar-row>
+        <button mat-icon-button [matMenuTriggerFor]="viewMenu">
+          <mat-icon>view_module</mat-icon>
+        </button>
+      </mat-toolbar-row>
+
+      <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
+        <div class="options-item">
+          <mat-checkbox [(ngModel)]="showIntefaceLabels" (change)="toggleShowInterfaceLabels($event.checked)">Show interface labels</mat-checkbox>
+        </div>
+      </mat-menu>
+
       <mat-toolbar-row *ngIf="!project.readonly">
         <button mat-icon-button [color]="drawLineMode ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
           <mat-icon>timeline</mat-icon>
diff --git a/src/app/project-map/project-map.component.ts b/src/app/project-map/project-map.component.ts
index 86e49ffb..22055c21 100644
--- a/src/app/project-map/project-map.component.ts
+++ b/src/app/project-map/project-map.component.ts
@@ -314,6 +314,14 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       });
   }
 
+  public toggleShowInterfaceLabels(enabled: boolean) {
+    this.project.show_interface_labels = enabled;
+
+    this.mapChild.graphLayout.getLinksWidget().getInterfaceLabelWidget()
+      .setEnabled(this.project.show_interface_labels);
+    this.mapChild.reload();
+  }
+
   public ngOnDestroy() {
     this.drawingsDataSource.clear();
     this.nodesDataSource.clear();
diff --git a/src/app/shared/models/project.ts b/src/app/shared/models/project.ts
index 49301e55..03760b35 100644
--- a/src/app/shared/models/project.ts
+++ b/src/app/shared/models/project.ts
@@ -9,5 +9,9 @@ export class Project {
   scene_height: number;
   scene_width: number;
   status: string;
-  readonly: boolean = true;
+  readonly: boolean;
+  show_interface_labels: boolean;
+  show_layers: boolean;
+  show_grid: boolean;
+  snap_to_grid: boolean;
 }