This commit is contained in:
crusader 2018-09-13 16:11:30 +09:00
parent b4307ef25e
commit dc5ad26d73
3 changed files with 28 additions and 15 deletions

View File

@ -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">

View File

@ -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;

View File

@ -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()
;