bpmn-js 9.0.4 → 9.2.1

package/lib/features/modeling/behavior/util/LayoutUtil.js

@@ -0,0 +1,230 @@
+import {
+  getDistancePointPoint,
+  rotateVector,
+  getAngle
+} from './GeometricUtil';
+
+import {
+  getAttachment
+} from './LineAttachmentUtil';
+
+import {
+  roundPoint
+} from 'diagram-js/lib/layout/LayoutUtil';
+
+
+export function findNewLineStartIndex(oldWaypoints, newWaypoints, attachment, hints) {
+
+  var index = attachment.segmentIndex;
+
+  var offset = newWaypoints.length - oldWaypoints.length;
+
+  // segmentMove happened
+  if (hints.segmentMove) {
+
+    var oldSegmentStartIndex = hints.segmentMove.segmentStartIndex,
+        newSegmentStartIndex = hints.segmentMove.newSegmentStartIndex;
+
+    // if point was on moved segment return new segment index
+    if (index === oldSegmentStartIndex) {
+      return newSegmentStartIndex;
+    }
+
+    // point is after new segment index
+    if (index >= newSegmentStartIndex) {
+      return (index+offset < newSegmentStartIndex) ? newSegmentStartIndex : index+offset;
+    }
+
+    // if point is before new segment index
+    return index;
+  }
+
+  // bendpointMove happened
+  if (hints.bendpointMove) {
+
+    var insert = hints.bendpointMove.insert,
+        bendpointIndex = hints.bendpointMove.bendpointIndex,
+        newIndex;
+
+    // waypoints length didnt change
+    if (offset === 0) {
+      return index;
+    }
+
+    // point behind new/removed bendpoint
+    if (index >= bendpointIndex) {
+      newIndex = insert ? index + 1 : index - 1;
+    }
+
+    // point before new/removed bendpoint
+    if (index < bendpointIndex) {
+
+      newIndex = index;
+
+      // decide point should take right or left segment
+      if (insert && attachment.type !== 'bendpoint' && bendpointIndex-1 === index) {
+
+        var rel = relativePositionMidWaypoint(newWaypoints, bendpointIndex);
+
+        if (rel < attachment.relativeLocation) {
+          newIndex++;
+        }
+      }
+    }
+
+    return newIndex;
+  }
+
+  // start/end changed
+  if (offset === 0) {
+    return index;
+  }
+
+  if (hints.connectionStart && index === 0) {
+    return 0;
+  }
+
+  if (hints.connectionEnd && index === oldWaypoints.length - 2) {
+    return newWaypoints.length - 2;
+  }
+
+  // if nothing fits, take the middle segment
+  return Math.floor((newWaypoints.length - 2)/2);
+}
+
+
+/**
+ * Calculate the required adjustment (move delta) for the given point
+ * after the connection waypoints got updated.
+ *
+ * @param {Point} position
+ * @param {Array<Point>} newWaypoints
+ * @param {Array<Point>} oldWaypoints
+ * @param {Object} hints
+ *
+ * @return {Object} result
+ * @return {Point} result.point
+ * @return {Point} result.delta
+ */
+export function getAnchorPointAdjustment(position, newWaypoints, oldWaypoints, hints) {
+
+  var dx = 0,
+      dy = 0;
+
+  var oldPosition = {
+    point: position,
+    delta: { x: 0, y: 0 }
+  };
+
+  // get closest attachment
+  var attachment = getAttachment(position, oldWaypoints),
+      oldLabelLineIndex = attachment.segmentIndex,
+      newLabelLineIndex = findNewLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);
+
+
+  // should never happen
+  // TODO(@janstuemmel): throw an error here when connectionSegmentMove is refactored
+  if (newLabelLineIndex < 0 ||
+      newLabelLineIndex > newWaypoints.length - 2 ||
+      newLabelLineIndex === null) {
+    return oldPosition;
+  }
+
+  var oldLabelLine = getLine(oldWaypoints, oldLabelLineIndex),
+      newLabelLine = getLine(newWaypoints, newLabelLineIndex),
+      oldFoot = attachment.position;
+
+  var relativeFootPosition = getRelativeFootPosition(oldLabelLine, oldFoot),
+      angleDelta = getAngleDelta(oldLabelLine, newLabelLine);
+
+  // special rule if label on bendpoint
+  if (attachment.type === 'bendpoint') {
+
+    var offset = newWaypoints.length - oldWaypoints.length,
+        oldBendpointIndex = attachment.bendpointIndex,
+        oldBendpoint = oldWaypoints[oldBendpointIndex];
+
+    // bendpoint position hasn't changed, return same position
+    if (newWaypoints.indexOf(oldBendpoint) !== -1) {
+      return oldPosition;
+    }
+
+    // new bendpoint and old bendpoint have same index, then just return the offset
+    if (offset === 0) {
+      var newBendpoint = newWaypoints[oldBendpointIndex];
+
+      dx = newBendpoint.x - attachment.position.x,
+      dy = newBendpoint.y - attachment.position.y;
+
+      return {
+        delta: {
+          x: dx,
+          y: dy
+        },
+        point: {
+          x: position.x + dx,
+          y: position.y + dy
+        }
+      };
+    }
+
+    // if bendpoints get removed
+    if (offset < 0 && oldBendpointIndex !== 0 && oldBendpointIndex < oldWaypoints.length - 1) {
+      relativeFootPosition = relativePositionMidWaypoint(oldWaypoints, oldBendpointIndex);
+    }
+  }
+
+  var newFoot = {
+    x: (newLabelLine[1].x - newLabelLine[0].x) * relativeFootPosition + newLabelLine[0].x,
+    y: (newLabelLine[1].y - newLabelLine[0].y) * relativeFootPosition + newLabelLine[0].y
+  };
+
+  // the rotated vector to label
+  var newLabelVector = rotateVector({
+    x: position.x - oldFoot.x,
+    y: position.y - oldFoot.y
+  }, angleDelta);
+
+  // the new relative position
+  dx = newFoot.x + newLabelVector.x - position.x;
+  dy = newFoot.y + newLabelVector.y - position.y;
+
+  return {
+    point: roundPoint(newFoot),
+    delta: roundPoint({
+      x: dx,
+      y: dy
+    })
+  };
+}
+
+
+// HELPERS //////////////////////
+
+function relativePositionMidWaypoint(waypoints, idx) {
+
+  var distanceSegment1 = getDistancePointPoint(waypoints[idx-1], waypoints[idx]),
+      distanceSegment2 = getDistancePointPoint(waypoints[idx], waypoints[idx+1]);
+
+  var relativePosition = distanceSegment1 / (distanceSegment1 + distanceSegment2);
+
+  return relativePosition;
+}
+
+function getAngleDelta(l1, l2) {
+  var a1 = getAngle(l1),
+      a2 = getAngle(l2);
+  return a2 - a1;
+}
+
+function getLine(waypoints, idx) {
+  return [ waypoints[idx], waypoints[idx+1] ];
+}
+
+function getRelativeFootPosition(line, foot) {
+
+  var length = getDistancePointPoint(line[0], line[1]),
+      lengthToFoot = getDistancePointPoint(line[0], foot);
+
+  return length === 0 ? 0 : lengthToFoot / length;
+}

