Gradient outlines part 1

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';
@@ -94,15 +93,15 @@ BitBrushMode.propTypes = {
 
 const mapStateToProps = state => ({
     bitBrushSize: state.scratchPaint.bitBrushSize,
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     isBitBrushModeActive: state.scratchPaint.mode === Modes.BIT_BRUSH
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BIT_BRUSH));

src/containers/bit-fill-mode.jsx

@@ -7,8 +7,7 @@ import GradientTypes from '../lib/gradient-types';
 
 import FillModeComponent from '../components/bit-fill-mode/bit-fill-mode.jsx';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
-import {changeFillColor2} from '../reducers/fill-color-2';
+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';
@@ -66,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);
             }
@@ -105,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,
-    color2: state.scratchPaint.color.fillColor2,
-    isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL,
-    selectModeGradientType: state.scratchPaint.color.gradientType
+    color: state.scratchPaint.color.fillColor.primary,
+    color2: state.scratchPaint.color.fillColor.secondary,
+    styleGradientType: state.scratchPaint.color.fillColor.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';
@@ -94,15 +93,15 @@ BitLineMode.propTypes = {
 
 const mapStateToProps = state => ({
     bitBrushSize: state.scratchPaint.bitBrushSize,
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     isBitLineModeActive: state.scratchPaint.mode === Modes.BIT_LINE
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         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';
@@ -111,7 +110,7 @@ BitOvalMode.propTypes = {
 };
 
 const mapStateToProps = state => ({
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     filled: state.scratchPaint.fillBitmapShapes,
     isOvalModeActive: state.scratchPaint.mode === Modes.BIT_OVAL,
     selectedItems: state.scratchPaint.selectedItems,
@@ -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';
@@ -111,7 +110,7 @@ BitRectMode.propTypes = {
 };
 
 const mapStateToProps = state => ({
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     filled: state.scratchPaint.fillBitmapShapes,
     isRectModeActive: state.scratchPaint.mode === Modes.BIT_RECT,
     selectedItems: state.scratchPaint.selectedItems,
@@ -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';
@@ -35,9 +34,12 @@ class BrushMode extends React.Component {
         } else if (!nextProps.isBrushModeActive && this.props.isBrushModeActive) {
             this.deactivateTool();
         } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
+            const {fillColor, strokeColor, strokeWidth} = nextProps.colorState;
             this.blob.setOptions({
                 isEraser: false,
-                ...nextProps.colorState,
+                fillColor: fillColor.primary,
+                strokeColor,
+                strokeWidth,
                 ...nextProps.brushModeState
             });
         }
@@ -56,7 +58,7 @@ class BrushMode extends React.Component {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
         // Force the default brush color if fill is MIXED or transparent
-        const {fillColor} = this.props.colorState;
+        const fillColor = this.props.colorState.fillColor.primary;
         if (fillColor === MIXED || fillColor === null) {
             this.props.onChangeFillColor(DEFAULT_COLOR);
         }
@@ -86,7 +88,10 @@ BrushMode.propTypes = {
     clearGradient: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
     colorState: PropTypes.shape({
-        fillColor: PropTypes.string,
+        fillColor: PropTypes.shape({
+            primary: PropTypes.string,
+            secondary: PropTypes.string
+        }),
         strokeColor: PropTypes.string,
         strokeWidth: PropTypes.number
     }).isRequired,
@@ -106,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,8 +5,7 @@ import bindAll from 'lodash.bindall';
 import parseColor from 'parse-color';
 
 import {changeColorIndex} from '../reducers/color-index';
-import {changeFillColor} from '../reducers/fill-color';
-import {changeFillColor2} from '../reducers/fill-color-2';
+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';
@@ -17,7 +16,7 @@ import {isBitmap} from '../lib/format';
 import GradientTypes from '../lib/gradient-types';
 
 import FillColorIndicatorComponent from '../components/fill-color-indicator.jsx';
-import {applyFillColorToSelection,
+import {applyColorToSelection,
     applyGradientTypeToSelection,
     getRotatedColor,
     swapColorsInSelection,
@@ -46,11 +45,12 @@ class FillColorIndicator extends React.Component {
     }
     handleChangeFillColor (newColor) {
         // Apply color and update redux, but do not update svg until picker closes.
-        const isDifferent = applyFillColorToSelection(
+        const isDifferent = applyColorToSelection(
             newColor,
             this.props.colorIndex,
             this.props.gradientType === GradientTypes.SOLID,
             isBitmap(this.props.format),
+            false, // applyToStroke
             this.props.textEditTarget);
         this._hasChanged = this._hasChanged || isDifferent;
         this.props.onChangeFillColor(newColor, this.props.colorIndex);
@@ -60,6 +60,7 @@ class FillColorIndicator extends React.Component {
         const isDifferent = applyGradientTypeToSelection(
             gradientType,
             isBitmap(this.props.format),
+            false, // applyToStroke
             this.props.textEditTarget);
         this._hasChanged = this._hasChanged || isDifferent;
         const hasSelectedItems = getSelectedLeafItems().length > 0;
@@ -93,6 +94,7 @@ class FillColorIndicator extends React.Component {
         if (getSelectedLeafItems().length) {
             const isDifferent = swapColorsInSelection(
                 isBitmap(this.props.format),
+                false, // applyToStroke
                 this.props.textEditTarget);
             this.props.setSelectedItems();
             this._hasChanged = this._hasChanged || isDifferent;
@@ -121,11 +123,11 @@ class FillColorIndicator extends React.Component {
 const mapStateToProps = state => ({
     colorIndex: state.scratchPaint.fillMode.colorIndex,
     disabled: state.scratchPaint.mode === Modes.LINE,
-    fillColor: state.scratchPaint.color.fillColor,
-    fillColor2: state.scratchPaint.color.fillColor2,
+    fillColor: state.scratchPaint.color.fillColor.primary,
+    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,8 +7,7 @@ import GradientTypes from '../lib/gradient-types';
 import FillTool from '../helper/tools/fill-tool';
 import {getRotatedColor, MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
-import {changeFillColor2} from '../reducers/fill-color-2';
+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';
@@ -70,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);
             }
@@ -115,23 +114,23 @@ 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
 };
 
 const mapStateToProps = state => ({
     fillModeGradientType: state.scratchPaint.fillMode.gradientType, // Last user-selected gradient type
-    fillColor: state.scratchPaint.color.fillColor,
-    fillColor2: state.scratchPaint.color.fillColor2,
+    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 => {

src/containers/line-mode.jsx

@@ -255,7 +255,10 @@ class LineMode extends React.Component {
 LineMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
     colorState: PropTypes.shape({
-        fillColor: PropTypes.string,
+        fillColor: PropTypes.shape({
+            primary: PropTypes.string,
+            secondary: PropTypes.string
+        }),
         strokeColor: PropTypes.string,
         strokeWidth: PropTypes.number
     }).isRequired,