Tutorial: Highlight-Leak bei Step-Wechsel verhindern

Problem: Wenn der Nutzer waehrend einer laufenden Demo auf Weiter klickt,
lief die async Demo im Hintergrund weiter und setzte Highlights auf
Elemente des alten Steps (z.B. Beschreibungsfeld blieb umrahmt).

Fix:
- _exitStep setzt _demoRunning = false (bricht laufende Demo ab)
- _highlightSub prueft _isActive bevor es Highlights setzt
- _highlightSub schreibt nicht mehr in _cleanupFns (vereinfacht)
- _clearSubHighlights entfernt zuverlaessig alle Highlights per
  querySelectorAll

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-03-16 17:43:59 +01:00
Ursprung e183f23350
Commit 3b1e6c1496
2 geänderte Dateien mit 8 neuen und 4 gelöschten Zeilen

Datei anzeigen

@@ -764,7 +764,7 @@
<script src="/static/js/api_network.js?v=20260316a"></script>
<script src="/static/js/network-graph.js?v=20260316a"></script>
<script src="/static/js/app_network.js?v=20260316a"></script>
<script src="/static/js/tutorial.js?v=20260316u"></script>
<script src="/static/js/tutorial.js?v=20260316v"></script>
<script src="/static/js/chat.js?v=20260316f"></script>
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>

Datei anzeigen

@@ -11,6 +11,7 @@ const Tutorial = {
_keyHandler: null,
_resizeHandler: null,
_demoRunning: false,
_lastExitedStep: -1,
_stepTimers: [], // setTimeout-IDs fuer den aktuellen Step
_savedState: null, // Dashboard-Zustand vor dem Tutorial
@@ -465,12 +466,11 @@ const Tutorial = {
// Highlight-Helfer: Einzelnes Sub-Element innerhalb einer Kachel markieren
// -----------------------------------------------------------------------
_highlightSub(selector) {
// Ignorieren wenn der Step bereits verlassen wurde
if (!this._isActive) return;
var el = document.querySelector(selector);
if (!el) return;
el.classList.add('tutorial-sub-highlight');
this._cleanupFns.push(function() {
el.classList.remove('tutorial-sub-highlight');
});
},
_clearSubHighlights() {
@@ -1291,6 +1291,10 @@ const Tutorial = {
_exitStep(i) {
var step = this._steps[i];
this._clearStepTimers();
// Laufende Demo abbrechen
this._demoRunning = false;
// Step-Index merken um verspaetete Highlight-Aufrufe zu ignorieren
this._lastExitedStep = i;
if (step.onExit) {
step.onExit();
}