Upgrading to latest packages

Adding Zoom functionality

Author: Thomas Bolis

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Changelog
 
+* **0.2.7** New Functionality and bug fixes
+    - Zoom In/Out functionality of drawing
+    - Upgrading to latest package versions
+    
+* **0.2.6** Bug fixes and performance improvements
 * **0.2.5** Upgrading to latest libraries and bug fixes
     - Major
         - React 15.1.0

examples/main.jsx

@@ -9,6 +9,7 @@ import './main.css';
 
 import {
     Card,CardText,CardTitle,
+    Drawer,
     AppBar,GridList,GridTile,
     Slider, Toggle, MenuItem,
     SelectField, IconButton,
@@ -24,6 +25,8 @@ import ClearIcon from 'material-ui/svg-icons/action/delete';
 import SaveIcon from 'material-ui/svg-icons/content/save';
 import RemoveIcon from 'material-ui/svg-icons/content/clear';
 import DownloadIcon from 'material-ui/svg-icons/file/file-download';
+import ZoomInIcon from 'material-ui/svg-icons/action/zoom-in';
+import ZoomOutIcon from 'material-ui/svg-icons/action/zoom-out';
 
 import dataJson from './data.json'
 import dataUrl from './data.url'
@@ -291,6 +294,20 @@ class SketchFieldDemo extends React.Component {
                                     <Slider ref='slider' step={0.1}
                                             defaultValue={this.state.lineWidth/100}
                                             onChange={(e, v) => this.setState({lineWidth:v*100})}/>
+                                    <br/>
+                                    <label htmlFor='zoom'>Zoom</label>
+                                    <div>
+                                        <IconButton
+                                            ref='zoom'
+                                            onTouchTap={(e) => this._sketch.zoom(1.25)}>
+                                            <ZoomInIcon />
+                                        </IconButton>
+                                        <IconButton
+                                            ref='zoom1'
+                                            onTouchTap={(e) => this._sketch.zoom(0.8)}>
+                                            <ZoomOutIcon />
+                                        </IconButton>
+                                    </div>
                                 </CardText>
                             </Card>
                             <Card style={{margin:'5px 10px 5px 0'}}>

package.json

@@ -40,9 +40,9 @@
     "node": ">0.4.0 <1.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.9.0",
+    "babel-cli": "^6.10.1",
     "babel-core": "^6.9.1",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^6.0.5",
     "babel-loader": "^6.2.4",
     "babel-plugin-transform-object-assign": "^6.8.0",
     "babel-plugin-transform-react-display-name": "^6.8.0",
@@ -53,27 +53,27 @@
     "babel-preset-react": "^6.5.0",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
-    "canvas": "^1.3.16",
+    "canvas": "^1.4.0",
     "chai": "^3.5.0",
     "core-js": "^2.4.0",
     "css-loader": "^0.23.1",
-    "eslint": "^2.11.1",
+    "eslint": "^2.13.1",
     "eslint-loader": "^1.3.0",
-    "eslint-plugin-react": "^5.1.1",
+    "eslint-plugin-react": "^5.2.2",
     "fabric": "^1.6.2",
     "flexboxgrid": "^6.3.0",
-    "html-webpack-plugin": "^2.19.0",
+    "html-webpack-plugin": "^2.21.0",
     "karma": "^0.13.22",
     "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.3",
+    "karma-mocha-reporter": "^2.0.4",
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-phantomjs-shim": "^1.4.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
-    "material-ui": "^0.15.0",
+    "material-ui": "^0.15.1",
     "mocha": "^2.5.3",
     "my-local-ip": "^1.0.0",
     "open": "0.0.5",

src/SketchField.jsx

@@ -58,23 +58,25 @@ class SketchField extends Component {
 
     constructor(props, context) {
         super(props, context);
+        // Internal functions
         this._resize = this._resize.bind(this);
         this._initTools = this._initTools.bind(this);
+        // exposed
+        this.zoom = this.zoom.bind(this);
         this.enableTouchScroll = this.enableTouchScroll.bind(this);
         this.disableTouchScroll = this.disableTouchScroll.bind(this);
-
+        //events
         this._onMouseUp = this._onMouseUp.bind(this);
         this._onMouseOut = this._onMouseOut.bind(this);
         this._onMouseDown = this._onMouseDown.bind(this);
         this._onMouseMove = this._onMouseMove.bind(this);
-
         this._onObjectAdded = this._onObjectAdded.bind(this);
         this._onObjectMoving = this._onObjectMoving.bind(this);
         this._onObjectRemoved = this._onObjectRemoved.bind(this);
         this._onObjectScaling = this._onObjectScaling.bind(this);
         this._onObjectModified = this._onObjectModified.bind(this);
         this._onObjectRotating = this._onObjectRotating.bind(this);
-
+        // pure render
         this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
     }
 
@@ -154,12 +156,18 @@ class SketchField extends Component {
         this._selectedTool.configureCanvas(nextProps);
     }
 
+    /**
+     * Enable touch Scrolling on Canvas
+     */
     enableTouchScroll() {
         let canvas = this._fc;
         if (canvas.allowTouchScrolling) return;
         canvas.allowTouchScrolling = true;
     }
 
+    /**
+     * Disable touch Scrolling on Canvas
+     */
     disableTouchScroll() {
         let canvas = this._fc;
         if (canvas.allowTouchScrolling) {
@@ -284,6 +292,29 @@ class SketchField extends Component {
         canvas.calcOffset();
     }
 
+    /**
+     * Zoom the drawing by the factor specified
+     *
+     * The zoom factor is a percentage with regards the original, for example if factor is set to 2
+     * it will double the size whereas if it is set to 0.5 it will half the size
+     *
+     * @param factor the zoom factor
+     */
+    zoom(factor) {
+        let canvas = this._fc;
+        let objects = canvas.getObjects();
+        for (let i in objects) {
+            objects[i].scaleX = objects[i].scaleX * factor;
+            objects[i].scaleY = objects[i].scaleY * factor;
+            objects[i].left = objects[i].left * factor;
+            objects[i].top = objects[i].top * factor;
+            objects[i].setCoords();
+        }
+        canvas.renderAll();
+        canvas.calcOffset();
+    }
+
+
     /**
      * Perform an undo operation on canvas, if it cannot undo it will leave the canvas intact
      */