ing
This commit is contained in:
parent
39ab3971ee
commit
21ffda5777
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
|
@ -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'">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user