2017-10-02 15:25:04 -04:00
|
|
|
import paper from 'paper';
|
|
|
|
|
2017-09-11 14:23:30 -04:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
|
|
|
import {connect} from 'react-redux';
|
2017-09-22 13:48:18 -04:00
|
|
|
import bindAll from 'lodash.bindall';
|
2017-10-02 15:25:04 -04:00
|
|
|
|
|
|
|
import {getSelectedItems} from '../helper/selection';
|
|
|
|
import {getColorsFromSelection} from '../helper/style-path';
|
|
|
|
import {changeStrokeColor} from '../reducers/stroke-color';
|
|
|
|
import {changeStrokeWidth} from '../reducers/stroke-width';
|
|
|
|
import {changeFillColor} from '../reducers/fill-color';
|
2017-09-11 14:23:30 -04:00
|
|
|
|
2017-09-22 12:12:07 -04:00
|
|
|
const SelectionHOC = function (WrappedComponent) {
|
2017-09-11 14:23:30 -04:00
|
|
|
class SelectionComponent extends React.Component {
|
2017-09-22 13:48:18 -04:00
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
bindAll(this, [
|
|
|
|
'removeItemById'
|
|
|
|
]);
|
|
|
|
}
|
2017-09-11 14:23:30 -04:00
|
|
|
componentDidMount () {
|
2017-09-22 13:48:18 -04:00
|
|
|
if (this.props.hoveredItemId) {
|
2017-09-11 14:23:30 -04:00
|
|
|
paper.view.update();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
componentDidUpdate (prevProps) {
|
2017-09-22 13:48:18 -04:00
|
|
|
// Hovered item has changed
|
|
|
|
if ((this.props.hoveredItemId && this.props.hoveredItemId !== prevProps.hoveredItemId) ||
|
|
|
|
(!this.props.hoveredItemId && prevProps.hoveredItemId)) {
|
|
|
|
// Remove the old hover item if any
|
|
|
|
this.removeItemById(prevProps.hoveredItemId);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
removeItemById (itemId) {
|
|
|
|
if (itemId) {
|
|
|
|
const match = paper.project.getItem({
|
|
|
|
match: item => (item.id === itemId)
|
|
|
|
});
|
|
|
|
if (match) {
|
|
|
|
match.remove();
|
2017-09-14 17:13:56 -04:00
|
|
|
}
|
2017-09-11 14:23:30 -04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
render () {
|
|
|
|
const {
|
2017-09-22 13:48:18 -04:00
|
|
|
hoveredItemId, // eslint-disable-line no-unused-vars
|
2017-09-11 14:23:30 -04:00
|
|
|
...props
|
|
|
|
} = this.props;
|
|
|
|
return (
|
|
|
|
<WrappedComponent {...props} />
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
SelectionComponent.propTypes = {
|
2017-09-22 13:48:18 -04:00
|
|
|
hoveredItemId: PropTypes.number
|
2017-09-11 14:23:30 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
2017-09-22 13:48:18 -04:00
|
|
|
hoveredItemId: state.scratchPaint.hoveredItemId
|
2017-09-11 14:23:30 -04:00
|
|
|
});
|
2017-10-02 15:25:04 -04:00
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
onUpdateColors: (() => {
|
|
|
|
const selectedItems = getSelectedItems(true /* recursive */);
|
|
|
|
if (selectedItems.length === 0) {
|
|
|
|
return;
|
|
|
|
}
|
2017-10-03 15:04:53 -04:00
|
|
|
const colorState = getColorsFromSelection(selectedItems);
|
2017-10-02 15:25:04 -04:00
|
|
|
dispatch(changeFillColor(colorState.fillColor));
|
|
|
|
dispatch(changeStrokeColor(colorState.strokeColor));
|
|
|
|
dispatch(changeStrokeWidth(colorState.strokeWidth));
|
|
|
|
})
|
|
|
|
});
|
2017-09-11 14:23:30 -04:00
|
|
|
return connect(
|
2017-10-02 15:25:04 -04:00
|
|
|
mapStateToProps,
|
|
|
|
mapDispatchToProps
|
2017-09-11 14:23:30 -04:00
|
|
|
)(SelectionComponent);
|
|
|
|
};
|
|
|
|
|
2017-09-22 12:12:07 -04:00
|
|
|
export default SelectionHOC;
|