bpmn-js 0.20.4 → 0.21.0

package/.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js: '4.0'
 
+sudo: false
+
 addons:
   firefox: "latest-esr"
 

package/lib/draw/BpmnRenderer.js

@@ -1551,7 +1551,7 @@ function BpmnRenderer(eventBus, styles, pathMap, canvas, priority) {
       });
 
       var text = getSemantic(element).text || '';
-      renderLabel(parentGfx, text, { box: element, align: 'left-middle', padding: 5 });
+      renderLabel(parentGfx, text, { box: element, align: 'left-top', padding: 5 });
 
       return textElement;
     },
@@ -1827,8 +1827,9 @@ function isThrowEvent(event) {
 }
 
 function isCollection(element) {
-  return element.isCollection ||
-        (element.elementObjectRef && element.elementObjectRef.isCollection);
+  var dataObject = element.dataObjectRef;
+
+  return element.isCollection || (dataObject && dataObject.isCollection);
 }
 
 function getDi(element) {

package/lib/features/copy-paste/BpmnCopyPaste.js

@@ -30,22 +30,16 @@ function removeProperties(element, properties) {
   });
 }
 
-function BpmnCopyPaste(bpmnFactory, eventBus, copyPaste, clipboard, moddle, canvas, bpmnRules) {
+function BpmnCopyPaste(
+    bpmnFactory, eventBus, copyPaste,
+    clipboard, canvas, bpmnRules) {
 
   var helper = new ModelCloneHelper(eventBus);
 
   copyPaste.registerDescriptor(function(element, descriptor) {
-    var businessObject = getBusinessObject(element),
-        newBusinessObject = bpmnFactory.create(businessObject.$type);
+    var businessObject = descriptor.oldBusinessObject = getBusinessObject(element);
 
-    var properties = getProperties(businessObject.$descriptor),
-        colors = {};
-
-    properties = filter(properties, function(property) {
-      return IGNORED_PROPERTIES.indexOf(property.replace(/bpmn:/, '')) === -1;
-    });
-
-    descriptor.businessObject = helper.clone(businessObject, newBusinessObject, properties);
+    var colors = {};
 
     descriptor.type = element.type;
 
@@ -77,11 +71,22 @@ function BpmnCopyPaste(bpmnFactory, eventBus, copyPaste, clipboard, moddle, canv
         createdElements = context.createdElements,
         parent = descriptor.parent,
         rootElement = canvas.getRootElement(),
-        businessObject,
+        oldBusinessObject = descriptor.oldBusinessObject,
+        newBusinessObject,
         source,
         target,
         canConnect;
 
+    newBusinessObject = bpmnFactory.create(oldBusinessObject.$type);
+
+    var properties = getProperties(oldBusinessObject.$descriptor);
+
+    properties = filter(properties, function(property) {
+      return IGNORED_PROPERTIES.indexOf(property.replace(/bpmn:/, '')) === -1;
+    });
+
+    descriptor.businessObject = helper.clone(oldBusinessObject, newBusinessObject, properties);
+
     if (descriptor.type === 'label') {
       return;
     }
@@ -117,19 +122,17 @@ function BpmnCopyPaste(bpmnFactory, eventBus, copyPaste, clipboard, moddle, canv
       }
     }
 
-    businessObject = descriptor.businessObject;
-
     // remove the id or else we cannot paste multiple times
-    delete businessObject.id;
+    delete newBusinessObject.id;
 
     // assign an ID
-    bpmnFactory._ensureId(businessObject);
+    bpmnFactory._ensureId(newBusinessObject);
 
     if (descriptor.type === 'bpmn:Participant' && descriptor.processRef) {
-      descriptor.processRef = businessObject.processRef = bpmnFactory.create('bpmn:Process');
+      descriptor.processRef = newBusinessObject.processRef = bpmnFactory.create('bpmn:Process');
     }
 
-    setProperties(businessObject, descriptor, [
+    setProperties(newBusinessObject, descriptor, [
       'isExpanded',
       'triggeredByEvent'
     ]);
@@ -138,6 +141,7 @@ function BpmnCopyPaste(bpmnFactory, eventBus, copyPaste, clipboard, moddle, canv
       'triggeredByEvent'
     ]);
   });
+
 }
 
 
@@ -146,7 +150,6 @@ BpmnCopyPaste.$inject = [
   'eventBus',
   'copyPaste',
   'clipboard',
-  'moddle',
   'canvas',
   'bpmnRules'
 ];

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

@@ -0,0 +1,122 @@
+var svgAppend = require('tiny-svg/lib/append'),
+    svgAttr = require('tiny-svg/lib/attr'),
+    svgCreate = require('tiny-svg/lib/create'),
+    svgRemove = require('tiny-svg/lib/remove');
+
+var getBusinessObject = require('../../util/ModelUtil').getBusinessObject,
+    is = require('../../util/ModelUtil').is;
+
+var translate = require('diagram-js/lib/util/SvgTransformUtil').translate;
+
+var MARKER_HIDDEN = 'djs-element-hidden',
+    MARKER_LABEL_HIDDEN = 'djs-label-hidden';
+
+function getStrokeColor(element, defaultColor) {
+  var bo = getBusinessObject(element);
+
+  return bo.di.get('stroke') || defaultColor || 'black';
+}
+
+function LabelEditingPreview(eventBus, canvas, elementRegistry, pathMap) {
+  var self = this;
+
+  var defaultLayer = canvas.getDefaultLayer();
+
+  var element, absoluteElementBBox, gfx;
+
+  eventBus.on('directEditing.activate', function(context) {
+    var activeProvider = context.active;
+
+    element = activeProvider.element.label || activeProvider.element;
+
+    // text annotation
+    if (is(element, 'bpmn:TextAnnotation')) {
+      absoluteElementBBox = canvas.getAbsoluteBBox(element);
+
+      gfx = svgCreate('g');
+
+      var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: element.height,
+        position: {
+          mx: 0.0,
+          my: 0.0
+        }
+      });
+
+      var path = self.path = svgCreate('path');
+
+      svgAttr(path, {
+        d: textPathData,
+        strokeWidth: 2,
+        stroke: getStrokeColor(element)
+      });
+
+      svgAppend(gfx, path);
+
+      svgAppend(defaultLayer, gfx);
+
+      translate(gfx, element.x, element.y);
+    }
+
+    if (is(element, 'bpmn:TextAnnotation') ||
+        element.labelTarget) {
+      canvas.addMarker(element, MARKER_HIDDEN);
+    } else if (is(element, 'bpmn:Task') ||
+               is(element, 'bpmn:CallActivity') ||
+               is(element, 'bpmn:SubProcess') ||
+               is(element, 'bpmn:Participant')) {
+      canvas.addMarker(element, MARKER_LABEL_HIDDEN);
+    }
+  });
+
+  eventBus.on('directEditing.resize', function(context) {
+
+    // text annotation
+    if (is(element, 'bpmn:TextAnnotation')) {
+      var height = context.height,
+          dy = context.dy;
+
+      var newElementHeight = Math.max(element.height / absoluteElementBBox.height * (height + dy), 0);
+
+      var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
+        xScaleFactor: 1,
+        yScaleFactor: 1,
+        containerWidth: element.width,
+        containerHeight: newElementHeight,
+        position: {
+          mx: 0.0,
+          my: 0.0
+        }
+      });
+
+      svgAttr(self.path, {
+        d: textPathData
+      });
+    }
+  });
+
+  eventBus.on([ 'directEditing.complete', 'directEditing.cancel' ], function(context) {
+    var activeProvider = context.active;
+
+    if (activeProvider) {
+      canvas.removeMarker(activeProvider.element.label || activeProvider.element, MARKER_HIDDEN);
+      canvas.removeMarker(element, MARKER_LABEL_HIDDEN);
+    }
+
+    element = undefined;
+    absoluteElementBBox = undefined;
+
+    if (gfx) {
+      svgRemove(gfx);
+
+      gfx = undefined;
+    }
+  });
+}
+
+LabelEditingPreview.$inject = [ 'eventBus', 'canvas', 'elementRegistry', 'pathMap' ];
+
+module.exports = LabelEditingPreview;

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

