diff --git a/frontend/js/pane-manager.js b/frontend/js/pane-manager.js index 461ca02..43cf14a 100644 --- a/frontend/js/pane-manager.js +++ b/frontend/js/pane-manager.js @@ -371,8 +371,8 @@ function createPaneTabManager(paneId) { const payload = JSON.stringify({ paneId: this.paneId, tabId: tab.id, index: idx }); - e.dataTransfer.setData('application/obsigate-tab', payload); - e.dataTransfer.setData('text/plain', payload); // fallback for browser compat + // text/plain is universally supported across all browsers for drag-drop + e.dataTransfer.setData('text/plain', payload); e.dataTransfer.effectAllowed = 'move'; el.classList.add('dragging'); }); @@ -395,9 +395,9 @@ function createPaneTabManager(paneId) { e.preventDefault(); e.stopPropagation(); // Prevent container handler from double-firing document.querySelectorAll('.tab-drop-indicator').forEach(d => d.remove()); + const raw = e.dataTransfer.getData('text/plain'); + if (!raw) return; try { - const raw = e.dataTransfer.getData('application/obsigate-tab'); - if (!raw) return; const dragData = JSON.parse(raw); // Same pane — reorder if (dragData.paneId === this.paneId) { @@ -796,39 +796,49 @@ const PaneManager = { const tabBar = container.querySelector('.tab-bar'); if (tabBar) tabBar.classList.remove('drop-target'); - // Try both data formats - let raw = e.dataTransfer.getData('application/obsigate-tab'); - if (!raw) raw = e.dataTransfer.getData('text/plain'); + // Get drag data (text/plain is universally supported) + const raw = e.dataTransfer.getData('text/plain'); + console.log('[PaneManager] drop fired, raw data:', raw ? raw.substring(0, 80) : 'null'); + if (!raw) return; + let dragData; + try { dragData = JSON.parse(raw); } catch (e2) { console.log('[PaneManager] JSON parse error:', e2); return; } + if (dragData.paneId == null || dragData.tabId == null) { console.log('[PaneManager] missing paneId/tabId'); return; } - try { - const dragData = JSON.parse(raw); - if (dragData.paneId == null || dragData.tabId == null) return; + // Recalculate edge zone from drop coordinates + const rect = container.getBoundingClientRect(); + const relX = e.clientX - rect.left; + const relY = e.clientY - rect.top; + const isSingle = !this.isSplit(); - // Recalculate edge zone from drop coordinates - const rect = container.getBoundingClientRect(); - const relX = e.clientX - rect.left; - const relY = e.clientY - rect.top; - const isSingle = !this.isSplit(); + console.log('[PaneManager] drop at', relX.toFixed(0), relY.toFixed(0), + 'rect', rect.width.toFixed(0), 'x', rect.height.toFixed(0), + 'isSingle', isSingle, 'paneId', paneId, 'srcPane', dragData.paneId); - if (isSingle && relX > rect.width * 0.72) { - this.splitRight(); - setTimeout(() => { - const newPaneId = this.panes.length - 1; - this.transferTab(dragData.paneId, dragData.tabId, newPaneId); - }, 200); - } else if (isSingle && relY > rect.height * 0.72) { - this.splitDown(); - setTimeout(() => { - const newPaneId = this.panes.length - 1; - this.transferTab(dragData.paneId, dragData.tabId, newPaneId); - }, 200); - } else if (dragData.paneId !== paneId) { - // Cross-pane transfer (already in split mode, different panes) - this.transferTab(dragData.paneId, dragData.tabId, paneId); - } - // else: same pane, not edge — tab handler deals with reorder - } catch (e2) { console.debug('PaneManager drop error:', e2); } + if (isSingle && relX > rect.width * 0.72) { + console.log('[PaneManager] → splitRight'); + this.splitRight(); + // Transfer after DOM settles + const transfer = () => { + const newPaneId = this.panes.length - 1; + console.log('[PaneManager] transferring tab', dragData.tabId, 'to pane', newPaneId); + this.transferTab(dragData.paneId, dragData.tabId, newPaneId); + }; + setTimeout(transfer, 200); + } else if (isSingle && relY > rect.height * 0.72) { + console.log('[PaneManager] → splitDown'); + this.splitDown(); + const transfer = () => { + const newPaneId = this.panes.length - 1; + this.transferTab(dragData.paneId, dragData.tabId, newPaneId); + }; + setTimeout(transfer, 200); + } else if (dragData.paneId !== paneId) { + console.log('[PaneManager] → cross-pane transfer', dragData.paneId, '→', paneId); + this.transferTab(dragData.paneId, dragData.tabId, paneId); + } else { + console.log('[PaneManager] → same pane, no edge — letting tab handler deal'); + } }); },