From ff77bb6a3dcedd7f9c2e147ca7a67fd1a54ddfce Mon Sep 17 00:00:00 2001 From: DD Liu Date: Thu, 17 Aug 2017 18:13:24 -0400 Subject: [PATCH 1/5] add rendered components for brush and eraser --- src/components/brush-mode.jsx | 12 ++++++++++++ src/components/eraser-mode.jsx | 12 ++++++++++++ src/containers/brush-mode.jsx | 13 ++++++++----- src/containers/eraser-mode.jsx | 13 ++++++++----- 4 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 src/components/brush-mode.jsx create mode 100644 src/components/eraser-mode.jsx diff --git a/src/components/brush-mode.jsx b/src/components/brush-mode.jsx new file mode 100644 index 00000000..865c04f4 --- /dev/null +++ b/src/components/brush-mode.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const BrushModeComponent = props => ( + +); + +BrushModeComponent.propTypes = { + onMouseDown: PropTypes.func.isRequired +}; + +export default BrushModeComponent; diff --git a/src/components/eraser-mode.jsx b/src/components/eraser-mode.jsx new file mode 100644 index 00000000..7ec03c44 --- /dev/null +++ b/src/components/eraser-mode.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const EraserModeComponent = props => ( + +); + +EraserModeComponent.propTypes = { + onMouseDown: PropTypes.func.isRequired +}; + +export default EraserModeComponent; diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index b2549393..cc33de75 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import Blobbiness from './blob/blob'; import {changeBrushSize} from '../reducers/brush-mode'; +import {changeMode} from '../reducers/modes'; +import BrushModeComponent from '../components/brush-mode.jsx'; class BrushMode extends React.Component { - static get MODE () { - return Modes.BRUSH; - } constructor (props) { super(props); bindAll(this, [ @@ -59,7 +58,7 @@ class BrushMode extends React.Component { } render () { return ( -
Brush Mode
+ ); } } @@ -70,16 +69,20 @@ BrushMode.propTypes = { }), canvas: PropTypes.instanceOf(Element).isRequired, changeBrushSize: PropTypes.func.isRequired, + handleMouseDown: PropTypes.func.isRequired, isBrushModeActive: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ brushModeState: state.brushMode, - isBrushModeActive: state.mode === BrushMode.MODE + isBrushModeActive: state.mode === Modes.BRUSH }); const mapDispatchToProps = dispatch => ({ changeBrushSize: brushSize => { dispatch(changeBrushSize(brushSize)); + }, + handleMouseDown: () => { + dispatch(changeMode(Modes.BRUSH)); } }); diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index 9ca2f6ce..96e02c03 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import Blobbiness from './blob/blob'; import {changeBrushSize} from '../reducers/eraser-mode'; +import EraserModeComponent from '../components/eraser-mode.jsx'; +import {changeMode} from '../reducers/modes'; class EraserMode extends React.Component { - static get MODE () { - return Modes.ERASER; - } constructor (props) { super(props); bindAll(this, [ @@ -55,7 +54,7 @@ class EraserMode extends React.Component { } render () { return ( -
Eraser Mode
+ ); } } @@ -66,16 +65,20 @@ EraserMode.propTypes = { eraserModeState: PropTypes.shape({ brushSize: PropTypes.number.isRequired }), + handleMouseDown: PropTypes.func.isRequired, isEraserModeActive: PropTypes.bool.isRequired }; const mapStateToProps = state => ({ eraserModeState: state.eraserMode, - isEraserModeActive: state.mode === EraserMode.MODE + isEraserModeActive: state.mode === Modes.ERASER }); const mapDispatchToProps = dispatch => ({ changeBrushSize: brushSize => { dispatch(changeBrushSize(brushSize)); + }, + handleMouseDown: () => { + dispatch(changeMode(Modes.ERASER)); } }); From 6b8b20b9118077515ce976f1f02de7e6aae71ccd Mon Sep 17 00:00:00 2001 From: DD Liu Date: Mon, 21 Aug 2017 15:56:33 -0400 Subject: [PATCH 2/5] add component tests --- test/unit/components/brush-mode.test.jsx | 15 +++++++++++++++ test/unit/components/eraser-mode.test copy.jsx | 15 +++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 test/unit/components/brush-mode.test.jsx create mode 100644 test/unit/components/eraser-mode.test copy.jsx diff --git a/test/unit/components/brush-mode.test.jsx b/test/unit/components/brush-mode.test.jsx new file mode 100644 index 00000000..954ef837 --- /dev/null +++ b/test/unit/components/brush-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 BrushModeComponent from '../../../src/components/brush-mode.jsx'; // eslint-disable-line no-unused-vars + +describe('BrushModeComponent', () => { + test('triggers callback when clicked', () => { + const onClick = jest.fn(); + const componentShallowWrapper = shallow( + + ); + componentShallowWrapper.simulate('click'); + expect(onClick).toHaveBeenCalled(); + }); +}); diff --git a/test/unit/components/eraser-mode.test copy.jsx b/test/unit/components/eraser-mode.test copy.jsx new file mode 100644 index 00000000..4772581c --- /dev/null +++ b/test/unit/components/eraser-mode.test copy.jsx @@ -0,0 +1,15 @@ +/* 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( + + ); + componentShallowWrapper.simulate('click'); + expect(onClick).toHaveBeenCalled(); + }); +}); From b40ccd46a99a5aa56c8a5a27d0ce9c564d7b527f Mon Sep 17 00:00:00 2001 From: DD Liu Date: Tue, 22 Aug 2017 15:57:12 -0400 Subject: [PATCH 3/5] make helper mouse functions have consistent interface --- src/containers/blob/blob.js | 6 +++--- src/containers/blob/broad-brush-helper.js | 2 +- src/containers/blob/segment-brush-helper.js | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/containers/blob/blob.js b/src/containers/blob/blob.js index c3c9c2ca..b06199b8 100644 --- a/src/containers/blob/blob.js +++ b/src/containers/blob/blob.js @@ -82,9 +82,9 @@ class Blobbiness { blob.resizeCursorIfNeeded(event.point); if (event.event.button > 0) return; // only first mouse button if (blob.brush === Blobbiness.BROAD) { - blob.broadBrushHelper.onBroadMouseDrag(event, blob.options); + blob.broadBrushHelper.onBroadMouseDrag(event, blob.tool, blob.options); } else if (blob.brush === Blobbiness.SEGMENT) { - blob.segmentBrushHelper.onSegmentMouseDrag(event, blob.options); + blob.segmentBrushHelper.onSegmentMouseDrag(event, blob.tool, blob.options); } else { log.warn(`Brush type does not exist: ${blob.brush}`); } @@ -102,7 +102,7 @@ class Blobbiness { if (blob.brush === Blobbiness.BROAD) { lastPath = blob.broadBrushHelper.onBroadMouseUp(event, blob.tool, blob.options); } else if (blob.brush === Blobbiness.SEGMENT) { - lastPath = blob.segmentBrushHelper.onSegmentMouseUp(event); + lastPath = blob.segmentBrushHelper.onSegmentMouseUp(event, blob.tool, blob.options); } else { log.warn(`Brush type does not exist: ${blob.brush}`); } diff --git a/src/containers/blob/broad-brush-helper.js b/src/containers/blob/broad-brush-helper.js index f4cf735c..b3bc1ca3 100644 --- a/src/containers/blob/broad-brush-helper.js +++ b/src/containers/blob/broad-brush-helper.js @@ -30,7 +30,7 @@ class BroadBrushHelper { this.lastPoint = this.secondLastPoint = event.point; } - onBroadMouseDrag (event, options) { + onBroadMouseDrag (event, tool, options) { const step = (event.delta).normalize(options.brushSize / 2); // Move the first point out away from the drag so that the end of the path is rounded diff --git a/src/containers/blob/segment-brush-helper.js b/src/containers/blob/segment-brush-helper.js index 8b716d50..88f7debd 100644 --- a/src/containers/blob/segment-brush-helper.js +++ b/src/containers/blob/segment-brush-helper.js @@ -36,7 +36,7 @@ class SegmentBrushHelper { this.lastPoint = event.point; } - onSegmentMouseDrag (event, options) { + onSegmentMouseDrag (event, tool, options) { if (event.event.button > 0) return; // only first mouse button const step = (event.delta).normalize(options.brushSize / 2); From 8616e49f1a1580f2114400d40c760df8e0652df5 Mon Sep 17 00:00:00 2001 From: DD Liu Date: Wed, 23 Aug 2017 10:56:37 -0400 Subject: [PATCH 4/5] change comment --- src/containers/brush-mode.jsx | 2 +- src/containers/eraser-mode.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index cc33de75..44c6a90e 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -33,7 +33,7 @@ class BrushMode extends React.Component { } } shouldComponentUpdate () { - return false; // Logic only component + return false; // Static component, for now } activateTool () { // TODO: Instead of clearing selection, consider a kind of "draw inside" diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index 96e02c03..c8ad4a3b 100644 --- a/src/containers/eraser-mode.jsx +++ b/src/containers/eraser-mode.jsx @@ -33,7 +33,7 @@ class EraserMode extends React.Component { } } shouldComponentUpdate () { - return false; // Logic only component + return false; // Static component, for now } activateTool () { this.props.canvas.addEventListener('mousewheel', this.onScroll); From f5529b023bc5cea7a7feaaa4048e97f4d4cd0912 Mon Sep 17 00:00:00 2001 From: DD Date: Fri, 25 Aug 2017 10:47:07 -0400 Subject: [PATCH 5/5] rename test file --- .../{eraser-mode.test copy.jsx => eraser-mode.test.jsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename test/unit/components/{eraser-mode.test copy.jsx => eraser-mode.test.jsx} (100%) diff --git a/test/unit/components/eraser-mode.test copy.jsx b/test/unit/components/eraser-mode.test.jsx similarity index 100% rename from test/unit/components/eraser-mode.test copy.jsx rename to test/unit/components/eraser-mode.test.jsx