This commit is contained in:
crusader 2018-09-17 17:10:42 +09:00
parent 39ab3971ee
commit 21ffda5777
3 changed files with 57 additions and 66 deletions

View File

@ -66,7 +66,7 @@
</div> </div>
<p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right"> <p-sidebar [(visible)]="displaySidebar" styleClass="ui-sidebar-md" position="right">
<div *ngIf="selectedNode"> <div *ngIf="selectedNode !== null">
<app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail> <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
</div> </div>
</p-sidebar> </p-sidebar>

View File

@ -185,7 +185,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
// this.simulationRestart(true); // this.simulationRestart(true);
this.simulationRestart(); this.simulationRestart();
this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost); this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
} }
@ -307,7 +306,52 @@ export class HomePageComponent implements OnInit, OnDestroy {
} }
nodeElements.on('click', function () { nodeElements.on('click', function () {
const node = getNodeFromElement(this as Element); d3.event.stopPropagation();
const nodeElement = this as Element;
const node = getNodeFromElement(nodeElement);
if (null === node || 'zone' === node.group) {
return;
}
if (null === __this.selectedNode) {
__this.selectedNode = node;
nodeElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
nodeElements.each(function () {
const _thisElement = this as Element;
switch (isConnectedNode(node, _thisElement)) {
case ConnectedNode.CONNECTED:
d3.select(_thisElement).classed('semi-unselected', true);
break;
case ConnectedNode.NOT_CONNECTED:
d3.select(_thisElement).classed('unselected', true);
break;
default:
break;
}
});
linkElements.each(function () {
const _thisElement = this as Element;
if (isConnectedLink(node, _thisElement)) {
d3.select(_thisElement).classed('semi-unselected', true);
} else {
d3.select(_thisElement).classed('unselected', true);
}
});
}
__this.onTargetClick(node); __this.onTargetClick(node);
}); });
@ -315,11 +359,17 @@ export class HomePageComponent implements OnInit, OnDestroy {
const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement); const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
discoveryContainer.on('click', function () { discoveryContainer.on('click', function () {
__this.selectedNode = null; __this.selectedNode = null;
nodeElements.classed('unselected', function (): boolean {
return false; nodeElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unselected', false);
d3.select(_thisElement).classed('unselected', false);
}); });
linkElements.classed('unselected', function (): boolean {
return false; linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unselected', false);
d3.select(_thisElement).classed('unselected', false);
}); });
}); });
@ -377,64 +427,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
} }
}) })
.on('mousedown', function () {
const nodeElement = this as Element;
const node = getNodeFromElement(nodeElement);
if (null === node || 'zone' === node.group) {
return;
}
if (null === __this.selectedNode) {
__this.selectedNode = node;
nodeElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
linkElements.each(function () {
const _thisElement = this as Element;
d3.select(_thisElement).classed('semi-unfocused', false);
d3.select(_thisElement).classed('unfocused', false);
});
nodeElements.each(function () {
const _thisElement = this as Element;
switch (isConnectedNode(node, _thisElement)) {
case ConnectedNode.CONNECTED:
d3.select(_thisElement).classed('semi-unselected', true);
break;
case ConnectedNode.NOT_CONNECTED:
d3.select(_thisElement).classed('unselected', true);
break;
default:
break;
}
});
linkElements.each(function () {
const _thisElement = this as Element;
if (isConnectedLink(node, _thisElement)) {
d3.select(_thisElement).classed('semi-unselected', true);
} else {
d3.select(_thisElement).classed('unselected', true);
}
});
// const root = d3.select(__this.discoveryTargetRef.nativeElement);
// const zoneRect = root.select<any>('.zone').node().getBoundingClientRect();
// const nodeRect = d3.select<any, {}>(nodeElement).node().getBoundingClientRect();
// const cx = (nodeRect.x - zoneRect.x);
// const cy = (nodeRect.y - zoneRect.y);
// root
// .transition()
// .duration(500 || 0) // milliseconds
// .call(__this.zoomBehavior.transform, d3.zoomIdentity.translate(cx, cy).scale(1.4));
}
})
.on('mouseout', function () { .on('mouseout', function () {
const node = getNodeFromElement(this as Element); const node = getNodeFromElement(this as Element);

View File

@ -1,6 +1,5 @@
<div class="ui-g"> <div class="ui-g">
<div class="ui-g-12"> <div class="ui-g-12">
<ng-container [ngSwitch]="node.group"> <ng-container [ngSwitch]="node.group">
<ng-container *ngSwitchCase="'zone'"> <ng-container *ngSwitchCase="'zone'">