Project toolbar toggle moving button

src/app/cartography/shared/widgets/graph.widget.ts

@@ -82,7 +82,7 @@ export class GraphLayout implements Widget {
     this.drawingsWidget.draw(canvas, this.drawings);
 
 
-    // this.drawingLineTool.connect(view, context);
+    this.drawingLineTool.connect(view);
     this.selectionTool.connect(view, context);
 
     // const onZoom = function(this: SVGSVGElement) {

src/app/project-map/project-map.component.css

@@ -66,3 +66,10 @@ g.node text,
   -ms-user-select: none;
   user-select: none;
 }
+
+/* Disable outline after button click */
+.project-toolbar button {
+  outline: 0;
+  border: none;
+  -moz-outline-style: none
+}

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

@@ -9,7 +9,7 @@
           <mat-icon svgIcon="gns3"></mat-icon>
         </button>
       </mat-toolbar-row>
-      
+
       <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
         <button mat-menu-item [routerLink]="['/server', server.id, 'projects']">
           <mat-icon>work</mat-icon>
@@ -22,12 +22,14 @@
       </mat-menu>
 
       <mat-toolbar-row>
-        <button mat-icon-button (click)="turnOnDrawLineMode()" *ngIf="!drawLineMode">
+        <button mat-icon-button [color]="drawLineMode ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
           <mat-icon>timeline</mat-icon>
         </button>
+      </mat-toolbar-row>
 
-        <button mat-icon-button color="primary" (click)="turnOffDrawLineMode()" *ngIf="drawLineMode">
-          <mat-icon>timeline</mat-icon>
+      <mat-toolbar-row>
+        <button mat-icon-button [color]="movingMode ? 'primary': 'basic'" (click)="toggleMovingMode()">
+          <mat-icon>zoom_out_map</mat-icon>
         </button>
       </mat-toolbar-row>
 

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

@@ -52,6 +52,8 @@ export class ProjectMapComponent implements OnInit {
 
   private ws: Subject<any>;
   private drawLineMode =  false;
+  private movingMode = false;
+
   public isLoading = true;
 
   @ViewChild(MapComponent) mapChild: MapComponent;
@@ -255,13 +257,15 @@ export class ProjectMapComponent implements OnInit {
     });
   }
 
-  public turnOnDrawLineMode() {
-    this.drawLineMode = true;
+  public toggleDrawLineMode() {
+    this.drawLineMode = !this.drawLineMode;
+    if (!this.drawLineMode) {
+      this.mapChild.graphLayout.getDrawingLineTool().stop();
+    }
   }
 
-  public turnOffDrawLineMode() {
-    this.drawLineMode = false;
-    this.mapChild.graphLayout.getDrawingLineTool().stop();
+  public toggleMovingMode() {
+    this.movingMode = !this.movingMode;
   }
 
   public onChooseInterface(event) {