Merge pull request #8 from fsih/paintGuiIntegration

Fix the paint library so that it works in GUI

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "scratch-blobs",
+  "name": "scratch-paint",
   "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": "./dist/scratch-paint.js",
@@ -27,12 +27,12 @@
     "react-dom": "^15"
   },
   "devDependencies": {
-    "autoprefixer": "7.1.1",
-    "babel-cli": "6.24.1",
+    "autoprefixer": "7.1.2",
+    "babel-cli": "6.26.0",
     "babel-core": "^6.23.1",
-    "babel-eslint": "^7.1.1",
+    "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.0",
     "babel-plugin-react-intl": "2.3.1",
     "babel-plugin-transform-object-rest-spread": "^6.22.0",
     "babel-preset-es2015": "^6.22.0",
@@ -40,13 +40,13 @@
     "classnames": "2.2.5",
     "css-loader": "0.28.3",
     "enzyme": "^2.8.2",
-    "eslint": "^3.16.1",
+    "eslint": "^4.4.1",
     "eslint-config-import": "^0.13.0",
-    "eslint-config-scratch": "^3.0.0",
+    "eslint-config-scratch": "^4.0.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-react": "^7.0.1",
+    "eslint-plugin-react": "^7.2.1",
     "gh-pages": "github:rschamp/gh-pages#publish-branch-to-subfolder",
-    "html-webpack-plugin": "2.28.0",
+    "html-webpack-plugin": "2.30.0",
     "jest": "^20.0.4",
     "keymirror": "0.1.1",
     "lodash.bindall": "4.4.0",
@@ -59,20 +59,20 @@
     "postcss-simple-vars": "^4.0.0",
     "prop-types": "^15.5.10",
     "react": "15.6.1",
-    "react-dom": "15.5.4",
+    "react-dom": "15.6.1",
     "react-intl": "2.3.0",
     "react-intl-redux": "0.6.0",
     "react-redux": "5.0.5",
     "react-test-renderer": "^15.5.4",
-    "redux": "3.6.0",
+    "redux": "3.7.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"
+    "webpack": "^3.5.4",
+    "webpack-dev-server": "^2.7.0"
   },
   "jest": {
     "moduleNameMapper": {

src/components/eraser-mode.jsx

@@ -1,8 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
 
 const EraserModeComponent = props => (
-    <button onClick={props.onMouseDown}>Eraser</button>
+    <button onClick={props.onMouseDown}>
+        <FormattedMessage
+            defaultMessage="Eraser"
+            description="Label for the eraser tool"
+            id="paint.eraserMode.eraser"
+        />
+    </button>
 );
 
 EraserModeComponent.propTypes = {

src/containers/blob/blob.js

@@ -64,7 +64,7 @@ class Blobbiness {
         
         this.tool.onMouseDown = function (event) {
             blob.resizeCursorIfNeeded(event.point);
-            if (event.event.button > 0) return;  // only first mouse button
+            if (event.event.button > 0) return; // only first mouse button
 
             if (blob.options.brushSize < Blobbiness.THRESHOLD) {
                 blob.brush = Blobbiness.BROAD;
@@ -80,7 +80,7 @@ class Blobbiness {
 
         this.tool.onMouseDrag = function (event) {
             blob.resizeCursorIfNeeded(event.point);
-            if (event.event.button > 0) return;  // only first mouse button
+            if (event.event.button > 0) return; // only first mouse button
             if (blob.brush === Blobbiness.BROAD) {
                 blob.broadBrushHelper.onBroadMouseDrag(event, blob.tool, blob.options);
             } else if (blob.brush === Blobbiness.SEGMENT) {
@@ -96,7 +96,7 @@ class Blobbiness {
 
         this.tool.onMouseUp = function (event) {
             blob.resizeCursorIfNeeded(event.point);
-            if (event.event.button > 0) return;  // only first mouse button
+            if (event.event.button > 0) return; // only first mouse button
             
             let lastPath;
             if (blob.brush === Blobbiness.BROAD) {

src/containers/blob/broad-brush-helper.js

@@ -22,7 +22,7 @@ class BroadBrushHelper {
     onBroadMouseDown (event, tool, options) {
         tool.minDistance = options.brushSize / 2;
         tool.maxDistance = options.brushSize;
-        if (event.event.button > 0) return;  // only first mouse button
+        if (event.event.button > 0) return; // only first mouse button
         
         this.finalPath = new paper.Path();
         stylePath(this.finalPath, options.isEraser);

src/containers/blob/segment-brush-helper.js

@@ -22,7 +22,7 @@ class SegmentBrushHelper {
     }
 
     onSegmentMouseDown (event, tool, options) {
-        if (event.event.button > 0) return;  // only first mouse button
+        if (event.event.button > 0) return; // only first mouse button
 
         tool.minDistance = 1;
         tool.maxDistance = options.brushSize;
@@ -37,7 +37,7 @@ class SegmentBrushHelper {
     }
     
     onSegmentMouseDrag (event, tool, options) {
-        if (event.event.button > 0) return;  // only first mouse button
+        if (event.event.button > 0) return; // only first mouse button
 
         const step = (event.delta).normalize(options.brushSize / 2);
         const handleVec = step.clone();
@@ -75,7 +75,7 @@ class SegmentBrushHelper {
     }
 
     onSegmentMouseUp (event) {
-        if (event.event.button > 0) return;  // only first mouse button
+        if (event.event.button > 0) return; // only first mouse button
 
         // TODO: This smoothing tends to cut off large portions of the path! Would like to eventually
         // add back smoothing, maybe a custom implementation that only applies to a subset of the line?

test/unit/modes-reducer.test.js

@@ -19,6 +19,6 @@ test('changeMode', () => {
 
 test('invalidChangeMode', () => {
     expect(reducer(Modes.BRUSH /* state */, changeMode('non-existant mode') /* action */))
-    .toBe(Modes.BRUSH);
+        .toBe(Modes.BRUSH);
     expect(reducer(Modes.BRUSH /* state */, changeMode() /* action */)).toBe(Modes.BRUSH);
 });

webpack.config.js

@@ -12,10 +12,6 @@ const postcssImport = require('postcss-import');
 
 const base = {
     devtool: 'cheap-module-source-map',
-    externals: {
-        React: 'react',
-        ReactDOM: 'react-dom'
-    },
     module: {
         rules: [{
             test: /\.jsx?$/,
@@ -55,17 +51,13 @@ const base = {
             }]
         }]
     },
-    plugins: [
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'lib',
-            filename: 'lib.min.js'
-        })
-    ].concat(process.env.NODE_ENV === 'production' ? [
-        new webpack.optimize.UglifyJsPlugin({
-            include: /\.min\.js$/,
-            minimize: true
-        })
-    ] : [])
+    plugins: []
+        .concat(process.env.NODE_ENV === 'production' ? [
+            new webpack.optimize.UglifyJsPlugin({
+                include: /\.min\.js$/,
+                minimize: true
+            })
+        ] : [])
 };
 
 module.exports = [
@@ -77,7 +69,6 @@ module.exports = [
             port: process.env.PORT || 8078
         },
         entry: {
-            lib: ['react', 'react-dom'],
             playground: './src/playground/playground.jsx'
         },
         output: {
@@ -93,13 +84,18 @@ module.exports = [
     }),
     // For use as a library
     defaultsDeep({}, base, {
+        externals: {
+            'react': 'react',
+            'react-dom': 'react-dom',
+            'minilog': 'minilog'
+        },
         entry: {
-            'lib': ['react', 'react-dom'],
             'scratch-paint': './src/index.js'
         },
         output: {
             path: path.resolve(__dirname, 'dist'),
-            filename: '[name].js'
+            filename: '[name].js',
+            libraryTarget: 'commonjs2'
         }
     })
 ];