Upgrading to latest packages

Adding Zoom functionality

Author: Thomas Bolis

examples/main.jsx

@@ -87,6 +87,7 @@ class SketchFieldDemo extends React.Component {
         this._download = this._download.bind(this);
         this._renderTile = this._renderTile.bind(this);
         this._selectTool = this._selectTool.bind(this);
+        this._onSketchChange = this._onSketchChange.bind(this);
 
         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
 
@@ -203,9 +204,19 @@ class SketchFieldDemo extends React.Component {
         this._sketch.clear();
     }
 
+    _onSketchChange() {
+        let prev = this.state.canUndo;
+        let now = this._sketch.canUndo();
+        if (prev !== now) {
+            this.setState({canUndo: now});
+        }
+    }
+
     render() {
         return (
+
             <MuiThemeProvider muiTheme={getMuiTheme()}>
+
                 <div>
 
                     {/* Application Bar with tools */}
@@ -261,16 +272,10 @@ class SketchFieldDemo extends React.Component {
                                     lineWidth={this.state.lineWidth}
                                     fillColor={this.state.fillWithColor ? this.state.fillColor : 'transparent'}
                                     scaleOnResize={true}
-                                    height={660}
+                                    height={760}
                                     defaultData={dataJson}
                                     defaultDataType="json"
-                                    onChange={() => {
-                                        let prev = this.state.canUndo;
-                                        let now = this._sketch.canUndo();
-                                        if(prev !== now){
-                                            this.setState({canUndo: now});
-                                        }
-                                    }}
+                                    onChange={this._onSketchChange}
                                     tool={this.state.tool}
                                 />
                             </div>

package.json

@@ -40,61 +40,59 @@
     "node": ">0.4.0 <1.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-core": "^6.9.1",
-    "babel-eslint": "^6.0.5",
+    "babel-cli": "^6.11.4",
+    "babel-core": "^6.11.4",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-react-display-name": "^6.8.0",
-    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-plugin-transform-runtime": "^6.12.0",
     "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-loose": "^7.0.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-react": "^6.11.1",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
-    "canvas": "^1.4.0",
+    "canvas": "1.3.16",
     "chai": "^3.5.0",
-    "core-js": "^2.4.0",
+    "core-js": "^2.4.1",
     "css-loader": "^0.23.1",
-    "eslint": "^2.13.1",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-react": "^5.2.2",
-    "fabric": "^1.6.2",
+    "eslint": "^3.2.2",
+    "eslint-loader": "^1.5.0",
+    "eslint-plugin-react": "^6.0.0",
+    "fabric": "1.6.2",
     "flexboxgrid": "^6.3.0",
-    "html-webpack-plugin": "^2.21.0",
-    "karma": "^0.13.22",
+    "html-webpack-plugin": "^2.22.0",
+    "karma": "^1.1.2",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
-    "karma-coverage": "^1.0.0",
-    "karma-mocha": "^1.0.1",
-    "karma-mocha-reporter": "^2.0.4",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-mocha": "^1.1.1",
+    "karma-mocha-reporter": "^2.1.0",
+    "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.1",
-    "mocha": "^2.5.3",
+    "material-ui": "^0.15.3",
+    "mocha": "^3.0.1",
     "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.7",
-    "react": "^15.1.0",
-    "react-addons-test-utils": "^15.1.0",
-    "react-color": "^2.2.0",
-    "react-dom": "^15.1.0",
+    "phantomjs-prebuilt": "^2.1.10",
+    "react-addons-test-utils": "15.2.1",
+    "react-color": "^2.2.2",
     "react-hot-loader": "^1.3.0",
     "react-tap-event-plugin": "latest",
-    "rimraf": "^2.5.2",
+    "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"
   },
   "dependencies": {
-    "react": "^15.1.0",
-    "react-addons-pure-render-mixin": "^15.1.0",
-    "react-dom": "^15.1.0"
+    "react": "15.2.1",
+    "react-addons-pure-render-mixin": "15.2.1",
+    "react-dom": "15.2.1"
   }
 }

webpack.examples.cfg.js

@@ -1,3 +1,5 @@
+/*global __dirname,module*/
+
 const path = require('path');
 const srcPath = path.join(__dirname, 'src');
 const examplesPath = path.join(__dirname, 'examples');