fix: asTRBL supported for flow elements

Related to bpmn-js: #2239

lib/layout/LayoutUtil.js

@@ -21,6 +21,7 @@ import { isConnection } from '../util/ModelUtil';
  * @typedef {import('../util/Types').Point} Point
  * @typedef {import('../util/Types').Rect} Rect
  * @typedef {import('../util/Types').RectTRBL} RectTRBL
+ * @typedef {import('../util/Types').ConnectionTRBL} ConnectionTRBL 
  */
 
 /**
@@ -51,6 +52,36 @@ export function roundPoint(point) {
 }
 
 
+/**
+ * Convert the given connection bounds to a { top, left, bottom, right } descriptor.
+ *
+ * @param {Point|Connection} bounds
+ *
+ * @return {ConnectionTRBL}
+ */
+export function asConnectionTRBL(bounds) {
+  const waypoints = bounds.waypoints;
+  const points = waypoints.reduce((acc, point, index, array) => {
+    acc.x += point.x;
+    acc.y += point.y;
+
+    // Check if it's the last element
+    if (index === array.length - 1) {
+      acc.x /= array.length;
+      acc.y /= array.length;
+    }
+
+    return acc;
+  }, { x: 0, y: 0 });
+
+  return {
+    top: points.y,
+    right: points.x + (bounds.width || 0),
+    bottom: points.y,
+    left: points.x
+  };
+}
+
 /**
  * Convert the given bounds to a { top, left, bottom, right } descriptor.
  *

lib/util/Types.ts

@@ -19,13 +19,17 @@ export type Dimensions = {
 
 export type Rect = Dimensions & Point;
 
-export type RectTRBL = {
+export type TRBL = {
   top: number;
   right: number;
   bottom: number;
   left: number;
 };
 
+export type RectTRBL = TRBL
+
+export type ConnectionTRBL = TRBL;
+
 export type Axis = 'x' | 'y';
 
 export type Direction = 'n' | 'w' | 's' | 'e' | 'nw' | 'ne' | 'sw' | 'se';

test/spec/layout/LayoutUtilSpec.js

@@ -1,9 +1,14 @@
 import {
   filterRedundantWaypoints,
   getOrientation,
-  getMid
+  getMid,
+  asTRBL,
+  asConnectionTRBL
 } from 'lib/layout/LayoutUtil';
 
+import {
+  create,
+} from 'lib/model';
 
 function rect(x, y, width, height) {
   return { x: x, y: y, width: width, height: height };
@@ -173,4 +178,49 @@ describe('layout/LayoutUtil', function() {
     });
   });
 
+  describe('#asTRBL', function() {
+
+    it('should return top, right, bottom and left when shape', function() {
+
+      // given
+      var shape = create('shape', {
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 100
+      });
+
+      // then
+      expect(asTRBL(shape)).to.deep.equal({
+        top: 20,
+        right: 110,
+        bottom: 120,
+        left: 10
+      });
+    });
+
+    it('should return top, right, bottom and left when flow element', function() {
+
+      // given
+      var waypoints = [ { x: 10, y: 10 }, { x: 100, y: 100 } ];
+
+      // when
+      var connection = create('connection', {
+        waypoints: waypoints,
+        width: 20,
+        height: 5
+      });
+
+      // then
+      expect(asConnectionTRBL(connection)).to.deep.equal({
+        top: 55,
+        right: 75,
+        bottom: 55,
+        left: 55
+      });
+
+    });
+
+  });
+
 });