diff --git a/lib/features/modeling/BpmnLayouter.js b/lib/features/modeling/BpmnLayouter.js index 5a1018030c..18e079ee3c 100644 --- a/lib/features/modeling/BpmnLayouter.js +++ b/lib/features/modeling/BpmnLayouter.js @@ -317,10 +317,12 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta if (attachedToSide) { if (isHorizontalOrientation(attachOrientation)) { // orientation is 'right' or 'left' + if (isLoop) { + return 'b'; + } - // loop or opposite horizontal orientation or same orientation + // opposite horizontal orientation or same orientation if ( - isLoop || isOppositeHorizontalOrientation(attachOrientation, targetOrientation) || isSame(attachOrientation, targetOrientation) ) { @@ -331,10 +333,12 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta return 'v'; } else { // orientation is 'top' or 'bottom' + if (isLoop) { + return 'l'; + } - // loop or opposite vertical orientation or same orientation + // opposite vertical orientation or same orientation if ( - isLoop || isOppositeVerticalOrientation(attachOrientation, targetOrientation) || isSame(attachOrientation, targetOrientation) ) { diff --git a/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.boundaryEventsLoops.bpmn b/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.boundaryEventsLoops.bpmn index b18af7fef9..852a57847f 100644 --- a/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.boundaryEventsLoops.bpmn +++ b/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.boundaryEventsLoops.bpmn @@ -1,40 +1,48 @@ - + - - - + + + + + - + - - - - + - - - - + - + - + + + + + + + + + + + + + - - + + diff --git a/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.js b/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.js index 9dd12a03c4..18c9e11b8c 100644 --- a/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.js +++ b/test/spec/features/modeling/layout/LayoutSequenceFlowSpec.js @@ -26,65 +26,140 @@ describe('features/modeling - layout', function() { beforeEach(bootstrapModeler(diagramXML, { modules: testModules })); - it('attached top right', function() { - // when - var connection = connect('BoundaryEvent_TopRight', 'SubProcess'); + describe('in the corner', function() { - // then - expect(connection).to.have.waypoints([ - { original: { x: 650, y: 300 }, x: 650, y: 282 }, - { x: 650, y: 262 }, - { x: 475, y: 262 }, - { original: { x: 475, y: 400 }, x: 475, y: 300 } - ]); - }); + it('attached top right', function() { + // when + var connection = connect('BoundaryEvent_TopRight', 'SubProcess'); - it('attached bottom right', function() { + // then + expect(connection).to.have.waypoints([ + { original: { x: 550, y: 200 }, x: 550, y: 182 }, + { x: 550, y: 162 }, + { x: 375, y: 162 }, + { original: { x: 375, y: 300 }, x: 375, y: 200 } + ]); + }); - // when - var connection = connect('BoundaryEvent_BottomRight', 'SubProcess'); - // then - expect(connection).to.have.waypoints([ - { original: { x: 650, y: 468 }, x: 668, y: 468 }, - { x: 688, y: 468 }, - { x: 688, y: 400 }, - { original: { x: 475, y: 400 }, x: 650, y: 400 } - ]); - }); + it('attached bottom right', function() { + // when + var connection = connect('BoundaryEvent_BottomRight', 'SubProcess'); - it('attached bottom left', function() { + // then + expect(connection).to.have.waypoints([ + { original: { x: 550, y: 368 }, x: 568, y: 368 }, + { x: 588, y: 368 }, + { x: 588, y: 420 }, + { x: 375, y: 420 }, + { original: { x: 375, y: 300 }, x: 375, y: 400 } + ]); + }); - // when - var connection = connect('BoundaryEvent_BottomLeft', 'SubProcess'); - // then - expect(connection).to.have.waypoints([ - { original: { x: 300, y: 500 }, x: 300, y: 518 }, - { x: 300, y: 538 }, - { x: 475, y: 538 }, - { original: { x: 475, y: 400 }, x: 475, y: 500 } - ]); - }); + it('attached bottom left', function() { + // when + var connection = connect('BoundaryEvent_BottomLeft', 'SubProcess'); - it('attached top left', function() { + // then + expect(connection).to.have.waypoints([ + { original: { x: 200, y: 500 }, x: 200, y: 418 }, + { x: 200, y: 438 }, + { x: 375, y: 438 }, + { original: { x: 375, y: 300 }, x: 375, y: 400 } + ]); + }); - // when - var connection = connect('BoundaryEvent_TopLeft', 'SubProcess'); - // then - expect(connection).to.have.waypoints([ - { original: { x: 300, y: 338 }, x: 282, y: 338 }, - { x: 262, y: 338 }, - { x: 262, y: 400 }, - { original: { x: 475, y: 400 }, x: 300, y: 400 } - ]); + it('attached top left', function() { + + // when + var connection = connect('BoundaryEvent_TopLeft', 'SubProcess'); + + // then + expect(connection).to.have.waypoints([ + { original: { x: 200, y: 238 }, x: 182, y: 238 }, + { x: 162, y: 238 }, + { x: 162, y: 420 }, + { x: 375, y: 420 }, + { original: { x: 375, y: 300 }, x: 375, y: 400 } + ]); + }); }); + + describe('on the side center', function() { + + var host = 'SubProcess_2'; + + + it('attached top center', function() { + + // when + var connection = connect('BoundaryEvent_TopCenter', host); + + // then + expect(connection).to.have.waypoints([ + { original: { x: 375, y: 460 }, x: 375, y: 442 }, + { x:375, y: 422 }, + { x:180, y: 422 }, + { x:180, y: 560 }, + { original:{ x: 375, y: 560 }, x: 200, y: 560 } + ]); + }); + + + it('attached center right', function() { + + // when + var connection = connect('BoundaryEvent_CenterRight', host); + + // then + expect(connection).to.have.waypoints([ + { original: { x: 550, y: 560 }, x: 568, y: 560 }, + { x: 588, y: 560 }, + { x: 588, y: 680 }, + { x: 375, y: 680 }, + { original: { x: 375, y: 560 }, x: 375, y: 660 } + ]); + }); + + + it('attached bottom center', function() { + + // when + var connection = connect('BoundaryEvent_BottomCenter', host); + + // then + expect(connection).to.have.waypoints([ + { original: { x: 375, y: 660 }, x: 375, y: 678 }, + { x: 375, y: 698 }, + { x: 180, y: 698 }, + { x: 180, y: 560 }, + { original: { x: 375, y: 560 }, x: 200, y: 560 } + ]); + }); + + + it('attached center left', function() { + + // when + var connection = connect('BoundaryEvent_CenterLeft', host); + + // then + expect(connection).to.have.waypoints([ + { original: { x: 200, y: 560 }, x: 182, y: 560 }, + { x: 162, y: 560 }, + { x: 162, y: 680 }, + { x: 375, y: 680 }, + { original: { x: 375, y: 560 }, x: 375, y: 660 } + ]); + }); + }); });