feat: allow to pause simulation at specific element

Closes #9.
bpmn-io · Dec 14, 2021 · f6c6b06 · f6c6b06
1 parent 5323070
commit f6c6b06
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 0 deletions.
diff --git a/assets/css/bpmn-js-token-simulation.css b/assets/css/bpmn-js-token-simulation.css
@@ -53,6 +53,12 @@
   color: var(--token-simulation-white, #FFFFFF);
 }
 
+.djs-overlays:not(.hover) .context-pad:not(:hover).show-hover,
+.context-pad:not(:hover) .show-hover,
+.context-pad:hover .hide-hover {
+  display: none;
+}
+
 .context-pad.disabled {
   background-color: var(--token-simulation-silver-darken-94, #EFEFEF);
   color: var(--token-simulation-grey-base-40, #666666);

diff --git a/lib/features/context-pads/ContextPads.js b/lib/features/context-pads/ContextPads.js
@@ -20,6 +20,7 @@ import ExclusiveGatewayHandler from './handler/ExclusiveGatewayHandler';
 import EventBasedGatewayHandler from './handler/EventBasedGatewayHandler';
 import IntermediateCatchEventHandler from './handler/IntermediateCatchEventHandler';
 import StartEventHandler from './handler/StartEventHandler';
+import PauseHandler from './handler/PauseHandler';
 
 
 const LOW_PRIORITY = 500;
@@ -54,6 +55,7 @@ export default function ContextPads(
   this.registerHandler('bpmn:Process', StartEventHandler);
   this.registerHandler('bpmn:SubProcess', StartEventHandler);
   this.registerHandler('bpmn:Participant', StartEventHandler);
+  this.registerHandler('bpmn:Activity', PauseHandler);
 
   eventBus.on(TOGGLE_MODE_EVENT, LOW_PRIORITY, context => {
     const active = context.active;

diff --git a/lib/features/context-pads/handler/PauseHandler.js b/lib/features/context-pads/handler/PauseHandler.js
@@ -0,0 +1,74 @@
+import {
+  domify
+} from 'min-dom';
+
+
+export default function PauseHandler(simulator) {
+  this._simulator = simulator;
+}
+
+PauseHandler.prototype.createContextPads = function(element) {
+
+  return [
+    this.createPauseContextPad(element)
+  ];
+};
+
+PauseHandler.prototype.createPauseContextPad = function(element) {
+
+  const scopes = () => this._findScopes({
+    element
+  });
+
+  // only show if no active scope
+  if (scopes().length) {
+    return;
+  }
+
+  const wait = this._isPaused(element);
+
+  const html = domify(
+    `<div class="context-pad ${ wait ? '' : 'show-hover' }" title="${ wait ? 'Remove' : 'Add' } pause point">
+      <i class="fa ${ wait ? 'fa-circle-o' : 'fa-circle' } show-hover"></i>
+      <i class="fa fa-circle hide-hover"></i>
+    </div>`
+  );
+
+  const action = () => {
+
+    if (scopes().length) {
+      return;
+    }
+
+    this._togglePaused(element);
+  };
+
+  return {
+    action,
+    element,
+    html
+  };
+};
+
+PauseHandler.prototype._isPaused = function(element) {
+
+  const {
+    wait
+  } = this._simulator.getConfig(element);
+
+  return wait;
+};
+
+PauseHandler.prototype._togglePaused = function(element) {
+  const wait = !this._isPaused(element);
+
+  this._simulator.waitAtElement(element, wait);
+};
+
+PauseHandler.prototype._findScopes = function(options) {
+  return this._simulator.findScopes(options);
+};
+
+PauseHandler.$inject = [
+  'simulator'
+];
diff --git a/test/spec/SimulationSpec.js b/test/spec/SimulationSpec.js
@@ -121,6 +121,76 @@ describe('simulation', function() {
     ));
 
 
+    describe('pause at node', function() {
+
+      it('should add pause point', inject(
+        async function(simulator) {
+
+          // when
+          triggerElement('Task_1');
+
+          triggerElement('StartEvent_1');
+
+          await elementEnter('Task_1');
+
+          // then
+          expectHistory([
+            'StartEvent_1',
+            'SequenceFlow_1',
+            'Task_1'
+          ]);
+
+          // but when
+          triggerElement('Task_1');
+
+          await scopeDestroyed();
+
+          // then
+          expectHistory([
+            'StartEvent_1',
+            'SequenceFlow_1',
+            'Task_1',
+            'SequenceFlow_1wm1e59',
+            'ExclusiveGateway_1',
+            'SequenceFlow_2',
+            'Task_2',
+            'SequenceFlow_3',
+            'EndEvent_1'
+          ]);
+        }
+      ));
+
+
+      it('should remove pause point', inject(
+        async function(simulator) {
+
+          // given
+          triggerElement('Task_1');
+
+          // when
+          triggerElement('Task_1');
+          triggerElement('StartEvent_1');
+
+          await scopeDestroyed();
+
+          // then
+          expectHistory([
+            'StartEvent_1',
+            'SequenceFlow_1',
+            'Task_1',
+            'SequenceFlow_1wm1e59',
+            'ExclusiveGateway_1',
+            'SequenceFlow_2',
+            'Task_2',
+            'SequenceFlow_3',
+            'EndEvent_1'
+          ]);
+        }
+      ));
+
+    });
+
+
     it('should continue flow', inject(
       async function(simulator, exclusiveGatewaySettings) {