scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

Browse source
This commit is contained in:
DD 2017-10-18 19:21:29 -04:00
parent d27aa53fca
commit 1c3d5d72f9
4 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/containers/line-mode.jsx
View file

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

6
src/helper/blob-tools/broad-brush-helper.js
View file

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

6
src/helper/blob-tools/segment-brush-helper.js
View file

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

11
src/helper/style-path.js
View file

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