ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-25 13:29:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial implementation

Browse Source
This commit is contained in:
Piotr Pekala 2019-10-11 04:02:13 -07:00
parent 63987f5df8
commit ebd2614b84
2 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/components/project-map/project-map.component.html
View File

@ -46,6 +46,10 @@
<mat-icon>developer_board</mat-icon> <mat-icon>developer_board</mat-icon>
<span>Go to servers</span> <span>Go to servers</span>
</button> </button>
<button mat-menu-item (click)="fitInView()">
<mat-icon>fullscreen</mat-icon>
<span>Fit in view</span>
</button>
<button mat-menu-item (click)="addNewProject()"> <button mat-menu-item (click)="addNewProject()">
<mat-icon>add</mat-icon> <mat-icon>add</mat-icon>
<span>Add new blank project</span> <span>Add new blank project</span>

41
src/app/components/project-map/project-map.component.ts
View File

@ -53,7 +53,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component'; import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
import { ToasterService } from '../../services/toaster.service'; import { ToasterService } from '../../services/toaster.service';
import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component'; import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
import { MatDialog, MatBottomSheet } from '@angular/material'; import { MatDialog, MatBottomSheet, mixinColor } from '@angular/material';
import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component'; import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component'; import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource'; import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
@ -394,6 +394,45 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
}); });
} }
public fitInView() {
if ((this.nodes.length === 0) || (this.drawings.length === 0)) { return };
let minX: number = + this.project.scene_width/2;
let minY: number = + this.project.scene_height/2;
let maxX: number = - this.project.scene_width/2;
let maxY: number = - this.project.scene_width/2;
this.nodes.forEach((node: Node) => {
minX = node.x < minX ? node.x : minX;
minY = node.y < minY ? node.y : minY;
maxX = node.x > maxX ? node.x : maxX;
maxY = node.y > maxY ? node.y : maxY;
});
this.drawings.forEach((drawing: Drawing) => {
minX = drawing.x < minX ? drawing.x : minX;
minY = drawing.y < minY ? drawing.y : minY;
maxX = drawing.x > maxX ? drawing.x : maxX;
maxY = drawing.y > maxY ? drawing.y : maxY;
});
let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let margin = 0;
let widthToSceneWidthRatio = ((maxX-minX) + margin) / windowWidth;
let heightToSceneHeightRatio = ((maxY-minY) + margin) / windowHeight;
let scaleToSet = 1 / Math.max(widthToSceneWidthRatio, heightToSceneHeightRatio);
this.mapScaleService.setScale(scaleToSet);
this.project.scene_width = this.project.scene_width * scaleToSet;
this.project.scene_height = this.project.scene_height * scaleToSet;
let scrollX: number = (minX + maxX)/2 * scaleToSet;
let scrollY: number = (minY + maxY)/2 * scaleToSet;
window.scrollTo(scrollX, scrollY);
}
public centerView() { public centerView() {
if (this.project) { if (this.project) {
let scrollX: number = (this.project.scene_width - document.documentElement.clientWidth) > 0 ? (this.project.scene_width - document.documentElement.clientWidth)/2 : 0; let scrollX: number = (this.project.scene_width - document.documentElement.clientWidth) > 0 ? (this.project.scene_width - document.documentElement.clientWidth)/2 : 0;