From e9eb7660de0258f900b981cfb1aac495254bc334 Mon Sep 17 00:00:00 2001 From: huchenlei Date: Fri, 5 Jul 2024 14:07:46 -0400 Subject: [PATCH 1/4] Make necessary type def changes for TS repo --- src/litegraph.d.ts | 61 +++++++++++++++++++++++++++++----------------- 1 file changed, 39 insertions(+), 22 deletions(-) diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts index 8dd8a51a1..fb791a976 100755 --- a/src/litegraph.d.ts +++ b/src/litegraph.d.ts @@ -52,6 +52,9 @@ export type WidgetCallback = ( ) => void; export interface IWidget { + // linked widgets, e.g. seed+seedControl + linkedWidgets: IWidget[]; + name: string | null; value: TValue; options?: TOptions; @@ -144,6 +147,13 @@ export type ContextMenuEventListener = ( ) => boolean | void; export const LiteGraph: { + uuid: Symbol; + + DEFAULT_GROUP_FONT_SIZE: any; + overlapBounding(visible_area: any, _bounding: any): unknown; + release_link_on_empty_shows_menu: boolean; + alt_drag_do_clone_nodes: boolean; + GRID_SHAPE: number; VERSION: number; CANVAS_GRID_SIZE: number; @@ -299,7 +309,7 @@ export const LiteGraph: { * @method getNodeTypesCategories * @param {String} filter only nodes with ctor.filter equal can be shown * @return {Array} array with all the names of the categories - */ + */ getNodeTypesCategories(filter: string): string[]; /** debug purposes: reloads all the js scripts that matches a wildcard */ @@ -348,6 +358,7 @@ export declare class LGraph { static supported_types: string[]; static STATUS_STOPPED: 1; static STATUS_RUNNING: 2; + extra: any; constructor(o?: object); @@ -407,7 +418,7 @@ export declare class LGraph { */ updateExecutionOrder(): void; /** This is more internal, it computes the executable nodes in order and returns it */ - computeExecutionOrder(only_onExecute: boolean, set_level: any): T; + computeExecutionOrder(only_onExecute: boolean, set_level?: any): T; /** * Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively. * It doesn't include the node itself @@ -535,7 +546,7 @@ export declare class LGraph { triggerInput(name: string, value: any): void; setCallback(name: string, func: (...args: any[]) => any): void; beforeChange(info?: LGraphNode): void; - afterChange(info?: LGraphNode): void; + afterChange(info?: LGraphNode): void; connectionChange(node: LGraphNode): void; /** returns if the graph is in live mode */ isLive(): boolean; @@ -543,7 +554,7 @@ export declare class LGraph { clearTriggeredSlots(): void; /* Called when something visually changed (not the graph!) */ change(): void; - setDirtyCanvas(fg: boolean, bg: boolean): void; + setDirtyCanvas(fg: boolean, bg?: boolean): void; /** Destroys a link */ removeLink(link_id: number): void; /** Creates a Object containing all the info about this graph, it can be serialized */ @@ -593,6 +604,11 @@ export type SerializedLGraphNode = { /** https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#lgraphnode */ export declare class LGraphNode { + onResize?: Function; + + // Used in group node + setInnerNodes(nodes: LGraphNode[]); + static title_color: string; static title: string; static type: null | string; @@ -643,6 +659,8 @@ export declare class LGraphNode { | typeof LiteGraph.NEVER | typeof LiteGraph.ALWAYS; + widgets: IWidget[]; + /** If set to true widgets do not start after the slots */ widgets_up: boolean; /** widgets start at y distance from the top of the node */ @@ -698,8 +716,6 @@ export declare class LGraphNode { getInputInfo( slot: number ): { link: number; name: string; type: string | 0 } | null; - /** Returns the link info in the connection of an input slot */ - getInputLink(slot: number): LLink | null; /** returns the node connected in the input slot */ getInputNode(slot: number): LGraphNode | null; /** returns the value of an input with this name, otherwise checks if there is a property with that name */ @@ -731,8 +747,6 @@ export declare class LGraphNode { * @param link_id in case you want to trigger and specific output link in a slot */ clearTriggeredSlot(slot: number, link_id?: number): void; - /** changes node size and triggers callback */ - setSize(size: Vector2): void; /** * add a new property to this node * @param name @@ -805,10 +819,9 @@ export declare class LGraphNode { direction: string; links: null; }; - /** computes the minimum size of a node according to its inputs and output slots */ - computeSize(minHeight?: Vector2): Vector2; - /** returns all the info available about a property of this node */ - getPropertyInfo(property: string): object; + setValue(v: any): void; + /** computes the size of a node according to its inputs and output slots */ + computeSize(): [number, number]; /** * https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#node-widgets * @return created widget @@ -825,12 +838,9 @@ export declare class LGraphNode { /** * returns the bounding of the object, used for rendering purposes - * @method getBounding - * @param out [optional] a place to store the output, to free garbage - * @param compute_outer [optional] set to true to include the shadow and connection points in the bounding calculation - * @return the bounding box in format of [topleft_cornerx, topleft_cornery, width, height] + * @return [x, y, width, height] */ - getBounding(out?: Vector4, compute_outer?: boolean): Vector4; + getBounding(): Vector4; /** checks if a point is inside the shape of a node */ isPointInside( x: number, @@ -1013,7 +1023,7 @@ export declare class LGraphNode { onBeforeConnectInput?( inputIndex: number ): number; - + /** a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info or output_info ) */ onConnectionsChange( type: number, @@ -1021,7 +1031,7 @@ export declare class LGraphNode { isConnected: boolean, link: LLink, ioSlot: (INodeOutputSlot | INodeInputSlot) - ): void; + ): void; /** * if returns false, will abort the `LGraphNode.setProperty` @@ -1038,6 +1048,7 @@ export declare class LGraphNode { } export type LGraphNodeConstructor = { + nodeData: any; // Used by group node. new (): T; }; @@ -1143,7 +1154,7 @@ export declare class LGraphCanvas { ); static active_canvas: HTMLCanvasElement; - + allow_dragcanvas: boolean; allow_dragnodes: boolean; /** allow to control widgets, buttons, collapse, etc */ @@ -1210,6 +1221,8 @@ export declare class LGraphCanvas { node_over: LGraphNode | null; node_title_color: string; node_widget: [LGraphNode, IWidget] | null; + last_mouse_dragging: boolean; + /** Called by `LGraphCanvas.drawBackCanvas` */ onDrawBackground: | ((ctx: CanvasRenderingContext2D, visibleArea: Vector4) => void) @@ -1269,6 +1282,12 @@ export declare class LGraphCanvas { visible_links: LLink[]; visible_nodes: LGraphNode[]; zoom_modify_alpha: boolean; + //mouse in canvas coordinates, where 0,0 is the top-left corner of the blue rectangle + mouse: Vector2; + //mouse in graph coordinates, where 0,0 is the top-left corner of the blue rectangle + graph_mouse: Vector2; + + pointer_is_down?: boolean; /** clears all the data inside */ clear(): void; @@ -1494,5 +1513,3 @@ declare class ContextMenu { getTopMenu(): void; getFirstEvent(): void; } - -declare function clamp(v: number, min: number, max: number): number; From a16c346b9c17e1ec2520826f837d37157834681e Mon Sep 17 00:00:00 2001 From: huchenlei Date: Fri, 5 Jul 2024 14:28:31 -0400 Subject: [PATCH 2/4] Revert unwanted changes --- src/litegraph.d.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts index fb791a976..8c05e9616 100755 --- a/src/litegraph.d.ts +++ b/src/litegraph.d.ts @@ -53,7 +53,7 @@ export type WidgetCallback = ( export interface IWidget { // linked widgets, e.g. seed+seedControl - linkedWidgets: IWidget[]; + linkedWidgets: IWidget[]; name: string | null; value: TValue; @@ -147,8 +147,6 @@ export type ContextMenuEventListener = ( ) => boolean | void; export const LiteGraph: { - uuid: Symbol; - DEFAULT_GROUP_FONT_SIZE: any; overlapBounding(visible_area: any, _bounding: any): unknown; release_link_on_empty_shows_menu: boolean; @@ -358,7 +356,7 @@ export declare class LGraph { static supported_types: string[]; static STATUS_STOPPED: 1; static STATUS_RUNNING: 2; - extra: any; + extra: any; constructor(o?: object); @@ -716,6 +714,8 @@ export declare class LGraphNode { getInputInfo( slot: number ): { link: number; name: string; type: string | 0 } | null; + /** Returns the link info in the connection of an input slot */ + getInputLink(slot: number): LLink | null; /** returns the node connected in the input slot */ getInputNode(slot: number): LGraphNode | null; /** returns the value of an input with this name, otherwise checks if there is a property with that name */ @@ -747,6 +747,8 @@ export declare class LGraphNode { * @param link_id in case you want to trigger and specific output link in a slot */ clearTriggeredSlot(slot: number, link_id?: number): void; + /** changes node size and triggers callback */ + setSize(size: Vector2): void; /** * add a new property to this node * @param name @@ -819,9 +821,10 @@ export declare class LGraphNode { direction: string; links: null; }; - setValue(v: any): void; /** computes the size of a node according to its inputs and output slots */ - computeSize(): [number, number]; + computeSize(minHeight?: Vector2): Vector2; + /** returns all the info available about a property of this node */ + getPropertyInfo(property: string): object; /** * https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#node-widgets * @return created widget @@ -838,9 +841,12 @@ export declare class LGraphNode { /** * returns the bounding of the object, used for rendering purposes - * @return [x, y, width, height] + * @method getBounding + * @param out [optional] a place to store the output, to free garbage + * @param compute_outer [optional] set to true to include the shadow and connection points in the bounding calculation + * @return the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]* */ - getBounding(): Vector4; + getBounding(out?: Vector4, compute_outer?: boolean): Vector4; /** checks if a point is inside the shape of a node */ isPointInside( x: number, @@ -1513,3 +1519,5 @@ declare class ContextMenu { getTopMenu(): void; getFirstEvent(): void; } + +declare function clamp(v: number, min: number, max: number): number; From a3cad92fa55ba5ba39cd0326e66f9bb7e1ce7d6f Mon Sep 17 00:00:00 2001 From: huchenlei Date: Fri, 5 Jul 2024 15:40:14 -0400 Subject: [PATCH 3/4] Revert more accidental changes --- src/litegraph.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/litegraph.d.ts b/src/litegraph.d.ts index 8c05e9616..7f7cfc2d5 100755 --- a/src/litegraph.d.ts +++ b/src/litegraph.d.ts @@ -821,7 +821,7 @@ export declare class LGraphNode { direction: string; links: null; }; - /** computes the size of a node according to its inputs and output slots */ + /** computes the minimum size of a node according to its inputs and output slots */ computeSize(minHeight?: Vector2): Vector2; /** returns all the info available about a property of this node */ getPropertyInfo(property: string): object; @@ -844,7 +844,7 @@ export declare class LGraphNode { * @method getBounding * @param out [optional] a place to store the output, to free garbage * @param compute_outer [optional] set to true to include the shadow and connection points in the bounding calculation - * @return the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]* + * @return the bounding box in format of [topleft_cornerx, topleft_cornery, width, height] */ getBounding(out?: Vector4, compute_outer?: boolean): Vector4; /** checks if a point is inside the shape of a node */ From 2b809fad9413ee0fdafc58f0f277c6884f669708 Mon Sep 17 00:00:00 2001 From: huchenlei Date: Fri, 5 Jul 2024 15:41:24 -0400 Subject: [PATCH 4/4] Update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b29e246ee..fd905fff0 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@comfyorg/litegraph", - "version": "0.7.17", + "version": "0.7.18", "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.", "main": "build/litegraph.core.js", "types": "src/litegraph.d.ts",