implement setting options painter save settings in json on the server

In settings Comfyui add option save settings painter node inside json file, used his when canvas loading image big size, and localStorage limit quote expire. Painter node and PoseNode creates css files styles nodes Change style scrollbar in IDENode Small updates in extras node Small update utils.js makeElement function Update __init_.py, display loaded nodes inside python file
AlekPet · Jul 17, 2024 · 285c9ef · 285c9ef
1 parent 3741020
commit 285c9ef
Show file tree

Hide file tree

Showing 9 changed files with 603 additions and 477 deletions.
diff --git a/ExtrasNode/js/extras_node.js b/ExtrasNode/js/extras_node.js
@@ -96,17 +96,17 @@ function createPreiviewSize(node, name, options) {
 }
 
 const convertIdClass = (text) => text.replaceAll(".", "_");
-const idExt = "Comfy.ExtrasNode";
+const idExt = "alekpet.ExtrasNode";
 
 // LocalStorage settings
 const PreviewImageSizeLS = localStorage.getItem(
-  "Comfy.Settings.Comfy.ExtrasNode.PreviewImage"
+  `Comfy.Settings.${idExt}.PreviewImage`
 );
 const PreviewImageColorTextLS = localStorage.getItem(
-  "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorText"
+  `Comfy.Settings.${idExt}.PreviewImageColorText`
 );
 const PreviewImageColorBgLS = localStorage.getItem(
-  "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorBg"
+  `Comfy.Settings.${idExt}.PreviewImageColorBg`
 );
 
 let PreviewImageSize = PreviewImageSizeLS
@@ -116,7 +116,7 @@ let PreviewImageSize = PreviewImageSizeLS
     PreviewImageColorTextLS && PreviewImageColorTextLS.trim() !== ""
       ? PreviewImageColorTextLS
       : document.documentElement.style.getPropertyValue("--input-text") ||
-        "#ddd",
+        "#dddddd",
   PreviewImageColorBg = PreviewImageColorBgLS ? PreviewImageColorBgLS : "";
 
 // Register Extension
@@ -125,7 +125,7 @@ app.registerExtension({
   init() {
     app.ui.settings.addSetting({
       id: `${idExt}.PreviewImage`,
-      name: "🔸 PreviewImage: display image size",
+      name: "🔸 Preview Image",
       defaultValue: true,
       type: (name, sett, val) => {
         return $el("tr", [
@@ -140,7 +140,7 @@ app.registerExtension({
               "label",
               {
                 style: { display: "block" },
-                textContent: "Enable: ",
+                textContent: "Display image size: ",
                 for: convertIdClass(`${idExt}.PreviewImage_size_checkbox`),
               },
               [
@@ -176,7 +176,7 @@ app.registerExtension({
                       "#dddddd";
                     PreviewImageColorText = colorVal;
                     localStorage.setItem(
-                      "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorText",
+                      `Comfy.Settings.${idExt}.PreviewImageColorText`,
                       PreviewImageColorText
                     );
                   },
@@ -200,7 +200,7 @@ app.registerExtension({
                     const colorVal = e.target.value || "";
                     PreviewImageColorBg = colorVal;
                     localStorage.setItem(
-                      "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorBg",
+                      `Comfy.Settings.${idExt}.PreviewImageColorBg`,
                       PreviewImageColorBg
                     );
                   },
@@ -219,18 +219,18 @@ app.registerExtension({
                 PreviewImageColorBg = "";
 
                 document.querySelector(
-                  "#Comfy_ExtrasNode_PreviewImage_color_input"
+                  "#alekpet_ExtrasNode_PreviewImage_color_input"
                 ).value = PreviewImageColorText;
                 document.querySelector(
-                  "#Comfy_ExtrasNode_PreviewImage_color_background_input"
+                  "#alekpet_ExtrasNode_PreviewImage_color_background_input"
                 ).value = PreviewImageColorBg;
 
                 localStorage.setItem(
-                  "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorText",
+                  `Comfy.Settings.${idExt}.PreviewImageColorText`,
                   PreviewImageColorText
                 );
                 localStorage.setItem(
-                  "Comfy.Settings.Comfy.ExtrasNode.PreviewImageColorBg",
+                  `Comfy.Settings.${idExt}.PreviewImageColorBg`,
                   PreviewImageColorBg
                 );
               },
@@ -427,7 +427,7 @@ app.registerExtension({
                 widgetRes.element.style.color = PreviewImageColorText;
               }
 
-              images.forEach((data) => {
+              if (images.length) {
                 const image = new Image();
                 image.onload = () => {
                   widgetRes.value = `<div style="border: solid 1px var(--border-color); border-radius: 4px; padding: 5px; ${
@@ -440,11 +440,11 @@ app.registerExtension({
                 };
                 image.src = api.apiURL(
                   "/view?" +
-                    new URLSearchParams(data).toString() +
+                    new URLSearchParams(images[0]).toString() +
                     app.getPreviewFormatParam() +
                     app.getRandParam()
                 );
-              });
+              }
             }
           }
         };

diff --git a/ExtrasNode/js/utils.js b/ExtrasNode/js/utils.js
@@ -184,6 +184,12 @@ function makeElement(tag, attrs = {}) {
       } catch (err) {
         console.log(err);
       }
+    } else if (["for"].includes(key)) {
+      element.setAttribute(key, currValue);
+    } else if (key === "children") {
+      element.append(...(currValue instanceof Array ? currValue : [currValue]));
+    } else if (key === "parent") {
+      currValue.append(element);
     } else {
       element[key] = currValue;
     }

diff --git a/IDENode/js/ide_node.js b/IDENode/js/ide_node.js
@@ -108,6 +108,8 @@ function getPostition(ctx, w_width, y, n_height) {
     maxHeight: `${n_height - MARGIN * 2 - y - 15}px`,
     width: "100%",
     height: "90%",
+    scrollbarColor: "var(--descrip-text) var(--bg-color)",
+    scrollbarWidth: "thin",
   };
 }