From c715155a700206bc9ca99a7dfacc52a190d33aad Mon Sep 17 00:00:00 2001
From: shadowcz007 <chizhiwei007@163.com>
Date: Tue, 2 Jan 2024 13:25:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B8=90=E5=8F=98=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nodes/ImageNode.py             |  8 ++++++++
 web/index.html                 |  4 ++--
 web/javascript/utils_mixlab.js | 24 +++++++++++++++++++++---
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/nodes/ImageNode.py b/nodes/ImageNode.py
index 658e6a5..f3cbdb5 100644
--- a/nodes/ImageNode.py
+++ b/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))
diff --git a/web/index.html b/web/index.html
index 51aa39a..86fb96a 100644
--- a/web/index.html
+++ b/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`);
diff --git a/web/javascript/utils_mixlab.js b/web/javascript/utils_mixlab.js
index d47da71..dc6c727 100644
--- a/web/javascript/utils_mixlab.js
+++ b/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')