@codebolt/litegraph 0.0.1

package/dist/widgets/BaseWidget.d.ts

@@ -0,0 +1,125 @@
+import { Point } from '../interfaces';
+import { CanvasPointer, LGraphCanvas, LGraphNode, Size } from '../litegraph';
+import { CanvasPointerEvent } from '../types/events';
+import { IBaseWidget } from '../types/widgets';
+export interface DrawWidgetOptions {
+    /** The width of the node where this widget will be displayed. */
+    width: number;
+    /** Synonym for "low quality". */
+    showText?: boolean;
+}
+export interface DrawTruncatingTextOptions extends DrawWidgetOptions {
+    /** The canvas context to draw the text on. */
+    ctx: CanvasRenderingContext2D;
+    /** The amount of padding to add to the left of the text. */
+    leftPadding?: number;
+    /** The amount of padding to add to the right of the text. */
+    rightPadding?: number;
+}
+export interface WidgetEventOptions {
+    e: CanvasPointerEvent;
+    node: LGraphNode;
+    canvas: LGraphCanvas;
+}
+export declare abstract class BaseWidget<TWidget extends IBaseWidget = IBaseWidget> implements IBaseWidget {
+    #private;
+    /** From node edge to widget edge */
+    static margin: number;
+    /** From widget edge to tip of arrow button */
+    static arrowMargin: number;
+    /** Arrow button width */
+    static arrowWidth: number;
+    /** Absolute minimum display width of widget values */
+    static minValueWidth: number;
+    /** Minimum gap between label and value */
+    static labelValueGap: number;
+    computedHeight?: number;
+    serialize?: boolean;
+    computeLayoutSize?(node: LGraphNode): {
+        minHeight: number;
+        maxHeight?: number;
+        minWidth: number;
+        maxWidth?: number;
+    };
+    /** The node that this widget belongs to. */
+    get node(): LGraphNode;
+    linkedWidgets?: IBaseWidget[];
+    name: string;
+    options: TWidget["options"];
+    label?: string;
+    type: TWidget["type"];
+    y: number;
+    last_y?: number;
+    width?: number;
+    disabled?: boolean;
+    computedDisabled?: boolean;
+    hidden?: boolean;
+    advanced?: boolean;
+    tooltip?: string;
+    element?: HTMLElement;
+    callback?(value: any, canvas?: LGraphCanvas, node?: LGraphNode, pos?: Point, e?: CanvasPointerEvent): void;
+    mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean;
+    computeSize?(width?: number): Size;
+    onPointerDown?(pointer: CanvasPointer, node: LGraphNode, canvas: LGraphCanvas): boolean;
+    get value(): TWidget["value"];
+    set value(value: TWidget["value"]);
+    constructor(widget: TWidget & {
+        node: LGraphNode;
+    });
+    constructor(widget: TWidget, node: LGraphNode);
+    get outline_color(): string;
+    get background_color(): string;
+    get height(): number;
+    get text_color(): string;
+    get secondary_text_color(): string;
+    get disabledTextColor(): string;
+    get displayName(): string;
+    get _displayValue(): string;
+    get labelBaseline(): number;
+    /**
+     * Draws the widget
+     * @param ctx The canvas context
+     * @param options The options for drawing the widget
+     * @remarks Not naming this `draw` as `draw` conflicts with the `draw` method in
+     * custom widgets.
+     */
+    abstract drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+    /**
+     * Draws the standard widget shape - elongated capsule. The path of the widget shape is not
+     * cleared, and may be used for further drawing.
+     * @param ctx The canvas context
+     * @param options The options for drawing the widget
+     * @remarks Leaves {@link ctx} dirty.
+     */
+    protected drawWidgetShape(ctx: CanvasRenderingContext2D, { width, showText }: DrawWidgetOptions): void;
+    /**
+     * A shared routine for drawing a label and value as text, truncated
+     * if they exceed the available width.
+     */
+    protected drawTruncatingText({ ctx, width, leftPadding, rightPadding, }: DrawTruncatingTextOptions): void;
+    /**
+     * Handles the click event for the widget
+     * @param options The options for handling the click event
+     */
+    abstract onClick(options: WidgetEventOptions): void;
+    /**
+     * Handles the drag event for the widget
+     * @param options The options for handling the drag event
+     */
+    onDrag?(options: WidgetEventOptions): void;
+    /**
+     * Sets the value of the widget
+     * @param value The value to set
+     * @param options The options for setting the value
+     */
+    setValue(value: TWidget["value"], { e, node, canvas }: WidgetEventOptions): void;
+    /**
+     * Clones the widget.
+     * @param node The node that will own the cloned widget.
+     * @returns A new widget with the same properties as the original
+     * @remarks Subclasses with custom constructors must override this method.
+     *
+     * Correctly and safely typing this is currently not possible (practical?) in TypeScript 5.8.
+     */
+    createCopyForNode(node: LGraphNode): this;
+}

