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:
parent
4cda939b4d
commit
6aaf816802
|
@ -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),
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }
|
||||
]);
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue