Add drag & drop script variants and enhanced debugging tools
- Introduced multiple JavaScript scripts for handling drag & drop functionality: - `bridge_script.js`: Original implementation with popup prevention. - `bridge_script_debug.js`: Debug version with extensive logging for troubleshooting. - `bridge_script_v2.js`: Enhanced version extending DataTransfer for better integration. - `bridge_script_hybrid.js`: Hybrid approach allowing parallel native file drag. - `bridge_script_drop_intercept.js`: Intercepts drop events for custom handling. - `bridge_script_intercept.js`: Prevents browser drag for ALT+drag, using Qt for file drag. - Added detailed documentation in `SCRIPT_VARIANTS.md` outlining usage, status, and recommended workflows for each script. - Implemented logging features to capture drag events, DataTransfer modifications, and network requests for better debugging. - Enhanced DataTransfer handling to support Windows-specific file formats and improve user experience during drag & drop operations.
This commit is contained in:
parent
88dc358894
commit
dee02ad600
12 changed files with 2244 additions and 65 deletions
171
docs/SCRIPT_VARIANTS.md
Normal file
171
docs/SCRIPT_VARIANTS.md
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
# 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:**
|
||||
```python
|
||||
# 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:**
|
||||
```python
|
||||
# main_window.py, _install_bridge_script()
|
||||
script_path = Path(__file__).parent / "bridge_script_debug.js"
|
||||
```
|
||||
|
||||
2. **Anwendung starten und testen:**
|
||||
```powershell
|
||||
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**
|
||||
```javascript
|
||||
// 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**
|
||||
```javascript
|
||||
// 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**
|
||||
```javascript
|
||||
// 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
|
||||
|
||||
```python
|
||||
# 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
|
||||
|
||||
```powershell
|
||||
# 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_CDK_ANALYSIS.md) - Angular Framework Details
|
||||
- [DRAG_DROP_PROBLEM_ANALYSIS.md](DRAG_DROP_PROBLEM_ANALYSIS.md) - Problem-Analyse + Lösungen
|
||||
- [ARCHITECTURE.md](ARCHITECTURE.md) - Gesamtarchitektur
|
||||
Loading…
Add table
Add a link
Reference in a new issue