feat(space-tool): add create/remove space behaviour

closes #132

CONTRIBUTING.md

@@ -6,7 +6,7 @@ We love you to contribute to this project by filing bugs, helping others on the
 ## Creating issues
 
 We use our [issue tracker](https://github.com/bpmn-io/bpmn-js/issues) for project communication.
-When using the issue tracker,
+When using the issue tracker:
 
 * Be descriptive when creating an issue (what, where, when and how does a problem pop up)?
 * Attach steps to reproduce (if applicable)

lib/Modeler.js

@@ -68,6 +68,7 @@ Modeler.prototype._modelingModules = [
   require('diagram-js/lib/features/move'),
   require('diagram-js/lib/features/bendpoints'),
   require('diagram-js/lib/features/resize'),
+  require('diagram-js/lib/features/space-tool'),
   require('diagram-js/lib/features/lasso-tool'),
   require('./features/modeling'),
   require('./features/context-pad'),

lib/features/palette/PaletteProvider.js

@@ -5,24 +5,26 @@ var assign = require('lodash/object/assign');
 /**
  * A palette provider for BPMN 2.0 elements.
  */
-function PaletteProvider(palette, create, elementFactory) {
+function PaletteProvider(palette, create, elementFactory, spaceTool) {
 
   this._create = create;
   this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
 
   palette.registerProvider(this);
 }
 
 module.exports = PaletteProvider;
 
-PaletteProvider.$inject = [ 'palette', 'create', 'elementFactory' ];
+PaletteProvider.$inject = [ 'palette', 'create', 'elementFactory', 'spaceTool' ];
 
 
 PaletteProvider.prototype.getPaletteEntries = function(element) {
 
   var actions  = {},
       create = this._create,
-      elementFactory = this._elementFactory;
+      elementFactory = this._elementFactory,
+      spaceTool = this._spaceTool;
 
 
   function createAction(type, group, className, title, options) {
@@ -52,8 +54,17 @@ PaletteProvider.prototype.getPaletteEntries = function(element) {
     create.start(event, elementFactory.createParticipantShape(collapsed));
   }
 
-
   assign(actions, {
+    'space-tool': {
+      group: 'tool',
+      className: 'icon-edit-space-tool',
+      title: 'Create/remove space on the diagram',
+      action: {
+        click: function(event) {
+          spaceTool.activateSelection(event);
+        }
+      }
+    },
     'create.start-event': createAction(
       'bpmn:StartEvent', 'event', 'icon-start-event-none'
     ),

test/spec/features/modeling/SpaceToolSpec.js

@@ -0,0 +1,225 @@
+'use strict';
+
+var Matchers = require('../../../Matchers'),
+    TestHelper = require('../../../TestHelper');
+
+/* global bootstrapModeler, inject */
+
+
+var modelingModule = require('../../../../lib/features/modeling'),
+    coreModule = require('../../../../lib/core');
+
+
+describe('features/modeling - create/remove space', function() {
+
+  beforeEach(Matchers.addDeepEquals);
+
+
+  var diagramXML = require('../../../fixtures/bpmn/simple.bpmn');
+
+  var testModules = [ coreModule, modelingModule ];
+
+  beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+
+  describe('create space', function() {
+
+
+    it('should create space to the right', inject(function(elementRegistry, modeling) {
+
+      // given
+      var sequenceFlowElement = elementRegistry.get('SequenceFlow_3'),
+          sequenceFlow = sequenceFlowElement.businessObject;
+
+      var subProcessElement = elementRegistry.get('SubProcess_1'),
+          subProcess = subProcessElement.businessObject;
+
+      var endEventElement = elementRegistry.get('EndEvent_1'),
+          endEvent = endEventElement.businessObject;
+
+
+      var subProcOldPos = {
+        x: subProcessElement.x,
+        y: subProcessElement.y
+      };
+
+      var endEventOldPos = {
+        x: endEventElement.x,
+        y: endEventElement.y
+      };
+
+      var delta = { x: 50, y: 0 },
+          direction = 'e';
+
+      // when
+      modeling.createSpace([subProcessElement, endEventElement], [], delta, direction);
+
+      // then
+      expect(subProcess.di.bounds.x).toBe(subProcOldPos.x + 50);
+      expect(subProcess.di.bounds.y).toBe(subProcOldPos.y);
+
+      expect(endEvent.di.bounds.x).toBe(endEventOldPos.x + 50);
+      expect(endEvent.di.bounds.y).toBe(endEventOldPos.y);
+
+      expect(sequenceFlow.di.waypoint).toDeepEqual([
+        { $type: 'dc:Point', x: 144, y: 230 },
+        { $type: 'dc:Point', x: 350, y: 230 },
+      ]);
+    }));
+
+
+    it('should create space downwards', inject(function(elementRegistry, modeling) {
+      
+      // given
+      var startEventElement = elementRegistry.get('StartEvent_2'),
+          startEvent = startEventElement.businessObject;
+
+      var sequenceFlowElement = elementRegistry.get('SequenceFlow_3'),
+          sequenceFlow = sequenceFlowElement.businessObject;
+
+      var subProcessElement = elementRegistry.get('SubProcess_1'),
+          subProcess = subProcessElement.businessObject;
+
+      var endEventElement = elementRegistry.get('EndEvent_1'),
+          endEvent = endEventElement.businessObject;
+
+      var startEventOldPos = {
+        x: startEventElement.x,
+        y: startEventElement.y
+      };
+
+      var subProcOldPos = {
+        x: subProcessElement.x,
+        y: subProcessElement.y
+      };
+
+      var endEventOldPos = {
+        x: endEventElement.x,
+        y: endEventElement.y
+      };
+
+      var delta = { x: 0, y: 50 },
+          direction = 's';
+
+      // when
+      modeling.createSpace([startEventElement ,subProcessElement, endEventElement], [], delta, direction);
+
+      // then
+      expect(startEvent.di.bounds.x).toBe(startEventOldPos.x);
+      expect(startEvent.di.bounds.y).toBe(startEventOldPos.y + 50);
+
+      expect(subProcess.di.bounds.x).toBe(subProcOldPos.x);
+      expect(subProcess.di.bounds.y).toBe(subProcOldPos.y + 50);
+
+      expect(endEvent.di.bounds.x).toBe(endEventOldPos.x);
+      expect(endEvent.di.bounds.y).toBe(endEventOldPos.y + 50);
+
+      expect(sequenceFlow.di.waypoint).toDeepEqual([
+        { $type: 'dc:Point', x: 144, y: 280 },
+        { $type: 'dc:Point', x: 300, y: 280 },
+      ]);
+    }));
+
+
+    it('should remove space to the left', inject(function(elementRegistry, modeling) {
+      
+      // given
+      var sequenceFlowElement = elementRegistry.get('SequenceFlow_3'),
+          sequenceFlow = sequenceFlowElement.businessObject;
+
+      var subProcessElement = elementRegistry.get('SubProcess_1'),
+          subProcess = subProcessElement.businessObject;
+
+      var endEventElement = elementRegistry.get('EndEvent_1'),
+          endEvent = endEventElement.businessObject;
+
+      var subProcOldPos = {
+        x: subProcessElement.x,
+        y: subProcessElement.y
+      };
+
+      var endEventOldPos = {
+        x: endEventElement.x,
+        y: endEventElement.y
+      };
+
+      var delta = { x: -50, y: 0 },
+          direction = 'w';
+
+      // when
+      modeling.createSpace([subProcessElement, endEventElement], [], delta, direction);
+
+      // then
+      expect(subProcess.di.bounds.x).toBe(subProcOldPos.x - 50);
+      expect(subProcess.di.bounds.y).toBe(subProcOldPos.y);
+
+      expect(endEvent.di.bounds.x).toBe(endEventOldPos.x - 50);
+      expect(endEvent.di.bounds.y).toBe(endEventOldPos.y);
+
+      expect(sequenceFlow.di.waypoint).toDeepEqual([
+        { $type: 'dc:Point', x: 144, y: 230 },
+        { $type: 'dc:Point', x: 250, y: 230 },
+      ]);
+    }));
+
+
+    it('should resize to the right', inject(function(elementRegistry, modeling) {
+      
+      // given
+      var taskElement = elementRegistry.get('Task_1'),
+          task = taskElement.businessObject;
+
+      var subProcessElement = elementRegistry.get('SubProcess_1'),
+          subProcess = subProcessElement.businessObject;
+
+      var startEventElement = elementRegistry.get('StartEvent_1'),
+          startEvent = startEventElement.businessObject;
+
+      var startEventElement2 = elementRegistry.get('StartEvent_2'),
+          startEvent2 = startEventElement2.businessObject;
+
+      var subProcOldPos = {
+        x: subProcessElement.x,
+        y: subProcessElement.y,
+        width: subProcessElement.width,
+        height: subProcessElement.height
+      };
+
+      var startEventOldPos2 = {
+        x: startEventElement2.x,
+        y: startEventElement2.y
+      };
+
+      var startEventOldPos = {
+        x: startEventElement.x,
+        y: startEventElement.y
+      };
+
+      var taskOldPos = {
+        x: taskElement.x,
+        y: taskElement.y
+      };
+
+      var delta = { x: 50, y: 0 },
+          direction = 'w';
+
+      // when
+      modeling.createSpace([startEventElement, startEventElement2, taskElement], [subProcessElement], delta, direction);
+
+      // then
+      expect(subProcess.di.bounds.x).toBe(subProcOldPos.x + 50);
+      expect(subProcess.di.bounds.y).toBe(subProcOldPos.y);
+      expect(subProcess.di.bounds.width).toBe(subProcOldPos.width - 50);
+      expect(subProcess.di.bounds.height).toBe(subProcOldPos.height);
+
+      expect(startEvent.di.bounds.x).toBe(startEventOldPos.x + 50);
+      expect(startEvent.di.bounds.y).toBe(startEventOldPos.y);
+
+      expect(startEvent2.di.bounds.x).toBe(startEventOldPos2.x + 50);
+      expect(startEvent2.di.bounds.y).toBe(startEventOldPos2.y);
+
+      expect(task.di.bounds.x).toBe(taskOldPos.x + 50);
+      expect(task.di.bounds.y).toBe(taskOldPos.y);
+    }));
+  });
+});

test/spec/features/palette/PaletteProviderSpec.js

@@ -32,7 +32,7 @@ describe('palette', function() {
       var paletteElement = domQuery('.djs-palette', container);
 
       // then
-      expect(domQuery.all('.entry', paletteElement).length).toBe(8);
+      expect(domQuery.all('.entry', paletteElement).length).toBe(9);
 
       done(err);
     });