From 1088de519f05299e507ff1535e2bf69525786115 Mon Sep 17 00:00:00 2001 From: DD Date: Thu, 7 Sep 2017 17:49:41 -0400 Subject: [PATCH] nest fill color in a color state. Pipe fill color to brush --- src/containers/blob/blob.js | 10 ++++++++-- src/containers/blob/broad-brush-helper.js | 4 ++-- src/containers/blob/segment-brush-helper.js | 4 ++-- src/containers/blob/style-path.js | 12 ++++++------ src/containers/brush-mode.jsx | 16 ++++++++++++++-- src/containers/eraser-mode.jsx | 5 ++++- src/containers/fill-color-indicator.jsx | 2 +- src/reducers/scratch-paint-reducer.js | 4 ++-- 8 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/containers/blob/blob.js b/src/containers/blob/blob.js index 22f4cda5..f0a3ec47 100644 --- a/src/containers/blob/blob.js +++ b/src/containers/blob/blob.js @@ -39,6 +39,9 @@ class Blobbiness { * @param {!number} options.brushSize Width of blob marking made by mouse * @param {!boolean} options.isEraser Whether the stroke should be treated as an erase path. If false, * the stroke is an additive path. + * @param {?string} options.fillColor Color of the brush stroke. + * @param {?string} options.strokeColor Color of the brush outline. + * @param {?number} options.strokeWidth Width of the brush outline. */ setOptions (options) { this.options = options; @@ -51,6 +54,9 @@ class Blobbiness { * @param {!number} options.brushSize Width of blob marking made by mouse * @param {!boolean} options.isEraser Whether the stroke should be treated as an erase path. If false, * the stroke is an additive path. + * @param {?string} options.fillColor Color of the brush stroke. + * @param {?string} options.strokeColor Color of the brush outline. + * @param {?number} options.strokeWidth Width of the brush outline. */ activateTool (options) { this.tool = new paper.Tool(); @@ -61,7 +67,7 @@ class Blobbiness { const blob = this; this.tool.onMouseMove = function (event) { blob.resizeCursorIfNeeded(event.point); - styleCursorPreview(blob.cursorPreview, blob.options.isEraser); + styleCursorPreview(blob.cursorPreview, blob.options); blob.cursorPreview.bringToFront(); blob.cursorPreview.position = event.point; }; @@ -153,7 +159,7 @@ class Blobbiness { newPreview.remove(); } else { this.cursorPreview = newPreview; - styleCursorPreview(this.cursorPreview, this.options.isEraser); + styleCursorPreview(this.cursorPreview, this.options); } this.brushSize = this.options.brushSize; } diff --git a/src/containers/blob/broad-brush-helper.js b/src/containers/blob/broad-brush-helper.js index c9cfee25..87af4f43 100644 --- a/src/containers/blob/broad-brush-helper.js +++ b/src/containers/blob/broad-brush-helper.js @@ -25,7 +25,7 @@ class BroadBrushHelper { if (event.event.button > 0) return; // only first mouse button this.finalPath = new paper.Path(); - stylePath(this.finalPath, options.isEraser); + stylePath(this.finalPath, options); this.finalPath.add(event.point); this.lastPoint = this.secondLastPoint = event.point; } @@ -77,7 +77,7 @@ class BroadBrushHelper { center: event.point, radius: options.brushSize / 2 }); - stylePath(this.finalPath, options.isEraser); + stylePath(this.finalPath, options); } else { const step = (event.point.subtract(this.lastPoint)).normalize(options.brushSize / 2); step.angle += 90; diff --git a/src/containers/blob/segment-brush-helper.js b/src/containers/blob/segment-brush-helper.js index c745b9d8..09b17cd2 100644 --- a/src/containers/blob/segment-brush-helper.js +++ b/src/containers/blob/segment-brush-helper.js @@ -32,7 +32,7 @@ class SegmentBrushHelper { radius: options.brushSize / 2 }); this.finalPath = this.firstCircle; - stylePath(this.finalPath, options.isEraser); + stylePath(this.finalPath, options); this.lastPoint = event.point; } @@ -48,7 +48,7 @@ class SegmentBrushHelper { // TODO: Add back brush styling // path = pg.stylebar.applyActiveToolbarStyle(path); - path.fillColor = 'black'; + path.fillColor = options.fillColor; // Add handles to round the end caps path.add(new paper.Segment(this.lastPoint.subtract(step), handleVec.multiply(-1), handleVec)); diff --git a/src/containers/blob/style-path.js b/src/containers/blob/style-path.js index e4380869..20b09c65 100644 --- a/src/containers/blob/style-path.js +++ b/src/containers/blob/style-path.js @@ -1,22 +1,22 @@ -const stylePath = function (path, isEraser) { - if (isEraser) { +const stylePath = function (path, options) { + if (options.isEraser) { path.fillColor = 'white'; } else { // TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen. // path = pg.stylebar.applyActiveToolbarStyle(path); - path.fillColor = 'black'; + path.fillColor = options.fillColor; } }; -const styleCursorPreview = function (path, isEraser) { - if (isEraser) { +const styleCursorPreview = function (path, options) { + if (options.isEraser) { path.fillColor = 'white'; path.strokeColor = 'cornflowerblue'; path.strokeWidth = 1; } else { // TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen. // path = pg.stylebar.applyActiveToolbarStyle(path); - path.fillColor = 'black'; + path.fillColor = options.fillColor; path.strokeColor = 'cornflowerblue'; path.strokeWidth = 1; } diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index c89e08f9..53c53d42 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -29,7 +29,11 @@ class BrushMode extends React.Component { } else if (!nextProps.isBrushModeActive && this.props.isBrushModeActive) { this.deactivateTool(); } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) { - this.blob.setOptions({isEraser: false, ...nextProps.brushModeState}); + this.blob.setOptions({ + isEraser: false, + ...this.props.colorState, + ...nextProps.brushModeState + }); } } shouldComponentUpdate () { @@ -42,7 +46,11 @@ class BrushMode extends React.Component { // TODO: This is temporary until a component that provides the brush size is hooked up this.props.canvas.addEventListener('mousewheel', this.onScroll); - this.blob.activateTool({isEraser: false, ...this.props.brushModeState}); + this.blob.activateTool({ + isEraser: false, + ...this.props.colorState, + ...this.props.brushModeState + }); } deactivateTool () { this.props.canvas.removeEventListener('mousewheel', this.onScroll); @@ -69,6 +77,9 @@ BrushMode.propTypes = { }), canvas: PropTypes.instanceOf(Element).isRequired, changeBrushSize: PropTypes.func.isRequired, + colorState: PropTypes.shape({ + fillColor: PropTypes.string.isRequired + }).isRequired, handleMouseDown: PropTypes.func.isRequired, isBrushModeActive: PropTypes.bool.isRequired, onUpdateSvg: PropTypes.func.isRequired @@ -76,6 +87,7 @@ BrushMode.propTypes = { const mapStateToProps = state => ({ brushModeState: state.scratchPaint.brushMode, + colorState: state.scratchPaint.color, isBrushModeActive: state.scratchPaint.mode === Modes.BRUSH }); const mapDispatchToProps = dispatch => ({ diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index 0972ed36..62d5b4fe 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -29,7 +29,10 @@ class EraserMode extends React.Component { } else if (!nextProps.isEraserModeActive && this.props.isEraserModeActive) { this.deactivateTool(); } else if (nextProps.isEraserModeActive && this.props.isEraserModeActive) { - this.blob.setOptions({isEraser: true, ...nextProps.eraserModeState}); + this.blob.setOptions({ + isEraser: true, + ...nextProps.eraserModeState + }); } } shouldComponentUpdate () { diff --git a/src/containers/fill-color-indicator.jsx b/src/containers/fill-color-indicator.jsx index 3db0670a..6a3084ac 100644 --- a/src/containers/fill-color-indicator.jsx +++ b/src/containers/fill-color-indicator.jsx @@ -17,7 +17,7 @@ FillColorIndicator.propTypes = { }; const mapStateToProps = state => ({ - fillColor: state.scratchPaint.fillColor + fillColor: state.scratchPaint.color.fillColor }); const mapDispatchToProps = dispatch => ({ handleChangeFillColor: fillColor => { diff --git a/src/reducers/scratch-paint-reducer.js b/src/reducers/scratch-paint-reducer.js index 1db8344c..613bcfdb 100644 --- a/src/reducers/scratch-paint-reducer.js +++ b/src/reducers/scratch-paint-reducer.js @@ -3,12 +3,12 @@ import modeReducer from './modes'; import brushModeReducer from './brush-mode'; import eraserModeReducer from './eraser-mode'; import lineModeReducer from './line-mode'; -import fillColorReducer from './fill-color'; +import colorReducer from './color'; export default combineReducers({ mode: modeReducer, brushMode: brushModeReducer, eraserMode: eraserModeReducer, lineMode: lineModeReducer, - fillColor: fillColorReducer + color: colorReducer });