From ce8fdaac1ce910793065c50aea8ed7b94a1bfb14 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Thu, 7 Sep 2017 18:26:18 -0400
Subject: [PATCH] pipe through stroke color

---
 src/containers/blob/blob.js                 | 15 +++++++++------
 src/containers/blob/segment-brush-helper.js |  4 +---
 src/containers/blob/style-path.js           |  3 ++-
 src/containers/brush-mode.jsx               |  5 +++--
 src/containers/line-mode.jsx                | 10 +++++++---
 5 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/containers/blob/blob.js b/src/containers/blob/blob.js
index f0a3ec47..30bbdc95 100644
--- a/src/containers/blob/blob.js
+++ b/src/containers/blob/blob.js
@@ -147,7 +147,10 @@ class Blobbiness {
             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;
         }
         const newPreview = new paper.Path.Circle({
@@ -155,13 +158,13 @@ class Blobbiness {
             radius: this.options.brushSize / 2
         });
         if (this.cursorPreview) {
-            this.cursorPreview.segments = newPreview.segments;
-            newPreview.remove();
-        } else {
-            this.cursorPreview = newPreview;
-            styleCursorPreview(this.cursorPreview, this.options);
+            this.cursorPreview.remove();
         }
         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) {
diff --git a/src/containers/blob/segment-brush-helper.js b/src/containers/blob/segment-brush-helper.js
index 09b17cd2..6ccd48ce 100644
--- a/src/containers/blob/segment-brush-helper.js
+++ b/src/containers/blob/segment-brush-helper.js
@@ -46,9 +46,7 @@ class SegmentBrushHelper {
 
         const path = new paper.Path();
         
-        // TODO: Add back brush styling
-        // path = pg.stylebar.applyActiveToolbarStyle(path);
-        path.fillColor = options.fillColor;
+        stylePath(path, options);
 
         // Add handles to round the end caps
         path.add(new paper.Segment(this.lastPoint.subtract(step), handleVec.multiply(-1), handleVec));
diff --git a/src/containers/blob/style-path.js b/src/containers/blob/style-path.js
index 20b09c65..b0cbeaba 100644
--- a/src/containers/blob/style-path.js
+++ b/src/containers/blob/style-path.js
@@ -5,6 +5,7 @@ const stylePath = function (path, options) {
         // TODO: Add back brush styling. Keep a separate active toolbar style for brush vs pen.
         // path = pg.stylebar.applyActiveToolbarStyle(path);
         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.
         // path = pg.stylebar.applyActiveToolbarStyle(path);
         path.fillColor = options.fillColor;
-        path.strokeColor = 'cornflowerblue';
+        path.strokeColor = options.strokeColor;
         path.strokeWidth = 1;
     }
 };
diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx
index 53c53d42..5ff4e8fb 100644
--- a/src/containers/brush-mode.jsx
+++ b/src/containers/brush-mode.jsx
@@ -31,7 +31,7 @@ class BrushMode extends React.Component {
         } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
             this.blob.setOptions({
                 isEraser: false,
-                ...this.props.colorState,
+                ...nextProps.colorState,
                 ...nextProps.brushModeState
             });
         }
@@ -78,7 +78,8 @@ BrushMode.propTypes = {
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeBrushSize: PropTypes.func.isRequired,
     colorState: PropTypes.shape({
-        fillColor: PropTypes.string.isRequired
+        fillColor: PropTypes.string.isRequired,
+        strokeColor: PropTypes.string.isRequired
     }).isRequired,
     handleMouseDown: PropTypes.func.isRequired,
     isBrushModeActive: PropTypes.bool.isRequired,
diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx
index 7648c045..fe2f0163 100644
--- a/src/containers/line-mode.jsx
+++ b/src/containers/line-mode.jsx
@@ -100,9 +100,8 @@ class LineMode extends React.Component {
         if (!this.path) {
             this.path = new paper.Path();
             
-            // TODO add back style
-            // this.path = pg.stylebar.applyActiveToolbarStyle(path);
-            this.path.setStrokeColor('black');
+            // TODO add back stroke width styling
+            this.path.setStrokeColor(this.props.colorState.strokeColor);
             this.path.setStrokeWidth(this.props.lineModeState.lineWidth);
 
             this.path.setSelected(true);
@@ -277,6 +276,10 @@ class LineMode extends React.Component {
 LineMode.propTypes = {
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeLineWidth: PropTypes.func.isRequired,
+    colorState: PropTypes.shape({
+        fillColor: PropTypes.string.isRequired,
+        strokeColor: PropTypes.string.isRequired
+    }).isRequired,
     handleMouseDown: PropTypes.func.isRequired,
     isLineModeActive: PropTypes.bool.isRequired,
     lineModeState: PropTypes.shape({
@@ -286,6 +289,7 @@ LineMode.propTypes = {
 };
 
 const mapStateToProps = state => ({
+    colorState: state.scratchPaint.color,
     lineModeState: state.scratchPaint.lineMode,
     isLineModeActive: state.scratchPaint.mode === Modes.LINE
 });