fixed incorrect display of nodes

In the upcoming transition of ComfyUI to the new frontend (comfyanonymous/ComfyUI#4169), when the menu
was enabled, widgets were shifted.
Fix IDENode collapse
Updates init.py and pyproject version

IDENode/js/ide_node.js

@@ -89,27 +89,29 @@ result = runCode()
 `,
 };
 
-function getPostition(ctx, w_width, y, n_height) {
-  const MARGIN = 5;
+function getPostition(node, ctx, w_width, y, n_height) {
+  const margin = 5;
 
   const rect = ctx.canvas.getBoundingClientRect();
   const transform = new DOMMatrix()
     .scaleSelf(rect.width / ctx.canvas.width, rect.height / ctx.canvas.height)
     .multiplySelf(ctx.getTransform())
-    .translateSelf(MARGIN, MARGIN + y);
+    .translateSelf(margin, margin + y);
+  const scale = new DOMMatrix().scaleSelf(transform.a, transform.d);
 
   return {
     transformOrigin: "0 0",
-    transform: transform,
-    left: `0px`,
-    top: `0px`,
-    position: "absolute",
-    maxWidth: `${w_width - MARGIN * 2}px`,
-    maxHeight: `${n_height - MARGIN * 2 - y - 15}px`,
-    width: "100%",
+    transform: scale,
+    left: `${transform.a + transform.e + rect.left}px`,
+    top: `${transform.d + transform.f + rect.top}px`,
+    maxWidth: `${w_width - margin * 2}px`,
+    maxHeight: `${n_height - margin * 2 - y - 15}px`,
+    width: `${w_width - margin * 2}px`,
     height: "90%",
+    position: "absolute",
     scrollbarColor: "var(--descrip-text) var(--bg-color)",
     scrollbarWidth: "thin",
+    zIndex: app.graph._nodes.indexOf(node),
   };
 }
 
@@ -118,31 +120,62 @@ function codeEditor(node, inputName, inputData) {
   const widget = {
     type: "pycode",
     name: inputName,
+    options: { hideOnZoom: true },
     value:
       inputData[1]?.default ||
       `def my(a, b=1):
   return a * b<br>
     
 result = str(my(23, 9))`,
-    size: [500, 350],
     draw(ctx, node, widget_width, y, widget_height) {
+      const hidden =
+        node.flags?.collapsed ||
+        (!!widget.options.hideOnZoom && app.canvas.ds.scale < 0.5) ||
+        widget.type === "converted-widget" ||
+        widget.type === "hidden";
+
+      widget.hidden = hidden;
+      widget.codeElement.style.display = hidden ? "none" : null;
+
+      if (hidden) {
+        widget.options.onHide?.(widget);
+        return;
+      }
+
       Object.assign(
         this.codeElement.style,
-        getPostition(ctx, widget_width, y, node.size[1])
+        getPostition(node, ctx, widget_width, y, node.size[1])
       );
     },
     computeSize(...args) {
-      return [500, 350];
+      return [500, 250];
     },
   };
 
-  widget.codeElement = makeElement("pre", { innerHTML: widget.value });
+  widget.codeElement = makeElement("pre", {
+    innerHTML: widget.value,
+  });
+
   widget.editor = ace.edit(widget.codeElement);
   widget.editor.setTheme("ace/theme/monokai");
   widget.editor.session.setMode("ace/mode/python");
 
   document.body.appendChild(widget.codeElement);
 
+  const collapse = node.collapse;
+  node.collapse = function () {
+    collapse.apply(this, arguments);
+    if (this.flags?.collapsed) {
+      widget.codeElement.hidden = true;
+      widget.codeElement.style.display = "none";
+    } else {
+      if (this.flags?.collapsed === false) {
+        widget.codeElement.hidden = false;
+        widget.codeElement.style.display = null;
+      }
+    }
+  };
+
   return widget;
 }
 

PainterNode/js/painter_node.js

@@ -1966,8 +1966,14 @@ function PainterWidget(node, inputName, inputData, app) {
       }
 
       Object.assign(this.painter_wrap.style, {
-        left: `${transform.a * margin * left_offset + transform.e}px`,
-        top: `${transform.d + transform.f + top_offset}px`,
+        left: `${
+          transform.a * margin * left_offset +
+          transform.e +
+          clientRectBound.left
+        }px`,
+        top: `${
+          transform.d + transform.f + top_offset + clientRectBound.top
+        }px`,
         width: `${w * transform.a}px`,
         height: `${w * transform.d}px`,
         position: "absolute",

PoseNode/js/pose_node.js

@@ -586,8 +586,8 @@ function createOpenPose(node, inputName, inputData, app) {
       }
 
       Object.assign(this.openpose.style, {
-        left: `${transform.a * margin + transform.e}px`,
-        top: `${transform.d + transform.f}px`,
+        left: `${transform.a * margin + transform.e + clientRectBound.left}px`,
+        top: `${transform.d + transform.f + clientRectBound.top}px`,
         width: w + "px",
         height: w / aspect_ratio + "px",
         position: "absolute",

__init__.py

@@ -1,6 +1,6 @@
 # Title: ComfyUI Install Customs Nodes and javascript files
 # Author: AlekPet
-# Version: 2024.07.27
+# Version: 2024.08.08
 import os
 import importlib.util
 import subprocess
@@ -217,7 +217,7 @@ def install_node(nodeElement):
 
     clsNodes = getNamesNodesInsidePyFile(nodeElement)
     clsNodesText = "\033[93m" + ", ".join(clsNodes) + "\033[0m" if clsNodes else ""
-    printColorInfo(f"Node -> {nodeElement}: {clsNodesText} \033[92m[Loading]")
+    printColorInfo(f"Node -> {nodeElement}: {clsNodesText} \033[92m[Loading] ")
 
     checkModules(nodeElement)
     # addComfyUINodesToMapping(nodeElement) # dynamic class nodes append in mappings

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui_custom_nodes_alekpet"
 description = "Nodes: PoseNode, PainterNode, TranslateTextNode, TranslateCLIPTextEncodeNode, DeepTranslatorTextNode, DeepTranslatorCLIPTextEncodeNode, ArgosTranslateTextNode, ArgosTranslateCLIPTextEncodeNode, PreviewTextNode, HexToHueNode, ColorsCorrectNode, IDENode."
-version = "1.0.15"
+version = "1.0.16"
 license = { file = "LICENSE" }
 
 [project.urls]