bpmn-js 0.20.7 → 0.21.0

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;
     },

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

@@ -37,17 +37,9 @@ function BpmnCopyPaste(
   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;
 
@@ -79,11 +71,22 @@ function BpmnCopyPaste(
         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;
     }
@@ -119,19 +122,17 @@ function BpmnCopyPaste(
       }
     }
 
-    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'
     ]);
@@ -141,13 +142,6 @@ function BpmnCopyPaste(
     ]);
   });
 
-
-  eventBus.on('commandStack.elements.paste.postExecuted', function() {
-    // temporarily disable multi paste until #686
-    // is addressed
-    clipboard.clear();
-  });
-
 }
 
 

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/behavior/DropOnFlowBehavior.js

@@ -2,12 +2,23 @@
 
 var inherits = require('inherits');
 
-var assign = require('lodash/object/assign');
+var assign = require('lodash/object/assign'),
+    find = require('lodash/collection/find');
 
 var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
 
 var getApproxIntersection = require('diagram-js/lib/util/LineIntersection').getApproxIntersection;
 
+function isPointInsideBBox(bbox, point) {
+  var x = point.x,
+      y = point.y;
+
+  return x >= bbox.x &&
+    x <= bbox.x + bbox.width &&
+    y >= bbox.y &&
+    y <= bbox.y + bbox.height;
+}
+
 function copy(obj) {
   return assign({}, obj);
 }
@@ -41,8 +52,15 @@ function DropOnFlow(eventBus, bpmnRules, modeling) {
 
       dockingPoint = intersection.bendpoint ? waypoints[intersection.index] : position;
 
-      waypointsBefore.push(copy(dockingPoint));
-      waypointsAfter.unshift(copy(dockingPoint));
+      // if last waypointBefore is inside shape's bounds, ignore docking point
+      if (!isPointInsideBBox(shape, waypointsBefore[waypointsBefore.length-1])) {
+        waypointsBefore.push(copy(dockingPoint));
+      }
+
+      // if first waypointAfter is inside shape's bounds, ignore docking point
+      if (!isPointInsideBBox(shape, waypointsAfter[0])) {
+        waypointsAfter.unshift(copy(dockingPoint));
+      }
     }
 
     source = targetFlow.source;
@@ -68,24 +86,40 @@ function DropOnFlow(eventBus, bpmnRules, modeling) {
 
   this.preExecute('elements.move', function(context) {
 
-    var parent = context.newParent,
+    var newParent = context.newParent,
         shapes = context.shapes,
-        shape,
-        shapeMid,
-        delta = context.delta;
+        delta = context.delta,
+        shape = shapes[0];
 
-    if (bpmnRules.canInsert(shapes, parent)) {
+    if (!shape || !newParent) {
+      return;
+    }
 
-      shape = shapes[0];
-      shapeMid = getMid(shape);
+    // if the new parent is a connection,
+    // change it to the new parent's parent
+    if (newParent && newParent.waypoints) {
+      context.newParent = newParent = newParent.parent;
+    }
 
-      context.targetFlow = parent;
-      context.newParent = parent.parent;
-      context.position = {
-        x: shapeMid.x + delta.x,
-        y: shapeMid.y + delta.y
-      };
+    var shapeMid = getMid(shape);
+    var newShapeMid = {
+      x: shapeMid.x + delta.x,
+      y: shapeMid.y + delta.y
+    };
+
+    // find a connection which intersects with the
+    // element's mid point
+    var connection = find(newParent.children, function(element) {
+      var canInsert = bpmnRules.canInsert(shapes, element);
+
+      return canInsert && getApproxIntersection(element.waypoints, newShapeMid);
+    });
+
+    if (connection) {
+      context.targetFlow = connection;
+      context.position = newShapeMid;
     }
+
   }, true);
 
   this.postExecuted('elements.move', function(context) {