bpmn-js 0.20.6 → 0.22.1

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,193 +1,292 @@
-'use strict';
-
-var UpdateLabelHandler = require('./cmd/UpdateLabelHandler');
-
-var LabelUtil = require('./LabelUtil');
-
-var is = require('../../util/ModelUtil').is,
-    isExpanded = require('../../util/DiUtil').isExpanded;
-
-var LINE_HEIGHT = 14,
-    PADDING = 6;
-
-function LabelEditingProvider(eventBus, canvas, directEditing, commandStack) {
-
-  this._canvas = canvas;
-  this._commandStack = commandStack;
-
-  directEditing.registerProvider(this);
-
-  commandStack.registerHandler('element.updateLabel', UpdateLabelHandler);
-
-  // listen to dblclick on non-root elements
-  eventBus.on('element.dblclick', function(event) {
-    directEditing.activate(event.element);
-  });
-
-  // complete on followup canvas operation
-  eventBus.on([ 'element.mousedown', 'drag.init', 'canvas.viewbox.changed' ], function(event) {
-    directEditing.complete();
-  });
-
-  // cancel on command stack changes
-  eventBus.on([ 'commandStack.changed' ], function() {
-    directEditing.cancel();
-  });
-
-
-  if ('ontouchstart' in document.documentElement) {
-    // we deactivate automatic label editing on mobile devices
-    // as it breaks the user interaction workflow
-
-    // 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;
-
-      if (!canExecute) {
-        return;
-      }
-
-      if (is(element, 'bpmn:Task') || is(element, 'bpmn:TextAnnotation') ||
-          (is(element, 'bpmn:SubProcess') && !isExpanded(element))) {
-
-        directEditing.activate(element);
-      }
-    });
-  }
-}
-
-LabelEditingProvider.$inject = [ 'eventBus', 'canvas', 'directEditing', 'commandStack' ];
-
-module.exports = LabelEditingProvider;
-
-
-/**
- * Activate direct editing for activities and text annotations.
- *
- * @param  {djs.model.Base} element
- *
- * @return {Object} an object with properties bounds (position and size) and text
- */
-LabelEditingProvider.prototype.activate = function(element) {
-
-  var text = LabelUtil.getLabel(element);
-
-  if (text === undefined) {
-    return;
-  }
-
-  var properties = this.getEditingBBox(element);
-
-  properties.text = text;
-
-  return properties;
-};
-
-
-/**
- * Get the editing bounding box based on the element's size and position
- *
- * @param  {djs.model.Base} element
- *
- * @return {Object} an object containing information about position and size (fixed or minimum and/or maximum)
- */
-LabelEditingProvider.prototype.getEditingBBox = function(element) {
-  var canvas = this._canvas;
-
-  var target = element.label || element;
-
-  var bbox = canvas.getAbsoluteBBox(target);
-
-  var mid = {
-    x: bbox.x + bbox.width / 2,
-    y: bbox.y + bbox.height / 2
-  };
-
-  // default position
-  var bounds = { x: bbox.x, y: bbox.y };
-
-  var style = {},
-      zoom;
-
-  // adjust for expanded pools AND lanes
-  if ((is(element, 'bpmn:Participant') && isExpanded(element)) || is(element, 'bpmn:Lane')) {
-
-    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;
-  }
-
-
-  // internal labels for tasks and collapsed call activities, sub processes and participants
-  if (
-    is(element, 'bpmn:Task') ||
-    (is(element, 'bpmn:CallActivity') && !isExpanded(element)) ||
-    (is(element, 'bpmn:SubProcess') && !isExpanded(element)) ||
-    (is(element, 'bpmn:Participant') && !isExpanded(element))
-  ) {
-
-    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);
-    }
-
-  }
-
-
-  // internal labels for expanded sub processes
-  if (is(element, 'bpmn:SubProcess') && isExpanded(element)) {
-
-    bounds.width = element.width;
-    bounds.maxHeight = 3 * LINE_HEIGHT + PADDING; // maximum 3 lines
-    bounds.x = mid.x - element.width / 2;
-  }
-
-
-  // external labels for events, data elements, gateways and connections
-  if (target.labelTarget) {
-
-    bounds.width = 150;
-    bounds.minHeight = LINE_HEIGHT + PADDING; // 1 line
-    bounds.x = mid.x - bounds.width / 2;
-  }
-
-
-  // text annotations
-  if (is(element, 'bpmn:TextAnnotation')) {
-    bounds.minWidth = 100;
-    bounds.height = element.height;
-
-    style.textAlign = 'left';
-  }
-
-  return { bounds: bounds, style: style };
-};
-
-
-LabelEditingProvider.prototype.update = function(element, newLabel) {
-  this._commandStack.execute('element.updateLabel', {
-    element: element,
-    newLabel: newLabel
-  });
-};
+'use strict';
+
+var assign = require('lodash/object/assign');
+
+var UpdateLabelHandler = require('./cmd/UpdateLabelHandler');
+
+var LabelUtil = require('./LabelUtil');
+
+var is = require('../../util/ModelUtil').is,
+    isExpanded = require('../../util/DiUtil').isExpanded;
+
+var SMALL_FONT_SIZE = 11,
+    SMALL_LINE_HEIGHT = 13,
+    MEDIUM_FONT_SIZE = 12,
+    MEDIUM_LINE_HEIGHT = 14;
+
+function LabelEditingProvider(eventBus, canvas, directEditing, commandStack, resizeHandles) {
+
+  this._canvas = canvas;
+  this._commandStack = commandStack;
+
+  directEditing.registerProvider(this);
+
+  commandStack.registerHandler('element.updateLabel', UpdateLabelHandler);
+
+  // 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.changing' ], function(event) {
+    directEditing.complete();
+  });
+
+  // cancel on command stack changes
+  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
+
+    // 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(event) {
+      var element = event.shape,
+          canExecute = event.context.canExecute;
+
+      if (!canExecute) {
+        return;
+      }
+
+      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', 'resizeHandles' ];
+
+module.exports = LabelEditingProvider;
+
+
+/**
+ * Activate direct editing for activities and text annotations.
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @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 context = {
+    text: text
+  };
+
+  // bounds
+  var bounds = this.getEditingBBox(element);
+
+  assign(context, bounds);
+
+  // options
+  var target = element.label || element;
+
+  var options = {};
+
+  // 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
+    });
+  }
+
+  // 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;
+};
+
+
+/**
+ * Get the editing bounding box based on the element's size and position
+ *
+ * @param  {djs.model.Base} element
+ *
+ * @return {Object} an object containing information about position and size (fixed or minimum and/or maximum)
+ */
+LabelEditingProvider.prototype.getEditingBBox = function(element) {
+  var canvas = this._canvas;
+
+  var target = element.label || element;
+
+  var bbox = canvas.getAbsoluteBBox(target);
+
+  var mid = {
+    x: bbox.x + bbox.width / 2,
+    y: bbox.y + bbox.height / 2
+  };
+
+  // default position
+  var bounds = { x: bbox.x, y: bbox.y };
+
+  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')) {
+
+    assign(bounds, {
+      width: bbox.height,
+      height: 30 * zoom,
+      x: bbox.x - bbox.height / 2 + (15 * zoom),
+      y: mid.y - (30 * zoom) / 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)'
+    });
+  }
+
+
+  // internal labels for tasks and collapsed call activities, sub processes and participants
+  if (
+    is(element, 'bpmn:Task') ||
+    (is(element, 'bpmn:CallActivity') && !isExpanded(element)) ||
+    (is(element, 'bpmn:SubProcess') && !isExpanded(element)) ||
+    (is(element, 'bpmn:Participant') && !isExpanded(element))
+  ) {
+    assign(bounds, {
+      width: bbox.width,
+      height: bbox.height
+    });
+
+    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
+    });
+
+    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
+    });
+
+    assign(style, {
+      fontSize: smallFontSize + 'px',
+      lineHeight: smallLineHeight + 'px',
+      paddingTop: paddingTop + 'px',
+      paddingBottom: paddingBottom + 'px'
+    });
+  }
+
+
+  // text annotations
+  if (is(element, 'bpmn:TextAnnotation')) {
+    assign(bounds, {
+      width: bbox.width,
+      height: bbox.height,
+      minWidth: 30 * zoom,
+      minHeight: 10 * zoom
+    });
+
+    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, activeContextText, bounds) {
+  var absoluteElementBBox = this._canvas.getAbsoluteBBox(element);
+
+  this._commandStack.execute('element.updateLabel', {
+    element: element,
+    newLabel: newLabel,
+    bounds: {
+      x: element.x,
+      y: element.y,
+      width: element.width / absoluteElementBBox.width * bounds.width,
+      height: element.height / absoluteElementBBox.height * bounds.height
+    }
+  });
+};