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:
adroitwhiz 2020-07-23 06:15:03 -04:00
parent 689532f269
commit 98daa5ee5d
3 changed files with 24 additions and 12 deletions

View file

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

View file

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

View file

@ -32,6 +32,7 @@ const GradientToolsModes = keyMirror({
RESHAPE: null,
OVAL: null,
RECT: null,
LINE: null,
BIT_OVAL: null,
BIT_RECT: null,