fix: properly hide context pads based on scope filters

Author: nikku

lib/features/context-pads/ContextPads.js

@@ -72,7 +72,7 @@ export default function ContextPads(
   eventBus.on(SCOPE_FILTER_CHANGED_EVENT, event => {
 
     const showElements = domQueryAll(
-      '.djs-overlay-ts-context-menu [data-scope-ids]',
+      '.djs-overlay-bts-context-menu [data-scope-ids]',
       overlays._overlayRoot
     );
 
@@ -86,7 +86,7 @@ export default function ContextPads(
     }
 
     const hideElements = domQueryAll(
-      '.djs-overlay-ts-context-menu [data-hide-scope-ids]',
+      '.djs-overlay-bts-context-menu [data-hide-scope-ids]',
       overlays._overlayRoot
     );
 

test/spec/features/context-pads/ContextPads.scope-filter.bpmn

@@ -0,0 +1,35 @@
+<?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:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js-token-simulation" exporterVersion="0.36.3">
+  <bpmn:process id="PROCESS" isExecutable="true">
+    <bpmn:subProcess id="SUB_PROCESS" name="SUB_PROCESS">
+      <bpmn:incoming>Flow_1etbflx</bpmn:incoming>
+      <bpmn:task id="NESTED_TASK" name="NESTED_TASK" />
+    </bpmn:subProcess>
+    <bpmn:startEvent id="START" name="START">
+      <bpmn:outgoing>Flow_1etbflx</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:sequenceFlow id="Flow_1etbflx" sourceRef="START" targetRef="SUB_PROCESS" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="PROCESS">
+      <bpmndi:BPMNShape id="START_di" bpmnElement="START">
+        <dc:Bounds x="-28" y="-38" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="-28" y="5" width="36" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="SUB_PROCESS_di" bpmnElement="SUB_PROCESS" isExpanded="true">
+        <dc:Bounds x="70" y="-120" width="350" height="200" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="NESTED_TASK_di" bpmnElement="NESTED_TASK">
+        <dc:Bounds x="180" y="-60" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Flow_1etbflx_di" bpmnElement="Flow_1etbflx">
+        <di:waypoint x="8" y="-20" />
+        <di:waypoint x="70" y="-20" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/features/context-pads/ContextPadsSpec.js

@@ -0,0 +1,113 @@
+import ModelerModule from 'lib/modeler';
+
+import SimulationSupportModule from 'lib/simulation-support';
+
+import {
+  bootstrapModeler as _bootstrapModeler,
+  inject,
+  getBpmnJS,
+} from 'test/TestHelper';
+
+
+const TestModule = {
+  __depends__: [
+    SimulationSupportModule
+  ],
+  __init__: [
+    function(animation) {
+      animation.setAnimationSpeed(100);
+    }
+  ]
+};
+
+function bootstrapModeler(diagram, config) {
+  const {
+    animation = {},
+    ...restConfig
+  } = config;
+
+  return _bootstrapModeler(diagram, {
+    ...restConfig,
+    animation: {
+      randomize: false,
+      ...animation
+    }
+  });
+}
+
+
+describe('features/context-pads', function() {
+
+  const diagram = require('./ContextPads.scope-filter.bpmn');
+
+  beforeEach(bootstrapModeler(diagram, {
+    additionalModules: [
+      ModelerModule,
+      TestModule
+    ]
+  }));
+
+  beforeEach(inject(function(simulationSupport) {
+    simulationSupport.toggleSimulation();
+  }));
+
+
+  it('should allow to start process', inject(
+    async function() {
+
+      // then
+      expect(canTriggerElement('START')).to.be.true;
+    }
+  ));
+
+
+  it('should allow to pause activities', inject(
+    async function() {
+
+      // then
+      expect(canTriggerElement('NESTED_TASK')).to.be.true;
+      expect(canTriggerElement('SUB_PROCESS')).to.be.true;
+    }
+  ));
+
+
+  it('should filter scoped', inject(
+    async function(scopeFilter) {
+
+      // given
+      // toggle pause
+      triggerElement('NESTED_TASK');
+
+      // start element
+      triggerElement('START');
+
+      // when
+      const { scope } = await elementEnter('NESTED_TASK');
+
+      scopeFilter.toggle(scope);
+
+      // then
+      expect(canTriggerElement('START')).to.be.false;
+    }
+  ));
+
+});
+
+
+// helpers ////////////////////
+
+function getSimulationSupport() {
+  return getBpmnJS().get('simulationSupport');
+}
+
+function canTriggerElement(...args) {
+  return !!getSimulationSupport().getElementTrigger(...args);
+}
+
+function triggerElement(...args) {
+  return getSimulationSupport().triggerElement(...args);
+}
+
+function elementEnter(...args) {
+  return getSimulationSupport().elementEnter(...args);
+}