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

feat(BpmnRenderer): text annotations automatically fit their content 

Closes #600
This commit is contained in:
pedesen 2016-11-04 15:28:12 +01:00 committed by Philipp Fromme
parent 651ed729a8
commit a53562e1d5
8 changed files with 45 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
lib/draw/BpmnRenderer.js
View File

@ -1401,12 +1401,26 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
'fill': 'none',
'stroke': 'none'
};
var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
var minHeight = 32,
minWidth = 100;
var text = getSemantic(element).text || '';
// provide pseudo infinite max width, which is necessary to
// avoid automatic line breaks in createText
var box = { width: 9000, height: element.height, x: element.x, y: element.y };
var label = renderLabel(parentGfx, text, { box: box, align: 'left', padding: 5 });
var height = Math.max(label.getBBox().height + 18, minHeight),
width = Math.max(label.getBBox().width, minWidth);
var textPathData = pathMap.getScaledPath('TEXT_ANNOTATION', {
xScaleFactor: 1,
yScaleFactor: 1,
containerWidth: element.width,
containerHeight: element.height,
containerWidth: width,
containerHeight: height,
position: {
mx: 0.0,
my: 0.0
@ -1414,8 +1428,16 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
});
drawPath(parentGfx, textPathData);
var text = getSemantic(element).text || '';
renderLabel(parentGfx, text, { box: element, align: 'left-middle', padding: 5 });
var dy = -((height - element.height) / 2);
// adjust dimension and vertical position
assign(element, {
width: width,
height: height,
y: element.y + dy
});
var textElement = drawRect(parentGfx, element.width, element.height, 0, 0, style);
return textElement;
},

6
lib/features/label-editing/LabelEditingProvider.js
View File

@ -175,10 +175,12 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
// text annotations
if (is(element, 'bpmn:TextAnnotation')) {
bounds.minWidth = 100;
bounds.height = element.height;
bounds.minWidth = element.width + PADDING;
bounds.minHeight = element.height;
style.textAlign = 'left';
style.paddingLeft = '4px';
style.paddingTop = '7px';
}
return { bounds: bounds, style: style };

4
lib/features/rules/BpmnRules.js
View File

@ -664,10 +664,6 @@ function canResize(shape, newBounds) {
return !newBounds || (newBounds.width >= 250 && newBounds.height >= 50);
}
if (isTextAnnotation(shape)) {
return true;
}
return false;
}

2
test/spec/draw/BpmnRendererSpec.js
View File

@ -267,7 +267,7 @@ describe('draw - bpmn renderer', function() {
var TextAnnotationPath = graphicsFactory.getShapePath(TextAnnotationElement);
// then
expect(TextAnnotationPath).to.equal('M368,156l100,0l0,80l-100,0z');
expect(TextAnnotationPath).to.equal('M368,180l100,0l0,32l-100,0z');
}));
});

16
test/spec/features/label-editing/LabelEditingProviderSpec.js
View File

@ -441,13 +441,13 @@ describe('features - label-editing', function() {
describe('text annotation', function() {
it('[no text] should have element height', testTextboxSizing('text-annotation', 1, 100, 98));
it('[no text] should have element height', testTextboxSizing('text-annotation', 1, 106, 'auto'));
it('[1 line text] should have element height', testTextboxSizing('text-annotation', 1, 100, 98, oneLineText));
it('[1 line text] should have element height', testTextboxSizing('text-annotation', 1, 106, 'auto', oneLineText));
it('[2 line text] should have element height', testTextboxSizing('text-annotation', 1, 100, 98, twoLineText));
it('[2 line text] should have extended height', testTextboxSizing('text-annotation', 1, 106, { min: 38 }, twoLineText));
it('[10 line text] should have element height', testTextboxSizing('text-annotation', 1, { min: 100 }, 98, tenLineText));
it('[10 line text] should have extended height', testTextboxSizing('text-annotation', 1, 106, { min: 140 }, tenLineText));
});
@ -556,13 +556,13 @@ describe('features - label-editing', function() {
describe('text annotation', function() {
it('[no text] should have min width', testTextboxSizing('text-annotation', 1, 100, 98));
it('[no text] should have min width', testTextboxSizing('text-annotation', 1, 106, { min: 32 }));
it('[one word] should have min width', testTextboxSizing('text-annotation', 1, 100, 98, oneWord));
it('[one word] should have min width', testTextboxSizing('text-annotation', 1, 106, { min: 32 }, oneWord));
it('[five words] should expand width', testTextboxSizing('text-annotation', 1, { min: 176 }, 98, fiveWords));
it('[five words] should expand width', testTextboxSizing('text-annotation', 1, { min: 176 }, { min: 32 }, fiveWords));
it('[long word] should expand width', testTextboxSizing('text-annotation', 1, { min: 129 }, 98, longWord));
it('[long word] should expand width', testTextboxSizing('text-annotation', 1, { min: 129 }, { min: 32 }, longWord));
});

2
test/spec/features/modeling/append/TextAnnotationSpec.js
View File

@ -95,7 +95,7 @@ describe('features/modeling - append text-annotation', function() {
//then
expect(annotationShape.width).to.eql(100);
expect(annotationShape.height).to.eql(30);
expect(annotationShape.height).to.eql(32);
}));
});

6
test/spec/features/modeling/layout/LayoutAssociationSpec.js
View File

@ -41,7 +41,7 @@ describe('features/modeling - layout association', function() {
// then
expect(waypoints).to.eql([
{ original: { x: 400, y: 400 }, x: 389, y: 385 },
{ original: { x: 400, y: 400 }, x: 388, y: 384 },
{ original: { x: 191, y: 120 }, x: 202, y: 134 }
]);
@ -63,7 +63,7 @@ describe('features/modeling - layout association', function() {
// then
expect(waypoints).to.eql([
{ original: { x: 420, y: 400 }, x: 408, y: 385 },
{ original: { x: 420, y: 400 }, x: 407, y: 384 },
{ original: { x: 191, y: 120 }, x: 202, y: 134 }
]);
@ -91,7 +91,7 @@ describe('features/modeling - layout association', function() {
// then
expect(waypoints).to.eql([
{ original: { x: 420, y: 400 }, x: 417, y: 385 },
{ original: { x: 420, y: 400 }, x: 417, y: 384 },
{ x: 400, y: 300 },
{ original: { x: 191, y: 120 }, x: 204, y: 131 }
]);

31
test/spec/features/snapping/BpmnSnappingSpec.js
View File

@ -302,7 +302,7 @@ describe('features/snapping - BpmnSnapping', function() {
dragging.end();
expect(participant.width).to.equal(467);
expect(participant.height).to.equal(287);
expect(participant.height).to.equal(263);
}));
@ -437,35 +437,6 @@ describe('features/snapping - BpmnSnapping', function() {
});
describe('on TextAnnotation resize', function() {
var diagramXML = require('./BpmnSnapping.textAnnotation-resize.bpmn');
var testResizeModules = [
coreModule,
modelingModule,
resizeModule,
rulesModule,
snappingModule
];
beforeEach(bootstrapModeler(diagramXML, { modules: testResizeModules }));
it('should snap to minimum bounds', inject(function(elementRegistry, resize, dragging) {
var textAnnotation = elementRegistry.get('TextAnnotation');
resize.activate(canvasEvent({ x: 0, y: 0 }), textAnnotation, 'se');
dragging.move(canvasEvent({ x: -400, y: -400 }));
dragging.end();
expect(textAnnotation.width).to.equal(50);
expect(textAnnotation.height).to.equal(30);
}));
});
describe('labels', function() {
var diagramXML = require('./BpmnSnapping.labels.bpmn');