From 1f1440414c4b30936ea7b673800a7b3a2ea463a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= 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); }