nodes/rgthree-rgthree-comfy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Force the grid display on body even when ComfyUI's new layout bar isn't used. Fixes #275 and #274

Browse Source
This commit is contained in:
rgthree
2024-07-09 20:50:50 -04:00
parent bb0232e817
commit fc7c2fde3e
4 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src_web/comfyui/rgthree.scss
+13 -3
View File
@@ -260,18 +260,28 @@ rgthree-progress-bar {
box-shadow:
inset 0px -1px 0px rgba(0, 0, 0, 0.25),
0px 1px 0px rgba(255, 255, 255, 0.125);
}
* ~ rgthree-progress-bar {
* ~ rgthree-progress-bar,
.comfyui-body-bottom rgthree-progress-bar {
box-shadow:
inset 0px 1px 0px rgba(0, 0, 0, 1),
inset 0px 2px 0px rgba(255, 255, 255, 0.15), inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125);
0px -1px 0px rgba(0, 0, 0, 1),
inset 0px 1px 0px rgba(255, 255, 255, 0.15), inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125);
}
body > rgthree-progress-bar {
position: fixed;
}
// When ComfyUI added the top/bottom bar for their UI in beta, they added markup for the grid
// display, but they only actually apply a grid display when the bar is enabled. This doesn't allow
// us (or other extensions) to start using the new layout... so we'll force it to be grid always
// (when we add our class, which we do when we add the rgthree-comfy progress bar).
body.rgthree-force-new-comfyui-grid-layout {
display: grid;
}
.rgthree-debug-keydowns {
display: block;
position: fixed;
src_web/comfyui/rgthree.ts
+4 -1
View File
@@ -314,7 +314,7 @@ class Rgthree extends EventTarget {
this.progressBarEl = RgthreeProgressBar.create();
this.progressBarEl.setAttribute(
"title",
"Progress Bar by gthree. (Right-click for rgthree menu)",
"Progress Bar by rgthree. right-click for rgthree menu.",
);
this.progressBarEl.addEventListener("contextmenu", async (e) => {
@@ -358,6 +358,9 @@ class Rgthree extends EventTarget {
const position = CONFIG_SERVICE.getConfigValue("features.progress_bar.position");
// If ComfyUI is updated with the body segments, then use that.
if (isUpdatedComfyBodyClasses) {
// Looks like ComfyUI sets up the markup for its new grid layout, but only actually applies
// display: grid on the body when the new bar is used. We'll just apply it always here.
document.body.classList.add('rgthree-force-new-comfyui-grid-layout');
if (position === "bottom") {
queryOne(".comfyui-body-bottom")!.appendChild(this.progressBarEl);
} else {