diff --git a/src/app/pages/home/home-page.component.scss b/src/app/pages/home/home-page.component.scss index 1dde954..f41f37c 100644 --- a/src/app/pages/home/home-page.component.scss +++ b/src/app/pages/home/home-page.component.scss @@ -67,6 +67,10 @@ font-size: 14px; } +.focused { + opacity: 1 !important; +} + .unfocused { opacity: 0.3; } diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts index 0c64058..bd422ba 100644 --- a/src/app/pages/home/home-page.component.ts +++ b/src/app/pages/home/home-page.component.ts @@ -330,11 +330,6 @@ export class HomePageComponent implements OnInit, OnDestroy { return __this.getNode(nodeId); } - nodeElements.on('click', function () { - const node = getNodeFromElement(this as Element); - __this.onTargetClick(node); - }); - // drag nodeElements.call( d3.drag() @@ -391,9 +386,15 @@ export class HomePageComponent implements OnInit, OnDestroy { return false; } + nodeElements.on('click', function () { + const node = getNodeFromElement(this as Element); + __this.onTargetClick(node); + }); + // Highlight const discoveryContainer = d3.select(this.discoveryTargetRef.nativeElement); discoveryContainer.on('click', function () { + __this.selectedNode = null; nodeElements.classed('unselected', function (): boolean { return false; }); @@ -408,18 +409,35 @@ export class HomePageComponent implements OnInit, OnDestroy { if ('zone' === node.group) { return; } - nodeElements.classed('unfocused', function (): boolean { - if (isConnectedNode(node, this as Element)) { + + if (null === __this.selectedNode) { + nodeElements.classed('unfocused', function (): boolean { + if (isConnectedNode(node, this as Element)) { + return false; + } + return true; + }); + linkElements.classed('unfocused', function (): boolean { + if (isConnectedLink(node, this as Element)) { + return false; + } + return true; + }); + } else { + nodeElements.classed('focused', function (): boolean { + if (isConnectedNode(node, this as Element)) { + return true; + } return false; - } - return true; - }); - linkElements.classed('unfocused', function (): boolean { - if (isConnectedLink(node, this as Element)) { + }); + linkElements.classed('focused', function (): boolean { + if (isConnectedLink(node, this as Element)) { + return true; + } return false; - } - return true; - }); + }); + } + }) .on('mousedown', function () { const node = getNodeFromElement(this as Element); @@ -427,28 +445,49 @@ export class HomePageComponent implements OnInit, OnDestroy { return; } - nodeElements.classed('unselected', function (): boolean { - if (isConnectedNode(node, this as Element)) { + if (null === __this.selectedNode) { + __this.selectedNode = node; + nodeElements.classed('unfocused', function (): boolean { return false; - } - return true; - }); - linkElements.classed('unselected', function (): boolean { - if (isConnectedLink(node, this as Element)) { + }); + linkElements.classed('unfocused', function (): boolean { return false; - } - return true; - }); + }); + + nodeElements.classed('unselected', function (): boolean { + if (isConnectedNode(node, this as Element)) { + return false; + } + return true; + }); + linkElements.classed('unselected', function (): boolean { + if (isConnectedLink(node, this as Element)) { + return false; + } + return true; + }); + + } + }) .on('mouseout', function () { const node = getNodeFromElement(this as Element); - nodeElements.classed('unfocused', function (): boolean { - return false; - }); - linkElements.classed('unfocused', function (): boolean { - return false; - }); + if (null === __this.selectedNode) { + nodeElements.classed('unfocused', function (): boolean { + return false; + }); + linkElements.classed('unfocused', function (): boolean { + return false; + }); + } else { + nodeElements.classed('focused', function (): boolean { + return false; + }); + linkElements.classed('focused', function (): boolean { + return false; + }); + } }) ;