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

fix(label-behavior): text annotation resizing after text property change 

Depends on bpmn-io/diagram-js#259

Related to camunda/camunda-modeler#631
This commit is contained in:
Philipp Fromme 2018-06-13 09:01:16 +02:00 committed by Nico Rehwaldt
parent 3c87716895
commit 100f3fb2ee
9 changed files with 128 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
lib/draw/TextRenderer.js
View File

@ -5,6 +5,8 @@ import TextUtil from 'diagram-js/lib/util/Text';
var DEFAULT_FONT_SIZE = 12;
var LINE_HEIGHT_RATIO = 1.2;
var MIN_TEXT_ANNOTATION_HEIGHT = 30;
export default function TextRenderer(config) {
@ -34,7 +36,7 @@ export default function TextRenderer(config) {
*
* @return {Bounds}
*/
this.getLayoutedBounds = function(bounds, text) {
this.getExternalLabelBounds = function(bounds, text) {
var layoutedDimensions = textUtil.getDimensions(text, {
box: {
@ -56,6 +58,31 @@ export default function TextRenderer(config) {
};
/**
* Get the new bounds of text annotation.
*
* @param {Bounds} bounds
* @param {String} text
*
* @return {Bounds}
*/
this.getTextAnnotationBounds = function(bounds, text) {
var layoutedDimensions = textUtil.getDimensions(text, {
box: bounds,
style: defaultStyle,
align: 'left-top',
padding: 5
});
return {
x: bounds.x,
y: bounds.y,
width: bounds.width,
height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
};
};
/**
* Create a layouted text element.
*

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

@ -338,9 +338,9 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
assign(style, {
textAlign: 'left',
paddingTop: (7 * zoom) + 'px',
paddingTop: (5 * zoom) + 'px',
paddingBottom: (7 * zoom) + 'px',
paddingLeft: (5 * zoom) + 'px',
paddingLeft: (7 * zoom) + 'px',
paddingRight: (5 * zoom) + 'px',
fontSize: defaultFontSize + 'px',
lineHeight: defaultLineHeight

2
lib/features/label-editing/cmd/UpdateLabelHandler.js
View File

@ -114,7 +114,7 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
// resize element based on label _or_ pre-defined bounds
if (typeof newBounds === 'undefined') {
newBounds = textRenderer.getLayoutedBounds(label, text);
newBounds = textRenderer.getExternalLabelBounds(label, text);
}
// setting newBounds to false or _null_ will

18
lib/features/modeling/behavior/LabelBehavior.js
View File

@ -52,6 +52,22 @@ export default function LabelBehavior(
if (NAME_PROPERTY in properties) {
modeling.updateLabel(element, properties[NAME_PROPERTY]);
}
if ('text' in properties
&& is(element, 'bpmn:TextAnnotation')) {
var newBounds = textRenderer.getTextAnnotationBounds(
{
x: element.x,
y: element.y,
width: element.width,
height: element.height
},
properties.text || ''
);
modeling.updateLabel(element, properties.text, newBounds);
}
});
// create label shape after shape/connection was created
@ -73,7 +89,7 @@ export default function LabelBehavior(
var labelCenter = getExternalLabelMid(element);
// we don't care about x and y
var labelDimensions = textRenderer.getLayoutedBounds(
var labelDimensions = textRenderer.getExternalLabelBounds(
DEFAULT_LABEL_DIMENSIONS,
businessObject.name || ''
);

2
lib/features/modeling/cmd/UpdatePropertiesHandler.js
View File

@ -120,7 +120,7 @@ UpdatePropertiesHandler.prototype.postExecute = function(context) {
// get layouted text bounds and resize external
// external label accordingly
var newLabelBounds = this._textRenderer.getLayoutedBounds(label, text);
var newLabelBounds = this._textRenderer.getExternalLabelBounds(label, text);
this._modeling.resizeShape(label, newLabelBounds, NULL_DIMENSIONS);
};

2
lib/import/BpmnImporter.js
View File

@ -237,7 +237,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
if (text) {
// get corrected bounds from actual layouted text
bounds = this._textRenderer.getLayoutedBounds(bounds, text);
bounds = this._textRenderer.getExternalLabelBounds(bounds, text);
}
label = this._elementFactory.createLabel(elementData(semantic, {

13
test/fixtures/bpmn/features/modeling/behavior/label-behavior.bpmn vendored
View File

@ -1,9 +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:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.15.1">
<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.16.0-dev">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:startEvent id="StartEvent_1" name="foo" />
<bpmn:task id="Task_1" />
<bpmn:exclusiveGateway id="ExclusiveGateway_1" />
<bpmn:textAnnotation id="TextAnnotation_1">
<bpmn:text>foo</bpmn:text>
</bpmn:textAnnotation>
<bpmn:association id="Association_1w715hc" sourceRef="Task_1" targetRef="TextAnnotation_1" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
@ -19,6 +23,13 @@
<bpmndi:BPMNShape id="ExclusiveGateway_1gzwevj_di" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
<dc:Bounds x="256" y="95" width="50" height="50" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="TextAnnotation_1qulyll_di" bpmnElement="TextAnnotation_1">
<dc:Bounds x="453" y="0" width="100" height="30" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="Association_1w715hc_di" bpmnElement="Association_1w715hc">
<di:waypoint x="441" y="80" />
<di:waypoint x="489" y="30" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

30
test/spec/draw/TextRendererSpec.js
View File

@ -23,7 +23,7 @@ describe('draw - TextRenderer', function() {
}));
it('should expose #getLayoutedBounds', inject(function(textRenderer) {
it('should expose #getExternalLabelBounds', inject(function(textRenderer) {
// given
var bounds = {
@ -34,7 +34,33 @@ describe('draw - TextRenderer', function() {
};
// when
var layoutedBounds = textRenderer.getLayoutedBounds(
var layoutedBounds = textRenderer.getExternalLabelBounds(
bounds,
'FOO\nBar\nFOOBAR'
);
// then
expect(layoutedBounds).to.exist;
expect(layoutedBounds.x).to.exist;
expect(layoutedBounds.y).to.exist;
expect(layoutedBounds.width).to.exist;
expect(layoutedBounds.height).to.exist;
}));
it('should expose #getTextAnnotationBounds', inject(function(textRenderer) {
// given
var bounds = {
x: 0,
y: 0,
width: 100,
height: 100
};
// when
var layoutedBounds = textRenderer.getTextAnnotationBounds(
bounds,
'FOO\nBar\nFOOBAR'
);

38
test/spec/features/modeling/behavior/LabelBehaviorSpec.js
View File

@ -333,4 +333,42 @@ describe('behavior - LabelBehavior', function() {
});
describe('update properties', function() {
it('should resize after updating name property', inject(
function(elementRegistry, modeling) {
// given
var spy = sinon.spy(modeling, 'resizeShape');
var startEventShape = elementRegistry.get('StartEvent_1');
// when
modeling.updateProperties(startEventShape, { name: 'bar' });
// then
expect(spy).to.have.been.called;
}
));
it('should resize after updating text property', inject(
function(elementRegistry, modeling) {
// given
var spy = sinon.spy(modeling, 'resizeShape');
var textAnnotationShape = elementRegistry.get('TextAnnotation_1');
// when
modeling.updateProperties(textAnnotationShape, { text: 'bar' });
// then
expect(spy).to.have.been.called;
}
));
});
});