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>

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

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

@ -1,26 +1,15 @@
/*html {*/
/*position: static;*/
/*height: 100%;*/
/*}*/
app-root, app-project-map, .project-map, app-map {
width: auto;
}
/*body {*/
/*height: 100%;*/
/*margin: 0;*/
/*margin-bottom: 0 !important;*/
/*}*/
/*app-root, app-project-map, .project-map, app-map, svg {*/
/*height: 100%;*/
/*}*/
svg.map {
background-color: #F0F0F0;
}
g.node:hover {
background-color: #0097a7;
}
.project-map {
background-color: #F0F0F0;
}
.project-toolbar {
width: 70px;
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%);
}

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

@ -1,5 +1,5 @@
<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">
<mat-toolbar color="primary" class="project-toolbar">

3
src/styles.css
View File

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