diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html index 292815b..0c48ef9 100644 --- a/src/app/pages/home/home-page.component.html +++ b/src/app/pages/home/home-page.component.html @@ -14,7 +14,7 @@ -
+
diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss index c6063b5..7427df2 100644 --- a/src/app/pages/home/home-page.component.scss +++ b/src/app/pages/home/home-page.component.scss @@ -42,7 +42,7 @@ } } -.vis-container { +.discovery-container { height: 100vh; margin: -0.6em -0.9em -0.7em -0.9em; //-0.5em -0.75em; padding: 0; diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts index d560a06..e4321bd 100644 --- a/src/app/pages/home/home-page.component.ts +++ b/src/app/pages/home/home-page.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild, ElementRef, ChangeDetectorRef, HostListener } from '@angular/core'; import { ProbeService, requesterID } from '../../../commons/service/probe.service'; @@ -28,10 +28,6 @@ export class HomePageComponent implements OnInit, OnDestroy { zone: Zone; discoverHost: DiscoverHost; - @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) { - this.discoveryTargetRef = content; - } - blockedPanel = false; displaySidebar = false; @@ -44,10 +40,29 @@ export class HomePageComponent implements OnInit, OnDestroy { private nodes: Node[]; private links: Link[]; public simulation: d3.Simulation | undefined; + private discoveryContainerWidth: number; + private discoveryContainerHeight: number; hosts: Host[]; ports: Port[]; + @HostListener('window:resize', ['$event']) + onResize(event) { + if (undefined !== this.discoveryTargetRef) { + this.discoveryContainerWidth = this.discoveryTargetRef.nativeElement.clientWidth; + this.discoveryContainerHeight = this.discoveryTargetRef.nativeElement.clientHeight; + + this.zoneNode.fx = this.discoveryContainerWidth / 2; + this.zoneNode.fy = this.discoveryContainerHeight / 2; + + this.simulationRestart(false); + } + } + + @ViewChild('discoveryTarget') set discoveryTarget(content: ElementRef) { + this.discoveryTargetRef = content; + } + constructor( private changeDetector: ChangeDetectorRef, private probeService: ProbeService, @@ -119,8 +134,8 @@ export class HomePageComponent implements OnInit, OnDestroy { this.showIntro = false; this.changeDetector.detectChanges(); - const width = this.discoveryTargetRef.nativeElement.clientWidth; - const height = this.discoveryTargetRef.nativeElement.clientHeight; + this.discoveryContainerWidth = this.discoveryTargetRef.nativeElement.clientWidth; + this.discoveryContainerHeight = this.discoveryTargetRef.nativeElement.clientHeight; this.simulationInit(); @@ -130,8 +145,8 @@ export class HomePageComponent implements OnInit, OnDestroy { this.zoneNode = new Node('192.168.1.0/24'); this.zoneNode.group = 'zone'; this.zoneNode.target = this.zone; - this.zoneNode.fx = width / 2; - this.zoneNode.fy = height / 2; + this.zoneNode.fx = this.discoveryContainerWidth / 2; + this.zoneNode.fy = this.discoveryContainerHeight / 2; this.zoneNode.r = 60; // const hostNode = new Node('192.168.1.1'); @@ -248,9 +263,6 @@ export class HomePageComponent implements OnInit, OnDestroy { return; } - const width = this.discoveryTargetRef.nativeElement.clientWidth; - const height = this.discoveryTargetRef.nativeElement.clientHeight; - const svg = d3.select(this.discoveryTargetRef.nativeElement); const _zoom = d3.zoom().on('zoom', () => { @@ -265,7 +277,7 @@ export class HomePageComponent implements OnInit, OnDestroy { .nodes(this.nodes) .force('charge', d3.forceManyBody().strength(-200)) .force('link', d3.forceLink(this.links).distance(150)) - .force('center', d3.forceCenter(width / 2, height / 2)) + .force('center', d3.forceCenter(this.discoveryContainerWidth / 2, this.discoveryContainerHeight / 2)) .force('collision', d3.forceCollide().radius(function (node: Node) { return node.r * 1.2; })) @@ -280,6 +292,7 @@ export class HomePageComponent implements OnInit, OnDestroy { this.simulation .nodes(this.nodes) .force('link', d3.forceLink(this.links).distance(150)) + .force('center', d3.forceCenter(this.discoveryContainerWidth / 2, this.discoveryContainerHeight / 2)) .alpha(1) .restart() ;