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

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; 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; return;
} }
const newPreview = new paper.Path.Circle({ const newPreview = new paper.Path.Circle({
@ -155,13 +158,13 @@ class Blobbiness {
radius: this.options.brushSize / 2 radius: this.options.brushSize / 2
}); });
if (this.cursorPreview) { if (this.cursorPreview) {
this.cursorPreview.segments = newPreview.segments; this.cursorPreview.remove();
newPreview.remove();
} else {
this.cursorPreview = newPreview;
styleCursorPreview(this.cursorPreview, this.options);
} }
this.brushSize = this.options.brushSize; 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) { mergeBrush (lastPath) {

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

@ -46,9 +46,7 @@ class SegmentBrushHelper {
const path = new paper.Path(); const path = new paper.Path();
// TODO: Add back brush styling stylePath(path, options);
// path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor;
// Add handles to round the end caps // Add handles to round the end caps
path.add(new paper.Segment(this.lastPoint.subtract(step), handleVec.multiply(-1), handleVec)); 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. // TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen.
// path = pg.stylebar.applyActiveToolbarStyle(path); // path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor; 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. // TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen.
// path = pg.stylebar.applyActiveToolbarStyle(path); // path = pg.stylebar.applyActiveToolbarStyle(path);
path.fillColor = options.fillColor; path.fillColor = options.fillColor;
path.strokeColor = 'cornflowerblue'; path.strokeColor = options.strokeColor;
path.strokeWidth = 1; 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) { } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
this.blob.setOptions({ this.blob.setOptions({
isEraser: false, isEraser: false,
...this.props.colorState, ...nextProps.colorState,
...nextProps.brushModeState ...nextProps.brushModeState
}); });
} }
@ -78,7 +78,8 @@ BrushMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired, canvas: PropTypes.instanceOf(Element).isRequired,
changeBrushSize: PropTypes.func.isRequired, changeBrushSize: PropTypes.func.isRequired,
colorState: PropTypes.shape({ colorState: PropTypes.shape({
fillColor: PropTypes.string.isRequired fillColor: PropTypes.string.isRequired,
strokeColor: PropTypes.string.isRequired
}).isRequired, }).isRequired,
handleMouseDown: PropTypes.func.isRequired, handleMouseDown: PropTypes.func.isRequired,
isBrushModeActive: PropTypes.bool.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) { if (!this.path) {
this.path = new paper.Path(); this.path = new paper.Path();
// TODO add back style // TODO add back stroke width styling
// this.path = pg.stylebar.applyActiveToolbarStyle(path); this.path.setStrokeColor(this.props.colorState.strokeColor);
this.path.setStrokeColor('black');
this.path.setStrokeWidth(this.props.lineModeState.lineWidth); this.path.setStrokeWidth(this.props.lineModeState.lineWidth);
this.path.setSelected(true); this.path.setSelected(true);
@ -277,6 +276,10 @@ class LineMode extends React.Component {
LineMode.propTypes = { LineMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired, canvas: PropTypes.instanceOf(Element).isRequired,
changeLineWidth: PropTypes.func.isRequired, changeLineWidth: PropTypes.func.isRequired,
colorState: PropTypes.shape({
fillColor: PropTypes.string.isRequired,
strokeColor: PropTypes.string.isRequired
}).isRequired,
handleMouseDown: PropTypes.func.isRequired, handleMouseDown: PropTypes.func.isRequired,
isLineModeActive: PropTypes.bool.isRequired, isLineModeActive: PropTypes.bool.isRequired,
lineModeState: PropTypes.shape({ lineModeState: PropTypes.shape({
@ -286,6 +289,7 @@ LineMode.propTypes = {
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
colorState: state.scratchPaint.color,
lineModeState: state.scratchPaint.lineMode, lineModeState: state.scratchPaint.lineMode,
isLineModeActive: state.scratchPaint.mode === Modes.LINE isLineModeActive: state.scratchPaint.mode === Modes.LINE
}); });