Support associated socket for widgets (#891)

This PR is the litegraph side change necessary for widget sockets
feature in ComfyUI_frontend. Changes include

- Add readonly `Widget.computedDisabled` property for getting the
computed disabled state. When the associated socket is connected, the
widget is disabled
- Dynamically show the associated socket when
      - the mouse is over the widget
      - the slot is valid during link drop
      - the slot is connected
- Removes the legacy widget drop behavior

Ref: https://github.com/Comfy-Org/rfcs/pull/9

src/widgets/BaseWidget.ts

@@ -23,6 +23,7 @@ export abstract class BaseWidget implements IBaseWidget {
   last_y?: number
   width?: number
   disabled?: boolean
+  computedDisabled?: boolean
   hidden?: boolean
   advanced?: boolean
   tooltip?: string

src/widgets/BooleanWidget.ts

@@ -33,7 +33,7 @@ export class BooleanWidget extends BaseWidget implements IBooleanWidget {
       ctx.roundRect(margin, y, width - margin * 2, height, [height * 0.5])
     else ctx.rect(margin, y, width - margin * 2, height)
     ctx.fill()
-    if (show_text && !this.disabled) ctx.stroke()
+    if (show_text && !this.computedDisabled) ctx.stroke()
     ctx.fillStyle = this.value ? "#89A" : "#333"
     ctx.beginPath()
     ctx.arc(

src/widgets/ButtonWidget.ts

@@ -45,7 +45,7 @@ export class ButtonWidget extends BaseWidget implements IButtonWidget {
     ctx.fillRect(margin, y, width - margin * 2, height)
 
     // Draw button outline if not disabled
-    if (show_text && !this.disabled) {
+    if (show_text && !this.computedDisabled) {
       ctx.strokeStyle = this.outline_color
       ctx.strokeRect(margin, y, width - margin * 2, height)
     }

src/widgets/ComboWidget.ts

@@ -49,7 +49,7 @@ export class ComboWidget extends BaseWidget implements IComboWidget {
     ctx.fill()
 
     if (show_text) {
-      if (!this.disabled) {
+      if (!this.computedDisabled) {
         ctx.stroke()
         // Draw left arrow
         ctx.fillStyle = this.text_color

src/widgets/KnobWidget.ts

@@ -158,7 +158,7 @@ export class KnobWidget extends BaseWidget implements IKnobWidget {
     ctx.closePath()
 
     // Draw outline if not disabled
-    if (show_text && !this.disabled) {
+    if (show_text && !this.computedDisabled) {
       ctx.strokeStyle = this.outline_color
       // Draw value
       ctx.beginPath()

src/widgets/NumberWidget.ts

@@ -64,7 +64,7 @@ export class NumberWidget extends BaseWidget implements INumericWidget {
     ctx.fill()
 
     if (show_text) {
-      if (!this.disabled) {
+      if (!this.computedDisabled) {
         ctx.stroke()
         // Draw left arrow
         ctx.fillStyle = this.text_color

src/widgets/SliderWidget.ts

@@ -54,7 +54,7 @@ export class SliderWidget extends BaseWidget implements ISliderWidget {
     ctx.fillRect(margin, y, nvalue * (width - margin * 2), height)
 
     // Draw outline if not disabled
-    if (show_text && !this.disabled) {
+    if (show_text && !this.computedDisabled) {
       ctx.strokeStyle = this.outline_color
       ctx.strokeRect(margin, y, width - margin * 2, height)
     }

src/widgets/TextWidget.ts

@@ -47,7 +47,7 @@ export class TextWidget extends BaseWidget implements IStringWidget {
     ctx.fill()
 
     if (show_text) {
-      if (!this.disabled) ctx.stroke()
+      if (!this.computedDisabled) ctx.stroke()
       ctx.save()
       ctx.beginPath()
       ctx.rect(margin, y, width - margin * 2, height)