From daaf4b7c756d98f43967fb6f06c107ddeb21ecd4 Mon Sep 17 00:00:00 2001
From: crusader <crusader@atgame.net>
Date: Sat, 15 Sep 2018 03:13:39 +0900
Subject: [PATCH] ing

---
 src/app/pages/home/home-page.component.scss |   4 +
 src/app/pages/home/home-page.component.ts   | 101 ++++++++++++++------
 2 files changed, 74 insertions(+), 31 deletions(-)

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;
+            });
+          }
         })
         ;