ing

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<Node, Link>;
+  public simulation: d3.Simulation<Node, Link> | 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
+    this.simulationInit();
-      .forceSimulation<Node, Link>()
+
-      .nodes(this.nodes)
+    this.nodes = [];
-      .force('charge', d3.forceManyBody().strength(-120))
+    this.links = [];
-      .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.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<Node, Link>()
+      .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;
       }

src/commons/component/d3-force.component.html

@@ -0,0 +1,6 @@
+<svg #svg [attr.width]="_options.width" [attr.height]="_options.height">
+  <g [zoomableOf]="svg">
+    <g [linkVisual]="link" *ngFor="let link of links"></g>
+    <g [nodeVisual]="node" *ngFor="let node of nodes" [draggableNode]="node" [draggableInGraph]="graph"></g>
+  </g>
+</svg>

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(
+  ) {
+
+  }
+
+
+}

src/commons/component/node-detail.component.html

@@ -9,11 +9,11 @@
   </ng-container>
 
   <ng-container *ngSwitchCase="'host'">
-    <app-host-detail [host]="node.host"></app-host-detail>
+    <app-host-detail [host]="node.target"></app-host-detail>
   </ng-container>
 
   <ng-container *ngSwitchCase="'service'">
-    <app-service-detail [service]="node.service"></app-service-detail>
+    <app-service-detail [service]="node.target"></app-service-detail>
   </ng-container>
 
   <ng-container *ngSwitchDefault>