bpmn-js 8.8.0 → 9.0.0-subprocesses.1

package/lib/features/replace/BpmnReplace.js

@@ -36,6 +36,7 @@ function copyProperties(source, target, properties) {
   });
 }
 
+
 var CUSTOM_PROPERTIES = [
   'cancelActivity',
   'instantiate',
@@ -44,8 +45,10 @@ var CUSTOM_PROPERTIES = [
   'isInterrupting'
 ];
 
-
-function toggeling(element, target) {
+/**
+ * Check if element should be collapsed or expanded.
+ */
+function shouldToggleCollapsed(element, targetElement) {
 
   var oldCollapsed = (
     element && has(element, 'collapsed') ? element.collapsed : !isExpanded(element)
@@ -53,11 +56,11 @@ function toggeling(element, target) {
 
   var targetCollapsed;
 
-  if (target && (has(target, 'collapsed') || has(target, 'isExpanded'))) {
+  if (targetElement && (has(targetElement, 'collapsed') || has(targetElement, 'isExpanded'))) {
 
     // property is explicitly set so use it
     targetCollapsed = (
-      has(target, 'collapsed') ? target.collapsed : !target.isExpanded
+      has(targetElement, 'collapsed') ? targetElement.collapsed : !targetElement.isExpanded
     );
   } else {
 
@@ -66,7 +69,6 @@ function toggeling(element, target) {
   }
 
   if (oldCollapsed !== targetCollapsed) {
-    element.collapsed = oldCollapsed;
     return true;
   }
 
@@ -74,7 +76,6 @@ function toggeling(element, target) {
 }
 
 
-
 /**
  * This module takes care of replacing BPMN elements
  */
@@ -105,15 +106,13 @@ export default function BpmnReplace(
     var type = target.type,
         oldBusinessObject = element.businessObject;
 
-    if (isSubProcess(oldBusinessObject)) {
-      if (type === 'bpmn:SubProcess') {
-        if (toggeling(element, target)) {
+    if (isSubProcess(oldBusinessObject) && type === 'bpmn:SubProcess') {
+      if (shouldToggleCollapsed(element, target)) {
 
-          // expanding or collapsing process
-          modeling.toggleCollapse(element);
+        // expanding or collapsing process
+        modeling.toggleCollapse(element);
 
-          return element;
-        }
+        return element;
       }
     }
 
@@ -121,9 +120,20 @@ export default function BpmnReplace(
 
     var newElement = {
       type: type,
-      businessObject: newBusinessObject
+      businessObject: newBusinessObject,
     };
 
+    newElement.di = {};
+
+    // colors will be set to DI
+    copyProperties(element.di, newElement.di, [
+      'fill',
+      'stroke',
+      'background-color',
+      'border-color',
+      'color'
+    ]);
+
     var elementProps = getPropertyNames(oldBusinessObject.$descriptor),
         newElementProps = getPropertyNames(newBusinessObject.$descriptor, true),
         copyProps = intersection(elementProps, newElementProps);
@@ -183,7 +193,7 @@ export default function BpmnReplace(
       if (isSubProcess(oldBusinessObject)) {
 
         // no toggeling, so keep old state
-        newElement.isExpanded = isExpanded(oldBusinessObject);
+        newElement.isExpanded = isExpanded(element);
       }
 
       // else if property is explicitly set, use it
@@ -194,7 +204,7 @@ export default function BpmnReplace(
       // TODO: need also to respect min/max Size
       // copy size, from an expanded subprocess to an expanded alternative subprocess
       // except bpmn:Task, because Task is always expanded
-      if ((isExpanded(oldBusinessObject) && !is(oldBusinessObject, 'bpmn:Task')) && newElement.isExpanded) {
+      if ((isExpanded(element) && !is(oldBusinessObject, 'bpmn:Task')) && newElement.isExpanded) {
         newElement.width = element.width;
         newElement.height = element.height;
       }
@@ -219,12 +229,12 @@ export default function BpmnReplace(
 
       // apply same width and default height
       newElement.width = element.width;
-      newElement.height = elementFactory._getDefaultSize(newBusinessObject).height;
+      newElement.height = elementFactory.getDefaultSize(newElement).height;
     }
 
     if (!rules.allowed('shape.resize', { shape: newBusinessObject })) {
-      newElement.height = elementFactory._getDefaultSize(newBusinessObject).height;
-      newElement.width = elementFactory._getDefaultSize(newBusinessObject).width;
+      newElement.height = elementFactory.getDefaultSize(newElement).height;
+      newElement.width = elementFactory.getDefaultSize(newElement).width;
     }
 
     newBusinessObject.name = oldBusinessObject.name;
@@ -262,16 +272,6 @@ export default function BpmnReplace(
       newElement.x = element.x + (element.width - newElement.width) / 2;
     }
 
-    newElement.di = {};
-
-    // colors will be set to DI
-    copyProperties(oldBusinessObject.di, newElement.di, [
-      'fill',
-      'stroke',
-      'background-color',
-      'border-color',
-      'color'
-    ]);
 
     newElement = replace.replaceElement(element, newElement, hints);
 

package/lib/features/subprocess-navigation/SubprocessCentering.js

@@ -0,0 +1,55 @@
+var defaultPosition = { x: 100, y: 50 };
+
+export default function SubprocessCentering(eventBus, canvas) {
+  var currentPlane = 'base';
+  var positionMap = {};
+
+  eventBus.on('plane.set', function(event) {
+
+    var currentViewbox = canvas.viewbox();
+    positionMap[currentPlane] = {
+      x: currentViewbox.x,
+      y: currentViewbox.y,
+      zoom: currentViewbox.scale
+    };
+
+    var planeId = event.plane.name;
+    var storedViewbox = positionMap[planeId];
+
+    if (!storedViewbox) {
+      if (!event.plane.rootElement.isImplicit) {
+        storedViewbox = {
+          x: 0,
+          y: 0,
+          zoom: 1
+        };
+      }
+      else {
+        var currentBoundingBox = canvas.getActiveLayer().getBBox();
+        storedViewbox = {
+          x: currentBoundingBox.x - defaultPosition.x,
+          y: currentBoundingBox.y - defaultPosition.y,
+          zoom: 1
+        };
+      }
+    }
+
+    var dx = (currentViewbox.x - storedViewbox.x) * currentViewbox.scale,
+        dy = (currentViewbox.y - storedViewbox.y) * currentViewbox.scale;
+
+    if (dx !== 0 || dy !== 0) {
+      canvas.scroll({
+        dx: dx,
+        dy: dy
+      });
+    }
+
+    if (storedViewbox.zoom !== currentViewbox.scale) {
+      canvas.zoom(storedViewbox.zoom, { x: 0, y: 0 });
+    }
+
+    currentPlane = planeId;
+  });
+}
+
+SubprocessCentering.$inject = [ 'eventBus', 'canvas' ];

package/lib/features/subprocess-navigation/SubprocessCompatibility.js

@@ -0,0 +1,135 @@
+
+import { selfAndAllChildren } from 'diagram-js/lib/util/Elements';
+import { isExpanded } from '../../util/DiUtil';
+import { getBusinessObject, getDi, is } from '../../util/ModelUtil';
+
+export default function SubprocessCompatibility(eventBus, elementRegistry, canvas, moddle, elementFactory, bpmnjs) {
+  this._eventBus = eventBus;
+  this._elementRegistry = elementRegistry;
+  this._canvas = canvas;
+  this._bpmnjs = bpmnjs;
+  this._moddle = moddle;
+  this._elementFactory = elementFactory;
+
+  var self = this;
+
+  eventBus.on('import.done', 1500, function() {
+    self._handleImport();
+  });
+}
+
+SubprocessCompatibility.prototype._handleImport = function() {
+  var elementRegistry = this._elementRegistry;
+  var canvas = this._canvas;
+  var elementFactory = this._elementFactory;
+  var self = this;
+  var legacyProcesses = elementRegistry.filter(function(element) {
+    return is(element, 'bpmn:SubProcess') && !isExpanded(element) && element.children && element.children.length;
+  });
+
+  legacyProcesses.forEach(function(oldParent) {
+    var bo = getBusinessObject(oldParent);
+
+    var newDiagram = self.createDiagram(bo);
+
+    var newParent = elementFactory.createRoot(
+      {
+        id: bo.id,
+        type: bo.$type,
+        businessObject: bo,
+        di: newDiagram.plane
+      }
+    );
+
+    newParent.id = newParent.id + '_plane';
+
+    canvas.createPlane(bo.id, newParent);
+
+    var elementsToChange = selfAndAllChildren(oldParent).filter(function(el) {
+      return el !== oldParent;
+    });
+
+    self.moveElementsToRoot(elementsToChange);
+
+    elementsToChange.forEach(function(el) {
+      if (el.parent === oldParent) {
+        el.parent = newParent;
+      }
+      el.hidden = el.parent && (el.parent.hidden || el.parent.collapsed);
+
+      self.moveToDiPlane(el, newDiagram.plane);
+
+      self._eventBus.fire('elements.changed', { elements: [el] });
+    });
+  });
+
+};
+
+SubprocessCompatibility.prototype.moveToDiPlane = function(element, newPlane) {
+  var di = getDi(element);
+  var containingDiagram = findRootDiagram(di);
+
+  // Remove DI from old Plane and add it to the new one
+  var parentPlaneElement = containingDiagram.plane.get('planeElement');
+  parentPlaneElement.splice(parentPlaneElement.indexOf(di), 1);
+  newPlane.get('planeElement').push(di);
+};
+
+SubprocessCompatibility.prototype.moveElementsToRoot = function(elements) {
+  var defaultPosition = { x: 180, y: 160 },
+      minX = Infinity,
+      minY = Infinity;
+
+  elements.forEach(function(el) {
+    minX = Math.min(minX, el.x || Infinity);
+    minY = Math.min(minY, el.y || Infinity);
+  });
+
+  var xOffset = defaultPosition.x - minX;
+  var yOffset = defaultPosition.y - minY;
+
+  elements.forEach(function(el) {
+    if (el.waypoints) {
+      el.waypoints.forEach(function(waypoint) {
+        waypoint.x = waypoint.x + xOffset;
+        waypoint.y = waypoint.y + yOffset;
+      });
+    } else {
+      el.x = el.x + xOffset;
+      el.y = el.y + yOffset;
+    }
+  });
+};
+
+SubprocessCompatibility.prototype.getDefinitions = function() {
+  return this._bpmnjs._definitions || [];
+};
+
+SubprocessCompatibility.prototype.getDiagrams = function() {
+  return this.getDefinitions().diagrams || [];
+};
+
+SubprocessCompatibility.prototype.createDiagram = function(bo) {
+  var plane = this._moddle.create('bpmndi:BPMNPlane', { bpmnElement: bo });
+  var diagram = this._moddle.create('bpmndi:BPMNDiagram', {
+    plane: plane
+  });
+  plane.$parent = diagram;
+  plane.bpmnElement = bo;
+  diagram.$parent = this.getDefinitions();
+  this.getDiagrams().push(diagram);
+  return diagram;
+};
+
+SubprocessCompatibility.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'moddle', 'elementFactory', 'bpmnjs' ];
+
+
+//  Util
+
+var findRootDiagram = function(element) {
+  if (is(element, 'bpmndi:BPMNDiagram')) {
+    return element;
+  } else {
+    return findRootDiagram(element.$parent);
+  }
+};

package/lib/features/subprocess-navigation/SubprocessElements.js

@@ -0,0 +1,55 @@
+import { getBusinessObject, is } from '../../util/ModelUtil';
+
+export default function SubprocessElements(eventBus, elementRegistry, canvas, elementFactory) {
+  var attachBoundaries = function() {
+    var secondaryShapes = elementRegistry.filter(function(el) {
+      return is(el, 'bpmn:SubProcess') && el.isSecondary;
+    });
+
+    secondaryShapes.forEach(function(process) {
+
+      // Add Boundary events
+      if (process.primaryShape && process.primaryShape.attachers) {
+        process.primaryShape.attachers.forEach(function(boundary) {
+          var bo = getBusinessObject(boundary);
+
+          var primary = process.primaryShape;
+
+          var relativeXPos = (boundary.x + 15 - primary.x) / primary.width;
+          var relativeYPos = (boundary.y + 15 - primary.y) / primary.height;
+
+          var dx = process.x + (process.width * relativeXPos) - 15;
+          var dy = process.y + (process.height * relativeYPos) - 15;
+
+          var boundaryShape = elementFactory.createShape({
+            id: bo.id + '_secondary',
+            businessObject: bo,
+            type: 'bpmn:BoundaryEvent',
+            hidden: false,
+            x: dx,
+            y: dy,
+            width: 30,
+            height: 30,
+            isFrame: false,
+            isSecondary: true,
+            primaryShape: boundary,
+            di: boundary.di
+          });
+
+          canvas.addShape(boundaryShape, process.parent);
+
+          if (!process.attachers) {
+            process.attachers = [];
+          }
+
+          process.attachers.push(boundaryShape);
+        });
+      }
+    });
+  };
+
+  eventBus.on('import.done', attachBoundaries);
+}
+
+
+SubprocessElements.$inject = [ 'eventBus', 'elementRegistry', 'canvas', 'elementFactory' ];

package/lib/features/subprocess-navigation/SubprocessFlows.js

@@ -0,0 +1,109 @@
+var FLOW_LENGTH = 50;
+var HIGH_RENDER_PRIORITY = 2000;
+
+export default function SubprocessFlows(eventBus, config) {
+
+  var mutedStrokeColor = (config && config.mutedStrokeColor) || '#dddddd';
+
+  function drawFakeFlows(element, parentGfx) {
+    var primary = element.primaryShape;
+
+    var drawFakeConnection = function(connection, isOutgoing) {
+
+      var segment;
+      if (isOutgoing) {
+        segment = connection.waypoints.slice(0, 2);
+
+        // Reverse order for normalizing
+        segment = segment.reverse();
+      } else {
+        segment = connection.waypoints.slice(connection.waypoints.length - 2);
+      }
+
+      var endpoint = segment[1];
+
+      var relativePosition = {
+        x: (endpoint.x - primary.x) / primary.width,
+        y: (endpoint.y - primary.y) / primary.height
+      };
+
+      var anchorPoint = {
+        x: endpoint.x - (element.width * relativePosition.x),
+        y: endpoint.y - (element.height * relativePosition.y)
+      };
+
+      var newWaypoints = segment.map(function(el) {
+        return { x: el.x - anchorPoint.x, y: el.y - anchorPoint.y };
+      });
+
+      newWaypoints[0] = normalizeLength(newWaypoints[1], newWaypoints[0], FLOW_LENGTH);
+
+      var attrs = {
+        stroke: mutedStrokeColor
+      };
+
+      if (isOutgoing) {
+
+        // Reverse order again for correct end marker position
+        newWaypoints = newWaypoints.reverse();
+      } else {
+
+        // Remove start marker for incoming flows
+        attrs.markerStart = undefined;
+      }
+
+      eventBus.fire('render.connection', {
+        type: connection.type,
+        gfx: parentGfx,
+        element: {
+          type: connection.type,
+          waypoints: newWaypoints,
+          di: connection.di,
+          businessObject: connection.businessObject
+        },
+        attrs: attrs
+      });
+    };
+
+    primary.incoming && primary.incoming.forEach(function(connection) {
+      drawFakeConnection(connection, false);
+    });
+
+    primary.outgoing && primary.outgoing.forEach(function(connection) {
+      drawFakeConnection(connection, true);
+    });
+  }
+
+  eventBus.on([ 'render.shape' ], HIGH_RENDER_PRIORITY, function(evt, context) {
+    var element = context.element,
+        visuals = context.gfx;
+
+    if (element.isSecondary && element.primaryShape) {
+      drawFakeFlows(element, visuals);
+    }
+
+  });
+
+}
+
+SubprocessFlows.$inject = [ 'eventBus', 'config' ];
+
+
+// helpers
+
+function normalizeLength(fixedPoint, variablePoint, length) {
+  var dx = fixedPoint.x - variablePoint.x,
+      dy = fixedPoint.y - variablePoint.y,
+      totalDistance = Math.abs(dx) + Math.abs(dy);
+
+  dx = dx / totalDistance;
+  dy = dy / totalDistance;
+
+  dx *= length;
+  dy *= length;
+
+  return {
+    x: fixedPoint.x - dx,
+    y: fixedPoint.y - dy
+  };
+}

package/lib/features/subprocess-navigation/SubprocessOverlays.js

@@ -0,0 +1,104 @@
+import { domify } from 'min-dom';
+
+import { escapeHTML } from 'diagram-js/lib/util/EscapeUtil';
+import { getBusinessObject, is } from '../../util/ModelUtil';
+
+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 ARROW_UP_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.1819805,12.4926407 L5.5003106,6.8103106 L5.5,12 L4,12 L4,4 L12,4 L12,5.5 L6.3103106,5.5003106 L12.2426407,11.4319805 C12.5355339,11.7248737 12.5355339,12.1997475 12.2426407,12.4926407 C11.9497475,12.7855339 11.4748737,12.7855339 11.1819805,12.4926407 Z"/></svg>';
+
+export default function SubprocessOverlays(eventBus, elementRegistry, overlays, canvas) {
+
+  function createBreadcrumbs(subProcess) {
+    var breadcrumbs = domify('<ul class="bjs-breadcrumbs"></ul>');
+    var drillUp = domify('<button class="bjs-drilldown">' + ARROW_UP_SVG + '</button>');
+    drillUp.addEventListener('click', function() {
+      var plane = canvas.findPlane(getBusinessObject(subProcess).id);
+      canvas.setActivePlane(plane);
+    });
+
+    breadcrumbs.appendChild(drillUp);
+
+    var parents = getParentChain(subProcess);
+
+    var path = parents.map(function(el) {
+      var title = escapeHTML(el.name) || el.id;
+      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
+
+      link.addEventListener('click', function() {
+        if (canvas.getPlane(el.id)) {
+          canvas.setActivePlane(el.id);
+        } else {
+          var plane = canvas.findPlane(el.id);
+          canvas.setActivePlane(plane);
+        }
+      });
+
+      return link;
+    });
+
+    path.forEach(function(el) {
+      breadcrumbs.appendChild(el);
+    });
+
+    overlays.add(subProcess, {
+      position: {
+        top: -30,
+        left: -10
+      },
+      html: breadcrumbs
+    });
+  }
+
+  var createDrilldown = function(element) {
+    var html = domify('<button class="bjs-drilldown">' + ARROW_DOWN_SVG + '</button>');
+
+    html.addEventListener('click', function() {
+      canvas.setActivePlane(element.id);
+    });
+
+    overlays.add(element, {
+      position: {
+        bottom: -7,
+        right: -8
+      },
+      html: html
+    });
+  };
+
+  var addOverlays = function(elements) {
+    elements.forEach(function(element) {
+      if (is(element, 'bpmn:SubProcess')
+          && element.collapsed
+          && canvas.getPlane(element.id)) {
+        createDrilldown(element);
+      }
+
+      if (is(element, 'bpmn:SubProcess') && element.isSecondary) {
+        createBreadcrumbs(element);
+      }
+    });
+  };
+
+  eventBus.on('import.done', function() {
+    addOverlays(elementRegistry.filter(function(el) {
+      return is(el, 'bpmn:SubProcess');
+    }));
+  });
+}
+
+SubprocessOverlays.$inject = [ 'eventBus', 'elementRegistry', 'overlays', 'canvas' ];
+
+
+var getParentChain = function(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/subprocess-navigation/index.js

@@ -0,0 +1,18 @@
+import OverlaysModule from 'diagram-js/lib/features/overlays';
+import ChangeSupportModule from 'diagram-js/lib/features/change-support';
+
+import SubprocessElements from './SubprocessElements';
+import SubprocessCentering from './SubprocessCentering';
+import SubprocessCompatibility from './SubprocessCompatibility';
+import SubprocessOverlays from './SubprocessOverlays';
+import SubprocessFlows from './SubprocessFlows';
+
+export default {
+  __depends__: [ OverlaysModule, ChangeSupportModule ],
+  __init__: [ 'subprocessElements', 'subprocessOverlays', 'subprocessCompatibility', 'subprocessCentering', 'subprocessFlows' ],
+  subprocessElements: [ 'type', SubprocessElements ],
+  subprocessOverlays: [ 'type', SubprocessOverlays ],
+  subprocessCompatibility: [ 'type', SubprocessCompatibility ],
+  subprocessCentering: [ 'type', SubprocessCentering ],
+  subprocessFlows: ['type', SubprocessFlows]
+};