From 6ef4cd4134bf503f7541d4bfa5ba7e62570eac54 Mon Sep 17 00:00:00 2001
From: crusader <crusader@atgame.net>
Date: Tue, 11 Sep 2018 00:15:05 +0900
Subject: [PATCH] ing

---
 src/app/pages/home/home-page.component.html |  2 +-
 src/app/pages/home/home-page.component.ts   | 29 +++++++++++++++++++++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/home/home-page.component.html b/src/app/pages/home/home-page.component.html
index 08d7231..1832434 100644
--- a/src/app/pages/home/home-page.component.html
+++ b/src/app/pages/home/home-page.component.html
@@ -26,7 +26,7 @@
         <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
       </g>
       <g *ngFor="let node of nodes">
-        <g [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
+        <g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
           <circle class="node" cx="0" cy="0" r="33" fill="url(#icon_db_mria)"></circle>
           <text class="textClass" y="2.5em" text-anchor="middle">{{node.id}}</text>
         </g>
diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index 98afbf2..ec1ee0c 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -165,6 +165,35 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
   simulationRestart() {
     // Update and restart the simulation.
+    const __this = this;
+
+    function started(node: Node) {
+      /** Preventing propagation of dragstart to parent elements */
+      d3.event.sourceEvent.stopPropagation();
+
+      if (!d3.event.active) {
+        __this.simulation.alphaTarget(0.3).restart();
+      }
+
+      d3.event.on('drag', dragged).on('end', ended);
+
+      function dragged() {
+        node.fx = d3.event.x;
+        node.fy = d3.event.y;
+      }
+
+      function ended() {
+        if (!d3.event.active) {
+          __this.simulation.alphaTarget(0);
+        }
+
+        node.fx = null;
+        node.fy = null;
+      }
+    }
+
+    d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container').call(d3.drag().on('start', started));
+
     this.simulation
       .nodes(this.nodes)
       .force('link', d3.forceLink(this.links).distance(150))