feat(ordering): always render groups on top

Closes #979
bpmn-io · May 2, 2019 · 18ed106 · 18ed106
1 parent bf412f4
commit 18ed106
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 1 deletion.
diff --git a/lib/features/ordering/BpmnOrderingProvider.js b/lib/features/ordering/BpmnOrderingProvider.js
@@ -15,7 +15,7 @@ import {
 /**
  * a simple ordering provider that makes sure:
  *
- * (0) labels are rendered always on top
+ * (0) labels and groups are rendered always on top
  * (1) elements are ordered by a {level} property
  */
 export default function BpmnOrderingProvider(eventBus, canvas, translate) {
@@ -63,6 +63,7 @@ export default function BpmnOrderingProvider(eventBus, canvas, translate) {
       }
     },
     { type: 'bpmn:BoundaryEvent', order: { level: 8 } },
+    { type: 'bpmn:Group', order: { level: 10 } },
     { type: 'bpmn:FlowElement', order: { level: 5 } },
     { type: 'bpmn:Participant', order: { level: -2 } },
     { type: 'bpmn:Lane', order: { level: -1 } }

diff --git a/test/spec/features/ordering/BpmnOrderingProviderSpec.js b/test/spec/features/ordering/BpmnOrderingProviderSpec.js
@@ -283,6 +283,51 @@ describe('features/modeling - ordering', function() {
   });
 
 
+  describe('groups', function() {
+
+    var diagramXML = require('./groups.bpmn');
+
+    beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+
+    describe('should stay always in front', function() {
+
+      it('moving <Group> onto <StartEvent>', inject(function() {
+
+        // when
+        move('Group', { x: 100, y: 0 }, 'StartEvent', false);
+
+        // then
+        expectZOrder('StartEvent', 'Group');
+      }));
+
+
+      it('moving <Group> onto <Task>', inject(function() {
+
+        // when
+        move('Group', { x: 200, y: 50 }, 'Task', false);
+
+        // then
+        expectZOrder('Task', 'Group');
+
+      }));
+
+
+      it('move <Group> onto <SubProcess>', inject(function() {
+
+        // when
+        move('Group', { x: 400, y: 0 }, 'SubProcess', false);
+
+        // then
+        expectZOrder('SubProcess', 'Group');
+
+      }));
+
+    });
+
+  });
+
+
   describe('connections', function() {
 
     var diagramXML = require('./ordering.bpmn');

diff --git a/test/spec/features/ordering/groups.bpmn b/test/spec/features/ordering/groups.bpmn
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="sid-0fcc2144-457b-4505-9e44-ff673663e3bc" targetNamespace="http://www.signavio.com/bpmn20" exporter="Camunda Modeler" exporterVersion="3.0.1" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
+  <category id="Category_1">
+    <categoryValue id="CategoryValue_1" value="my group" />
+  </category>
+  <process id="Process_1" processType="None" isExecutable="false">
+    <startEvent id="StartEvent" />
+    <task id="Task" />
+    <subProcess id="SubProcess" />
+    <group id="Group" categoryValueRef="CategoryValue_1" />
+  </process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="Group_1di" bpmnElement="Group">
+        <omgdc:Bounds x="180" y="105" width="188" height="154" />
+        <bpmndi:BPMNLabel>
+          <omgdc:Bounds x="184" y="107" width="58.28571319580078" height="15" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="StartEvent_0yve8vf_di" bpmnElement="StartEvent">
+        <omgdc:Bounds x="450" y="164" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_0nb7h9d_di" bpmnElement="Task">
+        <omgdc:Bounds x="418" y="268" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="SubProcess_02cid6e_di" bpmnElement="SubProcess" isExpanded="true">
+        <omgdc:Bounds x="546" y="138" width="350" height="200" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</definitions>