feat(feature/bpmn-modeling): append task via context-pad

Related to #6, #40

lib/Modeler.js

@@ -49,7 +49,8 @@ Modeler.prototype._modules = Modeler.prototype._modules.concat([
   require('./features/label-editing'),
   require('./features/zoomscroll'),
   require('./features/touch'),
-  require('./features/movecanvas')
+  require('./features/movecanvas'),
+  require('./features/context-pad')
 ]);
 
 

lib/features/bpmn-modeling/BpmnFactory.js

@@ -37,7 +37,7 @@ BpmnFactory.prototype.createDiShape = function(semantic, position, attrs) {
   if (semantic.$instanceOf('bpmn:Task')) {
     bounds = { width: 100, height: 80 };
   } else {
-    bounds = { width: 50, height: 50 };
+    bounds = { width: 36, height: 36 };
   }
 
   _.extend(bounds, {

lib/features/bpmn-modeling/LayoutUtil.js

@@ -9,7 +9,14 @@ var getMidPoint = module.exports.getMidPoint = function(bounds) {
 
 module.exports.getDirectConnectionPoints = function(boundsA, boundsB) {
   return [
-    getMidPoint(boundsA),
-    getMidPoint(boundsB)
+    // workaround until we can compute the extend of an element
+    {
+      x: boundsA.x + boundsA.width,
+      y: boundsA.y + boundsA.height / 2
+    },
+    {
+      x: boundsB.x,
+      y: boundsB.y + boundsB.height / 2
+    }
   ];
 };

lib/features/context-pad/ContextPadProvider.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var fs = require('fs');
+
+var _ = require('lodash');
+
+
+/* jshint -W101 */
+
+var images = {
+  EVENT: 'iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANNJREFUeNq0VIsNwiAQpV3AbuAIOAobMBsTwAZ0AxyhTgBOcN5TmlSsWiy+5CXA3Xs5PkdHROKf0EzPpII+x56AYrpi7ch0zJPWWiilxDAM90BKSTjnhDEG0zNTMS+zUWkSpZQUQqB3QAw5yM2aF6OAhBgjfQNyslkojbDvj5WsVZbPTS+NPJ8J1QIaaJdGZK2tNoLmsTMSPQ8OcJpvpwZLTb+2+AtgdMVgmqZqMd5WWdGIx1aLrBnLlmhy/c0e5O4W2dS0IC5ja9Pu+0ZafWw3AQYAuebLigXf9OoAAAAASUVORK5CYII=',
+  GATEWAY: 'iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAG1JREFUeNqs1MsJACEMBFC1gfR/sqSUlEXZFVEzcWEG5vrAT5LNLFFyAdW32AigKiLWirAI6oiq9iIMQQP5gjAP2pAIO0EugrAVChEPm6Fr5IQ1oyRW2EejXjb1+akfkjoi1KH9tUYya7E9AgwA8H6jTs2UBDgAAAAASUVORK5CYII=',
+  TASK: 'iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALBJREFUeNpi/P//PwM1ABMDlQALiGBkZARR/ECcAMQCROr9AMQLgPgjyFeMYAJi0Hl+fn4DICDKlAsXLjB8/PjxApBpCA4eaBjFA/H/8+fP/ycWgNSC9ID0IhtUb29v/59UANID0gsyAx7YDg4OJAcwsh6qxdqoQSQYBEpgpIIDBw6AKAUwh1oJEiOLgNIGoWzy4MEDhg0bNqBkEWSDYJk2gAhfPQCFBkamHVSxBhBgAH1c5Gm2siu5AAAAAElFTkSuQmCC',
+  TRASH: 'iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQtJREFUeNqsVNENgyAQBeM/3aCM4AZlBDagG3QFR3AENygbYCeoTlBG0AksR8QgAbGNl7xEAu+9O84Dz/OMTgkQSogJ2I7gGuUHQnDoZvAw+CSEnosJnCMxIZIg7uHt+KWX5cWg/veKsCsLY+xK44toLrSBNPwJFmWweSeE1FVV7SqM44iGYYBPZvCKdU0YoTkXSil3Ryu/CNOdJpsp4pwjKeVms2kai1gUqfShvL7vty5a27KOCI2OEAsQZoyhruvsck9o8IVS7r5ptjRwDkvbEy5S7Y0FtNwz0DmhDg5SSlH4PwkhfCN9qDQQClvdtu1Pz4g6OLAPnx/Omps3emDW4KKmlX/WC/kVYACiNOUTeEjwagAAAABJRU5ErkJggg=='
+};
+
+/* jshint +W101 */
+
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ *
+ * @param {ContextPad} contextPad
+ */
+function ContextPadProvider(contextPad, directEditing, bpmnModeling) {
+
+  contextPad.registerProvider(this);
+
+  this._directEditing = directEditing;
+  this._bpmnModeling = bpmnModeling;
+}
+
+ContextPadProvider.$inject = [ 'contextPad', 'directEditing', 'bpmnModeling' ];
+
+
+ContextPadProvider.prototype.getContextPadEntries = function(element) {
+
+  var directEditing = this._directEditing,
+      bpmnModeling = this._bpmnModeling;
+
+  var actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  var bpmnElement = element.businessObject;
+
+  function append(element, type) {
+    var target = bpmnModeling.appendFlowNode(element, null, type);
+    directEditing.activate(target);
+  }
+
+  if (bpmnElement.$instanceOf('bpmn:FlowNode') &&
+      !bpmnElement.$instanceOf('bpmn:EndEvent')) {
+
+    _.extend(actions, {
+      'action.model-event': {
+        imageUrl: 'data:image/png;base64,' + images.EVENT,
+        action: function(e) {
+          append(element, 'bpmn:EndEvent');
+        }
+      },
+      /*
+      'action.model-gateway': {
+        imageUrl: 'data:image/png;base64,' + images.GATEWAY,
+        action: function(e) {
+          append(element, 'bpmn:Gateway');
+        }
+      },
+      */
+      'action.model-task': {
+        imageUrl: 'data:image/png;base64,' + images.TASK,
+        action: function(e) {
+          append(element, 'bpmn:Task');
+        }
+      }
+    });
+
+  }
+
+  /*
+  _.extend(actions,  {
+    'action.delete': {
+      imageUrl: 'data:image/png;base64,' + images.TRASH,
+      action: function(e) {
+        console.log('action.delete', e);
+      }
+    }
+  });
+  */
+
+  return actions;
+};
+
+
+module.exports = ContextPadProvider;

lib/features/context-pad/index.js

@@ -0,0 +1,9 @@
+module.exports = {
+  __depends__: [
+    require('diagram-js/lib/features/context-pad'),
+    require('diagram-js-direct-editing'),
+    require('../bpmn-modeling')
+  ],
+  __init__: [ 'contextPadProvider' ],
+  contextPadProvider: [ 'type', require('./ContextPadProvider') ]
+};

test/config/karma.unit.js

@@ -6,13 +6,15 @@ module.exports = function(karma) {
     frameworks: [ 'browserify', 'jasmine' ],
 
     files: [
-      'test/spec/browser/**/*Spec.js'
+      'test/spec/browser/**/*Spec.js',
+      'test/spec/integration/**/*Spec.js'
     ],
 
     reporters: [ 'dots' ],
 
     preprocessors: {
-      'test/spec/browser/**/*Spec.js': [ 'browserify' ]
+      'test/spec/browser/**/*Spec.js': [ 'browserify' ],
+      'test/spec/integration/**/*Spec.js': [ 'browserify' ]
     },
 
     browsers: [ 'PhantomJS' ],

test/spec/browser/features/context-pad/ContextPadProviderSpec.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var Matchers = require('../../../Matchers'),
+    TestHelper = require('../../../TestHelper');
+
+/* global bootstrapBpmnJS, inject */
+
+
+var fs = require('fs');
+
+var contextPadModule = require('../../../../../lib/features/context-pad'),
+    bpmnModule = require('../../../../../lib/draw');
+
+
+describe('features - context-pad', function() {
+
+  beforeEach(Matchers.add);
+
+
+  var diagramXML = fs.readFileSync('test/fixtures/bpmn/complex.bpmn', 'utf-8');
+
+  var testModules = [ contextPadModule, bpmnModule ];
+
+  beforeEach(bootstrapBpmnJS(diagramXML, { modules: testModules }));
+
+
+  describe('bootstrap', function() {
+
+    it('should bootstrap', inject(function(contextPadProvider) {
+      expect(contextPadProvider).toBeDefined();
+    }));
+
+  });
+
+});

test/spec/browser/features/touch/TouchInteractionSpec.js

@@ -8,8 +8,6 @@ var Matchers = require('../../../Matchers'),
 
 var fs = require('fs');
 
-var $ = require('jquery');
-
 
 var touchModule = require('../../../../../lib/features/touch'),
     bpmnModule = require('../../../../../lib/draw');

test/spec/integration/SimpleModelingSpec.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var Matchers = require('../Matchers'),
+    TestHelper = require('../TestHelper');
+
+
+var fs = require('fs');
+
+var Modeler = require('../../../lib/Modeler');
+
+
+describe('scenario - simple modeling', function() {
+
+
+  var container;
+
+  beforeEach(function() {
+    container = jasmine.getEnv().getTestContainer();
+  });
+
+
+  it('should build process from start to end event', function(done) {
+
+    // given
+    var modeler = new Modeler({ container: container });
+
+    // when
+    modeler.createDiagram(function(err) {
+
+      done(err);
+    });
+  });
+
+});