Merge pull request #2 from fsih/addTool

Add PaperCanvas component
2024-12-22 21:42:30 -05:00 · 2017-07-27 17:14:02 -04:00 · 2017-07-27 17:14:02 -04:00 · 91ebc3c046
commit 91ebc3c046
parent ef19e6f37e 47e5dd4d2a
24 changed files with 287 additions and 74406 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-object-rest-spread"],
+  "presets": ["es2015", "react"]
+}
--- a/.eslintignore
+++ b/.eslintignore
@ -1,3 +1,3 @@
 node_modules/*
-build/*
+dist/*
 playground/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,3 +1,3 @@
 module.exports = {
-    extends: ['scratch', 'scratch/node']
+    extends: ['scratch', 'scratch/es6', 'scratch/node']
 };
--- a/.gitignore
+++ b/.gitignore
@ -7,4 +7,8 @@ npm-*

 # Build
 playground/*
-build/*
+dist/*
+
+# Editors
+/#*
+*~
--- a/package.json
+++ b/package.json
@ -2,14 +2,15 @@
  "name": "scratch-blobs",
  "version": "0.1.0",
  "description": "Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.",
-  "main": "./src/index.js",
+  "main": "./dist/scratch-paint.js",
  "scripts": {
    "build": "npm run clean && webpack --progress --colors --bail",
-    "clean": "rimraf ./build && mkdirp build",
+    "clean": "rimraf ./dist && mkdirp dist && rimraf ./playground && mkdirp playground",
    "deploy": "touch playground/.nojekyll && gh-pages -t -d playground -m \"Build for $(git log --pretty=format:%H -n1)\"",
    "lint": "eslint . --ext .js,.jsx",
    "start": "webpack-dev-server",
-    "test": "npm run lint && npm run build",
+    "test": "npm run lint && npm run build && npm run unit",
+    "unit": "jest",
    "watch": "webpack --progress --colors --watch"
  },
  "author": "Massachusetts Institute of Technology",
@ -27,31 +28,51 @@
    "autoprefixer": "7.1.1",
    "babel-core": "^6.23.1",
    "babel-eslint": "^7.1.1",
+    "babel-jest": "^20.0.3",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "classnames": "2.2.5",
    "css-loader": "0.28.3",
+    "enzyme": "^2.8.2",
    "eslint": "^3.16.1",
+    "eslint-config-import": "^0.13.0",
    "eslint-config-scratch": "^3.0.0",
+    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-react": "^7.0.1",
    "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
    "html-webpack-plugin": "2.28.0",
+    "jest": "^20.0.4",
+    "keymirror": "0.1.1",
+    "lodash.bindall": "4.4.0",
+    "lodash.defaultsdeep": "4.6.0",
    "minilog": "3.1.0",
    "mkdirp": "^0.5.1",
+    "paper": "0.11.4",
    "postcss-import": "^10.0.0",
    "postcss-loader": "^2.0.5",
    "postcss-simple-vars": "^4.0.0",
    "prop-types": "^15.5.10",
-    "react": "15.5.4",
+    "react": "15.6.1",
    "react-dom": "15.5.4",
    "react-intl": "2.3.0",
+    "react-redux": "5.0.5",
+    "react-test-renderer": "^15.5.4",
    "redux": "3.6.0",
+    "redux-mock-store": "^1.2.3",
    "redux-throttle": "0.1.1",
+    "regenerator-runtime": "^0.10.5",
    "rimraf": "^2.6.1",
    "style-loader": "^0.18.0",
+    "tap": "^10.2.0",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.1"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/__mocks__/fileMock.js",
+      "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+    }
  }
 }
--- a/playground/index.html
+++ b/playground/index.html
@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Scratch 3.0 Paint Editor</title>
-  </head>
-  <body>
-  <script type="text/javascript" src="lib.min.js"></script><script type="text/javascript" src="playground.js"></script></body>
-</html>
--- a/playground/lib.min.js
+++ b/playground/lib.min.js
--- a/playground/lib.min.js.map
+++ b/playground/lib.min.js.map
--- a/playground/playground.js
+++ b/playground/playground.js
--- a/playground/playground.js.map
+++ b/playground/playground.js.map
--- a/src/.eslintrc.js
+++ b/src/.eslintrc.js
@ -0,0 +1,13 @@
+module.exports = {
+    root: true,
+    extends: ['scratch', 'scratch/es6', 'scratch/react', 'import'],
+    env: {
+        browser: true
+    },
+    rules: {
+        'import/no-mutable-exports': 'error',
+        'import/no-commonjs': 'error',
+        'import/no-amd': 'error',
+        'import/no-nodejs-modules': 'error'
+    }
+};
--- a/src/components/paint-editor.jsx
+++ b/src/components/paint-editor.jsx
@ -1,14 +1,16 @@
+import PropTypes from 'prop-types';
 import React from 'react';
+import PaperCanvas from '../containers/paper-canvas.jsx';
+import ToolTypes from '../tools/tool-types.js';

-export default class PaintEditorComponent extends React.Component {
-    render () {
-        return (
-            <div className="paint-editor">
-                BANANAS
-            </div>
-        );
-    }
-}
+const PaintEditorComponent = props => (
+    <PaperCanvas
+        tool={props.tool}
+    />
+);

-PaintEditorComponent.defaultProps = {
+PaintEditorComponent.propTypes = {
+    tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
 };
+
+export default PaintEditorComponent;
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import PaintEditorComponent from '../components/paint-editor.jsx';
+import tools from '../reducers/tools';
+import ToolTypes from '../tools/tool-types.js';
+import {connect} from 'react-redux';
+
+class PaintEditor extends React.Component {
+    componentDidMount () {
+        document.addEventListener('keydown', this.props.onKeyPress);
+    }
+    componentWillUnmount () {
+        document.removeEventListener('keydown', this.props.onKeyPress);
+    }
+    render () {
+        const {
+            onKeyPress, // eslint-disable-line no-unused-vars
+            ...props
+        } = this.props;
+        return (
+            <PaintEditorComponent {...props} />
+        );
+    }
+}
+
+PaintEditor.propTypes = {
+    onKeyPress: PropTypes.func.isRequired,
+    tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
+};
+
+const mapStateToProps = state => ({
+    tool: state.tool
+});
+const mapDispatchToProps = dispatch => ({
+    onKeyPress: e => {
+        if (e.key === 'e') {
+            dispatch(tools.changeTool(ToolTypes.ERASER));
+        } else if (e.key === 'b') {
+            dispatch(tools.changeTool(ToolTypes.BRUSH));
+        }
+    }
+});
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(PaintEditor);
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import paper from 'paper';
+import ToolTypes from '../tools/tool-types.js';
+
+class PaperCanvas extends React.Component {
+    componentDidMount () {
+        paper.setup(this.canvas);
+        // Create a Paper.js Path to draw a line into it:
+        const path = new paper.Path();
+        // Give the stroke a color
+        path.strokeColor = 'black';
+        const start = new paper.Point(100, 100);
+        // Move to start and draw a line from there
+        path.moveTo(start);
+        // Note that the plus operator on Point objects does not work
+        // in JavaScript. Instead, we need to call the add() function:
+        path.lineTo(start.add([200, -50]));
+        // Draw the view now:
+        paper.view.draw();
+    }
+    componentWillReceiveProps (nextProps) {
+        if (nextProps.tool !== this.props.tool) {
+            // TODO switch tool
+        }
+    }
+    componentWillUnmount () {
+        paper.remove();
+    }
+    render () {
+        return (
+            <canvas
+                ref={canvas => {
+                    this.canvas = canvas;
+                }}
+            />
+        );
+    }
+}
+
+PaperCanvas.propTypes = {
+    tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
+};
+
+export default PaperCanvas;
--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,3 @@
-import PaintEditorComponent from './components/paint-editor.jsx';
+import PaintEditor from './containers/paint-editor.jsx';

-export default PaintEditorComponent;
+export default PaintEditor;
--- a/src/log/log.js
+++ b/src/log/log.js
@ -0,0 +1,4 @@
+import minilog from 'minilog';
+minilog.enable();
+
+export default minilog('scratch-paint');
--- a/src/playground/playground.jsx
+++ b/src/playground/playground.jsx
@ -1,9 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PaintEditor from '..';
+import {Provider} from 'react-redux';
+import {createStore} from 'redux';
+import reducer from '../reducers/combine-reducers';

 const appTarget = document.createElement('div');
 document.body.appendChild(appTarget);
-ReactDOM.render(
-    <PaintEditor />,
-    appTarget);
+const store = createStore(
+    reducer,
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+ReactDOM.render((
+    <Provider store={store}>
+        <PaintEditor />
+    </Provider>
+), appTarget);
--- a/src/reducers/combine-reducers.js
+++ b/src/reducers/combine-reducers.js
@ -0,0 +1,6 @@
+import {combineReducers} from 'redux';
+import toolReducer from './tools';
+
+export default combineReducers({
+    tool: toolReducer
+});
--- a/src/reducers/tools.js
+++ b/src/reducers/tools.js
@ -0,0 +1,29 @@
+import ToolTypes from '../tools/tool-types';
+import log from '../log/log';
+
+const CHANGE_TOOL = 'scratch-paint/tools/CHANGE_TOOL';
+const initialState = ToolTypes.BRUSH;
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case CHANGE_TOOL:
+        if (action.tool in ToolTypes) {
+            return action.tool;
+        }
+        log.warn(`Tool type does not exist: ${action.tool}`);
+        /* falls through */
+    default:
+        return state;
+    }
+};
+
+// Action creators ==================================
+reducer.changeTool = function (tool) {
+    return {
+        type: CHANGE_TOOL,
+        tool: tool
+    };
+};
+
+export default reducer;
--- a/src/tools/tool-types.js
+++ b/src/tools/tool-types.js
@ -0,0 +1,8 @@
+import keyMirror from 'keymirror';
+
+const ToolTypes = keyMirror({
+    BRUSH: null,
+    ERASER: null
+});
+
+export default ToolTypes;
--- a/test/mocks/fileMock.js
+++ b/test/mocks/fileMock.js
@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';
--- a/test/mocks/styleMock.js
+++ b/test/mocks/styleMock.js
@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};
--- a/test/unit/tools-reducer.test.js
+++ b/test/unit/tools-reducer.test.js
@ -0,0 +1,23 @@
+/* eslint-env jest */
+import ToolTypes from '../../src/tools/tool-types';
+import reducer from '../../src/reducers/tools';
+
+test('initialState', () => {
+    let defaultState;
+    expect(reducer(defaultState /* state */, {type: 'anything'} /* action */) in ToolTypes).toBeTruthy();
+});
+
+test('changeTool', () => {
+    let defaultState;
+    expect(reducer(defaultState /* state */, reducer.changeTool(ToolTypes.ERASER) /* action */)).toBe(ToolTypes.ERASER);
+    expect(reducer(ToolTypes.ERASER /* state */, reducer.changeTool(ToolTypes.ERASER) /* action */))
+        .toBe(ToolTypes.ERASER);
+    expect(reducer(ToolTypes.BRUSH /* state */, reducer.changeTool(ToolTypes.ERASER) /* action */))
+        .toBe(ToolTypes.ERASER);
+});
+
+test('invalidChangeTool', () => {
+    expect(reducer(ToolTypes.BRUSH /* state */, reducer.changeTool('non-existant tool') /* action */))
+    .toBe(ToolTypes.BRUSH);
+    expect(reducer(ToolTypes.BRUSH /* state */, reducer.changeTool() /* action */)).toBe(ToolTypes.BRUSH);
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,29 +1,17 @@
-var path = require('path');
-var webpack = require('webpack');
+const defaultsDeep = require('lodash.defaultsdeep');
+const path = require('path');
+const webpack = require('webpack');

 // Plugins
-var HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');

 // PostCss
-var autoprefixer = require('autoprefixer');
-var postcssVars = require('postcss-simple-vars');
-var postcssImport = require('postcss-import');
+const autoprefixer = require('autoprefixer');
+const postcssVars = require('postcss-simple-vars');
+const postcssImport = require('postcss-import');

-module.exports = {
-    devServer: {
-        contentBase: path.resolve(__dirname, 'build'),
-        host: '0.0.0.0',
-        port: process.env.PORT || 8078
-    },
+const base = {
    devtool: 'cheap-module-source-map',
-    entry: {
-        lib: ['react', 'react-dom'],
-        playground: './src/playground/playground.jsx'
-    },
-    output: {
-        path: path.resolve(__dirname, 'playground'),
-        filename: '[name].js'
-    },
    externals: {
        React: 'react',
        ReactDOM: 'react-dom'
@ -71,10 +59,6 @@ module.exports = {
        new webpack.optimize.CommonsChunkPlugin({
            name: 'lib',
            filename: 'lib.min.js'
-        }),
-        new HtmlWebpackPlugin({
-            template: 'src/playground/index.ejs',
-            title: 'Scratch 3.0 Paint Editor'
        })
    ].concat(process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.UglifyJsPlugin({
@ -83,3 +67,39 @@ module.exports = {
        })
    ] : [])
 };
+
+module.exports = [
+    // For the playground
+    defaultsDeep({}, base, {
+        devServer: {
+            contentBase: path.resolve(__dirname, 'playground'),
+            host: '0.0.0.0',
+            port: process.env.PORT || 8078
+        },
+        entry: {
+            lib: ['react', 'react-dom'],
+            playground: './src/playground/playground.jsx'
+        },
+        output: {
+            path: path.resolve(__dirname, 'playground'),
+            filename: '[name].js'
+        },
+        plugins: base.plugins.concat([
+            new HtmlWebpackPlugin({
+                template: 'src/playground/index.ejs',
+                title: 'Scratch 3.0 Paint Editor Playground'
+            })
+        ])
+    }),
+    // For use as a library
+    defaultsDeep({}, base, {
+        entry: {
+            'lib': ['react', 'react-dom'],
+            'scratch-paint': './src/index.js'
+        },
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: '[name].js'
+        }
+    })
+];