From 4b667dab1b5c8e4715059f6f27c0a8a012b7c9d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Sun, 2 Jun 2019 10:27:38 +0900 Subject: [PATCH] feat(scatterplot): add support for mix-blend-mode --- packages/scatterplot/src/AnimatedNodes.js | 6 +++++- packages/scatterplot/src/Node.js | 4 ++++ packages/scatterplot/src/NodeWrapper.js | 5 +++++ packages/scatterplot/src/ScatterPlot.js | 2 ++ packages/scatterplot/src/StaticNodes.js | 5 +++++ packages/scatterplot/src/props.js | 6 ++++-- website/src/data/components/scatterplot/props.js | 15 +++++++++++++++ website/src/pages/scatterplot/index.js | 9 +++++---- 8 files changed, 45 insertions(+), 7 deletions(-) diff --git a/packages/scatterplot/src/AnimatedNodes.js b/packages/scatterplot/src/AnimatedNodes.js index 5d3e70205..786a3e9cb 100644 --- a/packages/scatterplot/src/AnimatedNodes.js +++ b/packages/scatterplot/src/AnimatedNodes.js @@ -9,7 +9,7 @@ import React, { memo } from 'react' import PropTypes from 'prop-types' import { TransitionMotion, spring } from 'react-motion' -import { useMotionConfig } from '@nivo/core' +import { useMotionConfig, blendModePropType } from '@nivo/core' import { NodePropType } from './props' import NodeWrapper from './NodeWrapper' @@ -22,6 +22,7 @@ const AnimatedNodes = ({ onMouseLeave, onClick, tooltip, + blendMode, }) => { const { springConfig } = useMotionConfig() @@ -54,6 +55,7 @@ const AnimatedNodes = ({ onMouseLeave={onMouseLeave} onClick={onClick} tooltip={tooltip} + blendMode={blendMode} /> ))} @@ -79,6 +81,8 @@ AnimatedNodes.propTypes = { PropTypes.func, PropTypes.object ]).isRequired, + + blendMode: blendModePropType.isRequired, } export default memo(AnimatedNodes) diff --git a/packages/scatterplot/src/Node.js b/packages/scatterplot/src/Node.js index cdbf47e92..7a45672bd 100644 --- a/packages/scatterplot/src/Node.js +++ b/packages/scatterplot/src/Node.js @@ -8,12 +8,14 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' +import { blendModePropType } from '@nivo/core' const Node = ({ x, y, size, color, + blendMode, onMouseEnter, onMouseMove, onMouseLeave, @@ -24,6 +26,7 @@ const Node = ({ cy={y} r={size / 2} fill={color} + style={{ mixBlendMode: blendMode }} onMouseEnter={onMouseEnter} onMouseMove={onMouseMove} onMouseLeave={onMouseLeave} @@ -51,6 +54,7 @@ Node.propTypes = { y: PropTypes.number.isRequired, size: PropTypes.number.isRequired, color: PropTypes.string.isRequired, + blendMode: blendModePropType.isRequired, onMouseEnter: PropTypes.func, onMouseMove: PropTypes.func, diff --git a/packages/scatterplot/src/NodeWrapper.js b/packages/scatterplot/src/NodeWrapper.js index 8103ce0cc..f508b2bad 100644 --- a/packages/scatterplot/src/NodeWrapper.js +++ b/packages/scatterplot/src/NodeWrapper.js @@ -8,6 +8,7 @@ */ import React, { memo, useCallback } from 'react' import PropTypes from 'prop-types' +import { blendModePropType } from '@nivo/core' import { useTooltip } from '@nivo/tooltip' import { NodePropType } from './props' @@ -24,6 +25,7 @@ const NodeWrapper = ({ onMouseLeave, onClick, tooltip, + blendMode, }) => { const { showTooltipFromEvent, hideTooltip } = useTooltip() @@ -64,6 +66,7 @@ const NodeWrapper = ({ y, size, color, + blendMode, onMouseEnter: isInteractive ? handleMouseEnter : undefined, onMouseMove: isInteractive ? handleMouseMove : undefined, onMouseLeave: isInteractive ? handleMouseLeave : undefined, @@ -89,6 +92,8 @@ NodeWrapper.propTypes = { PropTypes.func, PropTypes.object ]).isRequired, + + blendMode: blendModePropType.isRequired, } export default memo(NodeWrapper) diff --git a/packages/scatterplot/src/ScatterPlot.js b/packages/scatterplot/src/ScatterPlot.js index 6a192e49c..ecf80199d 100644 --- a/packages/scatterplot/src/ScatterPlot.js +++ b/packages/scatterplot/src/ScatterPlot.js @@ -30,6 +30,7 @@ const ScatterPlot = props => { layers, colors, + blendMode, size, renderNode, @@ -113,6 +114,7 @@ const ScatterPlot = props => { onMouseLeave, onClick, tooltip, + blendMode, }), markers: null, mesh: null, diff --git a/packages/scatterplot/src/StaticNodes.js b/packages/scatterplot/src/StaticNodes.js index e2557c9b6..939429c67 100644 --- a/packages/scatterplot/src/StaticNodes.js +++ b/packages/scatterplot/src/StaticNodes.js @@ -8,6 +8,7 @@ */ import React, { memo } from 'react' import PropTypes from 'prop-types' +import { blendModePropType } from '@nivo/core' import { NodePropType } from './props' import NodeWrapper from './NodeWrapper' @@ -20,6 +21,7 @@ const StaticNodes = ({ onMouseLeave, onClick, tooltip, + blendMode, }) => { return ( <> @@ -38,6 +40,7 @@ const StaticNodes = ({ onMouseLeave={onMouseLeave} onClick={onClick} tooltip={tooltip} + blendMode={blendMode} /> ))} @@ -61,6 +64,8 @@ StaticNodes.propTypes = { PropTypes.func, PropTypes.object ]).isRequired, + + blendMode: blendModePropType.isRequired, } export default memo(StaticNodes) diff --git a/packages/scatterplot/src/props.js b/packages/scatterplot/src/props.js index 1490693e2..39bfd4483 100644 --- a/packages/scatterplot/src/props.js +++ b/packages/scatterplot/src/props.js @@ -7,7 +7,7 @@ * file that was distributed with this source code. */ import PropTypes from 'prop-types' -import { noop, motionPropTypes } from '@nivo/core' +import { noop, motionPropTypes, blendModePropType } from '@nivo/core' import { ordinalColorsPropType } from '@nivo/colors' import { axisPropType } from '@nivo/axes' import { LegendPropShape } from '@nivo/legends' @@ -75,6 +75,7 @@ const commonPropTypes = { ), colors: ordinalColorsPropType.isRequired, + blendMode: blendModePropType.isRequired, isInteractive: PropTypes.bool.isRequired, useMesh: PropTypes.bool.isRequired, @@ -121,10 +122,11 @@ const commonDefaultProps = { axisBottom: {}, axisLeft: {}, - size: 6, + size: 9, renderNode: Node, colors: { scheme: 'nivo' }, + blendMode: 'normal', isInteractive: true, useMesh: false, diff --git a/website/src/data/components/scatterplot/props.js b/website/src/data/components/scatterplot/props.js index 4cc06f67b..468e32722 100644 --- a/website/src/data/components/scatterplot/props.js +++ b/website/src/data/components/scatterplot/props.js @@ -233,12 +233,27 @@ const props = [ }, { key: 'colors', + group: 'Style', help: 'Defines color range.', type: 'string | Function | string[]', required: false, defaultValue: defaults.colors, controlType: 'ordinalColors', + }, + { + key: 'blendMode', group: 'Style', + flavors: ['svg'], + help: 'Defines CSS mix-blend-mode property.', + description: ` + Defines CSS \`mix-blend-mode\` property for nodes, + see + [MDN documentation](https://developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode). + `, + type: 'string', + required: false, + defaultValue: defaults.blendMode, + controlType: 'blendMode', }, { key: 'layers', diff --git a/website/src/pages/scatterplot/index.js b/website/src/pages/scatterplot/index.js index 428fb5f1f..ac363ec46 100644 --- a/website/src/pages/scatterplot/index.js +++ b/website/src/pages/scatterplot/index.js @@ -33,12 +33,13 @@ const initialProperties = { max: 'auto', }, - colors: { scheme: 'nivo' }, + colors: ScatterPlotDefaultProps.colors, + blendMode: 'multiply', - size: 6, + size: ScatterPlotDefaultProps.size, - enableGridX: true, - enableGridY: true, + enableGridX: ScatterPlotDefaultProps.enableGridX, + enableGridY: ScatterPlotDefaultProps.enableGridY, axisTop: { enable: false, orient: 'top',