gns3-web-ui/src/app/components/project-map/project-map.component.html
2018-11-22 05:42:46 -08:00

127 lines
4.3 KiB
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"
[show-interface-labels]="project.show_interface_labels"
[selection-tool]="tools.selection"
[moving-tool]="tools.moving"
[draw-link-tool]="tools.draw_link"
[readonly]="inReadOnlyMode"
(nodeDragged)="onNodeDragged($event)"
(drawingDragged)="onDrawingDragged($event)"
(onLinkCreated)="onLinkCreated($event)"
(onDrawingResized)="onDrawingResized($event)"
></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]="project.show_interface_labels"
(change)="toggleShowInterfaceLabels($event.checked)">
Show interface labels
</mat-checkbox>
</div>
</mat-menu>
<mat-toolbar-row *ngIf="!readonly">
<button mat-icon-button [color]="tools.draw_link ? 'primary': 'basic'" (click)="toggleDrawLineMode()">
<mat-icon>timeline</mat-icon>
</button>
</mat-toolbar-row>
<mat-toolbar-row>
<button 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-appliance
[server]="server"
(onNodeCreation)="onNodeCreation($event)"
></app-appliance>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="draw-menu">
<mat-drawer-container class="drawer-container">
<mat-drawer #drawer class="drawer">
<div class="drawer-buttons">
<button mat-icon-button class="drawer-button">
<mat-icon>picture_in_picture</mat-icon>
</button>
<button mat-icon-button class="drawer-button" [color]="drawTools.isRectangleChosen ? 'primary': 'basic'" (click)="addDrawing('rectangle')">
<mat-icon>crop_3_2</mat-icon>
</button>
<button mat-icon-button class="drawer-button" [color]="drawTools.isEllipseChosen ? 'primary': 'basic'" (click)="addDrawing('ellipse')">
<mat-icon>panorama_fish_eye</mat-icon>
</button>
<button mat-icon-button class="drawer-button" (click)="addDrawing('line')">
<svg height="40" width="40">
<line [ngClass]="{active: drawTools.isLineChosen}" x1="30" y1="10" x2="10" y2="30" style="stroke:white;stroke-width:2" />
</svg>
</button>
<button mat-icon-button class="drawer-arrow-button" (click)="drawer.toggle()">
<mat-icon>keyboard_arrow_left</mat-icon>
</button>
</div>
</mat-drawer>
<mat-drawer-content class="drawer-content">
<div class="drawer-arrow-button">
<button mat-icon-button (click)="drawer.toggle()">
<mat-icon>keyboard_arrow_right</mat-icon>
</button>
</div>
</mat-drawer-content>
</mat-drawer-container>
</div>
<app-node-context-menu [project]="project" [server]="server"></app-node-context-menu>
</div>
<app-progress></app-progress>
<app-project-map-shortcuts
*ngIf="project"
[project]="project"
[server]="server">
</app-project-map-shortcuts>