scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #169 from fsih/shapeColor

Browse source 
Force a color state when switching to shape tools
This commit is contained in:
DD Liu 2017-10-31 10:27:59 -04:00 committed by GitHub
commit 28b9c4149e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/containers/brush-mode.jsx
View file

@ -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,

26
src/containers/oval-mode.jsx
View file

@ -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));
}
});

26
src/containers/rect-mode.jsx
View file

@ -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));
}
});

6
src/reducers/fill-color.js
View file

@ -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
};