From 30a7f19a649601d12241ac615c153fd96bb91493 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Sun, 30 Mar 2025 17:14:09 -0400
Subject: [PATCH] Upstream progressbar rendering (#871)

Upstreams progress bar rendering from ComfyUI_frontend.
---
 src/LGraphCanvas.ts                           |  2 ++
 src/LGraphNode.ts                             | 23 +++++++++++++++++++
 .../__snapshots__/ConfigureGraph.test.ts.snap |  3 +++
 test/__snapshots__/LGraph.test.ts.snap        |  3 +++
 .../LGraph_constructor.test.ts.snap           |  3 +++
 5 files changed, 34 insertions(+)

diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts
index 1ba5e529b..f406fcd31 100644
--- a/src/LGraphCanvas.ts
+++ b/src/LGraphCanvas.ts
@@ -4493,6 +4493,8 @@ export class LGraphCanvas implements ConnectionColorContext {
       }
     }
 
+    node.drawProgressBar(ctx)
+
     // these counter helps in conditioning drawing based on if the node has been executed or an action occurred
     if (node.execute_triggered != null && node.execute_triggered > 0) node.execute_triggered--
     if (node.action_triggered != null && node.action_triggered > 0) node.action_triggered--
diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts
index 6327eef21..b6689a227 100644
--- a/src/LGraphNode.ts
+++ b/src/LGraphNode.ts
@@ -262,6 +262,11 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
    */
   strokeStyles: Record<string, (this: LGraphNode) => IDrawBoundingOptions | undefined>
 
+  /**
+   * The progress of node execution. Used to render a progress bar. Value between 0 and 1.
+   */
+  progress?: number
+
   exec_version?: number
   action_call?: string
   execute_triggered?: number
@@ -3657,4 +3662,22 @@ export class LGraphNode implements Positionable, IPinnable, IColorable {
       this.layoutSlot(actualSlot, { slotIndex: slot.index })
     }
   }
+
+  /**
+   * Draws a progress bar on the node.
+   * @param ctx The canvas context to draw on
+   */
+  drawProgressBar(ctx: CanvasRenderingContext2D): void {
+    if (!this.progress) return
+
+    const originalFillStyle = ctx.fillStyle
+    ctx.fillStyle = "green"
+    ctx.fillRect(
+      0,
+      0,
+      this.width * this.progress,
+      6,
+    )
+    ctx.fillStyle = originalFillStyle
+  }
 }
diff --git a/test/__snapshots__/ConfigureGraph.test.ts.snap b/test/__snapshots__/ConfigureGraph.test.ts.snap
index 8aab9b8b0..2c9c4b76a 100644
--- a/test/__snapshots__/ConfigureGraph.test.ts.snap
+++ b/test/__snapshots__/ConfigureGraph.test.ts.snap
@@ -84,6 +84,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -152,6 +153,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -221,6 +223,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
diff --git a/test/__snapshots__/LGraph.test.ts.snap b/test/__snapshots__/LGraph.test.ts.snap
index b25c8127a..52c1ff93d 100644
--- a/test/__snapshots__/LGraph.test.ts.snap
+++ b/test/__snapshots__/LGraph.test.ts.snap
@@ -86,6 +86,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -156,6 +157,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -227,6 +229,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
diff --git a/test/__snapshots__/LGraph_constructor.test.ts.snap b/test/__snapshots__/LGraph_constructor.test.ts.snap
index bcb494016..644299913 100644
--- a/test/__snapshots__/LGraph_constructor.test.ts.snap
+++ b/test/__snapshots__/LGraph_constructor.test.ts.snap
@@ -84,6 +84,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -152,6 +153,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,
@@ -221,6 +223,7 @@ LGraph {
       "mouseOver": undefined,
       "order": 0,
       "outputs": [],
+      "progress": undefined,
       "properties": {},
       "properties_info": [],
       "redraw_on_mouse": undefined,