-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
merged ideas of pythongossss PR #3842 https://github.com/comfyanonymo…
…us/ComfyUI/pull/3842/files to maintain zero core changes for tooltip support
- Loading branch information
Showing
9 changed files
with
232 additions
and
284 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
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,137 @@ | ||
| /** | ||
| * File: cozy_tips.js | ||
| * Project: Jovimetrix | ||
| * | ||
| */ | ||
|
|
||
| import { app } from "../../../scripts/app.js" | ||
| import { $el } from "../../../scripts/ui.js" | ||
| import { getHoveredWidget } from '../util/util_widget.js' | ||
|
|
||
| const JTooltipWidget = (app, name, opts) => { | ||
| let options = opts || {}; | ||
| options.serialize = false; | ||
| const w = { | ||
| name: name, | ||
| type: "JTOOLTIP", | ||
| hidden: true, | ||
| options: options, | ||
| draw: function (ctx, node, width, Y, height) { | ||
| return; | ||
| }, | ||
| computeSize: function (width) { | ||
| return [width, 0]; | ||
| } | ||
| } | ||
| return w | ||
| } | ||
|
|
||
| app.registerExtension({ | ||
| name: "jovimetrix.help.tooltips", | ||
| async getCustomWidgets(app) { | ||
| return { | ||
| JTOOLTIP: (node, inputName, inputData, app) => ({ | ||
| widget: node.addCustomWidget(JTooltipWidget(app, inputName, inputData[1])) | ||
| }) | ||
| } | ||
| }, | ||
| setup() { | ||
| const tooltipEl = $el("div.jov-graph-tooltip", { | ||
| parent: document.body, | ||
| }); | ||
|
|
||
| let userTimeout = 750; | ||
| let tooltipTimeout; | ||
| const hideTooltip = () => { | ||
| if (tooltipTimeout) { | ||
| clearTimeout(tooltipTimeout); | ||
| } | ||
| tooltipEl.style.display = "none"; | ||
| }; | ||
| const showTooltip = (tooltip) => { | ||
| if (tooltipTimeout) { | ||
| clearTimeout(tooltipTimeout); | ||
| } | ||
| if (tooltip && userTimeout > 0) { | ||
| tooltipTimeout = setTimeout(() => { | ||
| tooltipEl.textContent = tooltip; | ||
| tooltipEl.style.display = "block"; | ||
| tooltipEl.style.left = app.canvas.mouse[0] + "px"; | ||
| tooltipEl.style.top = app.canvas.mouse[1] + "px"; | ||
| const rect = tooltipEl.getBoundingClientRect(); | ||
| if(rect.right > window.innerWidth) { | ||
| tooltipEl.style.left = (app.canvas.mouse[0] - rect.width) + "px"; | ||
| } | ||
|
|
||
| if(rect.top < 0) { | ||
| tooltipEl.style.top = (app.canvas.mouse[1] + rect.height) + "px"; | ||
| } | ||
| }, userTimeout); | ||
| } | ||
| }; | ||
|
|
||
| const onCanvasPointerMove = function () { | ||
| hideTooltip(); | ||
| const node = this.node_over; | ||
| if (!node) return; | ||
|
|
||
| if (node.flags.collapsed) return; | ||
|
|
||
| // jovian tooltip | ||
| const widget_tooltip = (node?.widgets || []) | ||
| .find(widget => widget.type === 'JTOOLTIP'); | ||
| if (!widget_tooltip) return; | ||
| const tips = widget_tooltip.options.default || {}; | ||
|
|
||
| // core tooltip | ||
| //const tooltips = node.constructor.nodeData?.tooltips; | ||
| //if (!tooltips) return; | ||
|
|
||
| const inputSlot = this.isOverNodeInput(node, this.graph_mouse[0], this.graph_mouse[1], [0, 0]); | ||
| if (inputSlot !== -1) { | ||
| let tip = tips?.[node.inputs[inputSlot].name]; | ||
| return showTooltip(tip); | ||
| // return showTooltip(tooltips.input?.[node.inputs[inputSlot].name]); | ||
| } | ||
|
|
||
| const outputSlot = this.isOverNodeOutput(node, this.graph_mouse[0], this.graph_mouse[1], [0, 0]); | ||
| if (outputSlot !== -1) { | ||
| let tip = tips?.[node.outputs[outputSlot].name]; | ||
| return showTooltip(tip); | ||
| // return showTooltip(tooltips.output?.[outputSlot]); | ||
| } | ||
|
|
||
| const widget = getHoveredWidget(); | ||
| if (widget && !widget.element) { | ||
| console.info(widget) | ||
| let tip = tips?.[widget.name]; | ||
| const def = widget.options.default; | ||
| if (def) { | ||
| tip += ` (default: ${def})`; | ||
| } | ||
| return showTooltip(tip); | ||
| //return showTooltip(tooltips.input?.[widget.name]); | ||
| } | ||
| }.bind(app.canvas); | ||
|
|
||
| app.ui.settings.addSetting({ | ||
| id: "jovimetrix.cozy.tips", | ||
| name: "🇯 🎨 Tooltips Delay", | ||
| tooltip: "How long (in milliseconds) to wait before showing the tooltip. 0 will turn it off.", | ||
| type: "number", | ||
| defaultValue: 500, | ||
| attrs: { | ||
| min: 0, | ||
| step: 1, | ||
| }, | ||
| onChange(value) { | ||
| if (value > 0) { | ||
| LiteGraph.pointerListenerAdd(app.canvasEl, "move", onCanvasPointerMove); | ||
| } else { | ||
| LiteGraph.pointerListenerRemove(app.canvasEl, "move", onCanvasPointerMove); | ||
| } | ||
| userTimeout = value; | ||
| }, | ||
| }); | ||
| }, | ||
| }); |
Oops, something went wrong.