mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 13:32:28 -05:00
rename style path to style blob and use style path for line tool
This commit is contained in:
parent
d27aa53fca
commit
1c3d5d72f9
4 changed files with 36 additions and 33 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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));
|
||||
|
|
|
@ -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
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue