Move responsive change to the indicators instead of the reducers

Author: fsih

src/containers/stroke-color-indicator.jsx

@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeStrokeColor} from '../reducers/stroke-color';
+import {changeStrokeWidth} from '../reducers/stroke-width';
 import {openStrokeColor, closeStrokeColor} from '../reducers/modals';
 import Modes from '../lib/modes';
 import Formats from '../lib/format';
 import {isBitmap} from '../lib/format';
 
 import StrokeColorIndicatorComponent from '../components/stroke-color-indicator.jsx';
-import {applyStrokeColorToSelection} from '../helper/style-path';
+import {applyStrokeColorToSelection, applyStrokeWidthToSelection} from '../helper/style-path';
 
 class StrokeColorIndicator extends React.Component {
     constructor (props) {
@@ -31,10 +32,17 @@ class StrokeColorIndicator extends React.Component {
         }
     }
     handleChangeStrokeColor (newColor) {
+        if (this.props.strokeColor === null && newColor !== null) {
+            this._hasChanged = applyStrokeWidthToSelection(1, this.props.textEditTarget) || this._hasChanged;
+            this.props.onChangeStrokeWidth(1);
+        } else if (this.props.strokeColor !== null && newColor === null) {
+            this._hasChanged = applyStrokeWidthToSelection(0, this.props.textEditTarget) || this._hasChanged;
+            this.props.onChangeStrokeWidth(0);
+        }
         // Apply color and update redux, but do not update svg until picker closes.
-        const isDifferent =
-            applyStrokeColorToSelection(newColor, isBitmap(this.props.format), this.props.textEditTarget);
-        this._hasChanged = this._hasChanged || isDifferent;
+        this._hasChanged =
+            applyStrokeColorToSelection(newColor, isBitmap(this.props.format), this.props.textEditTarget) ||
+            this._hasChanged;
         this.props.onChangeStrokeColor(newColor);
     }
     handleCloseStrokeColor () {
@@ -68,6 +76,9 @@ const mapDispatchToProps = dispatch => ({
     onChangeStrokeColor: strokeColor => {
         dispatch(changeStrokeColor(strokeColor));
     },
+    onChangeStrokeWidth: strokeWidth => {
+        dispatch(changeStrokeWidth(strokeWidth));
+    },
     onOpenStrokeColor: () => {
         dispatch(openStrokeColor());
     },
@@ -77,10 +88,10 @@ const mapDispatchToProps = dispatch => ({
 });
 
 StrokeColorIndicator.propTypes = {
-    disabled: PropTypes.bool.isRequired,
     format: PropTypes.oneOf(Object.keys(Formats)),
     isEyeDropping: PropTypes.bool.isRequired,
     onChangeStrokeColor: PropTypes.func.isRequired,
+    onChangeStrokeWidth: PropTypes.func.isRequired,
     onCloseStrokeColor: PropTypes.func.isRequired,
     onUpdateImage: PropTypes.func.isRequired,
     strokeColor: PropTypes.string,

src/containers/stroke-width-indicator.jsx

@@ -2,10 +2,13 @@ import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 import React from 'react';
 import bindAll from 'lodash.bindall';
+import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
-import {applyStrokeWidthToSelection} from '../helper/style-path';
+import {applyStrokeColorToSelection, applyStrokeWidthToSelection} from '../helper/style-path';
 import Modes from '../lib/modes';
+import Formats from '../lib/format';
+import {isBitmap} from '../lib/format';
 
 class StrokeWidthIndicator extends React.Component {
     constructor (props) {
@@ -15,10 +18,19 @@ class StrokeWidthIndicator extends React.Component {
         ]);
     }
     handleChangeStrokeWidth (newWidth) {
-        if (applyStrokeWidthToSelection(newWidth, this.props.textEditTarget)) {
-            this.props.onUpdateImage();
+        let changed = false;
+        if (this.props.strokeWidth === 0 && newWidth > 0) {
+            changed = applyStrokeColorToSelection('#000', isBitmap(this.props.format), this.props.textEditTarget) ||
+                changed;
+            this.props.onChangeStrokeColor('#000');
+        } else if (this.props.strokeWidth > 0 && newWidth === 0) {
+            changed = applyStrokeColorToSelection(null, isBitmap(this.props.format), this.props.textEditTarget) ||
+                changed;
+            this.props.onChangeStrokeColor(null);
         }
+        changed = applyStrokeWidthToSelection(newWidth, this.props.textEditTarget) || changed;
         this.props.onChangeStrokeWidth(newWidth);
+        if (changed) this.props.onUpdateImage();
     }
     render () {
         return (
@@ -35,17 +47,23 @@ const mapStateToProps = state => ({
     disabled: state.scratchPaint.mode === Modes.BRUSH ||
         state.scratchPaint.mode === Modes.TEXT ||
         state.scratchPaint.mode === Modes.FILL,
+    format: state.scratchPaint.format,
     strokeWidth: state.scratchPaint.color.strokeWidth,
     textEditTarget: state.scratchPaint.textEditTarget
 });
 const mapDispatchToProps = dispatch => ({
+    onChangeStrokeColor: strokeColor => {
+        dispatch(changeStrokeColor(strokeColor));
+    },
     onChangeStrokeWidth: strokeWidth => {
         dispatch(changeStrokeWidth(strokeWidth));
     }
 });
 
 StrokeWidthIndicator.propTypes = {
     disabled: PropTypes.bool.isRequired,
+    format: PropTypes.oneOf(Object.keys(Formats)),
+    onChangeStrokeColor: PropTypes.func.isRequired,
     onChangeStrokeWidth: PropTypes.func.isRequired,
     onUpdateImage: PropTypes.func.isRequired,
     strokeWidth: PropTypes.number,

src/reducers/stroke-color.js

@@ -1,6 +1,5 @@
 import log from '../log/log';
 import {CHANGE_SELECTED_ITEMS} from './selected-items';
-import {CHANGE_STROKE_WIDTH} from './stroke-width';
 import {getColorsFromSelection} from '../helper/style-path';
 
 const CHANGE_STROKE_COLOR = 'scratch-paint/stroke-color/CHANGE_STROKE_COLOR';
@@ -11,13 +10,6 @@ const regExp = /^#([0-9a-f]{3}){1,2}$/i;
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case CHANGE_STROKE_WIDTH:
-        if (!isNaN(action.strokeWidth) && Math.max(0, action.strokeWidth) === 0) {
-            return null; // Change color to transparent if stroke width is set to 0
-        } else if (state === null && action.strokeWidth > 0) {
-            return '#000';
-        }
-        return state;
     case CHANGE_STROKE_COLOR:
         if (!regExp.test(action.strokeColor) && action.strokeColor !== null) {
             log.warn(`Invalid hex color code: ${action.fillColor}`);
@@ -49,6 +41,5 @@ const changeStrokeColor = function (strokeColor) {
 
 export {
     reducer as default,
-    changeStrokeColor,
-    CHANGE_STROKE_COLOR
+    changeStrokeColor
 };

src/reducers/stroke-width.js

@@ -1,6 +1,5 @@
 import log from '../log/log';
 import {CHANGE_SELECTED_ITEMS} from './selected-items';
-import {CHANGE_STROKE_COLOR} from './stroke-color';
 import {getColorsFromSelection} from '../helper/style-path';
 
 const CHANGE_STROKE_WIDTH = 'scratch-paint/stroke-width/CHANGE_STROKE_WIDTH';
@@ -10,13 +9,6 @@ const initialState = 4;
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case CHANGE_STROKE_COLOR:
-        if (action.strokeColor === null) {
-            return 0; // If stroke color is set to transparent, set stroke width to 0
-        } else if (state === 0 && action.strokeColor !== null) {
-            return 1; // If stroke color is changed from transparent, set a stroke width
-        }
-        return state;
     case CHANGE_STROKE_WIDTH:
         if (isNaN(action.strokeWidth)) {
             log.warn(`Invalid brush size: ${action.strokeWidth}`);
@@ -49,6 +41,5 @@ const changeStrokeWidth = function (strokeWidth) {
 export {
     reducer as default,
     changeStrokeWidth,
-    CHANGE_STROKE_WIDTH,
     MAX_STROKE_WIDTH
 };