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
222
QUICKSTART_DEBUGGING.md
Normal file
222
QUICKSTART_DEBUGGING.md
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
# 🚀 QUICK START - Popup-Problem lösen
|
||||
|
||||
## Problem Zusammenfassung
|
||||
|
||||
- ✅ File-Drop funktioniert (Z:\ Laufwerk)
|
||||
- ❌ Web-App Popup erscheint nicht nach Drop (Auschecken-Dialog)
|
||||
|
||||
**Grund**: Unser JavaScript verhindert das Browser-Drag-Event mit `preventDefault()`, daher bekommt die Web-App kein Drop-Event.
|
||||
|
||||
## 🎯 Lösungsstrategie
|
||||
|
||||
**Phase 1: DEBUGGING** (ca. 15-30 Min)
|
||||
→ Herausfinden WIE das Popup ausgelöst wird
|
||||
|
||||
**Phase 2: IMPLEMENTATION** (ca. 30-60 Min)
|
||||
→ Popup-Trigger nach File-Drop manuell aufrufen
|
||||
|
||||
## 📋 Phase 1: Debugging - JETZT STARTEN
|
||||
|
||||
### Schritt 1: Debug-Script aktivieren
|
||||
|
||||
```powershell
|
||||
# Datei öffnen
|
||||
code "C:\Development\VS Code Projects\webdrop_bridge\src\webdrop_bridge\ui\main_window.py"
|
||||
```
|
||||
|
||||
**Zeile ~433** in `_install_bridge_script()` ändern:
|
||||
|
||||
```python
|
||||
# VORHER:
|
||||
script_path = Path(__file__).parent / "bridge_script.js"
|
||||
|
||||
# NACHHER (für Debugging):
|
||||
script_path = Path(__file__).parent / "bridge_script_debug.js"
|
||||
```
|
||||
|
||||
Speichern (Ctrl+S).
|
||||
|
||||
### Schritt 2: Anwendung starten
|
||||
|
||||
```powershell
|
||||
cd "C:\Development\VS Code Projects\webdrop_bridge"
|
||||
python -m webdrop_bridge.main
|
||||
```
|
||||
|
||||
### Schritt 3: Browser DevTools öffnen
|
||||
|
||||
1. Wenn WebDrop Bridge lädt
|
||||
2. **F12** drücken → DevTools öffnen
|
||||
3. **Console-Tab** auswählen
|
||||
4. Sie sollten sehen:
|
||||
`[WebDrop DEBUG] Ready! Perform ALT-drag+drop and watch the logs.`
|
||||
|
||||
### Schritt 4: ALT-Drag+Drop durchführen
|
||||
|
||||
1. In der GlobalDAM Anwendung:
|
||||
- **ALT-Taste** gedrückt halten
|
||||
- Asset **draggen**
|
||||
- Irgendwo **droppen** (z.B. auf dem Desktop)
|
||||
|
||||
2. **Popup sollte erscheinen!** (Auschecken-Ja/Nein)
|
||||
|
||||
3. **Sofort** zur Browser-Console wechseln!
|
||||
|
||||
### Schritt 5: Logs analysieren
|
||||
|
||||
Suchen Sie in der Console nach:
|
||||
|
||||
#### ✅ **A) Modal/Popup Detektion**
|
||||
```
|
||||
[MODAL OPENED] <<<< DAS WOLLEN WIR SEHEN!
|
||||
Modal element: <div class="...">
|
||||
Classes: modal-dialog checkout-dialog
|
||||
```
|
||||
|
||||
**Wenn gefunden →** Popup wird durch DOM-Manipulation ausgelöst
|
||||
**Merkblatt:** Notieren Sie die `className` und `textContent`
|
||||
|
||||
#### ✅ **B) API-Call Detection**
|
||||
```
|
||||
[FETCH] https://dev.agravity.io/api/assets/abc123/checkout
|
||||
```
|
||||
oder
|
||||
```
|
||||
[XHR] POST https://dev.agravity.io/api/assets/abc123/checkout
|
||||
```
|
||||
|
||||
**Wenn gefunden →** Popup wird durch API-Response ausgelöst
|
||||
**Merkblatt:** Notieren Sie die vollständige URL und Methode (POST/GET)
|
||||
|
||||
#### ✅ **C) Event Detection**
|
||||
```
|
||||
[EVENT] DROP
|
||||
Target: ...
|
||||
DataTransfer: ...
|
||||
```
|
||||
|
||||
**Merkblatt:** Notieren Sie welche Events feuern NACHDEM Drop passiert
|
||||
|
||||
### Schritt 6: Detailanalyse
|
||||
|
||||
In der Browser Console, führen Sie aus:
|
||||
|
||||
```javascript
|
||||
// Event-Statistik
|
||||
webdrop_debug.getEventCounts()
|
||||
|
||||
// Asset-Card Component untersuchen (wenn Angular DevTools installiert)
|
||||
var card = document.querySelector('ay-asset-card');
|
||||
var component = webdrop_debug.getComponent(card);
|
||||
console.log('Component methods:', Object.getOwnPropertyNames(Object.getPrototypeOf(component)));
|
||||
```
|
||||
|
||||
**Merkblatt:** Notieren Sie:
|
||||
- Welche Methoden hat das Component? (z.B. `onCheckout`, `showDialog`, etc.)
|
||||
- Gibt es einen `click`-Handler auf dem Asset?
|
||||
|
||||
## 📝 Was Sie herausfinden müssen
|
||||
|
||||
Nach dem Debugging sollten Sie wissen:
|
||||
|
||||
1. **WIE wird Popup ausgelöst?**
|
||||
- [ ] API-Call nach Drop (URL: ________________________)
|
||||
- [ ] DOM-Element wird erstellt (Class: ________________)
|
||||
- [ ] Angular Component Methode (Name: ________________)
|
||||
- [ ] Click-Event auf Button (Selector: _______________)
|
||||
|
||||
2. **WANN wird Popup ausgelöst?**
|
||||
- [ ] Sofort nach Drop
|
||||
- [ ] Nach Verzögerung (_____ Sekunden)
|
||||
- [ ] Nach API-Response
|
||||
- [ ] Nach User-Interaction
|
||||
|
||||
3. **WELCHE Daten werden benötigt?**
|
||||
- [ ] Asset-ID (Beispiel: _________________________)
|
||||
- [ ] Collection-ID (Beispiel: ______________________)
|
||||
- [ ] User-ID (Beispiel: ___________________________)
|
||||
- [ ] Weitere: ____________________________________
|
||||
|
||||
## 🔧 Phase 2: Implementation (NACHDEM Debugging abgeschlossen)
|
||||
|
||||
Basierend auf Ihren Erkenntnissen:
|
||||
|
||||
### Fall A: Popup durch API-Call
|
||||
|
||||
**In `bridge_script.js` hinzufügen** (nach erfolgreichem File-Drop):
|
||||
|
||||
```javascript
|
||||
// Nach Qt File-Drop Erfolg
|
||||
function triggerCheckoutPopup(assetId) {
|
||||
fetch('https://dev.agravity.io/api/assets/' + assetId + '/checkout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// ggf. Authorization Header
|
||||
},
|
||||
body: JSON.stringify({
|
||||
// Parameter basierend auf Debug-Logs
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log('Checkout popup triggered via API');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Fall B: Popup durch Component-Methode
|
||||
|
||||
```javascript
|
||||
function triggerCheckoutPopup(assetId) {
|
||||
var card = document.getElementById(assetId);
|
||||
if (card && window.ng) {
|
||||
var component = ng.getComponent(card);
|
||||
if (component && component.onCheckout) {
|
||||
component.onCheckout();
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Fall C: Popup durch Click-Simulation
|
||||
|
||||
```javascript
|
||||
function triggerCheckoutPopup(assetId) {
|
||||
var button = document.querySelector('[data-action="checkout"]');
|
||||
if (button) {
|
||||
button.click();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ⚡ Troubleshooting
|
||||
|
||||
**Problem:** Kein `[MODAL OPENED]` Log
|
||||
**Lösung:** Popup wird möglicherweise anders erstellt. Suchen Sie in Network-Tab nach API-Calls
|
||||
|
||||
**Problem:** Zu viele Logs
|
||||
**Lösung:** Console Filter nutzen: `[MODAL]` oder `[FETCH]`
|
||||
|
||||
**Problem:** `webdrop_debug` not defined
|
||||
**Lösung:** Debug-Script wurde nicht richtig geladen. main_window.py prüfen.
|
||||
|
||||
**Problem:** Angular DevTools fehlt
|
||||
**Lösung:** Chrome Extension installieren: "Angular DevTools"
|
||||
|
||||
## 📞 Nächste Schritte
|
||||
|
||||
1. ✅ Debug-Script aktivieren (oben Schritt 1)
|
||||
2. ✅ Logs sammeln (Schritt 3-6)
|
||||
3. ✅ Ergebnisse notieren (Merkblatt)
|
||||
4. → **Ergebnisse mitteilen** → Ich helfe bei Implementation!
|
||||
|
||||
## 📄 Zusätzliche Dokumentation
|
||||
|
||||
- [DRAG_DROP_PROBLEM_ANALYSIS.md](DRAG_DROP_PROBLEM_ANALYSIS.md) - Detaillierte Problem-Analyse
|
||||
- [SCRIPT_VARIANTS.md](SCRIPT_VARIANTS.md) - Alle verfügbaren Scripts
|
||||
- [ANGULAR_CDK_ANALYSIS.md](ANGULAR_CDK_ANALYSIS.md) - Angular Framework Details
|
||||
|
||||
---
|
||||
|
||||
**Hinweis:** Das Debug-Script hat Performance-Overhead. Nach dem Debugging zurück zu `bridge_script.js` wechseln!
|
||||
Loading…
Add table
Add a link
Reference in a new issue