feat(project): add manhattan style layouting for flows

Related to #48

lib/features/modeling/Layouter.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var BaseLayouter = require('diagram-js/lib/features/modeling/Layouter'),
+    LayoutUtil = require('diagram-js/lib/layout/Util'),
+    ManhattanLayout = require('diagram-js/lib/layout/ManhattanLayout');
+
+
+function Layouter() {}
+
+Layouter.prototype = Object.create(BaseLayouter.prototype);
+
+module.exports = Layouter;
+
+
+Layouter.prototype.getConnectionWaypoints = function(connection) {
+  var source = connection.source,
+      start = LayoutUtil.getMidPoint(source),
+      target = connection.target,
+      end = LayoutUtil.getMidPoint(target);
+
+  var bo = connection.businessObject;
+
+  // manhattan layout sequence / message flows
+  if (bo.$instanceOf('bpmn:SequenceFlow') ||
+      bo.$instanceOf('bpmn:MessageFlow')) {
+
+    var waypoints = ManhattanLayout.connectRectangles(source, target, start, end);
+
+    if (waypoints) {
+      return waypoints;
+    }
+  }
+
+  return [ start, end ];
+};

lib/features/modeling/index.js

@@ -11,6 +11,6 @@ module.exports = {
   elementFactory: [ 'type', require('./ElementFactory') ],
   modeling: [ 'type', require('./Modeling') ],
   labelSupport: [ 'type', require('./LabelSupport') ],
-  layouter: [ 'type', require('diagram-js/lib/features/modeling/Layouter') ],
+  layouter: [ 'type', require('./Layouter') ],
   connectionDocking: [ 'type', require('diagram-js/lib/layout/CroppingConnectionDocking') ]
 };

test/spec/features/modeling/CreateConnectionSpec.js

@@ -58,14 +58,18 @@ describe('features/modeling - create connection', function() {
 
       // expect cropped connection
       expect(sequenceFlowConnection.waypoints).toDeepEqual([
-        { original: { x: 242, y: 376 }, x: 292, y: 370 },
-        { original: { x: 553, y: 341 }, x: 531, y: 344 }
+        { original: { x: 242, y: 376 }, x: 292, y: 376},
+        { x: 410, y: 376 },
+        { x: 410, y: 341 },
+        { original: { x: 553, y: 341 }, x: 528, y: 341}
       ]);
 
       // expect cropped waypoints in di
       expect(sequenceFlow.di.waypoint).toDeepEqual([
-        { $type: 'dc:Point', x: 292, y: 370 },
-        { $type: 'dc:Point', x: 531, y: 344 }
+        { $type: 'dc:Point', x: 292, y: 376 },
+        { $type: 'dc:Point', x: 410, y: 376 },
+        { $type: 'dc:Point', x: 410, y: 341 },
+        { $type: 'dc:Point', x: 528, y: 341 }
       ]);
     }));
 
@@ -121,6 +125,9 @@ describe('features/modeling - create connection', function() {
 
       var sequenceFlow = sequenceFlowConnection.businessObject;
 
+      var newWaypoints = sequenceFlowConnection.waypoints,
+          newDiWaypoints = sequenceFlow.di.waypoint;
+
       // when
       commandStack.undo();
       commandStack.redo();
@@ -136,16 +143,10 @@ describe('features/modeling - create connection', function() {
       expect(sequenceFlow.di.$parent.planeElement).toContain(sequenceFlow.di);
 
       // expect cropped connection
-      expect(sequenceFlowConnection.waypoints).toDeepEqual([
-        { original: { x: 242, y: 376 }, x: 292, y: 370 },
-        { original: { x: 553, y: 341 }, x: 531, y: 344 }
-      ]);
+      expect(sequenceFlowConnection.waypoints).toDeepEqual(newWaypoints);
 
       // expect cropped waypoints in di
-      expect(sequenceFlow.di.waypoint).toDeepEqual([
-        { $type: 'dc:Point', x: 292, y: 370 },
-        { $type: 'dc:Point', x: 531, y: 344 }
-      ]);
+      expect(sequenceFlow.di.waypoint).toDeepEqual(newDiWaypoints);
     }));
 
   });

test/spec/features/modeling/LayoutConnectionSpec.js

@@ -33,7 +33,6 @@ describe('features/modeling - layout connection', function() {
       var sequenceFlowConnection = elementRegistry.getById('SequenceFlow_1'),
           sequenceFlow = sequenceFlowConnection.businessObject;
 
-
       // when
       modeling.layoutConnection(sequenceFlowConnection);
 
@@ -41,14 +40,18 @@ describe('features/modeling - layout connection', function() {
 
       // expect cropped connection
       expect(sequenceFlowConnection.waypoints).toDeepEqual([
-        { original: { x: 553, y: 341 }, x: 571, y: 348 },
-        { original: { x: 782, y: 436 }, x: 732, y: 415 }
+        { original: { x: 553, y: 341 }, x: 578, y: 341 },
+        { x: 655, y: 341 },
+        { x: 655, y: 436 },
+        { original: { x: 782, y: 436 }, x: 732, y: 436 }
       ]);
 
       // expect cropped waypoints in di
       expect(sequenceFlow.di.waypoint).toDeepEqual([
-        { $type: 'dc:Point', x: 571, y: 348 },
-        { $type: 'dc:Point', x: 732, y: 415 }
+        { $type: 'dc:Point', x: 578, y: 341 },
+        { $type: 'dc:Point', x: 655, y: 341 },
+        { $type: 'dc:Point', x: 655, y: 436 },
+        { $type: 'dc:Point', x: 732, y: 436 }
       ]);
     }));
 

test/spec/features/modeling/MoveShapeSpec.js

@@ -48,14 +48,19 @@ describe('features/modeling - move shape', function() {
       expect(startEvent.di.bounds.x).toBe(oldPosition.x);
       expect(startEvent.di.bounds.y).toBe(oldPosition.y + 50);
 
+      // expect flow layout
       expect(sequenceFlowElement.waypoints).toDeepEqual([
-        { original: { x: 370, y: 310 }, x: 386, y: 302 },
-        { original: { x: 470, y: 260 }, x: 420, y: 285 }
+        { original: { x: 370, y: 310 }, x: 388, y: 310 },
+        { x: 404, y: 310 },
+        { x: 404, y: 260 },
+        { original: { x: 470, y: 260 }, x: 420, y: 260 }
       ]);
 
       expect(sequenceFlow.di.waypoint).toDeepEqual([
-        { $type: 'dc:Point', x: 386, y: 302 },
-        { $type: 'dc:Point', x: 420, y: 285 }
+        { $type: 'dc:Point', x: 388, y: 310 },
+        { $type: 'dc:Point', x: 404, y: 310 },
+        { $type: 'dc:Point', x: 404, y: 260 },
+        { $type: 'dc:Point', x: 420, y: 260 }
       ]);
     }));