bpmn-js 0.13.1 → 0.14.1

package/lib/features/context-pad/ContextPadProvider.js

@@ -5,6 +5,7 @@ var assign = require('lodash/object/assign'),
     forEach = require('lodash/collection/forEach'),
     isArray = require('lodash/lang/isArray'),
     is = require('../../util/ModelUtil').is,
+    isExpanded = require('../../util/DiUtil').isExpanded,
     isAny = require('../modeling/util/ModelingUtil').isAny,
     getChildLanes = require('../modeling/util/LaneUtil').getChildLanes,
     isEventSubProcess = require('../../util/DiUtil').isEventSubProcess;
@@ -15,7 +16,7 @@ var assign = require('lodash/object/assign'),
  */
 function ContextPadProvider(contextPad, modeling, elementFactory,
                             connect, create, popupMenu,
-                            canvas, rules) {
+                            canvas, rules, translate) {
 
   contextPad.registerProvider(this);
 
@@ -29,6 +30,7 @@ function ContextPadProvider(contextPad, modeling, elementFactory,
   this._popupMenu = popupMenu;
   this._canvas  = canvas;
   this._rules = rules;
+  this._translate = translate;
 }
 
 ContextPadProvider.$inject = [
@@ -39,7 +41,8 @@ ContextPadProvider.$inject = [
   'create',
   'popupMenu',
   'canvas',
-  'rules'
+  'rules',
+  'translate'
 ];
 
 module.exports = ContextPadProvider;
@@ -55,7 +58,9 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       create = this._create,
       popupMenu = this._popupMenu,
       canvas = this._canvas,
-      rules = this._rules;
+      rules = this._rules,
+
+      translate = this._translate;
 
   var actions = {};
 
@@ -109,7 +114,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
 
     if (typeof title !== 'string') {
       options = title;
-      title = 'Append ' + type.replace(/^bpmn\:/, '');
+      title = translate('Append {type}', { type: type.replace(/^bpmn\:/, '') });
     }
 
     function appendListener(event, element) {
@@ -141,7 +146,8 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
     };
   }
 
-  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
+
+  if (isAny(businessObject, [ 'bpmn:Lane', 'bpmn:Participant' ]) && isExpanded(businessObject)) {
 
     var childLanes = getChildLanes(element);
 
@@ -149,7 +155,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'lane-insert-above': {
         group: 'lane-insert-above',
         className: 'bpmn-icon-lane-insert-above',
-        title: 'Add Lane above',
+        title: translate('Add Lane above'),
         action: {
           click: function(event, element) {
             modeling.addLane(element, 'top');
@@ -165,7 +171,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           'lane-divide-two': {
             group: 'lane-divide',
             className: 'bpmn-icon-lane-divide-two',
-            title: 'Divide into two Lanes',
+            title: translate('Divide into two Lanes'),
             action: {
               click: splitLaneHandler(2)
             }
@@ -178,7 +184,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
           'lane-divide-three': {
             group: 'lane-divide',
             className: 'bpmn-icon-lane-divide-three',
-            title: 'Divide into three Lanes',
+            title: translate('Divide into three Lanes'),
             action: {
               click: splitLaneHandler(3)
             }
@@ -191,7 +197,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'lane-insert-below': {
         group: 'lane-insert-below',
         className: 'bpmn-icon-lane-insert-below',
-        title: 'Add Lane below',
+        title: translate('Add Lane below'),
         action: {
           click: function(event, element) {
             modeling.addLane(element, 'bottom');
@@ -227,7 +233,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
 
       assign(actions, {
         'append.compensation-activity':
-            appendAction('bpmn:Task', 'bpmn-icon-task', 'Append compensation activity', {
+            appendAction('bpmn:Task', 'bpmn-icon-task', translate('Append compensation activity'), {
               isForCompensation: true
             })
       });
@@ -261,7 +267,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'replace': {
         group: 'edit',
         className: 'bpmn-icon-screw-wrench',
-        title: 'Change type',
+        title: translate('Change type'),
         action: {
           click: function(event, element) {
             replaceMenu.open(assign(getReplaceMenuPosition(element), {
@@ -281,9 +287,9 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'connect': {
         group: 'connect',
         className: 'bpmn-icon-connection-multi',
-        title: 'Connect using ' +
+        title: translate('Connect using ' +
                   (businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or ') +
-                  'Association',
+                  'Association'),
         action: {
           click: startConnect,
           dragstart: startConnect
@@ -297,7 +303,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'connect': {
         group: 'connect',
         className: 'bpmn-icon-connection-multi',
-        title: 'Connect using DataInputAssociation',
+        title: translate('Connect using DataInputAssociation'),
         action: {
           click: startConnect,
           dragstart: startConnect
@@ -319,7 +325,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
       'delete': {
         group: 'edit',
         className: 'bpmn-icon-trash',
-        title: 'Remove',
+        title: translate('Remove'),
         action: {
           click: removeElement,
           dragstart: removeElement

package/lib/features/label-editing/LabelEditingProvider.js

@@ -25,7 +25,7 @@ function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
   });
 
   // complete on followup canvas operation
-  eventBus.on([ 'element.mousedown', 'drag.activate', 'canvas.viewbox.changed' ], function(event) {
+  eventBus.on([ 'element.mousedown', 'drag.init', 'canvas.viewbox.changed' ], function(event) {
     directEditing.complete();
   });
 
@@ -91,13 +91,28 @@ LabelEditingProvider.prototype.activate = function(element) {
     bbox.y = bbox.mid.y - bbox.height / 2;
   }
 
-  // adjust for expanded sub processes
-  if (is(element, 'bpmn:SubProcess') && isExpanded(element)) {
+  // ajust minumum size for task and activities
+  if ((is(element, 'bpmn:Task') || is(element, 'bpmn:Activity') )) {
 
+    if (bbox.width < 100) {
+      bbox.width = 100;
+      bbox.x = bbox.mid.x - bbox.width / 2;
+    }
+
+    if (bbox.height < 80) {
+      bbox.height = 80;
+      bbox.y = bbox.mid.y - bbox.height / 2;
+    }
+  }
+
+  // adjust for expanded sub processes and collapsed pools
+  if ((is(element, 'bpmn:SubProcess') && isExpanded(element)) ||
+    (is(element, 'bpmn:Participant') && !isExpanded(element))) {
+
+    bbox.width = element.width;
     bbox.height = MIN_BOUNDS.height;
 
-    bbox.x = bbox.mid.x - bbox.width / 2;
-    bbox.y = bbox.y + 10 - bbox.height / 2;
+    bbox.x = bbox.mid.x - element.width / 2;
   }
 
   return { bounds: bbox, text: text };
@@ -134,4 +149,4 @@ LabelEditingProvider.prototype.update = function(element, newLabel) {
     element: element,
     newLabel: newLabel
   });
-};
+};

package/lib/features/label-editing/LabelUtil.js

@@ -27,7 +27,7 @@ module.exports.getLabel = function(element) {
 };
 
 
-module.exports.setLabel = function(element, text) {
+module.exports.setLabel = function(element, text, isExternal) {
   var semantic = element.businessObject,
       attr = getLabelAttr(semantic);
 
@@ -35,10 +35,10 @@ module.exports.setLabel = function(element, text) {
     semantic[attr] = text;
   }
 
-  var label = element.label || element;
-
-  // show label
-  label.hidden = false;
+  // show external label if not empty
+  if (isExternal) {
+    element.hidden = !text;
+  }
 
-  return label;
+  return element;
 };

package/lib/features/label-editing/cmd/UpdateLabelHandler.js

@@ -5,15 +5,27 @@ var LabelUtil = require('../LabelUtil');
 
 /**
  * A handler that updates the text of a BPMN element.
- *
- * @param {EventBus} eventBus
  */
-function UpdateTextHandler(eventBus) {
-
+function UpdateLabelHandler() {
+
+  /**
+   * Set the label and return the changed elements.
+   *
+   * Element parameter can be label itself or connection (i.e. sequence flow).
+   *
+   * @param {djs.model.Base} element
+   * @param {String} text
+   */
   function setText(element, text) {
-    var label = LabelUtil.setLabel(element, text);
 
-    eventBus.fire('element.changed', { element: label });
+    // external label if present
+    var label = element.label || element;
+
+    var labelTarget = element.labelTarget || element;
+
+    LabelUtil.setLabel(label, text, labelTarget !== label);
+
+    return [ label, labelTarget ];
   }
 
   function execute(ctx) {
@@ -25,20 +37,10 @@ function UpdateTextHandler(eventBus) {
     return setText(ctx.element, ctx.oldLabel);
   }
 
-
-  function canExecute(ctx) {
-    return true;
-  }
-
   // API
 
   this.execute = execute;
   this.revert = revert;
-
-  this.canExecute = canExecute;
 }
 
-
-UpdateTextHandler.$inject = [ 'eventBus' ];
-
-module.exports = UpdateTextHandler;
+module.exports = UpdateLabelHandler;

package/lib/features/modeling/BpmnUpdater.js

@@ -17,11 +17,12 @@ var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
  * A handler responsible for updating the underlying BPMN 2.0 XML + DI
  * once changes on the diagram happen
  */
-function BpmnUpdater(eventBus, bpmnFactory, connectionDocking) {
+function BpmnUpdater(eventBus, bpmnFactory, connectionDocking, translate) {
 
   CommandInterceptor.call(this, eventBus);
 
   this._bpmnFactory = bpmnFactory;
+  this._translate = translate;
 
   var self = this;
 
@@ -247,7 +248,7 @@ inherits(BpmnUpdater, CommandInterceptor);
 
 module.exports = BpmnUpdater;
 
-BpmnUpdater.$inject = [ 'eventBus', 'bpmnFactory', 'connectionDocking' ];
+BpmnUpdater.$inject = [ 'eventBus', 'bpmnFactory', 'connectionDocking', 'translate' ];
 
 
 /////// implementation //////////////////////////////////
@@ -402,7 +403,8 @@ BpmnUpdater.prototype.getLaneSet = function(container) {
 
 BpmnUpdater.prototype.updateSemanticParent = function(businessObject, newParent) {
 
-  var containment;
+  var containment,
+      translate = this._translate;
 
   if (businessObject.$parent === newParent) {
     return;
@@ -494,7 +496,13 @@ BpmnUpdater.prototype.updateSemanticParent = function(businessObject, newParent)
   }
 
   if (!containment) {
-    throw new Error('no parent for ', businessObject, newParent);
+    throw new Error(translate(
+      'no parent for {element} in {parent}',
+      {
+        element: businessObject.id,
+        parent: newParent.id
+      }
+    ));
   }
 
   var children;

package/lib/features/modeling/ElementFactory.js

@@ -5,24 +5,26 @@ var assign = require('lodash/object/assign'),
 
 var is = require('../../util/ModelUtil').is;
 
+var isExpanded = require('../../util/DiUtil').isExpanded;
+
 var BaseElementFactory = require('diagram-js/lib/core/ElementFactory'),
     LabelUtil = require('../../util/LabelUtil');
 
-
 /**
  * A bpmn-aware factory for diagram-js shapes
  */
-function ElementFactory(bpmnFactory, moddle) {
+function ElementFactory(bpmnFactory, moddle, translate) {
   BaseElementFactory.call(this);
 
   this._bpmnFactory = bpmnFactory;
   this._moddle = moddle;
+  this._translate = translate;
 }
 
 inherits(ElementFactory, BaseElementFactory);
 
 
-ElementFactory.$inject = [ 'bpmnFactory', 'moddle' ];
+ElementFactory.$inject = [ 'bpmnFactory', 'moddle', 'translate' ];
 
 module.exports = ElementFactory;
 
@@ -40,7 +42,8 @@ ElementFactory.prototype.create = function(elementType, attrs) {
 };
 
 ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
-  var size;
+  var size,
+      translate = this._translate;
 
   attrs = attrs || {};
 
@@ -48,7 +51,7 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
 
   if (!businessObject) {
     if (!attrs.type) {
-      throw new Error('no shape type specified');
+      throw new Error(translate('no shape type specified'));
     }
 
     businessObject = this._bpmnFactory.create(attrs.type);
@@ -71,6 +74,10 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
     }
   }
 
+  if (attrs.processRef) {
+    businessObject.processRef = attrs.processRef;
+  }
+
   if (attrs.isExpanded) {
     businessObject.di.isExpanded = attrs.isExpanded;
   }
@@ -118,9 +125,8 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
 ElementFactory.prototype._getDefaultSize = function(semantic) {
 
   if (is(semantic, 'bpmn:SubProcess')) {
-    var isExpanded = semantic.di.isExpanded === true;
 
-    if (isExpanded) {
+    if (isExpanded(semantic)) {
       return { width: 350, height: 200 };
     } else {
       return { width: 100, height: 80 };
@@ -140,7 +146,11 @@ ElementFactory.prototype._getDefaultSize = function(semantic) {
   }
 
   if (is(semantic, 'bpmn:Participant')) {
-    return { width: 600, height: 250 };
+    if (!isExpanded(semantic)) {
+      return { width: 400, height: 100 };
+    } else {
+      return { width: 600, height: 250 };
+    }
   }
 
   if (is(semantic, 'bpmn:Lane')) {
@@ -155,17 +165,21 @@ ElementFactory.prototype._getDefaultSize = function(semantic) {
     return { width: 50, height: 50 };
   }
 
+  if (is(semantic, 'bpmn:TextAnnotation')) {
+    return { width: 100, height: 30 };
+  }
+
   return { width: 100, height: 80 };
 };
 
 
 ElementFactory.prototype.createParticipantShape = function(collapsed) {
 
-  var participantShape = this.createShape({ type: 'bpmn:Participant' });
+  var attrs = { type: 'bpmn:Participant' };
 
   if (!collapsed) {
-    participantShape.businessObject.processRef = this._bpmnFactory.create('bpmn:Process');
+    attrs.processRef = this._bpmnFactory.create('bpmn:Process');
   }
 
-  return participantShape;
+  return this.createShape(attrs);
 };

package/lib/features/modeling/{BpmnLabelSupport.js → behavior/LabelBehavior.js}

@@ -3,8 +3,8 @@
 var assign = require('lodash/object/assign'),
     inherits = require('inherits');
 
-var LabelUtil = require('../../util/LabelUtil'),
-    is = require('../../util/ModelUtil').is;
+var LabelUtil = require('../../../util/LabelUtil'),
+    is = require('../../../util/ModelUtil').is;
 
 var hasExternalLabel = LabelUtil.hasExternalLabel,
     getExternalLabelMid = LabelUtil.getExternalLabelMid;
@@ -12,6 +12,15 @@ var hasExternalLabel = LabelUtil.hasExternalLabel,
 var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
 
 
+/**
+ * A component that makes sure that external labels are added
+ * together with respective elements and properly updated (DI wise)
+ * during move.
+ *
+ * @param {EventBus} eventBus
+ * @param {Modeling} modeling
+ * @param {BpmnFactory} bpmnFactory
+ */
 function LabelSupport(eventBus, modeling, bpmnFactory) {
 
   CommandInterceptor.call(this, eventBus);
@@ -37,8 +46,9 @@ function LabelSupport(eventBus, modeling, bpmnFactory) {
     }
   });
 
-  // update di information on label movement and creation
-  this.executed([ 'label.create', 'shape.moved' ], function(e) {
+  // update di information on label creation
+  this.executed([ 'label.create' ], function(e) {
+
     var element = e.context.shape,
         businessObject,
         di;

package/lib/features/modeling/behavior/ModelingFeedback.js

@@ -3,7 +3,7 @@
 var is = require('../../../util/ModelUtil').is;
 
 
-function ModelingFeedback(eventBus, tooltips) {
+function ModelingFeedback(eventBus, tooltips, translate) {
 
   function showError(position, message) {
     tooltips.add({
@@ -24,13 +24,13 @@ function ModelingFeedback(eventBus, tooltips) {
         target = context.target;
 
     if (is(target, 'bpmn:Collaboration') && is(shape, 'bpmn:FlowNode')) {
-      showError(event, 'flow elements must be children of pools/participants');
+      showError(event, translate('flow elements must be children of pools/participants'));
     }
   });
 
 }
 
 
-ModelingFeedback.$inject = [ 'eventBus', 'tooltips' ];
+ModelingFeedback.$inject = [ 'eventBus', 'tooltips', 'translate' ];
 
 module.exports = ModelingFeedback;

package/lib/features/modeling/behavior/UpdateFlowNodeRefsBehavior.js

@@ -14,7 +14,7 @@ var LOW_PRIORITY = 500,
 /**
  * BPMN specific delete lane behavior
  */
-function UpdateFlowNodeRefsBehavior(eventBus, modeling) {
+function UpdateFlowNodeRefsBehavior(eventBus, modeling, translate) {
 
   CommandInterceptor.call(this, eventBus);
 
@@ -44,7 +44,7 @@ function UpdateFlowNodeRefsBehavior(eventBus, modeling) {
 
   function getContext() {
     if (!context) {
-      throw new Error('out of bounds release');
+      throw new Error(translate('out of bounds release'));
     }
 
     return context;
@@ -53,7 +53,7 @@ function UpdateFlowNodeRefsBehavior(eventBus, modeling) {
   function releaseContext() {
 
     if (!context) {
-      throw new Error('out of bounds release');
+      throw new Error(translate('out of bounds release'));
     }
 
     var triggerUpdate = context.leave();
@@ -122,7 +122,7 @@ function UpdateFlowNodeRefsBehavior(eventBus, modeling) {
   });
 }
 
-UpdateFlowNodeRefsBehavior.$inject = [ 'eventBus', 'modeling' ];
+UpdateFlowNodeRefsBehavior.$inject = [ 'eventBus', 'modeling' , 'translate'];
 
 inherits(UpdateFlowNodeRefsBehavior, CommandInterceptor);
 

package/lib/features/modeling/behavior/index.js

@@ -7,6 +7,7 @@ module.exports = {
     'createParticipantBehavior',
     'dataInputAssociationBehavior',
     'deleteLaneBehavior',
+    'labelBehavior',
     'modelingFeedback',
     'removeParticipantBehavior',
     'replaceConnectionBehavior',
@@ -21,6 +22,7 @@ module.exports = {
   createParticipantBehavior: [ 'type', require('./CreateParticipantBehavior') ],
   dataInputAssociationBehavior: [ 'type', require('./DataInputAssociationBehavior') ],
   deleteLaneBehavior: [ 'type', require('./DeleteLaneBehavior') ],
+  labelBehavior: [ 'type', require('./LabelBehavior') ],
   modelingFeedback: [ 'type', require('./ModelingFeedback') ],
   removeParticipantBehavior: [ 'type', require('./RemoveParticipantBehavior') ],
   replaceConnectionBehavior: [ 'type', require('./ReplaceConnectionBehavior') ],

package/lib/features/modeling/cmd/SplitLaneHandler.js

@@ -10,18 +10,20 @@ var LANE_INDENTATION = require('../util/LaneUtil').LANE_INDENTATION;
  *
  * @param {Modeling} modeling
  */
-function SplitLaneHandler(modeling) {
+function SplitLaneHandler(modeling, translate) {
   this._modeling = modeling;
+  this._translate = translate;
 }
 
-SplitLaneHandler.$inject = [ 'modeling' ];
+SplitLaneHandler.$inject = [ 'modeling', 'translate'];
 
 module.exports = SplitLaneHandler;
 
 
 SplitLaneHandler.prototype.preExecute = function(context) {
 
-  var modeling = this._modeling;
+  var modeling = this._modeling,
+      translate = this._translate;
 
   var shape = context.shape,
       newLanesCount = context.count;
@@ -30,7 +32,7 @@ SplitLaneHandler.prototype.preExecute = function(context) {
       existingLanesCount = childLanes.length;
 
   if (existingLanesCount > newLanesCount) {
-    throw new Error('more than ' + newLanesCount + ' child lanes');
+    throw new Error(translate('more than {count} child lanes', { count: newLanesCount }));
   }
 
   var newLanesHeight = Math.round(shape.height / newLanesCount);

package/lib/features/modeling/cmd/UpdateCanvasRootHandler.js

@@ -41,6 +41,9 @@ UpdateCanvasRootHandler.prototype.execute = function(context) {
   newRootBusinessObject.di = diPlane;
 
   context.oldRoot = oldRoot;
+
+  // TODO(nikku): return changed elements?
+  // return [ newRoot, oldRoot ];
 };
 
 
@@ -70,4 +73,7 @@ UpdateCanvasRootHandler.prototype.revert = function(context) {
 
   diPlane.bpmnElement = oldRootBusinessObject;
   oldRootBusinessObject.di = diPlane;
+
+  // TODO(nikku): return changed elements?
+  // return [ newRoot, oldRoot ];
 };

package/lib/features/modeling/cmd/UpdateFlowNodeRefsHandler.js

@@ -153,6 +153,9 @@ UpdateFlowNodeRefsHandler.prototype.execute = function(context) {
       Collections.add(newLane.get(FLOW_NODE_REFS_ATTR), flowNode);
     });
   });
+
+  // TODO(nikku): return changed elements
+  // return [ ... ];
 };
 
 
@@ -177,4 +180,7 @@ UpdateFlowNodeRefsHandler.prototype.revert = function(context) {
       Collections.add(oldLane.get(FLOW_NODE_REFS_ATTR), flowNode);
     });
   });
+
+  // TODO(nikku): return changed elements
+  // return [ ... ];
 };

package/lib/features/modeling/cmd/UpdatePropertiesHandler.js

@@ -21,12 +21,13 @@ var DEFAULT_FLOW = 'default',
  * Use respective diagram-js provided handlers if you would
  * like to perform automated modeling.
  */
-function UpdatePropertiesHandler(elementRegistry, moddle) {
+function UpdatePropertiesHandler(elementRegistry, moddle, translate) {
   this._elementRegistry = elementRegistry;
   this._moddle = moddle;
+  this._translate = translate;
 }
 
-UpdatePropertiesHandler.$inject = [ 'elementRegistry', 'moddle' ];
+UpdatePropertiesHandler.$inject = [ 'elementRegistry', 'moddle', 'translate' ];
 
 module.exports = UpdatePropertiesHandler;
 
@@ -46,10 +47,11 @@ module.exports = UpdatePropertiesHandler;
 UpdatePropertiesHandler.prototype.execute = function(context) {
 
   var element = context.element,
-      changed = [ element ];
+      changed = [ element],
+      translate = this._translate;
 
   if (!element) {
-    throw new Error('element required');
+    throw new Error(translate('element required'));
   }
 
   var elementRegistry = this._elementRegistry,

package/lib/features/modeling/index.js

@@ -1,5 +1,5 @@
 module.exports = {
-  __init__: [ 'modeling', 'bpmnUpdater', 'bpmnLabelSupport' ],
+  __init__: [ 'modeling', 'bpmnUpdater' ],
   __depends__: [
     require('./behavior'),
     require('../label-editing'),
@@ -18,7 +18,6 @@ module.exports = {
   bpmnUpdater: [ 'type', require('./BpmnUpdater') ],
   elementFactory: [ 'type', require('./ElementFactory') ],
   modeling: [ 'type', require('./Modeling') ],
-  bpmnLabelSupport: [ 'type', require('./BpmnLabelSupport') ],
   layouter: [ 'type', require('./BpmnLayouter') ],
   connectionDocking: [ 'type', require('diagram-js/lib/layout/CroppingConnectionDocking') ]
 };