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

184 lines
6.5 KiB
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>