feat(hand-tool): add hand-tool

Closes #412

lib/Modeler.js

@@ -135,6 +135,7 @@ Modeler.prototype._modelingModules = [
   require('diagram-js/lib/features/resize'),
   require('diagram-js/lib/features/space-tool'),
   require('diagram-js/lib/features/lasso-tool'),
+  require('diagram-js/lib/features/hand-tool'),
   require('./features/keyboard'),
   require('./features/snapping'),
   require('./features/modeling'),

lib/features/keyboard/BpmnKeyBindings.js

@@ -1,6 +1,6 @@
 'use strict';
 
-function BpmnKeyBindings(keyboard, spaceTool, lassoTool, directEditing,
+function BpmnKeyBindings(keyboard, spaceTool, lassoTool, handTool, directEditing,
   selection, canvas, elementRegistry, editorActions) {
 
   var actions = {
@@ -21,6 +21,9 @@ function BpmnKeyBindings(keyboard, spaceTool, lassoTool, directEditing,
     lassoTool: function() {
       lassoTool.activateSelection();
     },
+    handTool: function() {
+      handTool.activateHand();
+    },
     directEditing: function() {
       var currentSelection = selection.get();
 
@@ -59,6 +62,13 @@ function BpmnKeyBindings(keyboard, spaceTool, lassoTool, directEditing,
       return true;
     }
 
+    // h -> activate hand tool
+    if (key === 72) {
+      editorActions.trigger('handTool');
+
+      return true;
+    }
+
     // e -> activate direct editing
     if (key === 69) {
       editorActions.trigger('directEditing');
@@ -72,6 +82,7 @@ BpmnKeyBindings.$inject = [
   'keyboard',
   'spaceTool',
   'lassoTool',
+  'handTool',
   'directEditing',
   'selection',
   'canvas',

lib/features/palette/PaletteProvider.js

@@ -5,19 +5,28 @@ var assign = require('lodash/object/assign');
 /**
  * A palette provider for BPMN 2.0 elements.
  */
-function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool) {
+function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool) {
 
+  this._palette = palette;
   this._create = create;
   this._elementFactory = elementFactory;
   this._spaceTool = spaceTool;
   this._lassoTool = lassoTool;
+  this._handTool = handTool;
 
   palette.registerProvider(this);
 }
 
 module.exports = PaletteProvider;
 
-PaletteProvider.$inject = [ 'palette', 'create', 'elementFactory', 'spaceTool', 'lassoTool' ];
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool'
+];
 
 
 PaletteProvider.prototype.getPaletteEntries = function(element) {
@@ -26,8 +35,8 @@ PaletteProvider.prototype.getPaletteEntries = function(element) {
       create = this._create,
       elementFactory = this._elementFactory,
       spaceTool = this._spaceTool,
-      lassoTool = this._lassoTool;
-
+      lassoTool = this._lassoTool,
+      handTool = this._handTool;
 
   function createAction(type, group, className, title, options) {
 
@@ -79,6 +88,16 @@ PaletteProvider.prototype.getPaletteEntries = function(element) {
         }
       }
     },
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: 'Activate the hand tool',
+      action: {
+        click: function(event) {
+          handTool.activateHand(event);
+        }
+      }
+    },
     'tool-separator': {
       group: 'tools',
       separator: true

lib/features/palette/index.js

@@ -3,7 +3,8 @@ module.exports = {
     require('diagram-js/lib/features/palette'),
     require('diagram-js/lib/features/create'),
     require('diagram-js/lib/features/space-tool'),
-    require('diagram-js/lib/features/lasso-tool')
+    require('diagram-js/lib/features/lasso-tool'),
+    require('diagram-js/lib/features/hand-tool')
   ],
   __init__: [ 'paletteProvider' ],
   paletteProvider: [ 'type', require('./PaletteProvider') ]

test/spec/features/keyboard/BpmnKeyBindingsSpec.js

@@ -10,6 +10,7 @@ var coreModule = require('../../../../lib/core'),
     selectionModule = require('diagram-js/lib/features/selection'),
     spaceToolModule = require('diagram-js/lib/features/space-tool'),
     lassoToolModule = require('diagram-js/lib/features/lasso-tool'),
+    handToolModule = require('diagram-js/lib/features/hand-tool'),
     zoomScrollModule = require('diagram-js/lib/navigation/zoomscroll'),
     editorActionsModule = require('diagram-js/lib/features/editor-actions');
 
@@ -27,6 +28,7 @@ describe('features - keyboard', function() {
     selectionModule,
     spaceToolModule,
     lassoToolModule,
+    handToolModule,
     keyboardModule,
     zoomScrollModule,
     editorActionsModule
@@ -44,7 +46,7 @@ describe('features - keyboard', function() {
 
     it('should include triggers inside editorActions', inject(function(editorActions) {
       // then
-      expect(editorActions.length()).to.equal(10);
+      expect(editorActions.length()).to.equal(11);
     }));
 
 

test/spec/features/palette/PaletteProviderSpec.js

@@ -27,7 +27,7 @@ describe('features/palette', function() {
     var entries = domQuery.all('.entry', paletteElement);
 
     // then
-    expect(entries.length).to.equal(10);
+    expect(entries.length).to.equal(11);
   }));
 
 });