From ad5df04f1eb8574cd9a52ea146fce46da41401f3 Mon Sep 17 00:00:00 2001 From: DD Date: Mon, 28 Aug 2017 18:01:18 -0400 Subject: [PATCH 1/2] Changes to the webpack build to make paint compatible with installing into gui --- package.json | 26 +++++++++++++------------- src/components/eraser-mode.jsx | 9 ++++++++- webpack.config.js | 23 ++++++++++------------- 3 files changed, 31 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 1d7fd76a..3e56fbb8 100644 --- a/package.json +++ b/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": { diff --git a/src/components/eraser-mode.jsx b/src/components/eraser-mode.jsx index 7ec03c44..33536bfd 100644 --- a/src/components/eraser-mode.jsx +++ b/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 => ( - + ); EraserModeComponent.propTypes = { diff --git a/webpack.config.js b/webpack.config.js index 8049965b..2b093a84 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,4 @@ + const defaultsDeep = require('lodash.defaultsdeep'); const path = require('path'); const webpack = require('webpack'); @@ -12,10 +13,6 @@ const postcssImport = require('postcss-import'); const base = { devtool: 'cheap-module-source-map', - externals: { - React: 'react', - ReactDOM: 'react-dom' - }, module: { rules: [{ test: /\.jsx?$/, @@ -55,12 +52,8 @@ const base = { }] }] }, - plugins: [ - new webpack.optimize.CommonsChunkPlugin({ - name: 'lib', - filename: 'lib.min.js' - }) - ].concat(process.env.NODE_ENV === 'production' ? [ + plugins: [] + .concat(process.env.NODE_ENV === 'production' ? [ new webpack.optimize.UglifyJsPlugin({ include: /\.min\.js$/, minimize: true @@ -77,7 +70,6 @@ module.exports = [ port: process.env.PORT || 8078 }, entry: { - lib: ['react', 'react-dom'], playground: './src/playground/playground.jsx' }, output: { @@ -93,13 +85,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', } }) ]; From 2c64c4510157534d96630bac68d7cffb87278d62 Mon Sep 17 00:00:00 2001 From: DD Date: Tue, 29 Aug 2017 17:24:40 -0400 Subject: [PATCH 2/2] fix lint errors --- src/containers/blob/blob.js | 6 +++--- src/containers/blob/broad-brush-helper.js | 2 +- src/containers/blob/segment-brush-helper.js | 6 +++--- test/unit/modes-reducer.test.js | 2 +- webpack.config.js | 15 +++++++-------- 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/containers/blob/blob.js b/src/containers/blob/blob.js index b06199b8..bc7f63d1 100644 --- a/src/containers/blob/blob.js +++ b/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) { diff --git a/src/containers/blob/broad-brush-helper.js b/src/containers/blob/broad-brush-helper.js index b3bc1ca3..c9cfee25 100644 --- a/src/containers/blob/broad-brush-helper.js +++ b/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); diff --git a/src/containers/blob/segment-brush-helper.js b/src/containers/blob/segment-brush-helper.js index 88f7debd..c745b9d8 100644 --- a/src/containers/blob/segment-brush-helper.js +++ b/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? diff --git a/test/unit/modes-reducer.test.js b/test/unit/modes-reducer.test.js index 8f08ffc9..df81f64c 100644 --- a/test/unit/modes-reducer.test.js +++ b/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); }); diff --git a/webpack.config.js b/webpack.config.js index 2b093a84..fd5935d6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,4 +1,3 @@ - const defaultsDeep = require('lodash.defaultsdeep'); const path = require('path'); const webpack = require('webpack'); @@ -53,12 +52,12 @@ const base = { }] }, plugins: [] - .concat(process.env.NODE_ENV === 'production' ? [ - new webpack.optimize.UglifyJsPlugin({ - include: /\.min\.js$/, - minimize: true - }) - ] : []) + .concat(process.env.NODE_ENV === 'production' ? [ + new webpack.optimize.UglifyJsPlugin({ + include: /\.min\.js$/, + minimize: true + }) + ] : []) }; module.exports = [ @@ -96,7 +95,7 @@ module.exports = [ output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', - libraryTarget: 'commonjs2', + libraryTarget: 'commonjs2' } }) ];