From 1c3d5d72f98745a2bb68d6e291ae79d8a487ef1e Mon Sep 17 00:00:00 2001 From: DD Date: Wed, 18 Oct 2017 19:21:29 -0400 Subject: [PATCH] rename style path to style blob and use style path for line tool --- src/containers/line-mode.jsx | 46 ++++++++----------- src/helper/blob-tools/broad-brush-helper.js | 6 +-- src/helper/blob-tools/segment-brush-helper.js | 6 +-- src/helper/style-path.js | 11 ++++- 4 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index a837ea89..e63e71b1 100644 --- a/src/containers/line-mode.jsx +++ b/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) { - removeHitPoint(); + 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. - removeHitPoint(); - this.hitResult = null; + 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 || - (this.path.segments.length === 2 && - touching(this.path.firstSegment.point, event.point, LineMode.SNAP_TOLERANCE))) { + 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)))) { 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; - removeHitPoint(); - this.hitResult = null; + if (this.hitResult) { + removeHitPoint(); + this.hitResult = null; + } if (this.path) { this.path = null; } diff --git a/src/helper/blob-tools/broad-brush-helper.js b/src/helper/blob-tools/broad-brush-helper.js index 40170fca..0b2247a5 100644 --- a/src/helper/blob-tools/broad-brush-helper.js +++ b/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; diff --git a/src/helper/blob-tools/segment-brush-helper.js b/src/helper/blob-tools/segment-brush-helper.js index 3ab38466..78992a8d 100644 --- a/src/helper/blob-tools/segment-brush-helper.js +++ b/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)); diff --git a/src/helper/style-path.js b/src/helper/style-path.js index 9711f178..7fea6770 100644 --- a/src/helper/style-path.js +++ b/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 };