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

nest fill color in a color state. Pipe fill color to brush

Browse source
This commit is contained in:
DD 2017-09-07 17:49:41 -04:00
parent 9e4c510372
commit 1088de519f
8 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/containers/blob/blob.js
View file

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

4
src/containers/blob/broad-brush-helper.js
View file

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

4
src/containers/blob/segment-brush-helper.js
View file

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

12
src/containers/blob/style-path.js
View file

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

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

@ -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 => ({

5
src/containers/eraser-mode.jsx
View file

@ -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 () {

2
src/containers/fill-color-indicator.jsx
View file

@ -17,7 +17,7 @@ FillColorIndicator.propTypes = {
};
const mapStateToProps = state => ({
fillColor: state.scratchPaint.fillColor
fillColor: state.scratchPaint.color.fillColor
});
const mapDispatchToProps = dispatch => ({
handleChangeFillColor: fillColor => {

4
src/reducers/scratch-paint-reducer.js
View file

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