mirror of
https://github.com/sartography/bpmn-js.git
synced 2025-02-17 03:16:32 +00:00
feat(label-editing): enable direct editing for group labels
* Adds external label for Groups * Modifies referenced categoryValue Closes #955
This commit is contained in:
parent
f6f9ac29f2
commit
fb3398fa39
@ -279,7 +279,7 @@ LabelEditingProvider.prototype.getEditingBBox = function(element) {
|
||||
paddingTop = 7 * zoom,
|
||||
paddingBottom = 4 * zoom;
|
||||
|
||||
// external labels for events, data elements, gateways and connections
|
||||
// external labels for events, data elements, gateways, groups and connections
|
||||
if (target.labelTarget) {
|
||||
assign(bounds, {
|
||||
width: width,
|
||||
|
@ -16,6 +16,21 @@ function getLabelAttr(semantic) {
|
||||
if (is(semantic, 'bpmn:TextAnnotation')) {
|
||||
return 'text';
|
||||
}
|
||||
|
||||
if (is(semantic, 'bpmn:Group')) {
|
||||
return 'categoryValueRef';
|
||||
}
|
||||
}
|
||||
|
||||
function getCategoryValue(semantic) {
|
||||
var categoryValueRef = semantic['categoryValueRef'];
|
||||
|
||||
if (!categoryValueRef) {
|
||||
return '';
|
||||
}
|
||||
|
||||
|
||||
return categoryValueRef.value || '';
|
||||
}
|
||||
|
||||
export function getLabel(element) {
|
||||
@ -23,6 +38,12 @@ export function getLabel(element) {
|
||||
attr = getLabelAttr(semantic);
|
||||
|
||||
if (attr) {
|
||||
|
||||
if (attr === 'categoryValueRef') {
|
||||
|
||||
return getCategoryValue(semantic);
|
||||
}
|
||||
|
||||
return semantic[attr] || '';
|
||||
}
|
||||
}
|
||||
@ -33,7 +54,13 @@ export function setLabel(element, text, isExternal) {
|
||||
attr = getLabelAttr(semantic);
|
||||
|
||||
if (attr) {
|
||||
semantic[attr] = text;
|
||||
|
||||
if (attr === 'categoryValueRef') {
|
||||
semantic['categoryValueRef'].value = text;
|
||||
} else {
|
||||
semantic[attr] = text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return element;
|
||||
|
@ -11,7 +11,6 @@ import {
|
||||
} from '../../../util/LabelUtil';
|
||||
|
||||
import {
|
||||
getBusinessObject,
|
||||
is
|
||||
} from '../../../util/ModelUtil';
|
||||
|
||||
@ -103,9 +102,7 @@ export default function UpdateLabelHandler(modeling, textRenderer) {
|
||||
return;
|
||||
}
|
||||
|
||||
var bo = getBusinessObject(label);
|
||||
|
||||
var text = bo.name || bo.text;
|
||||
var text = getLabel(label);
|
||||
|
||||
// don't resize without text
|
||||
if (!text) {
|
||||
|
@ -255,7 +255,7 @@ function isTextAnnotation(element) {
|
||||
}
|
||||
|
||||
function isGroup(element) {
|
||||
return is(element, 'bpmn:Group');
|
||||
return is(element, 'bpmn:Group') && !element.labelTarget;
|
||||
}
|
||||
|
||||
function isCompensationBoundary(element) {
|
||||
|
@ -17,6 +17,10 @@ import {
|
||||
isExpanded
|
||||
} from '../util/DiUtil';
|
||||
|
||||
import {
|
||||
getLabel
|
||||
} from '../features/label-editing/LabelUtil';
|
||||
|
||||
import {
|
||||
elementToString
|
||||
} from './Util';
|
||||
@ -182,7 +186,7 @@ BpmnImporter.prototype.add = function(semantic, parentElement) {
|
||||
}));
|
||||
}
|
||||
// (optional) LABEL
|
||||
if (isLabelExternal(semantic) && semantic.name) {
|
||||
if (isLabelExternal(semantic) && getLabel(element)) {
|
||||
this.addLabel(semantic, element);
|
||||
}
|
||||
|
||||
@ -239,7 +243,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
|
||||
|
||||
bounds = getExternalLabelBounds(semantic, element);
|
||||
|
||||
text = semantic.name;
|
||||
text = getLabel(element);
|
||||
|
||||
if (text) {
|
||||
// get corrected bounds from actual layouted text
|
||||
@ -250,7 +254,7 @@ BpmnImporter.prototype.addLabel = function(semantic, element) {
|
||||
id: semantic.id + '_label',
|
||||
labelTarget: element,
|
||||
type: 'label',
|
||||
hidden: element.hidden || !semantic.name,
|
||||
hidden: element.hidden || !getLabel(element),
|
||||
x: Math.round(bounds.x),
|
||||
y: Math.round(bounds.y),
|
||||
width: Math.round(bounds.width),
|
||||
|
@ -27,7 +27,8 @@ export function isLabelExternal(semantic) {
|
||||
is(semantic, 'bpmn:DataInput') ||
|
||||
is(semantic, 'bpmn:DataOutput') ||
|
||||
is(semantic, 'bpmn:SequenceFlow') ||
|
||||
is(semantic, 'bpmn:MessageFlow');
|
||||
is(semantic, 'bpmn:MessageFlow') ||
|
||||
is(semantic, 'bpmn:Group');
|
||||
}
|
||||
|
||||
/**
|
||||
@ -97,6 +98,11 @@ export function getExternalLabelMid(element) {
|
||||
|
||||
if (element.waypoints) {
|
||||
return getFlowLabelPosition(element.waypoints);
|
||||
} else if (is(element, 'bpmn:Group')) {
|
||||
return {
|
||||
x: element.x + element.width / 2,
|
||||
y: element.y + DEFAULT_LABEL_SIZE.height / 2
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
x: element.x + element.width / 2,
|
||||
|
@ -67,7 +67,12 @@
|
||||
<bpmn:dataObject id="DataObject_1rq8hb8" />
|
||||
<bpmn:dataStoreReference id="DataStoreReference_1" />
|
||||
<bpmn:association id="Association_0ckvfj2" sourceRef="SubProcess_1" targetRef="TextAnnotation_1" />
|
||||
<bpmn:group id="Group_1" categoryValueRef="CategoryValue_1" />
|
||||
<bpmn:group id="Group_2" />
|
||||
</bpmn:process>
|
||||
<bpmn:category id="Category_1">
|
||||
<bpmn:categoryValue id="CategoryValue_1" value="FOO" />
|
||||
</bpmn:category>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1o0amh9">
|
||||
<bpmndi:BPMNShape id="Participant_15tkgjw_di" bpmnElement="Participant_1">
|
||||
@ -184,17 +189,26 @@
|
||||
<dc:Bounds x="161" y="646" width="600" height="250" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="DataOutput_di" bpmnElement="DataOutput">
|
||||
<dc:Bounds x="265" y="150" width="34" height="40"/>
|
||||
<dc:Bounds x="265" y="150" width="34" height="40" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds height="12" width="30" x="265" y="195"/>
|
||||
<dc:Bounds x="265" y="195" width="30" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="DataInput_di" bpmnElement="DataInput">
|
||||
<dc:Bounds x="220" y="150" width="34" height="40"/>
|
||||
<dc:Bounds x="220" y="150" width="34" height="40" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds height="12" width="30" x="220" y="200"/>
|
||||
<dc:Bounds x="220" y="200" width="30" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_1_di" bpmnElement="Group_1">
|
||||
<dc:Bounds x="195" y="390" width="225" height="190" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<dc:Bounds x="296" y="397" width="24" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_2_di" bpmnElement="Group_2">
|
||||
<dc:Bounds x="555" y="390" width="85" height="200" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
|
@ -411,6 +411,11 @@ describe('features - label-editing', function() {
|
||||
|
||||
it('data output', directEdit('DataOutput'));
|
||||
|
||||
|
||||
it('group', directEdit('Group_1'));
|
||||
|
||||
it('group via label', directEdit('Group_1_label'));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
@ -7,7 +7,11 @@
|
||||
<bpmn:textAnnotation id="TextAnnotation_1">
|
||||
<bpmn:text></bpmn:text>
|
||||
</bpmn:textAnnotation>
|
||||
<bpmn:group id="Group_1" categoryValueRef="CategoryValue_1" />
|
||||
</bpmn:process>
|
||||
<bpmn:category id="Category_1">
|
||||
<bpmn:categoryValue id="CategoryValue_1" />
|
||||
</bpmn:category>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
|
||||
<bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
|
||||
@ -25,6 +29,9 @@
|
||||
<bpmndi:BPMNShape id="TextAnnotation_1_di" bpmnElement="TextAnnotation_1">
|
||||
<dc:Bounds x="426" y="220" width="100" height="30" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Group_1_di" bpmnElement="Group_1">
|
||||
<dc:Bounds x="165" y="190" width="150" height="120" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</bpmn:definitions>
|
||||
|
@ -134,6 +134,20 @@ describe('features/modeling - update label', function() {
|
||||
));
|
||||
|
||||
|
||||
it('should change value of group', inject(function(modeling, elementRegistry) {
|
||||
|
||||
// given
|
||||
var group_1 = elementRegistry.get('Group_1');
|
||||
|
||||
// when
|
||||
modeling.updateLabel(group_1, 'foo');
|
||||
|
||||
// then
|
||||
expect(group_1.businessObject.categoryValueRef.value).to.equal('foo');
|
||||
expect(group_1.label).to.exist;
|
||||
}));
|
||||
|
||||
|
||||
it('should propertly fire events.changed after event name change', inject(
|
||||
function(modeling, elementRegistry, eventBus) {
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user