Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-08 17:10:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up JSDoc (#327)

Browse Source 
* Convert comments to JSDoc

* Clean JSdoc

* nit

* Clean up all JSDoc & ESLint warnings

Disables max-len for now
Removes redundant JSDoc tags (empty, same name, wrong name, etc)
This commit is contained in:
filtered
2024-11-22 02:11:53 +11:00
committed by GitHub
parent 0263704c6c
commit f79133659f
13 changed files with 359 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
eslint.config.js
View File

@@ -66,8 +66,14 @@ export default tseslint.config(
// "@typescript-eslint/no-unsafe-function-type": "off",
"@stylistic/max-len": [
"warn",
{ code: 100, comments: 130, ignoreStrings: true },
"off",
{
code: 100,
comments: 130,
ignoreStrings: true,
ignoreTemplateLiterals: true,
ignoreComments: true,
},
],
// "@stylistic/multiline-comment-style": ["warn", "starred-block"],

4
src/CanvasPointer.ts
View File

@@ -12,8 +12,7 @@ import { dist2 } from "./measure"
* - {@link onDrag}
* - {@link onDragEnd}
* - {@link finally}
*
* @seealso
* @see
* - {@link LGraphCanvas.processMouseDown}
* - {@link LGraphCanvas.processMouseMove}
* - {@link LGraphCanvas.processMouseUp}
@@ -222,7 +221,6 @@ export class CanvasPointer {
/**
* Checks whether the pointer is currently past the max click drift threshold.
* @param e The latest pointer event
* @returns `true` if the latest pointer event is past the the click drift threshold
*/
#isDoubleClick(): boolean {

24
src/ContextMenu.ts
View File

@@ -7,22 +7,16 @@ interface ContextMenuDivElement extends HTMLDivElement {
closing_timer?: number
}
// TODO: Replace this pattern with something more modern.
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export interface ContextMenu {
constructor: new (...args: ConstructorParameters<typeof ContextMenu>) => ContextMenu
}
/**
* ContextMenu from LiteGUI
*
* @class ContextMenu
* @constructor
* @param {Array} values (allows object { title: "Nice text", callback: function ... })
* @param {Object} options [optional] Some options:\
* - title: title to show on top of the menu
* - callback: function to call when an option is clicked, it receives the item information
* - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
* - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export class ContextMenu {
options?: IContextMenuOptions
parentMenu?: ContextMenu
@@ -30,8 +24,16 @@ export class ContextMenu {
current_submenu?: ContextMenu
lock?: boolean
// TODO: Interface for values requires functionality change - currently accepts
// an array of strings, functions, objects, nulls, or undefined.
/**
* @todo Interface for values requires functionality change - currently accepts
* an array of strings, functions, objects, nulls, or undefined.
* @param values (allows object { title: "Nice text", callback: function ... })
* @param options [optional] Some options:\
* - title: title to show on top of the menu
* - callback: function to call when an option is clicked, it receives the item information
* - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
* - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
*/
constructor(values: (IContextMenuValue | string)[], options: IContextMenuOptions) {
options ||= {}
this.options = options

110
src/LGraph.ts
View File

@@ -66,9 +66,9 @@ export interface LGraphConfig {
/**
* LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.
* supported callbacks:
+ onNodeAdded: when a new node is added to the graph
+ onNodeRemoved: when a node inside this graph is removed
+ onNodeConnectionChange: some connection has changed in the graph (connected or disconnected)
* + onNodeAdded: when a new node is added to the graph
* + onNodeRemoved: when a node inside this graph is removed
* + onNodeConnectionChange: some connection has changed in the graph (connected or disconnected)
*/
export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
static serialisedSchemaVersion = 1 as const
@@ -308,7 +308,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Attach Canvas to this graph
* @param {GraphCanvas} graph_canvas
*/
attachCanvas(graphcanvas: LGraphCanvas): void {
if (graphcanvas.constructor != LGraphCanvas)
@@ -324,7 +323,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Detach Canvas from this graph
* @param {GraphCanvas} graph_canvas
*/
detachCanvas(graphcanvas: LGraphCanvas): void {
if (!this.list_of_graphcanvas) return
@@ -338,7 +336,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Starts running this graph every interval milliseconds.
* @param {number} interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate
* @param interval amount of milliseconds between executions, if 0 then it renders to the monitor refresh rate
*/
start(interval?: number): void {
if (this.status == LGraph.STATUS_RUNNING) return
@@ -403,9 +401,9 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Run N steps (cycles) of the graph
* @param {number} num number of steps to run, default is 1
* @param {Boolean} do_not_catch_errors [optional] if you want to try/catch errors
* @param {number} limit max number of nodes to execute (used to execute from start to a node)
* @param num number of steps to run, default is 1
* @param do_not_catch_errors [optional] if you want to try/catch errors
* @param limit max number of nodes to execute (used to execute from start to a node)
*/
runStep(num: number, do_not_catch_errors: boolean, limit?: number): void {
num = num || 1
@@ -524,8 +522,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
// is a starting node
S.push(node)
if (set_level) node._level = 1
} // num of input links
else {
} else {
// num of input links
if (set_level) node._level = 0
remaining_links[node.id] = num
}
@@ -625,7 +623,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns all the nodes that could affect this one (ancestors) by crawling all the inputs recursively.
* It doesn't include the node itself
* @return {Array} an array with all the LGraphNodes that affect this node, in order of execution
* @returns an array with all the LGraphNodes that affect this node, in order of execution
*/
getAncestors(node: LGraphNode): LGraphNode[] {
const ancestors: LGraphNode[] = []
@@ -697,7 +695,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the amount of time the graph has been running in milliseconds
* @return {number} number of milliseconds the graph has been running
* @returns number of milliseconds the graph has been running
*/
getTime(): number {
return this.globaltime
@@ -706,7 +704,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the amount of time accumulated using the fixedtime_lapse var.
* This is used in context where the time increments should be constant
* @return {number} number of milliseconds the graph has been running
* @returns number of milliseconds the graph has been running
*/
getFixedTime(): number {
return this.fixedtime
@@ -716,7 +714,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
* Returns the amount of time it took to compute the latest iteration.
* Take into account that this number could be not correct
* if the nodes are using graphical actions
* @return {number} number of milliseconds it took the last cycle
* @returns number of milliseconds it took the last cycle
*/
getElapsedTime(): number {
return this.elapsed_time
@@ -724,8 +722,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Sends an event to all the nodes, useful to trigger stuff
* @param {String} eventname the name of the event (function to be called)
* @param {Array} params parameters in array format
* @param eventname the name of the event (function to be called)
* @param params parameters in array format
*/
sendEventToAllNodes(
eventname: string,
@@ -783,7 +781,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Adds a new node instance to this graph
* @param {LGraphNode} node the instance of the node
* @param node the instance of the node
*/
add(
node: LGraphNode | LGraphGroup,
@@ -861,7 +859,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Removes a node from the graph
* @param {LGraphNode} node the instance of the node
* @param node the instance of the node
*/
remove(node: LGraphNode | LGraphGroup): void {
// LEGACY: This was changed from constructor === LiteGraph.LGraphGroup
@@ -935,7 +933,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns a node by its id.
* @param {Number} id
*/
getNodeById(id: NodeId): LGraphNode | null {
return id != null
@@ -945,8 +942,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns a list of nodes that matches a class
* @param {Class} classObject the class itself (not an string)
* @return {Array} a list with all the nodes of this type
* @param classObject the class itself (not an string)
* @returns a list with all the nodes of this type
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
findNodesByClass(classObject: Function, result?: LGraphNode[]): LGraphNode[] {
@@ -961,8 +958,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns a list of nodes that matches a type
* @param {String} type the name of the node type
* @return {Array} a list with all the nodes of this type
* @param type the name of the node type
* @returns a list with all the nodes of this type
*/
findNodesByType(type: string, result: LGraphNode[]): LGraphNode[] {
const matchType = type.toLowerCase()
@@ -977,8 +974,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the first node that matches a name in its title
* @param {String} name the name of the node to search
* @return {Node} the node or null
* @param title the name of the node to search
* @returns the node or null
*/
findNodeByTitle(title: string): LGraphNode | null {
for (let i = 0, l = this._nodes.length; i < l; ++i) {
@@ -990,8 +987,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns a list of nodes that matches a name
* @param {String} name the name of the node to search
* @return {Array} a list with all the nodes with this name
* @param title the name of the node to search
* @returns a list with all the nodes with this name
*/
findNodesByTitle(title: string): LGraphNode[] {
const result: LGraphNode[] = []
@@ -1004,10 +1001,10 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the top-most node in this position of the canvas
* @param {number} x the x coordinate in canvas space
* @param {number} y the y coordinate in canvas space
* @param {Array} nodeList a list with all the nodes to search from, by default is all the nodes in the graph
* @return {LGraphNode} the node at this position or null
* @param x the x coordinate in canvas space
* @param y the y coordinate in canvas space
* @param nodeList a list with all the nodes to search from, by default is all the nodes in the graph
* @returns the node at this position or null
*/
getNodeOnPos(
x: number,
@@ -1027,7 +1024,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
* Returns the top-most group in that position
* @param x The x coordinate in canvas space
* @param y The y coordinate in canvas space
* @return The group or null
* @returns The group or null
*/
getGroupOnPos(x: number, y: number): LGraphGroup | undefined {
return this._groups.toReversed().find(g => g.isPointInside(x, y))
@@ -1037,7 +1034,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
* Returns the top-most group with a titlebar in the provided position.
* @param x The x coordinate in canvas space
* @param y The y coordinate in canvas space
* @return The group or null
* @returns The group or null
*/
getGroupTitlebarOnPos(x: number, y: number): LGraphGroup | undefined {
return this._groups.toReversed().find(g => g.isPointInTitlebar(x, y))
@@ -1065,7 +1062,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
*
* When {@link config}.{@link LGraphConfig.alwaysSnapToGrid alwaysSnapToGrid} is enabled
* and the grid size is falsy, a default of 1 is used.
* @param items The items to snap to the grid
* @param items The items to be snapped to the grid
* @todo Currently only snaps nodes.
*/
snapToGrid(items: Set<Positionable>): void {
@@ -1139,9 +1136,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Tell this graph it has a global graph input of this type
* @param {String} name
* @param {String} type
* @param {*} value [optional]
*/
addInput(name: string, type: string, value?: unknown): void {
const input = this.inputs[name]
@@ -1159,8 +1153,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Assign a data to the global graph input
* @param {String} name
* @param {*} data
*/
setInputData(name: string, data: unknown): void {
const input = this.inputs[name]
@@ -1170,8 +1162,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the current value of a global graph input
* @param {String} name
* @return {*} the data
*/
getInputData(name: string): unknown {
const input = this.inputs[name]
@@ -1182,8 +1172,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Changes the name of a global graph input
* @param {String} old_name
* @param {String} new_name
*/
renameInput(old_name: string, name: string): boolean | undefined {
if (name == old_name) return
@@ -1205,8 +1193,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Changes the type of a global graph input
* @param {String} name
* @param {String} type
*/
changeInputType(name: string, type: string): boolean | undefined {
if (!this.inputs[name]) return false
@@ -1225,8 +1211,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Removes a global graph input
* @param {String} name
* @param {String} type
*/
removeInput(name: string): boolean {
if (!this.inputs[name]) return false
@@ -1241,9 +1225,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Creates a global graph output
* @param {String} name
* @param {String} type
* @param {*} value
*/
addOutput(name: string, type: string, value: unknown): void {
this.outputs[name] = { name: name, type: type, value: value }
@@ -1256,8 +1237,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Assign a data to the global output
* @param {String} name
* @param {String} value
*/
setOutputData(name: string, value: unknown): void {
const output = this.outputs[name]
@@ -1267,8 +1246,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Returns the current value of a global graph output
* @param {String} name
* @return {*} the data
*/
getOutputData(name: string): unknown {
const output = this.outputs[name]
@@ -1278,8 +1255,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Renames a global graph output
* @param {String} old_name
* @param {String} new_name
*/
renameOutput(old_name: string, name: string): boolean | undefined {
if (!this.outputs[old_name]) return false
@@ -1300,8 +1275,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Changes the type of a global graph output
* @param {String} name
* @param {String} type
*/
changeOutputType(name: string, type: string): boolean | undefined {
if (!this.outputs[name]) return false
@@ -1320,7 +1293,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Removes a global graph output
* @param {String} name
*/
removeOutput(name: string): boolean {
if (!this.outputs[name]) return false
@@ -1400,9 +1372,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Configures a reroute on the graph where ID is already known (probably deserialisation).
* Creates the object if it does not exist.
* @param id Reroute ID
* @param pos Position in graph space
* @param linkIds IDs of links that pass through this reroute
* @param serialisedReroute See {@link SerialisableReroute}
*/
setReroute({ id, parentId, pos, linkIds }: SerialisableReroute): Reroute {
id ??= ++this.state.lastRerouteId
@@ -1417,9 +1387,8 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Creates a new reroute and adds it to the graph.
* @param pos Position in graph space
* @param links The links that will use this reroute (e.g. if from an output with multiple outputs, and all will use it)
* @param afterRerouteId If set, this reroute will be shown after the specified ID.
* Otherwise, the reroute will be added as the last on the link.
* @param before The existing link segment (reroute, link) that will be after this reroute,
* going from the node output to input.
* @returns The newly created reroute - typically ignored.
*/
createReroute(pos: Point, before: LinkSegment): Reroute {
@@ -1467,7 +1436,6 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Destroys a link
* @param {Number} link_id
*/
removeLink(link_id: LinkId): void {
const link = this._links.get(link_id)
@@ -1482,8 +1450,7 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Creates a Object containing all the info about this graph, it can be serialized
* @deprecated Use {@link asSerialisable}, which returns the newer schema version.
*
* @return {Object} value of the node
* @returns value of the node
*/
serialize(option?: { sortNodes: boolean }): ISerialisedGraph {
const { config, state, groups, nodes, reroutes, extra } = this.asSerialisable(option)
@@ -1549,8 +1516,9 @@ export class LGraph implements LinkNetwork, Serialisable<SerialisableGraph> {
/**
* Configure a graph from a JSON string
* @param {String} str configure a graph from a JSON string
* @param {Boolean} returns if there was any error parsing
* @param data The deserialised object to configure this graph from
* @param keep_old If `true`, the graph will not be cleared prior to
* adding the configuration.
*/
configure(
data: ISerialisedGraph | SerialisableGraph,

144
src/LGraphCanvas.ts
View File

@@ -175,13 +175,9 @@ interface ClipboardPasteResult {
/**
* This class is in charge of rendering one graph inside a canvas. And provides all the interaction required.
* Valid callbacks are: onNodeSelected, onNodeDeselected, onShowNodePanel, onNodeDblClicked
*
* @param {HTMLCanvas} canvas the canvas where you want to render (it accepts a selector in string format or the canvas element itself)
* @param {LGraph} graph [optional]
* @param {Object} options [optional] { skip_rendering, autoresize, viewport }
*/
export class LGraphCanvas {
/* Interaction */
// Optimised buffers used during rendering
static #temp = new Float32Array(4)
static #temp_vec2 = new Float32Array(2)
static #tmp_area = new Float32Array(4)
@@ -510,7 +506,7 @@ export class LGraphCanvas {
this.options = options
// if(graph === undefined)
// throw ("No graph assigned");
// throw ("No graph assigned");
this.background_image = LGraphCanvas.DEFAULT_BACKGROUND_IMAGE
this.ds = new DragAndScale()
@@ -644,8 +640,8 @@ export class LGraphCanvas {
/**
* @deprecated Functionality moved to {@link getBoundaryNodes}. The new function returns null on failure, instead of an object with all null properties.
* Determines the furthest nodes in each direction
* @param {Dictionary<LGraphNode>} nodes the nodes to from which boundary nodes will be extracted
* @return {{left: LGraphNode, top: LGraphNode, right: LGraphNode, bottom: LGraphNode}}
* @param nodes the nodes to from which boundary nodes will be extracted
* @returns
*/
static getBoundaryNodes(
nodes: LGraphNode[] | Dictionary<LGraphNode>,
@@ -663,9 +659,9 @@ export class LGraphCanvas {
/**
* @deprecated Functionality moved to {@link alignNodes}. The new function does not set dirty canvas.
* @param {Dictionary<LGraphNode>} nodes a list of nodes
* @param {"top"|"bottom"|"left"|"right"} direction Direction to align the nodes
* @param {LGraphNode?} align_to Node to align to (if null, align to the furthest node in the given direction)
* @param nodes a list of nodes
* @param direction Direction to align the nodes
* @param align_to Node to align to (if null, align to the furthest node in the given direction)
*/
static alignNodes(
nodes: Dictionary<LGraphNode>,
@@ -1584,8 +1580,7 @@ export class LGraphCanvas {
/**
* assigns a graph, you can reassign graphs to the same canvas
*
* @param {LGraph} graph
* @param graph
*/
setGraph(graph: LGraph, skip_clear: boolean): void {
if (this.graph == graph) return
@@ -1606,9 +1601,7 @@ export class LGraphCanvas {
}
/**
* returns the top level graph (in case there are subgraphs open on the canvas)
*
* @return {LGraph} graph
* @returns the top level graph (in case there are subgraphs open on the canvas)
*/
getTopGraph(): LGraph {
return this._graph_stack.length
@@ -1617,8 +1610,7 @@ export class LGraphCanvas {
}
/**
* returns the visually active graph (in case there are more in the stack)
* @return {LGraph} the active graph
* @returns the visually active graph (in case there are more in the stack)
*/
getCurrentGraph(): LGraph {
return this.graph
@@ -1644,7 +1636,6 @@ export class LGraphCanvas {
/**
* Sets the current HTML canvas element.
* Calls bindEvents to add input event listeners, and (re)creates the background canvas.
*
* @param canvas The canvas element to assign, or its HTML element ID. If null or undefined, the current reference is cleared.
* @param skip_events If true, events on the previous canvas will not be removed. Has no effect on the first invocation.
*/
@@ -1708,7 +1699,7 @@ export class LGraphCanvas {
/**
* binds mouse, keyboard, touch and drag events to the canvas
**/
*/
bindEvents(): void {
if (this._events_binded) {
console.warn("LGraphCanvas: events already binded")
@@ -1763,7 +1754,7 @@ export class LGraphCanvas {
/**
* unbinds mouse events from the canvas
**/
*/
unbindEvents(): void {
if (!this._events_binded) {
console.warn("LGraphCanvas: no events binded")
@@ -1804,7 +1795,7 @@ export class LGraphCanvas {
/**
* this function allows to render the canvas using WebGL instead of Canvas2D
* this is useful if you plant to render 3D objects inside your nodes, it uses litegl.js for webgl and canvas2DtoWebGL to emulate the Canvas2D calls in webGL
**/
*/
enableWebGL(): void {
// TODO: Delete or move all webgl to a module and never load it.
// @ts-expect-error
@@ -1836,7 +1827,6 @@ export class LGraphCanvas {
* Ensures the canvas will be redrawn on the next frame by setting the dirty flag(s).
* Without parameters, this function does nothing.
* @todo Impl. `setDirty()` or similar as shorthand to redraw everything.
*
* @param fgcanvas If true, marks the foreground canvas as dirty (nodes and anything drawn on top of them). Default: false
* @param bgcanvas If true, mark the background canvas as dirty (background, groups, links). Default: false
*/
@@ -1853,8 +1843,7 @@ export class LGraphCanvas {
/**
* Used to attach the canvas in a popup
*
* @return {window} returns the window where the canvas is attached (the DOM root node)
* @returns returns the window where the canvas is attached (the DOM root node)
*/
getCanvasWindow(): Window {
if (!this.canvas) return window
@@ -1952,8 +1941,8 @@ export class LGraphCanvas {
* Clears highlight and mouse-over information from nodes that should not have it.
*
* Intended to be called when the pointer moves away from a node.
* @param {LGraphNode} node The node that the mouse is now over
* @param {MouseEvent} e MouseEvent that is triggering this
* @param node The node that the mouse is now over
* @param e MouseEvent that is triggering this
*/
updateMouseOverNodes(node: LGraphNode, e: CanvasMouseEvent): void {
const nodes = this.graph._nodes
@@ -2266,8 +2255,8 @@ export class LGraphCanvas {
/**
* Processes a pointerdown event inside the bounds of a node. Part of {@link processMouseDown}.
* @param ctrlOrMeta Ctrl or meta key is pressed
* @param e The pointerdown event
* @param ctrlOrMeta Ctrl or meta key is pressed
* @param node The node to process a click event for
*/
#processNodeClick(
@@ -2734,7 +2723,7 @@ export class LGraphCanvas {
/**
* Called when a mouse move event has to be processed
**/
*/
processMouseMove(e: PointerEvent): void {
if (this.autoresize) this.resize()
@@ -3042,7 +3031,7 @@ export class LGraphCanvas {
/**
* Called when a mouse up event has to be processed
**/
*/
processMouseUp(e: PointerEvent): void {
// early exit for extra pointer
if (e.isPrimary === false) return
@@ -3219,7 +3208,7 @@ export class LGraphCanvas {
/**
* Called when a mouse wheel event has to be processed
**/
*/
processMouseWheel(e: WheelEvent): void {
if (!this.graph || !this.allow_dragcanvas) return
@@ -3247,7 +3236,7 @@ export class LGraphCanvas {
/**
* returns the INDEX if a position (in graph space) is on top of a node input slot
**/
*/
isOverNodeInput(
node: LGraphNode,
canvasx: number,
@@ -3296,7 +3285,7 @@ export class LGraphCanvas {
/**
* returns the INDEX if a position (in graph space) is on top of a node output slot
**/
*/
isOverNodeOutput(
node: LGraphNode,
canvasx: number,
@@ -3340,7 +3329,7 @@ export class LGraphCanvas {
/**
* process a key event
**/
*/
processKey(e: KeyboardEvent): boolean | null {
this.#shiftDown = e.shiftKey
if (!this.graph) return
@@ -3365,10 +3354,8 @@ export class LGraphCanvas {
this.node_panel?.close()
this.options_panel?.close()
block_default = true
}
// select all Control A
else if (e.keyCode == 65 && e.ctrlKey) {
} else if (e.keyCode == 65 && e.ctrlKey) {
// select all Control A
this.selectItems()
block_default = true
} else if (e.keyCode === 67 && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
@@ -3380,10 +3367,8 @@ export class LGraphCanvas {
} else if (e.keyCode === 86 && (e.metaKey || e.ctrlKey)) {
// paste
this.pasteFromClipboard(e.shiftKey)
}
// delete or backspace
else if (e.keyCode == 46 || e.keyCode == 8) {
} else if (e.keyCode == 46 || e.keyCode == 8) {
// delete or backspace
// @ts-expect-error
if (e.target.localName != "input" && e.target.localName != "textarea") {
this.deleteSelected()
@@ -3643,7 +3628,7 @@ export class LGraphCanvas {
/**
* process a item drop event on top the canvas
**/
*/
processDrop(e: DragEvent): boolean {
e.preventDefault()
this.adjustMouseEvent(e)
@@ -3909,7 +3894,7 @@ export class LGraphCanvas {
/**
* selects several nodes (or adds them to the current selection)
* @deprecated See {@link LGraphCanvas.selectItems}
**/
*/
selectNodes(nodes?: LGraphNode[], add_to_current_selection?: boolean): void {
this.selectItems(nodes, add_to_current_selection)
}
@@ -3967,7 +3952,6 @@ export class LGraphCanvas {
/**
* Deletes all selected items from the graph.
*
* @todo Refactor deletion task to LGraph. Selection is a canvas property, delete is a graph action.
*/
deleteSelected(): void {
@@ -4002,14 +3986,14 @@ export class LGraphCanvas {
/**
* deletes all nodes in the current selection from the graph
* @deprecated See {@link LGraphCanvas.deleteSelected}
**/
*/
deleteSelectedNodes(): void {
this.deleteSelected()
}
/**
* centers the camera on a given node
**/
*/
centerOnNode(node: LGraphNode): void {
const dpi = window?.devicePixelRatio || 1
this.ds.offset[0] =
@@ -4025,7 +4009,7 @@ export class LGraphCanvas {
/**
* adds some useful properties to a mouse event, like the position in graph coordinates
**/
*/
adjustMouseEvent<T extends MouseEvent>(
e: T & Partial<ICanvasPosition & IDeltaPosition>,
): asserts e is T & CanvasMouseEvent {
@@ -4057,7 +4041,7 @@ export class LGraphCanvas {
/**
* changes the zoom level of the graph (default is 1), you can pass also a place used to pivot the zoom
**/
*/
setZoom(value: number, zooming_center: Point) {
this.ds.changeScale(value, zooming_center)
this.#dirty()
@@ -4065,7 +4049,7 @@ export class LGraphCanvas {
/**
* converts a coordinate from graph coordinates to canvas2D coordinates
**/
*/
convertOffsetToCanvas(pos: Point, out: Point): Point {
// @ts-expect-error Unused param
return this.ds.convertOffsetToCanvas(pos, out)
@@ -4073,7 +4057,7 @@ export class LGraphCanvas {
/**
* converts a coordinate from Canvas2D coordinates to graph space
**/
*/
convertCanvasToOffset(pos: Point, out?: Point): Point {
return this.ds.convertCanvasToOffset(pos, out)
}
@@ -4090,7 +4074,7 @@ export class LGraphCanvas {
/**
* brings a node to front (above all other nodes)
**/
*/
bringToFront(node: LGraphNode): void {
const i = this.graph._nodes.indexOf(node)
if (i == -1) return
@@ -4101,7 +4085,7 @@ export class LGraphCanvas {
/**
* sends a node to the back (below all other nodes)
**/
*/
sendToBack(node: LGraphNode): void {
const i = this.graph._nodes.indexOf(node)
if (i == -1) return
@@ -4114,7 +4098,7 @@ export class LGraphCanvas {
* Determines which nodes are visible and populates {@link out} with the results.
* @param nodes The list of nodes to check - if falsy, all nodes in the graph will be checked
* @param out Array to write visible nodes into - if falsy, a new array is created instead
* @returns {LGraphNode[]} Array passed ({@link out}), or a new array containing all visible nodes
* @returns Array passed ({@link out}), or a new array containing all visible nodes
*/
computeVisibleNodes(nodes?: LGraphNode[], out?: LGraphNode[]): LGraphNode[] {
const visible_nodes = out || []
@@ -4133,7 +4117,7 @@ export class LGraphCanvas {
/**
* renders the whole canvas content, by rendering in two separated canvas, one containing the background grid and the connections, and one containing the nodes)
**/
*/
draw(force_canvas?: boolean, force_bgcanvas?: boolean): void {
if (!this.canvas || this.canvas.width == 0 || this.canvas.height == 0) return
@@ -4166,7 +4150,7 @@ export class LGraphCanvas {
/**
* draws the front canvas (the one containing all the nodes)
**/
*/
drawFrontCanvas(): void {
this.dirty_canvas = false
@@ -4481,7 +4465,7 @@ export class LGraphCanvas {
/**
* draws some useful stats in the corner of the canvas
**/
*/
renderInfo(ctx: CanvasRenderingContext2D, x: number, y: number): void {
x = x || 10
y = y || this.canvas.offsetHeight - 80
@@ -4506,7 +4490,7 @@ export class LGraphCanvas {
/**
* draws the back canvas (the one containing the background and the connections)
**/
*/
drawBackCanvas(): void {
const canvas = this.bgcanvas
if (
@@ -4669,7 +4653,7 @@ export class LGraphCanvas {
/**
* draws the given node inside the canvas
**/
*/
drawNode(node: LGraphNode, ctx: CanvasRenderingContext2D): void {
this.current_node = node
@@ -5043,7 +5027,6 @@ export class LGraphCanvas {
* @param fgcolor Foreground colour - used for text
* @param bgcolor Background colour of the node
* @param selected Whether to render the node as selected. Likely to be removed in future, as current usage is simply the selected property of the node.
* @param mouse_over Deprecated
*/
drawNodeShape(
node: LGraphNode,
@@ -5330,15 +5313,6 @@ export class LGraphCanvas {
/**
* Draws the selection bounding of an area.
* @param {CanvasRenderingContext2D} ctx
* @param {Vector4} area
* @param {{
* shape: LiteGraph.Shape,
* title_height: number,
* title_mode: LiteGraph.TitleMode,
* fgcolor: string,
* padding: number,
* }} options
*/
drawSelectionBounding(
ctx: CanvasRenderingContext2D,
@@ -5417,7 +5391,7 @@ export class LGraphCanvas {
* item would land if dropped.
* @param ctx The 2D canvas context to draw on
* @param item The item to draw a snap guide for
* @param snapTo The grid size to snap to
* @param shape The shape of the snap guide to draw
* @todo Update to align snapping with boundingRect
* @todo Shapes
*/
@@ -5647,15 +5621,14 @@ export class LGraphCanvas {
/**
* draws a link between two points
* @param ctx Canvas 2D rendering context
* @param {vec2} a start pos
* @param {vec2} b end pos
* @param {Object} link the link object with all the link info
* @param {boolean} skip_border ignore the shadow of the link
* @param {boolean} flow show flow animation (for events)
* @param {string} color the color for the link
* @param {LinkDirection} start_dir the direction enum
* @param {LinkDirection} end_dir the direction enum
* @param {number} num_sublines number of sublines (useful to represent vec3 or rgb)
* @param a start pos
* @param b end pos
* @param link the link object with all the link info
* @param skip_border ignore the shadow of the link
* @param flow show flow animation (for events)
* @param color the color for the link
* @param start_dir the direction enum
* @param end_dir the direction enum
*/
renderLink(
ctx: CanvasRenderingContext2D,
@@ -6036,7 +6009,7 @@ export class LGraphCanvas {
/**
* draws the widgets stored inside a node
**/
*/
drawNodeWidgets(
node: LGraphNode,
posY: number,
@@ -6304,7 +6277,7 @@ export class LGraphCanvas {
/**
* draws every group area in the background
**/
*/
drawGroups(canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D): void {
if (!this.graph) return
@@ -6342,7 +6315,7 @@ export class LGraphCanvas {
/**
* resizes the canvas to a given size, if no size is passed, then it tries to fill the parentNode
* @todo Remove or rewrite
**/
*/
resize(width?: number, height?: number): void {
if (!width && !height) {
const parent = this.canvas.parentElement
@@ -6363,7 +6336,6 @@ export class LGraphCanvas {
/**
* Determines the furthest nodes in each direction for the currently selected nodes
* @return {{left: LGraphNode, top: LGraphNode, right: LGraphNode, bottom: LGraphNode}}
*/
boundaryNodesForSelection(): NullableProperties<IBoundaryNodes> {
return LGraphCanvas.getBoundaryNodes(this.selected_nodes)
@@ -7543,8 +7515,8 @@ export class LGraphCanvas {
} else if (options.event) {
offsetx += options.event.clientX
offsety += options.event.clientY
} // centered
else {
} else {
// centered
offsetx += this.canvas.width * 0.5
offsety += this.canvas.height * 0.5
}
@@ -8277,7 +8249,6 @@ export class LGraphCanvas {
/**
* Starts an animation to fit the view around the specified selection of nodes.
* @param bounds The bounds to animate the view to, defined by a rectangle.
* @param animationParameters Various parameters for the camera movement animation.
*/
animateToBounds(
bounds: ReadOnlyRect,
@@ -8357,5 +8328,6 @@ export type AnimationOptions = {
duration?: number
/** Relative target zoom level. 1 means the view is fit exactly on the bounding box. */
zoom?: number
/** The animation easing function (curve) */
easing?: EaseFunction
}

12
src/LGraphGroup.ts
View File

@@ -42,6 +42,7 @@ export class LGraphGroup implements Positionable, IPinnable {
LGraphGroup.minWidth,
LGraphGroup.minHeight,
])
_pos: Point = this._bounding.subarray(0, 2)
_size: Size = this._bounding.subarray(2, 4)
/** @deprecated See {@link _children} */
@@ -107,7 +108,7 @@ export class LGraphGroup implements Positionable, IPinnable {
/**
* Prevents the group being accidentally moved or resized by mouse interaction.
* Toggles pinned state if no value is provided.
**/
*/
pin(value?: boolean): void {
const newState = value === undefined ? !this.pinned : value
@@ -142,8 +143,8 @@ export class LGraphGroup implements Positionable, IPinnable {
/**
* Draws the group on the canvas
* @param {LGraphCanvas} graphCanvas
* @param {CanvasRenderingContext2D} ctx
* @param graphCanvas
* @param ctx
*/
draw(graphCanvas: LGraphCanvas, ctx: CanvasRenderingContext2D): void {
const { padding, resizeLength, defaultColour } = LGraphGroup
@@ -269,9 +270,8 @@ export class LGraphGroup implements Positionable, IPinnable {
/**
* Add nodes to the group and adjust the group's position and size accordingly
* @param {LGraphNode[]} nodes - The nodes to add to the group
* @param {number} [padding=10] - The padding around the group
* @returns {void}
* @param nodes The nodes to add to the group
* @param padding The padding around the group
*/
addNodes(nodes: LGraphNode[], padding: number = 10): void {
if (!this._nodes && nodes.length === 0) return

220
src/LGraphNode.ts
View File

@@ -96,8 +96,8 @@ flags object:
supported callbacks:
+ onAdded: when added to graph (warning: this is called BEFORE the node is configured when loading)
+ onRemoved: when removed from graph
+ onStart: when the graph starts playing
+ onStop: when the graph stops playing
+ onStart: when the graph starts playing
+ onStop: when the graph stops playing
+ onDrawForeground: render the inside widgets inside the node
+ onDrawBackground: render the background area inside the node (only in edit mode)
+ onMouseDown
@@ -126,14 +126,16 @@ supported callbacks:
+ getExtraMenuOptions: to add option to context menu
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export interface LGraphNode {
constructor: LGraphNodeConstructor
}
/**
* Base Class for all the node type classes
* @param {String} name a name for the node
* @param {string} name a name for the node
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
export class LGraphNode implements Positionable, IPinnable {
// Static properties used by dynamic child classes
static title?: string
@@ -515,8 +517,8 @@ export class LGraphNode implements Positionable, IPinnable {
} else {
this[j] = LiteGraph.cloneObject(info[j], this[j])
}
} // value
else {
} else {
// value
this[j] = info[j]
}
}
@@ -678,8 +680,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* sets the value of a property
* @param {String} name
* @param {*} value
* @param name
* @param value
*/
setProperty(name: string, value: TWidgetValue): void {
this.properties ||= {}
@@ -707,15 +709,15 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* sets the output data
* @param {number} slot
* @param {*} data
* @param slot
* @param data
*/
setOutputData(slot: number, data: unknown): void {
if (!this.outputs) return
// this maybe slow and a niche case
// if(slot && slot.constructor === String)
// slot = this.findOutputSlot(slot);
// slot = this.findOutputSlot(slot);
if (slot == -1 || slot >= this.outputs.length) return
const output_info = this.outputs[slot]
@@ -736,8 +738,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* sets the output data type, useful when you want to be able to overwrite the data type
* @param {number} slot
* @param {String} datatype
*/
setOutputDataType(slot: number, type: ISlotType): void {
if (!this.outputs) return
@@ -758,9 +758,9 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Retrieves the input data (data traveling through the connection) from one slot
* @param {number} slot
* @param {boolean} force_update if set to true it will force the connected node of this slot to output data into this link
* @return {*} data or if it is not connected returns undefined
* @param slot
* @param force_update if set to true it will force the connected node of this slot to output data into this link
* @returns data or if it is not connected returns undefined
*/
getInputData(slot: number, force_update?: boolean): unknown {
if (!this.inputs) return
@@ -789,8 +789,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Retrieves the input data type (in case this supports multiple input types)
* @param {number} slot
* @return {String} datatype in string format
* @param slot
* @returns datatype in string format
*/
getInputDataType(slot: number): ISlotType {
if (!this.inputs) return null
@@ -812,9 +812,9 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Retrieves the input data from one slot using its name instead of slot number
* @param {String} slot_name
* @param {boolean} force_update if set to true it will force the connected node of this slot to output data into this link
* @return {*} data or if it is not connected returns null
* @param slot_name
* @param force_update if set to true it will force the connected node of this slot to output data into this link
* @returns data or if it is not connected returns null
*/
getInputDataByName(slot_name: string, force_update: boolean): unknown {
const slot = this.findInputSlot(slot_name)
@@ -825,8 +825,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you if there is a connection in one input slot
* @param {number} slot
* @return {boolean}
* @param slot The 0-based index of the input to check
* @returns `true` if the input slot has a link ID (does not perform validation)
*/
isInputConnected(slot: number): boolean {
if (!this.inputs) return false
@@ -835,8 +835,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you info about an input connection (which node, type, etc)
* @param {number} slot
* @return {Object} object or null { link: id, name: string, type: string or 0 }
* @returns object or null { link: id, name: string, type: string or 0 }
*/
getInputInfo(slot: number): INodeInputSlot {
return !this.inputs || !(slot < this.inputs.length)
@@ -846,8 +845,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Returns the link info in the connection of an input slot
* @param {number} slot
* @return {LLink} object or null
* @returns object or null
*/
getInputLink(slot: number): LLink | null {
if (!this.inputs) return null
@@ -860,8 +858,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns the node connected in the input slot
* @param {number} slot
* @return {LGraphNode} node or null
* @returns node or null
*/
getInputNode(slot: number): LGraphNode {
if (!this.inputs) return null
@@ -878,8 +875,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns the value of an input with this name, otherwise checks if there is a property with that name
* @param {string} name
* @return {*} value
* @returns value
*/
getInputOrProperty(name: string): unknown {
if (!this.inputs || !this.inputs.length) {
@@ -898,8 +894,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you the last output data that went in that slot
* @param {number} slot
* @return {Object} object or null
* @returns object or null
*/
getOutputData(slot: number): unknown {
if (!this.outputs) return null
@@ -911,8 +906,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you info about an output connection (which node, type, etc)
* @param {number} slot
* @return {Object} object or null { name: string, type: string, links: [ ids of links in number ] }
* @returns object or null { name: string, type: string, links: [ ids of links in number ] }
*/
getOutputInfo(slot: number): INodeOutputSlot {
return !this.outputs || !(slot < this.outputs.length)
@@ -922,8 +916,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you if there is a connection in one output slot
* @param {number} slot
* @return {boolean}
*/
isOutputConnected(slot: number): boolean {
if (!this.outputs) return false
@@ -932,7 +924,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* tells you if there is any connection in the output slots
* @return {boolean}
*/
isAnyOutputConnected(): boolean {
if (!this.outputs) return false
@@ -947,8 +938,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* retrieves all the nodes connected to this output slot
* @param {number} slot
* @return {array}
*/
getOutputNodes(slot: number): LGraphNode[] {
if (!this.outputs || this.outputs.length == 0) return null
@@ -1039,8 +1028,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Triggers the node code execution, place a boolean/counter to mark the node as being executed
* @param {*} param
* @param {*} options
*/
doExecute(param?: unknown, options?: { action_call?: any }): void {
options = options || {}
@@ -1065,8 +1052,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Triggers an action, wrapped by logics to control execution flow
* @param {String} action name
* @param {*} param
* @param action name
*/
actionDo(
action: string,
@@ -1094,8 +1080,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Triggers an event in this node, this will trigger any output with the same name
* @param {String} event name ( "on_play", ... ) if action is equivalent to false then the event is send to all
* @param {*} param
* @param action name ( "on_play", ... ) if action is equivalent to false then the event is send to all
*/
trigger(
action: string,
@@ -1122,9 +1107,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Triggers a slot event in this node: cycle output slots and launch execute/action on connected nodes
* @param {Number} slot the index of the output slot
* @param {*} param
* @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot
* @param slot the index of the output slot
* @param link_id [optional] in case you want to trigger and specific output link in a slot
*/
triggerSlot(
slot: number,
@@ -1186,8 +1170,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* clears the trigger slot animation
* @param {Number} slot the index of the output slot
* @param {Number} link_id [optional] in case you want to trigger and specific output link in a slot
* @param slot the index of the output slot
* @param link_id [optional] in case you want to trigger and specific output link in a slot
*/
clearTriggeredSlot(slot: number, link_id: number): void {
if (!this.outputs) return
@@ -1214,7 +1198,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* changes node size and triggers callback
* @param {vec2} size
*/
setSize(size: Size): void {
this.size = size
@@ -1223,10 +1206,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add a new property to this node
* @param {string} name
* @param {*} default_value
* @param {string} type string defining the output type ("vec3","number",...)
* @param {Object} extra_info this can be used to have special properties of the property (like values, etc)
* @param type string defining the output type ("vec3","number",...)
* @param extra_info this can be used to have special properties of the property (like values, etc)
*/
addProperty(
name: string,
@@ -1253,9 +1234,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add a new output slot to use in this node
* @param {string} name
* @param {string} type string defining the output type ("vec3","number",...)
* @param {Object} extra_info this can be used to have special properties of an output (label, special color, position, etc)
* @param type string defining the output type ("vec3","number",...)
* @param extra_info this can be used to have special properties of an output (label, special color, position, etc)
*/
addOutput(
name?: string,
@@ -1283,7 +1263,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add a new output slot to use in this node
* @param {Array} array of triplets like [[name,type,extra_info],[...]]
* @param array of triplets like [[name,type,extra_info],[...]]
*/
addOutputs(array: [string, ISlotType, Record<string, unknown>][]): void {
for (let i = 0; i < array.length; ++i) {
@@ -1309,7 +1289,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* remove an existing output slot
* @param {number} slot
*/
removeOutput(slot: number): void {
this.disconnectOutput(slot)
@@ -1333,9 +1312,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add a new input slot to use in this node
* @param {string} name
* @param {string} type string defining the input type ("vec3","number",...), it its a generic one use 0
* @param {Object} extra_info this can be used to have special properties of an input (label, color, position, etc)
* @param type string defining the input type ("vec3","number",...), it its a generic one use 0
* @param extra_info this can be used to have special properties of an input (label, color, position, etc)
*/
addInput(name: string, type: ISlotType, extra_info?: object): INodeInputSlot {
type = type || 0
@@ -1359,7 +1337,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add several new input slots in this node
* @param {Array} array of triplets like [[name,type,extra_info],[...]]
* @param array of triplets like [[name,type,extra_info],[...]]
*/
addInputs(array: [string, ISlotType, Record<string, unknown>][]): void {
for (let i = 0; i < array.length; ++i) {
@@ -1385,7 +1363,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* remove an existing input slot
* @param {number} slot
*/
removeInput(slot: number): void {
this.disconnectInput(slot)
@@ -1405,10 +1382,9 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* add an special connection to this node (used for special kinds of graphs)
* @param {string} name
* @param {string} type string defining the input type ("vec3","number",...)
* @param {[x,y]} pos position of the connection inside the node
* @param {string} direction if is input or output
* @param type string defining the input type ("vec3","number",...)
* @param pos position of the connection inside the node
* @param direction if is input or output
*/
addConnection(name: string, type: string, pos: Point, direction: string) {
const o = {
@@ -1424,8 +1400,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* computes the minimum size of a node according to its inputs and output slots
* @param out
* @return the total size
* @returns the total size
*/
computeSize(out?: Size): Size {
const ctorSize = this.constructor.size
@@ -1522,9 +1497,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns all the info available about a property of this node.
*
* @param {String} property name of the property
* @return {Object} the object with all the available info
* @param property name of the property
* @returns the object with all the available info
*/
getPropertyInfo(property: string) {
let info = null
@@ -1560,13 +1534,12 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Defines a widget inside the node, it will be rendered on top of the node, you can control lots of properties
*
* @param {String} type the widget type (could be "number","string","combo"
* @param {String} name the text to show on the widget
* @param {String} value the default value
* @param {Function|String} callback function to call when it changes (optionally, it can be the name of the property to modify)
* @param {Object} options the object that contains special properties of this widget
* @return {Object} the created widget object
* @param type the widget type (could be "number","string","combo"
* @param name the text to show on the widget
* @param value the default value
* @param callback function to call when it changes (optionally, it can be the name of the property to modify)
* @param options the object that contains special properties of this widget
* @returns the created widget object
*/
addWidget(
type: string,
@@ -1666,7 +1639,7 @@ export class LGraphNode implements Positionable, IPinnable {
* @param out {Float32Array[4]?} [optional] a place to store the output, to free garbage
* @param includeExternal {boolean?} [optional] set to true to
* include the shadow and connection points in the bounding calculation
* @return {Float32Array[4]} the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
* @returns the bounding box in format of [topleft_cornerx, topleft_cornery, width, height]
*/
getBounding(out?: Rect, includeExternal?: boolean): Rect {
out ||= new Float32Array(4)
@@ -1702,9 +1675,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* checks if a point is inside the shape of a node
* @param {number} x
* @param {number} y
* @return {boolean}
*/
isPointInside(x: number, y: number): boolean {
return isInRect(x, y, this.boundingRect)
@@ -1802,7 +1772,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Returns the input slot with a given name (used for dynamic slots), -1 if not found
* @param name the name of the slot
* @param name the name of the slot to find
* @param returnObj if the obj itself wanted
* @returns the slot (-1 if not found)
*/
@@ -1821,9 +1791,9 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns the output slot with a given name (used for dynamic slots), -1 if not found
* @param {string} name the name of the slot
* @param {boolean} returnObj if the obj itself wanted
* @return {number | INodeOutputSlot} the slot (-1 if not found)
* @param name the name of the slot to find
* @param returnObj if the obj itself wanted
* @returns the slot (-1 if not found)
*/
findOutputSlot<TReturn extends false>(name: string, returnObj?: TReturn): number
findOutputSlot<TReturn extends true>(name: string, returnObj?: TReturn): INodeOutputSlot
@@ -1840,8 +1810,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Finds the first free input slot.
* @param {object} optsIn
* @return The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
* @param optsIn
* @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
*/
findInputSlotFree<TReturn extends false>(
optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
@@ -1855,8 +1825,8 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Finds the first free output slot.
* @param {object} optsIn
* @return The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
* @param optsIn
* @returns The index of the first matching slot, the slot itself if returnObj is true, or -1 if not found.
*/
findOutputSlotFree<TReturn extends false>(
optsIn?: FindFreeSlotOptions & { returnObj?: TReturn },
@@ -1871,7 +1841,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Finds the next free slot
* @param slots The slots to search, i.e. this.inputs or this.outputs
* @param options Options
*/
#findFreeSlot<TSlot extends INodeInputSlot | INodeOutputSlot>(
slots: TSlot[],
@@ -1956,11 +1925,11 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns the output (or input) slot with a given type, -1 if not found
* @param {boolean} input uise inputs instead of outputs
* @param {string} type the type of the slot
* @param {boolean} returnObj if the obj itself wanted
* @param {boolean} preferFreeSlot if we want a free slot (if not found, will return the first of the type anyway)
* @return {number_or_object} the slot (-1 if not found)
* @param input uise inputs instead of outputs
* @param type the type of the slot to find
* @param returnObj if the obj itself wanted
* @param preferFreeSlot if we want a free slot (if not found, will return the first of the type anyway)
* @returns the slot (-1 if not found)
*/
findSlotByType<TSlot extends true | false, TReturn extends false>(
input: TSlot,
@@ -2067,7 +2036,6 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Determines the slot index to connect to when attempting to connect by type.
*
* @param findInputs If true, searches for an input. Otherwise, an output.
* @param node The node at the other end of the connection.
* @param slotType The type of slot at the other end of the connection.
@@ -2127,10 +2095,10 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* connect this node output to the input of another node BY TYPE
* @param {number} slot (could be the number of the slot or the string with the name of the slot)
* @param {LGraphNode} target_node the target node
* @param {string} target_slotType the input slot type of the target node
* @return {Object} the link_info is created, otherwise null
* @param slot (could be the number of the slot or the string with the name of the slot)
* @param target_node the target node
* @param target_slotType the input slot type of the target node
* @returns the link_info is created, otherwise null
*/
connectByType(
slot: number | string,
@@ -2153,11 +2121,10 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* connect this node input to the output of another node BY TYPE
* @method connectByType
* @param {number | string} slot (could be the number of the slot or the string with the name of the slot)
* @param {LGraphNode} source_node the target node
* @param {string} source_slotType the output slot type of the target node
* @return {Object} the link_info is created, otherwise null
* @param slot (could be the number of the slot or the string with the name of the slot)
* @param source_node the target node
* @param source_slotType the output slot type of the target node
* @returns the link_info is created, otherwise null
*/
connectByTypeOutput(
slot: number | string,
@@ -2185,10 +2152,10 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Connect an output of this node to an input of another node
* @param {number | string} slot (could be the number of the slot or the string with the name of the slot)
* @param {LGraphNode} target_node the target node
* @param {number | string} target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)
* @return {Object} the link_info is created, otherwise null
* @param slot (could be the number of the slot or the string with the name of the slot)
* @param target_node the target node
* @param target_slot the input slot of the target node (could be the number of the slot or the string with the name of the slot, or -1 to connect a trigger)
* @returns the link_info is created, otherwise null
*/
connect(
slot: number | string,
@@ -2371,10 +2338,10 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* disconnect one output to an specific node
* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)
* @param {LGraphNode} target_node the target node to which this slot is connected [Optional,
* @param slot (could be the number of the slot or the string with the name of the slot)
* @param target_node the target node to which this slot is connected [Optional,
* if not target_node is specified all nodes will be disconnected]
* @return {boolean} if it was disconnected successfully
* @returns if it was disconnected successfully
*/
disconnectOutput(slot: string | number, target_node?: LGraphNode): boolean {
if (typeof slot === "string") {
@@ -2434,8 +2401,8 @@ export class LGraphNode implements Positionable, IPinnable {
break
}
}
} // all the links in this output slot
else {
} else {
// all the links in this output slot
for (let i = 0, l = output.links.length; i < l; i++) {
const link_id = output.links[i]
const link_info = graph._links.get(link_id)
@@ -2484,7 +2451,7 @@ export class LGraphNode implements Positionable, IPinnable {
* Disconnect one input
* @param slot Input slot index, or the name of the slot
* @param keepReroutes If `true`, reroutes will not be garbage collected.
* @return true if disconnected successfully or already disconnected, otherwise false
* @returns true if disconnected successfully or already disconnected, otherwise false
*/
disconnectInput(slot: number | string, keepReroutes?: boolean): boolean {
// Allow search by string
@@ -2555,11 +2522,11 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* returns the center of a connection point in canvas coords
* @param {boolean} is_input true if if a input slot, false if it is an output
* @param {number_or_string} slot (could be the number of the slot or the string with the name of the slot)
* @param {vec2} out [optional] a place to store the output, to free garbage
* @return {[x,y]} the position
**/
* @param is_input true if if a input slot, false if it is an output
* @param slot_number (could be the number of the slot or the string with the name of the slot)
* @param out [optional] a place to store the output, to free garbage
* @returns the position
*/
getConnectionPos(is_input: boolean, slot_number: number, out?: Point): Point {
out ||= new Float32Array(2)
@@ -2697,7 +2664,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Toggle node collapse (makes it smaller on the canvas)
**/
*/
collapse(force?: boolean): void {
if (!this.collapsible && !force) return
this.graph._version++
@@ -2729,7 +2696,7 @@ export class LGraphNode implements Positionable, IPinnable {
/**
* Prevents the node being accidentally moved or resized by mouse interaction.
* Toggles pinned state if no value is provided.
**/
*/
pin(v?: boolean): void {
this.graph._version++
this.flags.pinned = v === undefined
@@ -2791,7 +2758,6 @@ export class LGraphNode implements Positionable, IPinnable {
*
* If {@link flags}.{@link INodeFlags.keepAllLinksOnBypass keepAllLinksOnBypass} is `undefined`, it will fall back to
* the static {@link keepAllLinksOnBypass}.
*
* @returns `true` if any new links were established, otherwise `false`.
* @todo Decision: Change API to return array of new links instead?
*/

214
src/LiteGraphGlobal.ts
View File

@@ -68,9 +68,12 @@ export class LiteGraphGlobal {
EVENT_LINK_COLOR = "#A86"
CONNECTING_LINK_COLOR = "#AFA"
MAX_NUMBER_OF_NODES = 10000 // avoid infinite loops
DEFAULT_POSITION = [100, 100] // default node position
VALID_SHAPES = ["default", "box", "round", "card"] // ,"circle"
/** avoid infinite loops */
MAX_NUMBER_OF_NODES = 10000
/** default node position */
DEFAULT_POSITION = [100, 100]
/** ,"circle" */
VALID_SHAPES = ["default", "box", "round", "card"]
// shapes are used for nodes but also for slots
BOX_SHAPE = RenderShape.BOX
@@ -78,18 +81,23 @@ export class LiteGraphGlobal {
CIRCLE_SHAPE = RenderShape.CIRCLE
CARD_SHAPE = RenderShape.CARD
ARROW_SHAPE = RenderShape.ARROW
GRID_SHAPE = RenderShape.GRID // intended for slot arrays
/** intended for slot arrays */
GRID_SHAPE = RenderShape.GRID
// enums
INPUT = NodeSlotType.INPUT
OUTPUT = NodeSlotType.OUTPUT
// TODO: -1 can lead to ambiguity in JS; these should be updated to a more explicit constant or Symbol.
EVENT = -1 as const // for outputs
ACTION = -1 as const // for inputs
/** for outputs */
EVENT = -1 as const
/** for inputs */
ACTION = -1 as const
NODE_MODES = ["Always", "On Event", "Never", "On Trigger"] // helper, will add "On Request" and more in the future
NODE_MODES_COLORS = ["#666", "#422", "#333", "#224", "#626"] // use with node_box_coloured_by_mode
/** helper, will add "On Request" and more in the future */
NODE_MODES = ["Always", "On Event", "Never", "On Trigger"]
/** use with node_box_coloured_by_mode */
NODE_MODES_COLORS = ["#666", "#422", "#333", "#224", "#626"]
ALWAYS = LGraphEventMode.ALWAYS
ON_EVENT = LGraphEventMode.ON_EVENT
NEVER = LGraphEventMode.NEVER
@@ -101,7 +109,8 @@ export class LiteGraphGlobal {
RIGHT = LinkDirection.RIGHT
CENTER = LinkDirection.CENTER
LINK_RENDER_MODES = ["Straight", "Linear", "Spline"] // helper
/** helper */
LINK_RENDER_MODES = ["Straight", "Linear", "Spline"]
HIDDEN_LINK = LinkRenderType.HIDDEN_LINK
STRAIGHT_LINK = LinkRenderType.STRAIGHT_LINK
LINEAR_LINK = LinkRenderType.LINEAR_LINK
@@ -112,63 +121,114 @@ export class LiteGraphGlobal {
TRANSPARENT_TITLE = TitleMode.TRANSPARENT_TITLE
AUTOHIDE_TITLE = TitleMode.AUTOHIDE_TITLE
VERTICAL_LAYOUT = "vertical" // arrange nodes vertically
/** arrange nodes vertically */
VERTICAL_LAYOUT = "vertical"
proxy = null // used to redirect calls
/** used to redirect calls */
proxy = null
node_images_path = ""
debug = false
catch_exceptions = true
throw_errors = true
allow_scripts = false // if set to true some nodes like Formula would be allowed to evaluate code that comes from unsafe sources (like node configuration), which could lead to exploits
registered_node_types: Record<string, typeof LGraphNode> = {} // nodetypes by string
node_types_by_file_extension = {} // used for dropping files in the canvas
Nodes: Record<string, typeof LGraphNode> = {} // node types by classname
Globals = {} // used to store vars between graphs
/** nodetypes by string */
registered_node_types: Record<string, typeof LGraphNode> = {}
/** used for dropping files in the canvas */
node_types_by_file_extension = {}
/** node types by classname */
Nodes: Record<string, typeof LGraphNode> = {}
/** used to store vars between graphs */
Globals = {}
searchbox_extras = {} // used to add extra features to the search box
auto_sort_node_types = false // [true!] If set to true, will automatically sort node types / categories in the context menus
/** used to add extra features to the search box */
searchbox_extras = {}
/** [true!] If set to true, will automatically sort node types / categories in the context menus */
auto_sort_node_types = false
node_box_coloured_when_on = false // [true!] this make the nodes box (top left circle) coloured when triggered (execute/action), visual feedback
node_box_coloured_by_mode = false // [true!] nodebox based on node mode, visual feedback
/** [true!] this make the nodes box (top left circle) coloured when triggered (execute/action), visual feedback */
node_box_coloured_when_on = false
/** [true!] nodebox based on node mode, visual feedback */
node_box_coloured_by_mode = false
dialog_close_on_mouse_leave = false // [false on mobile] better true if not touch device, TODO add an helper/listener to close if false
/** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */
dialog_close_on_mouse_leave = false
dialog_close_on_mouse_leave_delay = 500
shift_click_do_break_link_from = false // [false!] prefer false if results too easy to break links - implement with ALT or TODO custom keys
click_do_break_link_to = false // [false!]prefer false, way too easy to break links
ctrl_alt_click_do_break_link = true // [true!] who accidentally ctrl-alt-clicks on an in/output? nobody! that's who!
snaps_for_comfy = true // [true!] snaps links when dragging connections over valid targets
snap_highlights_node = true // [true!] renders a partial border to highlight when a dragged link is snapped to a node
/** [false!] prefer false if results too easy to break links - implement with ALT or TODO custom keys */
shift_click_do_break_link_from = false
/** [false!]prefer false, way too easy to break links */
click_do_break_link_to = false
/** [true!] who accidentally ctrl-alt-clicks on an in/output? nobody! that's who! */
ctrl_alt_click_do_break_link = true
/** [true!] snaps links when dragging connections over valid targets */
snaps_for_comfy = true
/** [true!] renders a partial border to highlight when a dragged link is snapped to a node */
snap_highlights_node = true
search_hide_on_mouse_leave = true // [false on mobile] better true if not touch device, TODO add an helper/listener to close if false
search_filter_enabled = false // [true!] enable filtering slots type in the search widget, !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out]
search_show_all_on_open = true // [true!] opens the results list when opening the search widget
/** [false on mobile] better true if not touch device, TODO add an helper/listener to close if false */
search_hide_on_mouse_leave = true
/**
* [true!] enable filtering slots type in the search widget
* !requires auto_load_slot_types or manual set registered_slot_[in/out]_types and slot_types_[in/out]
*/
search_filter_enabled = false
/** [true!] opens the results list when opening the search widget */
search_show_all_on_open = true
auto_load_slot_types = false // [if want false, use true, run, get vars values to be statically set, than disable] nodes types and nodeclass association with node types need to be calculated, if dont want this, calculate once and set registered_slot_[in/out]_types and slot_types_[in/out]
/**
* [if want false, use true, run, get vars values to be statically set, than disable]
* nodes types and nodeclass association with node types need to be calculated,
* if dont want this, calculate once and set registered_slot_[in/out]_types and slot_types_[in/out]
*/
auto_load_slot_types = false
// set these values if not using auto_load_slot_types
registered_slot_in_types: Record<string, { nodes: string[] }> = {} // slot types for nodeclass
registered_slot_out_types: Record<string, { nodes: string[] }> = {} // slot types for nodeclass
slot_types_in: string[] = [] // slot types IN
slot_types_out: string[] = [] // slot types OUT
slot_types_default_in: Record<string, string[]> = {} // specify for each IN slot type a(/many) default node(s), use single string, array, or object (with node, title, parameters, ..) like for search
slot_types_default_out: Record<string, string[]> = {} // specify for each OUT slot type a(/many) default node(s), use single string, array, or object (with node, title, parameters, ..) like for search
/** slot types for nodeclass */
registered_slot_in_types: Record<string, { nodes: string[] }> = {}
/** slot types for nodeclass */
registered_slot_out_types: Record<string, { nodes: string[] }> = {}
/** slot types IN */
slot_types_in: string[] = []
/** slot types OUT */
slot_types_out: string[] = []
/**
* specify for each IN slot type a(/many) default node(s), use single string, array, or object
* (with node, title, parameters, ..) like for search
*/
slot_types_default_in: Record<string, string[]> = {}
/**
* specify for each OUT slot type a(/many) default node(s), use single string, array, or object
* (with node, title, parameters, ..) like for search
*/
slot_types_default_out: Record<string, string[]> = {}
alt_drag_do_clone_nodes = false // [true!] very handy, ALT click to clone and drag the new node
/** [true!] very handy, ALT click to clone and drag the new node */
alt_drag_do_clone_nodes = false
do_add_triggers_slots = false // [true!] will create and connect event slots when using action/events connections, !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this
/**
* [true!] will create and connect event slots when using action/events connections,
* !WILL CHANGE node mode when using onTrigger (enable mode colors), onExecuted does not need this
*/
do_add_triggers_slots = false
allow_multi_output_for_events = true // [false!] being events, it is strongly reccomended to use them sequentially, one by one
/** [false!] being events, it is strongly reccomended to use them sequentially, one by one */
allow_multi_output_for_events = true
middle_click_slot_add_default_node = false // [true!] allows to create and connect a ndoe clicking with the third button (wheel)
/** [true!] allows to create and connect a ndoe clicking with the third button (wheel) */
middle_click_slot_add_default_node = false
release_link_on_empty_shows_menu = false // [true!] dragging a link to empty space will open a menu, add from list, search or defaults
/** [true!] dragging a link to empty space will open a menu, add from list, search or defaults */
release_link_on_empty_shows_menu = false
pointerevents_method = "pointer" // "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now)
/** "mouse"|"pointer" use mouse for retrocompatibility issues? (none found @ now) */
pointerevents_method = "pointer"
// TODO implement pointercancel, gotpointercapture, lostpointercapture, (pointerover, pointerout if necessary)
ctrl_shift_v_paste_connect_unselected_outputs = true // [true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected with the inputs of the newly pasted nodes
/**
* [true!] allows ctrl + shift + v to paste nodes with the outputs of the unselected nodes connected
* with the inputs of the newly pasted nodes
*/
ctrl_shift_v_paste_connect_unselected_outputs = true
// if true, all newly created nodes/links will use string UUIDs for their id fields instead of integers.
// use this if you must have node IDs that are unique across all graphs and subgraphs.
@@ -219,8 +279,8 @@ export class LiteGraphGlobal {
/**
* Register a node class so it can be listed when the user wants to create a new one
* @param {String} type name of the node and path
* @param {Class} base_class class containing the structure of a node
* @param type name of the node and path
* @param base_class class containing the structure of a node
*/
registerNodeType(type: string, base_class: typeof LGraphNode): void {
if (!base_class.prototype)
@@ -302,7 +362,7 @@ export class LiteGraphGlobal {
/**
* removes a node type from the system
* @param {String|Object} type name of the node or the node constructor itself
* @param type name of the node or the node constructor itself
*/
unregisterNodeType(type: string | typeof LGraphNode): void {
const base_class = typeof type === "string"
@@ -318,8 +378,8 @@ export class LiteGraphGlobal {
/**
* Save a slot type and his node
* @param {String|Object} type name of the node or the node constructor itself
* @param {String} slot_type name of the slot type (variable type), eg. string, number, array, boolean, ..
* @param type name of the node or the node constructor itself
* @param slot_type name of the slot type (variable type), eg. string, number, array, boolean, ..
*/
registerNodeAndSlotType(
type: LGraphNode,
@@ -371,12 +431,12 @@ export class LiteGraphGlobal {
* Create a new nodetype by passing a function, it wraps it with a proper class and
* generates inputs according to the parameters of the function.
* Useful to wrap simple methods that do not require properties, and that only process some input to generate an output.
* @param {String} name node name with namespace (p.e.: 'math/sum')
* @param {Function} func
* @param {Array} param_types [optional] an array containing the type of every parameter,
* @param name node name with namespace (p.e.: 'math/sum')
* @param func
* @param param_types [optional] an array containing the type of every parameter,
* otherwise parameters will accept any type
* @param {String} return_type [optional] string with the return type, otherwise it will be generic
* @param {Object} properties [optional] properties to be configurable
* @param return_type [optional] string with the return type, otherwise it will be generic
* @param properties [optional] properties to be configurable
*/
wrapFunctionAsNode(
name: string,
@@ -423,7 +483,6 @@ export class LiteGraphGlobal {
/**
* Adds this method to all nodetypes, existing and to be created
* (You can add it to LGraphNode.prototype but then existing node types wont have it)
* @param {Function} func
*/
// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
addNodeMethod(name: string, func: Function): void {
@@ -438,9 +497,9 @@ export class LiteGraphGlobal {
/**
* Create a node of a given type with a name. The node is not attached to any graph yet.
* @param {String} type full name of the node class. p.e. "math/sin"
* @param {String} name a name to distinguish from other nodes
* @param {Object} options to set options
* @param type full name of the node class. p.e. "math/sin"
* @param title a name to distinguish from other nodes
* @param options to set options
*/
createNode(
type: string,
@@ -493,8 +552,8 @@ export class LiteGraphGlobal {
/**
* Returns a registered node type with a given name
* @param {String} type full name of the node class. p.e. "math/sin"
* @return {Class} the node class
* @param type full name of the node class. p.e. "math/sin"
* @returns the node class
*/
getNodeType(type: string): typeof LGraphNode {
return this.registered_node_types[type]
@@ -502,8 +561,8 @@ export class LiteGraphGlobal {
/**
* Returns a list of node types matching one category
* @param {String} category category name
* @return {Array} array with all the node classes
* @param category category name
* @returns array with all the node classes
*/
getNodeTypesInCategory(category: string, filter: any) {
const r = []
@@ -529,8 +588,8 @@ export class LiteGraphGlobal {
/**
* Returns a list with all the node type categories
* @param {String} filter only nodes with ctor.filter equal can be shown
* @return {Array} array with all the names of the categories
* @param filter only nodes with ctor.filter equal can be shown
* @returns array with all the names of the categories
*/
getNodeTypesCategories(filter: string): string[] {
const categories = { "": 1 }
@@ -606,9 +665,9 @@ export class LiteGraphGlobal {
/**
* Returns if the types of two slots are compatible (taking into account wildcards, etc)
* @param {String} type_a output
* @param {String} type_b input
* @return {Boolean} true if they can be connected
* @param type_a output
* @param type_b input
* @returns true if they can be connected
*/
isValidConnection(type_a: ISlotType, type_b: ISlotType): boolean {
if (type_a == "" || type_a === "*") type_a = 0
@@ -647,10 +706,9 @@ export class LiteGraphGlobal {
/**
* Register a string in the search box so when the user types it it will recommend this node
* @param {String} node_type the node recommended
* @param {String} description text to show next to it
* @param {Object} data it could contain info of how the node should be configured
* @return {Boolean} true if they can be connected
* @param node_type the node recommended
* @param description text to show next to it
* @param data it could contain info of how the node should be configured
*/
registerSearchboxExtra(node_type: any, description: string, data: any): void {
this.searchbox_extras[description.toLowerCase()] = {
@@ -662,11 +720,11 @@ export class LiteGraphGlobal {
/**
* Wrapper to load files (from url using fetch or from file using FileReader)
* @param {String|File|Blob} url the url of the file (or the file itself)
* @param {String} type an string to know how to fetch it: "text","arraybuffer","json","blob"
* @param {Function} on_complete callback(data)
* @param {Function} on_error in case of an error
* @return {FileReader|Promise} returns the object used to
* @param url the url of the file (or the file itself)
* @param type an string to know how to fetch it: "text","arraybuffer","json","blob"
* @param on_complete callback(data)
* @param on_error in case of an error
* @returns returns the object used to
*/
fetchFile(
url: string | URL | Request | Blob,
@@ -883,8 +941,8 @@ export class LiteGraphGlobal {
}
// Convert a hex value to its decimal value - the inputted hex must be in the
// format of a hex triplet - the kind we use for HTML colours. The function
// will return an array with three values.
// format of a hex triplet - the kind we use for HTML colours. The function
// will return an array with three values.
hex2num(hex: string): number[] {
if (hex.charAt(0) == "#") {
hex = hex.slice(1)
@@ -904,7 +962,7 @@ export class LiteGraphGlobal {
}
// Give a array with three values as the argument and the function will return
// the corresponding hex triplet.
// the corresponding hex triplet.
num2hex(triplet: number[]): string {
const hex_alphabets = "0123456789ABCDEF"
let hex = "#"

2
src/Reroute.ts
View File

@@ -274,8 +274,6 @@ export class Reroute implements Positionable, LinkSegment, Serialisable<Serialis
/**
* Renders the reroute on the canvas.
* @param ctx Canvas context to draw on
* @param colour Reroute colour (typically link colour)
*
* @remarks Leaves {@link ctx}.fillStyle, strokeStyle, and lineWidth dirty (perf.).
*/
draw(ctx: CanvasRenderingContext2D): void {

3
src/interfaces.ts
View File

@@ -94,7 +94,8 @@ export interface LinkSegment {
path?: Path2D
/** Centre point of the {@link path}. Calculated during render only - can be inaccurate */
readonly _pos: Float32Array
/** Y-forward along the {@link path} from its centre point, in radians.
/**
* Y-forward along the {@link path} from its centre point, in radians.
* `undefined` if using circles for link centres.
* Calculated during render only - can be inaccurate.
*/

5
src/measure.ts
View File

@@ -92,7 +92,6 @@ export function isInRect(x: number, y: number, rect: ReadOnlyRect): boolean {
* @deprecated
* Use {@link isInRectangle} to match inclusive of top left.
* This function returns a false negative when an integer point (e.g. pixel) is on the leftmost or uppermost edge of a rectangle.
*
* @param x Point x
* @param y Point y
* @param left Rect x
@@ -287,7 +286,8 @@ export function rotateLink(
* {@link https://www.geeksforgeeks.org/orientation-3-ordered-points/}
* @param lineStart The start point of the line
* @param lineEnd The end point of the line
* @param point The point to check
* @param x X co-ordinate of the point to check
* @param y Y co-ordinate of the point to check
* @returns 0 if all three points are in a straight line, a negative value if
* point is to the left of the projected line, or positive if the point is to
* the right
@@ -303,7 +303,6 @@ export function getOrientation(
}
/**
*
* @param out The array to store the point in
* @param a Start point
* @param b End point

2
src/types/serialisation.ts
View File

@@ -106,7 +106,7 @@ export interface ClipboardItems {
links?: SerialisableLLink[]
}
/** */
/** @deprecated */
export interface IClipboardContents {
nodes?: ISerialisedNode[]
links?: TClipboardLink[]

1
src/types/widgets.ts
View File

@@ -27,7 +27,6 @@ export interface IWidgetOptions<TValue = unknown> extends Record<string, unknown
/**
* A widget for a node.
* @typescript
* All types are based on IBaseWidget - additions can be made there or directly on individual types.
*
* Implemented as a discriminative union of widget types, so this type itself cannot be extended.