feat(interaction-events): add custom hits for sub process

bpmn-io · Jun 21, 2019 · 2efb1f4 · 2efb1f4
1 parent 3b65e68
commit 2efb1f4
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 2 deletions.
diff --git a/lib/features/interaction-events/BpmnInteractionEvents.js b/lib/features/interaction-events/BpmnInteractionEvents.js
@@ -14,7 +14,8 @@ import {
 import { queryAll as domQueryAll } from 'min-dom';
 
 
-var LABEL_WIDTH = 30;
+var LABEL_WIDTH = 30,
+    LABEL_HEIGHT = 30;
 
 var HIGH_PRIORITY = 2000;
 
@@ -37,6 +38,10 @@ export default function BpmnInteractionEvents(elementRegistry, eventBus, graphic
     if (isAny(element, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
       return createParticipantHit(element);
     }
+
+    if (is(element, 'bpmn:SubProcess')) {
+      return createSubProcessHit(element);
+    }
   });
 
   eventBus.on('interactionEvents.updateHit', function(context) {
@@ -46,6 +51,10 @@ export default function BpmnInteractionEvents(elementRegistry, eventBus, graphic
     if (isAny(element, [ 'bpmn:Lane', 'bpmn:Participant' ])) {
       return updateParticipantHit(element, gfx);
     }
+
+    if (is(element, 'bpmn:SubProcess')) {
+      return updateSubProcessHit(element, gfx);
+    }
   });
 
   eventBus.on([
@@ -83,7 +92,8 @@ BpmnInteractionEvents.prototype.updateHits = function(isDragging) {
 
     if (isAny(element, [
       'bpmn:Lane',
-      'bpmn:Participant'
+      'bpmn:Participant',
+      'bpmn:SubProcess'
     ])) {
       containerHit = domQueryAll('.djs-hit-group .djs-hit', gfx)[0];
 
@@ -148,6 +158,64 @@ function updateParticipantHit(element, gfx) {
     height: element.height
   });
 
+  // return actual group
+  return rects[0].parentNode;
+}
+
+function createSubProcessHit(element) {
+  var hit = svgCreate('g');
+
+  svgAttr(hit, {
+    class: 'djs-hit-group'
+  });
+
+  var containerHit = svgCreate('rect');
+
+  svgAttr(containerHit, {
+    x: 0,
+    y: 0,
+    width: element.width,
+    height: element.height,
+    stroke: 'none',
+    strokeWidth: 15,
+    strokeOpacity: 0,
+    fill: 'none',
+    border: 'none',
+    class: 'djs-hit djs-hit-stroke'
+  });
+
+  svgAppend(hit, containerHit);
+
+  var labelHit = svgCreate('rect');
+
+  svgAttr(labelHit, {
+    x: 0,
+    y: 0,
+    width: element.width,
+    height: LABEL_HEIGHT,
+    stroke: 'none',
+    fill: 'none',
+    border: 'none',
+    class: 'djs-hit'
+  });
+
+  svgAppend(hit, labelHit);
+
+  return hit;
+}
+
+function updateSubProcessHit(element, gfx) {
+  var rects = domQueryAll('.djs-hit-group .djs-hit', gfx);
+
+  svgAttr(rects[0], {
+    width: element.width,
+    height: element.height,
+  });
+
+  svgAttr(rects[1], {
+    width: element.width
+  });
+
   // return actual group
   return rects[0].parentNode;
 }
diff --git a/test/spec/features/interaction-events/BpmnInteractionEventsSpec.js b/test/spec/features/interaction-events/BpmnInteractionEventsSpec.js
@@ -52,4 +52,32 @@ describe('features/interaction-events', function() {
       expect(hits).to.have.lengthOf(2);
     }));
   });
+
+
+  describe('sub process hits', function() {
+
+    var diagramXML = require('test/fixtures/bpmn/containers.bpmn');
+
+    beforeEach(bootstrapModeler(diagramXML, {
+      modules: [
+        coreModule,
+        modelingModule,
+        interactionEventsModule
+      ]
+    }));
+
+
+    it('should create two hit zones per participant', inject(function(elementRegistry) {
+
+      // given
+      var subProcess = elementRegistry.get('SubProcess_1'),
+          subProcessGfx = elementRegistry.getGraphics(subProcess);
+
+      // when
+      var hits = domQueryAll('.djs-hit', subProcessGfx);
+
+      // then
+      expect(hits).to.have.lengthOf(2);
+    }));
+  });
 });