ing
This commit is contained in:
parent
b4307ef25e
commit
dc5ad26d73
|
@ -14,7 +14,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div *ngIf="!showIntro" class="vis-container">
|
||||
<div *ngIf="!showIntro" class="discovery-container">
|
||||
<svg #discoveryTarget width="100%" height="100%">
|
||||
<g>
|
||||
<g *ngFor="let link of links">
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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<Node, Link> | 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()
|
||||
;
|
||||
|
|
Loading…
Reference in New Issue
Block a user