WIP

lib/features/context-pad/ContextPadProvider.js

@@ -1,7 +1,8 @@
 import {
   assign,
   forEach,
-  isArray
+  isArray,
+  every
 } from 'min-dash';
 
 import {
@@ -27,13 +28,13 @@ import {
 
 
 /**
- * A provider for BPMN 2.0 elements context pad
+ * A provider for BPMN 2.0 elements context pad.
  */
 export default function ContextPadProvider(
     config, injector, eventBus,
     contextPad, modeling, elementFactory,
     connect, create, popupMenu,
-    canvas, rules, translate) {
+    canvas, rules, translate, editorActions) {
 
   config = config || {};
 
@@ -50,6 +51,7 @@ export default function ContextPadProvider(
   this._canvas = canvas;
   this._rules = rules;
   this._translate = translate;
+  this._editorActions = editorActions;
 
   if (config.autoPlace !== false) {
     this._autoPlace = injector.get('autoPlace', false);
@@ -82,12 +84,45 @@ ContextPadProvider.$inject = [
   'popupMenu',
   'canvas',
   'rules',
-  'translate'
+  'translate',
+  'editorActions'
 ];
 
+ContextPadProvider.prototype.getContextPadEntries = function(elements) {
+  var self = this;
 
-ContextPadProvider.prototype.getContextPadEntries = function(element) {
+  if (elements.length > 1) {
+    var allowed = this._rules.allowed('elements.delete', { elements: elements });
 
+    if (isArray(allowed)) {
+      if (!every(allowed, function(element) {
+        return includes(allowed, element);
+      })) {
+        return {};
+      }
+    }
+
+    if (allowed) {
+      return {
+        'delete': {
+          group: 'edit',
+          className: 'bpmn-icon-trash',
+          title: this._translate('Remove'),
+          action: {
+            click() {
+              self._editorActions.trigger('removeSelection');
+            }
+          }
+        }
+      };
+    }
+  }
+
+  return this._getContextPadEntries(elements[0]);
+};
+
+
+ContextPadProvider.prototype._getContextPadEntries = function(element) {
   var contextPad = this._contextPad,
       modeling = this._modeling,
 
@@ -155,19 +190,27 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
     }
 
-    function appendStart(event, element) {
+    function appendStart(event, elements) {
+      if (elements.length !== 1) {
+        return;
+      }
 
       var shape = elementFactory.createShape(assign({ type: type }, options));
+
       create.start(event, shape, {
-        source: element
+        source: elements[0]
       });
     }
 
 
-    var append = autoPlace ? function(event, element) {
+    var append = autoPlace ? function(event, elements) {
+      if (elements.length !== 1) {
+        return;
+      }
+
       var shape = elementFactory.createShape(assign({ type: type }, options));
 
-      autoPlace.append(element, shape);
+      autoPlace.append(elements[0], shape);
     } : appendStart;
 
 
@@ -184,14 +227,17 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
 
   function splitLaneHandler(count) {
 
-    return function(event, element) {
+    return function(event, elements) {
+      if (elements.length !== 1) {
+        return;
+      }
 
       // actual split
-      modeling.splitLane(element, count);
+      modeling.splitLane(elements[0], count);
 
       // refresh context pad after split to
       // get rid of split icons
-      contextPad.open(element, true);
+      contextPad.open(elements[0], true);
     };
   }
 
@@ -206,8 +252,12 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         className: 'bpmn-icon-lane-insert-above',
         title: translate('Add Lane above'),
         action: {
-          click: function(event, element) {
-            modeling.addLane(element, 'top');
+          click: function(event, elements) {
+            if (elements.length !== 1) {
+              return;
+            }
+
+            modeling.addLane(elements[0], 'top');
           }
         }
       }
@@ -248,8 +298,12 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         className: 'bpmn-icon-lane-insert-below',
         title: translate('Add Lane below'),
         action: {
-          click: function(event, element) {
-            modeling.addLane(element, 'bottom');
+          click: function(event, elements) {
+            if (elements.length !== 1) {
+              return;
+            }
+
+            modeling.addLane(elements[0], 'bottom');
           }
         }
       }
@@ -347,13 +401,16 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
         className: 'bpmn-icon-screw-wrench',
         title: translate('Change type'),
         action: {
-          click: function(event, element) {
+          click: function(event, elements) {
+            if (elements.length !== 1) {
+              return;
+            }
 
-            var position = assign(getReplaceMenuPosition(element), {
+            var position = assign(getReplaceMenuPosition(elements[0]), {
               cursor: { x: event.x, y: event.y }
             });
 
-            popupMenu.open(element, 'bpmn-replace', position);
+            popupMenu.open(elements[0], 'bpmn-replace', position);
           }
         }
       }
@@ -437,3 +494,7 @@ function isEventType(eventBo, type, definition) {
 
   return isType && isDefinition;
 }
+
+function includes(array, item) {
+  return array.indexOf(item) !== -1;
+}

lib/features/context-pad/index.js

@@ -4,6 +4,7 @@ import SelectionModule from 'diagram-js/lib/features/selection';
 import ConnectModule from 'diagram-js/lib/features/connect';
 import CreateModule from 'diagram-js/lib/features/create';
 import PopupMenuModule from '../popup-menu';
+import EditorActionsModule from '../editor-actions';
 
 import ContextPadProvider from './ContextPadProvider';
 
@@ -14,7 +15,8 @@ export default {
     SelectionModule,
     ConnectModule,
     CreateModule,
-    PopupMenuModule
+    PopupMenuModule,
+    EditorActionsModule
   ],
   __init__: [ 'contextPadProvider' ],
   contextPadProvider: [ 'type', ContextPadProvider ]

test/spec/ModelerSpec.js

@@ -43,7 +43,7 @@ describe('Modeler', function() {
   }
 
 
-  it('should import simple process', function(done) {
+  it.only('should import simple process', function(done) {
     var xml = require('../fixtures/bpmn/simple.bpmn');
     createModeler(xml, done);
   });