ing
This commit is contained in:
parent
39ab3971ee
commit
21ffda5777
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</p-sidebar>
|
||||
|
|
|
@ -185,7 +185,6 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
// this.simulationRestart(true);
|
||||
|
||||
this.simulationRestart();
|
||||
|
||||
this.probeService.send('DiscoveryService.DiscoverHost', requesterID, this.zone, this.discoverHost);
|
||||
}
|
||||
|
||||
|
@ -307,7 +306,52 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
|
@ -315,11 +359,17 @@ export class HomePageComponent implements OnInit, OnDestroy {
|
|||
const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement);
|
||||
discoveryContainer.on('click', function () {
|
||||
__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 () {
|
||||
const node = getNodeFromElement(this as Element);
|
||||
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
|
||||
<ng-container [ngSwitch]="node.group">
|
||||
|
||||
<ng-container *ngSwitchCase="'zone'">
|
||||
|
|
Loading…
Reference in New Issue
Block a user