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

Don't force body to be grid, some other extensions aren't ready.

Browse Source
This commit is contained in:
rgthree
2024-07-10 07:22:54 -04:00
parent fc7c2fde3e
commit 37d8759dbf
4 changed files with 18 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src_web/comfyui/rgthree.scss
+10 -9
View File
@@ -270,17 +270,18 @@ rgthree-progress-bar {
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;
body:not([style*=grid]){
rgthree-progress-bar {
position: fixed;
top: 0px;
bottom: auto;
}
rgthree-progress-bar.rgthree-pos-bottom {
top: auto;
bottom: 0px;
}
}
// 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;
src_web/comfyui/rgthree.ts
+1 -12
View File
@@ -356,11 +356,9 @@ class Rgthree extends EventTarget {
// `isUpdatedComfyBodyClasses` is true in the near future.
const isUpdatedComfyBodyClasses = !!queryOne(".comfyui-body-top");
const position = CONFIG_SERVICE.getConfigValue("features.progress_bar.position");
this.progressBarEl.classList.toggle('rgthree-pos-bottom', position === 'bottom');
// 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 {
@@ -374,15 +372,6 @@ class Rgthree extends EventTarget {
const fontSize = Math.max(10, Number(height) - 10);
this.progressBarEl.style.fontSize = `${fontSize}px`;
this.progressBarEl.style.fontWeight = fontSize <= 12 ? "bold" : "normal";
if (!isUpdatedComfyBodyClasses) {
if (CONFIG_SERVICE.getConfigValue("features.progress_bar.position") === "bottom") {
this.progressBarEl.style.bottom = `0px`;
this.progressBarEl.style.top = `auto`;
} else {
this.progressBarEl.style.top = `0px`;
this.progressBarEl.style.bottom = `auto`;
}
}
} else {
this.progressBarEl?.remove();
}
web/comfyui/rgthree.css
+6 -4
View File
@@ -539,12 +539,14 @@ rgthree-progress-bar {
box-shadow: 0px -1px 0px rgb(0, 0, 0), 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 {
body:not([style*=grid]) rgthree-progress-bar {
position: fixed;
top: 0px;
bottom: auto;
}
body.rgthree-force-new-comfyui-grid-layout {
display: grid;
body:not([style*=grid]) rgthree-progress-bar.rgthree-pos-bottom {
top: auto;
bottom: 0px;
}
.rgthree-debug-keydowns {
web/comfyui/rgthree.js
+1 -11
View File
@@ -214,8 +214,8 @@ class Rgthree extends EventTarget {
}
const isUpdatedComfyBodyClasses = !!queryOne(".comfyui-body-top");
const position = CONFIG_SERVICE.getConfigValue("features.progress_bar.position");
this.progressBarEl.classList.toggle('rgthree-pos-bottom', position === 'bottom');
if (isUpdatedComfyBodyClasses) {
document.body.classList.add('rgthree-force-new-comfyui-grid-layout');
if (position === "bottom") {
queryOne(".comfyui-body-bottom").appendChild(this.progressBarEl);
}
@@ -231,16 +231,6 @@ class Rgthree extends EventTarget {
const fontSize = Math.max(10, Number(height) - 10);
this.progressBarEl.style.fontSize = `${fontSize}px`;
this.progressBarEl.style.fontWeight = fontSize <= 12 ? "bold" : "normal";
if (!isUpdatedComfyBodyClasses) {
if (CONFIG_SERVICE.getConfigValue("features.progress_bar.position") === "bottom") {
this.progressBarEl.style.bottom = `0px`;
this.progressBarEl.style.top = `auto`;
}
else {
this.progressBarEl.style.top = `0px`;
this.progressBarEl.style.bottom = `auto`;
}
}
}
else {
(_a = this.progressBarEl) === null || _a === void 0 ? void 0 : _a.remove();