@comfyorg/comfyui-frontend-types 1.26.11 → 1.27.1

package/index.d.ts

@@ -599,6 +599,16 @@ declare class ChangeTracker {
     private static graphDiff;
 }
 
+/**
+ * Widget for displaying charts and data visualizations
+ * This is a widget that only has a Vue widgets implementation
+ */
+declare class ChartWidget extends BaseWidget<IChartWidget> implements IChartWidget {
+    type: "chart";
+    drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+    onClick(_options: WidgetEventOptions): void;
+}
+
 declare type ClassList = string | string[] | Record<string, boolean>;
 
 /**
@@ -639,6 +649,16 @@ declare interface ColorOption {
     groupcolor: string;
 }
 
+/**
+ * Widget for displaying a color picker
+ * This is a widget that only has a Vue widgets implementation
+ */
+declare class ColorWidget extends BaseWidget<IColorWidget> implements IColorWidget {
+    type: "color";
+    drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+    onClick(_options: WidgetEventOptions): void;
+}
+
 declare class ComboWidget extends BaseSteppedWidget<IStringComboWidget | IComboWidget> implements IComboWidget {
     #private;
     type: "combo";
@@ -998,9 +1018,9 @@ export declare class ComfyApp {
       * @deprecated Use useExecutionStore().executingNodeProgress instead
       */
      get progress(): {
-         max: number;
-         value: number;
          node: string | number;
+         value: number;
+         max: number;
          prompt_id: string;
      } | null;
      /**
@@ -1820,9 +1840,6 @@ export declare class ComfyApp {
     }
 
     declare enum EaseFunction {
-        LINEAR = "linear",
-        EASE_IN_QUAD = "easeInQuad",
-        EASE_OUT_QUAD = "easeOutQuad",
         EASE_IN_OUT_QUAD = "easeInOutQuad"
     }
 
@@ -1983,6 +2000,16 @@ export declare class ComfyApp {
 
     export { ExtensionsResponse }
 
+    /**
+     * Widget for handling file uploads
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class FileUploadWidget extends BaseWidget<IFileUploadWidget> implements IFileUploadWidget {
+        type: "fileupload";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     declare interface FindFreeSlotOptions {
         /** Slots matching these types will be ignored.  Default: [] */
         typesNotAccepted?: ISlotType[];
@@ -2066,6 +2093,16 @@ export declare class ComfyApp {
         reconnected: never;
     }
 
+    /**
+     * Widget for displaying image galleries
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class GalleriaWidget extends BaseWidget<IGalleriaWidget> implements IGalleriaWidget {
+        type: "galleria";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     /** Internal; simplifies type definitions. */
     declare type GraphOrSubgraph = LGraph | Subgraph;
 
@@ -2229,6 +2266,12 @@ export declare class ComfyApp {
         canvasY: number;
     }
 
+    /** Chart widget for displaying data visualizations */
+    declare interface IChartWidget extends IBaseWidget<object, 'chart'> {
+        type: 'chart';
+        value: object;
+    }
+
     declare interface ICloseable {
         close(): void;
     }
@@ -2241,6 +2284,12 @@ export declare class ComfyApp {
         getColorOption(): ColorOption | null;
     }
 
+    /** Color picker widget for selecting colors */
+    declare interface IColorWidget extends IBaseWidget<string, 'color'> {
+        type: 'color';
+        value: string;
+    }
+
     /** A combo-box widget (dropdown, select, etc) */
     declare interface IComboWidget extends IBaseWidget<string | number, 'combo', RequiredProps<IWidgetOptions<ComboWidgetValues>, 'values'>> {
         type: 'combo';
@@ -2378,15 +2427,40 @@ export declare class ComfyApp {
         lineWidth?: number;
     }
 
+    /** File upload widget for selecting and uploading files */
+    declare interface IFileUploadWidget extends IBaseWidget<string, 'fileupload'> {
+        type: 'fileupload';
+        value: string;
+        label?: string;
+    }
+
     declare interface IFoundSlot extends IInputOrOutput {
         slot: number;
         link_pos: Point;
     }
 
+    /** Gallery widget for displaying multiple images */
+    declare interface IGalleriaWidget extends IBaseWidget<string[], 'galleria'> {
+        type: 'galleria';
+        value: string[];
+    }
+
     declare interface IGraphGroupFlags extends Record<string, unknown> {
         pinned?: true;
     }
 
+    /** Image comparison widget for comparing two images side by side */
+    declare interface IImageCompareWidget extends IBaseWidget<string[], 'imagecompare'> {
+        type: 'imagecompare';
+        value: string[];
+    }
+
+    /** Image display widget */
+    declare interface IImageWidget extends IBaseWidget<string, 'image'> {
+        type: 'image';
+        value: string;
+    }
+
     declare interface IInputOrOutput {
         input?: INodeInputSlot | null;
         output?: INodeOutputSlot | null;
@@ -2398,12 +2472,34 @@ export declare class ComfyApp {
         options: IWidgetKnobOptions;
     }
 
+    /**
+     * Widget for comparing two images side by side
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class ImageCompareWidget extends BaseWidget<IImageCompareWidget> implements IImageCompareWidget {
+        type: "imagecompare";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
+    /** Markdown widget for displaying formatted text */
+    declare interface IMarkdownWidget extends IBaseWidget<string, 'markdown'> {
+        type: 'markdown';
+        value: string;
+    }
+
     declare interface IMouseOverData {
         inputId?: number;
         outputId?: number;
         overWidget?: IBaseWidget;
     }
 
+    /** Multi-select widget for selecting multiple options */
+    declare interface IMultiSelectWidget extends IBaseWidget<string[], 'multiselect'> {
+        type: 'multiselect';
+        value: string[];
+    }
+
     declare interface INodeFlags {
         skip_repeated_outputs?: boolean;
         allow_interaction?: boolean;
@@ -2563,6 +2659,12 @@ export declare class ComfyApp {
         unpin(): void;
     }
 
+    /** Select button widget for selecting from a group of buttons */
+    declare interface ISelectButtonWidget extends IBaseWidget<string, 'selectbutton', RequiredProps<IWidgetOptions<string[]>, 'values'>> {
+        type: 'selectbutton';
+        value: string;
+    }
+
     declare type ISerialisableNodeInput = Omit<INodeInputSlot, 'boundingRect' | 'widget'> & {
         widget?: {
             name: string;
@@ -2695,6 +2797,7 @@ export declare class ComfyApp {
 
     declare interface ISubgraphInput extends INodeInputSlot {
         _listenerController?: AbortController;
+        _subgraphSlot: SubgraphInput;
     }
 
     /**
@@ -2706,6 +2809,18 @@ export declare class ComfyApp {
         getIoNodeOnPos?(x: number, y: number): SubgraphInputNode | SubgraphOutputNode | undefined;
     }
 
+    /** Textarea widget for multi-line text input */
+    declare interface ITextareaWidget extends IBaseWidget<string, 'textarea'> {
+        type: 'textarea';
+        value: string;
+    }
+
+    /** Tree select widget for hierarchical selection */
+    declare interface ITreeSelectWidget extends IBaseWidget<string | string[], 'treeselect'> {
+        type: 'treeselect';
+        value: string | string[];
+    }
+
     /**
      * A widget for a node.
      * All types are based on IBaseWidget - additions can be made there or directly on individual types.
@@ -2714,7 +2829,7 @@ export declare class ComfyApp {
      * Recommend declaration merging any properties that use IWidget (e.g. {@link LGraphNode.widgets}) with a new type alias.
      * @see ICustomWidget
      */
-    declare type IWidget = IBooleanWidget | INumericWidget | IStringWidget | IComboWidget | IStringComboWidget | ICustomWidget | ISliderWidget | IButtonWidget | IKnobWidget;
+    declare type IWidget = IBooleanWidget | INumericWidget | IStringWidget | IComboWidget | IStringComboWidget | ICustomWidget | ISliderWidget | IButtonWidget | IKnobWidget | IFileUploadWidget | IColorWidget | IMarkdownWidget | IImageWidget | ITreeSelectWidget | IMultiSelectWidget | IChartWidget | IGalleriaWidget | IImageCompareWidget | ISelectButtonWidget | ITextareaWidget;
 
     declare interface IWidgetKnobOptions extends IWidgetOptions<number[]> {
         min: number;
@@ -3465,6 +3580,8 @@ export declare class ComfyApp {
         SELECTED_NODE?: LGraphNode;
         /** @deprecated Panels */
         NODEPANEL_IS_OPEN?: boolean;
+        /** Link rendering adapter for litegraph-to-canvas integration */
+        linkRenderer: LitegraphLinkAdapter | null;
         /** If true, enable drag zoom. Ctrl+Shift+Drag Up/Down: zoom canvas. */
         dragZoomEnabled: boolean;
         getMenuOptions?(): IContextMenuValue<string>[];
@@ -3804,6 +3921,11 @@ export declare class ComfyApp {
          */
         drawSnapGuide(ctx: CanvasRenderingContext2D, item: Positionable, shape?: RenderShape): void;
         drawConnections(ctx: CanvasRenderingContext2D): void;
+        /**
+         * Build LinkRenderContext from canvas properties
+         * Helper method for using LitegraphLinkAdapter
+         */
+        private buildLinkRenderContext;
         /**
          * draws a link between two points
          * @param ctx Canvas 2D rendering context
@@ -3828,16 +3950,6 @@ export declare class ComfyApp {
             /** Whether this is a floating link segment */
             disabled?: boolean;
         }): void;
-        /**
-         * Finds a point along a spline represented by a to b, with spline endpoint directions dictacted by start_dir and end_dir.
-         * @param a Start point
-         * @param b End point
-         * @param t Time: distance between points (e.g 0.25 is 25% along the line)
-         * @param start_dir Spline start direction
-         * @param end_dir Spline end direction
-         * @returns The point at {@link t} distance along the spline a-b.
-         */
-        computeConnectionPoint(a: ReadOnlyPoint, b: ReadOnlyPoint, t: number, start_dir: LinkDirection, end_dir: LinkDirection): Point;
         drawExecutionOrder(ctx: CanvasRenderingContext2D): void;
         /**
          * draws the widgets stored inside a node
@@ -4143,6 +4255,8 @@ export declare class ComfyApp {
         properties_info: INodePropertyInfo[];
         flags: INodeFlags;
         widgets?: IBaseWidget[];
+        /** Property manager for this node */
+        changeTracker: LGraphNodeProperties;
         /**
          * The amount of space available for widgets to grow into.
          * @see {@link layoutWidgets}
@@ -4929,6 +5043,29 @@ export declare class ComfyApp {
         resizeEdgeSize?: number;
     }
 
+    /**
+     * Manages node properties with optional change tracking and instrumentation.
+     */
+    declare class LGraphNodeProperties {
+        #private;
+        /** The node this property manager belongs to */
+        node: LGraphNode;
+        constructor(node: LGraphNode);
+        /**
+         * Checks if a property is being tracked
+         */
+        isTracked(path: string): boolean;
+        /**
+         * Gets the list of tracked properties
+         */
+        getTrackedProperties(): string[];
+        /**
+         * Custom toJSON method for JSON.stringify
+         * Returns undefined to exclude from serialization since we only use defaults
+         */
+        toJSON(): any;
+    }
+
     declare interface LGraphState {
         lastGroupId: number;
         lastNodeId: number;
@@ -5149,6 +5286,28 @@ export declare class ComfyApp {
         removeFloatingLink(link: LLink): void;
     }
 
+    declare interface LinkRenderContext {
+        renderMode: LinkRenderType;
+        connectionWidth: number;
+        renderBorder: boolean;
+        lowQuality: boolean;
+        highQualityRender: boolean;
+        scale: number;
+        linkMarkerShape: LinkMarkerShape;
+        renderConnectionArrows: boolean;
+        highlightedLinks: Set<string | number>;
+        defaultLinkColor: CanvasColour;
+        linkTypeColors: Record<string, CanvasColour>;
+        disabledPattern?: CanvasPattern | null;
+    }
+
+    declare interface LinkRenderOptions {
+        color?: CanvasColour;
+        flow?: boolean;
+        skipBorder?: boolean;
+        disabled?: boolean;
+    }
+
     /** The path calculation that links follow */
     declare enum LinkRenderType {
         HIDDEN_LINK = -1,
@@ -5228,6 +5387,22 @@ export declare class ComfyApp {
         WIDGET_TEXT_COLOR: string;
         WIDGET_SECONDARY_TEXT_COLOR: string;
         WIDGET_DISABLED_TEXT_COLOR: string;
+        /**
+         * Vue node dimensions configuration for the contract between LiteGraph and Vue components.
+         * These values ensure both systems can independently calculate node, slot, and widget positions
+         * to place them in identical locations.
+         */
+        COMFY_VUE_NODE_DIMENSIONS: {
+            readonly spacing: {
+                readonly BETWEEN_SLOTS_AND_BODY: 8;
+                readonly BETWEEN_WIDGETS: 8;
+            };
+            readonly components: {
+                readonly HEADER_HEIGHT: 34;
+                readonly SLOT_HEIGHT: 24;
+                readonly STANDARD_WIDGET_HEIGHT: 30;
+            };
+        };
         LINK_COLOR: string;
         EVENT_LINK_COLOR: string;
         CONNECTING_LINK_COLOR: string;
@@ -5438,6 +5613,17 @@ export declare class ComfyApp {
          * @default true
          */
         saveViewportWithGraph: boolean;
+        /**
+         * Enable Vue nodes mode for rendering and positioning.
+         * When true:
+         * - Nodes will calculate slot positions using Vue component dimensions
+         * - LiteGraph will skip rendering node bodies entirely
+         * - Vue components will handle all node rendering
+         * - LiteGraph continues to render connections, links, and graph background
+         * This should be set by the frontend when the Vue nodes feature is enabled.
+         * @default false
+         */
+        vueNodesMode: boolean;
         LGraph: typeof LGraph;
         LLink: typeof LLink;
         LGraphNode: typeof LGraphNode;
@@ -5530,6 +5716,72 @@ export declare class ComfyApp {
         extendClass(target: any, origin: any): void;
     }
 
+    declare class LitegraphLinkAdapter {
+        private graph;
+        private pathRenderer;
+        enableLayoutStoreWrites: boolean;
+        constructor(graph: LGraph);
+        /**
+         * Render a single link with all necessary data properly fetched
+         * Populates link.path for hit detection
+         */
+        renderLink(ctx: CanvasRenderingContext2D, link: LLink, context: LinkRenderContext, options?: LinkRenderOptions): void;
+        /**
+         * Convert litegraph link data to pure render format
+         */
+        private convertToLinkRenderData;
+        /**
+         * Convert LinkDirection enum to Direction string
+         */
+        private convertDirection;
+        /**
+         * Convert LinkRenderContext to PathRenderContext
+         */
+        private convertToPathRenderContext;
+        /**
+         * Convert LinkRenderType to RenderMode
+         */
+        private convertRenderMode;
+        /**
+         * Convert LinkMarkerShape to ArrowShape
+         */
+        private convertArrowShape;
+        /**
+         * Convert color map to ensure all values are strings
+         */
+        private convertColorMap;
+        /**
+         * Apply spline offset to a point, mimicking original #addSplineOffset behavior
+         * Critically: does nothing for CENTER/NONE directions (no case for them)
+         */
+        private applySplineOffset;
+        /**
+         * Direct rendering method compatible with LGraphCanvas
+         * Converts data and delegates to pure renderer
+         */
+        renderLinkDirect(ctx: CanvasRenderingContext2D, a: ReadOnlyPoint, b: ReadOnlyPoint, link: LLink | null, skip_border: boolean, flow: number | boolean | null, color: CanvasColour | null, start_dir: LinkDirection, end_dir: LinkDirection, context: LinkRenderContext, extras?: {
+            reroute?: Reroute;
+            startControl?: ReadOnlyPoint;
+            endControl?: ReadOnlyPoint;
+            num_sublines?: number;
+            disabled?: boolean;
+        }): void;
+        /**
+         * Render a link being dragged from a slot to mouse position
+         * Used during link creation/reconnection
+         */
+        renderDraggingLink(ctx: CanvasRenderingContext2D, fromNode: LGraphNode | null, fromSlot: INodeOutputSlot | INodeInputSlot, fromSlotIndex: number, toPosition: ReadOnlyPoint, context: LinkRenderContext, options?: {
+            fromInput?: boolean;
+            color?: CanvasColour;
+            disabled?: boolean;
+        }): void;
+        /**
+         * Calculate bounding box for a link
+         * Includes padding for line width and control points
+         */
+        private calculateLinkBounds;
+    }
+
     declare class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
         #private;
         static _drawDebug: boolean;
@@ -5692,6 +5944,16 @@ export declare class ComfyApp {
 
     export { LogsRawResponse }
 
+    /**
+     * Widget for displaying markdown formatted text
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class MarkdownWidget extends BaseWidget<IMarkdownWidget> implements IMarkdownWidget {
+        type: "markdown";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     declare type MenuCommandGroup = {
         /**
          * The path to the menu group.
@@ -5807,6 +6069,16 @@ export declare class ComfyApp {
         disconnect(): boolean;
     }
 
+    /**
+     * Widget for selecting multiple options
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class MultiSelectWidget extends BaseWidget<IMultiSelectWidget> implements IMultiSelectWidget {
+        type: "multiselect";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     /** {@link Omit} all properties that evaluate to `never`. */
     declare type NeverNever<T> = {
         [K in keyof T as T[K] extends never ? never : K]: T[K];
@@ -6463,6 +6735,16 @@ export declare class ComfyApp {
         subgraphInput: SubgraphIO;
     }
 
+    /**
+     * Widget for selecting from a group of buttons
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class SelectButtonWidget extends BaseWidget<ISelectButtonWidget> implements ISelectButtonWidget {
+        type: "selectbutton";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     /**
      * An object that implements custom pre-serialization logic via {@link Serialisable.asSerialisable}.
      */
@@ -6598,10 +6880,6 @@ export declare class ComfyApp {
 
     /** @see LinkDirection */
     declare enum SlotDirection {
-        Up = 1,
-        Right = 4,
-        Down = 2,
-        Left = 3
     }
 
     /** @see RenderShape */
@@ -7044,6 +7322,16 @@ export declare class ComfyApp {
 
     export { TerminalSize }
 
+    /**
+     * Widget for multi-line text input
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class TextareaWidget extends BaseWidget<ITextareaWidget> implements ITextareaWidget {
+        type: "textarea";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     declare class TextWidget extends BaseWidget<IStringWidget> implements IStringWidget {
         constructor(widget: IStringWidget, node: LGraphNode);
         /**
@@ -7209,6 +7497,16 @@ export declare class ComfyApp {
         connectToRerouteInput(): void;
     }
 
+    /**
+     * Widget for hierarchical tree selection
+     * This is a widget that only has a Vue widgets implementation
+     */
+    declare class TreeSelectWidget extends BaseWidget<ITreeSelectWidget> implements ITreeSelectWidget {
+        type: "treeselect";
+        drawWidget(ctx: CanvasRenderingContext2D, options: DrawWidgetOptions): void;
+        onClick(_options: WidgetEventOptions): void;
+    }
+
     /**
      * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
      * Override linkedWidgets[]
@@ -7341,6 +7639,16 @@ export declare class ComfyApp {
         string: TextWidget;
         text: TextWidget;
         custom: LegacyWidget;
+        fileupload: FileUploadWidget;
+        color: ColorWidget;
+        markdown: MarkdownWidget;
+        treeselect: TreeSelectWidget;
+        multiselect: MultiSelectWidget;
+        chart: ChartWidget;
+        galleria: GalleriaWidget;
+        imagecompare: ImageCompareWidget;
+        selectbutton: SelectButtonWidget;
+        textarea: TextareaWidget;
         [key: string]: BaseWidget;
     };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend-types",
-  "version": "1.26.11",
+  "version": "1.27.1",
   "types": "./index.d.ts",
   "files": [
     "index.d.ts"