fix(label-support): fix positioning of label created on shape create

* make sure label shape is created with correct size
* make sure test varifies behaviour

Closes camunda/camunda-modeler#535
This commit is contained in:
Philipp Fromme 2017-03-07 09:30:48 +01:00 committed by Nico Rehwaldt
parent 5283c41198
commit 79e8378db0
4 changed files with 71 additions and 25 deletions

View File

@ -15,6 +15,13 @@ var hasExternalLabel = LabelUtil.hasExternalLabel,
var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
var TextUtil = require('diagram-js/lib/util/Text');
var DEFAULT_LABEL_DIMENSIONS = {
width: 90,
height: 20
};
/**
* A component that makes sure that external labels are added
@ -29,6 +36,8 @@ function LabelSupport(eventBus, modeling, bpmnFactory) {
CommandInterceptor.call(this, eventBus);
var textUtil = new TextUtil();
///// create external labels on shape creation
@ -38,17 +47,26 @@ function LabelSupport(eventBus, modeling, bpmnFactory) {
var element = context.shape || context.connection,
businessObject = element.businessObject;
var position;
if (hasExternalLabel(businessObject)) {
position = getExternalLabelMid(element);
modeling.createLabel(element, position, {
id: businessObject.id + '_label',
hidden: !businessObject.name,
businessObject: businessObject
});
if (!hasExternalLabel(businessObject)) {
return;
}
var labelCenter = getExternalLabelMid(element);
// we don't care about x and y
var labelDimensions = getLayoutedBounds(
DEFAULT_LABEL_DIMENSIONS,
businessObject.name || '',
textUtil
);
modeling.createLabel(element, labelCenter, {
id: businessObject.id + '_label',
hidden: !businessObject.name,
businessObject: businessObject,
width: labelDimensions.width,
height: labelDimensions.height
});
});
@ -173,3 +191,32 @@ inherits(LabelSupport, CommandInterceptor);
LabelSupport.$inject = [ 'eventBus', 'modeling', 'bpmnFactory' ];
module.exports = LabelSupport;
// TODO(nikku): repeating code (search for <getLayoutedBounds>)
var EXTERNAL_LABEL_STYLE = {
fontFamily: 'Arial, sans-serif',
fontSize: '11px'
};
function getLayoutedBounds(bounds, text, textUtil) {
var layoutedLabelDimensions = textUtil.getDimensions(text, {
box: {
width: 90,
height: 30,
x: bounds.width / 2 + bounds.x,
y: bounds.height / 2 + bounds.y
},
style: EXTERNAL_LABEL_STYLE
});
// resize label shape to fit label text
return {
x: Math.round(bounds.x + bounds.width / 2 - layoutedLabelDimensions.width / 2),
y: Math.round(bounds.y),
width: Math.ceil(layoutedLabelDimensions.width),
height: Math.ceil(layoutedLabelDimensions.height)
};
}

View File

@ -24,7 +24,7 @@ var testModules = [
describe('modeling - label layouting', function() {
describe('should create label', function() {
describe('should position created label', function() {
var diagramXML = require('./LabelLayouting.initial.bpmn');
@ -33,7 +33,7 @@ describe('modeling - label layouting', function() {
}));
it('horizontal', inject(function(modeling, elementRegistry) { // only
it('horizontal', inject(function(modeling, elementRegistry) {
// given
var element1 = elementRegistry.get('StartEvent_1'),
@ -43,10 +43,8 @@ describe('modeling - label layouting', function() {
var connection = modeling.connect(element1, element2);
// then
// we don't need to resize the label since it's invisible
// therefore it has the standard width of 90px
expect(connection.label.x).to.be.equal(427);
expect(connection.label.y).to.be.equal(332);
expect(connection.label.x).to.be.equal(472);
expect(connection.label.y).to.be.within(335, 336);
}));
@ -60,8 +58,8 @@ describe('modeling - label layouting', function() {
var connection = modeling.connect(element1, element2);
// then
expect(connection.label.x).to.be.equal(292);
expect(connection.label.y).to.be.equal(219.5);
expect(connection.label.x).to.be.equal(337);
expect(connection.label.y).to.be.within(222, 224);
}));
});

View File

@ -4,8 +4,6 @@ require('../../../../TestHelper');
/* global bootstrapModeler, inject */
var assign = require('lodash/object/assign');
var modelingModule = require('../../../../../lib/features/modeling'),
coreModule = require('../../../../../lib/core');
@ -81,7 +79,10 @@ describe('behavior - LabelBehavior', function() {
expect(label).to.exist;
expect(elementRegistry.get(label.id)).to.exist;
expect(label).to.have.bounds(assign({ x: 262, y: 138, width: 90, height: 20 }));
expect(label.x).to.equal(307);
expect(label.y).to.be.within(141, 142);
expect(label.width).to.be.equal(0);
expect(label.height).to.be.within(12, 14);
}));

View File

@ -263,15 +263,15 @@ describe('features/replace - bpmn replace', function() {
it('should keep label position', inject(function(elementRegistry, bpmnReplace, modeling) {
// given
var exclusiveGateway = elementRegistry.get('ExclusiveGateway_1');
var label = elementRegistry.get('ExclusiveGateway_1_label');
var startEvent = elementRegistry.get('StartEvent_1');
var label = elementRegistry.get('StartEvent_1_label');
var newElementData = {
type: 'bpmn:InclusiveGateway'
type: 'bpmn:EndEvent'
};
// when
var newElement = bpmnReplace.replaceElement(exclusiveGateway, newElementData);
var newElement = bpmnReplace.replaceElement(startEvent, newElementData);
// then
expect(newElement.label.x).to.equal(label.x);