Max width and height map

src/app/default-layout/default-layout.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'app-default-layout',
+  encapsulation: ViewEncapsulation.None,
   templateUrl: './default-layout.component.html',
   styleUrls: ['./default-layout.component.css']
 })

src/app/map/map.component.css

@@ -0,0 +1,3 @@
+svg {
+  display: block;
+}

src/app/map/map.component.ts

@@ -21,6 +21,7 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
   @Input() height = 600;
   @Input() phylloRadius = 7;
   @Input() pointRadius= 2;
+  @Input() windowFullSize = true;
 
   private d3: D3;
   private parentNativeElement: any;
@@ -77,7 +78,11 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
 
       this.graphContext = new Context(this.svg);
 
-      this.graphContext.setSize(new Size(this.width, this.height));
+      if (this.windowFullSize) {
+        this.graphContext.setSize(this.getSize());
+      } else {
+        this.graphContext.setSize(new Size(this.width, this.height));
+      }
 
       this.graphLayout = new GraphLayout();
       this.graphLayout.draw(this.svg, this.graphContext);
@@ -85,10 +90,28 @@ export class MapComponent implements OnInit, OnChanges, OnDestroy {
     }
   }
 
+  public getSize(): Size {
+    return new Size(
+      document.documentElement.clientWidth,
+      document.documentElement.clientHeight);
+  }
+
   private changeLayout() {
-    this.svg
-      .attr('width', this.width)
-      .attr('height', this.height);
+    if (this.graphContext != null) {
+      this.svg
+        .attr('width', this.graphContext.getSize().width)
+        .attr('height', this.graphContext.getSize().height);
+    }
+
+
+    if (this.windowFullSize) {
+      if (this.parentNativeElement != null) {
+        this.graphContext.setSize(this.getSize());
+      }
+
+    } else {
+
+    }
 
     this.graphLayout.setNodes(this.nodes);
     this.graphLayout.setLinks(this.links);

src/app/project-map/project-map.component.css

@@ -0,0 +1,15 @@
+html {
+  position: static;
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  margin: 0;
+  margin-bottom: 0 !important;
+}
+
+app-root, app-project-map, .project-map, app-map, svg {
+  height: 100%;
+}
+

src/app/project-map/project-map.component.html

@@ -1,6 +1 @@
-<div *ngIf="project" class="project-map">
-  <app-map [nodes]="nodes" [links]="links"></app-map>
-</div>
-
-
-
+<div *ngIf="project" class="project-map"><app-map [nodes]="nodes" [links]="links"></app-map></div>

src/app/project-map/project-map.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 
 import { Observable } from 'rxjs/Observable';
@@ -23,6 +23,7 @@ import { Server } from "../models/server";
 
 @Component({
   selector: 'app-project-map',
+  encapsulation: ViewEncapsulation.None,
   templateUrl: './project-map.component.html',
   styleUrls: ['./project-map.component.css'],
 })

src/styles.css

@@ -2,6 +2,7 @@ html {
   position: relative;
   min-height: 100%;
 }
+
 body {
   margin-bottom: 60px;
   background-color: #26353f;
@@ -58,7 +59,5 @@ body {
 
 .project-map svg {
   background-color: lightgray;
-  -moz-box-shadow: inset 0 0 10px	#808080;
-  -webkit-box-shadow: inset 0 0 10px	#808080;
-  box-shadow: inset 0 0 10px	#808080;
 }
+