Connect hover functionality, scroll fixes

Basic connecting for using the existing documentation hover code to
select an item from the active help pane.

Scrolling on selection will now properly perform the minium required
scroll to place the element on screen

src/components/graph/NodeTooltip.vue

@@ -85,7 +85,9 @@ const onIdle = () => {
     ctor.title_mode !== LiteGraph.NO_TITLE &&
     canvas.graph_mouse[1] < node.pos[1] // If we are over a node, but not within the node then we are on its title
   ) {
-    if (Array.isArray(nodeDef.description)) {
+    if (comfyApp?.tooltipCallback?.(node, 'DESCRIPTION')) {
+      return
+    } else if (Array.isArray(nodeDef.description)) {
       return showTooltip(nodeDef.description[0])
     }
     return showTooltip(nodeDef.description)
@@ -101,7 +103,9 @@ const onIdle = () => {
   )
   if (inputSlot !== -1) {
     const inputName = node.inputs[inputSlot].name
-    return showTooltip(nodeDef.input.getInput(inputName)?.tooltip)
+    if (!comfyApp?.tooltipCallback?.(node, inputName)) {
+      return showTooltip(nodeDef.input.getInput(inputName)?.tooltip)
+    }
   }
 
   const outputSlot = canvas.isOverNodeOutput(
@@ -111,15 +115,20 @@ const onIdle = () => {
     [0, 0]
   )
   if (outputSlot !== -1) {
-    return showTooltip(nodeDef.output.all?.[outputSlot]?.tooltip)
+    const outputDef = nodeDef.output.all?.[outputSlot]
+    if (!comfyApp?.tooltipCallback?.(node, outputDef?.name)) {
+      return showTooltip(outputDef?.tooltip)
+    }
   }
 
   const widget = getHoveredWidget()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !widget.element) {
-    return showTooltip(
-      widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
-    )
+    if (!comfyApp?.tooltipCallback?.(node, widget.name, widget.value)) {
+      return showTooltip(
+        widget.tooltip ?? nodeDef.input.getInput(widget.name)?.tooltip
+      )
+    }
   }
 }
 

src/extensions/core/documentationSidebar.ts

@@ -44,7 +44,7 @@ helpDOM.collapseOnClick = function () {
 //If doc sidebar is opened, the current node should not display tooltips,
 //but navigate the sidebar pane as appropriate.
 helpDOM.selectHelp = function (name: string, value?: string) {
-  if (helpDOM.def[2].select) {
+  if (helpDOM.def[2]?.select) {
     return helpDOM.def[2].select(this, name, value)
   }
   //attempt to navigate to name in help
@@ -63,7 +63,7 @@ helpDOM.selectHelp = function (name: string, value?: string) {
     }
     //For longer documentation items with fewer collapsable elements,
     //scroll to make sure the entirety of the selected item is visible
-    match.scrollIntoView(false)
+    match.scrollIntoView({ block: 'nearest' })
     //The previous floating help implementation would try to scroll the window
     //itself if the display was partiall offscreen. As the sidebar documentation
     //does not pan with the canvas, this should no longer be needed
@@ -78,10 +78,23 @@ helpDOM.selectHelp = function (name: string, value?: string) {
     return match
   }
   let target = collapseUnlessMatch(helpDOM, name)
-  if (target && value) {
-    collapseUnlessMatch(target, value)
+  if (target) {
+    target.focus()
+    if (value) {
+      collapseUnlessMatch(target, value)
+    }
   }
 }
+app.tooltipCallback = function (node, name, value) {
+  if (node != app.graph._nodes[app.graph._nodes.length - 1]) {
+    return false
+  }
+  if (name == 'DESCRIPTION') {
+    return false
+  }
+  helpDOM.selectHelp(name, value)
+  return true
+}
 function updateNode(node) {
   //Always use latest node. If it lacks documentation, that should be communicated
   //instead of confusing users by picking a different recent node that does
@@ -113,7 +126,12 @@ function updateNode(node) {
     if (inputs.length) {
       content += '<div class="doc-section">Inputs</div>'
       for (let [k, v] of inputs) {
-        content += '<div>' + k + '<div class="doc-item">' + v + '</div></div>'
+        content +=
+          '<div tabindex=-1 class="doc-item">' +
+          k +
+          '<div>' +
+          v +
+          '</div></div>'
       }
       //content += "</div>"
       //content += '<br><br><div>' + inputs.join('</div><div>') + '</div>'
@@ -123,9 +141,9 @@ function updateNode(node) {
       let outputs = def.output_name || def.output
       for (let i = 0; i < outputs.length; i++) {
         content +=
-          '<div>' +
+          '<div tabindex=-1 class="doc-item">' +
           outputs[i] +
-          '<div class="doc-item">' +
+          '<div>' +
           def.output_tooltips[i] +
           '</div></div>'
       }
@@ -169,9 +187,12 @@ let documentationSidebar = {
     .doc-section {
        background-color: ${getColorPalette().colors.comfy_base['tr-odd-bg-color']}
     }
-    .doc-item {
+    .doc-item div {
        margin-inline-start: 1vw;
     }
+    .doc-item:focus {
+       background-color: #666
+    }
     .DocumentationIcon:before {
        font-size: 1.5em; content: '?';
     }