diff --git a/browser_tests/documentationSidebar.spec.ts b/browser_tests/documentationSidebar.spec.ts index 4ff36d89e..7937329a7 100644 --- a/browser_tests/documentationSidebar.spec.ts +++ b/browser_tests/documentationSidebar.spec.ts @@ -1,5 +1,8 @@ import { expect } from '@playwright/test' import { comfyPageFixture as test } from './ComfyPage' +const nodeDef = { + title: 'TestNodeAdvancedDoc' +} test.describe('Documentation Sidebar', () => { test.beforeEach(async ({ comfyPage }) => { @@ -60,3 +63,68 @@ test.describe('Documentation Sidebar', () => { ) }) }) +test.describe('Advanced Description tests', () => { + test.beforeEach(async ({ comfyPage }) => { + //register test node and add to graph + await comfyPage.page.evaluate(async (node) => { + const app = window['app'] + await app.registerNodeDef(node.name, node) + app.addNodeOnGraph(node) + }, advDocNode) + await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating') + }) + test.afterEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled') + }) + test('Description displays as raw html', async ({ comfyPage }) => { + await comfyPage.page.locator('.documentation-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container>div') + await expect(docPane).toHaveJSProperty( + 'innerHTML', + advDocNode.description[1] + ) + }) + test('selected function', async ({ comfyPage }) => { + await comfyPage.page.evaluate(() => { + const app = window['app'] + const desc = + LiteGraph.registered_node_types['Test_AdvancedDescription'].nodeData + .description + desc[2].select = (element, name, value) => { + element.children[0].innerText = name + ' ' + value + } + }) + await comfyPage.page.locator('.documentation-tab-button').click() + const docPane = comfyPage.page.locator('.sidebar-content-container') + await comfyPage.page.mouse.move(307, 80) + const tooltipTimeout = 500 + await comfyPage.page.waitForTimeout(tooltipTimeout + 16) + await expect(docPane).toContainText('int_input 0') + }) +}) + +const advDocNode = { + display_name: 'Node With Advanced Description', + name: 'Test_AdvancedDescription', + input: { + required: { + int_input: [ + 'INT', + { tooltip: "an input tooltip that won't be displayed in sidebar" } + ] + } + }, + output: ['INT'], + output_name: ['int_output'], + output_tooltips: ["An output tooltip that won't be displayed in the sidebar"], + output_is_list: false, + description: [ + 'A node with description in the advanced format', + ` +A long form description that will be displayed in the sidebar. +
Can include arbitrary html
+
or out of order widgets
+`, + {} + ] +} diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue index 3d3d3d435..78895ff5c 100644 --- a/src/components/graph/NodeTooltip.vue +++ b/src/components/graph/NodeTooltip.vue @@ -80,7 +80,9 @@ watch(hoveredItemStore, (hoveredItem) => { return hideTooltip() } const item = hoveredItem.value - const nodeDef = nodeDefStore.nodeDefsByName[item.node.type] + const nodeDef = + nodeDefStore.nodeDefsByName[item.node.type] ?? + LiteGraph.registered_node_types[item.node.type]?.nodeData if (item.type == 'Title') { let description = nodeDef.description if (Array.isArray(description)) { @@ -93,7 +95,11 @@ watch(hoveredItemStore, (hoveredItem) => { showTooltip(nodeDef?.output?.all?.[item.outputSlot]?.tooltip) } else if (item.type == 'Widget') { showTooltip( - item.widget.tooltip ?? nodeDef.input.getInput(item.widget.name)?.tooltip + item.widget.tooltip ?? + ( + nodeDef.input.optional?.[item.widget.name] ?? + nodeDef.input.required?.[item.widget.name] + )?.tooltip ) } else { hideTooltip() @@ -106,7 +112,9 @@ const onIdle = () => { if (!node) return const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 } - const nodeDef = nodeDefStore.nodeDefsByName[node.type] + const nodeDef = + nodeDefStore.nodeDefsByName[node.type] ?? + LiteGraph.registered_node_types[node.type]?.nodeData if ( ctor.title_mode !== LiteGraph.NO_TITLE && diff --git a/src/components/sidebar/tabs/DocumentationSidebarTab.vue b/src/components/sidebar/tabs/DocumentationSidebarTab.vue index 11a453bb1..d6d8dce9d 100644 --- a/src/components/sidebar/tabs/DocumentationSidebarTab.vue +++ b/src/components/sidebar/tabs/DocumentationSidebarTab.vue @@ -85,8 +85,8 @@ function selectHelp(name: string, value?: string) { if (!docElement.value || !name) { return null } - if (def[2]?.select) { - return def[2].select(docElement.value, name, value) + if (def.description[2]?.select) { + return def.description[2].select(docElement.value, name, value) } //attempt to navigate to name in help function collapseUnlessMatch(items, t) {