mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-03 04:31:58 +00:00
fix: allow URI drops to bubble from Vue nodes to document handler (#9463)
## Summary Fix URI drops (e.g. dragging `<img>` thumbnails) onto Vue-rendered nodes by letting unhandled drops bubble to the document-level `text/uri-list` fallback in `app.ts`. ## Changes - **What**: Removed unconditional `.stop` modifier from `@drop` in `LGraphNode.vue`. `stopPropagation()` is now called conditionally — only when `onDragDrop` returns `true` (file drop handled). Made `handleDrop` synchronous since `onDragDrop` returns a plain boolean. ## Review Focus The key insight is that `onDragDrop` (from `useNodeDragAndDrop`) returns `false` synchronously for URI drags (no files in `DataTransfer`), so the event must bubble to reach the document handler that fetches the URI. The original `async` + `await` pattern would have deferred `stopPropagation` past the synchronous propagation phase, so `handleDrop` is now synchronous. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9463-fix-allow-URI-drops-to-bubble-from-Vue-nodes-to-document-handler-31b6d73d36508196a1b3f17e7e4837a9) by [Unito](https://www.unito.io)
This commit is contained in:
@@ -67,5 +67,44 @@ test.describe(
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
test('Load workflow from URL dropped onto Vue node', async ({
|
||||
comfyPage
|
||||
}) => {
|
||||
const fakeUrl = 'https://example.com/workflow.png'
|
||||
await comfyPage.page.route(fakeUrl, (route) =>
|
||||
route.fulfill({
|
||||
path: comfyPage.assetPath('workflowInMedia/workflow_itxt.png')
|
||||
})
|
||||
)
|
||||
|
||||
await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
|
||||
await comfyPage.vueNodes.waitForNodes()
|
||||
|
||||
const initialNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
|
||||
|
||||
const node = comfyPage.vueNodes.getNodeByTitle('KSampler')
|
||||
const box = await node.boundingBox()
|
||||
expect(box).not.toBeNull()
|
||||
|
||||
const dropPosition = {
|
||||
x: box!.x + box!.width / 2,
|
||||
y: box!.y + box!.height / 2
|
||||
}
|
||||
|
||||
await comfyPage.dragDrop.dragAndDropURL(fakeUrl, {
|
||||
dropPosition,
|
||||
preserveNativePropagation: true
|
||||
})
|
||||
|
||||
await comfyPage.page.waitForFunction(
|
||||
(prevCount) => window.app!.graph.nodes.length !== prevCount,
|
||||
initialNodeCount,
|
||||
{ timeout: 10000 }
|
||||
)
|
||||
|
||||
const newNodeCount = await comfyPage.nodeOps.getGraphNodesCount()
|
||||
expect(newNodeCount).not.toBe(initialNodeCount)
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user