mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2025-01-08 05:32:01 -05:00
Gradients in line mode
The UX here isn't the best thing in the world but I think having the functionality is important judging from the playtest
This commit is contained in:
parent
689532f269
commit
98daa5ee5d
3 changed files with 24 additions and 12 deletions
src
|
@ -8,7 +8,7 @@ import ColorStyleProptype from '../lib/color-style-proptype';
|
|||
import {clearSelection} from '../helper/selection';
|
||||
import {endPointHit, touching} from '../helper/snapping';
|
||||
import {drawHitPoint, removeHitPoint} from '../helper/guides';
|
||||
import {stylePath} from '../helper/style-path';
|
||||
import {styleShape} from '../helper/style-path';
|
||||
import {changeStrokeColor, clearStrokeGradient} from '../reducers/stroke-style';
|
||||
import {changeStrokeWidth} from '../reducers/stroke-width';
|
||||
import {changeMode} from '../reducers/modes';
|
||||
|
@ -103,7 +103,11 @@ class LineMode extends React.Component {
|
|||
this.hitResult = endPointHit(event.point, LineMode.SNAP_TOLERANCE);
|
||||
if (this.hitResult) {
|
||||
this.path = this.hitResult.path;
|
||||
stylePath(this.path, this.props.colorState.strokeColor.primary, this.props.colorState.strokeWidth);
|
||||
styleShape(this.path, {
|
||||
fillColor: null,
|
||||
strokeColor: this.props.colorState.strokeColor,
|
||||
strokeWidth: this.props.colorState.strokeWidth
|
||||
});
|
||||
if (this.hitResult.isFirst) {
|
||||
this.path.reverse();
|
||||
}
|
||||
|
@ -116,7 +120,11 @@ class LineMode extends React.Component {
|
|||
if (!this.path) {
|
||||
this.path = new paper.Path();
|
||||
this.path.strokeCap = 'round';
|
||||
stylePath(this.path, this.props.colorState.strokeColor.primary, this.props.colorState.strokeWidth);
|
||||
styleShape(this.path, {
|
||||
fillColor: null,
|
||||
strokeColor: this.props.colorState.strokeColor,
|
||||
strokeWidth: this.props.colorState.strokeWidth
|
||||
});
|
||||
|
||||
this.path.add(event.point);
|
||||
this.path.add(event.point); // Add second point, which is what will move when dragged
|
||||
|
@ -188,6 +196,12 @@ class LineMode extends React.Component {
|
|||
} else {
|
||||
this.path.lastSegment.point = endPoint;
|
||||
}
|
||||
|
||||
styleShape(this.path, {
|
||||
fillColor: null,
|
||||
strokeColor: this.props.colorState.strokeColor,
|
||||
strokeWidth: this.props.colorState.strokeWidth
|
||||
});
|
||||
}
|
||||
onMouseUp (event) {
|
||||
if (event.event.button > 0 || !this.active) return; // only first mouse button
|
||||
|
@ -227,6 +241,12 @@ class LineMode extends React.Component {
|
|||
this.hitResult = null;
|
||||
}
|
||||
|
||||
styleShape(this.path, {
|
||||
fillColor: null,
|
||||
strokeColor: this.props.colorState.strokeColor,
|
||||
strokeWidth: this.props.colorState.strokeWidth
|
||||
});
|
||||
|
||||
if (this.path) {
|
||||
this.props.onUpdateImage();
|
||||
this.path = null;
|
||||
|
|
|
@ -551,14 +551,6 @@ const styleBlob = function (path, options) {
|
|||
}
|
||||
};
|
||||
|
||||
const stylePath = function (path, strokeColor, strokeWidth) {
|
||||
// Make sure a visible line is drawn
|
||||
path.setStrokeColor(
|
||||
(strokeColor === MIXED || strokeColor === null) ? 'black' : strokeColor);
|
||||
path.setStrokeWidth(
|
||||
strokeWidth === null || strokeWidth === 0 ? 1 : strokeWidth);
|
||||
};
|
||||
|
||||
const styleCursorPreview = function (path, options) {
|
||||
if (options.isEraser) {
|
||||
path.fillColor = 'white';
|
||||
|
@ -604,7 +596,6 @@ export {
|
|||
MIXED,
|
||||
styleBlob,
|
||||
styleShape,
|
||||
stylePath,
|
||||
styleCursorPreview,
|
||||
swapColorsInSelection
|
||||
};
|
||||
|
|
|
@ -32,6 +32,7 @@ const GradientToolsModes = keyMirror({
|
|||
RESHAPE: null,
|
||||
OVAL: null,
|
||||
RECT: null,
|
||||
LINE: null,
|
||||
|
||||
BIT_OVAL: null,
|
||||
BIT_RECT: null,
|
||||
|
|
Loading…
Reference in a new issue