-
Notifications
You must be signed in to change notification settings - Fork 64
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add support for node/input/output tooltips (#287)
* Add support for node/input/output tooltips * pr feedback * Remove
- Loading branch information
1 parent
c48f68e
commit 7a980f4
Showing
10 changed files
with
227 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
<template> | ||
<div | ||
v-if="tooltipText" | ||
ref="tooltipRef" | ||
class="node-tooltip" | ||
:style="{ left, top }" | ||
> | ||
{{ tooltipText }} | ||
</div> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { nextTick, ref, onBeforeUnmount, watch } from 'vue' | ||
import { LiteGraph } from '@comfyorg/litegraph' | ||
import { app as comfyApp } from '@/scripts/app' | ||
import { useNodeDefStore } from '@/stores/nodeDefStore' | ||
import { useSettingStore } from '@/stores/settingStore' | ||
let idleTimeout: number | ||
const nodeDefStore = useNodeDefStore() | ||
const settingStore = useSettingStore() | ||
const tooltipRef = ref<HTMLDivElement>() | ||
const tooltipText = ref('') | ||
const left = ref<string>() | ||
const top = ref<string>() | ||
const getHoveredWidget = () => { | ||
const node = comfyApp.canvas.node_over | ||
if (!node.widgets) return | ||
const graphPos = comfyApp.canvas.graph_mouse | ||
const x = graphPos[0] - node.pos[0] | ||
const y = graphPos[1] - node.pos[1] | ||
for (const w of node.widgets) { | ||
let widgetWidth: number, widgetHeight: number | ||
if (w.computeSize) { | ||
;[widgetWidth, widgetHeight] = w.computeSize(node.size[0]) | ||
} else { | ||
widgetWidth = (w as { width?: number }).width || node.size[0] | ||
widgetHeight = LiteGraph.NODE_WIDGET_HEIGHT | ||
} | ||
if ( | ||
w.last_y !== undefined && | ||
x >= 6 && | ||
x <= widgetWidth - 12 && | ||
y >= w.last_y && | ||
y <= w.last_y + widgetHeight | ||
) { | ||
return w | ||
} | ||
} | ||
} | ||
const hideTooltip = () => (tooltipText.value = null) | ||
const showTooltip = async (tooltip: string | null | undefined) => { | ||
if (!tooltip) return | ||
left.value = comfyApp.canvas.mouse[0] + 'px' | ||
top.value = comfyApp.canvas.mouse[1] + 'px' | ||
tooltipText.value = tooltip | ||
await nextTick() | ||
const rect = tooltipRef.value.getBoundingClientRect() | ||
if (rect.right > window.innerWidth) { | ||
left.value = comfyApp.canvas.mouse[0] - rect.width + 'px' | ||
} | ||
if (rect.top < 0) { | ||
top.value = comfyApp.canvas.mouse[1] + rect.height + 'px' | ||
} | ||
} | ||
const onIdle = () => { | ||
const { canvas } = comfyApp | ||
const node = canvas.node_over | ||
if (!node) return | ||
const ctor = node.constructor as { title_mode?: 0 | 1 | 2 | 3 } | ||
const nodeDef = nodeDefStore.nodeDefsByName[node.type] | ||
if ( | ||
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 | ||
) { | ||
return showTooltip(nodeDef.description) | ||
} | ||
if (node.flags?.collapsed) return | ||
const inputSlot = canvas.isOverNodeInput( | ||
node, | ||
canvas.graph_mouse[0], | ||
canvas.graph_mouse[1], | ||
[0, 0] | ||
) | ||
if (inputSlot !== -1) { | ||
const inputName = node.inputs[inputSlot].name | ||
return showTooltip(nodeDef.input.getInput(inputName)?.tooltip) | ||
} | ||
const outputSlot = canvas.isOverNodeOutput( | ||
node, | ||
canvas.graph_mouse[0], | ||
canvas.graph_mouse[1], | ||
[0, 0] | ||
) | ||
if (outputSlot !== -1) { | ||
return showTooltip(nodeDef.output.all?.[outputSlot].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 | ||
) | ||
} | ||
} | ||
const onMouseMove = (e: MouseEvent) => { | ||
hideTooltip() | ||
clearTimeout(idleTimeout) | ||
if ((e.target as Node).nodeName !== 'CANVAS') return | ||
idleTimeout = window.setTimeout(onIdle, 500) | ||
} | ||
watch( | ||
() => settingStore.get<boolean>('Comfy.EnableTooltips'), | ||
(enabled) => { | ||
if (enabled) { | ||
window.addEventListener('mousemove', onMouseMove) | ||
window.addEventListener('click', hideTooltip) | ||
} else { | ||
window.removeEventListener('mousemove', onMouseMove) | ||
window.removeEventListener('click', hideTooltip) | ||
} | ||
}, | ||
{ immediate: true } | ||
) | ||
onBeforeUnmount(() => { | ||
window.removeEventListener('mousemove', onMouseMove) | ||
window.removeEventListener('click', hideTooltip) | ||
}) | ||
</script> | ||
|
||
<style lang="css" scoped> | ||
.node-tooltip { | ||
background: var(--comfy-input-bg); | ||
border-radius: 5px; | ||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.4); | ||
color: var(--input-text); | ||
font-family: sans-serif; | ||
left: 0; | ||
max-width: 30vw; | ||
padding: 4px 8px; | ||
position: absolute; | ||
top: 0; | ||
transform: translate(5px, calc(-100% - 5px)); | ||
white-space: pre-wrap; | ||
z-index: 99999; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters