Add line tool

src/containers/bit-line-mode.jsx

@@ -0,0 +1,107 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
+import Modes from '../lib/modes';
+import {MIXED} from '../helper/style-path';
+
+import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeMode} from '../reducers/modes';
+import {clearSelectedItems} from '../reducers/selected-items';
+import {clearSelection} from '../helper/selection';
+
+import BitLineModeComponent from '../components/bit-line-mode/bit-line-mode.jsx';
+import BitLineTool from '../helper/bit-tools/line-tool';
+
+class BitLineMode extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'activateTool',
+            'deactivateTool'
+        ]);
+    }
+    componentDidMount () {
+        if (this.props.isBitLineModeActive) {
+            this.activateTool(this.props);
+        }
+    }
+    componentWillReceiveProps (nextProps) {
+        if (this.tool && nextProps.color !== this.props.color) {
+            this.tool.setColor(nextProps.color);
+        }
+        if (this.tool && nextProps.bitBrushSize !== this.props.bitBrushSize) {
+            this.tool.setLineSize(nextProps.bitBrushSize);
+        }
+        
+        if (nextProps.isBitLineModeActive && !this.props.isBitLineModeActive) {
+            this.activateTool();
+        } else if (!nextProps.isBitLineModeActive && this.props.isBitLineModeActive) {
+            this.deactivateTool();
+        }
+    }
+    shouldComponentUpdate (nextProps) {
+        return nextProps.isBitLineModeActive !== this.props.isBitLineModeActive;
+    }
+    activateTool () {
+        clearSelection(this.props.clearSelectedItems);
+        // Force the default line color if fill is MIXED or transparent
+        let color = this.props.color;
+        if (!color || color === MIXED) {
+            this.props.onChangeFillColor(DEFAULT_COLOR);
+            color = DEFAULT_COLOR;
+        }
+        this.tool = new BitLineTool(
+            this.props.onUpdateSvg
+        );
+        this.tool.setColor(color);
+        this.tool.setLineSize(this.props.bitBrushSize);
+
+        this.tool.activate();
+    }
+    deactivateTool () {
+        this.tool.deactivateTool();
+        this.tool.remove();
+        this.tool = null;
+    }
+    render () {
+        return (
+            <BitLineModeComponent
+                isSelected={this.props.isBitLineModeActive}
+                onMouseDown={this.props.handleMouseDown}
+            />
+        );
+    }
+}
+
+BitLineMode.propTypes = {
+    bitBrushSize: PropTypes.number.isRequired,
+    clearSelectedItems: PropTypes.func.isRequired,
+    color: PropTypes.string,
+    handleMouseDown: PropTypes.func.isRequired,
+    isBitLineModeActive: PropTypes.bool.isRequired,
+    onChangeFillColor: PropTypes.func.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired
+};
+
+const mapStateToProps = state => ({
+    bitBrushSize: state.scratchPaint.bitBrushSize,
+    color: state.scratchPaint.color.fillColor,
+    isBitLineModeActive: state.scratchPaint.mode === Modes.BIT_LINE
+});
+const mapDispatchToProps = dispatch => ({
+    clearSelectedItems: () => {
+        dispatch(clearSelectedItems());
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.BIT_LINE));
+    },
+    onChangeFillColor: fillColor => {
+        dispatch(changeFillColor(fillColor));
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(BitLineMode);