Merge pull request #7 from fsih/addLine

Add line mode

src/components/line-mode.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+
+const LineModeComponent = props => (
+    <button onClick={props.onMouseDown}>
+        <FormattedMessage
+            defaultMessage="Line"
+            description="Label for the line tool, which draws straight line segments"
+            id="paint.lineMode.line"
+        />
+    </button>
+);
+
+LineModeComponent.propTypes = {
+    onMouseDown: PropTypes.func.isRequired
+};
+
+export default LineModeComponent;

src/components/paint-editor.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import PaperCanvas from '../containers/paper-canvas.jsx';
 import BrushMode from '../containers/brush-mode.jsx';
 import EraserMode from '../containers/eraser-mode.jsx';
+import LineMode from '../containers/line-mode.jsx';
 
 class PaintEditorComponent extends React.Component {
     constructor (props) {
@@ -23,6 +24,7 @@ class PaintEditorComponent extends React.Component {
                     <PaperCanvas canvasRef={this.setCanvas} />
                     <BrushMode canvas={this.state.canvas} />
                     <EraserMode canvas={this.state.canvas} />
+                    <LineMode canvas={this.state.canvas} />
                 </div>
             );
         }

src/containers/line-mode.jsx

@@ -0,0 +1,302 @@
+import PropTypes from 'prop-types';
+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';
+
+class LineMode extends React.Component {
+    static get SNAP_TOLERANCE () {
+        return 6;
+    }
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'activateTool',
+            'deactivateTool',
+            'onMouseDown',
+            'onMouseMove',
+            'onMouseDrag',
+            'onMouseUp',
+            'toleranceSquared',
+            'findLineEnd',
+            'onScroll'
+        ]);
+    }
+    componentDidMount () {
+        if (this.props.isLineModeActive) {
+            this.activateTool();
+        }
+    }
+    componentWillReceiveProps (nextProps) {
+        if (nextProps.isLineModeActive && !this.props.isLineModeActive) {
+            this.activateTool();
+        } else if (!nextProps.isLineModeActive && this.props.isLineModeActive) {
+            this.deactivateTool();
+        }
+    }
+    shouldComponentUpdate () {
+        return false; // Static component, for now
+    }
+    activateTool () {
+        // TODO add back selection
+        // pg.selection.clearSelection();
+        this.props.canvas.addEventListener('mousewheel', this.onScroll);
+        this.tool = new paper.Tool();
+        
+        this.path = null;
+        this.hitResult = null;
+
+        // TODO add back colors
+        // Make sure a stroke color is set on the line tool
+        // if(!pg.stylebar.getStrokeColor()) {
+        //     pg.stylebar.setStrokeColor(pg.stylebar.getFillColor());
+        //     pg.stylebar.setFillColor(null);
+        // }
+
+        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 = this.findLineEnd(event.point);
+        if (this.hitResult) {
+            this.path = this.hitResult.path;
+            if (this.hitResult.isFirst) {
+                this.path.reverse();
+            }
+            this.path.lastSegment.setSelected(true);
+            this.path.add(this.hitResult.segment); // Add second point, which is what will move when dragged
+            this.path.lastSegment.handleOut = null; // Make sure line isn't curvy
+            this.path.lastSegment.handleIn = null;
+        }
+
+        // If not near other path, start a new path
+        if (!this.path) {
+            this.path = new paper.Path();
+            
+            // 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();
+        }
+    }
+    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) {
+            this.hitResult.path.setSelected(false);
+            this.hitResult = null;
+        }
+
+        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 = this.findLineEnd(event.point);
+        }
+
+        if (this.hitResult) {
+            const hitPath = this.hitResult.path;
+            hitPath.setSelected(true);
+            if (this.hitResult.isFirst) {
+                hitPath.firstSegment.setSelected(true);
+            } else {
+                hitPath.lastSegment.setSelected(true);
+            }
+        }
+    }
+    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) < this.toleranceSquared()) {
+            this.hitResult = {
+                path: this.path,
+                segment: this.path.firstSegment,
+                isFirst: true
+            };
+        } else {
+            this.hitResult = this.findLineEnd(event.point, this.path);
+            if (this.hitResult) {
+                const hitPath = this.hitResult.path;
+                hitPath.setSelected(true);
+                if (this.hitResult.isFirst) {
+                    hitPath.firstSegment.setSelected(true);
+                } else {
+                    hitPath.lastSegment.setSelected(true);
+                }
+            }
+        }
+
+        // snapping
+        if (this.path) {
+            if (this.hitResult) {
+                this.path.lastSegment.point = this.hitResult.segment.point;
+            } else {
+                this.path.lastSegment.point = event.point;
+            }
+        }
+    }
+    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) < 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) <
+                this.toleranceSquared()) {
+            this.path.removeSegment(this.path.segments.length - 1);
+            return;
+        }
+        
+        // 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) {
+                // close path
+                this.path.closed = true;
+                this.path.setSelected(false);
+            } else {
+                // joining two paths
+                if (!this.hitResult.isFirst) {
+                    this.hitResult.path.reverse();
+                }
+                this.path.join(this.hitResult.path);
+            }
+            this.hitResult = null;
+        }
+
+        // TODO add back undo
+        // if (this.path) {
+        //     pg.undo.snapshot('line');
+        // }
+    }
+    toleranceSquared () {
+        return Math.pow(LineMode.SNAP_TOLERANCE / paper.view.zoom, 2);
+    }
+    findLineEnd (point, excludePath) {
+        const lines = paper.project.getItems({
+            class: paper.Path
+        });
+        // Prefer more recent lines
+        for (let i = lines.length - 1; i >= 0; i--) {
+            if (lines[i].closed) {
+                continue;
+            }
+            if (excludePath && lines[i] === excludePath) {
+                continue;
+            }
+            if (lines[i].firstSegment &&
+                    lines[i].firstSegment.point.getDistance(point, true) < this.toleranceSquared()) {
+                return {
+                    path: lines[i],
+                    segment: lines[i].firstSegment,
+                    isFirst: true
+                };
+            }
+            if (lines[i].lastSegment && lines[i].lastSegment.point.getDistance(point, true) < this.toleranceSquared()) {
+                return {
+                    path: lines[i],
+                    segment: lines[i].lastSegment,
+                    isFirst: false
+                };
+            }
+        }
+        return null;
+    }
+    deactivateTool () {
+        this.props.canvas.removeEventListener('mousewheel', this.onScroll);
+        this.tool.remove();
+        this.tool = null;
+        this.hitResult = null;
+        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} />
+        );
+    }
+}
+
+LineMode.propTypes = {
+    canvas: PropTypes.instanceOf(Element).isRequired,
+    changeLineWidth: PropTypes.func.isRequired,
+    handleMouseDown: PropTypes.func.isRequired,
+    isLineModeActive: PropTypes.bool.isRequired,
+    lineModeState: PropTypes.shape({
+        lineWidth: PropTypes.number.isRequired
+    })
+};
+
+const mapStateToProps = state => ({
+    lineModeState: state.scratchPaint.lineMode,
+    isLineModeActive: state.scratchPaint.mode === Modes.LINE
+});
+const mapDispatchToProps = dispatch => ({
+    changeLineWidth: lineWidth => {
+        dispatch(changeLineWidth(lineWidth));
+    },
+    handleMouseDown: () => {
+        dispatch(changeMode(Modes.LINE));
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(LineMode);

src/containers/paint-editor.jsx

@@ -29,6 +29,8 @@ const mapDispatchToProps = dispatch => ({
             dispatch(changeMode(Modes.ERASER));
         } else if (event.key === 'b') {
             dispatch(changeMode(Modes.BRUSH));
+        } else if (event.key === 'l') {
+            dispatch(changeMode(Modes.LINE));
         }
     }
 });

src/modes/modes.js

@@ -2,7 +2,8 @@ import keyMirror from 'keymirror';
 
 const Modes = keyMirror({
     BRUSH: null,
-    ERASER: null
+    ERASER: null,
+    LINE: null
 });
 
 export default Modes;

src/reducers/line-mode.js

@@ -0,0 +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, 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 {
+    reducer as default,
+    changeLineWidth
+};

src/reducers/scratch-paint-reducer.js

@@ -2,9 +2,11 @@ import {combineReducers} from 'redux';
 import modeReducer from './modes';
 import brushModeReducer from './brush-mode';
 import eraserModeReducer from './eraser-mode';
+import lineModeReducer from './line-mode';
 
 export default combineReducers({
     mode: modeReducer,
     brushMode: brushModeReducer,
-    eraserMode: eraserModeReducer
+    eraserMode: eraserModeReducer,
+    lineMode: lineModeReducer
 });

test/unit/components/line-mode.test.jsx

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

test/unit/line-mode-reducer.test.js

@@ -0,0 +1,31 @@
+/* eslint-env jest */
+import lineReducer from '../../src/reducers/line-mode';
+import {changeLineWidth} from '../../src/reducers/line-mode';
+
+test('initialState', () => {
+    let defaultState;
+
+    expect(lineReducer(defaultState /* state */, {type: 'anything'} /* action */)).toBeDefined();
+    expect(lineReducer(defaultState /* state */, {type: 'anything'} /* action */).lineWidth).toBeGreaterThan(0);
+});
+
+test('changeLineWidth', () => {
+    let defaultState;
+    const newLineWidth = 8078;
+
+    expect(lineReducer(defaultState /* state */, changeLineWidth(newLineWidth) /* action */))
+        .toEqual({lineWidth: newLineWidth});
+    expect(lineReducer(2 /* state */, changeLineWidth(newLineWidth) /* action */))
+        .toEqual({lineWidth: newLineWidth});
+    expect(lineReducer(2 /* state */, changeLineWidth(-1) /* action */))
+        .toEqual({lineWidth: 1});
+});
+
+test('invalidChangeLineWidth', () => {
+    const origState = {lineWidth: 2};
+
+    expect(lineReducer(origState /* state */, changeLineWidth('invalid argument') /* action */))
+        .toBe(origState);
+    expect(lineReducer(origState /* state */, changeLineWidth() /* action */))
+        .toBe(origState);
+});