From 0d0cdfa757be14e4d4834f757d44ae2eaa792ab1 Mon Sep 17 00:00:00 2001 From: DD Date: Mon, 30 Oct 2017 18:23:41 -0400 Subject: [PATCH] Force a color state when switching to shape tools --- src/containers/brush-mode.jsx | 7 ++----- src/containers/oval-mode.jsx | 26 ++++++++++++++++++++++++++ src/containers/rect-mode.jsx | 26 +++++++++++++++++++++++++- src/reducers/fill-color.js | 6 ++++-- 4 files changed, 57 insertions(+), 8 deletions(-) diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index adf0f603..ee218613 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -6,7 +6,7 @@ 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 {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color'; import {changeBrushSize} from '../reducers/brush-mode'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; @@ -15,9 +15,6 @@ 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, [ @@ -55,7 +52,7 @@ class BrushMode extends React.Component { // 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); + this.props.onChangeFillColor(DEFAULT_COLOR); } this.blob.activateTool({ isEraser: false, diff --git a/src/containers/oval-mode.jsx b/src/containers/oval-mode.jsx index cf7a79bb..7578cef7 100644 --- a/src/containers/oval-mode.jsx +++ b/src/containers/oval-mode.jsx @@ -4,7 +4,10 @@ import React from 'react'; import {connect} from 'react-redux'; import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; +import {MIXED} from '../helper/style-path'; +import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color'; +import {changeStrokeColor} from '../reducers/stroke-color'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; @@ -44,6 +47,21 @@ class OvalMode extends React.Component { } activateTool () { clearSelection(this.props.clearSelectedItems); + // If fill and stroke color are both mixed/transparent/absent, set fill to default and stroke to transparent. + // If exactly one of fill or stroke color is set, set the other one to transparent. + // This way the tool won't draw an invisible state, or be unclear about what will be drawn. + const {fillColor, strokeColor, strokeWidth} = this.props.colorState; + const fillColorPresent = fillColor !== MIXED && fillColor !== null; + const strokeColorPresent = + strokeColor !== MIXED && strokeColor !== null && strokeWidth !== null && strokeWidth !== 0; + if (!fillColorPresent && !strokeColorPresent) { + this.props.onChangeFillColor(DEFAULT_COLOR); + this.props.onChangeStrokeColor(null); + } else if (!fillColorPresent && strokeColorPresent) { + this.props.onChangeFillColor(null); + } else if (fillColorPresent && !strokeColorPresent) { + this.props.onChangeStrokeColor(null); + } this.tool = new OvalTool( this.props.setSelectedItems, this.props.clearSelectedItems, @@ -76,6 +94,8 @@ OvalMode.propTypes = { }).isRequired, handleMouseDown: PropTypes.func.isRequired, isOvalModeActive: PropTypes.bool.isRequired, + onChangeFillColor: PropTypes.func.isRequired, + onChangeStrokeColor: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired, selectedItems: PropTypes.arrayOf(PropTypes.instanceOf(paper.Item)), setSelectedItems: PropTypes.func.isRequired @@ -95,6 +115,12 @@ const mapDispatchToProps = dispatch => ({ }, handleMouseDown: () => { dispatch(changeMode(Modes.OVAL)); + }, + onChangeFillColor: fillColor => { + dispatch(changeFillColor(fillColor)); + }, + onChangeStrokeColor: strokeColor => { + dispatch(changeStrokeColor(strokeColor)); } }); diff --git a/src/containers/rect-mode.jsx b/src/containers/rect-mode.jsx index d4dba28f..22ee8abe 100644 --- a/src/containers/rect-mode.jsx +++ b/src/containers/rect-mode.jsx @@ -4,7 +4,10 @@ import React from 'react'; import {connect} from 'react-redux'; import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; +import {MIXED} from '../helper/style-path'; +import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color'; +import {changeStrokeColor} from '../reducers/stroke-color'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items'; @@ -44,6 +47,21 @@ class RectMode extends React.Component { } activateTool () { clearSelection(this.props.clearSelectedItems); + // If fill and stroke color are both mixed/transparent/absent, set fill to default and stroke to transparent. + // If exactly one of fill or stroke color is set, set the other one to transparent. + // This way the tool won't draw an invisible state, or be unclear about what will be drawn. + const {fillColor, strokeColor, strokeWidth} = this.props.colorState; + const fillColorPresent = fillColor !== MIXED && fillColor !== null; + const strokeColorPresent = + strokeColor !== MIXED && strokeColor !== null && strokeWidth !== null && strokeWidth !== 0; + if (!fillColorPresent && !strokeColorPresent) { + this.props.onChangeFillColor(DEFAULT_COLOR); + this.props.onChangeStrokeColor(null); + } else if (!fillColorPresent && strokeColorPresent) { + this.props.onChangeFillColor(null); + } else if (fillColorPresent && !strokeColorPresent) { + this.props.onChangeStrokeColor(null); + } this.tool = new RectTool( this.props.setSelectedItems, this.props.clearSelectedItems, @@ -76,6 +94,8 @@ RectMode.propTypes = { }).isRequired, handleMouseDown: PropTypes.func.isRequired, isRectModeActive: PropTypes.bool.isRequired, + onChangeFillColor: PropTypes.func.isRequired, + onChangeStrokeColor: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired, selectedItems: PropTypes.arrayOf(PropTypes.instanceOf(paper.Item)), setSelectedItems: PropTypes.func.isRequired @@ -96,7 +116,11 @@ const mapDispatchToProps = dispatch => ({ handleMouseDown: () => { dispatch(changeMode(Modes.RECT)); }, - deactivateTool () { + onChangeFillColor: fillColor => { + dispatch(changeFillColor(fillColor)); + }, + onChangeStrokeColor: strokeColor => { + dispatch(changeStrokeColor(strokeColor)); } }); diff --git a/src/reducers/fill-color.js b/src/reducers/fill-color.js index 5e4a4a46..a6cf48cf 100644 --- a/src/reducers/fill-color.js +++ b/src/reducers/fill-color.js @@ -3,7 +3,8 @@ import {CHANGE_SELECTED_ITEMS} from './selected-items'; import {getColorsFromSelection} from '../helper/style-path'; const CHANGE_FILL_COLOR = 'scratch-paint/fill-color/CHANGE_FILL_COLOR'; -const initialState = '#9966FF'; +const DEFAULT_COLOR = '#9966FF'; +const initialState = DEFAULT_COLOR; // Matches hex colors const regExp = /^#([0-9a-f]{3}){1,2}$/i; @@ -37,5 +38,6 @@ const changeFillColor = function (fillColor) { export { reducer as default, - changeFillColor + changeFillColor, + DEFAULT_COLOR };