sartography/bpmn-js
1
0
Fork 0
mirror of https://github.com/sartography/bpmn-js.git synced 2025-01-11 17:44:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(label): improve positioning of sequence flow labels

Browse Source 
closes #512
This commit is contained in:
Jan Stümmel 2016-04-19 16:50:42 +02:00
parent 1923a6bdda
commit 7811a47fae
3 changed files with 121 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
lib/util/LabelUtil.js
View File

@ -25,6 +25,39 @@ module.exports.hasExternalLabel = function(semantic) {
is(semantic, 'bpmn:MessageFlow');
};
/**
* Get the position for sequence flow labels
*
* @param {Array<Point>} waypoints
* @return {Point} the label position
*/
function getFlowLabelPosition(waypoints) {
// get the waypoints mid
var mid = waypoints.length / 2 - 1;
var first = waypoints[Math.floor(mid)];
var second = waypoints[Math.ceil(mid + 0.01)];
// get position
var position = getWaypointsMid(waypoints);
// calculate angle
var angle = Math.atan( (second.y - first.y) / (second.x - first.x) );
var x = position.x,
y = position.y;
if ( Math.abs(angle) < Math.PI / 2 ) {
y += DEFAULT_LABEL_SIZE.height / 2;
} else {
x += DEFAULT_LABEL_SIZE.width / 2;
}
return { x: x, y: y };
}
module.exports.getFlowLabelPosition = getFlowLabelPosition;
/**
* Get the middle of a number of waypoints
@ -51,7 +84,7 @@ module.exports.getWaypointsMid = getWaypointsMid;
function getExternalLabelMid(element) {
if (element.waypoints) {
return getWaypointsMid(element.waypoints);
return getFlowLabelPosition(element.waypoints);
} else {
return {
x: element.x + element.width / 2,

37
test/spec/util/LabelUtil.bpmn Normal file
View File

@ -0,0 +1,37 @@
<?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" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" />
<bpmn:exclusiveGateway id="ExclusiveGateway_2" />
<bpmn:exclusiveGateway id="ExclusiveGateway_1" />
<bpmn:exclusiveGateway id="ExclusiveGateway_3" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
<dc:Bounds x="304" y="339" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="277" y="375" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="ExclusiveGateway_1pe81pr_di" bpmnElement="ExclusiveGateway_2" isMarkerVisible="true">
<dc:Bounds x="604" y="332" width="50" height="50" />
<bpmndi:BPMNLabel>
<dc:Bounds x="584" y="382" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="ExclusiveGateway_0risjnj_di" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
<dc:Bounds x="297" y="70" width="50" height="50" />
<bpmndi:BPMNLabel>
<dc:Bounds x="277" y="120" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="ExclusiveGateway_0wbu2t7_di" bpmnElement="ExclusiveGateway_3" isMarkerVisible="true">
<dc:Bounds x="604" y="70" width="50" height="50" />
<bpmndi:BPMNLabel>
<dc:Bounds x="584" y="120" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

50
test/spec/util/LabelUtilSpec.js Normal file
View File

@ -0,0 +1,50 @@
'use strict';
require('../../TestHelper');
/* global bootstrapModeler, inject */
var coreModule = require('../../../lib/core'),
modelingModule = require('../../../lib/features/modeling');
var ModelUtil = require('../../../lib/util/ModelUtil'),
LabelUtil = require('../../../lib/util/LabelUtil');
describe('LabelUtil', function() {
var diagramXML = require('./LabelUtil.bpmn');
beforeEach(bootstrapModeler(diagramXML, { modules: [ coreModule, modelingModule ] }));
it('should correctly place horizontal label', inject(function(modeling, elementRegistry) {
// given
var element1 = elementRegistry.get('StartEvent_1'),
element2 = elementRegistry.get('ExclusiveGateway_2');
// when
var connection = modeling.connect(element1, element2);
// then
expect(connection.label.x).to.be.equal(427);
expect(connection.label.y).to.be.equal(357);
}));
it('should correctly place vertical label', inject(function(modeling, elementRegistry) {
// given
var element1 = elementRegistry.get('StartEvent_1'),
element2 = elementRegistry.get('ExclusiveGateway_1');
// when
var connection = modeling.connect(element1, element2);
// then
expect(connection.label.x).to.be.equal(322);
expect(connection.label.y).to.be.equal(219.5);
}));
});