Comfy-Org / Comfy-Org/ComfyUI_frontend
Gap between DOM and built-in widgets after node resize
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
### Prerequisites
- [x] I am running the latest version of ComfyUI
- [x] I have searched existing issues to make sure this isn't a duplicate
- [x] I have tested with all custom nodes disabled ([see how](https://docs.comfy.org/troubleshooting/custom-node-issues#step-1%3A-test-with-all-custom-nodes-disabled))
### What happened?
In Nodes 2.0, adding a built-in widget after a DOM widget causes the built-in widget to anchor to the node’s bottom, creating a visual gap when the node is resized
```ts
import { app } from '../../../scripts/app'
app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {
// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'
node.addDOMWidget('custom', 'custom', dom_widget)
// Adding the builtin widget AFTER the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})
}
}
})
```
This issue does not occur if the built-in widget is added before the DOM widget.
```ts
import { app } from '../../../scripts/app'
app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {
// Adding the builtin widget BEFORE the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})
// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'
node.addDOMWidget('custom', 'custom', dom_widget)
}
}
})
```
### Steps to Reproduce
1. Create a basic test node in backend :
```python
from comfy_api.latest import io
class TestNode(io.ComfyNode):
@classmethod
def define_schema(cls):
return io.Schema(
node_id="TestNode",
category="test",
display_name="TestNode",
inputs=[io.AnyType.Input("input_any", display_name="any")],
outputs=[io.AnyType.Output("output_any", display_name="any")],
)
@classmethod
def execute(cls, input_any):
return io.NodeOutput(input_any)
class MyExtension(ComfyExtension):
async def get_node_list(self) -> list[type[io.ComfyNode]]:
return [TestNode]
async def comfy_entrypoint() -> MyExtension:
return MyExtension()
```
2. Add the frontend code given above in web directory :
```ts
app.registerExtension({
name: 'test.node.extension',
async nodeCreated(node, app) {
if (node.comfyClass == 'TestNode') {
// Adding a DOM widget, with some style for visualization
const dom_widget = document.createElement('div')
dom_widget.textContent = 'custom dom widget'
dom_widget.style.textAlign = 'center'
dom_widget.style.border = 'solid'
dom_widget.style.borderColor = 'red'
node.addDOMWidget('custom', 'custom', dom_widget)
// Adding the builtin widget AFTER the DOM widget
node.addWidget('button', 'builtin button widget', '', () => {})
}
}
})
```
3. Create a "TestNode" node and resize it.
### How is this affecting you?
Visual/UI issue only
### ComfyUI Frontend Version
1.37.8
### Browser
Chrome/Chromium
### Console Errors
```javascript
```
### Logs
```shell
```
### Additional Context
_No response_
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7942-Gap-between-DOM-and-built-in-widgets-after-node-resize-2e46d73d365081eb8b03e4c2d5e08140) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.