ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-01-30 16:13:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Support scrolls on svg bigger than screen, Fixes: #97

Browse Source
This commit is contained in:
ziajka 2018-04-09 14:14:49 +02:00
parent 8280532764
commit f62552da63
5 changed files with 22 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/cartography/map/map.component.html
View File

@ -1,2 +1,2 @@
<svg preserveAspectRatio="none"> <svg class="map" preserveAspectRatio="none">
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 B

After

Width:  |  Height:  |  Size: 52 B

20
src/app/cartography/map/map.component.ts
View File

@ -26,7 +26,6 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
@Input() width = 1500; @Input() width = 1500;
@Input() height = 600; @Input() height = 600;
@Input() windowFullSize = true;
private d3: D3; private d3: D3;
private parentNativeElement: any; private parentNativeElement: any;
@ -83,11 +82,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
this.graphContext = new Context(true); this.graphContext = new Context(true);
if (this.windowFullSize) { this.graphContext.size = this.getSize();
this.graphContext.size = this.getSize();
} else {
this.graphContext.size = new Size(this.width, this.height);
}
this.graphLayout = new GraphLayout(); this.graphLayout = new GraphLayout();
this.graphLayout.connect(this.svg, this.graphContext); this.graphLayout.connect(this.svg, this.graphContext);
@ -107,10 +102,15 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
} }
public getSize(): Size { public getSize(): Size {
// return new Size( let width = document.documentElement.clientWidth;
// document.documentElement.clientWidth, let height = document.documentElement.clientHeight;
// document.documentElement.clientHeight); if (this.width > width) {
return new Size(2000, 2000); width = this.width;
}
if (this.height > height) {
height = this.height;
}
return new Size(width, height);
} }
private changeLayout() { private changeLayout() {

25
src/app/project-map/project-map.component.css
View File

@ -1,26 +1,15 @@
/*html {*/ app-root, app-project-map, .project-map, app-map {
/*position: static;*/ width: auto;
/*height: 100%;*/ }
/*}*/
/*body {*/ svg.map {
/*height: 100%;*/ background-color: #F0F0F0;
/*margin: 0;*/ }
/*margin-bottom: 0 !important;*/
/*}*/
/*app-root, app-project-map, .project-map, app-map, svg {*/
/*height: 100%;*/
/*}*/
g.node:hover { g.node:hover {
background-color: #0097a7; background-color: #0097a7;
} }
.project-map {
background-color: #F0F0F0;
}
.project-toolbar { .project-toolbar {
width: 70px; width: 70px;
position: fixed; position: fixed;
@ -47,7 +36,7 @@ g.node text {
} }
svg image:hover, svg image.chosen, g.selected { svg.map image:hover, svg.map image.chosen, g.selected {
filter: grayscale(100%); filter: grayscale(100%);
} }

2
src/app/project-map/project-map.component.html
View File

@ -1,5 +1,5 @@
<div *ngIf="project" class="project-map"> <div *ngIf="project" class="project-map">
<app-map [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings"></app-map> <app-map [symbols]="symbols" [nodes]="nodes" [links]="links" [drawings]="drawings" [width]="project.scene_width" [height]="project.scene_height"></app-map>
<div class="project-toolbar"> <div class="project-toolbar">
<mat-toolbar color="primary" class="project-toolbar"> <mat-toolbar color="primary" class="project-toolbar">

3
src/styles.css
View File

@ -6,3 +6,6 @@ a.table-link {
color: #0097a7; color: #0097a7;
} }
app-root {
width: 100%;
}