From bca899db7631ea196d19c9fd0bff21afc5e6ba26 Mon Sep 17 00:00:00 2001 From: crusader Date: Thu, 13 Sep 2018 15:08:16 +0900 Subject: [PATCH] ing --- src/app/pages/home/home-page.component.html | 3 +- src/app/pages/home/home-page.component.ts | 247 ++++++++++++++------ src/commons/model/link.ts | 8 +- src/commons/model/node.ts | 8 + 4 files changed, 187 insertions(+), 79 deletions(-) diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html index ee8734d..292815b 100644 --- a/src/app/pages/home/home-page.component.html +++ b/src/app/pages/home/home-page.component.html @@ -18,7 +18,8 @@ - + | undefined; @@ -125,28 +127,120 @@ export class HomePageComponent implements OnInit, OnDestroy { this.nodes = []; this.links = []; + 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.r = 60; + + // const hostNode = new Node('192.168.1.1'); + // hostNode.group = 'host'; + // hostNode.target = { + // metaIPType: toMetaIPType(MetaIPTypeEnum.V4), + // name: 'Host1', + // address: '192.168.1.1', + // mac: '44:8a:5b:f1:f1:f3', + // osType: 'UNKNOWN', + // hostType: 'HOST', + // hostVendor: 'UNKNOWN', + // hostModel: 'UNKNOWN', + // zone: this.zone, + // }; + // hostNode.r = 40; + + // const hostNode2 = new Node('192.168.1.2'); + // hostNode2.group = 'host'; + // hostNode2.target = { + // metaIPType: toMetaIPType(MetaIPTypeEnum.V4), + // name: 'Host2', + // address: '192.168.1.2', + // mac: '44:8a:5b:f1:f1:f3', + // osType: 'UNKNOWN', + // hostType: 'HOST', + // hostVendor: 'UNKNOWN', + // hostModel: 'UNKNOWN', + // zone: this.zone, + // }; + // hostNode2.r = 40; + + // const hostNode3 = new Node('192.168.1.3'); + // hostNode3.group = 'host'; + // hostNode3.target = { + // metaIPType: toMetaIPType(MetaIPTypeEnum.V4), + // name: 'Host2', + // address: '192.168.1.3', + // mac: '44:8a:5b:f1:f1:f3', + // osType: 'UNKNOWN', + // hostType: 'HOST', + // hostVendor: 'UNKNOWN', + // hostModel: 'UNKNOWN', + // zone: this.zone, + // }; + // hostNode3.r = 40; + + // const serviceNode1 = new Node('192.168.1.1-10-HTTP'); + // serviceNode1.target = { + // metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), + // key: 'HTTP', + // name: 'Apache', + // serviceType: 'WEB', + // serviceVendor: 'Apache', + // serviceVersion: 'UNKNOWN', + + // }; + // serviceNode1.group = 'service'; + // serviceNode1.r = 30; + + // const serviceNode2 = new Node('192.168.1.1-20-HTTP'); + // serviceNode2.target = { + // metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), + // key: 'HTTP', + // name: 'Apache', + // serviceType: 'WEB', + // serviceVendor: 'Apache', + // serviceVersion: 'UNKNOWN', + + // }; + // serviceNode2.group = 'service'; + // serviceNode2.r = 30; + + // const serviceNode3 = new Node('192.168.1.1-30-HTTP'); + // serviceNode3.target = { + // metaCryptoType: toMetaCryptoType(MetaCryptoTypeEnum.NONE), + // key: 'HTTP', + // name: 'Apache', + // serviceType: 'WEB', + // serviceVendor: 'Apache', + // serviceVersion: 'UNKNOWN', + + // }; + // serviceNode3.group = 'service'; + // serviceNode3.r = 30; + + this.nodes.push( - { id: '192.168.1.0/24', group: 'zone', target: this.zone, fx: width / 2, fy: height / 2, r: 60 }, - // { id: '192.168.1.1', group: 'host', target: { address: '192.168.1.1', zone: this.zone, hostType: 'NAS' }, r: 40 }, - // { id: '192.168.1.1' }, - // { id: '192.168.1.2' }, + this.zoneNode, + // hostNode, + // hostNode2, + // hostNode3, + // serviceNode1, + // serviceNode2, + // serviceNode3, ); this.links.push( - // { source: this.getNode('192.168.1.0/24'), target: this.getNode('192.168.1.1') }, - // { source: this.getNode('192.168.1.0/24'), target: this.getNode('192.168.1.2') } + // new Link(this.zoneNode, hostNode), + // new Link(this.zoneNode, hostNode2), + // new Link(this.zoneNode, hostNode3), + // new Link(hostNode, serviceNode1), + // new Link(hostNode, serviceNode2), + // new Link(hostNode, serviceNode3), ); - this.simulationRestart(); + this.simulationRestart(true); this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost); - - // this.probeService.send( - // 'DiscoveryService.DiscoverHost', - // requesterID, - // this.discoveryConfigService.getZone(), - // this.discoveryConfigService.getDiscoverHost() - // ); } simulationInit() { @@ -183,66 +277,31 @@ export class HomePageComponent implements OnInit, OnDestroy { simulationRestart(attachEvent: boolean = false) { // Update and restart the simulation. + this.simulation + .nodes(this.nodes) + .force('link', d3.forceLink(this.links).distance(150)) + .alpha(1) + .restart() + ; + this.changeDetector.detectChanges(); if (attachEvent) { const __this = this; - // function started(node: Node) { - // /** Preventing propagation of dragstart to parent elements */ - // d3.event.sourceEvent.stopPropagation(); + const nodeElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container'); + const linkElements = d3.select(this.discoveryTargetRef.nativeElement).selectAll('.link'); - // if (!d3.event.active) { - // __this.simulation.alphaTarget(0.3).restart(); - // } + function getNodeFromElement(element: Element): Node | null { + const container = d3.select(element); + const nodeId = container.attr('nodeId'); + return __this.getNode(nodeId); + } - // d3.event.on('drag', dragged).on('end', ended); - - // function dragged() { - // if (undefined === node) { - // return; - // } - - // node.fx = d3.event.x; - // node.fy = d3.event.y; - // } - - // function ended() { - // if (!d3.event.active) { - // __this.simulation.alphaTarget(0); - // } - - // if (undefined === node) { - // return; - // } - // node.fx = null; - // node.fy = null; - // } - // } - - // d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container').call(d3.drag().on('start', started)); - - // d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container').call( - // d3.drag() - // .on('start', (node: Node, i: number) => { - // __this.simulation.stop(); - // }) - // .on('drag', (node: Node, i: number) => { - // node.fx += d3.event.dx; - // node.fy += d3.event.dy; - // node.x += d3.event.dx; - // node.y += d3.event.dy; - // }) - // .on('end', (node: Node, i: number) => { - // __this.simulation.stop(); - // }) - // ); - - d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container').call( + // drag + nodeElements.call( d3.drag() .on('start', function () { - const container = d3.select(this); - const nodeId = container.attr('nodeId'); - const node = __this.getNode(nodeId); + const node = getNodeFromElement(this); d3.event.sourceEvent.stopPropagation(); @@ -268,14 +327,49 @@ export class HomePageComponent implements OnInit, OnDestroy { }) ); - } + nodeElements + .on('mouseover', function () { + const node = getNodeFromElement(this as Element); + if ('zone' === node.group) { + return; + } + nodeElements.style('opacity', function (): number { + const _node = getNodeFromElement(this as Element); + for (let i = 0; i < node.links.length; i++) { + const link = node.links[i]; + if (node === _node || link.source === _node || link.target === _node) { + return 1; + } + } + return 0.3; + }); + linkElements.style('opacity', function (): number { + const linkElement = d3.select(this as Element); + const sourceId = linkElement.attr('sourceId'); + const targetId = linkElement.attr('targetId'); - this.simulation - .nodes(this.nodes) - .force('link', d3.forceLink(this.links).distance(150)) - .alpha(1) - .restart() - ; + if (sourceId === node.id || targetId === node.id) { + return 1; + } + + return 0.3; + }); + }) + .on('mousedown', function () { + + }) + .on('mouseout', function () { + const node = getNodeFromElement(this as Element); + nodeElements.style('opacity', function (): number { + return 1; + }); + linkElements.style('opacity', function (): number { + return 1; + }); + }) + ; + + } } onTargetClick(node: Node) { @@ -376,7 +470,6 @@ export class HomePageComponent implements OnInit, OnDestroy { } const hostId = `${host.address}`; - const zoneNode = this.getNode('192.168.1.0/24'); let hostNode = this.getNode(hostId); if (null !== hostNode) { @@ -386,11 +479,11 @@ export class HomePageComponent implements OnInit, OnDestroy { hostNode.target = host; hostNode.group = 'host'; hostNode.r = 40; - hostNode.x = zoneNode.x; - hostNode.y = zoneNode.y; + hostNode.x = this.zoneNode.x; + hostNode.y = this.zoneNode.y; this.nodes.push(hostNode); - this.links.push(new Link(zoneNode, hostNode)); + this.links.push(new Link(this.zoneNode, hostNode)); } this.simulationRestart(); diff --git a/src/commons/model/link.ts b/src/commons/model/link.ts index 0c96c3e..b73fb2d 100644 --- a/src/commons/model/link.ts +++ b/src/commons/model/link.ts @@ -8,7 +8,13 @@ export class Link implements d3.SimulationLinkDatum { index?: number; - constructor(source, target) { + constructor(source: Node, target: Node) { + target.addLink(this); + + if ('zone' !== source.group) { + source.addLink(this); + } + this.source = source; this.target = target; } diff --git a/src/commons/model/node.ts b/src/commons/model/node.ts index 035f7d8..61a584a 100644 --- a/src/commons/model/node.ts +++ b/src/commons/model/node.ts @@ -1,4 +1,5 @@ import * as d3 from 'd3'; +import { Link } from './link'; export class Node implements d3.SimulationNodeDatum { /** @@ -40,8 +41,15 @@ export class Node implements d3.SimulationNodeDatum { image?: string; + links?: Link[]; + constructor(id) { this.id = id; + this.links = []; + } + + addLink(link: Link) { + this.links.push(link); } }