From 1f1440414c4b30936ea7b673800a7b3a2ea463a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <contact@matteodelabre.me>
Date: Mon, 2 Dec 2019 00:40:32 -0500
Subject: [PATCH] =?UTF-8?q?app:=20Am=C3=A9liore=20l=E2=80=99exp=C3=A9rienc?=
 =?UTF-8?q?e=20de=20d=C3=A9placement=20n=C5=93ud?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/Graph.js    | 60 ++++++++++++++++++++-------------------------
 app/style/style.css | 16 ++++++++++--
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/app/src/Graph.js b/app/src/Graph.js
index 1da434d..b40612a 100644
--- a/app/src/Graph.js
+++ b/app/src/Graph.js
@@ -64,11 +64,10 @@ const findEdge = (parent, id) =>
     parent.querySelector(`[data-edge-id="${escapeAttrValue(id)}"]`);
 
 /**
- * Recherche le premier élément parent représentant un nœud et renvoie
- * l’identifiant de ce nœud.
+ * Recherche le premier élément parent représentant un nœud.
  *
  * @param start Élément de départ.
- * @return Identifiant de l’élément trouvé ou null sinon.
+ * @return Élément trouvé ou null sinon.
  */
 const findParentNode = start =>
 {
@@ -79,7 +78,7 @@ const findParentNode = start =>
 
     if (start.hasAttribute('data-node-id'))
     {
-        return start.getAttribute('data-node-id');
+        return start;
     }
 
     return findParentNode(start.parentNode);
@@ -128,16 +127,6 @@ const Graph = ({nodes, edges, render}) =>
         }
     }
 
-    const oldNodePoints = new Set(Object.keys(layout.nodePoints));
-
-    for (let node of oldNodePoints)
-    {
-        if (!nodes.includes(node))
-        {
-            delete layout.nodePoints[node];
-        }
-    }
-
     // Ajout des nouvelles arêtes et retrait des anciennes
     const newEdges = new Set(edges.map(edge => getEdgeId(...edge)));
     const oldEdges = new Set(graph.edges.map(edge => edge.id));
@@ -160,16 +149,6 @@ const Graph = ({nodes, edges, render}) =>
         }
     }
 
-    const oldEdgeSprings = new Set(Object.keys(layout.edgeSprings));
-
-    for (let edge of oldEdgeSprings)
-    {
-        if (!newEdges.has(edge))
-        {
-            delete layout.edgeSprings[edge];
-        }
-    }
-
     // Rendu de l’animation du graphe
     useEffect(() =>
     {
@@ -209,37 +188,50 @@ const Graph = ({nodes, edges, render}) =>
             });
         });
 
-        let dragging = null;
+        let dragPoint = null;
+        let dragElement = null;
+        let dragDelta = new Springy.Vector(0, 0);
 
         const mouseDown = ev =>
         {
             const {clientX: x, clientY: y} = ev;
             const screen = new Springy.Vector(x, y);
-            const clickedNode = findParentNode(ev.target);
 
-            if (clickedNode !== null)
+            dragElement = findParentNode(ev.target);
+
+            if (dragElement !== null)
             {
-                dragging = layout.nodePoints[clickedNode];
-                dragging.m = Infinity;
+                dragPoint = layout.nodePoints[dragElement.getAttribute('data-node-id')];
+                dragPoint.m = Infinity;
+
+                dragElement.classList.add('Graph_node--dragging');
+
+                dragDelta = dragPoint.p.subtract(screenToCoords(screen));
             }
         };
 
         const mouseMove = ev =>
         {
-            if (dragging !== null)
+            if (dragElement !== null)
             {
                 const {clientX: x, clientY: y} = ev;
                 const screen = new Springy.Vector(x, y);
-                dragging.p = screenToCoords(screen);
+
+                dragPoint.p = dragDelta.add(screenToCoords(screen));
             }
         };
 
         const mouseUp = ev =>
         {
-            if (dragging !== null)
+            if (dragElement !== null)
             {
-                dragging.m = 1;
-                dragging = null;
+                dragPoint.m = 1;
+                dragPoint = null;
+
+                dragElement.classList.remove('Graph_node--dragging');
+                dragElement = null;
+
+                dragDelta = new Springy.Vector(0, 0);
             }
         };
 
diff --git a/app/style/style.css b/app/style/style.css
index b840ded..72a20d6 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -168,6 +168,20 @@ input
 
     display: block;
     transform: translate(-50%, -50%);
+
+    box-shadow:
+        0 1px 1px 0 rgba(0, 0, 0, 0.14),
+        0 2px 1px -1px rgba(0, 0, 0, 0.12),
+        0 1px 3px 0 rgba(0, 0, 0, 0.20);
+
+    transition: box-shadow var(--animation-short) var(--animation-ease-out);
+}
+
+.Graph_node--dragging
+{
+    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20); */
+    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.20);
+    /* box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.20); */
 }
 
 .Graph_empty
@@ -194,7 +208,6 @@ input
 
     background: white;
     border-radius: 2px;
-    margin-left: calc(.3 * var(--base-size));
 
     cursor: pointer;
 
@@ -207,7 +220,6 @@ input
 
 .SearchResults_result-disease
 {
-    font-size: var(--font-size-larger);
     font-style: normal;
     color: var(--color-dark);
 }