WIP

Author: philippfromme

docs/execution-visualizer/README.md

@@ -50,13 +50,29 @@ toggleMode.toggleMode(false);
 
 ```javascript
 executionVisualizer.setExecutionState({
-  executedElements: ['StartEvent_1', 'Flow_1', 'Task_1', 'Flow_2', 'Task_2', 'Flow_3'],  // IDs of executed elements and flows
-  activeElement: 'Task_3'                                                                  // ID of currently active element
+  completed: ['StartEvent_1', 'Flow_1', 'Task_1', 'Flow_2', 'Task_2', 'Flow_3'],  // IDs of completed elements and flows
+  active: 'Task_3'                                                                 // ID(s) of currently active element(s)
 });
 ```
 
-- **executedElements**: Array of element IDs that have been executed, including both shapes and sequence flows (styled in gray)
-- **activeElement**: ID of the currently active element (styled in green)
+- **completed**: Array of element IDs that have been completed, including both shapes and sequence flows (styled in blue)
+- **active**: ID or array of IDs of the currently active element(s) (styled in blue with higher priority)
+
+**Note**: `active` can be either a single string ID or an array of string IDs to support multiple active elements:
+
+```javascript
+// Single active element
+executionVisualizer.setExecutionState({
+  completed: ['StartEvent_1', 'Flow_1'],
+  active: 'Task_1'
+});
+
+// Multiple active elements (e.g., parallel execution)
+executionVisualizer.setExecutionState({
+  completed: ['StartEvent_1', 'Flow_1', 'ParallelGateway_1'],
+  active: ['Task_1', 'Task_2', 'Task_3']
+});
+```
 
 #### Clear Visualization
 
@@ -69,7 +85,7 @@ executionVisualizer.clear();
 
 ```javascript
 const state = executionVisualizer.getExecutionState();
-// Returns: { executedElements: [...], activeElement: '...' }
+// Returns: { completed: [...], active: [...] }
 ```
 
 ## Visual Styling
@@ -87,8 +103,8 @@ const eventBus = viewer.get('eventBus');
 
 // Fired when execution state changes
 eventBus.on('executionVisualizer.stateChanged', (event) => {
-  console.log('Executed elements:', event.executedElements);
-  console.log('Active element:', event.activeElement);
+  console.log('Completed elements:', event.completed);
+  console.log('Active elements:', event.active);
 });
 
 // Fired when visualization is cleared

example/src/visualizer.js

@@ -81,8 +81,8 @@ function setupControls(toggleMode, executionVisualizer, eventBus) {
       toggleBtn.textContent = 'Mode: ON';
     }
     executionVisualizer.setExecutionState({
-      executedElements: [],
-      activeElement: 'StartEvent_0j9yk1o'
+      completed: [],
+      active: 'StartEvent_0j9yk1o'
     });
   });
 
@@ -93,8 +93,8 @@ function setupControls(toggleMode, executionVisualizer, eventBus) {
       toggleBtn.textContent = 'Mode: ON';
     }
     executionVisualizer.setExecutionState({
-      executedElements: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3'],
-      activeElement: 'ParallelGateway_0s75uad'
+      completed: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3'],
+      active: 'ParallelGateway_0s75uad'
     });
   });
 
@@ -105,8 +105,8 @@ function setupControls(toggleMode, executionVisualizer, eventBus) {
       toggleBtn.textContent = 'Mode: ON';
     }
     executionVisualizer.setExecutionState({
-      executedElements: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3', 'ParallelGateway_0s75uad', 'SequenceFlow_10d6h3a'],
-      activeElement: 'Task_1upmjgh'
+      completed: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3', 'ParallelGateway_0s75uad', 'SequenceFlow_10d6h3a'],
+      active: 'Task_1upmjgh'
     });
   });
 
