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

pipe through stroke color

Browse source
This commit is contained in:
DD 2017-09-07 18:26:18 -04:00
parent 74ff77a38d
commit ce8fdaac1c
5 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -147,7 +147,10 @@ class Blobbiness {
this.cursorPreviewLastPoint = point;
}
if (this.cursorPreview && this.brushSize === this.options.brushSize) {
if (this.cursorPreview &&
this.brushSize === this.options.brushSize &&
this.fillColor === this.options.fillColor &&
this.strokeColor === this.options.strokeColor) {
return;
}
const newPreview = new paper.Path.Circle({
@ -155,13 +158,13 @@ class Blobbiness {
radius: this.options.brushSize / 2
});
if (this.cursorPreview) {
this.cursorPreview.segments = newPreview.segments;
newPreview.remove();
} else {
this.cursorPreview = newPreview;
styleCursorPreview(this.cursorPreview, this.options);
this.cursorPreview.remove();
}
this.brushSize = this.options.brushSize;
this.fillColor = this.options.fillColor;
this.strokeColor = this.options.strokeColor;
this.cursorPreview = newPreview;
styleCursorPreview(this.cursorPreview, this.options);
}
mergeBrush (lastPath) {

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

@ -46,9 +46,7 @@ class SegmentBrushHelper {
const path = new paper.Path();
// TODO: Add back brush styling
// path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor;
stylePath(path, options);
// Add handles to round the end caps
path.add(new paper.Segment(this.lastPoint.subtract(step), handleVec.multiply(-1), handleVec));

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

@ -5,6 +5,7 @@ const stylePath = function (path, options) {
// TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen.
// path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor;
path.strokeColor = options.strokeColor;
}
};
@ -17,7 +18,7 @@ const styleCursorPreview = function (path, options) {
// TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen.
// path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor;
path.strokeColor = 'cornflowerblue';
path.strokeColor = options.strokeColor;
path.strokeWidth = 1;
}
};

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

@ -31,7 +31,7 @@ class BrushMode extends React.Component {
} else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
this.blob.setOptions({
isEraser: false,
...this.props.colorState,
...nextProps.colorState,
...nextProps.brushModeState
});
}
@ -78,7 +78,8 @@ BrushMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired,
changeBrushSize: PropTypes.func.isRequired,
colorState: PropTypes.shape({
fillColor: PropTypes.string.isRequired
fillColor: PropTypes.string.isRequired,
strokeColor: PropTypes.string.isRequired
}).isRequired,
handleMouseDown: PropTypes.func.isRequired,
isBrushModeActive: PropTypes.bool.isRequired,

10
src/containers/line-mode.jsx
View file

@ -100,9 +100,8 @@ class LineMode extends React.Component {
if (!this.path) {
this.path = new paper.Path();
// TODO add back style
// this.path = pg.stylebar.applyActiveToolbarStyle(path);
this.path.setStrokeColor('black');
// TODO add back stroke width styling
this.path.setStrokeColor(this.props.colorState.strokeColor);
this.path.setStrokeWidth(this.props.lineModeState.lineWidth);
this.path.setSelected(true);
@ -277,6 +276,10 @@ class LineMode extends React.Component {
LineMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired,
changeLineWidth: PropTypes.func.isRequired,
colorState: PropTypes.shape({
fillColor: PropTypes.string.isRequired,
strokeColor: PropTypes.string.isRequired
}).isRequired,
handleMouseDown: PropTypes.func.isRequired,
isLineModeActive: PropTypes.bool.isRequired,
lineModeState: PropTypes.shape({
@ -286,6 +289,7 @@ LineMode.propTypes = {
};
const mapStateToProps = state => ({
colorState: state.scratchPaint.color,
lineModeState: state.scratchPaint.lineMode,
isLineModeActive: state.scratchPaint.mode === Modes.LINE
});