⚙️ Implementation: How to achieve smooth cross-iframe drag-drop when pointer-ev...

Date: 2026-01-28
Time: 20:54:15 UTC
Session: editor2-73.9
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to achieve smooth cross-iframe drag-drop when pointer-events:none on iframe doesn't stop content document from receiving mouse events?

Task: MVP 0.3 cross-iframe drag-drop implementation

🎯 Decision Made

Chosen:

Event forwarding pattern: Embedded app captures mouse events and forwards them via postMessage (AI_DRAG_MOVE, AI_DRAG_END with final clientX/clientY). Host translates iframe-relative coordinates to host coordinates and updates shadow element at 60fps using requestAnimationFrame.

Options Considered:

1. Only use host mouse events (fails - pointer-events:none doesn't stop iframe receiving events)
2. Use HTML5 drag API (fails - drag events don't propagate across iframe boundaries)
3. Event forwarding from embedded app via postMessage (chosen)
4. Polling approach with requestAnimationFrame (too slow, causes lag)

💭 Reasoning

pointer-events:none only affects hit-testing in the parent document - the iframe's content document continues receiving all mouse events. The solution is to have the embedded app forward mouse positions to the host. Combined with RAF for smooth updates and coordinate translation (iframeRect.left + clientX), this achieves near-native drag-drop feel across iframe boundaries.

📁 Files Involved

• libs/libs-ai/ai-embeddable-bridge/src/lib/services/host-adapter.service.ts
• apps/gograb-ai/src/app/pages/panel/panel.component.ts
• libs/libs-ai/ai-embeddable-bridge/src/lib/protocols/drag-protocol.ts

🔗 Related

• Decision ID: dev_1769633655165_hb0tac8
• Session: 73
• Workspace: editor2

Auto-generated by MCP Smart Consolidation