package/dist/widgets/BooleanWidget.d.ts

@@ -0,0 +1,9 @@
+import { IBooleanWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions, WidgetEventOptions } from './BaseWidget';
+export declare class BooleanWidget extends BaseWidget<IBooleanWidget> implements IBooleanWidget {
+    type: "toggle";
+    drawWidget(ctx: CanvasRenderingContext2D, { width, showText, }: DrawWidgetOptions): void;
+    drawLabel(ctx: CanvasRenderingContext2D, x: number): void;
+    drawValue(ctx: CanvasRenderingContext2D, x: number): void;
+    onClick(options: WidgetEventOptions): void;
+}

package/dist/widgets/ButtonWidget.d.ts

@@ -0,0 +1,16 @@
+import { LGraphNode } from '../LGraphNode';
+import { IButtonWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions, WidgetEventOptions } from './BaseWidget';
+export declare class ButtonWidget extends BaseWidget<IButtonWidget> implements IButtonWidget {
+    type: "button";
+    clicked: boolean;
+    constructor(widget: IButtonWidget, node: LGraphNode);
+    /**
+     * Draws the widget
+     * @param ctx The canvas context
+     * @param options The options for drawing the widget
+     */
+    drawWidget(ctx: CanvasRenderingContext2D, { width, showText, }: DrawWidgetOptions): void;
+    drawLabel(ctx: CanvasRenderingContext2D, x: number): void;
+    onClick({ e, node, canvas }: WidgetEventOptions): void;
+}

package/dist/widgets/ComboWidget.d.ts

@@ -0,0 +1,17 @@
+import { WidgetEventOptions } from './BaseWidget';
+import { IComboWidget, IStringComboWidget } from '../types/widgets';
+import { BaseSteppedWidget } from './BaseSteppedWidget';
+export declare class ComboWidget extends BaseSteppedWidget<IStringComboWidget | IComboWidget> implements IComboWidget {
+    #private;
+    type: "combo";
+    get _displayValue(): string;
+    /**
+     * Returns `true` if the current value is not the last value in the list.
+     * Handles edge case where the value is both the first and last item in the list.
+     */
+    canIncrement(): boolean;
+    canDecrement(): boolean;
+    incrementValue(options: WidgetEventOptions): void;
+    decrementValue(options: WidgetEventOptions): void;
+    onClick({ e, node, canvas }: WidgetEventOptions): void;
+}

package/dist/widgets/KnobWidget.d.ts

@@ -0,0 +1,20 @@
+import { IKnobWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions, WidgetEventOptions } from './BaseWidget';
+export declare class KnobWidget extends BaseWidget<IKnobWidget> implements IKnobWidget {
+    type: "knob";
+    /**
+     * Compute the layout size of the widget.
+     * @returns The layout size of the widget.
+     */
+    computeLayoutSize(): {
+        minHeight: number;
+        maxHeight?: number;
+        minWidth: number;
+        maxWidth?: number;
+    };
+    get height(): number;
+    drawWidget(ctx: CanvasRenderingContext2D, { width, showText, }: DrawWidgetOptions): void;
+    onClick(): void;
+    current_drag_offset: number;
+    onDrag(options: WidgetEventOptions): void;
+}

