Implement BooleanWidget (#466)

* Implement BooleanWidget

* Merge function of addWidget

* Class conversion

* nit

src/widgets/BaseWidget.ts

@@ -0,0 +1,73 @@
+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"
+
+export abstract class BaseWidget implements IBaseWidget {
+  linkedWidgets?: IWidget[]
+  options: IWidgetOptions<unknown>
+  marker?: number
+  label?: string
+  clicked?: boolean
+  name?: string
+  type?: "string" | "number" | "combo" | "button" | "toggle" | "slider" | "text" | "multiline" | "custom"
+  value?: string | number | boolean | object
+  y?: number
+  last_y?: number
+  width?: number
+  disabled?: boolean
+  hidden?: boolean
+  advanced?: boolean
+  tooltip?: string
+  element?: HTMLElement
+  callback?(
+    value: any,
+    canvas?: LGraphCanvas,
+    node?: LGraphNode,
+    pos?: Point,
+    e?: CanvasMouseEvent,
+  ): void
+  mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean
+  draw?(
+    ctx: CanvasRenderingContext2D,
+    node: LGraphNode,
+    widget_width: number,
+    y: number,
+    H: number,
+  ): void
+  computeSize?(width?: number): Size
+  onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean
+
+  constructor(widget: IBaseWidget) {
+    Object.assign(this, widget)
+    this.options = widget.options
+  }
+
+  get outline_color() {
+    return this.advanced ? LiteGraph.WIDGET_ADVANCED_OUTLINE_COLOR : LiteGraph.WIDGET_OUTLINE_COLOR
+  }
+
+  get background_color() {
+    return LiteGraph.WIDGET_BGCOLOR
+  }
+
+  get height() {
+    return LiteGraph.NODE_WIDGET_HEIGHT
+  }
+
+  get text_color() {
+    return LiteGraph.WIDGET_TEXT_COLOR
+  }
+
+  get secondary_text_color() {
+    return LiteGraph.WIDGET_SECONDARY_TEXT_COLOR
+  }
+
+  abstract drawWidget(ctx: CanvasRenderingContext2D, options: {
+    y: number
+    width: number
+    show_text?: boolean
+    margin?: number
+  }): void
+}

src/widgets/BooleanWidget.ts

@@ -0,0 +1,68 @@
+import { IBooleanWidget } from "@/types/widgets"
+import { BaseWidget } from "./BaseWidget"
+
+export class BooleanWidget extends BaseWidget implements IBooleanWidget {
+  // IBooleanWidget properties
+  declare type: "toggle"
+  declare value: boolean
+
+  constructor(widget: IBooleanWidget) {
+    super(widget)
+    this.type = "toggle"
+    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
+    show_text?: boolean
+    margin?: number
+  }) {
+    const { y, width, show_text = true, margin = 15 } = options
+    const widget_width = width
+    const H = this.height
+
+    ctx.textAlign = "left"
+    ctx.strokeStyle = this.outline_color
+    ctx.fillStyle = this.background_color
+    ctx.beginPath()
+
+    if (show_text)
+      ctx.roundRect(margin, y, widget_width - margin * 2, H, [H * 0.5])
+    else ctx.rect(margin, y, widget_width - margin * 2, H)
+    ctx.fill()
+    if (show_text && !this.disabled) ctx.stroke()
+    ctx.fillStyle = this.value ? "#89A" : "#333"
+    ctx.beginPath()
+    ctx.arc(
+      widget_width - margin * 2,
+      y + H * 0.5,
+      H * 0.36,
+      0,
+      Math.PI * 2,
+    )
+    ctx.fill()
+    if (show_text) {
+      ctx.fillStyle = this.secondary_text_color
+      const label = this.label || this.name
+      if (label != null) {
+        ctx.fillText(label, margin * 2, y + H * 0.7)
+      }
+      ctx.fillStyle = this.value ? this.text_color : this.secondary_text_color
+      ctx.textAlign = "right"
+      ctx.fillText(
+        this.value ? this.options.on || "true" : this.options.off || "false",
+        widget_width - 40,
+        y + H * 0.7,
+      )
+    }
+  }
+}