bpmn-js 9.1.0 → 9.2.0

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,5 +1,5 @@
 
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -1,4 +1,4 @@
-import inherits from 'inherits';
+import inherits from 'inherits-browser';
 
 import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 

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

@@ -17,6 +17,7 @@ import GroupBehavior from './GroupBehavior';
 import ImportDockingFix from './ImportDockingFix';
 import IsHorizontalFix from './IsHorizontalFix';
 import LabelBehavior from './LabelBehavior';
+import LayoutConnectionBehavior from './LayoutConnectionBehavior';
 import MessageFlowBehavior from './MessageFlowBehavior';
 import ModelingFeedback from './ModelingFeedback';
 import RemoveEmbeddedLabelBoundsBehavior from './RemoveEmbeddedLabelBoundsBehavior';
@@ -57,6 +58,7 @@ export default {
     'importDockingFix',
     'isHorizontalFix',
     'labelBehavior',
+    'layoutConnectionBehavior',
     'messageFlowBehavior',
     'modelingFeedback',
     'removeElementBehavior',
@@ -95,6 +97,7 @@ export default {
   importDockingFix: [ 'type', ImportDockingFix ],
   isHorizontalFix: [ 'type', IsHorizontalFix ],
   labelBehavior: [ 'type', LabelBehavior ],
+  layoutConnectionBehavior: [ 'type', LayoutConnectionBehavior ],
   messageFlowBehavior: [ 'type', MessageFlowBehavior ],
   modelingFeedback: [ 'type', ModelingFeedback ],
   removeElementBehavior: [ 'type', RemoveElementBehavior ],

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

@@ -0,0 +1,16 @@
+import { getAnchorPointAdjustment } from './LayoutUtil';
+
+/**
+ * Calculate the new point after the connection waypoints got updated.
+ *
+ * @param {djs.model.Label} label
+ * @param {Array<Point>} newWaypoints
+ * @param {Array<Point>} oldWaypoints
+ * @param {Object} hints
+ *
+ * @return {Point} point
+ */
+export function getConnectionAdjustment(position, newWaypoints, oldWaypoints, hints) {
+  return getAnchorPointAdjustment(position, newWaypoints, oldWaypoints, hints).point;
+}
+

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

@@ -1,121 +1 @@
-/**
- * Returns the length of a vector
- *
- * @param {Vector}
- * @return {Float}
- */
-export function vectorLength(v) {
-  return Math.sqrt(Math.pow(v.x, 2) + Math.pow(v.y, 2));
-}
-
-
-/**
- * Calculates the angle between a line a the yAxis
- *
- * @param {Array}
- * @return {Float}
- */
-export function getAngle(line) {
-
-  // return value is between 0, 180 and -180, -0
-  // @janstuemmel: maybe replace return a/b with b/a
-  return Math.atan((line[1].y - line[0].y) / (line[1].x - line[0].x));
-}
-
-
-/**
- * Rotates a vector by a given angle
- *
- * @param {Vector}
- * @param {Float} Angle in radians
- * @return {Vector}
- */
-export function rotateVector(vector, angle) {
-  return (!angle) ? vector : {
-    x: Math.cos(angle) * vector.x - Math.sin(angle) * vector.y,
-    y: Math.sin(angle) * vector.x + Math.cos(angle) * vector.y
-  };
-}
-
-
-/**
- * Solves a 2D equation system
- * a + r*b = c, where a,b,c are 2D vectors
- *
- * @param {Vector}
- * @param {Vector}
- * @param {Vector}
- * @return {Float}
- */
-function solveLambaSystem(a, b, c) {
-
-  // the 2d system
-  var system = [
-    { n: a[0] - c[0], lambda: b[0] },
-    { n: a[1] - c[1], lambda: b[1] }
-  ];
-
-  // solve
-  var n = system[0].n * b[0] + system[1].n * b[1],
-      l = system[0].lambda * b[0] + system[1].lambda * b[1];
-
-  return -n/l;
-}
-
-
-/**
- * Position of perpendicular foot
- *
- * @param {Point}
- * @param [ {Point}, {Point} ] line defined through two points
- * @return {Point} the perpendicular foot position
- */
-export function perpendicularFoot(point, line) {
-
-  var a = line[0], b = line[1];
-
-  // relative position of b from a
-  var bd = { x: b.x - a.x, y: b.y - a.y };
-
-  // solve equation system to the parametrized vectors param real value
-  var r = solveLambaSystem([ a.x, a.y ], [ bd.x, bd.y ], [ point.x, point.y ]);
-
-  return { x: a.x + r*bd.x, y: a.y + r*bd.y };
-}
-
-
-/**
- * Calculates the distance between a point and a line
- *
- * @param {Point}
- * @param [ {Point}, {Point} ] line defined through two points
- * @return {Float} distance
- */
-export function getDistancePointLine(point, line) {
-
-  var pfPoint = perpendicularFoot(point, line);
-
-  // distance vector
-  var connectionVector = {
-    x: pfPoint.x - point.x,
-    y: pfPoint.y - point.y
-  };
-
-  return vectorLength(connectionVector);
-}
-
-
-/**
- * Calculates the distance between two points
- *
- * @param {Point}
- * @param {Point}
- * @return {Float} distance
- */
-export function getDistancePointPoint(point1, point2) {
-
-  return vectorLength({
-    x: point1.x - point2.x,
-    y: point1.y - point2.y
-  });
-}
+export * from 'diagram-js/lib/features/bendpoints/GeometricUtil';

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

@@ -1,95 +1,7 @@
-import {
-  getDistancePointPoint,
-  rotateVector,
-  getAngle
-} from './GeometricUtil';
-
-import {
-  getAttachment
-} from './LineAttachmentUtil';
-
-import {
-  roundPoint
-} from 'diagram-js/lib/layout/LayoutUtil';
-
+import { findNewLineStartIndex, getAnchorPointAdjustment } from './LayoutUtil';
 
 export function findNewLabelLineStartIndex(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 label was on moved segment return new segment index
-    if (index === oldSegmentStartIndex) {
-      return newSegmentStartIndex;
-    }
-
-    // label is after new segment index
-    if (index >= newSegmentStartIndex) {
-      return (index+offset < newSegmentStartIndex) ? newSegmentStartIndex : index+offset;
-    }
-
-    // if label 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;
-    }
-
-    // label behind new/removed bendpoint
-    if (index >= bendpointIndex) {
-      newIndex = insert ? index + 1 : index - 1;
-    }
-
-    // label before new/removed bendpoint
-    if (index < bendpointIndex) {
-
-      newIndex = index;
-
-      // decide label 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) {
-    return (index === 0) ? 0 : null;
-  }
-
-  if (hints.connectionEnd) {
-    return (index === oldWaypoints.length - 2) ? newWaypoints.length - 2 : null;
-  }
-
-  // if nothing fits, return null
-  return null;
+  return findNewLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);
 }
 
 
