diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index 7e172738f..2f6abe960 100644 --- a/src/LGraphCanvas.ts +++ b/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": diff --git a/src/LGraphNode.ts b/src/LGraphNode.ts index 8d9489cdc..acc6f8cc6 100644 --- a/src/LGraphNode.ts +++ b/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" diff --git a/src/widgets/BaseWidget.ts b/src/widgets/BaseWidget.ts index ee68045f8..62201311a 100644 --- a/src/widgets/BaseWidget.ts +++ b/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++ + } } diff --git a/src/widgets/BooleanWidget.ts b/src/widgets/BooleanWidget.ts index d4a17ba80..c7d1e2992 100644 --- a/src/widgets/BooleanWidget.ts +++ b/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) + } }