From b066b3f4cdded476b6ac0bf9d6d2c22a4cae1566 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sat, 24 Jul 2021 01:05:12 +0200 Subject: added default false highlight animation toggle --- pages/index.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'pages') diff --git a/pages/index.tsx b/pages/index.tsx index 2aedc96..db1103e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -99,6 +99,7 @@ const initialPhysics = { highlight: true, highlightNodeSize: 2, highlightLinkSize: 2, + highlightAnim: false, orphans: false, } @@ -510,6 +511,16 @@ export const Tweaks = function (props: TweakProps) { onChange={(value) => setPhysics({ ...physics, particlesWidth: value })} /> + + Kill orphans + { + setPhysics({ ...physics, highlightAnim: !physics.highlightAnim }) + }} + isChecked={physics.highlightAnim} + > + setPhysics({ ...physics, highlight: !physics.highlight })} @@ -726,7 +737,7 @@ export const Graph = function (props: GraphProps) { return } - const [opacity, setOpacity] = useState(0) + const [opacity, setOpacity] = useState(1) const [fadeIn, cancel] = useAnimation((x) => setOpacity(x), { duration: 300, algorithm: Easing.Quadratic.Out, @@ -738,8 +749,11 @@ export const Graph = function (props: GraphProps) { const lastHoverNode = useRef() useEffect(() => { - hoverNode ? fadeIn() : fadeOut() hoverNode && (lastHoverNode.current = hoverNode) + if (!physics.highlightAnim) { + return + } + hoverNode ? fadeIn() : fadeOut() }, [hoverNode]) const theme = useTheme() //this was just easier than getting an actual package -- cgit v1.2.3