package/dist/widgets/LegacyWidget.d.ts

@@ -0,0 +1,14 @@
+import { LGraphNode } from '../LGraphNode';
+import { IBaseWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions } from './BaseWidget';
+/**
+ * Wraps a legacy POJO custom widget, so that all widgets may be called via the same internal interface.
+ *
+ * Support will eventually be removed.
+ * @remarks Expect this class to undergo breaking changes without warning.
+ */
+export declare class LegacyWidget<TWidget extends IBaseWidget = IBaseWidget> extends BaseWidget<TWidget> implements IBaseWidget {
+    draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, widget_width: number, y: number, H: number, lowQuality?: boolean): void;
+    drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+    onClick(): void;
+}

package/dist/widgets/NumberWidget.d.ts

@@ -0,0 +1,18 @@
+import { WidgetEventOptions } from './BaseWidget';
+import { INumericWidget } from '../types/widgets';
+import { BaseSteppedWidget } from './BaseSteppedWidget';
+export declare class NumberWidget extends BaseSteppedWidget<INumericWidget> implements INumericWidget {
+    type: "number";
+    get _displayValue(): string;
+    canIncrement(): boolean;
+    canDecrement(): boolean;
+    incrementValue(options: WidgetEventOptions): void;
+    decrementValue(options: WidgetEventOptions): void;
+    setValue(value: number, options: WidgetEventOptions): void;
+    onClick({ e, node, canvas }: WidgetEventOptions): void;
+    /**
+     * Handles drag events for the number widget
+     * @param options The options for handling the drag event
+     */
+    onDrag({ e, node, canvas }: WidgetEventOptions): void;
+}

package/dist/widgets/SliderWidget.d.ts

@@ -0,0 +1,20 @@
+import { ISliderWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions, WidgetEventOptions } from './BaseWidget';
+export declare class SliderWidget extends BaseWidget<ISliderWidget> implements ISliderWidget {
+    type: "slider";
+    marker?: number;
+    /**
+     * Draws the widget
+     * @param ctx The canvas context
+     * @param options The options for drawing the widget
+     */
+    drawWidget(ctx: CanvasRenderingContext2D, { width, showText, }: DrawWidgetOptions): void;
+    /**
+     * Handles click events for the slider widget
+     */
+    onClick(options: WidgetEventOptions): void;
+    /**
+     * Handles drag events for the slider widget
+     */
+    onDrag(options: WidgetEventOptions): false | undefined;
+}

package/dist/widgets/TextWidget.d.ts

@@ -0,0 +1,13 @@
+import { LGraphNode } from '../LGraphNode';
+import { IStringWidget } from '../types/widgets';
+import { BaseWidget, DrawWidgetOptions, WidgetEventOptions } from './BaseWidget';
+export declare class TextWidget extends BaseWidget<IStringWidget> implements IStringWidget {
+    constructor(widget: IStringWidget, node: LGraphNode);
+    /**
+     * Draws the widget
+     * @param ctx The canvas context
+     * @param options The options for drawing the widget
+     */
+    drawWidget(ctx: CanvasRenderingContext2D, { width, showText, }: DrawWidgetOptions): void;
+    onClick({ e, node, canvas }: WidgetEventOptions): void;
+}

package/dist/widgets/widgetMap.d.ts

