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"
    [symbols]="symbols"
    [nodes]="nodes"
    [links]="links"
    [drawings]="drawings"
    [width]="project.scene_width"
    [height]="project.scene_height"
    [show-interface-labels]="project.show_interface_labels"
    [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]="project.show_interface_labels"
    [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>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 matTooltip="Show/hide interface labels" 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]="project.show_interface_labels" (change)="toggleShowInterfaceLabels($event.checked)">
            Show interface labels
          </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>
  </div>

  <div id="show-menu-wrapper" [ngClass]="{ shadowed: !drawTools.visibility }" *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: drawTools.visibility }">
    <app-nodes-menu [server]="server" [project]="project"></app-nodes-menu>
    <mat-divider class="divider" [vertical]="true"></mat-divider>
    <button
      matTooltip="Add a note"
      mat-icon-button
      class="menu-button"
      [color]="drawTools.isTextChosen ? 'primary' : 'basic'"
      (click)="addDrawing('text')"
    >
      <mat-icon>create</mat-icon>
    </button>
    <input
      type="file"
      accept=".svg, .bmp, .jpeg, .jpg, .gif, .png"
      class="non-visible"
      #file
      (change)="uploadImageFile($event)"
    />
    <button
      matTooltip="Insert a picture"
      mat-icon-button
      class="menu-button"
      (click)="file.click()"
    >
      <mat-icon>image</mat-icon>
    </button>
    <button
      matTooltip="Draw a rectangle"
      mat-icon-button
      class="menu-button"
      [color]="drawTools.isRectangleChosen ? 'primary' : 'basic'"
      (click)="addDrawing('rectangle')"
    >
      <mat-icon>crop_3_2</mat-icon>
    </button>
    <button
      matTooltip="Draw an ellipse"
      mat-icon-button
      class="menu-button"
      [color]="drawTools.isEllipseChosen ? 'primary' : 'basic'"
      (click)="addDrawing('ellipse')"
    >
      <mat-icon>panorama_fish_eye</mat-icon>
    </button>
    <button matTooltip="Draw a line" mat-icon-button class="menu-button" (click)="addDrawing('line')">
      <svg height="40" width="40">
        <line
          [ngClass]="{ selected: drawTools.isLineChosen }"
          x1="30"
          y1="10"
          x2="10"
          y2="30"
          style="stroke:white;stroke-width:2"
        />
      </svg>
    </button>
    <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-added
  [server]="server"
  [project]="project"
  [selectedDrawing]="selectedDrawing"
  (drawingSaved)="onDrawingSaved()"
>
</app-drawing-added>
<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>