diff --git a/packages/network/src/AnimatedLinks.js b/packages/network/src/AnimatedLinks.js index 3bcb422052..2b09a20611 100644 --- a/packages/network/src/AnimatedLinks.js +++ b/packages/network/src/AnimatedLinks.js @@ -10,16 +10,17 @@ import React, { memo } from 'react' import PropTypes from 'prop-types' import { TransitionMotion, spring } from 'react-motion' import { useMotionConfig } from '@nivo/core' +import Link from './Link' const willEnter = ({ style, data }) => { - const x0 = data.previousSource ? data.previousSource.x : style.x0.val - const y0 = data.previousSource ? data.previousSource.y : style.y0.val + const sourceX = data.previousSource ? data.previousSource.x : style.sourceX.val + const sourceY = data.previousSource ? data.previousSource.y : style.sourceY.val return { - x0, - y0, - x1: x0, - y1: y0, + sourceX, + sourceY, + targetX: sourceX, + targetY: sourceY, } } @@ -33,10 +34,10 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => { key: link.id, data: link, style: { - x0: spring(link.source.x, springConfig), - y0: spring(link.source.y, springConfig), - x1: spring(link.target.x, springConfig), - y1: spring(link.target.y, springConfig), + sourceX: spring(link.source.x, springConfig), + sourceY: spring(link.source.y, springConfig), + targetX: spring(link.target.x, springConfig), + targetY: spring(link.target.y, springConfig), }, }))} > @@ -44,15 +45,15 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => { <> {interpolatedStyles.map(({ key, style, data: link }) => { return ( - ) })} diff --git a/packages/network/src/AnimatedNodes.js b/packages/network/src/AnimatedNodes.js index f255070f57..540c3bd291 100644 --- a/packages/network/src/AnimatedNodes.js +++ b/packages/network/src/AnimatedNodes.js @@ -10,6 +10,7 @@ import React, { memo } from 'react' import PropTypes from 'prop-types' import { TransitionMotion, spring } from 'react-motion' import { useMotionConfig } from '@nivo/core' +import Node from './Node' const willEnter = ({ style }) => ({ x: style.x.val, @@ -47,20 +48,17 @@ const AnimatedNodes = ({ nodes, color, borderWidth, borderColor }) => { <> {interpolatedStyles.map(({ key, style, data: node }) => { return ( - - - + node={node} + x={style.x} + y={style.y} + radius={Math.max(style.radius, 0)} + color={color(node)} + borderWidth={borderWidth} + borderColor={borderColor(node)} + scale={Math.max(style.scale, 0)} + /> ) })} diff --git a/packages/network/src/Link.js b/packages/network/src/Link.js new file mode 100644 index 0000000000..1f6d72b472 --- /dev/null +++ b/packages/network/src/Link.js @@ -0,0 +1,36 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' + +const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }) => { + return ( + + ) +} + +Link.propTypes = { + link: PropTypes.object.isRequired, + sourceX: PropTypes.number.isRequired, + sourceY: PropTypes.number.isRequired, + targetX: PropTypes.number.isRequired, + targetY: PropTypes.number.isRequired, + thickness: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, +} + +export default memo(Link) diff --git a/packages/network/src/Network.js b/packages/network/src/Network.js index 421389a83a..fcc23863a8 100644 --- a/packages/network/src/Network.js +++ b/packages/network/src/Network.js @@ -7,12 +7,14 @@ * file that was distributed with this source code. */ import React, { Fragment } from 'react' -import { withContainer, useDimensions, SvgWrapper, useTheme } from '@nivo/core' +import { withContainer, useDimensions, SvgWrapper, useTheme, useMotionConfig } from '@nivo/core' import { useInheritedColor } from '@nivo/colors' import { NetworkPropTypes, NetworkDefaultProps } from './props' import { useNetwork, useNodeColor, useLinkThickness } from './hooks' import AnimatedNodes from './AnimatedNodes' +import StaticNodes from './StaticNodes' import AnimatedLinks from './AnimatedLinks' +import StaticLinks from './StaticLinks' const Network = props => { const { @@ -45,6 +47,7 @@ const Network = props => { partialMargin ) + const { animate } = useMotionConfig() const theme = useTheme() const getColor = useNodeColor(nodeColor) const getBorderColor = useInheritedColor(nodeBorderColor, theme) @@ -62,26 +65,21 @@ const Network = props => { center: [innerWidth / 2, innerHeight / 2], }) - const layerById = {} - - layerById.links = ( - - ) - - layerById.nodes = ( - - ) + const layerById = { + links: React.createElement(animate === true ? AnimatedLinks : StaticLinks, { + key: 'links', + links, + linkThickness: getLinkThickness, + linkColor: getLinkColor, + }), + nodes: React.createElement(animate === true ? AnimatedNodes : StaticNodes, { + key: 'nodes', + nodes, + color: getColor, + borderWidth: nodeBorderWidth, + borderColor: getBorderColor, + }), + } return ( diff --git a/packages/network/src/Node.js b/packages/network/src/Node.js new file mode 100644 index 0000000000..a31cc9bcfb --- /dev/null +++ b/packages/network/src/Node.js @@ -0,0 +1,35 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' + +const Node = ({ x, y, radius, color, borderWidth, borderColor, scale = 1 }) => { + return ( + + ) +} + +Node.propTypes = { + node: PropTypes.object.isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + radius: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.string.isRequired, + scale: PropTypes.number, +} + +export default memo(Node) diff --git a/packages/network/src/StaticLinks.js b/packages/network/src/StaticLinks.js new file mode 100644 index 0000000000..03d105de8c --- /dev/null +++ b/packages/network/src/StaticLinks.js @@ -0,0 +1,36 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' +import Link from './Link' + +const StaticLinks = ({ links, linkThickness, linkColor }) => { + return links.map(link => { + return ( + + ) + }) +} + +StaticLinks.propTypes = { + links: PropTypes.array.isRequired, + linkThickness: PropTypes.func.isRequired, + linkColor: PropTypes.func.isRequired, +} + +export default memo(StaticLinks) diff --git a/packages/network/src/StaticNodes.js b/packages/network/src/StaticNodes.js index e69de29bb2..113a397b58 100644 --- a/packages/network/src/StaticNodes.js +++ b/packages/network/src/StaticNodes.js @@ -0,0 +1,37 @@ +/* + * This file is part of the nivo project. + * + * Copyright 2016-present, Raphaël Benitte. + * + * For the full copyright and license information, please view the LICENSE + * file that was distributed with this source code. + */ +import React, { memo } from 'react' +import PropTypes from 'prop-types' +import Node from './Node' + +const StaticNodes = ({ nodes, color, borderWidth, borderColor }) => { + return nodes.map(node => { + return ( + + ) + }) +} + +StaticNodes.propTypes = { + nodes: PropTypes.array.isRequired, + color: PropTypes.func.isRequired, + borderWidth: PropTypes.number.isRequired, + borderColor: PropTypes.func.isRequired, +} + +export default memo(StaticNodes)