sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(modeling): improve label positioning for boundary events 

* Do not allow placing label onto host

Relates to camunda/camunda-modeler#1206
This commit is contained in:
Niklas Kiefer 2019-06-05 07:48:33 +02:00 committed by merge-me[bot]
parent 2804e559e9
commit 8862865e2a
3 changed files with 294 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
lib/features/modeling/behavior/AdaptiveLabelPositioningBehavior.js
View File

@ -16,6 +16,14 @@ import {
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
var ALIGNMENTS = [
'top',
'bottom',
'left',
'right'
];
var ELEMENT_LABEL_DISTANCE = 10;
/**
* A component that makes sure that external labels are added
@ -70,8 +78,6 @@ export default function AdaptiveLabelPositioningBehavior(eventBus, modeling) {
adjustLabelPosition(element, optimalPosition);
}
var ELEMENT_LABEL_DISTANCE = 10;
function adjustLabelPosition(element, orientation) {
var elementMid = getMid(element),
@ -135,6 +141,64 @@ AdaptiveLabelPositioningBehavior.$inject = [
];
// helpers //////////////////////
/**
* Return alignments which are taken by a boundary's host element
*
* @param {Shape} element
*
* @return {Array<String>}
*/
function getTakenHostAlignments(element) {
var hostElement = element.host,
elementMid = getMid(element),
hostOrientation = getOrientation(elementMid, hostElement);
var freeAlignments;
// check whether there is a multi-orientation, e.g. 'top-left'
if (hostOrientation.indexOf('-') >= 0) {
freeAlignments = hostOrientation.split('-');
} else {
freeAlignments = [ hostOrientation ];
}
var takenAlignments = ALIGNMENTS.filter(function(alignment) {
return freeAlignments.indexOf(alignment) === -1;
});
return takenAlignments;
}
/**
* Return alignments which are taken by related connections
*
* @param {Shape} element
*
* @return {Array<String>}
*/
function getTakenConnectionAlignments(element) {
var elementMid = getMid(element);
var takenAlignments = [].concat(
element.incoming.map(function(c) {
return c.waypoints[c.waypoints.length - 2 ];
}),
element.outgoing.map(function(c) {
return c.waypoints[1];
})
).map(function(point) {
return getApproximateOrientation(elementMid, point);
});
return takenAlignments;
}
/**
* Return the optimal label position around an element
* or _undefined_, if none was found.
@ -155,16 +219,13 @@ function getOptimalPosition(element) {
return;
}
var takenAlignments = [].concat(
element.incoming.map(function(c) {
return c.waypoints[c.waypoints.length - 2 ];
}),
element.outgoing.map(function(c) {
return c.waypoints[1];
})
).map(function(point) {
return getApproximateOrientation(elementMid, point);
});
var takenAlignments = getTakenConnectionAlignments(element);
if (element.host) {
var takenHostAlignments = getTakenHostAlignments(element);
takenAlignments = takenAlignments.concat(takenHostAlignments);
}
var freeAlignments = ALIGNMENTS.filter(function(alignment) {
@ -179,13 +240,6 @@ function getOptimalPosition(element) {
return freeAlignments[0];
}
var ALIGNMENTS = [
'top',
'bottom',
'left',
'right'
];
function getApproximateOrientation(p0, p1) {
return getOrientation(p1, p0, 5);
}

99
test/spec/features/modeling/behavior/AdaptiveLabelPositioningBehavior.boundary-events.bpmn Normal file
View File

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-38422fae-e03e-43a3-bef4-bd33b32041b2" targetNamespace="http://bpmn.io/bpmn" exporter="Camunda Modeler" exporterVersion="3.1.0">
<process id="Process_1" isExecutable="false">
<task id="Task_1" />
<boundaryEvent id="BoundaryEvent_1" attachedToRef="Task_1">
<outgoing>SequenceFlow_1</outgoing>
</boundaryEvent>
<endEvent id="EndEvent_1">
<incoming>SequenceFlow_1</incoming>
</endEvent>
<sequenceFlow id="SequenceFlow_1" sourceRef="BoundaryEvent_1" targetRef="EndEvent_1" />
<task id="Task_2" />
<boundaryEvent id="BoundaryEvent_2" name="foo" attachedToRef="Task_2" />
<endEvent id="EndEvent_2" />
<task id="Task_3" />
<boundaryEvent id="BoundaryEvent_3" name="foo" attachedToRef="Task_3">
<outgoing>SequenceFlow_2</outgoing>
</boundaryEvent>
<endEvent id="EndEvent_3">
<incoming>SequenceFlow_2</incoming>
</endEvent>
<sequenceFlow id="SequenceFlow_2" sourceRef="BoundaryEvent_3" targetRef="EndEvent_3" />
<task id="Task_4" />
<boundaryEvent id="BoundaryEvent_4" name="" attachedToRef="Task_4">
<outgoing>SequenceFlow_3</outgoing>
</boundaryEvent>
<endEvent id="EndEvent_4">
<incoming>SequenceFlow_3</incoming>
</endEvent>
<sequenceFlow id="SequenceFlow_3" name="" sourceRef="BoundaryEvent_4" targetRef="EndEvent_4" />
</process>
<bpmndi:BPMNDiagram id="BpmnDiagram_1">
<bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="Task_1_di" bpmnElement="Task_1">
<omgdc:Bounds x="156" y="110" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="BoundaryEvent_1_di" bpmnElement="BoundaryEvent_1">
<omgdc:Bounds x="168" y="172" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_1_di" bpmnElement="EndEvent_1">
<omgdc:Bounds x="318" y="232" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_1_di" bpmnElement="SequenceFlow_1">
<omgdi:waypoint x="186" y="208" />
<omgdi:waypoint x="186" y="250" />
<omgdi:waypoint x="318" y="250" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_2_di" bpmnElement="Task_2">
<omgdc:Bounds x="156" y="300" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="BoundaryEvent_2_di" bpmnElement="BoundaryEvent_2">
<omgdc:Bounds x="238" y="322" width="36" height="36" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="279" y="332" width="16" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_2_di" bpmnElement="EndEvent_2">
<omgdc:Bounds x="318" y="422" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_3_di" bpmnElement="Task_3">
<omgdc:Bounds x="484" y="110" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="BoundaryEvent_3_di" bpmnElement="BoundaryEvent_3">
<omgdc:Bounds x="516" y="172" width="36" height="36" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="526" y="216" width="16" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_3_di" bpmnElement="EndEvent_3">
<omgdc:Bounds x="602" y="252" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_2_di" bpmnElement="SequenceFlow_2">
<omgdi:waypoint x="534" y="208" />
<omgdi:waypoint x="534" y="270" />
<omgdi:waypoint x="602" y="270" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="Task_4_di" bpmnElement="Task_4">
<omgdc:Bounds x="484" y="300" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="BoundaryEvent_4_di" bpmnElement="BoundaryEvent_4">
<omgdc:Bounds x="466" y="362" width="36" height="36" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="472" y="332" width="25" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_4_di" bpmnElement="EndEvent_4">
<omgdc:Bounds x="552" y="442" width="36" height="36" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="SequenceFlow_3_di" bpmnElement="SequenceFlow_3">
<omgdi:waypoint x="484" y="398" />
<omgdi:waypoint x="484" y="460" />
<omgdi:waypoint x="552" y="460" />
<bpmndi:BPMNLabel>
<omgdc:Bounds x="490" y="426" width="19" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</definitions>

122
test/spec/features/modeling/behavior/AdaptiveLabelPositioningBehaviorSpec.js
View File

@ -15,6 +15,7 @@ var testModules = [
coreModule
];
var ATTACH = { attach: true };
describe('modeling/behavior - AdaptiveLabelPositioningBehavior', function() {
@ -284,4 +285,125 @@ describe('modeling/behavior - AdaptiveLabelPositioningBehavior', function() {
});
describe('boundary-events', function() {
var diagramXML = require('./AdaptiveLabelPositioningBehavior.boundary-events.bpmn');
beforeEach(bootstrapModeler(diagramXML, {
modules: testModules
}));
describe('on boundary label creation', function() {
it('should NOT create label onto host', inject(
function(elementRegistry, modeling) {
// given
var element = elementRegistry.get('BoundaryEvent_1');
// when
modeling.updateProperties(element, { name: 'FOO BAR' });
// then
expectLabelOrientation(element, 'bottom');
}
));
it('should create label to the left', inject(
function(elementRegistry, modeling) {
// given
var element = elementRegistry.get('BoundaryEvent_4');
// when
modeling.updateProperties(element, { name: 'FOO BAR' });
// then
expectLabelOrientation(element, 'left');
}
));
});
describe('on connect', function() {
it('should keep label where it is if no better position', inject(
function(elementRegistry, modeling) {
// given
var source = elementRegistry.get('BoundaryEvent_2'),
target = elementRegistry.get('EndEvent_2');
// when
modeling.connect(source, target);
// then
expectLabelOrientation(source, 'right');
}
));
});
describe('on reconnect', function() {
it('should keep label where it is if no better position', inject(
function(elementRegistry, modeling) {
// given
var source = elementRegistry.get('BoundaryEvent_3'),
target = elementRegistry.get('EndEvent_1'),
connection = elementRegistry.get('SequenceFlow_2');
// when
modeling.reconnectEnd(connection, target, { x: target.x + target.width / 2, y: target.y });
// then
expectLabelOrientation(source, 'bottom');
}
));
});
describe('on boundary move', function() {
it('should move label to the left', inject(
function(elementRegistry, modeling) {
// given
var element = elementRegistry.get('BoundaryEvent_3'),
host = elementRegistry.get('Task_3');
// when
modeling.moveElements([ element ], { x: -50, y: -50 }, host, ATTACH);
// then
expectLabelOrientation(element, 'left');
}
));
it('should move label to the top', inject(
function(elementRegistry, modeling) {
// given
var element = elementRegistry.get('BoundaryEvent_3'),
host = elementRegistry.get('Task_3');
// when
modeling.moveElements([ element ], { x: 50, y: -80 }, host, ATTACH); // top-right corner
// then
expectLabelOrientation(element, 'top');
}
));
});
});
});