Libs update

.travis.yml

@@ -1,8 +1,17 @@
-before_install:
-  - sudo apt-get -qq update
-  - sudo apt-get install -y libcairo2-dev libjpeg-dev libgif-dev npm nodejs libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
-  - if [[ `npm -v` != 3* ]]; then npm i -g npm@3; fi
-
 language: node_js
 node_js:
-  - '0.12'
+  - "6"
+  - "5"
+  - "4"
+env:
+  - CXX=g++-4.8
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+before_install:
+  - sudo apt-get update -qq
+  - sudo apt-get install -qq libgif-dev libpng-dev libjpeg8-dev libpango1.0-dev libcairo2-dev
+script: 'npm run build && npm run test'

karma.config.js

@@ -34,7 +34,6 @@ module.exports = function (config) {
             modulesDirectories: [
                 'node_modules'
             ],
-            devtool: 'inline-source-map',
             resolve: {
                 extensions: ['', '.js', '.jsx'],
                 alias: {
@@ -52,6 +51,7 @@ module.exports = function (config) {
                 ]
             },
             debug: false,
+            devtool: 'inline-source-map',
             stats: {
                 colors: true,
                 reasons: true

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sketch",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Sketch Element for React based applications, backed-up by fabricjs as its core",
   "keywords": [
     "react",
@@ -37,33 +37,34 @@
     "posttest": "npm run lint"
   },
   "engines": {
-    "node": ">0.4.0 <1.0.0"
+    "node": ">=4.4.1 <7.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.11.4",
-    "babel-core": "^6.11.4",
+    "babel-cli": "^6.14.0",
+    "babel-core": "^6.14.0",
     "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
+    "babel-loader": "^6.2.5",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-react-display-name": "^6.8.0",
     "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-polyfill": "^6.9.1",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-polyfill": "^6.13.0",
+    "babel-preset-es2015": "^6.14.0",
     "babel-preset-es2015-loose": "^7.0.0",
     "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
-    "canvas": "1.3.16",
+    "babel-runtime": "^6.11.6",
+    "canvas": "1.4.0",
     "chai": "^3.5.0",
-    "core-js": "^2.4.1",
-    "css-loader": "^0.23.1",
-    "eslint": "^3.2.2",
+    "css-loader": "^0.24.0",
+    "eslint": "^3.4.0",
     "eslint-loader": "^1.5.0",
-    "eslint-plugin-react": "^6.0.0",
-    "fabric": "1.6.2",
-    "flexboxgrid": "^6.3.0",
+    "eslint-plugin-react": "^6.2.0",
+    "fabric": "1.6.3",
+    "flexboxgrid": "^6.3.1",
     "html-webpack-plugin": "^2.22.0",
-    "karma": "^1.1.2",
+    "jsdom": "^9.4.2",
+    "karma": "^1.2.0",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
     "karma-coverage": "^1.1.1",
@@ -72,27 +73,27 @@
     "karma-phantomjs-launcher": "^1.0.1",
     "karma-phantomjs-shim": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "material-ui": "^0.15.3",
-    "mocha": "^3.0.1",
+    "karma-webpack": "^1.8.0",
+    "material-ui": "^0.15.4",
+    "mocha": "^3.0.2",
     "my-local-ip": "^1.0.0",
     "open": "0.0.5",
     "open-browser-webpack-plugin": "0.0.2",
-    "phantomjs": "^2.1.7",
-    "phantomjs-prebuilt": "^2.1.10",
-    "react-addons-test-utils": "15.2.1",
-    "react-color": "^2.2.2",
+    "phantomjs-prebuilt": "^2.1.12",
+    "react-addons-test-utils": "15.3.1",
+    "react-color": "^2.2.6",
     "react-hot-loader": "^1.3.0",
     "react-tap-event-plugin": "latest",
     "rimraf": "^2.5.4",
     "style-loader": "^0.13.1",
-    "webpack": "^1.13.1",
-    "webpack-dev-server": "^1.14.1",
-    "weinre": "^2.0.0-pre-I0Z7U9OV"
+    "webpack": "^1.13.2",
+    "webpack-dev-server": "^1.15.0",
+    "weinre": "^2.0.0-pre-I0Z7U9OV",
+    "xmldom": "^0.1.22"
   },
   "dependencies": {
-    "react": "15.2.1",
-    "react-addons-pure-render-mixin": "15.2.1",
-    "react-dom": "15.2.1"
+    "react": "15.3.1",
+    "react-addons-pure-render-mixin": "15.3.1",
+    "react-dom": "15.3.1"
   }
 }

src/SketchField.jsx

@@ -91,7 +91,12 @@ class SketchField extends Component {
             defaultData,
             defaultDataType} = this.props;
 
-        let canvas = this._fc = new fabric.Canvas(this._canvas.id);
+        let canvas = this._fc = new fabric.Canvas(this._canvas.id/*, {
+            preserveObjectStacking: false,
+            renderOnAddRemove: false,
+            skipTargetFind: true
+        }*/);
+
         this._initTools(canvas);
 
         let selectedTool = this._tools[tool];

src/pencil.js

@@ -6,10 +6,8 @@ class Pencil extends FabricCanvasTool {
 
     configureCanvas(props) {
         this._canvas.isDrawingMode = true;
-        // Initial line configuration
-        let {freeDrawingBrush} = this._canvas;
-        freeDrawingBrush.width = props.lineWidth;
-        freeDrawingBrush.color = props.lineColor;
+        this._canvas.freeDrawingBrush.width = props.lineWidth;
+        this._canvas.freeDrawingBrush.color = props.lineColor;
     }
 }
 

webpack.examples.cfg.js

@@ -29,7 +29,7 @@ var config = {
     },
     debug: false,
     cache: true,
-    devtool: 'sourcemap',
+    devtool: 'source-map',
     module: {
         loaders: [
             {test: /\.html$/, loader: 'html-loader', include: [examplesPath], exclude: /base\.html$/},

webpack.library.cfg.js

@@ -8,7 +8,6 @@ const NoErrorsPlugin = require('webpack/lib/NoErrorsPlugin');
 const DedupePlugin = require('webpack/lib/optimize/DedupePlugin');
 const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 const OccurenceOrderPlugin = require('webpack/lib/optimize/OccurenceOrderPlugin');
-const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
 const AggressiveMergingPlugin = require('webpack/lib/optimize/AggressiveMergingPlugin');
 
 const srcPath = path.join(__dirname, 'src');
@@ -67,7 +66,6 @@ module.exports = {
         new NoErrorsPlugin(),
         new OccurenceOrderPlugin(),
         new AggressiveMergingPlugin(),
-        new HotModuleReplacementPlugin(),
         new IgnorePlugin(new RegExp('^(fs|ipc)$')),
         new DefinePlugin({'process.env.NODE_ENV': '"production"'})
     ]

webpack.server.js

@@ -5,20 +5,22 @@ require('core-js/fn/object/assign');
 
 const path = require('path');
 const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
 const myLocalIP = require('my-local-ip');
+const WebpackDevServer = require('webpack-dev-server');
+
+const DefinePlugin = require('webpack/lib/DefinePlugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const NoErrorsPlugin = require('webpack/lib/NoErrorsPlugin');
+const OpenBrowserPlugin = require('open-browser-webpack-plugin');
 const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
 
 const srcPath = path.join(__dirname, 'src');
 const examplesPath = path.join(__dirname, 'examples');
 
-const OpenBrowserPlugin = require('open-browser-webpack-plugin');
-
 const port = 23000;
 const host = myLocalIP();
-var config = {
+
+const config = {
     port: port,
     entry: {
         examples: [
@@ -37,7 +39,7 @@ var config = {
     },
     debug: true,
     cache: true,
-    devtool: 'eval',
+    devtool: 'inline-source-map',
     devServer: {
         historyApiFallback: true,
         stats: {colors: true},
@@ -51,7 +53,7 @@ var config = {
             {
                 test: /\.(js|jsx)$/,
                 include: [srcPath],
-                exclude: /(node_modules|bower_components)/,
+                exclude: /(node_modules|bower_components|lib)/,
                 loader: 'eslint-loader'
             }
         ],
@@ -60,8 +62,8 @@ var config = {
             {
                 test: /\.(js|jsx)$/,
                 include: [srcPath, examplesPath],
-                exclude: /(node_modules|bower_components)/,
-                loaders: ['react-hot', 'babel']
+                exclude: /(node_modules|bower_components|lib)/,
+                loaders: ['babel']
             }
         ]
     },
@@ -77,15 +79,16 @@ var config = {
             filename: 'index.html',
             chunks: ['examples']
         }),
-        new OpenBrowserPlugin({url: 'http://localhost:' + port})
+        new DefinePlugin({'process.env.NODE_ENV': '"development"'}),
+        new OpenBrowserPlugin({url: 'http://' + host + ':' + port})
     ]
 };
 
 new WebpackDevServer(webpack(config), config.devServer)
-    .listen(config.port, '0.0.0.0', function (err) {
+    .listen(config.port, host, function (err) {
             if (err) {
                 console.log(err);
             }
-            console.log('Serving from http://localhost:' + config.port);
+        console.log('Serving from http://' + host + ':' + port);
         }
     );