ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-02-20 17:52:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #98 from GNS3/scrolls

Browse Source 
Support scrolls on svg bigger than screen, Fixes: #97
This commit is contained in:
ziajka 2018-04-09 14:16:22 +02:00 committed by GitHub
commit b0461d69ea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 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

19
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,9 +102,15 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
}
public getSize(): Size {
return new Size(
document.documentElement.clientWidth,
document.documentElement.clientHeight);
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() {

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

@ -1,34 +1,27 @@
/*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: absolute;
position: fixed;
top: 20px;
left: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.project-toolbar .mat-toolbar-multiple-rows {
width: auto !important;
}
.loading-spinner {
position: absolute;
top: 50%;
@ -43,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%;
}