Render placeholder rect for DOM widgets when zoomed out (#3213)

Co-authored-by: github-actions <github-actions@github.com>

src/components/graph/DomWidgets.vue

@@ -30,7 +30,6 @@ const widgets = computed(() =>
   )
 )
 
-const DEFAULT_MARGIN = 10
 const updateWidgets = () => {
   const lgCanvas = canvasStore.canvas
   if (!lgCanvas) return
@@ -49,7 +48,7 @@ const updateWidgets = () => {
 
     widgetState.visible = visible
     if (visible) {
-      const margin = widget.options.margin ?? DEFAULT_MARGIN
+      const margin = widget.margin
       widgetState.pos = [node.pos[0] + margin, node.pos[1] + margin + widget.y]
       widgetState.size = [
         (widget.width ?? node.width) - margin * 2,

src/scripts/domWidget.ts

@@ -1,4 +1,4 @@
-import { LGraphNode } from '@comfyorg/litegraph'
+import { LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import type {
   ICustomWidget,
   IWidget,
@@ -27,6 +27,8 @@ export interface BaseDOMWidget<V extends object | string>
   readonly node: LGraphNode
   /** Whether the widget is visible. */
   isVisible(): boolean
+  /** The margin of the widget. */
+  margin: number
 }
 
 /**
@@ -86,6 +88,7 @@ export const isComponentWidget = <V extends object | string>(
 abstract class BaseDOMWidgetImpl<V extends object | string>
   implements BaseDOMWidget<V>
 {
+  static readonly DEFAULT_MARGIN = 10
   readonly type: 'custom'
   readonly name: string
   readonly options: DOMWidgetOptions<V>
@@ -121,6 +124,10 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     this.callback?.(this.value)
   }
 
+  get margin(): number {
+    return this.options.margin ?? BaseDOMWidgetImpl.DEFAULT_MARGIN
+  }
+
   isVisible(): boolean {
     return (
       !_.isNil(this.computedHeight) &&
@@ -130,7 +137,27 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
     )
   }
 
-  draw(): void {
+  draw(
+    ctx: CanvasRenderingContext2D,
+    _node: LGraphNode,
+    widget_width: number,
+    y: number,
+    widget_height: number,
+    lowQuality?: boolean
+  ): void {
+    if (this.options.hideOnZoom && lowQuality) {
+      // Draw a placeholder rectangle
+      const originalFillStyle = ctx.fillStyle
+      ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR
+      ctx.rect(
+        this.margin,
+        y,
+        widget_width - this.margin * 2,
+        (this.computedHeight ?? widget_height) - this.margin
+      )
+      ctx.fill()
+      ctx.fillStyle = originalFillStyle
+    }
     this.options.onDraw?.(this)
   }