From 58d80edbc872d034b94581309184e5828fcf72cb Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 11:35:40 +0200 Subject: [PATCH 1/6] feat: add console logging for drag and drop events across components --- .../gallery/components/item-component.tsx | 11 +++++++++-- .../src/core/providers/canvas/canvas.provider.tsx | 1 + apps/web/src/pods/canvas/use-drop-shape.hook.ts | 15 ++++++++++++--- .../web/src/pods/canvas/use-monitor-shape.hook.ts | 8 ++++++++ .../pods/thumb-pages/monitor-drop-thumb.hook.ts | 4 ++++ 5 files changed, 34 insertions(+), 5 deletions(-) diff --git a/apps/web/src/common/components/gallery/components/item-component.tsx b/apps/web/src/common/components/gallery/components/item-component.tsx index 818437c8..5c8ff6fa 100644 --- a/apps/web/src/common/components/gallery/components/item-component.tsx +++ b/apps/web/src/common/components/gallery/components/item-component.tsx @@ -24,9 +24,16 @@ export const ItemComponent: React.FC = props => { return draggable({ element: el, getInitialData: () => ({ type: item.type }), - onDragStart: () => setIsDragging(true), - onDrop: () => setIsDragging(false), + onDragStart: () => { + console.log('[DRAG-START]', item.type); + setIsDragging(true); + }, + onDrop: () => { + console.log('[DRAG-END]', item.type); + setIsDragging(false); + }, onGenerateDragPreview: ({ nativeSetDragImage }) => { + console.log('[GEN-PREVIEW]', item.type); setCustomNativeDragPreview({ //Important: this numbers are the half of the width and height of var(--gallery-item-size) // TODO, we may extract the size variable value from the HTML variable it self diff --git a/apps/web/src/core/providers/canvas/canvas.provider.tsx b/apps/web/src/core/providers/canvas/canvas.provider.tsx index 07871155..14490bde 100644 --- a/apps/web/src/core/providers/canvas/canvas.provider.tsx +++ b/apps/web/src/core/providers/canvas/canvas.provider.tsx @@ -249,6 +249,7 @@ export const CanvasProvider: React.FC = props => { y: number, otherProps?: OtherProps ) => { + console.log('drop', type, x, y); if (loadSampleDocument) { setLoadSampleDocument(false); } diff --git a/apps/web/src/pods/canvas/use-drop-shape.hook.ts b/apps/web/src/pods/canvas/use-drop-shape.hook.ts index cd7505d5..9db00128 100644 --- a/apps/web/src/pods/canvas/use-drop-shape.hook.ts +++ b/apps/web/src/pods/canvas/use-drop-shape.hook.ts @@ -14,9 +14,18 @@ export const useDropShape = () => { return dropTargetForElements({ element: el, getData: () => ({ destination: 'canvas' }), - onDragEnter: () => setIsDraggedOver(true), - onDragLeave: () => setIsDraggedOver(false), - onDrop: () => setIsDraggedOver(false), + onDragEnter: () => { + console.log('[DT-ENTER] canvas drop target'); + setIsDraggedOver(true); + }, + onDragLeave: () => { + console.log('[DT-LEAVE] canvas drop target'); + setIsDraggedOver(false); + }, + onDrop: () => { + console.log('[DT-DROP] canvas drop target'); + setIsDraggedOver(false); + }, }); }); diff --git a/apps/web/src/pods/canvas/use-monitor-shape.hook.ts b/apps/web/src/pods/canvas/use-monitor-shape.hook.ts index e7af1f21..862b6229 100644 --- a/apps/web/src/pods/canvas/use-monitor-shape.hook.ts +++ b/apps/web/src/pods/canvas/use-monitor-shape.hook.ts @@ -19,7 +19,14 @@ export const useMonitorShape = ( useEffect(() => { return monitorForElements({ + onDragStart: args => + console.log('[MON-START]', { sourceData: args.source.data }), onDrop({ source, location }) { + console.log('[MON-DROP]', { + sourceType: source.data.type, + targetsCount: location.current.dropTargets.length, + firstTargetData: location.current.dropTargets[0]?.data, + }); const destination = location.current.dropTargets[0]; if (!destination) return; invariant(destination); @@ -56,6 +63,7 @@ export const useMonitorShape = ( calculateShapeOffsetToXDropCoordinate(konvaCoord.x, type); positionY = konvaCoord.y; } + console.log('[CALL-ADD-SHAPE]', { type, positionX, positionY }); addNewShape(type, positionX, positionY); } }, diff --git a/apps/web/src/pods/thumb-pages/monitor-drop-thumb.hook.ts b/apps/web/src/pods/thumb-pages/monitor-drop-thumb.hook.ts index 39d0decf..029a0998 100644 --- a/apps/web/src/pods/thumb-pages/monitor-drop-thumb.hook.ts +++ b/apps/web/src/pods/thumb-pages/monitor-drop-thumb.hook.ts @@ -9,6 +9,10 @@ export const useMonitorDropThumb = () => { useEffect(() => { return monitorForElements({ onDrop({ source, location }) { + console.log('[MON-THUMB-DROP]', { + sourceData: source.data, + targetsCount: location.current.dropTargets.length, + }); const destination = location.current.dropTargets[0]; if (!destination || source.data.pageId === destination.data.pageId) { return; From 03a3b4d027b09fe9d2461755f91a340571645d92 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 11:41:32 +0200 Subject: [PATCH 2/6] feat: enhance drag-and-drop event logging and cleanup in useDropShape hook --- .../src/pods/canvas/use-drop-shape.hook.ts | 46 ++++++++++++++++++- 1 file changed, 44 insertions(+), 2 deletions(-) diff --git a/apps/web/src/pods/canvas/use-drop-shape.hook.ts b/apps/web/src/pods/canvas/use-drop-shape.hook.ts index 9db00128..02bb49f9 100644 --- a/apps/web/src/pods/canvas/use-drop-shape.hook.ts +++ b/apps/web/src/pods/canvas/use-drop-shape.hook.ts @@ -7,11 +7,48 @@ export const useDropShape = () => { const dropRef = useRef(null); useEffect(() => { - const el = dropRef.current; + const el = dropRef.current as HTMLElement | null; invariant(el); - return dropTargetForElements({ + const sniff = (ev: DragEvent) => { + console.log(`[NATIVE-${ev.type}]`, { + target: (ev.target as HTMLElement)?.tagName, + targetClass: (ev.target as HTMLElement)?.className, + currentTarget: (ev.currentTarget as HTMLElement)?.tagName, + defaultPrevented: ev.defaultPrevented, + clientX: ev.clientX, + clientY: ev.clientY, + }); + }; + el.addEventListener('dragenter', sniff); + el.addEventListener('dragover', sniff); + el.addEventListener('dragleave', sniff); + el.addEventListener('drop', sniff); + + const docSniff = (ev: DragEvent) => { + const elAtPoint = document.elementFromPoint(ev.clientX, ev.clientY); + console.log(`[DOC-${ev.type}]`, { + target: (ev.target as HTMLElement)?.tagName, + elementAtPoint: elAtPoint?.tagName, + elementAtPointClass: elAtPoint?.className, + }); + }; + document.addEventListener('dragenter', docSniff, true); + document.addEventListener('dragover', docSniff, true); + document.addEventListener('drop', docSniff, true); + + const cleanupSniff = () => { + el.removeEventListener('dragenter', sniff); + el.removeEventListener('dragover', sniff); + el.removeEventListener('dragleave', sniff); + el.removeEventListener('drop', sniff); + document.removeEventListener('dragenter', docSniff, true); + document.removeEventListener('dragover', docSniff, true); + document.removeEventListener('drop', docSniff, true); + }; + + const cleanupPdnd = dropTargetForElements({ element: el, getData: () => ({ destination: 'canvas' }), onDragEnter: () => { @@ -27,6 +64,11 @@ export const useDropShape = () => { setIsDraggedOver(false); }, }); + + return () => { + cleanupSniff(); + cleanupPdnd(); + }; }); return { dropRef, isDraggedOver }; From a17ad72fbb8269416d193113760b09c49ff07071 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 11:46:31 +0200 Subject: [PATCH 3/6] feat: enhance drag-and-drop event logging for window and body elements --- .../src/pods/canvas/use-drop-shape.hook.ts | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/apps/web/src/pods/canvas/use-drop-shape.hook.ts b/apps/web/src/pods/canvas/use-drop-shape.hook.ts index 02bb49f9..88ff47d2 100644 --- a/apps/web/src/pods/canvas/use-drop-shape.hook.ts +++ b/apps/web/src/pods/canvas/use-drop-shape.hook.ts @@ -37,6 +37,27 @@ export const useDropShape = () => { document.addEventListener('dragenter', docSniff, true); document.addEventListener('dragover', docSniff, true); document.addEventListener('drop', docSniff, true); + document.addEventListener('dragend', docSniff, true); + + const winSniff = (ev: DragEvent) => { + console.log(`[WIN-${ev.type}]`, { + target: (ev.target as HTMLElement)?.tagName, + clientX: ev.clientX, + clientY: ev.clientY, + }); + }; + window.addEventListener('dragenter', winSniff, true); + window.addEventListener('dragover', winSniff, true); + window.addEventListener('drop', winSniff, true); + window.addEventListener('dragend', winSniff, true); + + const bodySniff = (ev: DragEvent) => { + console.log(`[BODY-${ev.type}]`); + }; + document.body.addEventListener('dragenter', bodySniff, true); + document.body.addEventListener('dragover', bodySniff, true); + document.body.addEventListener('drop', bodySniff, true); + document.body.addEventListener('dragend', bodySniff, true); const cleanupSniff = () => { el.removeEventListener('dragenter', sniff); @@ -46,6 +67,15 @@ export const useDropShape = () => { document.removeEventListener('dragenter', docSniff, true); document.removeEventListener('dragover', docSniff, true); document.removeEventListener('drop', docSniff, true); + document.removeEventListener('dragend', docSniff, true); + window.removeEventListener('dragenter', winSniff, true); + window.removeEventListener('dragover', winSniff, true); + window.removeEventListener('drop', winSniff, true); + window.removeEventListener('dragend', winSniff, true); + document.body.removeEventListener('dragenter', bodySniff, true); + document.body.removeEventListener('dragover', bodySniff, true); + document.body.removeEventListener('drop', bodySniff, true); + document.body.removeEventListener('dragend', bodySniff, true); }; const cleanupPdnd = dropTargetForElements({ From 01861916de2f5e798df4b6b517ef4a07b506f98c Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 11:50:45 +0200 Subject: [PATCH 4/6] feat: temporarily remove iframe sandbox attribute to troubleshoot drag-and-drop issue on macOS --- packages/vscode-extension/src/webview/main.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/vscode-extension/src/webview/main.ts b/packages/vscode-extension/src/webview/main.ts index 36634d59..1166db2c 100644 --- a/packages/vscode-extension/src/webview/main.ts +++ b/packages/vscode-extension/src/webview/main.ts @@ -10,10 +10,12 @@ const appOrigin = new URL(appUrl).origin; const iframe = document.createElement('iframe'); iframe.src = appUrl; -iframe.setAttribute( - 'sandbox', - 'allow-scripts allow-same-origin allow-downloads' -); +// TEMP: sandbox eliminado para confirmar bug de drag-and-drop en macOS-webview. +// Restaurar tras la prueba si el drag funciona sin él. +// iframe.setAttribute( +// 'sandbox', +// 'allow-scripts allow-same-origin allow-downloads' +// ); iframe.allow = 'clipboard-read; clipboard-write'; iframe.title = 'QuickMock Application'; document.body.appendChild(iframe); From 23dacd308465e8937ebf0738278c96eab0507bf9 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 12:20:21 +0200 Subject: [PATCH 5/6] feat: implement workaround for drag-and-drop issues in macOS webview and enhance event logging --- .../gallery/components/item-component.tsx | 24 ++++++++++++++++- packages/vscode-extension/src/webview/main.ts | 27 ++++++++++++++----- 2 files changed, 44 insertions(+), 7 deletions(-) diff --git a/apps/web/src/common/components/gallery/components/item-component.tsx b/apps/web/src/common/components/gallery/components/item-component.tsx index 5c8ff6fa..46ee5c4a 100644 --- a/apps/web/src/common/components/gallery/components/item-component.tsx +++ b/apps/web/src/common/components/gallery/components/item-component.tsx @@ -21,7 +21,24 @@ export const ItemComponent: React.FC = props => { invariant(el); - return draggable({ + // Workaround para bug de macOS en webview de VS Code (issue #193558 / #256444). + // VS Code intercepta drags HTML5 que no tengan un MIME "conocido" en su + // dataTransfer y evita que los eventos `dragover`/`drop` se entreguen al + // iframe interior. Añadiendo `text/plain` en fase captura, antes de que + // PDND ejecute su propio handler de dragstart, marcamos el drag como + // "estándar" y el routing nativo pasa al iframe correctamente. + const macOsWebviewMimeWorkaround = (ev: DragEvent) => { + if (!ev.dataTransfer) return; + try { + ev.dataTransfer.setData('text/plain', `quickmock-shape:${item.type}`); + ev.dataTransfer.effectAllowed = 'move'; + } catch { + // setData solo es válido durante dragstart; ignoramos si ya se cerró. + } + }; + el.addEventListener('dragstart', macOsWebviewMimeWorkaround, true); + + const cleanupPdnd = draggable({ element: el, getInitialData: () => ({ type: item.type }), onDragStart: () => { @@ -63,6 +80,11 @@ export const ItemComponent: React.FC = props => { }); }, }); + + return () => { + el.removeEventListener('dragstart', macOsWebviewMimeWorkaround, true); + cleanupPdnd(); + }; }, []); return ( diff --git a/packages/vscode-extension/src/webview/main.ts b/packages/vscode-extension/src/webview/main.ts index 1166db2c..a8cc5c53 100644 --- a/packages/vscode-extension/src/webview/main.ts +++ b/packages/vscode-extension/src/webview/main.ts @@ -10,15 +10,30 @@ const appOrigin = new URL(appUrl).origin; const iframe = document.createElement('iframe'); iframe.src = appUrl; -// TEMP: sandbox eliminado para confirmar bug de drag-and-drop en macOS-webview. -// Restaurar tras la prueba si el drag funciona sin él. -// iframe.setAttribute( -// 'sandbox', -// 'allow-scripts allow-same-origin allow-downloads' -// ); +iframe.setAttribute( + 'sandbox', + 'allow-scripts allow-same-origin allow-downloads' +); iframe.allow = 'clipboard-read; clipboard-write'; iframe.title = 'QuickMock Application'; document.body.appendChild(iframe); setupBridge(iframe, appOrigin); setupThemeSync(iframe, appOrigin); + +// DIAG: sniffer en el shell del webview para detectar si los drag events +// HTML5 nativos están aterrizando aquí (en lugar de en el iframe interior). +const shellDragSniff = (ev: DragEvent) => { + console.log(`[SHELL-${ev.type}]`, { + target: (ev.target as HTMLElement)?.tagName, + clientX: ev.clientX, + clientY: ev.clientY, + defaultPrevented: ev.defaultPrevented, + }); +}; +['dragstart', 'dragenter', 'dragover', 'dragleave', 'drop', 'dragend'].forEach( + type => { + window.addEventListener(type, shellDragSniff as EventListener, true); + document.addEventListener(type, shellDragSniff as EventListener, true); + } +); From 2fd2a37cfedb6f65733c273d3ec9cb252f820636 Mon Sep 17 00:00:00 2001 From: Ivanruii Date: Tue, 12 May 2026 12:28:08 +0200 Subject: [PATCH 6/6] feat: implement macOS drag-and-drop bridge and enhance event handling --- .../gallery/components/item-component.tsx | 8 +++ apps/web/src/pods/canvas/canvas.pod.tsx | 2 + .../use-mac-webview-drag-bridge.hook.ts | 67 +++++++++++++++++++ .../vscode-extension/src/webview/bridge.ts | 2 + .../src/webview/drag-bridge.ts | 60 +++++++++++++++++ packages/vscode-extension/src/webview/main.ts | 19 +----- 6 files changed, 141 insertions(+), 17 deletions(-) create mode 100644 apps/web/src/pods/canvas/use-mac-webview-drag-bridge.hook.ts create mode 100644 packages/vscode-extension/src/webview/drag-bridge.ts diff --git a/apps/web/src/common/components/gallery/components/item-component.tsx b/apps/web/src/common/components/gallery/components/item-component.tsx index 46ee5c4a..0193493c 100644 --- a/apps/web/src/common/components/gallery/components/item-component.tsx +++ b/apps/web/src/common/components/gallery/components/item-component.tsx @@ -44,10 +44,18 @@ export const ItemComponent: React.FC = props => { onDragStart: () => { console.log('[DRAG-START]', item.type); setIsDragging(true); + // Signal to the webview shell (parent) which shape type is being + // dragged, so it can forward the drop coordinates back. Required + // workaround for macOS VS Code webview drag bug. + window.parent.postMessage( + { type: 'qm:drag-start', shapeType: item.type }, + '*' + ); }, onDrop: () => { console.log('[DRAG-END]', item.type); setIsDragging(false); + window.parent.postMessage({ type: 'qm:drag-end' }, '*'); }, onGenerateDragPreview: ({ nativeSetDragImage }) => { console.log('[GEN-PREVIEW]', item.type); diff --git a/apps/web/src/pods/canvas/canvas.pod.tsx b/apps/web/src/pods/canvas/canvas.pod.tsx index f922cbc7..b0aa529b 100644 --- a/apps/web/src/pods/canvas/canvas.pod.tsx +++ b/apps/web/src/pods/canvas/canvas.pod.tsx @@ -5,6 +5,7 @@ import { Layer, Line, Rect, Stage, Transformer } from 'react-konva'; import { useTransform } from './use-transform.hook'; import { renderShapeComponent } from './shape-renderer'; import { useDropShape } from './use-drop-shape.hook'; +import { useMacWebviewDragBridge } from './use-mac-webview-drag-bridge.hook'; import { useMonitorShape } from './use-monitor-shape.hook'; import classes from './canvas.pod.module.css'; import { EditableComponent } from '#common/components/inline-edit'; @@ -58,6 +59,7 @@ export const CanvasPod = () => { const { isDraggedOver, dropRef } = useDropShape(); useMonitorShape(dropRef, addNewShapeAndSetSelected); + useMacWebviewDragBridge(dropRef, addNewShapeAndSetSelected); useEffect(() => { if (dropRef.current) setDropRef(dropRef); }, [dropRef, setDropRef]); diff --git a/apps/web/src/pods/canvas/use-mac-webview-drag-bridge.hook.ts b/apps/web/src/pods/canvas/use-mac-webview-drag-bridge.hook.ts new file mode 100644 index 00000000..88bd7667 --- /dev/null +++ b/apps/web/src/pods/canvas/use-mac-webview-drag-bridge.hook.ts @@ -0,0 +1,67 @@ +import { useEffect } from 'react'; +import { + convertFromDivElementCoordsToKonvaCoords, + getScrollFromDiv, + portScreenPositionToDivCoordinates, +} from './canvas.util'; +import { ShapeType } from '#core/model'; +import { useCanvasContext } from '#core/providers'; +import { calculateShapeOffsetToXDropCoordinate } from './use-monitor.business'; + +// Receives gallery-drop messages forwarded by the webview shell on macOS +// (workaround for microsoft/vscode#193558: HTML5 drag events targeting the +// inner iframe are dispatched to the iframe element in the shell instead of +// to its contents, so PDND never sees them). +export const useMacWebviewDragBridge = ( + dropRef: React.MutableRefObject, + addNewShape: (type: ShapeType, x: number, y: number) => void +) => { + const { stageRef } = useCanvasContext(); + + useEffect(() => { + const onMessage = (ev: MessageEvent) => { + const data = ev.data as + | { + type?: string; + shapeType?: ShapeType; + clientX?: number; + clientY?: number; + } + | undefined; + if ( + data?.type !== 'qm:gallery-drop' || + !data.shapeType || + typeof data.clientX !== 'number' || + typeof data.clientY !== 'number' + ) { + return; + } + + const dropDiv = dropRef.current as HTMLDivElement | null; + const stage = stageRef.current; + if (!dropDiv || !stage) return; + + const screenPosition = { x: data.clientX, y: data.clientY }; + const { x: divRelativeX, y: divRelativeY } = + portScreenPositionToDivCoordinates(dropDiv, screenPosition); + const { scrollLeft, scrollTop } = getScrollFromDiv( + dropRef as unknown as React.MutableRefObject + ); + const konvaCoord = convertFromDivElementCoordsToKonvaCoords(stage, { + screenPosition, + relativeDivPosition: { x: divRelativeX, y: divRelativeY }, + scroll: { x: scrollLeft, y: scrollTop }, + }); + + const positionX = + konvaCoord.x - + calculateShapeOffsetToXDropCoordinate(konvaCoord.x, data.shapeType); + const positionY = konvaCoord.y; + + addNewShape(data.shapeType, positionX, positionY); + }; + + window.addEventListener('message', onMessage); + return () => window.removeEventListener('message', onMessage); + }, []); +}; diff --git a/packages/vscode-extension/src/webview/bridge.ts b/packages/vscode-extension/src/webview/bridge.ts index 513d71f6..f08ef4bd 100644 --- a/packages/vscode-extension/src/webview/bridge.ts +++ b/packages/vscode-extension/src/webview/bridge.ts @@ -3,6 +3,7 @@ import { HOST_MESSAGE_TYPE, type HostMessage, } from '@lemoncode/quickmock-bridge-protocol'; +import { isDragBridgeMessage } from './drag-bridge'; // Reference: https://code.visualstudio.com/api/extension-guides/webview#loading-local-content declare function acquireVsCodeApi(): { postMessage(msg: AppMessage): void }; @@ -21,6 +22,7 @@ export const setupBridge = ( ): void => { window.addEventListener('message', (event: MessageEvent) => { if (event.origin === appOrigin) { + if (isDragBridgeMessage(event.data)) return; vscode.postMessage(event.data as AppMessage); } else { const msg = event.data as HostMessage; diff --git a/packages/vscode-extension/src/webview/drag-bridge.ts b/packages/vscode-extension/src/webview/drag-bridge.ts new file mode 100644 index 00000000..ee3a5f97 --- /dev/null +++ b/packages/vscode-extension/src/webview/drag-bridge.ts @@ -0,0 +1,60 @@ +// Workaround for macOS-only bug in VS Code webview: HTML5 drag events targeting +// the inner iframe are dispatched to the iframe element in the shell, not to +// the iframe's contents (see microsoft/vscode#193558). We capture them here and +// forward the drop coordinates back to the iframe via postMessage. + +const DRAG_START = 'qm:drag-start'; +const DRAG_END = 'qm:drag-end'; +const GALLERY_DROP = 'qm:gallery-drop'; + +export const isDragBridgeMessage = (data: unknown): boolean => { + const t = (data as { type?: string } | undefined)?.type; + return t === DRAG_START || t === DRAG_END; +}; + +export const setupDragBridge = ( + iframe: HTMLIFrameElement, + appOrigin: string +): void => { + let activeShapeType: string | null = null; + + window.addEventListener('message', (event: MessageEvent) => { + if (event.origin !== appOrigin) return; + const data = event.data as + | { type?: string; shapeType?: string } + | undefined; + if (data?.type === DRAG_START && typeof data.shapeType === 'string') { + activeShapeType = data.shapeType; + } else if (data?.type === DRAG_END) { + activeShapeType = null; + } + }); + + document.addEventListener( + 'dragover', + ev => { + if (activeShapeType !== null) ev.preventDefault(); + }, + true + ); + + document.addEventListener( + 'drop', + ev => { + if (activeShapeType === null) return; + ev.preventDefault(); + const rect = iframe.getBoundingClientRect(); + iframe.contentWindow?.postMessage( + { + type: GALLERY_DROP, + shapeType: activeShapeType, + clientX: ev.clientX - rect.left, + clientY: ev.clientY - rect.top, + }, + appOrigin + ); + activeShapeType = null; + }, + true + ); +}; diff --git a/packages/vscode-extension/src/webview/main.ts b/packages/vscode-extension/src/webview/main.ts index a8cc5c53..bf77a2ea 100644 --- a/packages/vscode-extension/src/webview/main.ts +++ b/packages/vscode-extension/src/webview/main.ts @@ -1,4 +1,5 @@ import { setupBridge } from './bridge'; +import { setupDragBridge } from './drag-bridge'; import { setupThemeSync } from './theme'; const appUrl = document.body.dataset.appUrl; @@ -20,20 +21,4 @@ document.body.appendChild(iframe); setupBridge(iframe, appOrigin); setupThemeSync(iframe, appOrigin); - -// DIAG: sniffer en el shell del webview para detectar si los drag events -// HTML5 nativos están aterrizando aquí (en lugar de en el iframe interior). -const shellDragSniff = (ev: DragEvent) => { - console.log(`[SHELL-${ev.type}]`, { - target: (ev.target as HTMLElement)?.tagName, - clientX: ev.clientX, - clientY: ev.clientY, - defaultPrevented: ev.defaultPrevented, - }); -}; -['dragstart', 'dragenter', 'dragover', 'dragleave', 'drop', 'dragend'].forEach( - type => { - window.addEventListener(type, shellDragSniff as EventListener, true); - document.addEventListener(type, shellDragSniff as EventListener, true); - } -); +setupDragBridge(iframe, appOrigin);