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

<div *ngIf="project" [ngClass]="{ lightTheme: isLightThemeEnabled }" class="project-map">
  <app-d3-map
    *ngIf="!settings.angular_map"
    [controller]="controller"
    [project]="project"
    [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>

  <!-- Project Titlebar -->
  <div id="project-titlebar" [ngClass]="{ lightTheme: isLightThemeEnabled }">
    <button
      matTooltip="Open menu"
      matTooltipClass="custom-tooltip"
      mat-icon-button
      class="gns3-button menu-button"
      [matMenuTriggerFor]="mainMenu"
    >
      <mat-icon *ngIf="!isLightThemeEnabled" svgIcon="gns3"></mat-icon>
      <mat-icon *ngIf="isLightThemeEnabled" svgIcon="gns3black"></mat-icon>
    </button>
    <div class="project-titlebar-controls">
      <div *ngIf="!readonly" [ngClass]="{ lightTheme: isLightThemeEnabled }" class="menu-button-group primary-controls">
        <app-template [controller]="controller" [project]="project" (onNodeCreation)="onNodeCreation($event)"> </app-template>
        <button
          matTooltip="Add a link"
          matTooltipClass="custom-tooltip"
          class="menu-button"
          mat-icon-button
          [ngClass]="{ selected: tools.draw_link }"
          [color]="tools.draw_link ? 'primary' : 'basic'"
          (click)="toggleDrawLineMode()"
        >
          <mat-icon>timeline</mat-icon>
        </button>
      </div>
      <div class="menu-button-group">
        <app-nodes-menu [controller]="controller" [project]="project"></app-nodes-menu>
        <app-context-menu [project]="project" [controller]="controller"></app-context-menu>
      </div>
    </div>
    <div>
      <button
        matTooltip="Toggle topology/controllers summary"
        matTooltipClass="custom-tooltip"
        [ngClass]="{
          unmarkedLight: !isTopologySummaryVisible && isLightThemeEnabled,
          marked: isTopologySummaryVisible
        }"
        mat-icon-button
        (click)="toggleShowTopologySummary(!isTopologySummaryVisible)"
      >
        <mat-icon>toc</mat-icon>
      </button>
    </div>

    <!-- GNS3 menu -->
    <mat-menu #mainMenu="matMenu" [overlapTrigger]="false">
      <button mat-menu-item [routerLink]="['/controllers']">
        <mat-icon>developer_board</mat-icon>
        <span>Controllers</span>
      </button>
      <button mat-menu-item [routerLink]="['/controller', controller.id, 'projects']">
        <mat-icon>work</mat-icon>
        <span>Projects</span>
      </button>
      
      <button mat-menu-item routerLink="/controller/{{ controller.id }}/preferences">
        <mat-icon>settings_applications</mat-icon>
        <span>Template preferences</span>
      </button>
      <button mat-menu-item [routerLink]="['/controller', controller.id, 'image-manager']">
        <mat-icon>collections</mat-icon>
        <span>Image manager</span>
      </button>
      <button mat-menu-item (click)="addNewTemplate()">
        <mat-icon>control_point</mat-icon>
        <span>New template</span>
      </button>
      <app-import-appliance [controller]="controller" [project]="project"></app-import-appliance>
      <button mat-menu-item [matMenuTriggerFor]="projectMenu">
        <mat-icon>settings</mat-icon>
        <span>Project settings</span>
      </button>
      <button mat-menu-item [matMenuTriggerFor]="viewMenu">
        <mat-icon>view_module</mat-icon>
        <span>Map settings</span>
      </button>
    </mat-menu>

    <!-- Project Settings sub-menu -->
    <mat-menu #projectMenu="matMenu" [overlapTrigger]="false">
      <div>
        <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 project</span>
        </button>
        <button mat-menu-item (click)="importProject()">
          <mat-icon>call_received</mat-icon>
          <span>Import project</span>
        </button>
        <button mat-menu-item (click)="closeProject()">
          <mat-icon>close</mat-icon>
          <span>Close project</span>
        </button>
        <button mat-menu-item (click)="deleteProject()">
          <mat-icon>delete</mat-icon>
          <span>Delete project</span>
        </button>
      </div>
    </mat-menu>

    <!-- Map Settings sub-menu -->
    <mat-menu #viewMenu="matMenu" [overlapTrigger]="false">
      <div class="options-item">
        <mat-checkbox [ngModel]="isInterfaceLabelVisible" (change)="toggleShowInterfaceLabels($event.checked)">
          Show interface labels </mat-checkbox
        ><br />
        <mat-checkbox [ngModel]="isConsoleVisible" (change)="toggleShowConsole($event.checked)">
          Show console </mat-checkbox
        ><br />
        <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
          Show topology/controllers summary </mat-checkbox
        ><br />
        <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
          Show notifications </mat-checkbox
        ><br />
        <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><br />
        <mat-checkbox [ngModel]="project.snap_to_grid" (change)="toggleSnapToGrid($event.checked)">
          Snap to grid </mat-checkbox
        ><br />
        <mat-checkbox [ngModel]="symbolScaling" (change)="toggleSymbolScaling($event.checked)">
          Scale symbols </mat-checkbox
        ><br />
      </div>
    </mat-menu>
  </div>

  <!-- Project toolbar -->
  <div id="project-toolbar" [ngClass]="{ lightTheme: isLightThemeEnabled }">
    <div class="section">
      <button
        matTooltip="Selection mode"
        matTooltipClass="custom-tooltip"
        mat-icon-button
        class="selection-button menu-button"
        [color]="tools.moving ? 'basic' : 'primary'"
        (click)="toggleMovingMode()"
      >
        <mat-icon>near_me</mat-icon>
      </button>
      <button
        matTooltip="Pan workspace"
        matTooltipClass="custom-tooltip"
        class="pan-button menu-button"
        mat-icon-button
        [color]="tools.moving ? 'primary' : 'basic'"
        (click)="toggleMovingMode()"
      >
        <mat-icon>zoom_out_map</mat-icon>
      </button>
      <button
         matTooltip="Zoom in"
         matTooltipClass="custom-tooltip"
         class="zoom-button"
         mat-icon-button
         (click)="zoomIn()">
        <mat-icon>zoom_in</mat-icon>
      </button>
      <button
         matTooltip="Reset zoom"
         matTooltipClass="custom-tooltip"
         class="reset-zoom-button"
         mat-icon-button
         (click)="resetZoom()">
        <mat-icon>adjust</mat-icon>
      </button>
      <button
         matTooltip="Zoom out"
         matTooltipClass="custom-tooltip"
         class="zoom-button"
         mat-icon-button
         (click)="zoomOut()">
        <mat-icon>zoom_out</mat-icon>
      </button>
    </div>
    <div class="section">
      <app-project-map-menu [controller]="controller" [project]="project"></app-project-map-menu>
    </div>
    <div *ngIf="!readonly" class="section">
      <app-snapshot-menu-item [controller]="controller" [project]="project"> </app-snapshot-menu-item>
    </div>
  </div>

  <app-progress></app-progress>
  <app-draw-link-tool [links]="links" *ngIf="tools.draw_link"></app-draw-link-tool>
  <app-drawing-dragged [controller]="controller" [project]="project"></app-drawing-dragged>
  <app-drawing-resized [controller]="controller"></app-drawing-resized>
  <app-interface-label-dragged [controller]="controller"></app-interface-label-dragged>
  <app-link-created [controller]="controller" [project]="project"></app-link-created>
  <app-node-dragged [controller]="controller" [project]="project"></app-node-dragged>
  <app-node-label-dragged [controller]="controller"></app-node-label-dragged>
  <app-text-added [controller]="controller" [project]="project" (drawingSaved)="onDrawingSaved()"> </app-text-added>
  <app-text-edited [controller]="controller"></app-text-edited>
  <div [ngClass]="{ visible: !isConsoleVisible }">
    <app-console-wrapper
      *ngIf="project"
      [controller]="controller"
      [project]="project"
      (closeConsole)="toggleShowConsole($event)"
    ></app-console-wrapper>
  </div>
</div>

<ng-template #topologySummaryContainer></ng-template>