gns3-web-ui/src/app/components/project-map/project-map.component.html

<div *ngIf="project" class="project-map">
  <app-map [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height"></app-map>

  <div class="project-toolbar">
    <mat-toolbar color="primary" class="project-toolbar">

      <mat-toolbar-row>
        <button mat-icon-button [matMenuTriggerFor]="mainMenu">
          <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>
          <span>Projects</span>
        </button>
        <button mat-menu-item [routerLink]="['/servers']">
          <mat-icon>developer_board</mat-icon>
          <span>Servers</span>
        </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="!readonly">
        <button mat-icon-button [color]="drawLineMode ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
          <mat-icon>timeline</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <button mat-icon-button [color]="movingMode ? 'primary': 'basic'" (click)="toggleMovingMode()">
          <mat-icon>zoom_out_map</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row *ngIf="!readonly" >
        <button mat-icon-button (click)="createSnapshotModal()">
          <mat-icon>snooze</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row *ngIf="!readonly" >
        <app-appliance [server]="server" (onNodeCreation)="onNodeCreation($event)"></app-appliance>
      </mat-toolbar-row>

    </mat-toolbar>
  </div>

  <app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
  <app-node-select-interface (onChooseInterface)="onChooseInterface($event)"></app-node-select-interface>
</div>

<app-progress></app-progress>

<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server" [selectionManager]="selectionManager"></app-project-map-shortcuts>