mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-31 13:29:55 +00:00
5773df6ef7
Makes the litegraph `node.widgets` array `shallowReactive` and makes the `nodeData.widgets` a `reactiveComputed` derived from the litegraph widget data.  Making changes to the structure of litegraph items is somewhat dangerous, but code search verifies that there are no custom nodes using `defineProperty` on `node.widgets` This fixes display of promoted widgets on subgraph node and any custom nodes that dynamically add or remove widgets. TODO: - Investigate occasional dropped widgets. - Some of this was confusion with `canvasOnly` widgets and widgets not implemented in vue. Will keep investigating, but I'm not terribly concerned with actual test cases and it being an objective improvement. Known Issue: - Node does not grow/shrink to fit changed widgets ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6019-Make-nodeData-widgets-reactive-2896d73d3650815691b6ee370a86a22c) by [Unito](https://www.unito.io)
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import {
|
|
comfyExpect as expect,
|
|
comfyPageFixture as test
|
|
} from '../../../fixtures/ComfyPage'
|
|
|
|
test.describe('Vue Widget Reactivity', () => {
|
|
test.beforeEach(async ({ comfyPage }) => {
|
|
await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
|
|
await comfyPage.vueNodes.waitForNodes()
|
|
})
|
|
test('Should display added widgets', async ({ comfyPage }) => {
|
|
const loadCheckpointNode = comfyPage.page.locator(
|
|
'css=[data-testid="node-body-4"] > .lg-node-widgets > div'
|
|
)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['4']
|
|
node.widgets.push(node.widgets[0])
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(2)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['4']
|
|
node.widgets[2] = node.widgets[0]
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(3)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['4']
|
|
node.widgets.splice(0, 0, node.widgets[0])
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(4)
|
|
})
|
|
test('Should hide removed widgets', async ({ comfyPage }) => {
|
|
const loadCheckpointNode = comfyPage.page.locator(
|
|
'css=[data-testid="node-body-3"] > .lg-node-widgets > div'
|
|
)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['3']
|
|
node.widgets.pop()
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(5)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['3']
|
|
node.widgets.length--
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(4)
|
|
await comfyPage.page.evaluate(() => {
|
|
const node = window['graph']._nodes_by_id['3']
|
|
node.widgets.splice(0, 1)
|
|
})
|
|
await expect(loadCheckpointNode).toHaveCount(3)
|
|
})
|
|
})
|