From 15f9dd5b34ec1a4b5d6f0fe02427a823bdf5ba8b Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Sun, 22 Sep 2024 04:03:19 -0500 Subject: [PATCH 1/2] Allow for autosize to be specified as hidden input --- web/js/autosize.js | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/web/js/autosize.js b/web/js/autosize.js index 438ce7a..80882b3 100644 --- a/web/js/autosize.js +++ b/web/js/autosize.js @@ -1,6 +1,26 @@ import { app } from '../../../scripts/app.js' + +function addResizeHook(node, padding) { + let origOnCreated = node.onNodeCreated + node.onNodeCreated = function() { + let r = origOnCreated?.apply(this, arguments) + let size = this.computeSize(); + size[0] += padding || 0; + this.setSize(size); + return r + } +} + + app.registerExtension({ name: "AnimateDiffEvolved.autosize", + async beforeRegisterNodeDef(nodeType, nodeData, app) { + if (nodeData?.name?.startsWith("ADE_")) { + if (nodeData?.input?.hidden?.autosize) { + addResizeHook(nodeType.prototype, nodeData.input.hidden.autosize[1]?.padding) + } + } + }, async getCustomWidgets() { return { ADEAUTOSIZE(node, inputName, inputData) { @@ -17,14 +37,7 @@ app.registerExtension({ node.widgets = [] } node.widgets.push(w) - let origOnCreated = node.onNodeCreated - node.onNodeCreated = function() { - let r = origOnCreated?.apply(this, arguments) - let size = this.computeSize(); - size[0] += inputData[1].padding || 0; - this.setSize(size); - return r - } + addResizeHook(node, inputData[1].padding); return w; } } From 891a55db6d2bf83f820fc60030baf956f9337cd3 Mon Sep 17 00:00:00 2001 From: Austin Mroz Date: Wed, 14 Aug 2024 17:41:26 -0500 Subject: [PATCH 2/2] widget selection, collapse allignment, video style Mouse selection of individual widgets now correctly applies for nodes which do not contain a domWidget and therefore lack a y attribute The collapse button has been migrated to use a monospace font for the + and minus characters to ensure a change in state doesn't cause a change in character alignment. The js code has been update to account for this change Basic styling has been applied for embedded videos. A play and pause option are provided, but the mute and fullscreen buttons are hidden. This functionality is tied to a class applied by documentation.py and can easily be removed if a video embed is used for more advanced information (a tutorial) instead of just quick demonstrations or output. --- web/js/documentation.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/web/js/documentation.js b/web/js/documentation.js index 670d6ba..7a63bed 100644 --- a/web/js/documentation.js +++ b/web/js/documentation.js @@ -41,6 +41,12 @@ function initHelpDOM() { ::-webkit-scrollbar-button { display: none; } + .VHS_loopedvideo::-webkit-media-controls-mute-button { + display:none; + } + .VHS_loopedvideo::-webkit-media-controls-fullscreen-button { + display:none; + } ` parentDOM.appendChild(scrollbarStyle) @@ -80,7 +86,7 @@ function initHelpDOM() { }); function setCollapse(el, doCollapse) { if (doCollapse) { - el.children[0].innerHTML = '[+]' + el.children[0].children[0].innerHTML = '+' Object.assign(el.children[1].style, { color: '#CCC', overflowX: 'hidden', @@ -96,7 +102,7 @@ function initHelpDOM() { child.style.display = 'none' } } else { - el.children[0].innerHTML = '[-]' + el.children[0].children[0].innerHTML = '-' Object.assign(el.children[1].style, { color: '', overflowX: '', @@ -111,7 +117,7 @@ function initHelpDOM() { } } helpDOM.collapseOnClick = function() { - let doCollapse = this.innerHTML[1] == '-' + let doCollapse = this.children[0].innerHTML == '-' setCollapse(this.parentElement, doCollapse) } helpDOM.selectHelp = function(name, value) { @@ -129,7 +135,14 @@ function initHelpDOM() { if (!match) { return null } + //For longer documentation items with fewer collapsable elements, + //scroll to make sure the entirety of the selected item is visible + //This has the unfortunate side effect of trying to scroll the main + //window if the documentation windows is forcibly offscreen, + //but it's easy to simply scroll the main window back and seems to + //have no visual side effects match.scrollIntoView(false) + window.scrollTo(0,0) for (let i of items.querySelectorAll('.VHS_collapse')) { if (i.contains(match)) { setCollapse(i, false) @@ -217,15 +230,20 @@ function initHelpDOM() { } } else { //probably widget, but widgets have variable height. + let basey = LiteGraph.NODE_SLOT_HEIGHT * inputRows + 6 for (let w of n.widgets) { - let wheight = LiteGraph.NODE_WIDGET_HEIGHT - if (w.computeSize) { - wheight = w.computeSize(n.size[0]) + if (w.y) { + basey = w.y } - if (pos[1] < w.y + wheight) { + let wheight = LiteGraph.NODE_WIDGET_HEIGHT+4 + if (w.computeSize) { + wheight = w.computeSize(n.size[0])[1] + } + if (pos[1] < basey + wheight) { helpDOM.selectHelp(w.name, w.value) break } + basey += wheight } } }