From 37d8759dbff2c7bb1d252c3881eeb34ffd00f288 Mon Sep 17 00:00:00 2001
From: rgthree <regis.gaughan@gmail.com>
Date: Wed, 10 Jul 2024 07:22:54 -0400
Subject: [PATCH] Don't force body to be grid, some other extensions aren't
 ready.

---
 src_web/comfyui/rgthree.scss | 19 ++++++++++---------
 src_web/comfyui/rgthree.ts   | 13 +------------
 web/comfyui/rgthree.css      | 10 ++++++----
 web/comfyui/rgthree.js       | 12 +-----------
 4 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/src_web/comfyui/rgthree.scss b/src_web/comfyui/rgthree.scss
index db3780c..da3ed6f 100644
--- a/src_web/comfyui/rgthree.scss
+++ b/src_web/comfyui/rgthree.scss
@@ -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;
diff --git a/src_web/comfyui/rgthree.ts b/src_web/comfyui/rgthree.ts
index abd256a..b07b04f 100644
--- a/src_web/comfyui/rgthree.ts
+++ b/src_web/comfyui/rgthree.ts
@@ -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();
     }
diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css
index 1afb40d..f03ad0e 100644
--- a/web/comfyui/rgthree.css
+++ b/web/comfyui/rgthree.css
@@ -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 {
diff --git a/web/comfyui/rgthree.js b/web/comfyui/rgthree.js
index 80461c6..0b67c8b 100644
--- a/web/comfyui/rgthree.js
+++ b/web/comfyui/rgthree.js
@@ -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();