WIP

Author: philippfromme

assets/css/bpmn-js-token-simulation.css

@@ -256,6 +256,31 @@
   color: var(--token-simulation-white, #FFFFFF);
 }
 
+.bts-close-button {
+  display: none;
+  position: absolute;
+  top: 10px;
+  right: 50%;
+  transform: translate(50%, 0);
+  background-color: #0f62fe;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--token-simulation-white, #FFFFFF);
+  z-index: 100;
+  padding:  6px 6px 6px 12px;
+  font-size: 14px;
+}
+
+.bts-close-button:hover {
+  background-color: #0043ce;
+}
+
+.bjs-container.simulation .bts-close-button {
+  display: flex;
+}
+
 .bjs-container .djs-palette {
   top: 60px;
 }

lib/features/toggle-mode/viewer/ToggleMode.js

@@ -48,6 +48,20 @@ ToggleMode.prototype._init = function() {
   domEvent.bind(this._container, 'click', () => this.toggleMode());
 
   this._canvas.getContainer().appendChild(this._container);
+
+  // Add close button for simulation mode
+  this._closeButton = domify(`
+    <div class="bts-close-button">
+      Exit
+      <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 32 32">
+        <polygon fill="white" points="17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16"/>
+      </svg>
+    </div>
+  `);
+
+  domEvent.bind(this._closeButton, 'click', () => this.toggleMode(false));
+
+  this._canvas.getContainer().appendChild(this._closeButton);
 };
 
 ToggleMode.prototype.toggleMode = function(active = !this._active) {