feat(zoomscroll): add zoom scroll util

We can now zoom / scroll the diagram via the newly created zoomScroll
service.

Closes #14

lib/Modeler.js

@@ -4,6 +4,7 @@ var bpmnModule = require('./di').defaultModule,
     Viewer = require('./Viewer');
 
 require('./draw/BpmnRenderer');
+require('./feature/zoomscroll/Service');
 
 require('diagram-js/lib/features/dnd/Visuals');
 require('diagram-js/lib/features/selection/Visuals');
@@ -27,7 +28,7 @@ Modeler.prototype.createDiagram = function() {
   return new Diagram({
     canvas: { container: this.container },
     modules: [ bpmnModule ],
-    components: [ 'selectionVisuals', 'dragVisuals' ]
+    components: [ 'selectionVisuals', 'dragVisuals', 'zoomScroll' ]
   });
 };
 

lib/Viewer.js

@@ -10,6 +10,8 @@ var Importer = require('./import/Importer'),
 var bpmnModule = require('./di').defaultModule;
 
 require('./draw/BpmnRenderer');
+require('./feature/zoomscroll/Service');
+
 require('diagram-js/lib/features/selection/Visuals');
 
 
@@ -56,12 +58,11 @@ function Viewer(options) {
 
   var logoData = fs.readFileSync('resources/bpmnjs.png', 'base64');
 
-  var a = $('<a href="http://bpmn.io" target="_blank" title="Powered by bpmn.io" draggable="false" />').css({
+  var a = $('<a href="http://bpmn.io" target="_blank" class="bjs-powered-by" title="Powered by bpmn.io" draggable="false" />').css({
     position: 'absolute',
     bottom: 15,
     right: 15,
-    'z-index': 100,
-    opacity: 0.8
+    zIndex: 100
   });
 
   var logo = $('<img/>').attr('src', 'data:image/png;base64,' + logoData).appendTo(a);
@@ -163,7 +164,7 @@ Viewer.prototype.createDiagram = function() {
   return new Diagram({
     canvas: { container: this.container },
     modules: [ bpmnModule ],
-    components: [ 'selectionVisuals' ]
+    components: [ 'selectionVisuals', 'zoomScroll' ]
   });
 };
 

lib/feature/zoomscroll/Service.js

@@ -0,0 +1,64 @@
+var mousewheel = require('./mousewheel');
+
+var bpmnModule = require('../../di').defaultModule;
+
+function ZoomScroll(events, canvas) {
+
+  var RANGE = { min: 0.2, max: 4 };
+
+  var ZOOM_OFFSET = 5;
+  var SCROLL_OFFSET = 50;
+
+  function cap(scale) {
+    return Math.max(RANGE.min, Math.min(RANGE.max, scale));
+  }
+
+  function zoom(direction, position) {
+
+    var currentZoom = canvas.zoom();
+    var factor = 1 + (direction / ZOOM_OFFSET);
+
+    canvas.zoom(cap(currentZoom * factor), position);
+  }
+
+
+  function initMouseWheel(element) {
+
+    mousewheel(element).on('mousewheel', function(event) {
+
+      var shift = event.shiftKey,
+          ctrl = event.ctrlKey;
+
+      var x = event.deltaX,
+          y = event.deltaY;
+
+      if (shift || ctrl) {
+        var delta = {};
+
+        if (ctrl) {
+          delta.dx = SCROLL_OFFSET * x;
+        } else {
+          delta.dy = SCROLL_OFFSET * x;
+        }
+
+        canvas.scroll(delta);
+      } else {
+        zoom(y, { x: event.offsetX, y: event.offsetY });
+      }
+
+      event.preventDefault();
+    });
+  }
+
+  events.on('canvas.init', function(e) {
+    initMouseWheel(e.paper.node);
+  });
+
+  // API
+  this.zoom = zoom;
+}
+
+
+bpmnModule.type('zoomScroll', [ 'eventBus', 'canvas', ZoomScroll ]);
+
+module.exports = ZoomScroll;

lib/feature/zoomscroll/mousewheel.js

@@ -0,0 +1,8 @@
+var $ = require('jquery');
+
+// init mouse wheel plugin
+require('jquery-mousewheel')($);
+
+module.exports = function(element) {
+  return $(element);
+};

package.json

@@ -66,6 +66,7 @@
   "peerDependencies": {
     "lodash": "~2.4.0",
     "didi": "~0.0.4",
-    "jquery": "~2.1.0"
+    "jquery": "~2.1.0",
+    "jquery-mousewheel": "^3.1.11"
   }
 }