@@ -1,5 +1,7 @@
 'use strict';
 
+var assign = require('lodash/object/assign');
+
 var UpdateLabelHandler = require('./cmd/UpdateLabelHandler');
 
 var LabelUtil = require('./LabelUtil');
@@ -7,10 +9,12 @@ var LabelUtil = require('./LabelUtil');
 var is = require('../../util/ModelUtil').is,
     isExpanded = require('../../util/DiUtil').isExpanded;
 
-var LINE_HEIGHT = 14,
-    PADDING = 6;
+var SMALL_FONT_SIZE = 11,
+    SMALL_LINE_HEIGHT = 13,
+    MEDIUM_FONT_SIZE = 12,
+    MEDIUM_LINE_HEIGHT = 14;
 
-function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
+function LabelEditingProvider(eventBus, canvas, directEditing, commandStack, resizeHandles) {
 
   this._canvas = canvas;
   this._commandStack = commandStack;
@@ -22,19 +26,20 @@ function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
   // listen to dblclick on non-root elements
   eventBus.on('element.dblclick', function(event) {
     directEditing.activate(event.element);
+
+    resizeHandles.removeResizers();
   });
 
   // complete on followup canvas operation
-  eventBus.on([ 'element.mousedown', 'drag.init', 'canvas.viewbox.changed' ], function(event) {
+  eventBus.on([ 'element.mousedown', 'drag.init', 'canvas.viewbox.changing' ], function(event) {
     directEditing.complete();
   });
 
   // cancel on command stack changes
-  eventBus.on([ 'commandStack.changed' ], function() {
+  eventBus.on([ 'commandStack.changed' ], function(e) {
     directEditing.cancel();
   });
 
-
   if ('ontouchstart' in document.documentElement) {
     // we deactivate automatic label editing on mobile devices
     // as it breaks the user interaction workflow
@@ -42,10 +47,9 @@ function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
     // TODO(nre): we should temporarily focus the edited element here
     // and release the focused viewport after the direct edit operation is finished
   } else {
-    eventBus.on('create.end', 500, function(e) {
-
-      var element = e.shape,
-          canExecute = e.context.canExecute;
+    eventBus.on('create.end', 500, function(event) {
+      var element = event.shape,
+          canExecute = event.context.canExecute;
 
       if (!canExecute) {
         return;
@@ -53,14 +57,15 @@ function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
 
       if (is(element, 'bpmn:Task') || is(element, 'bpmn:TextAnnotation') ||
           (is(element, 'bpmn:SubProcess') && !isExpanded(element))) {
-
         directEditing.activate(element);
+
+        resizeHandles.removeResizers();
       }
     });
   }
 }
 
-LabelEditingProvider.$inject = [ 'eventBus', 'canvas', 'directEditing', 'commandStack' ];
+LabelEditingProvider.$inject = [ 'eventBus', 'canvas', 'directEditing', 'commandStack', 'resizeHandles' ];
 
 module.exports = LabelEditingProvider;
 
@@ -70,21 +75,62 @@ module.exports = LabelEditingProvider;
  *
  * @param  {djs.model.Base} element
  *
- * @return {Object} an object with properties bounds (position and size) and text
+ * @return {Object} an object with properties bounds (position and size), text and options
  */
 LabelEditingProvider.prototype.activate = function(element) {
 
+  // text
   var text = LabelUtil.getLabel(element);
 
   if (text === undefined) {
     return;
   }
 
-  var properties = this.getEditingBBox(element);
+  var context = {
+    text: text
+  };
+
+  // bounds
+  var bounds = this.getEditingBBox(element);
+
+  assign(context, bounds);
+
+  // options
+  var target = element.label || element;
+
+  var options = {};
 
-  properties.text = text;
+  // tasks
+  if (is(element, 'bpmn:Task') ||
+      is(element, 'bpmn:Participant') ||
+      is(element, 'bpmn:Lane') ||
+      (is(element, 'bpmn:CallActivity') && !isExpanded(element)) ||
+      (is(element, 'bpmn:SubProcess') && !isExpanded(element))) {
+    assign(options, {
+      centerVertically: true
+    });
+  }
 
-  return properties;
+  // external labels
+  if (target.labelTarget) {
+    assign(options, {
+      autoResize: true
+    });
+  }
+
+  // text annotations
+  if (is(element, 'bpmn:TextAnnotation')) {
+    assign(options, {
+      resizable: true,
+      autoResize: true
+    });
+  }
+
+  assign(context, {
+    options: options
+  });
+
+  return context;
 };
 
 
@@ -110,17 +156,36 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
   // default position
   var bounds = { x: bbox.x, y: bbox.y };
 
-  var style = {},
-      zoom;
+  var zoom = canvas.zoom();
+
+  // take zoom into account
+  var smallFontSize = SMALL_FONT_SIZE * zoom,
+      smallLineHeight = SMALL_LINE_HEIGHT * zoom,
+      mediumFontSize = MEDIUM_FONT_SIZE * zoom,
+      mediumLineHeight = MEDIUM_LINE_HEIGHT * zoom;
+
+  var style = {};
 
   // adjust for expanded pools AND lanes
-  if ((is(element, 'bpmn:Participant') && isExpanded(element)) || is(element, 'bpmn:Lane')) {
+  if ((is(element, 'bpmn:Participant') && isExpanded(element))
+       || is(element, 'bpmn:Lane')) {
+
+    assign(bounds, {
+      width: bbox.height,
+      height: 30 * zoom,
+      x: bbox.x - bbox.height / 2 + (15 * zoom),
+      y: mid.y - (30 * zoom) / 2
+    });
 
-    bounds.width = 150;
-    bounds.minHeight = LINE_HEIGHT + PADDING;
-    bounds.maxHeight = LINE_HEIGHT * 2 + PADDING;
-    bounds.x = bbox.x - bounds.width / 2;
-    bounds.y = mid.y - bounds.minHeight / 2;
+    assign(style, {
+      fontSize: mediumFontSize + 'px',
+      lineHeight: mediumLineHeight + 'px',
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px',
+      transform: 'rotate(-90deg)'
+    });
   }
 
 
@@ -131,63 +196,97 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
     (is(element, 'bpmn:SubProcess') && !isExpanded(element)) ||
     (is(element, 'bpmn:Participant') && !isExpanded(element))
   ) {
+    assign(bounds, {
+      width: bbox.width,
+      height: bbox.height
+    });
 
-    zoom = canvas.zoom();
-
-    // fixed size for internal labels:
-    // on high zoom levels: text box size === bbox size
-    // on low zoom levels: text box size === bbox size at 100% zoom
-    // This ensures minimum bounds at low zoom levels
-    if (zoom > 1) {
-      bounds.width = bbox.width;
-      bounds.height = bbox.height;
-    } else {
-      bounds.width = bbox.width / zoom;
-      bounds.height = bbox.height / zoom;
-    }
-
-    // centering overlapping text box size at low zoom levels
-    if (zoom < 1) {
-      bounds.x = bbox.x - (bounds.width / 2 - bbox.width / 2);
-      bounds.y = bbox.y - (bounds.height / 2 - bbox.height / 2);
-    }
-
+    assign(style, {
+      fontSize: mediumFontSize + 'px',
+      lineHeight: mediumLineHeight + 'px',
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px'
+    });
   }
 
 
   // internal labels for expanded sub processes
   if (is(element, 'bpmn:SubProcess') && isExpanded(element)) {
+    assign(bounds, {
+      width: bbox.width,
+      x: bbox.x
+    });
 
-    bounds.width = element.width;
-    bounds.maxHeight = 3 * LINE_HEIGHT + PADDING; // maximum 3 lines
-    bounds.x = mid.x - element.width / 2;
+    assign(style, {
+      fontSize: mediumFontSize + 'px',
+      lineHeight: mediumLineHeight + 'px',
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px'
+    });
   }
 
 
   // external labels for events, data elements, gateways and connections
   if (target.labelTarget) {
+    var width = 90 * zoom,
+        paddingTop = 7 * zoom,
+        paddingBottom = 4 * zoom;
+
+    assign(bounds, {
+      width: width,
+      height: bbox.height + paddingTop + paddingBottom,
+      x: mid.x - width / 2,
+      y: bbox.y - paddingTop
+    });
 
-    bounds.width = 150;
-    bounds.minHeight = LINE_HEIGHT + PADDING; // 1 line
-    bounds.x = mid.x - bounds.width / 2;
+    assign(style, {
+      fontSize: smallFontSize + 'px',
+      lineHeight: smallLineHeight + 'px',
+      paddingTop: paddingTop + 'px',
+      paddingBottom: paddingBottom + 'px'
+    });
   }
 
 
   // text annotations
   if (is(element, 'bpmn:TextAnnotation')) {
-    bounds.minWidth = 100;
-    bounds.height = element.height;
+    assign(bounds, {
+      width: bbox.width,
+      height: bbox.height,
+      minWidth: 30 * zoom,
+      minHeight: 10 * zoom
+    });
 
-    style.textAlign = 'left';
+    assign(style, {
+      textAlign: 'left',
+      paddingTop: (7 * zoom) + 'px',
+      paddingBottom: (7 * zoom) + 'px',
+      paddingLeft: (5 * zoom) + 'px',
+      paddingRight: (5 * zoom) + 'px',
+      fontSize: mediumFontSize + 'px',
+      lineHeight: mediumLineHeight + 'px'
+    });
   }
 
   return { bounds: bounds, style: style };
 };
 
 
-LabelEditingProvider.prototype.update = function(element, newLabel) {
+LabelEditingProvider.prototype.update = function(element, newLabel, activeContextText, bounds) {
+  var absoluteElementBBox = this._canvas.getAbsoluteBBox(element);
+
   this._commandStack.execute('element.updateLabel', {
     element: element,
-    newLabel: newLabel
+    newLabel: newLabel,
+    bounds: {
+      x: element.x,
+      y: element.y,
+      width: element.width / absoluteElementBBox.width * bounds.width,
+      height: element.height / absoluteElementBBox.height * bounds.height
+    }
   });
 };

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

@@ -6,7 +6,8 @@ var TextUtil = require('diagram-js/lib/util/Text');
 
 var hasExternalLabel = require('../../../util/LabelUtil').hasExternalLabel;
 
-var getBusinessObject = require('../../../util/ModelUtil').getBusinessObject;
+var getBusinessObject = require('../../../util/ModelUtil').getBusinessObject,
+    is = require('../../../util/ModelUtil').is;
 
 var NULL_DIMENSIONS = {
   width: 0,
@@ -52,14 +53,17 @@ function UpdateLabelHandler(modeling) {
 
   function postExecute(ctx) {
     var element = ctx.element,
-        label = element.label || element;
+        label = element.label || element,
+        bounds = ctx.bounds;
 
-    // ignore internal labels
-    if (!hasExternalLabel(element)) {
+    // ignore internal labels for elements except text annotations
+    if (!hasExternalLabel(element) && !is(element, 'bpmn:TextAnnotation')) {
       return;
     }
 
-    var text = getBusinessObject(label).name;
+    var bo = getBusinessObject(label);
+
+    var text = bo.name || bo.text;
 
     if (!text) {
       return;
@@ -67,7 +71,7 @@ function UpdateLabelHandler(modeling) {
 
     // get layouted text bounds and resize external
     // external label accordingly
-    var newBounds = getLayoutedBounds(label, text, textUtil);
+    var newBounds = is(element, 'bpmn:TextAnnotation') ? bounds : getLayoutedBounds(label, text, textUtil);
 
     modeling.resizeShape(label, newBounds, NULL_DIMENSIONS);
   }

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

@@ -2,8 +2,13 @@ module.exports = {
   __depends__: [
     require('diagram-js/lib/command'),
     require('diagram-js/lib/features/change-support'),
+    require('diagram-js/lib/features/resize'),
     require('diagram-js-direct-editing')
   ],
-  __init__: [ 'labelEditingProvider' ],
-  labelEditingProvider: [ 'type', require('./LabelEditingProvider') ]
-};
+  __init__: [
+    'labelEditingProvider',
+    'labelEditingPreview'
+  ],
+  labelEditingProvider: [ 'type', require('./LabelEditingProvider') ],
+  labelEditingPreview: [ 'type', require('./LabelEditingPreview') ]
+};

package/lib/features/modeling/BpmnUpdater.js

@@ -74,19 +74,23 @@ function BpmnUpdater(eventBus, bpmnFactory, connectionDocking, translate) {
     self.updateParent(element, oldParent);
   }
 
-  this.executed([ 'shape.move',
-                  'shape.create',
-                  'shape.delete',
-                  'connection.create',
-                  'connection.move',
-                  'connection.delete' ], ifBpmn(updateParent));
-
-  this.reverted([ 'shape.move',
-                  'shape.create',
-                  'shape.delete',
-                  'connection.create',
-                  'connection.move',
-                  'connection.delete' ], ifBpmn(reverseUpdateParent));
+  this.executed([
+    'shape.move',
+    'shape.create',
+    'shape.delete',
+    'connection.create',
+    'connection.move',
+    'connection.delete'
+  ], ifBpmn(updateParent));
+
+  this.reverted([
+    'shape.move',
+    'shape.create',
+    'shape.delete',
+    'connection.create',
+    'connection.move',
+    'connection.delete'
+  ], ifBpmn(reverseUpdateParent));
 
   /*
    * ## Updating Parent