diff --git a/src/containers/bit-brush-mode.jsx b/src/containers/bit-brush-mode.jsx index 3d627822..652395d8 100644 --- a/src/containers/bit-brush-mode.jsx +++ b/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)); diff --git a/src/containers/bit-fill-mode.jsx b/src/containers/bit-fill-mode.jsx index a6d528c7..85dbd118 100644 --- a/src/containers/bit-fill-mode.jsx +++ b/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 (this.props.selectModeGradientType === GradientTypes.SOLID) { + if (gradientType !== this.props.styleGradientType) { + 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, - selectModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired + onUpdateImage: PropTypes.func.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, - selectModeGradientType: state.scratchPaint.color.gradientType + styleGradientType: state.scratchPaint.color.fillColor.gradientType, + isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL }); const mapDispatchToProps = dispatch => ({ clearSelectedItems: () => { diff --git a/src/containers/bit-line-mode.jsx b/src/containers/bit-line-mode.jsx index 1adef625..5b57cdaf 100644 --- a/src/containers/bit-line-mode.jsx +++ b/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)); diff --git a/src/containers/bit-oval-mode.jsx b/src/containers/bit-oval-mode.jsx index edf6d902..edd7ebb2 100644 --- a/src/containers/bit-oval-mode.jsx +++ b/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)); diff --git a/src/containers/bit-rect-mode.jsx b/src/containers/bit-rect-mode.jsx index c07d3a9f..61aa53fa 100644 --- a/src/containers/bit-rect-mode.jsx +++ b/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)); diff --git a/src/containers/bit-select-mode.jsx b/src/containers/bit-select-mode.jsx index 189799f5..7f049b14 100644 --- a/src/containers/bit-select-mode.jsx +++ b/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()); diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index ba78de65..32a80640 100644 --- a/src/containers/brush-mode.jsx +++ b/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)); diff --git a/src/containers/fill-color-indicator.jsx b/src/containers/fill-color-indicator.jsx index 0a4de156..8ff198ef 100644 --- a/src/containers/fill-color-indicator.jsx +++ b/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 || diff --git a/src/containers/fill-mode.jsx b/src/containers/fill-mode.jsx index e0f468ae..63d10815 100644 --- a/src/containers/fill-mode.jsx +++ b/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 (this.props.selectModeGradientType === GradientTypes.SOLID) { + if (gradientType !== this.props.fillStyleGradientType) { + 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, - selectModeGradientType: state.scratchPaint.color.gradientType + isFillModeActive: state.scratchPaint.mode === Modes.FILL }); const mapDispatchToProps = dispatch => ({ setHoveredItem: hoveredItemId => { diff --git a/src/containers/oval-mode.jsx b/src/containers/oval-mode.jsx index 445c20ef..c5b99d99 100644 --- a/src/containers/oval-mode.jsx +++ b/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)); diff --git a/src/containers/rect-mode.jsx b/src/containers/rect-mode.jsx index 14fa8010..f4929f93 100644 --- a/src/containers/rect-mode.jsx +++ b/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 */)); diff --git a/src/containers/text-mode.jsx b/src/containers/text-mode.jsx index d075eb77..eda064d7 100644 --- a/src/containers/text-mode.jsx +++ b/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)); diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 319c2ea3..1a2a394a 100644 --- a/src/helper/style-path.js +++ b/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'; diff --git a/src/lib/make-color-reducer.js b/src/lib/make-color-style-reducer.js similarity index 57% rename from src/lib/make-color-reducer.js rename to src/lib/make-color-style-reducer.js index 786f24ca..79ca899c 100644 --- a/src/lib/make-color-reducer.js +++ b/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: - return {...state, secondary: null}; + case changeGradientTypeAction: + 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; diff --git a/src/reducers/color-index.js b/src/reducers/color-index.js index c762ef83..4520f627 100644 --- a/src/reducers/color-index.js +++ b/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: diff --git a/src/reducers/color.js b/src/reducers/color.js index ed641f8d..1ceb3aa4 100644 --- a/src/reducers/color.js +++ b/src/reducers/color.js @@ -1,14 +1,12 @@ import {combineReducers} from 'redux'; import eyeDropperReducer from './eye-dropper'; -import fillColorReducer from './fill-color'; -import gradientTypeReducer from './selection-gradient-type'; +import fillColorReducer from './fill-style'; import strokeColorReducer from './stroke-color'; import strokeWidthReducer from './stroke-width'; export default combineReducers({ eyeDropper: eyeDropperReducer, fillColor: fillColorReducer, - gradientType: gradientTypeReducer, strokeColor: strokeColorReducer, strokeWidth: strokeWidthReducer }); diff --git a/src/reducers/fill-color.js b/src/reducers/fill-color.js deleted file mode 100644 index 4c234b66..00000000 --- a/src/reducers/fill-color.js +++ /dev/null @@ -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 -}; diff --git a/src/reducers/fill-mode-gradient-type.js b/src/reducers/fill-mode-gradient-type.js index b19753b3..571740f4 100644 --- a/src/reducers/fill-mode-gradient-type.js +++ b/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 }; diff --git a/src/reducers/fill-style.js b/src/reducers/fill-style.js new file mode 100644 index 00000000..b98b73f8 --- /dev/null +++ b/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 +}; diff --git a/src/reducers/selection-gradient-type.js b/src/reducers/selection-gradient-type.js deleted file mode 100644 index c0d97918..00000000 --- a/src/reducers/selection-gradient-type.js +++ /dev/null @@ -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 -};