Implement BooleanWidget.onClick (#479)

src/LGraphCanvas.ts

@@ -2695,8 +2695,11 @@ export class LGraphCanvas implements ConnectionColorContext {
     }
     case "toggle":
       pointer.onClick = () => {
-        widget.value = !widget.value
-        setWidgetValue(this, node, widget, widget.value)
+        toClass(BooleanWidget, widget).onClick({
+          e,
+          node,
+          canvas: this,
+        })
       }
       break
     case "string":

src/LGraphNode.ts

@@ -16,7 +16,7 @@ import type {
   Size,
 } from "./interfaces"
 import type { LGraph } from "./LGraph"
-import type { IWidget, TWidgetValue } from "./types/widgets"
+import type { IBaseWidget, IWidget, TWidgetValue } from "./types/widgets"
 import type { ISerialisedNode } from "./types/serialisation"
 import type { LGraphCanvas } from "./LGraphCanvas"
 import type { CanvasMouseEvent } from "./types/events"

src/widgets/BaseWidget.ts

@@ -2,7 +2,7 @@ import { Point } from "@/interfaces"
 import { LiteGraph } from "@/litegraph"
 import type { CanvasPointer, LGraphCanvas, LGraphNode, Size } from "@/litegraph"
 import type { CanvasMouseEvent, CanvasPointerEvent } from "@/types/events"
-import type { IBaseWidget, IWidget, IWidgetOptions } from "@/types/widgets"
+import type { IBaseWidget, IWidget, IWidgetOptions, TWidgetValue } from "@/types/widgets"
 
 export abstract class BaseWidget implements IBaseWidget {
   linkedWidgets?: IWidget[]
@@ -12,7 +12,7 @@ export abstract class BaseWidget implements IBaseWidget {
   clicked?: boolean
   name?: string
   type?: "string" | "number" | "combo" | "button" | "toggle" | "slider" | "text" | "multiline" | "custom"
-  value?: string | number | boolean | object
+  value?: TWidgetValue
   y?: number
   last_y?: number
   width?: number
@@ -64,10 +64,56 @@ export abstract class BaseWidget implements IBaseWidget {
     return LiteGraph.WIDGET_SECONDARY_TEXT_COLOR
   }
 
+  /**
+   * Draws the widget
+   * @param ctx - The canvas context
+   * @param options - The options for drawing the widget
+   *
+   * @note Not naming this `draw` as `draw` conflicts with the `draw` method in
+   * custom widgets.
+   */
   abstract drawWidget(ctx: CanvasRenderingContext2D, options: {
     y: number
     width: number
     show_text?: boolean
     margin?: number
   }): void
+
+  /**
+   * Handles the click event for the widget
+   * @param options - The options for handling the click event
+   */
+  abstract onClick(options: {
+    e: CanvasMouseEvent
+    node: LGraphNode
+    canvas: LGraphCanvas
+  }): void
+
+  /**
+   * Sets the value of the widget
+   * @param value - The value to set
+   * @param options - The options for setting the value
+   */
+  setValue(value: TWidgetValue, options: {
+    e: CanvasMouseEvent
+    node: LGraphNode
+    canvas: LGraphCanvas
+  }) {
+    const { node, canvas, e } = options
+    const oldValue = this.value
+
+    const v = this.type === "number" ? Number(value) : value
+    this.value = v
+    if (
+      this.options?.property &&
+      node.properties[this.options.property] !== undefined
+    ) {
+      node.setProperty(this.options.property, v)
+    }
+    const pos = canvas.graph_mouse
+    this.callback?.(this.value, canvas, node, pos, e)
+
+    node.onWidgetChanged?.(this.name ?? "", v, oldValue, this as IWidget)
+    if (node.graph) node.graph._version++
+  }
 }

src/widgets/BooleanWidget.ts

@@ -1,5 +1,8 @@
-import { IBooleanWidget } from "@/types/widgets"
+import type { IBooleanWidget } from "@/types/widgets"
 import { BaseWidget } from "./BaseWidget"
+import type { CanvasMouseEvent } from "@/types/events"
+import type { LGraphNode } from "@/LGraphNode"
+import type { LGraphCanvas } from "@/LGraphCanvas"
 
 export class BooleanWidget extends BaseWidget implements IBooleanWidget {
   // IBooleanWidget properties
@@ -12,14 +15,6 @@ export class BooleanWidget extends BaseWidget implements IBooleanWidget {
     this.value = widget.value
   }
 
-  /**
-   * Draws the widget
-   * @param ctx - The canvas context
-   * @param options - The options for drawing the widget
-   *
-   * @note Not naming this `draw` as `draw` conflicts with the `draw` method in
-   * custom widgets.
-   */
   override drawWidget(ctx: CanvasRenderingContext2D, options: {
     y: number
     width: number
@@ -65,4 +60,12 @@ export class BooleanWidget extends BaseWidget implements IBooleanWidget {
       )
     }
   }
+
+  override onClick(options: {
+    e: CanvasMouseEvent
+    node: LGraphNode
+    canvas: LGraphCanvas
+  }) {
+    this.setValue(!this.value, options)
+  }
 }