From 1d0ae76f8ceb6d5043efe7c5f09c45944546d819 Mon Sep 17 00:00:00 2001
From: Austin Mroz <AustinMroz@utexas.edu>
Date: Mon, 30 Sep 2024 18:00:34 -0500
Subject: [PATCH] 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        | 21 ++++++++----
 src/extensions/core/documentationSidebar.ts | 37 ++++++++++++++++-----
 2 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/src/components/graph/NodeTooltip.vue b/src/components/graph/NodeTooltip.vue
index f473cb3a56..fd3015bdd1 100644
--- a/src/components/graph/NodeTooltip.vue
+++ b/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
+      )
+    }
   }
 }
 
diff --git a/src/extensions/core/documentationSidebar.ts b/src/extensions/core/documentationSidebar.ts
index 3635c46753..31faa6a638 100644
--- a/src/extensions/core/documentationSidebar.ts
+++ b/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: '?';
     }