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

View File

@ -64,11 +64,10 @@ const findEdge = (parent, id) =>
parent.querySelector(`[data-edge-id="${escapeAttrValue(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.
* lidentifiant de ce nœud.
* *
* @param start Élément de départ. * @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 => const findParentNode = start =>
{ {
@ -79,7 +78,7 @@ const findParentNode = start =>
if (start.hasAttribute('data-node-id')) if (start.hasAttribute('data-node-id'))
{ {
return start.getAttribute('data-node-id'); return start;
} }
return findParentNode(start.parentNode); 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 // Ajout des nouvelles arêtes et retrait des anciennes
const newEdges = new Set(edges.map(edge => getEdgeId(...edge))); const newEdges = new Set(edges.map(edge => getEdgeId(...edge)));
const oldEdges = new Set(graph.edges.map(edge => edge.id)); 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 lanimation du graphe // Rendu de lanimation du graphe
useEffect(() => 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 mouseDown = ev =>
{ {
const {clientX: x, clientY: y} = ev; const {clientX: x, clientY: y} = ev;
const screen = new Springy.Vector(x, y); 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 => const mouseMove = ev =>
{ {
if (dragging !== null) if (dragElement !== null)
{ {
const {clientX: x, clientY: y} = ev; const {clientX: x, clientY: y} = ev;
const screen = new Springy.Vector(x, y); const screen = new Springy.Vector(x, y);
dragging.p = screenToCoords(screen);
dragPoint.p = dragDelta.add(screenToCoords(screen));
} }
}; };
const mouseUp = ev => 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);
} }
}; };

View File

@ -168,6 +168,20 @@ input
display: block; display: block;
transform: translate(-50%, -50%); 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 .Graph_empty
@ -194,7 +208,6 @@ input
background: white; background: white;
border-radius: 2px; border-radius: 2px;
margin-left: calc(.3 * var(--base-size));
cursor: pointer; cursor: pointer;
@ -207,7 +220,6 @@ input
.SearchResults_result-disease .SearchResults_result-disease
{ {
font-size: var(--font-size-larger);
font-style: normal; font-style: normal;
color: var(--color-dark); color: var(--color-dark);
} }