diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts index ec1ee0c..b05dd65 100644 --- a/src/app/pages/home/home-page.component.ts +++ b/src/app/pages/home/home-page.component.ts @@ -47,7 +47,7 @@ export class HomePageComponent implements OnInit, OnDestroy { private nodes: Node[]; private links: Link[]; - public simulation: d3.Simulation; + public simulation: d3.Simulation | undefined; constructor( private changeDetector: ChangeDetectorRef, @@ -86,35 +86,45 @@ export class HomePageComponent implements OnInit, OnDestroy { } startDiscovery() { + this.zone = { + network: '192.168.1.0/24', + iface: 'enp3s0', + metaIPType: toMetaIPType(MetaIPTypeEnum.V4), + address: '192.168.1.101', + mac: '44:8a:5b:f1:f1:f3', + }; + + this.discoverHost = { + metaIPType: toMetaIPType(MetaIPTypeEnum.V4), + firstScanRange: '192.168.1.1', + lastScanRange: '192.168.1.254', + discoveryConfig: { + }, + discoverPort: { + firstScanRange: 1, + lastScanRange: 65535, + includeTCP: true, + includeUDP: true, + discoverService: { + } + } + }; + console.log('########################################################'); console.log(this.zone); console.log(this.discoverHost); console.log('########################################################'); + this.showIntro = false; this.changeDetector.detectChanges(); - const svg = d3.select(this.discoveryTargetRef.nativeElement); - - const _zoom = d3.zoom().on('zoom', () => { - const transform = d3.event.transform; - svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')'); - }); - svg.call(_zoom); - - const width = this.discoveryTargetRef.nativeElement.clientWidth; const height = this.discoveryTargetRef.nativeElement.clientHeight; - this.simulation = d3 - .forceSimulation() - .nodes(this.nodes) - .force('charge', d3.forceManyBody().strength(-120)) - .force('link', d3.forceLink(this.links).distance(150)) - .force('center', d3.forceCenter(width / 2, height / 2)) - .force('collision', d3.forceCollide().radius(function (node: Node) { - return node.r; - })) - ; + this.simulationInit(); + + this.nodes = []; + this.links = []; this.nodes.push( { id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2 }, @@ -129,30 +139,6 @@ export class HomePageComponent implements OnInit, OnDestroy { this.simulationRestart(); - // const zone: Zone = { - // network: '192.168.1.0/24', - // iface: 'enp3s0', - // metaIPType: toMetaIPType(MetaIPTypeEnum.V4), - // address: '192.168.1.101', - // mac: '44:8a:5b:f1:f1:f3', - // }; - - // const discoverHost: DiscoverHost = { - // metaIPType: toMetaIPType(MetaIPTypeEnum.V4), - // firstScanRange: '192.168.1.1', - // lastScanRange: '192.168.1.254', - // discoveryConfig: { - // }, - // discoverPort: { - // firstScanRange: 1, - // lastScanRange: 65535, - // includeTCP: true, - // includeUDP: true, - // discoverService: { - // } - // } - // }; - this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost); // this.probeService.send( @@ -163,6 +149,34 @@ export class HomePageComponent implements OnInit, OnDestroy { // ); } + simulationInit() { + if (undefined !== this.simulation) { + 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', () => { + const transform = d3.event.transform; + svg.select('g').attr('transform', 'translate(' + transform.x + ',' + transform.y + ') scale(' + transform.k + ')'); + }); + svg.call(_zoom); + + this.simulation = d3 + .forceSimulation() + .nodes(this.nodes) + .force('charge', d3.forceManyBody().strength(-120)) + .force('link', d3.forceLink(this.links).distance(150)) + .force('center', d3.forceCenter(width / 2, height / 2)) + .force('collision', d3.forceCollide().radius(function (node: Node) { + return node.r; + })) + ; + } + simulationRestart() { // Update and restart the simulation. const __this = this; @@ -178,6 +192,10 @@ export class HomePageComponent implements OnInit, OnDestroy { d3.event.on('drag', dragged).on('end', ended); function dragged() { + if (undefined === node) { + return; + } + node.fx = d3.event.x; node.fy = d3.event.y; } @@ -187,6 +205,9 @@ export class HomePageComponent implements OnInit, OnDestroy { __this.simulation.alphaTarget(0); } + if (undefined === node) { + return; + } node.fx = null; node.fy = null; } diff --git a/src/commons/component/d3-force.component.html b/src/commons/component/d3-force.component.html new file mode 100644 index 0000000..5afe9f1 --- /dev/null +++ b/src/commons/component/d3-force.component.html @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/commons/component/d3-force.component.ts b/src/commons/component/d3-force.component.ts new file mode 100644 index 0000000..b91d9af --- /dev/null +++ b/src/commons/component/d3-force.component.ts @@ -0,0 +1,19 @@ +import { Component, Input } from '@angular/core'; +import { Host } from '@overflow/model/discovery'; + + +@Component({ + selector: 'app-d3-force', + templateUrl: './d3-force.component.html', +}) +export class D3ForceComponent { + + @Input() host: Host; + + constructor( + ) { + + } + + +} diff --git a/src/commons/component/node-detail.component.html b/src/commons/component/node-detail.component.html index a31a6c8..51146db 100644 --- a/src/commons/component/node-detail.component.html +++ b/src/commons/component/node-detail.component.html @@ -9,11 +9,11 @@ - + - +