app: Améliore l’expérience de déplacement nœud

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
+ * Recherche le premier élément parent représentant un nœud.
- * l’identifiant de ce 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];
+                dragPoint = layout.nodePoints[dragElement.getAttribute('data-node-id')];
-                dragging.m = Infinity;
+                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;
+                dragPoint.m = 1;
-                dragging = null;
+                dragPoint = null;
+
+                dragElement.classList.remove('Graph_node--dragging');
+                dragElement = null;
+
+                dragDelta = new Springy.Vector(0, 0);
             }
         };
 

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