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

<div *ngIf="project" class="project-map">
  <app-d3-map
    *ngIf="!settings.angular_map"
    [server]="server"
    [symbols]="symbols"
    [nodes]="nodes"
    [links]="links"
    [drawings]="drawings"
    [width]="project.scene_width"
    [height]="project.scene_height"
    [show-interface-labels]="isInterfaceLabelVisible"
    [readonly]="inReadOnlyMode"
    (nodeDragged)="onNodeDragged($event)"
    (drawingDragged)="onDrawingDragged($event)"
    (onLinkCreated)="onLinkCreated($event)"
    (onDrawingResized)="onDrawingResized($event)"
  ></app-d3-map>

  <app-experimental-map
    *ngIf="settings.angular_map"
    [symbols]="symbols"
    [nodes]="nodes"
    [links]="links"
    [drawings]="drawings"
    [width]="project.scene_width"
    [height]="project.scene_height"
    [show-interface-labels]="isInterfaceLabelVisible"
    [selection-tool]="tools.selection"
    [moving-tool]="tools.moving"
    [draw-link-tool]="tools.draw_link"
    [readonly]="inReadOnlyMode"
  ></app-experimental-map>

  <div class="project-toolbar">
    <mat-toolbar color="primary" class="project-toolbar">
      <mat-toolbar-row>
        <button matTooltip="Open menu" 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>Go to projects</span>
        </button>
        <button mat-menu-item [routerLink]="['/servers']">
          <mat-icon>developer_board</mat-icon>
          <span>Go to servers</span>
        </button>
        <button mat-menu-item (click)="fitInView()">
          <mat-icon>fullscreen</mat-icon>
          <span>Fit in view</span>
        </button>
        <button mat-menu-item (click)="addNewProject()">
          <mat-icon>add</mat-icon>
          <span>Add new blank project</span>
        </button>
        <button mat-menu-item (click)="saveProject()">
          <mat-icon>save</mat-icon>
          <span>Save project as</span>
        </button>
        <button mat-menu-item (click)="editProject()">
          <mat-icon>edit</mat-icon>
          <span>Edit project</span>
        </button>
        <button mat-menu-item (click)="exportProject()">
          <mat-icon>call_made</mat-icon>
          <span>Export portable project</span>
        </button>
        <button mat-menu-item (click)="importProject()">
          <mat-icon>call_received</mat-icon>
          <span>Import portable project</span>
        </button>
        <button mat-menu-item (click)="deleteProject()">
          <mat-icon>delete</mat-icon>
          <span>Delete project</span>
        </button>
      </mat-menu>

      <mat-toolbar-row>
        <button matTooltip="Map settings" 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]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
            Show interface labels
          </mat-checkbox>
          <mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
            Show console
          </mat-checkbox>
          <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
            Show topology/servers summary
          </mat-checkbox>
        </div>
      </mat-menu>

      <mat-toolbar-row *ngIf="!readonly">
        <button matTooltip="Add a link" mat-icon-button [color]="tools.draw_link ? 'primary' : 'basic'" (click)="toggleDrawLineMode()">
          <mat-icon>timeline</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row>
        <button matTooltip="Enable/disable moving mode" mat-icon-button [color]="tools.moving ? 'primary' : 'basic'" (click)="toggleMovingMode()">
          <mat-icon>zoom_out_map</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row *ngIf="!readonly">
        <app-snapshot-menu-item [server]="server" [project]="project"> </app-snapshot-menu-item>
      </mat-toolbar-row>

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

      <mat-toolbar-row *ngIf="!readonly">
        <button  matTooltip="Go to preferences" mat-icon-button routerLink="/server/{{server.id}}/preferences">
          <mat-icon>settings_applications</mat-icon>
        </button>
      </mat-toolbar-row>

      <mat-toolbar-row *ngIf="!readonly">
        <button  matTooltip="Center view" mat-icon-button (click)="centerView()">
          <mat-icon>center_focus_strong</mat-icon>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
  </div>

  <div id="show-menu-wrapper" [ngClass]="{ shadowed: !isProjectMapMenuVisible }" *ngIf="!readonly">
    <button class="arrow-button" mat-icon-button (click)="showMenu()"><mat-icon>keyboard_arrow_right</mat-icon></button>
  </div>

  <div id="menu-wrapper" [ngClass]="{ extended: isProjectMapMenuVisible }">
    <app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
    <mat-divider class="divider" [vertical]="true"></mat-divider>
    <app-project-map-menu [server]="server" [project]="project"></app-project-map-menu>
    <button class="arrow-button" mat-icon-button (click)="hideMenu()"><mat-icon>keyboard_arrow_left</mat-icon></button>
  </div>

  <app-context-menu [project]="project" [server]="server"></app-context-menu>
</div>

<div id="zoom-buttons">
  <button class="zoom-button" (click)="zoomIn()">+</button>
  <button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
  <button class="zoom-button" (click)="zoomOut()">-</button>
</div>

<app-progress></app-progress>
<app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts>
<app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>

<app-drawing-dragged [server]="server"></app-drawing-dragged>
<app-drawing-resized [server]="server"></app-drawing-resized>
<app-interface-label-dragged [server]="server"></app-interface-label-dragged>
<app-link-created [server]="server" [project]="project"></app-link-created>
<app-node-dragged [server]="server"></app-node-dragged>
<app-node-label-dragged [server]="server"></app-node-label-dragged>
<app-text-added [server]="server" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
<app-text-edited [server]="server"></app-text-edited>
<div [ngClass]="{ visible: !isConsoleVisible }">
  <app-log-console [server]="server" [project]="project" (closeConsole)='toggleShowConsole($event)'></app-log-console>
</div>
<div [ngClass]="{ visible: !isTopologySummaryVisible }">
  <app-topology-summary *ngIf="project" [server]="server" [project]="project" (closeTopologySummary)='toggleShowTopologySummary($event)'></app-topology-summary>
</div>