rename style path to style blob and use style path for line tool

src/containers/line-mode.jsx

@@ -7,7 +7,7 @@ import Modes from '../modes/modes';
 import {clearSelection} from '../helper/selection';
 import {endPointHit, touching} from '../helper/snapping';
 import {drawHitPoint, removeHitPoint} from '../helper/guides';
-import {MIXED} from '../helper/style-path';
+import {stylePath} from '../helper/style-path';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 
@@ -77,7 +77,7 @@ class LineMode extends React.Component {
         this.hitResult = endPointHit(event.point, LineMode.SNAP_TOLERANCE);
         if (this.hitResult) {
             this.path = this.hitResult.path;
-            this.stylePath(this.path);
+            stylePath(this.path, this.props.colorState.strokeColor, this.props.colorState.strokeWidth);
             if (this.hitResult.isFirst) {
                 this.path.reverse();
             }
@@ -89,22 +89,13 @@ class LineMode extends React.Component {
         // If not near other path, start a new path
         if (!this.path) {
             this.path = new paper.Path();
-            this.stylePath(this.path);
+            stylePath(this.path, this.props.colorState.strokeColor, this.props.colorState.strokeWidth);
 
             this.path.add(event.point);
             this.path.add(event.point); // Add second point, which is what will move when dragged
             paper.view.draw();
         }
     }
-    stylePath (path) {
-        // Make sure a visible line is drawn
-        path.setStrokeColor(
-            (this.props.colorState.strokeColor === MIXED || this.props.colorState.strokeColor === null) ?
-                'black' : this.props.colorState.strokeColor);
-        path.setStrokeWidth(
-            this.props.colorState.strokeWidth === null || this.props.colorState.strokeWidth === 0 ?
-                1 : this.props.colorState.strokeWidth);
-    }
     drawHitPoint (hitResult) {
         // If near another path's endpoint, draw hit point to indicate that paths would merge
         if (hitResult) {
@@ -117,7 +108,9 @@ class LineMode extends React.Component {
         }
     }
     onMouseMove (event) {
+        if (this.hitResult) {
             removeHitPoint();
+        }
         this.hitResult = endPointHit(event.point, LineMode.SNAP_TOLERANCE);
         this.drawHitPoint(this.hitResult);
     }
@@ -126,8 +119,10 @@ class LineMode extends React.Component {
 
         // If near another path's endpoint, or this path's beginpoint, clip to it to suggest
         // joining/closing the paths.
+        if (this.hitResult) {
             removeHitPoint();
             this.hitResult = null;
+        }
 
         if (this.path &&
                 !this.path.closed &&
@@ -151,18 +146,15 @@ class LineMode extends React.Component {
         }
     }
     onMouseUp (event) {
-        debugger;
         if (event.event.button > 0) return; // only first mouse button
 
-        removeHitPoint();
-
         // If I single clicked, don't do anything
-        if (this.path.segments.length < 2 ||
+        if (!this.hitResult && // Might be connecting 2 points that are very close
+                (this.path.segments.length < 2 ||
                     (this.path.segments.length === 2 &&
-                touching(this.path.firstSegment.point, event.point, LineMode.SNAP_TOLERANCE))) {
+                    touching(this.path.firstSegment.point, event.point, LineMode.SNAP_TOLERANCE)))) {
             this.path.remove();
             this.path = null;
-            // TODO don't erase the line if both ends are snapped to different points
             return;
         } else if (
             // Single click on an existing path end point
@@ -178,17 +170,17 @@ class LineMode extends React.Component {
         // If I intersect other line end points, join or close
         if (this.hitResult) {
             this.path.removeSegment(this.path.segments.length - 1);
-            if (this.path.firstSegment === this.hitResult.segment) {
+            if (this.path.firstSegment.point.equals(this.hitResult.segment.point)) {
                 // close path
                 this.path.closed = true;
             } else {
-                debugger;
                 // joining two paths
                 if (!this.hitResult.isFirst) {
                     this.hitResult.path.reverse();
                 }
                 this.path.join(this.hitResult.path);
             }
+            removeHitPoint();
             this.hitResult = null;
         }
         
@@ -201,8 +193,10 @@ class LineMode extends React.Component {
         this.props.canvas.removeEventListener('mousewheel', this.onScroll);
         this.tool.remove();
         this.tool = null;
+        if (this.hitResult) {
             removeHitPoint();
             this.hitResult = null;
+        }
         if (this.path) {
             this.path = null;
         }

src/helper/blob-tools/broad-brush-helper.js

@@ -1,6 +1,6 @@
 // Broadbrush based on http://paperjs.org/tutorials/interaction/working-with-mouse-vectors/
 import paper from '@scratch/paper';
-import {stylePath} from '../../helper/style-path';
+import {styleBlob} from '../../helper/style-path';
 
 /**
  * Broad brush functions to add as listeners on the mouse. Call them when the corresponding mouse event happens
@@ -25,7 +25,7 @@ class BroadBrushHelper {
         if (event.event.button > 0) return; // only first mouse button
         
         this.finalPath = new paper.Path();
-        stylePath(this.finalPath, options);
+        styleBlob(this.finalPath, options);
         this.finalPath.add(event.point);
         this.lastPoint = this.secondLastPoint = event.point;
     }
@@ -77,7 +77,7 @@ class BroadBrushHelper {
                 center: event.point,
                 radius: options.brushSize / 2
             });
-            stylePath(this.finalPath, options);
+            styleBlob(this.finalPath, options);
         } else {
             const step = (event.point.subtract(this.lastPoint)).normalize(options.brushSize / 2);
             step.angle += 90;

src/helper/blob-tools/segment-brush-helper.js

@@ -1,5 +1,5 @@
 import paper from '@scratch/paper';
-import {stylePath} from '../../helper/style-path';
+import {styleBlob} from '../../helper/style-path';
 
 /**
  * Segment brush functions to add as listeners on the mouse. Call them when the corresponding mouse event happens
@@ -32,7 +32,7 @@ class SegmentBrushHelper {
             radius: options.brushSize / 2
         });
         this.finalPath = this.firstCircle;
-        stylePath(this.finalPath, options);
+        styleBlob(this.finalPath, options);
         this.lastPoint = event.point;
     }
     
@@ -46,7 +46,7 @@ class SegmentBrushHelper {
 
         const path = new paper.Path();
         
-        stylePath(path, options);
+        styleBlob(path, options);
 
         // Add handles to round the end caps
         path.add(new paper.Segment(this.lastPoint.subtract(step), handleVec.multiply(-1), handleVec));

src/helper/style-path.js

@@ -198,7 +198,7 @@ const getColorsFromSelection = function (selectedItems) {
     };
 };
 
-const stylePath = function (path, options) {
+const styleBlob = function (path, options) {
     if (options.isEraser) {
         path.fillColor = 'white';
     } else if (options.fillColor) {
@@ -209,6 +209,14 @@ const stylePath = 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';
@@ -228,6 +236,7 @@ export {
     applyStrokeWidthToSelection,
     getColorsFromSelection,
     MIXED,
+    styleBlob,
     stylePath,
     styleCursorPreview
 };