fix(ordering): render labels always on top

This commit is contained in:
Nico Rehwaldt 2018-12-04 11:48:36 +01:00 committed by merge-me[bot]
parent fdac538602
commit 31271059d4
5 changed files with 86 additions and 25 deletions

View File

@ -15,10 +15,10 @@ import {
/**
* a simple ordering provider that makes sure:
*
* (0) labels are rendered always on top
* (1) elements are ordered by a {level} property
* (2) elements with {alwaysOnTop} are always added to the root
*/
export default function BpmnOrderingProvider(eventBus, translate) {
export default function BpmnOrderingProvider(eventBus, canvas, translate) {
OrderingProvider.call(this, eventBus);
@ -116,6 +116,14 @@ export default function BpmnOrderingProvider(eventBus, translate) {
this.getOrdering = function(element, newParent) {
// render labels always on top
if (element.labelTarget) {
return {
parent: canvas.getRootElement(),
index: -1
};
}
var elementOrder = getOrder(element);
@ -156,6 +164,6 @@ export default function BpmnOrderingProvider(eventBus, translate) {
};
}
BpmnOrderingProvider.$inject = [ 'eventBus', 'translate' ];
BpmnOrderingProvider.$inject = [ 'eventBus', 'canvas', 'translate' ];
inherits(BpmnOrderingProvider, OrderingProvider);

View File

@ -117,7 +117,9 @@ describe('features/copy-paste', function() {
});
// then
expect(rootElement.children).to.have.length(3);
// 3 sub-processes
// 6 pasted labels
expect(rootElement.children).to.have.length(9);
var pastedElements = elementRegistry.filter(function(e) {
return e !== element && is(e, 'bpmn:SubProcess');

View File

@ -222,14 +222,63 @@ describe('features/modeling - ordering', function() {
beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
it('should always be in front', inject(function() {
describe('should stay always in front', function() {
// when
move('SequenceFlow_label', { x: 500, y: 0 }, 'Collaboration', false);
it('moving <SequenceFlow_label> onto <Participant>', inject(function() {
// then
expectZOrder('Collaboration', 'Participant', 'SequenceFlow_label');
}));
// when
move('SequenceFlow_label', { x: 300, y: 0 }, 'Collaboration', false);
// then
expectZOrder('Collaboration', 'Participant', 'SequenceFlow_label');
}));
it('moving <StartEvent_label> onto <Participant>', inject(function() {
// when
move('StartEvent_label', { x: 50, y: -330 }, 'Participant', false);
// then
expectZOrder(
'Participant',
'Task_With_Boundary',
'BoundaryEvent',
'Participant_StartEvent',
'StartEvent_label'
);
}));
it('move <StartEvent> with label onto <Participant>', inject(function() {
// when
move('StartEvent', { x: 0, y: -330 }, 'Participant', false);
// then
expectZOrder(
'Participant',
'Participant_StartEvent',
'StartEvent_label'
);
}));
it('move <DataStore> with label onto <Participant_StartEvent>', inject(function() {
// when
move('DataStore', { x: -150, y: 330 }, 'Participant_StartEvent', false);
// then
expectZOrder(
'Participant',
'Participant_StartEvent',
'DataStore',
'DataStore_label'
);
}));
});
});

View File

@ -204,8 +204,10 @@ export function expectZOrder() {
next = elements[idx + 1];
if (next) {
expect(compareZOrder(e, next)).to.eql(-1);
if (next && compareZOrder(e, next) !== -1) {
throw new Error(
'expected <element#' + next + '> to be in front of <element#' + e + '>'
);
}
});

View File

@ -14,7 +14,7 @@
<bpmn2:task id="Task">
<bpmn2:incoming>SequenceFlow</bpmn2:incoming>
</bpmn2:task>
<bpmn2:dataStoreReference id="DataStore" />
<bpmn2:dataStoreReference id="DataStore" name="Store" />
<bpmn2:dataStoreReference id="DataStore_With_Output" />
</bpmn2:process>
<bpmn2:process id="Process_StartEvent" isExecutable="false">
@ -53,17 +53,17 @@
<dc:Bounds x="480" y="144" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_SequenceFlow_1" bpmnElement="SequenceFlow" sourceElement="_BPMNShape_BoundaryEvent_2" targetElement="_BPMNShape_Task_3">
<di:waypoint xsi:type="dc:Point" x="364" y="242" />
<di:waypoint xsi:type="dc:Point" x="364" y="272" />
<di:waypoint xsi:type="dc:Point" x="530" y="272" />
<di:waypoint xsi:type="dc:Point" x="530" y="224" />
<di:waypoint x="364" y="242" />
<di:waypoint x="364" y="272" />
<di:waypoint x="530" y="272" />
<di:waypoint x="530" y="224" />
<bpmndi:BPMNLabel>
<dc:Bounds x="429" y="272" width="90" height="6" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="BPMNEdge_MessageFlow_1" bpmnElement="MessageFlow" sourceElement="_BPMNShape_Task_2" targetElement="_BPMNShape_Participant_3">
<di:waypoint xsi:type="dc:Point" x="326" y="224" />
<di:waypoint xsi:type="dc:Point" x="326" y="444" />
<di:waypoint x="326" y="224" />
<di:waypoint x="326" y="444" />
<bpmndi:BPMNLabel>
<dc:Bounds x="370" y="334" width="6" height="6" />
</bpmndi:BPMNLabel>
@ -74,18 +74,18 @@
<dc:Bounds x="244" y="531" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="DataStoreReference_0g20j8u_di" bpmnElement="DataStore">
<bpmndi:BPMNShape id="DataStore_di" bpmnElement="DataStore">
<dc:Bounds x="629" y="159" width="50" height="50" />
<bpmndi:BPMNLabel>
<dc:Bounds x="609" y="209" width="90" height="20" />
<dc:Bounds x="641" y="129" width="27" height="14" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="Task_1w5ze4k_di" bpmnElement="Task_With_Input">
<dc:Bounds x="604" y="473" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="DataInputAssociation_1ubbgym_di" bpmnElement="DataInputAssociation">
<di:waypoint xsi:type="dc:Point" x="654" y="209" />
<di:waypoint xsi:type="dc:Point" x="654" y="473" />
<di:waypoint x="654" y="209" />
<di:waypoint x="654" y="473" />
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="DataStoreReference_0jbctd4_di" bpmnElement="DataStore_With_Output">
<dc:Bounds x="772" y="159" width="50" height="50" />
@ -97,8 +97,8 @@
<dc:Bounds x="747" y="473" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="DataOutputAssociation_1fcd0id_di" bpmnElement="DataOutputAssociation">
<di:waypoint xsi:type="dc:Point" x="797" y="473" />
<di:waypoint xsi:type="dc:Point" x="797" y="209" />
<di:waypoint x="797" y="473" />
<di:waypoint x="797" y="209" />
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>