Support for tablet pen pressure

src/containers/bit-brush-mode.jsx

@@ -30,8 +30,8 @@ class BitBrushMode extends React.Component {
         if (this.tool && nextProps.color !== this.props.color) {
             this.tool.setColor(nextProps.color);
         }
-        if (this.tool && nextProps.bitBrushSize !== this.props.bitBrushSize) {
-            this.tool.setBrushSize(nextProps.bitBrushSize);
+        if (this.tool && (nextProps.bitBrushSize !== this.props.bitBrushSize || nextProps.pressure !== this.props.pressure)) {
+            this.tool.setBrushSize(nextProps.bitBrushSize * nextProps.pressure);
         }
 
         if (nextProps.isBitBrushModeActive && !this.props.isBitBrushModeActive) {
@@ -88,13 +88,15 @@ BitBrushMode.propTypes = {
     handleMouseDown: PropTypes.func.isRequired,
     isBitBrushModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,
-    onUpdateImage: PropTypes.func.isRequired
+    onUpdateImage: PropTypes.func.isRequired,
+    pressure: PropTypes.number
 };
 
 const mapStateToProps = state => ({
     bitBrushSize: state.scratchPaint.bitBrushSize,
     color: state.scratchPaint.color.fillColor.primary,
-    isBitBrushModeActive: state.scratchPaint.mode === Modes.BIT_BRUSH
+    isBitBrushModeActive: state.scratchPaint.mode === Modes.BIT_BRUSH,
+    pressure: state.scratchPaint.pointer.pressure
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {

src/containers/brush-mode.jsx

@@ -41,7 +41,7 @@ class BrushMode extends React.Component {
                 fillColor: fillColor.primary,
                 strokeColor: strokeColor.primary,
                 strokeWidth,
-                ...nextProps.brushModeState
+                brushSize: nextProps.brushModeState.brushSize * nextProps.pressure
             });
         }
     }
@@ -96,13 +96,15 @@ BrushMode.propTypes = {
     handleMouseDown: PropTypes.func.isRequired,
     isBrushModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,
-    onUpdateImage: PropTypes.func.isRequired
+    onUpdateImage: PropTypes.func.isRequired,
+    pressure: PropTypes.number
 };
 
 const mapStateToProps = state => ({
     brushModeState: state.scratchPaint.brushMode,
     colorState: state.scratchPaint.color,
-    isBrushModeActive: state.scratchPaint.mode === Modes.BRUSH
+    isBrushModeActive: state.scratchPaint.mode === Modes.BRUSH,
+    pressure: state.scratchPaint.pointer.pressure
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {

src/containers/paint-editor.jsx

@@ -19,6 +19,7 @@ import {updateViewBounds} from '../reducers/view-bounds';
 import {setLayout} from '../reducers/layout';
 import {setTheme as setReduxTheme} from '../reducers/theme';
 import {setCustomFonts} from '../reducers/custom-fonts';
+import {changePointerPressure, changePointerType} from '../reducers/pointer.js';
 
 import {getSelectedLeafItems} from '../helper/selection';
 import {convertToBitmap, convertToVector} from '../helper/bitmap';
@@ -90,7 +91,8 @@ class PaintEditor extends React.Component {
             'handleChangeTheme',
             'handleZoomIn',
             'handleZoomOut',
-            'handleZoomReset'
+            'handleZoomReset',
+            'onPointerMove'
         ]);
         this.state = {
             canvas: null,
@@ -103,6 +105,9 @@ class PaintEditor extends React.Component {
     componentDidMount () {
         document.addEventListener('keydown', this.props.onKeyPress);
 
+        // used to detect pen pressure
+        document.addEventListener('pointermove', this.onPointerMove);
+
         // document listeners used to detect if a mouse is down outside of the
         // canvas, and should therefore stop the eye dropper
         document.addEventListener('mousedown', this.onMouseDown);
@@ -145,6 +150,7 @@ class PaintEditor extends React.Component {
     }
     componentWillUnmount () {
         document.removeEventListener('keydown', this.props.onKeyPress);
+        document.removeEventListener('pointermove', this.onPointerMove);
         this.stopEyeDroppingLoop();
         document.removeEventListener('mousedown', this.onMouseDown);
         document.removeEventListener('touchstart', this.onMouseDown);
@@ -286,6 +292,12 @@ class PaintEditor extends React.Component {
             this.stopEyeDroppingLoop();
         }
     }
+    onPointerMove (event) {
+        const pressure = event.pressure;
+        const pointerType = event.pointerType;
+        this.props.changePointerPressure(pointerType === 'mouse' ? 1 : pressure);
+        this.props.changePointerType(pointerType);
+    }
     startEyeDroppingLoop () {
         this.eyeDropper = new EyeDropperTool(
             this.canvas,
@@ -412,7 +424,9 @@ PaintEditor.propTypes = {
     height: PropTypes.number,
     updateViewBounds: PropTypes.func.isRequired,
     viewBounds: PropTypes.instanceOf(paper.Matrix).isRequired,
-    zoomLevelId: PropTypes.string
+    zoomLevelId: PropTypes.string,
+    changePointerPressure: PropTypes.func,
+    changePointerType: PropTypes.func
 };
 
 PaintEditor.defaultProps = {
@@ -465,6 +479,12 @@ const mapDispatchToProps = dispatch => ({
     },
     updateViewBounds: matrix => {
         dispatch(updateViewBounds(matrix));
+    },
+    changePointerPressure: pressure => {
+        dispatch(changePointerPressure(pressure));
+    },
+    changePointerType: type => {
+        dispatch(changePointerType(type));
     }
 });
 

src/reducers/pointer.js

@@ -0,0 +1,55 @@
+const PRESSURE_CHANGED = 'scratch-paint/pointer/PRESSURE_CHANGED';
+const POINTER_TYPE_CHANGED = 'scratch-paint/pointer/POINTER_TYPE_CHANGED';
+
+const initialState = {
+    pressure: 0,
+    pointerType: 'mouse'
+};
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case PRESSURE_CHANGED:
+        return Object.assign(
+            {},
+            state,
+            {
+                pressure: action.pressure
+            }
+        );
+    case POINTER_TYPE_CHANGED:
+        return Object.assign(
+            {},
+            state,
+            {
+                pointerType: action.pointerType
+            }
+        );
+    default:
+        return state;
+    }
+};
+
+const changePointerPressure = function (pressure) {
+    return {
+        type: PRESSURE_CHANGED,
+        pressure: pressure
+    };
+};
+
+const changePointerType = function (pointerType) {
+    return {
+        type: POINTER_TYPE_CHANGED,
+        pointerType: pointerType
+    };
+};
+
+export {
+    reducer as default,
+
+    changePointerPressure,
+    changePointerType,
+
+    PRESSURE_CHANGED,
+    POINTER_TYPE_CHANGED
+};

src/reducers/scratch-paint-reducer.js

@@ -22,6 +22,7 @@ import viewBoundsReducer from './view-bounds';
 import undoReducer from './undo';
 import zoomLevelsReducer from './zoom-levels';
 import rectModeReducer from './rect-mode';
+import pointerReducer from './pointer.js';
 
 export default combineReducers({
     mode: modeReducer,
@@ -46,5 +47,6 @@ export default combineReducers({
     undo: undoReducer,
     viewBounds: viewBoundsReducer,
     zoomLevels: zoomLevelsReducer,
-    rectMode: rectModeReducer
+    rectMode: rectModeReducer,
+    pointer: pointerReducer
 });