Added a Pan Tool

examples/main.jsx

@@ -348,6 +348,7 @@ class SketchFieldDemo extends React.Component {
                                         <MenuItem value={Tools.Line} primaryText="Line"/>
                                         <MenuItem value={Tools.Rectangle} primaryText="Rectangle"/>
                                         <MenuItem value={Tools.Circle} primaryText="Circle"/>
+                                        <MenuItem value={Tools.Pan} primaryText="Pan"/>
                                     </SelectField>
                                     <br/>
                                     <br/>

src/SketchField.jsx

@@ -11,6 +11,7 @@ import Pencil from './pencil';
 import Line from './line';
 import Rectangle from './rectangle';
 import Circle from './circle';
+import Pan from './pan';
 import Tool from './tools';
 
 const fabric = require('fabric').fabric;
@@ -149,6 +150,7 @@ class SketchField extends Component {
         this._tools[Tool.Line] = new Line(fabricCanvas);
         this._tools[Tool.Rectangle] = new Rectangle(fabricCanvas);
         this._tools[Tool.Circle] = new Circle(fabricCanvas);
+        this._tools[Tool.Pan] = new Pan(fabricCanvas);
     }
 
     componentWillUnmount() {
@@ -168,10 +170,15 @@ class SketchField extends Component {
         if (this.props.tool !== nextProps.tool) {
             this._selectedTool = this._tools[nextProps.tool] || this._tools[Tool.Pencil];
         }
+
+        //Bring the cursor back to default if it is changed by a tool
+        this._fc.defaultCursor = 'default';
+
         this._selectedTool.configureCanvas(nextProps);
         if (this.props.backgroundColor !== nextProps.backgroundColor) {
             this._backgroundColor(nextProps.backgroundColor)
         }
+
     }
 
     /**

src/pan.js

@@ -0,0 +1,41 @@
+/*eslint no-unused-vars: 0*/
+'use strict';
+
+import FabricCanvasTool from './fabrictool'
+const fabric = require('fabric').fabric;
+
+class Pan extends FabricCanvasTool {
+
+    configureCanvas(props) {
+        let canvas = this._canvas;
+        canvas.isDrawingMode = canvas.selection = false;
+        canvas.forEachObject((o) => o.selectable = o.evented = false);
+        //Change the cursor to the move grabber
+        canvas.defaultCursor = 'move';
+    }
+
+    doMouseDown(o) {
+        let canvas = this._canvas;
+        this.isDown = true;
+        let pointer = canvas.getPointer(o.e);
+        this.startX = pointer.x;
+        this.startY = pointer.y;
+    }
+
+    doMouseMove(o) {
+        if (!this.isDown) return;
+        let canvas = this._canvas;
+        let pointer = canvas.getPointer(o.e);
+
+        canvas.relativePan({ x : pointer.x - this.startX,
+                            y : pointer.y - this.startY});
+        canvas.renderAll();
+    }
+
+    doMouseUp(o) {
+        this.isDown = false;
+    }
+
+}
+
+export default Pan;

src/tools.js

@@ -5,5 +5,6 @@ export default {
     Line: 'line',
     Pencil: 'pencil',
     Rectangle: 'rectangle',
-    Select: 'select'
+    Select: 'select',
+    Pan: 'pan'
 }