diff --git a/app/src/Graph.js b/app/src/Graph.js
index b40612a..00b0abc 100644
--- a/app/src/Graph.js
+++ b/app/src/Graph.js
@@ -1,4 +1,5 @@
import React, {useState, useRef, useEffect} from 'react';
+import {TransitionGroup, CSSTransition} from 'react-transition-group';
import Springy from 'springy';
/**
@@ -204,7 +205,7 @@ const Graph = ({nodes, edges, render}) =>
dragPoint = layout.nodePoints[dragElement.getAttribute('data-node-id')];
dragPoint.m = Infinity;
- dragElement.classList.add('Graph_node--dragging');
+ dragElement.classList.add('Graph_node-dragging');
dragDelta = dragPoint.p.subtract(screenToCoords(screen));
}
@@ -228,7 +229,7 @@ const Graph = ({nodes, edges, render}) =>
dragPoint.m = 1;
dragPoint = null;
- dragElement.classList.remove('Graph_node--dragging');
+ dragElement.classList.remove('Graph_node-dragging');
dragElement = null;
dragDelta = new Springy.Vector(0, 0);
@@ -250,21 +251,38 @@ const Graph = ({nodes, edges, render}) =>
return (
- {nodes.map(id => (
- {render(id)}
- ))}
+
+ {nodes.map(id => (
+
+
+ {render(id)}
+
+
+ ))}
+
{nodes.length === 0
? Aucun résultat
diff --git a/app/style/style.css b/app/style/style.css
index 72a20d6..5fe2336 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -15,6 +15,16 @@
--animation-ease-out: cubic-bezier(0.075, 0.82, 0.165, 1);
--animation-short: .3s;
+
+ --shadow-normal:
+ 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);
+
+ --shadow-high:
+ 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);
}
body, html
@@ -84,20 +94,17 @@ input
flex-wrap: wrap;
align-items: center;
- border: 2px solid var(--color-dark);
border-radius: 2px;
background: white;
+ box-shadow: var(--shadow-normal);
+
transition: box-shadow var(--animation-short) var(--animation-ease-out);
}
.TermInput:focus-within
{
- box-shadow:
- -1px -1px 0px var(--color-dark),
- 1px -1px 0px var(--color-dark),
- 1px 1px 0px var(--color-dark),
- -1px 1px 0px var(--color-dark);
+ box-shadow: var(--shadow-high);
}
.TermInput_term
@@ -156,11 +163,6 @@ input
height: 100%;
}
-.Graph_edgesContainer line
-{
- stroke: var(--color-dark);
-}
-
.Graph_node
{
position: absolute;
@@ -169,19 +171,43 @@ 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);
-
+ box-shadow: var(--shadow-normal);
transition: box-shadow var(--animation-short) var(--animation-ease-out);
}
-.Graph_node--dragging
+.Graph_edge
{
- /* 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); */
+ stroke: var(--color-dark);
+}
+
+.Graph_node-dragging
+{
+ box-shadow: var(--shadow-high);
+}
+
+.Graph_element-exit, .Graph_element-enter
+{
+ transition: opacity var(--animation-short) var(--animation-ease-out);
+}
+
+.Graph_element-enter
+{
+ opacity: 0;
+}
+
+.Graph_element-enter-active
+{
+ opacity: 1;
+}
+
+.Graph_element-exit
+{
+ opacity: 1;
+}
+
+.Graph_element-exit-active
+{
+ opacity: 0;
}
.Graph_empty
diff --git a/package-lock.json b/package-lock.json
index e23597f..6e34330 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2329,6 +2329,11 @@
"cssom": "0.3.x"
}
},
+ "csstype": {
+ "version": "2.6.7",
+ "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+ "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ=="
+ },
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -2492,6 +2497,15 @@
"randombytes": "^2.0.0"
}
},
+ "dom-helpers": {
+ "version": "5.1.3",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.3.tgz",
+ "integrity": "sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==",
+ "requires": {
+ "@babel/runtime": "^7.6.3",
+ "csstype": "^2.6.7"
+ }
+ },
"dom-serializer": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -5943,6 +5957,17 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
"integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
},
+ "react-transition-group": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.3.0.tgz",
+ "integrity": "sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ }
+ },
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
diff --git a/package.json b/package.json
index 6cb1bf2..e31a215 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"@babel/runtime": "^7.7.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
+ "react-transition-group": "^4.3.0",
"springy": "^2.8.0"
}
}