渐变节点

nodes/ImageNode.py

@@ -162,6 +162,14 @@ def generate_gradient_image(width, height, start_color_hex, end_color_hex):
     image = Image.new('RGBA', (width, height))
     draw = ImageDraw.Draw(image)
 
+    if len(start_color_hex) == 7:
+        start_color_hex += "FF"
+    if len(end_color_hex) == 7:
+        end_color_hex += "FF"
+
+    start_color_hex = start_color_hex.lstrip("#")
+    end_color_hex = end_color_hex.lstrip("#")
+
     # 将十六进制颜色代码转换为RGBA元组，包括透明度
     start_color = tuple(int(start_color_hex[i:i+2], 16) for i in (0, 2, 4, 6))
     end_color = tuple(int(end_color_hex[i:i+2], 16) for i in (0, 2, 4, 6))

web/index.html

@@ -1328,7 +1328,7 @@
                     element: output,
                     update: async function (type = "image", val, id) {
                         console.log(val, id)
-                        if (val && type == "image" && output.querySelector(`#output_${id}`)) {
+                        if (val && type == "image" && output.querySelector(`#output_${id} img`)) {
                             // if (output.querySelector(`#output_${id}`)) {
 
                             let im = await createImage(val)
@@ -1348,7 +1348,7 @@
 
                         }
 
-                        if (val && type == "video" && output.querySelector(`#output_${id}`)) {
+                        if (val && type == "video" && output.querySelector(`#output_${id} video`)) {
 
                             let video = output.querySelector(`#output_${id} video`);
                             let img = output.querySelector(`#output_${id} img`);

web/javascript/utils_mixlab.js

@@ -68,6 +68,24 @@ app.registerExtension({
       href: '/extensions/comfyui-mixlab-nodes/lib/classic.min.css',
       parent: document.head
     })
+
+    $el("style", {
+			textContent: `
+      .pickr{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+				.pickr .pcr-button {
+					width: 56px;
+          height: 56px;
+          outline: 1px solid white;
+				}
+				 
+			`,
+			parent: document.body,
+		});
+
   },
   async getCustomWidgets (app) {
     return {
@@ -189,7 +207,7 @@ app.registerExtension({
 
         const handleMouseWheel=()=>pickr&&pickr.hide()
 
-        document.addEventListener('mousewheel',handleMouseWheel);
+        document.addEventListener('wheel',handleMouseWheel);
 
 
         this.pickr = pickr
@@ -201,7 +219,7 @@ app.registerExtension({
           pickr.destroyAndRemove()
           pickr=null;
           this.pickr=null;
-          document.removeEventListener('mousewheel',handleMouseWheel);
+          document.removeEventListener('wheel',handleMouseWheel);
           return onRemoved?.()
         }
 
@@ -214,7 +232,7 @@ app.registerExtension({
     // You can modify widgets/add handlers/etc here
 
     if (node.type === 'Color') {
-      let widget = node.widgets.filter(w => w.div)[0]
+      // let widget = node.widgets.filter(w => w.div)[0]
 
       let data = getLocalData('_mixlab_utils_color')