color -> style, move selection gradient into it

A "style" refers to something that can fill/stroke a shape.
Currently that's either a solid color or a gradient of some orientation.
The selection gradient type reducer has been removed and folded into the
"fill style" reducer.

src/containers/bit-brush-mode.jsx

@@ -5,11 +5,10 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {clearSelection} from '../helper/selection';
-import {clearGradient} from '../reducers/selection-gradient-type';
 
 import BitBrushModeComponent from '../components/bit-brush-mode/bit-brush-mode.jsx';
 import BitBrushTool from '../helper/bit-tools/brush-tool';
@@ -102,7 +101,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BIT_BRUSH));

src/containers/bit-fill-mode.jsx

@@ -7,7 +7,7 @@ import GradientTypes from '../lib/gradient-types';
 
 import FillModeComponent from '../components/bit-fill-mode/bit-fill-mode.jsx';
 
-import {changeFillColor, changeFillColor2, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, changeFillColor2, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {changeGradientType} from '../reducers/fill-mode-gradient-type';
@@ -65,10 +65,10 @@ class BitFillMode extends React.Component {
             this.props.onChangeFillColor(DEFAULT_COLOR, 0);
         }
         const gradientType = this.props.fillModeGradientType ?
-            this.props.fillModeGradientType : this.props.selectModeGradientType;
+            this.props.fillModeGradientType : this.props.styleGradientType;
         let color2 = this.props.color2;
-        if (gradientType !== this.props.selectModeGradientType) {
+        if (gradientType !== this.props.styleGradientType) {
-            if (this.props.selectModeGradientType === GradientTypes.SOLID) {
+            if (this.props.styleGradientType === GradientTypes.SOLID) {
                 color2 = getRotatedColor(color);
                 this.props.onChangeFillColor(color2, 1);
             }
@@ -104,20 +104,20 @@ BitFillMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
     color: PropTypes.string,
     color2: PropTypes.string,
+    styleGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     fillModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)),
     handleMouseDown: PropTypes.func.isRequired,
     isFillModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,
-    onUpdateImage: PropTypes.func.isRequired,
+    onUpdateImage: PropTypes.func.isRequired
-    selectModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired
 };
 
 const mapStateToProps = state => ({
     fillModeGradientType: state.scratchPaint.fillMode.gradientType, // Last user-selected gradient type
     color: state.scratchPaint.color.fillColor.primary,
     color2: state.scratchPaint.color.fillColor.secondary,
-    isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL,
+    styleGradientType: state.scratchPaint.color.fillColor.gradientType,
-    selectModeGradientType: state.scratchPaint.color.gradientType
+    isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {

src/containers/bit-line-mode.jsx

@@ -5,11 +5,10 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {clearSelection} from '../helper/selection';
-import {clearGradient} from '../reducers/selection-gradient-type';
 
 import BitLineModeComponent from '../components/bit-line-mode/bit-line-mode.jsx';
 import BitLineTool from '../helper/bit-tools/line-tool';
@@ -102,7 +101,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BIT_LINE));

src/containers/bit-oval-mode.jsx

@@ -6,10 +6,9 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -123,7 +122,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     setCursor: cursorString => {
         dispatch(setCursor(cursorString));

src/containers/bit-rect-mode.jsx

@@ -6,10 +6,9 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -123,7 +122,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     setCursor: cursorString => {
         dispatch(setCursor(cursorString));

src/containers/bit-select-mode.jsx

@@ -5,9 +5,9 @@ import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 
+import {clearFillGradient} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {getSelectedLeafItems} from '../helper/selection';
@@ -88,7 +88,7 @@ const mapStateToProps = state => ({
 });
 const mapDispatchToProps = dispatch => ({
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());

src/containers/brush-mode.jsx

@@ -6,10 +6,9 @@ import Modes from '../lib/modes';
 import Blobbiness from '../helper/blob-tools/blob';
 import {MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {clearSelection} from '../helper/selection';
 
 import BrushModeComponent from '../components/brush-mode/brush-mode.jsx';
@@ -112,7 +111,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BRUSH));

src/containers/fill-color-indicator.jsx

@@ -5,7 +5,7 @@ import bindAll from 'lodash.bindall';
 import parseColor from 'parse-color';
 
 import {changeColorIndex} from '../reducers/color-index';
-import {changeFillColor, changeFillColor2} from '../reducers/fill-color';
+import {changeFillColor, changeFillColor2} from '../reducers/fill-style';
 import {changeGradientType} from '../reducers/fill-mode-gradient-type';
 import {openFillColor, closeFillColor} from '../reducers/modals';
 import {getSelectedLeafItems} from '../helper/selection';
@@ -124,7 +124,7 @@ const mapStateToProps = state => ({
     fillColor2: state.scratchPaint.color.fillColor.secondary,
     fillColorModalVisible: state.scratchPaint.modals.fillColor,
     format: state.scratchPaint.format,
-    gradientType: state.scratchPaint.color.gradientType,
+    gradientType: state.scratchPaint.color.fillColor.gradientType,
     isEyeDropping: state.scratchPaint.color.eyeDropper.active,
     mode: state.scratchPaint.mode,
     shouldShowGradientTools: state.scratchPaint.mode === Modes.SELECT ||

src/containers/fill-mode.jsx

@@ -7,7 +7,7 @@ import GradientTypes from '../lib/gradient-types';
 import FillTool from '../helper/tools/fill-tool';
 import {getRotatedColor, MIXED} from '../helper/style-path';
 
-import {changeFillColor, changeFillColor2, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, changeFillColor2, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {clearSelection} from '../helper/selection';
@@ -69,10 +69,10 @@ class FillMode extends React.Component {
             this.props.onChangeFillColor(DEFAULT_COLOR, 0);
         }
         const gradientType = this.props.fillModeGradientType ?
-            this.props.fillModeGradientType : this.props.selectModeGradientType;
+            this.props.fillModeGradientType : this.props.fillStyleGradientType;
         let fillColor2 = this.props.fillColor2;
-        if (gradientType !== this.props.selectModeGradientType) {
+        if (gradientType !== this.props.fillStyleGradientType) {
-            if (this.props.selectModeGradientType === GradientTypes.SOLID) {
+            if (this.props.fillStyleGradientType === GradientTypes.SOLID) {
                 fillColor2 = getRotatedColor(fillColor);
                 this.props.onChangeFillColor(fillColor2, 1);
             }
@@ -114,13 +114,13 @@ FillMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
     fillColor: PropTypes.string,
     fillColor2: PropTypes.string,
+    fillStyleGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     fillModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)),
     handleMouseDown: PropTypes.func.isRequired,
     hoveredItemId: PropTypes.number,
     isFillModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,
     onUpdateImage: PropTypes.func.isRequired,
-    selectModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     setHoveredItem: PropTypes.func.isRequired
 };
 
@@ -128,9 +128,9 @@ const mapStateToProps = state => ({
     fillModeGradientType: state.scratchPaint.fillMode.gradientType, // Last user-selected gradient type
     fillColor: state.scratchPaint.color.fillColor.primary,
     fillColor2: state.scratchPaint.color.fillColor.secondary,
+    fillStyleGradientType: state.scratchPaint.color.fillColor.gradientType, // Selected item(s)' gradient type
     hoveredItemId: state.scratchPaint.hoveredItemId,
-    isFillModeActive: state.scratchPaint.mode === Modes.FILL,
+    isFillModeActive: state.scratchPaint.mode === Modes.FILL
-    selectModeGradientType: state.scratchPaint.color.gradientType
 });
 const mapDispatchToProps = dispatch => ({
     setHoveredItem: hoveredItemId => {

src/containers/oval-mode.jsx

@@ -6,11 +6,10 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -126,7 +125,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     setCursor: cursorString => {
         dispatch(setCursor(cursorString));

src/containers/rect-mode.jsx

@@ -6,11 +6,10 @@ 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 {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -126,7 +125,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     setSelectedItems: () => {
         dispatch(setSelectedItems(getSelectedLeafItems(), false /* bitmapMode */));

src/containers/text-mode.jsx

@@ -8,12 +8,11 @@ import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';
 
 import {changeFont} from '../reducers/font';
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {changeMode} from '../reducers/modes';
 import {setTextEditTarget} from '../reducers/text-edit-target';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -188,7 +187,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleChangeModeBitText: () => {
         dispatch(changeMode(Modes.BIT_TEXT));

src/helper/style-path.js

@@ -5,7 +5,7 @@ import {isGroup} from './group';
 import {getItems} from './selection';
 import GradientTypes from '../lib/gradient-types';
 import parseColor from 'parse-color';
-import {DEFAULT_COLOR} from '../reducers/fill-color';
+import {DEFAULT_COLOR} from '../reducers/fill-style';
 import {isCompoundPathChild} from '../helper/compound-path';
 
 const MIXED = 'scratch-paint/style-path/mixed';

src/lib/make-color-style-reducer.js

@@ -1,6 +1,5 @@
 import log from '../log/log';
 import {CHANGE_SELECTED_ITEMS} from '../reducers/selected-items';
-import {CLEAR_GRADIENT} from '../reducers/selection-gradient-type';
 import {getColorsFromSelection, MIXED} from '../helper/style-path';
 import GradientTypes from './gradient-types';
 
@@ -15,18 +14,32 @@ const isValidHexColor = color => {
     return true;
 };
 
-const makeColorReducer = ({
+const makeColorStyleReducer = ({
+    // Action name for changing the primary color
     changePrimaryColorAction,
+    // Action name for changing the secondary color
     changeSecondaryColorAction,
+    // Action name for changing the gradient type
+    changeGradientTypeAction,
+    // Action name for clearing the gradient
+    clearGradientAction,
+    // Initial color when not set
     defaultColor,
+    // The name of the property read from getColorsFromSelection to get the primary color.
+    // e.g. `fillColor` or `strokeColor`.
     selectionPrimaryColorKey,
+    // The name of the property read from getColorsFromSelection to get the secondary color.
+    // e.g. `fillColor2` or `strokeColor2`.
     selectionSecondaryColorKey,
+    // The name of the property read from getColorsFromSelection to get the gradient type.
+    // e.g. `fillGradientType` or `strokeGradientType`.
     selectionGradientTypeKey
 }) => function colorReducer (state, action) {
     if (typeof state === 'undefined') {
         state = {
             primary: defaultColor,
-            secondary: null
+            secondary: null,
+            gradientType: GradientTypes.SOLID
         };
     }
     switch (action.type) {
@@ -43,7 +56,11 @@ const makeColorReducer = ({
         }
         const colors = getColorsFromSelection(action.selectedItems, action.bitmapMode);
 
-        const newState = {...state, primary: colors[selectionPrimaryColorKey]};
+        const newState = {
+            ...state,
+            primary: colors[selectionPrimaryColorKey],
+            gradientType: colors[selectionGradientTypeKey]
+        };
 
         // Gradient type may be solid when multiple gradient types are selected.
         // In this case, changing the first color should not change the second color.
@@ -52,11 +69,17 @@ const makeColorReducer = ({
         }
         return newState;
     }
-    case CLEAR_GRADIENT:
+    case changeGradientTypeAction:
-        return {...state, secondary: null};
+        if (action.gradientType in GradientTypes) {
+            return {...state, gradientType: action.gradientType};
+        }
+        log.warn(`Gradient type does not exist: ${action.gradientType}`);
+        return state;
+    case clearGradientAction:
+        return {...state, secondary: null, gradientType: GradientTypes.SOLID};
     default:
         return state;
     }
 };
 
-export default makeColorReducer;
+export default makeColorStyleReducer;

src/reducers/color-index.js

@@ -1,5 +1,5 @@
 import log from '../log/log';
-import {CHANGE_GRADIENT_TYPE} from './fill-mode-gradient-type';
+import {CHANGE_FILL_GRADIENT_TYPE} from './fill-style';
 import GradientTypes from '../lib/gradient-types';
 
 const CHANGE_COLOR_INDEX = 'scratch-paint/color-index/CHANGE_COLOR_INDEX';
@@ -14,7 +14,7 @@ const reducer = function (state, action) {
             return state;
         }
         return action.index;
-    case CHANGE_GRADIENT_TYPE:
+    case CHANGE_FILL_GRADIENT_TYPE:
         if (action.gradientType === GradientTypes.SOLID) return 0;
         /* falls through */
     default:

src/reducers/color.js

@@ -1,14 +1,12 @@
 import {combineReducers} from 'redux';
 import eyeDropperReducer from './eye-dropper';
-import fillColorReducer from './fill-color';
+import fillColorReducer from './fill-style';
-import gradientTypeReducer from './selection-gradient-type';
 import strokeColorReducer from './stroke-color';
 import strokeWidthReducer from './stroke-width';
 
 export default combineReducers({
     eyeDropper: eyeDropperReducer,
     fillColor: fillColorReducer,
-    gradientType: gradientTypeReducer,
     strokeColor: strokeColorReducer,
     strokeWidth: strokeWidthReducer
 });

src/reducers/fill-color.js

@@ -1,36 +0,0 @@
-import makeColorReducer from '../lib/make-color-reducer';
-
-const CHANGE_FILL_COLOR = 'scratch-paint/fill-color/CHANGE_FILL_COLOR';
-const CHANGE_FILL_COLOR_2 = 'scratch-paint/fill-color/CHANGE_FILL_COLOR_2';
-const DEFAULT_COLOR = '#9966FF';
-
-const reducer = makeColorReducer({
-    changePrimaryColorAction: CHANGE_FILL_COLOR,
-    changeSecondaryColorAction: CHANGE_FILL_COLOR_2,
-    defaultColor: DEFAULT_COLOR,
-    selectionPrimaryColorKey: 'fillColor',
-    selectionSecondaryColorKey: 'fillColor2',
-    selectionGradientTypeKey: 'gradientType'
-});
-
-// Action creators ==================================
-const changeFillColor = function (fillColor) {
-    return {
-        type: CHANGE_FILL_COLOR,
-        color: fillColor
-    };
-};
-
-const changeFillColor2 = function (fillColor) {
-    return {
-        type: CHANGE_FILL_COLOR_2,
-        color: fillColor
-    };
-};
-
-export {
-    reducer as default,
-    changeFillColor,
-    changeFillColor2,
-    DEFAULT_COLOR
-};

src/reducers/fill-mode-gradient-type.js

@@ -2,14 +2,14 @@
 // and isn't overwritten by changing the selection.
 import GradientTypes from '../lib/gradient-types';
 import log from '../log/log';
+import {CHANGE_FILL_GRADIENT_TYPE} from './fill-style';
 
-const CHANGE_GRADIENT_TYPE = 'scratch-paint/fill-mode-gradient-type/CHANGE_GRADIENT_TYPE';
 const initialState = null;
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
     switch (action.type) {
-    case CHANGE_GRADIENT_TYPE:
+    case CHANGE_FILL_GRADIENT_TYPE:
         if (action.gradientType in GradientTypes) {
             return action.gradientType;
         }
@@ -22,16 +22,15 @@ const reducer = function (state, action) {
 
 // Action creators ==================================
 // Use this for user-initiated gradient type selections only.
-// See reducers/selection-gradient-type.js for other ways gradient type changes.
+// See reducers/fill-style.js for other ways gradient type changes.
 const changeGradientType = function (gradientType) {
     return {
-        type: CHANGE_GRADIENT_TYPE,
+        type: CHANGE_FILL_GRADIENT_TYPE,
         gradientType: gradientType
     };
 };
 
 export {
     reducer as default,
-    CHANGE_GRADIENT_TYPE,
     changeGradientType
 };

src/reducers/fill-style.js

@@ -0,0 +1,56 @@
+import makeColorStyleReducer from '../lib/make-color-style-reducer';
+
+const CHANGE_FILL_COLOR = 'scratch-paint/fill-style/CHANGE_FILL_COLOR';
+const CHANGE_FILL_COLOR_2 = 'scratch-paint/fill-style/CHANGE_FILL_COLOR_2';
+const CHANGE_FILL_GRADIENT_TYPE = 'scratch-paint/fill-style/CHANGE_FILL_GRADIENT_TYPE';
+const CLEAR_FILL_GRADIENT = 'scratch-paint/fill-style/CLEAR_FILL_GRADIENT';
+const DEFAULT_COLOR = '#9966FF';
+
+const reducer = makeColorStyleReducer({
+    changePrimaryColorAction: CHANGE_FILL_COLOR,
+    changeSecondaryColorAction: CHANGE_FILL_COLOR_2,
+    changeGradientTypeAction: CHANGE_FILL_GRADIENT_TYPE,
+    clearGradientAction: CLEAR_FILL_GRADIENT,
+    defaultColor: DEFAULT_COLOR,
+    selectionPrimaryColorKey: 'fillColor',
+    selectionSecondaryColorKey: 'fillColor2',
+    selectionGradientTypeKey: 'gradientType'
+});
+
+// Action creators ==================================
+const changeFillColor = function (fillColor) {
+    return {
+        type: CHANGE_FILL_COLOR,
+        color: fillColor
+    };
+};
+
+const changeFillColor2 = function (fillColor) {
+    return {
+        type: CHANGE_FILL_COLOR_2,
+        color: fillColor
+    };
+};
+
+const changeFillGradientType = function (gradientType) {
+    return {
+        type: CHANGE_FILL_GRADIENT_TYPE,
+        gradientType: gradientType
+    };
+};
+
+const clearFillGradient = function () {
+    return {
+        type: CLEAR_FILL_GRADIENT
+    };
+};
+
+export {
+    reducer as default,
+    changeFillColor,
+    changeFillColor2,
+    changeFillGradientType,
+    clearFillGradient,
+    DEFAULT_COLOR,
+    CHANGE_FILL_GRADIENT_TYPE
+};

src/reducers/selection-gradient-type.js

@@ -1,44 +0,0 @@
-// Gradient type shown in the select tool
-import GradientTypes from '../lib/gradient-types';
-import {getColorsFromSelection} from '../helper/style-path';
-import {CHANGE_SELECTED_ITEMS} from './selected-items';
-import {CHANGE_GRADIENT_TYPE} from './fill-mode-gradient-type';
-import log from '../log/log';
-
-const CLEAR_GRADIENT = 'scratch-paint/selection-gradient-type/CLEAR_GRADIENT';
-const initialState = GradientTypes.SOLID;
-
-const reducer = function (state, action) {
-    if (typeof state === 'undefined') state = initialState;
-    switch (action.type) {
-    case CHANGE_GRADIENT_TYPE:
-        if (action.gradientType in GradientTypes) {
-            return action.gradientType;
-        }
-        log.warn(`Gradient type does not exist: ${action.gradientType}`);
-        return state;
-    case CLEAR_GRADIENT:
-        return GradientTypes.SOLID;
-    case CHANGE_SELECTED_ITEMS:
-        // Don't change state if no selection
-        if (!action.selectedItems || !action.selectedItems.length) {
-            return state;
-        }
-        return getColorsFromSelection(action.selectedItems, action.bitmapMode).gradientType;
-    default:
-        return state;
-    }
-};
-
-// Action creators ==================================
-const clearGradient = function () {
-    return {
-        type: CLEAR_GRADIENT
-    };
-};
-
-export {
-    reducer as default,
-    CLEAR_GRADIENT,
-    clearGradient
-};