From 98daa5ee5ddeb472c9d569a14f22a4d363fad6ae Mon Sep 17 00:00:00 2001
From: adroitwhiz <adroitwhiz@protonmail.com>
Date: Thu, 23 Jul 2020 06:15:03 -0400
Subject: [PATCH] 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
---
 src/containers/line-mode.jsx | 26 +++++++++++++++++++++++---
 src/helper/style-path.js     |  9 ---------
 src/lib/modes.js             |  1 +
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx
index 2368c43b..4a671110 100644
--- a/src/containers/line-mode.jsx
+++ b/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;
diff --git a/src/helper/style-path.js b/src/helper/style-path.js
index 1c756537..17e0ae77 100644
--- a/src/helper/style-path.js
+++ b/src/helper/style-path.js
@@ -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
 };
diff --git a/src/lib/modes.js b/src/lib/modes.js
index dc7145ad..3a0934ff 100644
--- a/src/lib/modes.js
+++ b/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,