WIP

philippfromme · philippfromme · commit 649889acc93d · 2026-01-28T18:03:00.000+01:00
diff --git a/assets/css/bpmn-js-token-simulation.css b/assets/css/bpmn-js-token-simulation.css
@@ -242,17 +242,7 @@
 }
 
 .bts-toggle-mode {
-  cursor: pointer;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  background-color: var(--token-simulation-silver-darken-94, #EFEFEF);
-  border-radius: 2px;
-  padding: 6px;
-  font-size: 16px;
-  color: var(--token-simulation-grey-darken-30, #212121);
-  user-select: none;
-  display: inline-flex;
+  display: none;
 }
 
 .bts-toggle-mode .bts-toggle {
diff --git a/example/visualizer.html b/example/visualizer.html
@@ -14,18 +14,19 @@
   <style>
     .controls {
       position: absolute;
-      top: 10px;
-      left: 10px;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: max-content;
       background: white;
-      padding: 15px;
       border: 1px solid #ccc;
       border-radius: 4px;
       z-index: 100;
     }
 
     .controls button {
       margin: 5px;
-      padding: 8px 16px;
+      padding: 5px;
       cursor: pointer;
     }
 
@@ -39,17 +40,12 @@
 <body>
   <div class="canvas-parent">
     <div class="controls">
-      <h3>Execution Visualizer Demo</h3>
       <button id="toggleMode">Toggle Visualization Mode</button>
       <button id="step1">Step 1: StartEvent</button>
       <button id="step2">Step 2: Task1</button>
       <button id="step3">Step 3: Task2</button>
       <button id="step4">Step 4: EndEvent</button>
       <button id="clear">Clear</button>
-      <div class="info">
-        <strong>Instructions:</strong> Toggle mode on, then use step buttons to visualize execution.
-        Blue = executed, Red = active
-      </div>
     </div>
     
     <div class="canvas" id="canvas"></div>
diff --git a/lib/features/neutral-element-colors/NeutralElementColors.js b/lib/features/neutral-element-colors/NeutralElementColors.js
@@ -15,19 +15,27 @@ export default function NeutralElementColors(
 
     if (active) {
       this._setNeutralColors();
+    } else {
+      this._removeNeutralColors();
     }
   });
 }
 
 NeutralElementColors.prototype._setNeutralColors = function() {
   this._elementRegistry.forEach(element => {
     this._elementColors.add(element, ID, {
-      stroke: '#212121',
+      stroke: '#aaa',
       fill: '#fff'
     });
   });
 };
 
+NeutralElementColors.prototype._removeNeutralColors = function() {
+  this._elementRegistry.forEach(element => {
+    this._elementColors.remove(element, ID);
+  });
+};
+
 NeutralElementColors.$inject = [
   'eventBus',
   'elementRegistry',
