fix(bpmn-layouter): get preferred layout from orientation

Requires https://github.com/bpmn-io/diagram-js/pull/401

Closes #1121
This commit is contained in:
Philipp Fromme 2019-08-19 16:31:43 +02:00 committed by merge-me[bot]
parent 4cda939b4d
commit 6aaf816802
3 changed files with 143 additions and 6 deletions

View File

@ -81,7 +81,7 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
if (source === target) {
manhattanOptions = {
preferredLayouts: [ 'b:l' ]
preferredLayouts: getLoopPreferredLayout(source, connection)
};
} else
@ -264,6 +264,22 @@ function isHorizontalOrientation(orientation) {
return orientation === 'right' || orientation === 'left';
}
function getLoopPreferredLayout(source, connection) {
var waypoints = connection.waypoints;
var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
if (orientation === 'top') {
return [ 't:r' ];
} else if (orientation === 'right') {
return [ 'r:b' ];
} else if (orientation === 'left') {
return [ 'l:t' ];
}
return [ 'b:l' ];
}
function getBoundaryEventPreferredLayouts(source, target, end) {
var sourceMid = getMid(source),
targetMid = getMid(target),

View File

@ -1,10 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.3.0-alpha.3">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" />
<bpmn:exclusiveGateway id="ExclusiveGateway_1" />
<bpmn:task id="Task_1">
<bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
<bpmn:outgoing>SequenceFlow_2</bpmn:outgoing>
<bpmn:outgoing>SequenceFlow_3</bpmn:outgoing>
<bpmn:outgoing>SequenceFlow_4</bpmn:outgoing>
</bpmn:task>
<bpmn:intermediateThrowEvent id="IntermediateThrowEvent_1" />
<bpmn:serviceTask id="ServiceTask_1">
@ -14,6 +17,18 @@
<bpmn:endEvent id="EndEvent_1" />
<bpmn:businessRuleTask id="BusinessRuleTask_1" />
<bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="Task_1" targetRef="ServiceTask_1" />
<bpmn:task id="Task_2">
<bpmn:incoming>SequenceFlow_2</bpmn:incoming>
</bpmn:task>
<bpmn:sequenceFlow id="SequenceFlow_2" sourceRef="Task_1" targetRef="Task_2" />
<bpmn:task id="Task_3">
<bpmn:incoming>SequenceFlow_3</bpmn:incoming>
</bpmn:task>
<bpmn:sequenceFlow id="SequenceFlow_3" sourceRef="Task_1" targetRef="Task_3" />
<bpmn:task id="Task_4">
<bpmn:incoming>SequenceFlow_4</bpmn:incoming>
</bpmn:task>
<bpmn:sequenceFlow id="SequenceFlow_4" sourceRef="Task_1" targetRef="Task_4" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
@ -57,14 +72,39 @@
<dc:Bounds x="790" y="180" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1_di" bpmnElement="SequenceFlow_1">
<di:waypoint xsi:type="dc:Point" x="382" y="241" />
<di:waypoint xsi:type="dc:Point" x="559" y="241" />
<di:waypoint xsi:type="dc:Point" x="559" y="138" />
<di:waypoint xsi:type="dc:Point" x="628" y="138" />
<di:waypoint x="382" y="241" />
<di:waypoint x="559" y="241" />
<di:waypoint x="559" y="138" />
<di:waypoint x="628" y="138" />
<bpmndi:BPMNLabel>
<dc:Bounds x="460" y="158.5" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_05onbv9_di" bpmnElement="Task_2">
<dc:Bounds x="120" y="430" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1gkn3z9_di" bpmnElement="SequenceFlow_2">
<di:waypoint x="332" y="260" />
<di:waypoint x="332" y="470" />
<di:waypoint x="220" y="470" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_03oj6hc_di" bpmnElement="Task_3">
<dc:Bounds x="120" y="77" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1w44kjx_di" bpmnElement="SequenceFlow_3">
<di:waypoint x="282" y="220" />
<di:waypoint x="250" y="220" />
<di:waypoint x="250" y="117" />
<di:waypoint x="220" y="117" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_1ftm468_di" bpmnElement="Task_4">
<dc:Bounds x="446" y="-70" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_12vhayc_di" bpmnElement="SequenceFlow_4">
<di:waypoint x="332" y="180" />
<di:waypoint x="332" y="-30" />
<di:waypoint x="446" y="-30" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

View File

@ -10,6 +10,8 @@ import {
reconnectEnd
} from './Helper';
import { getMid } from 'diagram-js/lib/layout/LayoutUtil';
import modelingModule from 'lib/features/modeling';
import coreModule from 'lib/core';
@ -306,6 +308,85 @@ describe('features/modeling - layout', function() {
]);
});
it('should NOT relayout loop', inject(function(elementRegistry) {
// given
var sequenceFlow = elementRegistry.get('SequenceFlow_1'),
task = elementRegistry.get('Task_1');
// when
reconnectEnd(sequenceFlow, task, getMid(task));
// then
expect(sequenceFlow).to.have.waypoints([
{ x: 382, y: 241 },
{ x: 559, y: 241 },
{ x: 559, y: 220 },
{ x: 382, y: 220 }
]);
}));
it('should relayout loop (b:l)', inject(function(elementRegistry) {
// given
var sequenceFlow = elementRegistry.get('SequenceFlow_2'),
task = elementRegistry.get('Task_1');
// when
reconnectEnd(sequenceFlow, task, getMid(task));
// then
expect(sequenceFlow).to.have.waypoints([
{ x: 332, y: 260 },
{ x: 332, y: 280 },
{ x: 262, y: 280 },
{ x: 262, y: 220 },
{ x: 282, y: 220 }
]);
}));
it('should relayout loop (l:t)', inject(function(elementRegistry) {
// given
var sequenceFlow = elementRegistry.get('SequenceFlow_3'),
task = elementRegistry.get('Task_1');
// when
reconnectEnd(sequenceFlow, task, getMid(task));
// then
expect(sequenceFlow).to.have.waypoints([
{ x: 282, y: 220 },
{ x: 262, y: 220 },
{ x: 262, y: 160 },
{ x: 332, y: 160 },
{ x: 332, y: 180 }
]);
}));
it('should relayout loop (t:r)', inject(function(elementRegistry) {
// given
var sequenceFlow = elementRegistry.get('SequenceFlow_4'),
task = elementRegistry.get('Task_1');
// when
reconnectEnd(sequenceFlow, task, getMid(task));
// then
expect(sequenceFlow).to.have.waypoints([
{ x: 332, y: 180 },
{ x: 332, y: 160 },
{ x: 402, y: 160 },
{ x: 402, y: 220 },
{ x: 382, y: 220 }
]);
}));
});