@@ -105,118 +17,17 @@ export function findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachmen
  * @return {Point} delta
  */
 export function getLabelAdjustment(label, newWaypoints, oldWaypoints, hints) {
-
-  var x = 0,
-      y = 0;
-
   var labelPosition = getLabelMid(label);
 
-  // get closest attachment
-  var attachment = getAttachment(labelPosition, oldWaypoints),
-      oldLabelLineIndex = attachment.segmentIndex,
-      newLabelLineIndex = findNewLabelLineStartIndex(oldWaypoints, newWaypoints, attachment, hints);
-
-  if (newLabelLineIndex === null) {
-    return { x: x, y: y };
-  }
-
-  // should never happen
-  // TODO(@janstuemmel): throw an error here when connectionSegmentMove is refactored
-  if (newLabelLineIndex < 0 ||
-      newLabelLineIndex > newWaypoints.length - 2) {
-    return { x: x, y: y };
-  }
-
-  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 { x: x, y: y };
-    }
-
-    // new bendpoint and old bendpoint have same index, then just return the offset
-    if (offset === 0) {
-      var newBendpoint = newWaypoints[oldBendpointIndex];
-
-      return {
-        x: newBendpoint.x - attachment.position.x,
-        y: newBendpoint.y - attachment.position.y
-      };
-    }
-
-    // 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: labelPosition.x - oldFoot.x,
-    y: labelPosition.y - oldFoot.y
-  }, angleDelta);
-
-  // the new relative position
-  x = newFoot.x + newLabelVector.x - labelPosition.x;
-  y = newFoot.y + newLabelVector.y - labelPosition.y;
-
-  return roundPoint({
-    x: x,
-    y: y
-  });
+  return getAnchorPointAdjustment(labelPosition, newWaypoints, oldWaypoints, hints).delta;
 }
 
 
 // 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 getLabelMid(label) {
   return {
     x: label.x + label.width / 2,
     y: label.y + label.height / 2
   };
 }
-
-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/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';