feat(MoveCanvas): make canvas draggable

Closes #34

lib/Viewer.js

@@ -10,7 +10,9 @@ var Importer = require('./import/Importer'),
 var bpmnModule = require('./di').defaultModule;
 
 require('./draw/BpmnRenderer');
-require('./feature/zoomscroll/Service');
+
+require('./feature/zoomscroll');
+require('./feature/movecanvas');
 
 require('diagram-js/lib/features/selection/Visuals');
 
@@ -164,7 +166,7 @@ Viewer.prototype.createDiagram = function() {
   return new Diagram({
     canvas: { container: this.container },
     modules: [ bpmnModule ],
-    components: [ 'selectionVisuals', 'zoomScroll' ]
+    components: [ 'selectionVisuals', 'zoomScroll', 'moveCanvas' ]
   });
 };
 

lib/feature/movecanvas/index.js

@@ -0,0 +1,106 @@
+var $ = require('jquery');
+
+var bpmnModule = require('../../di').defaultModule;
+
+
+function MoveCanvas(events, canvas) {
+  
+  var THRESHOLD = 20;
+
+  function init(element) {
+
+    var context;
+
+    function getPosition(e) {
+      return { x: e.clientX, y: e.clientY };
+    }
+
+    function getDelta(p1, p2) {
+      return {
+        x: p1.x - p2.x,
+        y: p1.y - p2.y
+      };
+    }
+
+    function isThresholdReached(delta) {
+      return Math.abs(delta.x) > THRESHOLD || Math.abs(delta.y) > THRESHOLD;
+    }
+
+    function cursor(value) {
+      var current = document.body.style.cursor || '';
+
+      if (value !== undefined) {
+        document.body.style.cursor = value;
+      }
+
+      return current;
+    }
+
+    function handleMove(event) {
+
+      var position = getPosition(event);
+
+      var delta = getDelta(context.start, position);
+
+      if (!context.dragging && isThresholdReached(delta)) {
+        context.dragging = true;
+
+        context.cursor = cursor('move');
+      }
+
+      if (context.dragging) {
+
+        var box = context.viewbox;
+
+        canvas.viewbox({
+          x: box.x + delta.x / box.scale,
+          y: box.y + delta.y / box.scale,
+          width: box.width,
+          height: box.height
+        });
+      }
+
+      // prevent select
+      event.preventDefault();
+    }
+
+    function handleEnd(event) {
+      $(element).off('mousemove', handleMove);
+      $(document).off('mouseup', handleEnd);
+
+      if (context) {
+        cursor(context.cursor);
+      }
+
+      // prevent select
+      event.preventDefault();
+    }
+
+    function handleStart(event) {
+
+      var position = getPosition(event);
+
+      context = {
+        viewbox: canvas.viewbox(),
+        start: position
+      };
+
+      $(element).on('mousemove', handleMove);
+      $(document).on('mouseup', handleEnd);
+
+      // prevent select
+      event.preventDefault();
+    }
+
+    $(element).on('mousedown', handleStart);
+  }
+
+  events.on('canvas.init', function(e) {
+    init(e.paper.node);
+  });
+}
+
+
+bpmnModule.type('moveCanvas', [ 'eventBus', 'canvas', MoveCanvas ]);
+
+module.exports = MoveCanvas;