@@ -117,8 +117,8 @@ function setupControls(toggleMode, executionVisualizer, eventBus) {
       toggleBtn.textContent = 'Mode: ON';
     }
     executionVisualizer.setExecutionState({
-      executedElements: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3', 'ParallelGateway_0s75uad', 'SequenceFlow_10d6h3a', 'Task_1upmjgh', 'SequenceFlow_1dzm18n'],
-      activeElement: 'ParallelGateway_158jo5x'
+      completed: ['StartEvent_0j9yk1o', 'SequenceFlow_1bpznq3', 'ParallelGateway_0s75uad', 'SequenceFlow_10d6h3a', 'Task_1upmjgh', 'SequenceFlow_1dzm18n'],
+      active: ['ParallelGateway_158jo5x']
     });
   });
 

lib/features/execution-visualizer/ExecutionVisualizer.js

@@ -31,9 +31,9 @@ export default function ExecutionVisualizer(elementRegistry, elementColors, even
   this._eventBus = eventBus;
   this._overlays = overlays;
 
-  this._executedElements = new Set();
-  this._activeElement = null;
-  this._activeOverlayId = null;
+  this._completed = new Set();
+  this._active = new Set();
+  this._activeOverlayIds = new Map();
 
   // Clear execution state when mode is toggled off
   eventBus.on(TOGGLE_MODE_EVENT, event => {
@@ -51,94 +51,97 @@ ExecutionVisualizer.$inject = [
 ];
 
 /**
- * Set the execution state by providing executed elements and active element.
+ * Set the execution state by providing completed elements and active elements.
  *
  * @param {Object} state
- * @param {string[]} [state.executedElements] - Array of element IDs that have been executed (including sequence flows)
- * @param {string} [state.activeElement] - ID of the currently active element
+ * @param {string[]} [state.completed] - Array of element IDs that have been completed (including sequence flows)
+ * @param {string|string[]} [state.active] - ID(s) of the currently active element(s)
  */
 ExecutionVisualizer.prototype.setExecutionState = function(state) {
   const {
-    executedElements = [],
-    activeElement = null
+    completed = [],
+    active = []
   } = state;
 
+  // Normalize active to array
+  const activeArray = Array.isArray(active) ? active : (active ? [active] : []);
+
   // Clear previous active element styling
-  if (this._activeElement) {
-    const prevActiveEl = this._elementRegistry.get(this._activeElement);
-    if (prevActiveEl) {
-      this._elementColors.remove(prevActiveEl, 'active');
+  this._active.forEach(id => {
+    if (!activeArray.includes(id)) {
+      const prevActiveEl = this._elementRegistry.get(id);
+      if (prevActiveEl) {
+        this._elementColors.remove(prevActiveEl, 'active');
+      }
+      this._removeActiveIndicator(id);
     }
-    this._removeActiveIndicator();
-  }
+  });
 
-  // Clear previous executed elements that are no longer in the list
-  this._executedElements.forEach(id => {
-    if (!executedElements.includes(id)) {
+  // Clear previous completed elements that are no longer in the list
+  this._completed.forEach(id => {
+    if (!completed.includes(id)) {
       const element = this._elementRegistry.get(id);
       if (element) {
         this._elementColors.remove(element, 'executed');
       }
     }
   });
 
-  // Update executed elements (including sequence flows)
-  executedElements.forEach(id => {
+  // Update completed elements (including sequence flows)
+  completed.forEach(id => {
     const element = this._elementRegistry.get(id);
-    if (element && id !== activeElement) {
+    if (element && !activeArray.includes(id)) {
       this._elementColors.add(element, 'executed', {
         stroke: EXECUTED_STROKE_COLOR
       }, EXECUTED_PRIORITY);
     }
   });
 
-  // Update active element
-  if (activeElement) {
-    const activeEl = this._elementRegistry.get(activeElement);
+  // Update active elements
+  activeArray.forEach(id => {
+    const activeEl = this._elementRegistry.get(id);
     if (activeEl) {
       this._elementColors.add(activeEl, 'active', {
         stroke: ACTIVE_STROKE_COLOR
       }, ACTIVE_PRIORITY);
-      this._addActiveIndicator(activeEl);
+      this._addActiveIndicator(activeEl, id);
     }
-  }
+  });
 
   // Update internal state
-  this._executedElements = new Set(executedElements);
-  this._activeElement = activeElement;
+  this._completed = new Set(completed);
+  this._active = new Set(activeArray);
 
   // Fire event for integrations
   this._eventBus.fire('executionVisualizer.stateChanged', {
-    executedElements,
-    activeElement
+    completed,
+    active: activeArray
   });
 };
 
 /**
  * Clear all execution visualization state.
  */
 ExecutionVisualizer.prototype.clear = function() {
-  this._executedElements.forEach(id => {
+  this._completed.forEach(id => {
     const element = this._elementRegistry.get(id);
     if (element) {
       this._elementColors.remove(element, 'executed');
     }
   });
 
-  // Remove active element color
-  if (this._activeElement) {
-    const activeEl = this._elementRegistry.get(this._activeElement);
+  // Remove active element colors
+  this._active.forEach(id => {
+    const activeEl = this._elementRegistry.get(id);
     if (activeEl) {
       this._elementColors.remove(activeEl, 'active');
     }
-  }
-
-  // Remove active indicator
-  this._removeActiveIndicator();
+    this._removeActiveIndicator(id);
+  });
 
   // Reset internal state
-  this._executedElements.clear();
-  this._activeElement = null;
+  this._completed.clear();
+  this._active.clear();
 
   // Fire event
   this._eventBus.fire('executionVisualizer.cleared');
@@ -151,40 +154,47 @@ ExecutionVisualizer.prototype.clear = function() {
  */
 ExecutionVisualizer.prototype.getExecutionState = function() {
   return {
-    executedElements: Array.from(this._executedElements),
-    activeElement: this._activeElement
+    completed: Array.from(this._completed),
+    active: Array.from(this._active)
   };
 };
 
 /**
  * Add active indicator overlay to element.
  * @private
  */
-ExecutionVisualizer.prototype._addActiveIndicator = function(element) {
+ExecutionVisualizer.prototype._addActiveIndicator = function(element, elementId) {
   if (is(element, 'bpmn:SequenceFlow') || is(element, 'bpmn:MessageFlow')) {
     return;
   }
 
+  // Skip if already exists
+  if (this._activeOverlayIds.has(elementId)) {
+    return;
+  }
+
   const html = domify('<div class="bts-active-indicator"></div>');
 
   const position = { bottom: OFFSET_BOTTOM, right: OFFSET_LEFT };
 
-  this._activeOverlayId = this._overlays.add(element, 'bts-active-indicator', {
+  const overlayId = this._overlays.add(element, 'bts-active-indicator', {
     position: position,
     html: html,
     show: {
       minZoom: 0.5
     }
   });
+
+  this._activeOverlayIds.set(elementId, overlayId);
 };
 
 /**
  * Remove active indicator overlay.
  * @private
  */
-ExecutionVisualizer.prototype._removeActiveIndicator = function() {
-  if (this._activeOverlayId) {
-    this._overlays.remove(this._activeOverlayId);
-    this._activeOverlayId = null;
+ExecutionVisualizer.prototype._removeActiveIndicator = function(elementId) {
+  if (this._activeOverlayIds.has(elementId)) {
+    this._overlays.remove(this._activeOverlayIds.get(elementId));
+    this._activeOverlayIds.delete(elementId);
   }
 };

lib/features/neutral-element-colors/NeutralElementColors.js

@@ -24,7 +24,7 @@ export default function NeutralElementColors(
 NeutralElementColors.prototype._setNeutralColors = function() {
   this._elementRegistry.forEach(element => {
     this._elementColors.add(element, ID, {
-      stroke: '#aaa',
+      stroke: '#212121',
       fill: '#fff'
     });
   });