webdrop-bridge/docs/SCRIPT_VARIANTS.md

WebDrop Bridge - Drag & Drop Script Varianten

Verfügbare JavaScript-Scripte

1. bridge_script.js (CURRENT - Original)

Status: Versucht Drag zu ersetzen, verhindert Popup
Verwendung: Testing, zeigt dass File-Drop prinzipiell funktioniert
Problem: Web-App Popup erscheint nicht

2. bridge_script_debug.js (DEBUG - EMPFOHLEN ZUM START)

Status: Umfangreiches Logging, keine Manipulation
Verwendung: Herausfinden wie Popup ausgelöst wird
Funktionen:

• Loggt ALLE Drag/Drop Events
• Überwacht DataTransfer.setData
• Überwacht Network-Requests (API-Calls)
• Erkennt Angular Components
• Erkennt Modal/Popup Öffnungen
• Bietet Helper-Funktionen in Console

So verwenden:

# In main_window.py Zeile ~433 ändern:
script_path = Path(__file__).parent / "bridge_script_debug.js"  # <-- DEBUG aktivieren

Im Browser:

1. F12 → Console öffnen
2. ALT-Drag+Drop durchführen
3. Logs analysieren:
   • [MODAL OPENED] → Popup-Trigger gefunden!
   • [FETCH] oder [XHR] → API-Call gefunden!
   • [EVENT] → Drag-Flow verstehen

3. bridge_script_v2.js (EXTEND - Experimentell)

Status: Versuch DataTransfer zu erweitern
Problem: Browser-Sicherheit verhindert Files hinzufügen

4. bridge_script_hybrid.js (HYBRID - Experimentell)

Status: Versuch parallele Drags
Problem: Nur ein Drag zur Zeit möglich

5. bridge_script_drop_intercept.js (DROP - Experimentell)

Status: Drop-Event abfangen und manipulieren
Problem: DataTransfer kann nicht mit Files erstellt werden

🎯 Empfohlener Workflow

Phase 1: Debugging (JETZT)

1. Debug-Script aktivieren:

   # main_window.py, _install_bridge_script()
   script_path = Path(__file__).parent / "bridge_script_debug.js"
   

2. Anwendung starten und testen:

   python -m webdrop_bridge.main
   

3. In Browser (F12 Console):

   • ALT-Drag+Drop durchführen
   • Logs kopieren und analysieren
   • Nach [MODAL OPENED] oder API-Calls suchen

4. Herausfinden:

   • ✅ Wie wird Popup ausgelöst? (API-Call, Event, Component-Methode)
   • ✅ Welche Asset-ID wird verwendet?
   • ✅ Wo im DOM befindet sich die Popup-Logik?

Phase 2: Implementation (DANACH)

Basierend auf Debug-Ergebnissen:

Fall A: Popup wird durch API-Call ausgelöst

// In bridge_script.js nach erfolgreichem Drop:
fetch('/api/assets/' + assetId + '/checkout', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'}
}).then(response => {
  console.log('Checkout popup triggered');
});

Fall B: Popup wird durch Angular-Event ausgelöst

// Trigger Angular CDK Event
var dropList = document.querySelector('[cdkdroplist]');
if (dropList && window.ng) {
  var component = ng.getComponent(dropList);
  component.onDrop({assetId: assetId});
}

Fall C: Popup wird durch Component-Methode ausgelöst

// Direkter Methoden-Aufruf
var assetCard = document.getElementById(assetId);
if (assetCard && window.ng) {
  var component = ng.getComponent(assetCard);
  component.showCheckoutDialog();
}

Phase 3: Testing (FINAL)

1. Implementation in bridge_script.js integrieren
2. Beide Funktionen testen:
   • ✅ File wird gedroppt (Z:\ Laufwerk)
   • ✅ Popup erscheint (Auschecken-Dialog)

🔧 Script-Wechsel in Code

# src/webdrop_bridge/ui/main_window.py
# Zeile ~433 in _install_bridge_script()

# ORIGINAL (funktioniert, aber kein Popup):
script_path = Path(__file__).parent / "bridge_script.js"

# DEBUG (für Analyse):
script_path = Path(__file__).parent / "bridge_script_debug.js"

# Oder via Konfiguration:
script_name = self.config.bridge_script or "bridge_script.js"
script_path = Path(__file__).parent / script_name

📝 Debug-Checkliste

Beim Testen mit Debug-Script, notieren Sie:

• Wann erscheint das Popup? (Nach Drop, nach Verzögerung, sofort?)
• Gibt es API-Calls? (Welche URL, Parameter, Zeitpunkt?)
• Welche Angular-Events feuern? (CDK Events, Custom Events?)
• Wo wird Modal/Dialog erstellt? (DOM-Position, Klassen, Component)
• Welche Asset-Informationen werden benötigt? (ID, Name, URL?)
• Stack-Trace beim Modal-Öffnen? (console.trace Ausgabe)

🚀 Quick Commands

# App mit Debug-Script starten
python -m webdrop_bridge.main

# In Browser Console (F12):
webdrop_debug.getEventCounts()      # Event-Statistiken
webdrop_debug.resetCounters()       # Zähler zurücksetzen
webdrop_debug.getListeners(element) # Event-Listener auflisten
webdrop_debug.getComponent(element) # Angular Component anzeigen

# Logs filtern:
# Console Filter: "[MODAL]" → Nur Popup-Logs
# Console Filter: "[EVENT]" → Nur Event-Logs
# Console Filter: "[FETCH]|[XHR]" → Nur Network-Logs

⚠️ Bekannte Limitationen

1. Angular DevTools benötigt: Für ng.getComponent() Installation nötig
2. Chrome/Edge: Einige Features funktionieren nur in Chromium-Browsern
3. CSP: Bei strengen Content-Security-Policies können Logs blockiert werden
4. Performance: Debug-Script hat deutlichen Performance-Overhead

📚 Weiterführende Dokumentation

• ANGULAR_CDK_ANALYSIS.md - Angular Framework Details
• DRAG_DROP_PROBLEM_ANALYSIS.md - Problem-Analyse + Lösungen
• ARCHITECTURE.md - Gesamtarchitektur