matteo/wikimedica-disease-search
matteo
/
wikimedica-disease-search
1
0
Fork 0
Code Issues 2 Pull Requests Releases Activity

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

This commit is contained in:
Mattéo Delabre 2019-12-02 00:40:32 -05:00
parent 2f5674284c
commit 1f1440414c
Signed by: matteo
GPG Key ID: AE3FBD02DC583ABB
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
app/src/Graph.js
View File

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

16
app/style/style.css
View File

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