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

add tests

Browse source
This commit is contained in:
2017-08-24 17:49:22 -04:00
parent c2cae279b7
commit a622d0d3e9
5 changed files with 185 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -44,7 +44,7 @@
"eslint-config-import": "^0.13.0",
"eslint-config-scratch": "^3.0.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-react": "^7.0.1",
"eslint-plugin-react": "^7.3.0",
"gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
"html-webpack-plugin": "2.28.0",
"jest": "^20.0.4",

2
src/components/paint-editor.jsx
View file

@ -24,7 +24,7 @@ class PaintEditorComponent extends React.Component {
<PaperCanvas canvasRef={this.setCanvas} />
<BrushMode canvas={this.state.canvas} />
<EraserMode canvas={this.state.canvas} />
<LineMode />
<LineMode canvas={this.state.canvas} />
</div>
);
}

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

@ -3,6 +3,7 @@ import React from 'react';
import {connect} from 'react-redux';
import bindAll from 'lodash.bindall';
import Modes from '../modes/modes';
import {changeLineWidth} from '../reducers/line-mode';
import LineModeComponent from '../components/line-mode.jsx';
import {changeMode} from '../reducers/modes';
import paper from 'paper';
@ -16,8 +17,13 @@ class LineMode extends React.Component {
bindAll(this, [
'activateTool',
'deactivateTool',
'onMouseDown',
'onMouseMove',
'onMouseDrag',
'onMouseUp',
'toleranceSquared',
'findLineEnd'
'findLineEnd',
'onScroll'
]);
}
componentDidMount () {
@ -30,8 +36,6 @@ class LineMode extends React.Component {
this.activateTool();
} else if (!nextProps.isLineModeActive && this.props.isLineModeActive) {
this.deactivateTool();
} else if (nextProps.isLineModeActive && this.props.isLineModeActive) {
this.blob.setOptions(nextProps.lineModeState);
}
}
shouldComponentUpdate () {
@ -40,7 +44,7 @@ class LineMode extends React.Component {
activateTool () {
// TODO add back selection
// pg.selection.clearSelection();
this.props.canvas.addEventListener('mousewheel', this.onScroll);
this.tool = new paper.Tool();
this.path = null;
@ -56,14 +60,31 @@ class LineMode extends React.Component {
const lineMode = this;
this.tool.onMouseDown = function (event) {
if (event.event.button > 0) return; // only first mouse button
lineMode.onMouseDown(event);
};
this.tool.onMouseMove = function (event) {
lineMode.onMouseMove(event);
};
this.tool.onMouseDrag = function (event) {
if (event.event.button > 0) return; // only first mouse button
lineMode.onMouseDrag(event);
};
this.tool.onMouseUp = function (event) {
if (event.event.button > 0) return; // only first mouse button
lineMode.onMouseUp(event);
};
this.tool.activate();
}
onMouseDown (event) {
// Deselect old path
if (this.path) {
this.path.setSelected(false);
this.path = null;
}
// If you click near a point, continue that line instead of making a new line
this.hitResult = lineMode.findLineEnd(event.point);
this.hitResult = this.findLineEnd(event.point);
if (this.hitResult) {
this.path = this.hitResult.path;
if (this.hitResult.isFirst) {
@ -82,15 +103,15 @@ class LineMode extends React.Component {
// TODO add back style
// this.path = pg.stylebar.applyActiveToolbarStyle(path);
this.path.setStrokeColor('black');
this.path.setStrokeWidth(this.props.lineModeState.lineWidth);
this.path.setSelected(true);
this.path.add(event.point);
this.path.add(event.point); // Add second point, which is what will move when dragged
paper.view.draw();
}
};
this.tool.onMouseMove = function (event) {
}
onMouseMove (event) {
// If near another path's endpoint, or this path's beginpoint, clip to it to suggest
// joining/closing the paths.
if (this.hitResult) {
@ -98,14 +119,16 @@ class LineMode extends React.Component {
this.hitResult = null;
}
if (this.path && !this.path.closed && this.path.firstSegment.point.getDistance(event.point, true) < lineMode.toleranceSquared()) {
if (this.path &&
!this.path.closed &&
this.path.firstSegment.point.getDistance(event.point, true) < this.toleranceSquared()) {
this.hitResult = {
path: this.path,
segment: this.path.firstSegment,
isFirst: true
};
} else {
this.hitResult = lineMode.findLineEnd(event.point);
this.hitResult = this.findLineEnd(event.point);
}
if (this.hitResult) {
@ -117,23 +140,23 @@ class LineMode extends React.Component {
hitPath.lastSegment.setSelected(true);
}
}
};
this.tool.onMouseDrag = function (event) {
if (event.event.button > 0) return; // only first mouse button
}
onMouseDrag (event) {
// If near another path's endpoint, or this path's beginpoint, clip to it to suggest
// joining/closing the paths.
if (this.hitResult && this.hitResult.path !== this.path) this.hitResult.path.setSelected(false);
this.hitResult = null;
if (this.path && this.path.segments.length > 3 && this.path.firstSegment.point.getDistance(event.point, true) < lineMode.toleranceSquared()) {
if (this.path &&
this.path.segments.length > 3 &&
this.path.firstSegment.point.getDistance(event.point, true) < this.toleranceSquared()) {
this.hitResult = {
path: this.path,
segment: this.path.firstSegment,
isFirst: true
};
} else {
this.hitResult = lineMode.findLineEnd(event.point, this.path);
this.hitResult = this.findLineEnd(event.point, this.path);
if (this.hitResult) {
const hitPath = this.hitResult.path;
hitPath.setSelected(true);
@ -153,19 +176,19 @@ class LineMode extends React.Component {
this.path.lastSegment.point = event.point;
}
}
};
this.tool.onMouseUp = function (event) {
if (event.event.button > 0) return; // only first mouse button
}
onMouseUp (event) {
// If I single clicked, don't do anything
if (this.path.segments.length < 2 || (this.path.segments.length === 2 && this.path.firstSegment.point.getDistance(event.point, true) < lineMode.toleranceSquared())) {
if (this.path.segments.length < 2 ||
(this.path.segments.length === 2 &&
this.path.firstSegment.point.getDistance(event.point, true) < this.toleranceSquared())) {
this.path.remove();
this.path = null;
// TODO don't erase the line if both ends are snapped to different points
return;
} else if (this.path.lastSegment.point.getDistance(this.path.segments[this.path.segments.length - 2].point, true) < lineMode.toleranceSquared()) {
} else if (
this.path.lastSegment.point.getDistance(this.path.segments[this.path.segments.length - 2].point, true) <
this.toleranceSquared()) {
this.path.removeSegment(this.path.segments.length - 1);
return;
}
@ -191,10 +214,6 @@ class LineMode extends React.Component {
// if (this.path) {
// pg.undo.snapshot('line');
// }
};
this.tool.activate();
}
toleranceSquared () {
return Math.pow(LineMode.SNAP_TOLERANCE / paper.view.zoom, 2);
@ -211,7 +230,8 @@ class LineMode extends React.Component {
if (excludePath && lines[i] === excludePath) {
continue;
}
if (lines[i].firstSegment && lines[i].firstSegment.point.getDistance(point, true) < this.toleranceSquared()) {
if (lines[i].firstSegment &&
lines[i].firstSegment.point.getDistance(point, true) < this.toleranceSquared()) {
return {
path: lines[i],
segment: lines[i].firstSegment,
@ -229,11 +249,20 @@ class LineMode extends React.Component {
return null;
}
deactivateTool () {
this.props.canvas.removeEventListener('mousewheel', this.onScroll);
if (this.path) {
this.path.setSelected(false);
this.path = null;
}
}
onScroll (event) {
if (event.deltaY < 0) {
this.props.changeLineWidth(this.props.lineModeState.lineWidth + 1);
} else if (event.deltaY > 0 && this.props.lineModeState.lineWidth > 1) {
this.props.changeLineWidth(this.props.lineModeState.lineWidth - 1);
}
return true;
}
render () {
return (
<LineModeComponent onMouseDown={this.props.handleMouseDown} />
@ -242,6 +271,8 @@ class LineMode extends React.Component {
}
LineMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired,
changeLineWidth: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired,
isLineModeActive: PropTypes.bool.isRequired,
lineModeState: PropTypes.shape({
@ -254,6 +285,9 @@ const mapStateToProps = state => ({
isLineModeActive: state.mode === Modes.LINE
});
const mapDispatchToProps = dispatch => ({
changeLineWidth: lineWidth => {
dispatch(changeLineWidth(lineWidth));
},
handleMouseDown: () => {
dispatch(changeMode(Modes.LINE));
}

26
src/reducers/line-mode.js
View file

@ -1,11 +1,31 @@
import log from '../log/log';
const CHANGE_LINE_WIDTH = 'scratch-paint/line-mode/CHANGE_LINE_WIDTH';
const initialState = {lineWidth: 2};
const reducer = function (state) {
const reducer = function (state, action) {
if (typeof state === 'undefined') state = initialState;
switch (action.type) {
case CHANGE_LINE_WIDTH:
if (isNaN(action.lineWidth)) {
log.warn(`Invalid line width: ${action.lineWidth}`);
return state;
}
return {lineWidth: Math.max(1, action.lineWidth)};
default:
return state;
}
};
// Action creators ==================================
const changeLineWidth = function (lineWidth) {
return {
type: CHANGE_LINE_WIDTH,
lineWidth: lineWidth
};
};
export default reducer;
export {
reducer as default,
changeLineWidth
};

15
test/unit/components/eraser-mode.test copy.jsx
View file

@ -1,15 +0,0 @@
/* eslint-env jest */
import React from 'react'; // eslint-disable-line no-unused-vars
import {shallow} from 'enzyme';
import EraserModeComponent from '../../../src/components/eraser-mode.jsx'; // eslint-disable-line no-unused-vars
describe('EraserModeComponent', () => {
test('triggers callback when clicked', () => {
const onClick = jest.fn();
const componentShallowWrapper = shallow(
<EraserModeComponent onMouseDown={onClick}/>
);
componentShallowWrapper.simulate('click');
expect(onClick).toHaveBeenCalled();
});
});