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

Author: adroitwhiz

src/containers/line-mode.jsx

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

src/helper/style-path.js

@@ -531,14 +531,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';
@@ -577,7 +569,6 @@ export {
     MIXED,
     styleBlob,
     styleShape,
-    stylePath,
     styleCursorPreview,
     swapColorsInSelection
 };

src/lib/modes.js

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