From 6cf7de6426e1c9f7ff552615282a2f8f64dedcc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= Date: Mon, 2 Dec 2019 01:20:27 -0500 Subject: [PATCH] =?UTF-8?q?app:=20Ajout=20animations=20entr=C3=A9e/sortie?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/src/Graph.js | 48 ++++++++++++++++++++++----------- app/style/style.css | 66 +++++++++++++++++++++++++++++++-------------- package-lock.json | 25 +++++++++++++++++ package.json | 1 + 4 files changed, 105 insertions(+), 35 deletions(-) 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 (
- {edges.map(edge => ( - - ))} + + {edges.map(edge => ( + + + + ))} + - {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" } }