bpmn-js 9.0.0-subprocesses.3 → 9.0.0

package/lib/BaseViewer.js

@@ -439,7 +439,7 @@ BaseViewer.prototype.saveSVG = wrapForCompatibility(function saveSVG(options) {
     try {
       var canvas = self.get('canvas');
 
-      var contentNode = canvas.getDefaultLayer(),
+      var contentNode = canvas.getActiveLayer(),
           defsNode = domQuery('defs', canvas._svg);
 
       var contents = innerSVG(contentNode),

package/lib/draw/BpmnRenderer.js

@@ -382,16 +382,16 @@ export default function BpmnRenderer(
     return drawPath(parentGfx, path, assign({ 'data-marker': type }, attrs));
   }
 
+  function renderer(type) {
+    return handlers[type];
+  }
+
   function as(type) {
     return function(parentGfx, element) {
-      return handlers[type](parentGfx, element);
+      return renderer(type)(parentGfx, element);
     };
   }
 
-  function renderer(type) {
-    return handlers[type];
-  }
-
   function renderEventContent(element, parentGfx) {
 
     var event = getSemantic(element);
@@ -1872,6 +1872,7 @@ export default function BpmnRenderer(
   // extension API, use at your own risk
   this._drawPath = drawPath;
 
+  this._renderer = renderer;
 }
 
 
@@ -1893,7 +1894,7 @@ BpmnRenderer.prototype.canRender = function(element) {
 
 BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
   var type = element.type;
-  var h = this.handlers[type];
+  var h = this._renderer(type);
 
   /* jshint -W040 */
   return h(parentGfx, element);
@@ -1901,7 +1902,7 @@ BpmnRenderer.prototype.drawShape = function(parentGfx, element) {
 
 BpmnRenderer.prototype.drawConnection = function(parentGfx, element) {
   var type = element.type;
-  var h = this.handlers[type];
+  var h = this._renderer(type);
 
   /* jshint -W040 */
   return h(parentGfx, element);

package/lib/features/auto-resize/BpmnAutoResizeProvider.js

@@ -33,6 +33,12 @@ BpmnAutoResizeProvider.$inject = [
  */
 BpmnAutoResizeProvider.prototype.canResize = function(elements, target) {
 
+  // do not resize plane elements:
+  // root elements, collapsed sub-processes
+  if (is(target.di, 'bpmndi:BPMNPlane')) {
+    return false;
+  }
+
   if (!is(target, 'bpmn:Participant') && !is(target, 'bpmn:Lane') && !(is(target, 'bpmn:SubProcess'))) {
     return false;
   }

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

@@ -145,6 +145,7 @@ export default function BpmnCopyPaste(bpmnFactory, eventBus, moddleCopy) {
     );
 
     newDi = bpmnFactory.create(oldDi.$type);
+    newDi.bpmnElement = newBusinessObject;
 
     descriptor.di = moddleCopy.copyElement(
       oldDi,

package/lib/features/di-ordering/BpmnDiOrdering.js

@@ -2,6 +2,7 @@ import { getDi } from '../../util/ModelUtil';
 
 import {
   filter,
+  forEach,
   map
 } from 'min-dash';
 
@@ -15,21 +16,24 @@ export default function BpmnDiOrdering(eventBus, canvas) {
   eventBus.on('saveXML.start', HIGH_PRIORITY, orderDi);
 
   function orderDi() {
-    var root = canvas.getRootElement(),
-        rootDi = getDi(root),
-        elements,
-        diElements;
+    var rootElements = canvas.getRootElements();
 
-    elements = selfAndAllChildren([ root ], false);
+    forEach(rootElements, function(root) {
+      var rootDi = getDi(root),
+          elements,
+          diElements;
 
-    // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
-    elements = filter(elements, function(element) {
-      return element !== root && !element.labelTarget;
-    });
+      elements = selfAndAllChildren([ root ], false);
+
+      // only bpmndi:Shape and bpmndi:Edge can be direct children of bpmndi:Plane
+      elements = filter(elements, function(element) {
+        return element !== root && !element.labelTarget;
+      });
 
-    diElements = map(elements, getDi);
+      diElements = map(elements, getDi);
 
-    rootDi.set('planeElement', diElements);
+      rootDi.set('planeElement', diElements);
+    });
   }
 }
 

package/lib/features/drilldown/DrilldownBreadcrumbs.js

@@ -0,0 +1,122 @@
+import { domify, classes } from 'min-dom';
+import { find } from 'min-dash';
+
+import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
+import { getBusinessObject, is } from '../../util/ModelUtil';
+import {
+  getPlaneIdFromShape
+} from '../../util/DrilldownUtil';
+
+var OPEN_CLASS = 'bjs-breadcrumbs-shown';
+
+
+/**
+ * Adds overlays that allow switching planes on collapsed subprocesses.
+ *
+ * @param {eventBus} eventBus
+ * @param {elementRegistry} elementRegistry
+ * @param {overlays} overlays
+ * @param {canvas} canvas
+ */
+export default function DrilldownBreadcrumbs(eventBus, elementRegistry, overlays, canvas) {
+  var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+  var container = canvas.getContainer();
+  var containerClasses = classes(container);
+  container.appendChild(breadcrumbs);
+
+  var boParents = [];
+
+  // update breadcrumbs if name or ID of the primary shape changes
+  eventBus.on('element.changed', function(e) {
+    var shape = e.element,
+        bo = getBusinessObject(shape);
+
+    var isPresent = find(boParents, function(el) {
+      return el === bo;
+    });
+
+    if (!isPresent) {
+      return;
+    }
+
+    updateBreadcrumbs();
+  });
+
+  /**
+   * Updates the displayed breadcrumbs. If no element is provided, only the
+   * labels are updated.
+   *
+   * @param {djs.model.Base} [element]
+   */
+  function updateBreadcrumbs(element) {
+    if (element) {
+      boParents = getBoParentChain(element);
+    }
+
+    var path = boParents.map(function(parent) {
+      var title = escapeHTML(parent.name || parent.id);
+      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+
+      var parentPlane = canvas.findRoot(getPlaneIdFromShape(parent)) || canvas.findRoot(parent.id);
+
+      // when the root is a collaboration, the process does not have a corresponding
+      // element in the elementRegisty. Instead, we search for the corresponding participant
+      if (!parentPlane && is(parent, 'bpmn:Process')) {
+        var participant = elementRegistry.find(function(element) {
+          var bo = getBusinessObject(element);
+          return bo && bo.processRef && bo.processRef === parent;
+        });
+
+        parentPlane = canvas.findRoot(participant.id);
+      }
+
+      link.addEventListener('click', function() {
+        canvas.setRootElement(parentPlane);
+      });
+
+      return link;
+    });
+
+    breadcrumbs.innerHTML = '';
+
+    // show breadcrumbs and expose state to .djs-container
+    var visible = path.length > 1;
+    containerClasses.toggle(OPEN_CLASS, visible);
+
+    path.forEach(function(el) {
+      breadcrumbs.appendChild(el);
+    });
+  }
+
+  eventBus.on('root.set', function(event) {
+    updateBreadcrumbs(event.element);
+  });
+
+}
+
+DrilldownBreadcrumbs.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+// helpers //////////
+
+/**
+ * Returns the parents for the element using the business object chain,
+ * starting with the root element.
+ *
+ * @param {djs.model.Shape} child
+ *
+ * @returns {Array<djs.model.Shape>} parents
+ */
+function getBoParentChain(child) {
+  var bo = getBusinessObject(child);
+
+  var parents = [];
+
+  for (var element = bo; element; element = element.$parent) {
+    if (is(element, 'bpmn:SubProcess') || is(element, 'bpmn:Process')) {
+      parents.push(element);
+    }
+  }
+
+  return parents.reverse();
+}

package/lib/features/drilldown/DrilldownCentering.js

@@ -1,24 +1,37 @@
+import { is } from '../../util/ModelUtil';
+
 /**
- * Move collapsed subprocesses into view when drilling down. Zoom and scroll
- * are saved in a session.
+ * Move collapsed subprocesses into view when drilling down.
+ *
+ * Zoom and scroll are saved in a session.
  *
  * @param {eventBus} eventBus
  * @param {canvas} canvas
  */
 export default function DrilldownCentering(eventBus, canvas) {
-  var currentPlane = 'base';
-  var positionMap = {};
 
-  eventBus.on('plane.set', function(event) {
+  var currentRoot = null;
+  var positionMap = new Map();
+
+  eventBus.on('root.set', function(event) {
+    var newRoot = event.element;
     var currentViewbox = canvas.viewbox();
-    positionMap[currentPlane] = {
+    var storedViewbox = positionMap.get(newRoot);
+
+    positionMap.set(currentRoot, {
       x: currentViewbox.x,
       y: currentViewbox.y,
       zoom: currentViewbox.scale
-    };
+    });
 
-    var planeId = event.plane.name;
-    var storedViewbox = positionMap[planeId] || { x: 0, y: 0, zoom: 1 };
+    currentRoot = newRoot;
+
+    // current root was replaced with a collaboration, we don't update the viewbox
+    if (is(newRoot, 'bpmn:Collaboration') && !storedViewbox) {
+      return;
+    }
+
+    storedViewbox = storedViewbox || { x: 0, y: 0, zoom: 1 };
 
     var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
         dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
@@ -33,9 +46,73 @@ export default function DrilldownCentering(eventBus, canvas) {
     if (storedViewbox.zoom !== currentViewbox.scale) {
       canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
     }
+  });
 
-    currentPlane = planeId;
+  eventBus.on('diagram.clear', function() {
+    positionMap.clear();
+    currentRoot = null;
   });
+
 }
 
 DrilldownCentering.$inject = [ 'eventBus', 'canvas' ];
+
+
+/**
+ * ES5 Map implementation. Works.
+ */
+function Map() {
+
+  this._entries = [];
+
+  this.set = function(key, value) {
+
+    var found = false;
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        this._entries[k][1] = value;
+
+        found = true;
+
+        break;
+      }
+    }
+
+    if (!found) {
+      this._entries.push([ key, value ]);
+    }
+  };
+
+  this.get = function(key) {
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        return this._entries[k][1];
+      }
+    }
+
+    return null;
+  };
+
+  this.clear = function() {
+    this._entries.length = 0;
+  };
+
+  this.remove = function(key) {
+
+    var idx = -1;
+
+    for (var k in this._entries) {
+      if (this._entries[k][0] === key) {
+        idx = k;
+
+        break;
+      }
+    }
+
+    if (idx !== -1) {
+      this._entries.splice(idx, 1);
+    }
+  };
+}

package/lib/features/drilldown/DrilldownOverlayBehavior.js

@@ -0,0 +1,181 @@
+import inherits from 'inherits';
+
+import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
+import { is } from '../../util/ModelUtil';
+import { classes, domify } from 'min-dom';
+import { getPlaneIdFromShape } from '../../util/DrilldownUtil';
+
+var LOW_PRIORITY = 250;
+var ARROW_DOWN_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.81801948,3.50735931 L10.4996894,9.1896894 L10.5,4 L12,4 L12,12 L4,12 L4,10.5 L9.6896894,10.4996894 L3.75735931,4.56801948 C3.46446609,4.27512627 3.46446609,3.80025253 3.75735931,3.50735931 C4.05025253,3.21446609 4.52512627,3.21446609 4.81801948,3.50735931 Z"/></svg>';
+
+var EMPTY_MARKER = 'bjs-drilldown-empty';
+
+export default function DrilldownOverlayBehavior(
+    canvas, eventBus, elementRegistry, overlays
+) {
+  CommandInterceptor.call(this, eventBus);
+
+  this._canvas = canvas;
+  this._eventBus = eventBus;
+  this._elementRegistry = elementRegistry;
+  this._overlays = overlays;
+
+  var self = this;
+
+  this.executed('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+    var shape = context.shape;
+
+    // Add overlay to the collapsed shape
+    if (self.canDrillDown(shape)) {
+      self.addOverlay(shape);
+    } else {
+      self.removeOverlay(shape);
+    }
+  }, true);
+
+
+  this.reverted('shape.toggleCollapse', LOW_PRIORITY, function(context) {
+    var shape = context.shape;
+
+    // Add overlay to the collapsed shape
+    if (self.canDrillDown(shape)) {
+      self.addOverlay(shape);
+    } else {
+      self.removeOverlay(shape);
+    }
+  }, true);
+
+
+  this.executed(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+    function(context) {
+      var oldParent = context.oldParent,
+          newParent = context.newParent || context.parent,
+          shape = context.shape;
+
+      // Add overlay to the collapsed shape
+      if (self.canDrillDown(shape)) {
+        self.addOverlay(shape);
+      }
+
+      self.updateDrilldownOverlay(oldParent);
+      self.updateDrilldownOverlay(newParent);
+      self.updateDrilldownOverlay(shape);
+    }, true);
+
+
+  this.reverted(['shape.create', 'shape.move', 'shape.delete'], LOW_PRIORITY,
+    function(context) {
+      var oldParent = context.oldParent,
+          newParent = context.newParent || context.parent,
+          shape = context.shape;
+
+      // Add overlay to the collapsed shape
+      if (self.canDrillDown(shape)) {
+        self.addOverlay(shape);
+      }
+
+      self.updateDrilldownOverlay(oldParent);
+      self.updateDrilldownOverlay(newParent);
+      self.updateDrilldownOverlay(shape);
+    }, true);
+
+
+  eventBus.on('import.done', function() {
+    elementRegistry.filter(function(e) {
+      return self.canDrillDown(e);
+    }).map(function(el) {
+      self.addOverlay(el);
+    });
+  });
+
+}
+
+inherits(DrilldownOverlayBehavior, CommandInterceptor);
+
+DrilldownOverlayBehavior.prototype.updateDrilldownOverlay = function(shape) {
+  var canvas = this._canvas;
+
+  if (!shape) {
+    return;
+  }
+
+  var root = canvas.findRoot(shape);
+  if (root) {
+    this.updateOverlayVisibility(root);
+  }
+};
+
+
+DrilldownOverlayBehavior.prototype.canDrillDown = function(element) {
+  var canvas = this._canvas;
+  return is(element, 'bpmn:SubProcess') && canvas.findRoot(getPlaneIdFromShape(element));
+};
+
+/**
+ * Updates visibility of the drilldown overlay. If the plane has no elements,
+ * the drilldown will be only shown when the element is selected.
+ *
+ * @param {djs.model.Shape|djs.model.Root} element collapsed shape or root element
+ */
+DrilldownOverlayBehavior.prototype.updateOverlayVisibility = function(element) {
+  var overlays = this._overlays;
+
+  var bo = element.businessObject;
+
+  var overlay = overlays.get({ element: bo.id, type: 'drilldown' })[0];
+
+  if (!overlay) {
+    return;
+  }
+
+  var hasContent = bo && bo.flowElements && bo.flowElements.length;
+  classes(overlay.html).toggle(EMPTY_MARKER, !hasContent);
+};
+
+/**
+ * Attaches a drilldown button to the given element. We assume that the plane has
+ * the same id as the element.
+ *
+ * @param {djs.model.Shape} element collapsed shape
+ */
+DrilldownOverlayBehavior.prototype.addOverlay = function(element) {
+  var canvas = this._canvas;
+  var overlays = this._overlays;
+
+  var existingOverlays = overlays.get({ element: element, type: 'drilldown' });
+  if (existingOverlays.length) {
+    this.removeOverlay(element);
+  }
+
+  var button = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+  button.addEventListener('click', function() {
+    canvas.setRootElement(canvas.findRoot(getPlaneIdFromShape(element)));
+  });
+
+  overlays.add(element, 'drilldown', {
+    position: {
+      bottom: -7,
+      right: -8
+    },
+    html: button
+  });
+
+  this.updateOverlayVisibility(element);
+};
+
+DrilldownOverlayBehavior.prototype.removeOverlay = function(element) {
+  var overlays = this._overlays;
+
+  overlays.remove({
+    element: element,
+    type: 'drilldown'
+  });
+};
+
+DrilldownOverlayBehavior.$inject = [
+  'canvas',
+  'eventBus',
+  'elementRegistry',
+  'overlays'
+];

package/lib/features/drilldown/SubprocessCompatibility.js

@@ -83,6 +83,15 @@ SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
 
   var newDiagrams = [];
 
+  // create new planes for all collapsed subprocesses, even when they are empty
+  collapsedElements.forEach(function(element) {
+    if (!self._processToDiagramMap[element.id]) {
+      var diagram = self.createDiagram(element);
+      self._processToDiagramMap[element.id] = diagram;
+      newDiagrams.push(diagram);
+    }
+  });
+
   elementsToMove.forEach(function(element) {
     var diElement = element.diElement;
     var parent = element.parent;
@@ -98,12 +107,6 @@ SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
     }
 
     var diagram = self._processToDiagramMap[parent.id];
-    if (!diagram) {
-      diagram = self.createDiagram(parent);
-      self._processToDiagramMap[parent.id] = diagram;
-      newDiagrams.push(diagram);
-    }
-
     self.moveToDiPlane(diElement, diagram.plane);
   });
 

package/lib/features/drilldown/index.js

@@ -1,14 +1,17 @@
 import OverlaysModule from 'diagram-js/lib/features/overlays';
 import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+import RootElementsModule from 'diagram-js/lib/features/root-elements';
 
-import DrilldownOverlays from './DrilldownOverlays';
+import DrilldownBreadcrumbs from './DrilldownBreadcrumbs';
 import DrilldownCentering from './DrilldownCentering';
 import SubprocessCompatibility from './SubprocessCompatibility';
+import DrilldownOverlayBehavior from './DrilldownOverlayBehavior';
 
 export default {
-  __depends__: [ OverlaysModule, ChangeSupportModule ],
-  __init__: [ 'drilldownOverlays', 'drilldownCentering', 'subprocessCompatibility'],
-  drilldownOverlays: [ 'type', DrilldownOverlays ],
+  __depends__: [ OverlaysModule, ChangeSupportModule, RootElementsModule ],
+  __init__: [ 'drilldownBreadcrumbs', 'drilldownOverlayBehavior', 'drilldownCentering', 'subprocessCompatibility'],
+  drilldownBreadcrumbs: [ 'type', DrilldownBreadcrumbs ],
   drilldownCentering: [ 'type', DrilldownCentering ],
+  drilldownOverlayBehavior: [ 'type', DrilldownOverlayBehavior ],
   subprocessCompatibility: [ 'type', SubprocessCompatibility ]
 };

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

@@ -105,7 +105,7 @@ export default function LabelEditingProvider(
 
   function activateDirectEdit(element, force) {
     if (force ||
-        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation', 'bpmn:Group' ]) ||
+        isAny(element, [ 'bpmn:Task', 'bpmn:TextAnnotation' ]) ||
         isCollapsedSubProcess(element)) {
 
       directEditing.activate(element);

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

@@ -11,6 +11,7 @@ import {
 } from '../../../util/LabelUtil';
 
 import {
+  getDi,
   is
 } from '../../../util/ModelUtil';
 
@@ -23,7 +24,30 @@ var NULL_DIMENSIONS = {
 /**
  * A handler that updates the text of a BPMN element.
  */
-export default function UpdateLabelHandler(modeling, textRenderer) {
+export default function UpdateLabelHandler(modeling, textRenderer, bpmnFactory) {
+
+  /**
+   * Creates an empty `diLabel` attribute for embedded labels.
+   *
+   * @param {djs.model.Base} element
+   * @param {string} text
+   */
+  function ensureInternalLabelDi(element, text) {
+    if (isLabelExternal(element)) {
+      return;
+    }
+
+    var di = getDi(element);
+
+    if (text && !di.label) {
+      di.label = bpmnFactory.create('bpmndi:BPMNLabel');
+    }
+
+    if (!text && di.label) {
+      di.label = null;
+    }
+  }
+
 
   /**
    * Set the label and return the changed elements.
@@ -42,6 +66,8 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
 
     setLabel(label, text, labelTarget !== label);
 
+    ensureInternalLabelDi(element, text);
+
     return [ label, labelTarget ];
   }
 
@@ -127,7 +153,8 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
 
 UpdateLabelHandler.$inject = [
   'modeling',
-  'textRenderer'
+  'textRenderer',
+  'bpmnFactory'
 ];
 
 

package/lib/features/modeling/BpmnFactory.js

@@ -42,6 +42,10 @@ BpmnFactory.prototype._needsId = function(element) {
 };
 
 BpmnFactory.prototype._ensureId = function(element) {
+  if (element.id) {
+    this._model.ids.claim(element.id, element);
+    return;
+  }
 
   // generate semantic ids for elements
   // bpmn:SequenceFlow -> SequenceFlow_ID
@@ -112,7 +116,7 @@ BpmnFactory.prototype.createDiWaypoint = function(point) {
 BpmnFactory.prototype.createDiEdge = function(semantic, attrs) {
   return this.create('bpmndi:BPMNEdge', assign({
     bpmnElement: semantic,
-    waypoints: this.createDiWaypoints([])
+    waypoint: this.createDiWaypoints([])
   }, attrs));
 };