Upstream progressbar rendering (#871)

Upstreams progress bar rendering from ComfyUI_frontend.

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--

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
+  }
 }

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,

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,

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,