Force a real color when activating brush, pen and line mode.

src/containers/brush-mode.jsx

@@ -4,7 +4,9 @@ import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../modes/modes';
 import Blobbiness from '../helper/blob-tools/blob';
+import {MIXED} from '../helper/style-path';
 
+import {changeFillColor} from '../reducers/fill-color';
 import {changeBrushSize} from '../reducers/brush-mode';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
@@ -13,6 +15,9 @@ import {clearSelection} from '../helper/selection';
 import BrushModeComponent from '../components/brush-mode/brush-mode.jsx';
 
 class BrushMode extends React.Component {
+    static get DEFAULT_COLOR () {
+        return '#9966FF';
+    }
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -49,6 +54,12 @@ class BrushMode extends React.Component {
         // analogous to how selection works with eraser
         clearSelection(this.props.clearSelectedItems);
 
+        // Force the default brush color if fill is MIXED or transparent
+        const {fillColor} = this.props.colorState;
+        if (fillColor === MIXED || fillColor === null) {
+            this.props.onChangeFillColor(BrushMode.DEFAULT_COLOR);
+        }
+
         // TODO: This is temporary until a component that provides the brush size is hooked up
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
         this.blob.activateTool({
@@ -93,6 +104,7 @@ BrushMode.propTypes = {
     }).isRequired,
     handleMouseDown: PropTypes.func.isRequired,
     isBrushModeActive: PropTypes.bool.isRequired,
+    onChangeFillColor: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired
 };
 
@@ -110,6 +122,9 @@ const mapDispatchToProps = dispatch => ({
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BRUSH));
+    },
+    onChangeFillColor: fillColor => {
+        dispatch(changeFillColor(fillColor));
     }
 });
 

src/containers/line-mode.jsx

@@ -8,8 +8,10 @@ import {clearSelection} from '../helper/selection';
 import {endPointHit, touching} from '../helper/snapping';
 import {drawHitPoint, removeHitPoint} from '../helper/guides';
 import {stylePath} from '../helper/style-path';
+import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
+import {MIXED} from '../helper/style-path';
 
 import LineModeComponent from '../components/line-mode/line-mode.jsx';
 
@@ -17,6 +19,9 @@ class LineMode extends React.Component {
     static get SNAP_TOLERANCE () {
         return 6;
     }
+    static get DEFAULT_COLOR () {
+        return '#000000';
+    }
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -46,8 +51,15 @@ class LineMode extends React.Component {
     }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
+
+        // Force the default line color if stroke is MIXED or transparent
+        const {strokeColor} = this.props.colorState;
+        if (strokeColor === MIXED || strokeColor === null) {
+            this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR);
+        }
+
         this.tool = new paper.Tool();
-        
+
         this.path = null;
         this.hitResult = null;
 
@@ -182,7 +194,7 @@ class LineMode extends React.Component {
             removeHitPoint();
             this.hitResult = null;
         }
-        
+
         if (this.path) {
             this.props.onUpdateSvg();
             this.path = null;
@@ -233,6 +245,9 @@ const mapDispatchToProps = dispatch => ({
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.LINE));
+    },
+    onChangeStrokeColor: strokeColor => {
+        dispatch(changeStrokeColor(strokeColor));
     }
 });
 

src/containers/pen-mode.jsx

@@ -4,14 +4,19 @@ import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../modes/modes';
 
+import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
+import {MIXED} from '../helper/style-path';
 
 import {clearSelection} from '../helper/selection';
 import PenTool from '../helper/tools/pen-tool';
 import PenModeComponent from '../components/pen-mode/pen-mode.jsx';
 
 class PenMode extends React.Component {
+    static get DEFAULT_COLOR () {
+        return '#000000';
+    }
     constructor (props) {
         super(props);
         bindAll(this, [
@@ -42,6 +47,11 @@ class PenMode extends React.Component {
     }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
+        // Force the default pen color if stroke is MIXED or transparent
+        const {strokeColor} = this.props.colorState;
+        if (strokeColor === MIXED || strokeColor === null) {
+            this.props.onChangeStrokeColor(PenMode.DEFAULT_COLOR)
+        }
         this.tool = new PenTool(
             this.props.clearSelectedItems,
             this.props.onUpdateSvg
@@ -89,6 +99,9 @@ const mapDispatchToProps = dispatch => ({
         dispatch(changeMode(Modes.PEN));
     },
     deactivateTool () {
+    },
+    onChangeStrokeColor: strokeColor => {
+        dispatch(changeStrokeColor(strokeColor));
     }
 });