bpmn-js 9.0.2 → 9.1.0

package/lib/BaseViewer.js

@@ -13,6 +13,7 @@ import {
 
 import {
   domify,
+  assignStyle,
   query as domQuery,
   remove as domRemove
 } from 'min-dom';
@@ -655,7 +656,7 @@ BaseViewer.prototype._createContainer = function(options) {
 
   var container = domify('<div class="bjs-container"></div>');
 
-  assign(container.style, {
+  assignStyle(container, {
     width: ensureUnit(options.width),
     height: ensureUnit(options.height),
     position: options.position
@@ -735,7 +736,8 @@ function findBPMNDiagram(definitions, diagramId) {
 import {
   open as openPoweredBy,
   BPMNIO_IMG,
-  LINK_STYLES as BPMNIO_LINK_STYLES
+  LOGO_STYLES,
+  LINK_STYLES
 } from './util/PoweredByUtil';
 
 import {
@@ -758,12 +760,20 @@ function addProjectLogo(container) {
        'target="_blank" ' +
        'class="bjs-powered-by" ' +
        'title="Powered by bpmn.io" ' +
-       'style="position: absolute; bottom: 15px; right: 15px; z-index: 100; ' + BPMNIO_LINK_STYLES + '">' +
+      '>' +
       img +
     '</a>';
 
   var linkElement = domify(linkMarkup);
 
+  assignStyle(domQuery('svg', linkElement), LOGO_STYLES);
+  assignStyle(linkElement, LINK_STYLES, {
+    position: 'absolute',
+    bottom: '15px',
+    right: '15px',
+    zIndex: '100'
+  });
+
   container.appendChild(linkElement);
 
   domEvent.bind(linkElement, 'click', function(event) {

package/lib/features/drilldown/DrilldownOverlayBehavior.js

@@ -80,7 +80,7 @@ export default function DrilldownOverlayBehavior(
     }, true);
 
 
-  eventBus.on('import.done', function() {
+  eventBus.on('import.render.complete', function() {
     elementRegistry.filter(function(e) {
       return self.canDrillDown(e);
     }).map(function(el) {

package/lib/features/drilldown/SubprocessCompatibility.js

@@ -1,6 +1,6 @@
 
 import { asBounds, asTRBL } from 'diagram-js/lib/layout/LayoutUtil';
-import { is } from '../../util/ModelUtil';
+import { is, isAny } from '../../util/ModelUtil';
 
 var DEFAULT_POSITION = {
   x: 180,
@@ -79,7 +79,7 @@ SubprocessCompatibility.prototype.createNewDiagrams = function(plane) {
       collapsedElements.push(bo);
     }
 
-    if (is(parent, 'bpmn:SubProcess') && parent !== plane.bpmnElement) {
+    if (shouldMoveToPlane(bo, plane)) {
 
       // don't change the array while we iterate over it
       elementsToMove.push({ diElement: diElement, parent: parent });
@@ -168,7 +168,7 @@ SubprocessCompatibility.prototype.createDiagram = function(bo) {
 SubprocessCompatibility.$inject = [ 'eventBus', 'moddle' ];
 
 
-// helpers
+// helpers //////////////////////////
 
 function findRootDiagram(element) {
   if (is(element, 'bpmndi:BPMNDiagram')) {
@@ -199,3 +199,20 @@ function getPlaneBounds(plane) {
 
   return asBounds(planeTrbl);
 }
+
+function shouldMoveToPlane(bo, plane) {
+  var parent = bo.$parent;
+
+  // don't move elements that are already on the plane
+  if (!is(parent, 'bpmn:SubProcess') || parent === plane.bpmnElement) {
+    return false;
+  }
+
+  // dataAssociations are children of the subprocess but rendered on process level
+  // cf. https://github.com/bpmn-io/bpmn-js/issues/1619
+  if (isAny(bo, ['bpmn:DataInputAssociation', 'bpmn:DataOutputAssociation'])) {
+    return false;
+  }
+
+  return true;
+}

package/lib/features/interaction-events/BpmnInteractionEvents.js

@@ -68,6 +68,12 @@ BpmnInteractionEvents.prototype.createParticipantHit = function(element, gfx) {
   // remove existing hits
   this._interactionEvents.removeHits(gfx);
 
+  // add body hit
+  this._interactionEvents.createBoxHit(gfx, 'no-move', {
+    width: element.width,
+    height: element.height
+  });
+
   // add outline hit
   this._interactionEvents.createBoxHit(gfx, 'click-stroke', {
     width: element.width,
@@ -89,6 +95,12 @@ BpmnInteractionEvents.prototype.createSubProcessHit = function(element, gfx) {
   // remove existing hits
   this._interactionEvents.removeHits(gfx);
 
+  // add body hit
+  this._interactionEvents.createBoxHit(gfx, 'no-move', {
+    width: element.width,
+    height: element.height
+  });
+
   // add outline hit
   this._interactionEvents.createBoxHit(gfx, 'click-stroke', {
     width: element.width,

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

@@ -48,7 +48,9 @@ export default function LabelEditingProvider(
     'canvas.viewbox.changing',
     'drag.init',
     'element.mousedown',
-    'popupMenu.open'
+    'popupMenu.open',
+    'root.set',
+    'selection.changed'
   ], function(event) {
 
     if (directEditing.isActive()) {

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

@@ -44,7 +44,7 @@ export default function UpdateLabelHandler(modeling, textRenderer, bpmnFactory)
     }
 
     if (!text && di.label) {
-      di.label = null;
+      delete di.label;
     }
   }
 

package/lib/features/modeling/behavior/SubProcessStartEventBehavior.js

@@ -20,7 +20,7 @@ export default function SubProcessStartEventBehavior(injector, modeling) {
 
     if (
       !is(newShape, 'bpmn:SubProcess') ||
-      !is(oldShape, 'bpmn:Task') ||
+      ! (is(oldShape, 'bpmn:Task') || is(oldShape, 'bpmn:CallActivity')) ||
       !isExpanded(newShape)
     ) {
       return;

package/lib/features/ordering/BpmnOrderingProvider.js

@@ -131,7 +131,7 @@ export default function BpmnOrderingProvider(eventBus, canvas, translate) {
     // render labels always on top
     if (element.labelTarget) {
       return {
-        parent: canvas.findRoot(element.labelTarget) || canvas.getRootElement(),
+        parent: canvas.findRoot(newParent) || canvas.getRootElement(),
         index: -1
       };
     }

package/lib/features/popup-menu/ReplaceMenuProvider.js

@@ -14,7 +14,8 @@ import {
 
 import {
   forEach,
-  filter
+  filter,
+  isUndefined
 } from 'min-dash';
 
 import * as replaceOptions from '../replace/ReplaceOptions';
@@ -426,16 +427,16 @@ ReplaceMenuProvider.prototype._getLoopEntries = function(element) {
   var translate = this._translate;
 
   function toggleLoopEntry(event, entry) {
-    var loopCharacteristics;
+    var loopCharacteristics = getBusinessObject(element).loopCharacteristics;
 
     if (entry.active) {
       loopCharacteristics = undefined;
     } else {
-      loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
-
-      if (entry.options.isSequential) {
-        loopCharacteristics.isSequential = entry.options.isSequential;
+      if (isUndefined(entry.options.isSequential) || !loopCharacteristics) {
+        loopCharacteristics = self._moddle.create(entry.options.loopCharacteristics);
       }
+
+      loopCharacteristics.isSequential = entry.options.isSequential;
     }
     self._modeling.updateProperties(element, { loopCharacteristics: loopCharacteristics });
   }

package/lib/import/Importer.js

@@ -124,7 +124,7 @@ export function importBpmnDiagram(diagram, definitions, bpmnDiagram) {
 }
 
 /**
- * Returns all diagrams in the same hirarchy as the requested diagram.
+ * Returns all diagrams in the same hierarchy as the requested diagram.
  * Includes all parent and sub process diagrams.
  *
  * @param {Array} definitions

package/lib/util/PoweredByUtil.js

@@ -5,59 +5,61 @@
  */
 
 import {
+  assignStyle,
   domify,
-  delegate as domDelegate
+  delegate as domDelegate,
+  query as domQuery
 } from 'min-dom';
 
 
 // inlined ../../resources/logo.svg
-var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21" style="vertical-align:middle"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
+var BPMNIO_LOGO_SVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.02 5.57" width="53" height="21"><path fill="currentColor" d="M1.88.92v.14c0 .41-.13.68-.4.8.33.14.46.44.46.86v.33c0 .61-.33.95-.95.95H0V0h.95c.65 0 .93.3.93.92zM.63.57v1.06h.24c.24 0 .38-.1.38-.43V.98c0-.28-.1-.4-.32-.4zm0 1.63v1.22h.36c.2 0 .32-.1.32-.39v-.35c0-.37-.12-.48-.4-.48H.63zM4.18.99v.52c0 .64-.31.98-.94.98h-.3V4h-.62V0h.92c.63 0 .94.35.94.99zM2.94.57v1.35h.3c.2 0 .3-.09.3-.37v-.6c0-.29-.1-.38-.3-.38h-.3zm2.89 2.27L6.25 0h.88v4h-.6V1.12L6.1 3.99h-.6l-.46-2.82v2.82h-.55V0h.87zM8.14 1.1V4h-.56V0h.79L9 2.4V0h.56v4h-.64zm2.49 2.29v.6h-.6v-.6zM12.12 1c0-.63.33-1 .95-1 .61 0 .95.37.95 1v2.04c0 .64-.34 1-.95 1-.62 0-.95-.37-.95-1zm.62 2.08c0 .28.13.39.33.39s.32-.1.32-.4V.98c0-.29-.12-.4-.32-.4s-.33.11-.33.4z"/><path fill="currentColor" d="M0 4.53h14.02v1.04H0zM11.08 0h.63v.62h-.63zm.63 4V1h-.63v2.98z"/></svg>';
 
 export var BPMNIO_IMG = BPMNIO_LOGO_SVG;
 
-function css(attrs) {
-  return attrs.join(';');
-}
-
-export var LINK_STYLES = css([
-  'color: #404040'
-]);
-
-var LIGHTBOX_STYLES = css([
-  'z-index: 1001',
-  'position: fixed',
-  'top: 0',
-  'left: 0',
-  'right: 0',
-  'bottom: 0'
-]);
-
-var BACKDROP_STYLES = css([
-  'width: 100%',
-  'height: 100%',
-  'background: rgba(40,40,40,0.2)'
-]);
-
-var NOTICE_STYLES = css([
-  'position: absolute',
-  'left: 50%',
-  'top: 40%',
-  'transform: translate(-50%)',
-  'width: 260px',
-  'padding: 10px',
-  'background: white',
-  'box-shadow: 0 1px 4px rgba(0,0,0,0.3)',
-  'font-family: Helvetica, Arial, sans-serif',
-  'font-size: 14px',
-  'display: flex',
-  'line-height: 1.3'
-]);
+export var LOGO_STYLES = {
+  verticalAlign: 'middle'
+};
+
+export var LINK_STYLES = {
+  'color': '#404040'
+};
+
+var LIGHTBOX_STYLES = {
+  'zIndex': '1001',
+  'position': 'fixed',
+  'top': '0',
+  'left': '0',
+  'right': '0',
+  'bottom': '0'
+};
+
+var BACKDROP_STYLES = {
+  'width': '100%',
+  'height': '100%',
+  'background': 'rgba(40,40,40,0.2)'
+};
+
+var NOTICE_STYLES = {
+  'position': 'absolute',
+  'left': '50%',
+  'top': '40%',
+  'transform': 'translate(-50%)',
+  'width': '260px',
+  'padding': '10px',
+  'background': 'white',
+  'boxShadow': '0 1px 4px rgba(0,0,0,0.3)',
+  'fontFamily': 'Helvetica, Arial, sans-serif',
+  'fontSize': '14px',
+  'display': 'flex',
+  'lineHeight': '1.3'
+};
 
 var LIGHTBOX_MARKUP =
-  '<div class="bjs-powered-by-lightbox" style="' + LIGHTBOX_STYLES + '">' +
-    '<div class="backdrop" style="' + BACKDROP_STYLES + '"></div>' +
-    '<div class="notice" style="' + NOTICE_STYLES + '">' +
-      '<a href="https://bpmn.io" target="_blank" rel="noopener" style="margin: 15px 20px 15px 10px; align-self: center;' + LINK_STYLES + '">' +
+  '<div class="bjs-powered-by-lightbox">' +
+    '<div class="backdrop"></div>' +
+    '<div class="notice">' +
+      '<a href="https://bpmn.io" target="_blank" rel="noopener" class="link">' +
         BPMNIO_IMG +
       '</a>' +
       '<span>' +
@@ -70,10 +72,23 @@ var LIGHTBOX_MARKUP =
 
 var lightbox;
 
+function createLightbox() {
+  lightbox = domify(LIGHTBOX_MARKUP);
+
+  assignStyle(lightbox, LIGHTBOX_STYLES);
+  assignStyle(domQuery('svg', lightbox), LOGO_STYLES);
+  assignStyle(domQuery('.backdrop', lightbox), BACKDROP_STYLES);
+  assignStyle(domQuery('.notice', lightbox), NOTICE_STYLES);
+  assignStyle(domQuery('.link', lightbox), LINK_STYLES, {
+    'margin': '15px 20px 15px 10px',
+    'alignSelf': 'center'
+  });
+}
+
 export function open() {
 
   if (!lightbox) {
-    lightbox = domify(LIGHTBOX_MARKUP);
+    createLightbox();
 
     domDelegate.bind(lightbox, '.backdrop', 'click', function(event) {
       document.body.removeChild(lightbox);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpmn-js",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "A bpmn 2.0 toolkit and web modeler",
   "main": "index.js",
   "files": [
@@ -100,12 +100,12 @@
   "dependencies": {
     "bpmn-moddle": "^7.1.2",
     "css.escape": "^1.5.1",
-    "diagram-js": "^8.1.2",
+    "diagram-js": "^8.3.0",
     "diagram-js-direct-editing": "^1.6.3",
     "ids": "^1.0.0",
     "inherits": "^2.0.4",
     "min-dash": "^3.5.2",
-    "min-dom": "^3.1.3",
+    "min-dom": "^3.2.0",
     "object-refs": "^0.3.0",
     "tiny-svg": "^2.2.2"
   }