From a95f74d44effa6380afce0669f24496b0ee3b280 Mon Sep 17 00:00:00 2001 From: Kirill Shumilov Date: Wed, 5 Feb 2020 16:24:57 +0300 Subject: [PATCH] feat(xod-client): change the view of ColorPicker widget and make it works with state and tweaks in simulation mode --- .../core/styles/components/ColorPicker.scss | 108 +++++++++++ .../sendToSimulationSerialMiddleware.js | 6 +- packages/xod-client/src/editor/actionTypes.js | 1 + packages/xod-client/src/editor/actions.js | 18 ++ .../components/ColorPicker/ColorSlider.jsx | 147 -------------- .../src/editor/components/ColorPicker/Hue.jsx | 65 ++++--- .../components/ColorPicker/Lightness.jsx | 58 ------ .../components/ColorPicker/SatLightBox.jsx | 126 ++++++++++++ .../components/ColorPicker/Saturation.jsx | 53 ------ .../editor/components/ColorPicker/index.jsx | 180 ++++++++++++++---- .../components/inspectorWidgets/index.js | 2 +- .../pinWidgets/ColorPinWidget.jsx | 49 ++++- .../editor/containers/ColorPickerWidget.jsx | 5 - packages/xod-client/stories/ColorPicker.jsx | 6 +- 14 files changed, 486 insertions(+), 338 deletions(-) delete mode 100644 packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx delete mode 100644 packages/xod-client/src/editor/components/ColorPicker/Lightness.jsx create mode 100644 packages/xod-client/src/editor/components/ColorPicker/SatLightBox.jsx delete mode 100644 packages/xod-client/src/editor/components/ColorPicker/Saturation.jsx diff --git a/packages/xod-client/src/core/styles/components/ColorPicker.scss b/packages/xod-client/src/core/styles/components/ColorPicker.scss index f427df4e2..9cee6e2e8 100644 --- a/packages/xod-client/src/core/styles/components/ColorPicker.scss +++ b/packages/xod-client/src/core/styles/components/ColorPicker.scss @@ -2,6 +2,9 @@ width: 220px; } .ColorPicker { + width: 220px; + position: relative; + padding: 10px 0; .HueSlider { path.marker { @@ -9,8 +12,113 @@ } } + svg { + margin-bottom: -20px; // Compensate inner paddings + } + .ColorSlider_value, .ColorSlider_label, .HueSlider_value, .HueSlider_label { fill: $sidebar-color-text; } + + .ColorPicker_preview { + position: absolute; + border-radius: 50%; + width: 25px; + height: 25px; + + right: 20px; + margin-top: -20px; + } + + .SatLightBox { + position: absolute; + overflow: hidden; + border-radius: 5px; + padding: 2px 4px; + box-sizing: border-box; + + // position it inside Hue slider + left: 55px; + top: 85px; + + .SatLightBox_gradients { + position: absolute; + z-index: 1; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + + background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0)); + background: linear-gradient(to right, #fff, rgba(255,255,255,0)); + + &:before { + content: ''; + display: block; + position: absolute; + width: 100%; + height: 100%; + + background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0)); + background: linear-gradient(to top, #000, rgba(0,0,0,0)); + } + } + + .SatLightBox_container { + position: relative; + width: 100%; + height: 100%; + z-index: 2; + } + .SatLightBox_pointer { + position: absolute; + z-index: 2; + + width: 6px; + height: 6px; + + margin-left: -3px; + margin-top: -3px; + + border: 1px solid #fff; + border-radius: 50%; + + cursor: grab; + boxShadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4); + } + } + + .ColorPicker_values { + padding: 10px 20px 0; + overflow: hidden; + + & > div { + clear: both; + } + span { + float: right; + width: 2em; + text-align: left; + } + input { + float: right; + width: 60px; + border: 1px solid transparent; + background: none; + text-align: right; + + &:focus, &:hover { + // outline: 1px solid $input-color-border; + border: 1px solid $input-color-border; + border-radius: 2px; + } + } + label, input, span { + color: $chalk; + font-size: $font-size-m; + } + } } diff --git a/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js b/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js index c310fff62..36fdf06aa 100644 --- a/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js +++ b/packages/xod-client/src/debugger/sendToSimulationSerialMiddleware.js @@ -13,14 +13,16 @@ import { import * as editorSelectors from '../editor/selectors'; import { NODE_UPDATE_PROPERTY } from '../project/actionTypes'; -import { TWEAK_PULSE_SENT } from '../editor/actionTypes'; +import { TWEAK_PULSE_SENT, NODE_PROPERTY_TWEAKED } from '../editor/actionTypes'; export default ({ getState }) => next => action => { const state = getState(); const result = next(action); const isTweakActionType = - action.type === NODE_UPDATE_PROPERTY || action.type === TWEAK_PULSE_SENT; + action.type === NODE_UPDATE_PROPERTY || + action.type === TWEAK_PULSE_SENT || + action.type === NODE_PROPERTY_TWEAKED; if (isTweakActionType && isSimulationRunning(state)) { const { id: nodeId, value = '', patchPath } = action.payload; const nodeType = R.compose( diff --git a/packages/xod-client/src/editor/actionTypes.js b/packages/xod-client/src/editor/actionTypes.js index 327ec245a..57c188e03 100644 --- a/packages/xod-client/src/editor/actionTypes.js +++ b/packages/xod-client/src/editor/actionTypes.js @@ -64,6 +64,7 @@ export const SIMULATION_ABORT = 'SIMULATION_ABORT'; export const SIMULATION_ERROR = 'SIMULATION_ERROR'; export const TWEAK_PULSE_SENT = 'TWEAK_PULSE_SENT'; +export const NODE_PROPERTY_TWEAKED = 'NODE_PROPERTY_TWEAKED'; export const SHOW_COLORPICKER_WIDGET = 'SHOW_COLORPICKER_WIDGET'; export const HIDE_COLORPICKER_WIDGET = 'HIDE_COLORPICKER_WIDGET'; diff --git a/packages/xod-client/src/editor/actions.js b/packages/xod-client/src/editor/actions.js index 474c314a1..f2ad4c457 100644 --- a/packages/xod-client/src/editor/actions.js +++ b/packages/xod-client/src/editor/actions.js @@ -910,3 +910,21 @@ export const showColorPickerWidget = elementId => ({ export const hideColorPickerWidget = () => ({ type: ActionType.HIDE_COLORPICKER_WIDGET, }); + +export const tweakNodeProperty = (nodeId, kind, key, value) => ( + dispatch, + getState +) => { + Selectors.getCurrentPatchPath(getState()).map(patchPath => + dispatch({ + type: ActionType.NODE_PROPERTY_TWEAKED, + payload: { + id: nodeId, + kind, + key, + value, + patchPath, + }, + }) + ); +}; diff --git a/packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx b/packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx deleted file mode 100644 index c40a9cc1c..000000000 --- a/packages/xod-client/src/editor/components/ColorPicker/ColorSlider.jsx +++ /dev/null @@ -1,147 +0,0 @@ -import * as R from 'ramda'; -import React from 'react'; -import PropTypes from 'prop-types'; - -import colorPropType from './colorPropType'; - -import { BAR_SIZE, MARKER_RADIUS, TEXT_Y } from './style'; - -class ColorSlider extends React.Component { - constructor(props) { - super(props); - - const { width } = props; - const padding = Math.round(width * 0.18); - const innerSize = width - padding; - - this.padding = padding / 2; - this.innerSize = innerSize; - this.outterSize = innerSize + padding; - - this.state = { - dragging: false, - }; - - // Reference to slider element - this.slider = null; - - this.handleStart = this.handleStart.bind(this); - this.handleMove = this.handleMove.bind(this); - this.handleEnd = this.handleEnd.bind(this); - this.handleClick = this.handleClick.bind(this); - this.handleReset = this.handleReset.bind(this); - } - - componentDidMount() { - document.addEventListener('mousemove', this.handleMove); - document.addEventListener('mouseup', this.handleEnd); - } - componentWillUnmount() { - document.removeEventListener('mousemove', this.handleMove); - document.removeEventListener('mouseup', this.handleEnd); - } - - handleStart() { - this.setState({ dragging: true }); - } - handleMove(event) { - if (this.state.dragging) { - event.preventDefault(); - const value = this.props.color.hsl[this.props.index]; - const newValue = R.compose(p => parseInt(p, 10), R.max(0), R.min(100))( - event.clientX / this.innerSize * 100 - ); - // Side effect: Commit new value - R.unless(R.equals(value), this.props.onChange)(newValue); - } - } - handleEnd() { - this.setState({ dragging: false }); - } - handleClick(event) { - const xClick = event.clientX; - const slider = this.slider.getBoundingClientRect(); - const percentage = (xClick - slider.x) / slider.width; - const newValue = Math.round(percentage * 100); - this.props.onChange(newValue); - } - handleReset() { - this.props.onChange(this.props.default); - } - - render() { - const value = this.props.color.hsl[this.props.index]; - return ( - - - {this.props.gradient} - - { - this.slider = el; - }} - x={0} - y={0} - width={this.innerSize} - height={BAR_SIZE} - onClick={this.handleClick} - fill={`url(#gradient_${this.props.type})`} - /> - - - {(value / 100).toFixed(3)} - - - {this.props.label} - - - - - ); - } -} - -ColorSlider.propTypes = { - color: colorPropType, - x: PropTypes.number, - y: PropTypes.number, - width: PropTypes.number, - index: PropTypes.number, // 0 — Hue, 1 — Saturation, 2 — Lightness - gradient: PropTypes.element, - type: PropTypes.string, - label: PropTypes.string, - default: PropTypes.number, - onChange: PropTypes.func, -}; - -ColorSlider.defaultProps = { - x: 0, - y: 0, - width: 220, - default: 100, -}; - -export default ColorSlider; diff --git a/packages/xod-client/src/editor/components/ColorPicker/Hue.jsx b/packages/xod-client/src/editor/components/ColorPicker/Hue.jsx index 19b18c8b3..21849152c 100644 --- a/packages/xod-client/src/editor/components/ColorPicker/Hue.jsx +++ b/packages/xod-client/src/editor/components/ColorPicker/Hue.jsx @@ -71,6 +71,41 @@ class Hue extends React.Component { this.props.onChange(this.props.default); } + renderValues() { + if (!this.props.withValues) return null; + return [ + + {(this.props.color.hsl[0] / 360).toFixed(3)} + , + + Hue + , + ]; + } + + renderPreview() { + if (!this.props.withPreview) return null; + return ( + + ); + } render() { return ( @@ -78,6 +113,7 @@ class Hue extends React.Component { className="HueSlider" transform={`translate(${this.centerOffset},${this.centerOffset})`} > + {this.renderPreview()} {Array.from({ length: 360 }, (_, deg) => ( - - - {(this.props.color.hsl[0] / 360).toFixed(3)} - - - Hue - + {this.renderValues()} ); @@ -145,6 +158,8 @@ Hue.propTypes = { y: PropTypes.number, width: PropTypes.number, default: PropTypes.number, + withPreview: PropTypes.bool, + withValues: PropTypes.bool, onChange: PropTypes.func, }; @@ -153,6 +168,8 @@ Hue.defaultProps = { y: 0, width: 220, default: 0, + withPreview: false, + withPreview: false, }; export default Hue; diff --git a/packages/xod-client/src/editor/components/ColorPicker/Lightness.jsx b/packages/xod-client/src/editor/components/ColorPicker/Lightness.jsx deleted file mode 100644 index 987caada2..000000000 --- a/packages/xod-client/src/editor/components/ColorPicker/Lightness.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import colorPropType from './colorPropType'; -import ColorSlider from './ColorSlider'; - -const Lightness = ({ color, padding, innerSize, onChange, x, y }) => { - const TYPE = 'LightnessSlider'; - const gradient = ( - - - - - - ); - return ( - - ); -}; - -Lightness.propTypes = { - color: colorPropType, - x: PropTypes.number, - y: PropTypes.number, - padding: PropTypes.number, - innerSize: PropTypes.number, - onChange: PropTypes.func, -}; - -Lightness.defaultProps = { - x: 0, - y: 0, - padding: 60, - innerSize: 160, -}; - -export default Lightness; diff --git a/packages/xod-client/src/editor/components/ColorPicker/SatLightBox.jsx b/packages/xod-client/src/editor/components/ColorPicker/SatLightBox.jsx new file mode 100644 index 000000000..a1ea09434 --- /dev/null +++ b/packages/xod-client/src/editor/components/ColorPicker/SatLightBox.jsx @@ -0,0 +1,126 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import convert from 'color-convert'; + +import colorPropType from './colorPropType'; + +const inRange = (min, max, val) => Math.max(Math.min(max, val), min); + +const calculateNewHSL = (event, hue, containerEl) => { + const containerBbox = containerEl.getBoundingClientRect(); + const { + width: cWidth, + height: cHeight, + left: cLeft, + top: cTop, + } = containerBbox; + + const x = event.clientX; + const y = event.clientY; + const leftPos = x - (cLeft + window.pageXOffset); + const topPos = y - (cTop + window.pageYOffset); + + const saturation = inRange(0, cWidth, leftPos) / cWidth * 100; + const brightness = (1 - inRange(0, cHeight, topPos) / cHeight) * 100; + return convert.hsv.hsl([hue, saturation, brightness]); +}; + +class SatLightBox extends React.Component { + constructor(props) { + super(props); + + this.containerRef = null; + + this.state = { dragging: false }; + + this.handleStart = this.handleStart.bind(this); + this.handleMove = this.handleMove.bind(this); + this.handleEnd = this.handleEnd.bind(this); + this.handleClick = this.handleClick.bind(this); + this.unbindHandlers = this.unbindHandlers.bind(this); + } + unbindHandlers() { + document.addEventListener('mousemove', this.handleMove); + document.addEventListener('mouseup', this.handleEnd); + } + + handleStart() { + this.setState({ dragging: true }); + document.addEventListener('mousemove', this.handleMove); + document.addEventListener('mouseup', this.handleEnd); + } + + handleMove(event) { + if (this.state.dragging && this.containerRef) { + event.preventDefault(); + const newHsl = calculateNewHSL( + event, + this.props.color.hsl[0], + this.containerRef + ); + this.props.onChange(newHsl[1], newHsl[2]); + } + } + handleClick(event) { + if (this.containerRef) { + const newHsl = calculateNewHSL( + event, + this.props.color.hsl[0], + this.containerRef + ); + this.props.onChange(newHsl[1], newHsl[2]); + } + } + handleEnd() { + this.setState({ dragging: false }); + this.unbindHandlers(); + } + + render() { + const pureColor = `#${convert.hsl.hex([this.props.color.hsl[0], 100, 50])}`; + const hsv = convert.hsl.hsv(this.props.color.hsl); + const pointerStyle = { + left: `${hsv[1]}%`, // saturation + top: `${100 - hsv[2]}%`, // brightness + cursor: this.state.dragging ? 'dragging' : 'drag', + }; + return ( +
{ + this.containerRef = el; + }} + > +
+
+
+
+
+ ); + } +} + +SatLightBox.propTypes = { + color: colorPropType, + width: PropTypes.number, + height: PropTypes.number, + onChange: PropTypes.func, +}; + +SatLightBox.defaultProps = { + x: 0, + y: 0, + width: 220, + height: 160, +}; + +export default SatLightBox; diff --git a/packages/xod-client/src/editor/components/ColorPicker/Saturation.jsx b/packages/xod-client/src/editor/components/ColorPicker/Saturation.jsx deleted file mode 100644 index 2e107c155..000000000 --- a/packages/xod-client/src/editor/components/ColorPicker/Saturation.jsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import colorPropType from './colorPropType'; -import ColorSlider from './ColorSlider'; - -const Saturation = ({ color, padding, innerSize, onChange, x, y }) => { - const TYPE = 'SaturationSlider'; - const gradient = ( - - - - - ); - return ( - - ); -}; - -Saturation.propTypes = { - color: colorPropType, - x: PropTypes.number, - y: PropTypes.number, - padding: PropTypes.number, - innerSize: PropTypes.number, - onChange: PropTypes.func, -}; - -Saturation.defaultProps = { - x: 0, - y: 0, - padding: 60, - innerSize: 160, -}; - -export default Saturation; diff --git a/packages/xod-client/src/editor/components/ColorPicker/index.jsx b/packages/xod-client/src/editor/components/ColorPicker/index.jsx index 6ee5f9d06..dd3a591ff 100644 --- a/packages/xod-client/src/editor/components/ColorPicker/index.jsx +++ b/packages/xod-client/src/editor/components/ColorPicker/index.jsx @@ -2,47 +2,155 @@ import * as R from 'ramda'; import React from 'react'; import PropTypes from 'prop-types'; import convert from 'color-convert'; +import { debounce } from 'throttle-debounce'; import colorPropType from './colorPropType'; - import Hue from './Hue'; -import Saturation from './Saturation'; -import Lightness from './Lightness'; - -const ColorPicker = ({ color, onChange }) => { - const updateColor = newHsl => - onChange({ - hsl: newHsl, - hex: `#${convert.hsl.hex(newHsl)}`, - }); - const setHue = hueDegree => - updateColor([hueDegree, color.hsl[1], color.hsl[2]]); - const setSaturation = saturation => - updateColor([color.hsl[0], saturation, color.hsl[2]]); - const setLightness = lightness => - updateColor([color.hsl[0], color.hsl[1], lightness]); - - return ( -
- - - ({ + hsl: newHsl, + hex: `#${convert.hsl.hex(newHsl)}`, +}); + +const getStateColors = color => ({ + color, + hue: (color.hsl[0] / 360).toFixed(3), + saturation: (color.hsl[1] / 100).toFixed(3), + lightness: (color.hsl[2] / 100).toFixed(3), +}); + +const normalizeInputValue = R.unless( + R.test(/^0*((\.[0-9]*)?|1)$/), + R.always(0) +); + +class ColorPicker extends React.Component { + constructor(props) { + super(props); + + this.state = getStateColors(props.color); + + // Basic handlers + this.onChange = debounce(10, this.onChange.bind(this)); + this.onHuePickerChange = this.onHuePickerChange.bind(this); + this.onSaturationLightnessChange = this.onSaturationLightnessChange.bind( + this + ); + // Input + this.onHueInputChange = this.onHueInputChange.bind(this); + this.onSaturationInputChange = this.onSaturationInputChange.bind(this); + this.onLightnessInputChange = this.onLightnessInputChange.bind(this); + // Commit input changes + this.onInputKeyDown = this.onInputKeyDown.bind(this); + this.commitInputs = this.commitInputs.bind(this); + } + + componentWillReceiveProps(nextProps) { + if (!R.equals(this.state.color, nextProps.color)) { + this.setState(getStateColors(nextProps.color)); + } + } + + onChange(newHsl) { + this.props.onChange(getNewColor(newHsl)); + } + onSaturationLightnessChange(saturation, lightness) { + this.onChange([this.state.color.hsl[0], saturation, lightness]); + } + onHuePickerChange(degree) { + this.onChange([degree, this.state.color.hsl[1], this.state.color.hsl[2]]); + } + onHueInputChange(event) { + this.setState({ hue: normalizeInputValue(event.target.value) }); + } + onSaturationInputChange(event) { + this.setState({ saturation: normalizeInputValue(event.target.value) }); + } + onLightnessInputChange(event) { + this.setState({ lightness: normalizeInputValue(event.target.value) }); + } + onInputKeyDown(event) { + if (event.keyCode === 13) { + this.commitInputs(); + } + } + commitInputs() { + this.onChange([ + this.state.hue * 360, + this.state.saturation * 100, + this.state.lightness * 100, + ]); + } + + render() { + const { color, hue, saturation, lightness } = this.state; + return ( +
+ - - -
- ); -}; + + + +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ ); + } +} ColorPicker.propTypes = { color: colorPropType, diff --git a/packages/xod-client/src/editor/components/inspectorWidgets/index.js b/packages/xod-client/src/editor/components/inspectorWidgets/index.js index 20f9b1f32..c5f8c9388 100644 --- a/packages/xod-client/src/editor/components/inspectorWidgets/index.js +++ b/packages/xod-client/src/editor/components/inspectorWidgets/index.js @@ -115,7 +115,7 @@ const WIDGET_MAPPING = { normalizeValue: normalizePort, }, [WIDGET_TYPE.COLOR]: { - component: ColorPinWidget, // TODO: Replace with custom widget + component: ColorPinWidget, dataType: BINDABLE_CUSTOM_TYPES.COLOR, keyDownHandlers: submitAndSelectOnEnter, normalizeValue: normalizeColor, diff --git a/packages/xod-client/src/editor/components/inspectorWidgets/pinWidgets/ColorPinWidget.jsx b/packages/xod-client/src/editor/components/inspectorWidgets/pinWidgets/ColorPinWidget.jsx index 506054f97..307d00997 100644 --- a/packages/xod-client/src/editor/components/inspectorWidgets/pinWidgets/ColorPinWidget.jsx +++ b/packages/xod-client/src/editor/components/inspectorWidgets/pinWidgets/ColorPinWidget.jsx @@ -1,15 +1,19 @@ +import * as R from 'ramda'; import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { compose, withState, withHandlers, lifecycle } from 'recompose'; +import { debounce } from 'throttle-debounce'; -import { showColorPickerWidget } from '../../../actions'; +import { showColorPickerWidget, tweakNodeProperty } from '../../../actions'; import PinWidget from './PinWidget'; import { hex2color } from '../../ColorPicker'; import ColorPickerWidget from '../../../containers/ColorPickerWidget'; +import { isSessionActive } from '../../../../debugger/selectors'; const ColorPinWidget = compose( + withState('value', 'setValue', props => props.value), withState('focused', 'setFocus', false), // We have to handle input's selection in a tricky way, // because we're changing it's value on focus @@ -28,10 +32,30 @@ const ColorPinWidget = compose( }, }), withHandlers({ - onChangeHandler: props => event => { - const value = event.target.value; - props.onChange(value); + commit: ({ onChange }) => debounce(200, value => onChange(value)), + }), + withHandlers({ + onChangeHandler: ({ + entityId, + kind, + keyName, + isActiveSession, + tweakColor, + setValue, + commit, + }) => value => { + setValue(value); + commit(value); + if (isActiveSession) { + tweakColor(entityId, kind, keyName, value); + } }, + }), + withHandlers({ + onInputChange: ({ onChangeHandler }) => event => + onChangeHandler(event.target.value), + onWidgetChange: ({ onChangeHandler }) => color => + onChangeHandler(color.hex), onFocus: props => event => { props.setSelection([ event.target.selectionStart, @@ -63,7 +87,7 @@ const ColorPinWidget = compose( type="text" id={props.elementId} value={props.value} - onChange={props.onChangeHandler} + onChange={props.onInputChange} onFocus={props.onFocus} onBlur={props.onBlur} onKeyDown={props.onKeyDown} @@ -78,7 +102,7 @@ const ColorPinWidget = compose( props.onChange(color.hex, true)} + onChange={props.onWidgetChange} /> )); @@ -108,6 +132,15 @@ ColorPinWidget.defaultProps = { }; export default connect( - () => ({}), - dispatch => bindActionCreators({ showColorPickerWidget }, dispatch) + R.applySpec({ + isActiveSession: isSessionActive, + }), + dispatch => + bindActionCreators( + { + showColorPickerWidget, + tweakColor: tweakNodeProperty, + }, + dispatch + ) )(ColorPinWidget); diff --git a/packages/xod-client/src/editor/containers/ColorPickerWidget.jsx b/packages/xod-client/src/editor/containers/ColorPickerWidget.jsx index 9de10d6f2..16afc9679 100644 --- a/packages/xod-client/src/editor/containers/ColorPickerWidget.jsx +++ b/packages/xod-client/src/editor/containers/ColorPickerWidget.jsx @@ -14,9 +14,6 @@ import PointingPopup from '../components/PointingPopup'; import ColorPicker from '../components/ColorPicker'; import colorPropType from '../components/ColorPicker/colorPropType'; -import { UPDATE_COLORPICKER_POSITION } from '../constants'; -import { triggerUpdateColorPickerWidgetPosition } from '../utils'; - class ColorPickerWidget extends React.Component { constructor(props) { super(props); @@ -50,10 +47,8 @@ class ColorPickerWidget extends React.Component { return ( diff --git a/packages/xod-client/stories/ColorPicker.jsx b/packages/xod-client/stories/ColorPicker.jsx index 5354f6b84..03d9af1d4 100644 --- a/packages/xod-client/stories/ColorPicker.jsx +++ b/packages/xod-client/stories/ColorPicker.jsx @@ -9,10 +9,8 @@ import ColorPicker from '../src/editor/components/ColorPicker/index'; const hsl = [45, 100, 50]; const hex = convert.hsl.hex(hsl); -const ColorPickerContainer = withState('color', 'onColorChange', { hsl, hex })( - ({ color, onColorChange }) => ( - - ) +const ColorPickerContainer = withState('color', 'onChange', { hsl, hex })( + ({ color, onChange }) => ); storiesOf('ColorPicker', module).add('base', () => );