package/lib/features/modeling/cmd/SetColorHandler.js

@@ -9,6 +9,10 @@ import {
   getDi
 } from '../../../util/ModelUtil';
 
+import {
+  isLabel
+} from '../../../util/LabelUtil';
+
 var DEFAULT_COLORS = {
   fill: undefined,
   stroke: undefined
@@ -66,14 +70,14 @@ SetColorHandler.prototype.postExecute = function(context) {
     // TODO @barmac: remove once we drop bpmn.io properties
     ensureLegacySupport(assignedDi);
 
-    if (element.labelTarget) {
+    if (isLabel(element)) {
 
       // set label colors as bpmndi:BPMNLabel#color
       self._commandStack.execute('element.updateModdleProperties', {
         element: element,
         moddleElement: getDi(element).label,
         properties: {
-          color: di['background-color']
+          color: di['border-color']
         }
       });
     } else {

package/lib/features/ordering/BpmnOrderingProvider.js

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import OrderingProvider from 'diagram-js/lib/features/ordering/OrderingProvider';
 

package/lib/features/replace-preview/BpmnReplacePreview.js

@@ -1,6 +1,6 @@
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import cssEscape from 'css.escape';
 

package/lib/features/rules/BpmnRules.js

@@ -5,7 +5,7 @@ import {
   some
 } from 'min-dash';
 
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import {
   is,
@@ -819,11 +819,6 @@ function isOneTextAnnotation(source, target) {
 
 function canConnectAssociation(source, target) {
 
-  // do not connect connections
-  if (isConnection(source) || isConnection(target)) {
-    return false;
-  }
-
   // compensation boundary events are exception
   if (isCompensationBoundary(source) && isForCompensation(target)) {
     return true;

package/lib/features/snapping/BpmnCreateMoveSnapping.js

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CreateMoveSnapping from 'diagram-js/lib/features/snapping/CreateMoveSnapping';
 

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.4",
+  "version": "9.2.1",
   "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.2.0",
-    "diagram-js-direct-editing": "^1.6.3",
+    "diagram-js": "^8.5.0",
+    "diagram-js-direct-editing": "^1.7.0",
     "ids": "^1.0.0",
-    "inherits": "^2.0.4",
+    "inherits-browser": "0.0.1",
     "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"
   }

package/test/util/custom-rules/CustomRules.js

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import RuleProvider from 'diagram-js/lib/features/rules/RuleProvider';