@@ -0,0 +1,50 @@
+import { LGraphNode } from '../LGraphNode';
+import { IBaseWidget, IBooleanWidget, IButtonWidget, IComboWidget, ICustomWidget, IKnobWidget, INumericWidget, ISliderWidget, IStringWidget, IWidget } from '../types/widgets';
+import { BaseWidget } from './BaseWidget';
+import { BooleanWidget } from './BooleanWidget';
+import { ButtonWidget } from './ButtonWidget';
+import { ComboWidget } from './ComboWidget';
+import { KnobWidget } from './KnobWidget';
+import { LegacyWidget } from './LegacyWidget';
+import { NumberWidget } from './NumberWidget';
+import { SliderWidget } from './SliderWidget';
+import { TextWidget } from './TextWidget';
+export type WidgetTypeMap = {
+    button: ButtonWidget;
+    toggle: BooleanWidget;
+    slider: SliderWidget;
+    knob: KnobWidget;
+    combo: ComboWidget;
+    number: NumberWidget;
+    string: TextWidget;
+    text: TextWidget;
+    custom: LegacyWidget;
+    [key: string]: BaseWidget;
+};
+/**
+ * Convert a widget POJO to a proper widget instance.
+ * @param widget The POJO to convert.
+ * @param node The node the widget belongs to.
+ * @param wrapLegacyWidgets Whether to wrap legacy widgets in a `LegacyWidget` instance.
+ * @returns A concrete widget instance.
+ */
+export declare function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(widget: TWidget, node: LGraphNode, wrapLegacyWidgets?: true): WidgetTypeMap[TWidget["type"]];
+export declare function toConcreteWidget<TWidget extends IWidget | IBaseWidget>(widget: TWidget, node: LGraphNode, wrapLegacyWidgets: false): WidgetTypeMap[TWidget["type"]] | undefined;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IButtonWidget}. */
+export declare function isButtonWidget(widget: IBaseWidget): widget is IButtonWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IBooleanWidget}. */
+export declare function isBooleanWidget(widget: IBaseWidget): widget is IBooleanWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ISliderWidget}. */
+export declare function isSliderWidget(widget: IBaseWidget): widget is ISliderWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IKnobWidget}. */
+export declare function isKnobWidget(widget: IBaseWidget): widget is IKnobWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IComboWidget}. */
+export declare function isComboWidget(widget: IBaseWidget): widget is IComboWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link INumericWidget}. */
+export declare function isNumberWidget(widget: IBaseWidget): widget is INumericWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link IStringWidget}. */
+export declare function isStringWidget(widget: IBaseWidget): widget is IStringWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ITextWidget}. */
+export declare function isTextWidget(widget: IBaseWidget): widget is IStringWidget;
+/** Type guard: Narrow **from {@link IBaseWidget}** to {@link ICustomWidget}. */
+export declare function isCustomWidget(widget: IBaseWidget): widget is ICustomWidget;

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@codebolt/litegraph",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
+  "keywords": ["graph", "node", "editor", "canvas", "blueprint", "visual-programming"],
+  "sideEffects": false,
+  "main": "./dist/litegraph.umd.js",
+  "module": "./dist/litegraph.es.js",
+  "types": "./dist/litegraph.d.ts",
+  "style": "./dist/css/litegraph.css",
+  "exports": {
+    ".": {
+      "types": "./dist/litegraph.d.ts",
+      "import": "./dist/litegraph.es.js",
+      "require": "./dist/litegraph.umd.js"
+    },
+    "./style.css": "./dist/css/litegraph.css",
+    "./dist/*": "./dist/*.d.ts"
+  },
+  "directories": {
+    "doc": "doc"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "watch": "vite build --watch",
+    "test": "vitest",
+    "lint": "eslint",
+    "lint:fix": "eslint --fix",
+    "lint:ci": "eslint src",
+    "format": "prettier --check './src/*.{js,ts,tsx,vue,mts}'",
+    "format:fix": "prettier --write './src/*.{js,ts,tsx,vue,mts}'",
+    "typecheck": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Comfy-Org/litegraph.js.git"
+  },
+  "author": "comfyorg",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "bugs": {
+    "url": "https://github.com/Comfy-Org/litegraph.js/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/Comfy-Org/litegraph.js",
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@stylistic/eslint-plugin": "^2.13.0",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": "^22.13.9",
+    "eslint": "^9.21.0",
+    "eslint-plugin-antfu": "^3.1.0",
+    "eslint-plugin-jsdoc": "^50.6.3",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-unicorn": "^57.0.0",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^15.12.0",
+    "husky": "^9.1.7",
+    "jsdom": "^25.0.1",
+    "lint-staged": "^15.2.10",
+    "prettier": "^3.3.3",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.1.3"
+  }
+}