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

Code clean up (#244)

Browse Source 
* Replace global var with enums

* Remove unused interface

* Add TS types

* Remove unused code

* nit - Clean up

* Add TS types

* nit - Refactor / clean up

* nit - Add TS types, clean up

* nit - Doc

* nit

* nit

* nit

* nit - Doc

* nit

* nit

* nit - let/const

* nit - Remove redundant code
This commit is contained in:
filtered
2024-11-01 05:17:13 +11:00
committed by GitHub
parent 002c955bf3
commit d9d0837423
10 changed files with 275 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/LGraph.ts
View File

@@ -1,11 +1,11 @@
import type { Dictionary, IContextMenuValue, ISlotType, MethodNames, Point } from "./interfaces"
import type { ISerialisedGraph } from "@/types/serialisation"
import type { LGraphEventMode } from "./types/globalEnums"
import { LGraphEventMode, TitleMode } from "./types/globalEnums"
import { LiteGraph } from "./litegraph"
import { LGraphCanvas } from "./LGraphCanvas"
import { LGraphGroup } from "./LGraphGroup"
import { type NodeId, LGraphNode } from "./LGraphNode"
import { type LinkId, LLink, SerialisedLLinkArray } from "./LLink"
import { type LinkId, LLink, type SerialisedLLinkArray } from "./LLink"
interface IGraphInput {
name: string
@@ -295,7 +295,7 @@ export class LGraph {
for (let j = 0; j < limit; ++j) {
const node = nodes[j]
// FIXME: Looks like copy/paste broken logic - checks for "on", executes "do"
if (node.mode == LiteGraph.ALWAYS && node.onExecute) {
if (node.mode == LGraphEventMode.ALWAYS && node.onExecute) {
//wrap node.onExecute();
node.doExecute?.()
}
@@ -312,7 +312,7 @@ export class LGraph {
for (let i = 0; i < num; i++) {
for (let j = 0; j < limit; ++j) {
const node = nodes[j]
if (node.mode == LiteGraph.ALWAYS) {
if (node.mode == LGraphEventMode.ALWAYS) {
node.onExecute?.()
}
}
@@ -577,7 +577,7 @@ export class LGraph {
* @param {Array} params parameters in array format
*/
sendEventToAllNodes(eventname: string, params?: object | object[], mode?: LGraphEventMode): void {
mode = mode || LiteGraph.ALWAYS
mode = mode || LGraphEventMode.ALWAYS
const nodes = this._nodes_in_order ? this._nodes_in_order : this._nodes
if (!nodes) return
@@ -830,7 +830,7 @@ export class LGraph {
const nRet = null
for (let i = nodes_list.length - 1; i >= 0; i--) {
const n = nodes_list[i]
const skip_title = n.constructor.title_mode == LiteGraph.NO_TITLE
const skip_title = n.constructor.title_mode == TitleMode.NO_TITLE
if (n.isPointInside(x, y, margin, skip_title)) {
// check for lesser interest nodes (TODO check for overlapping, use the top)
/*if (typeof n == "LGraphGroup"){
@@ -1076,7 +1076,7 @@ export class LGraph {
this.onInputsOutputsChange?.()
return true
}
// TODO: Clean up - never implemented.
/** @todo Clean up - never implemented. */
triggerInput(name: string, value: any): void {
const nodes = this.findNodesByTitle(name)
for (let i = 0; i < nodes.length; ++i) {
@@ -1084,7 +1084,7 @@ export class LGraph {
nodes[i].onTrigger(value)
}
}
// TODO: Clean up - never implemented.
/** @todo Clean up - never implemented. */
setCallback(name: string, func: any): void {
const nodes = this.findNodesByTitle(name)
for (let i = 0; i < nodes.length; ++i) {

641
src/LGraphCanvas.ts
View File

File diff suppressed because it is too large Load Diff

11
src/LGraphGroup.ts
View File

@@ -5,12 +5,7 @@ import { LiteGraph } from "./litegraph"
import { LGraphCanvas } from "./LGraphCanvas"
import { isInsideRectangle, overlapBounding } from "./measure"
import { LGraphNode } from "./LGraphNode"
export interface IGraphGroup {
_pos: Point
_size: Size
title: string
}
import { RenderShape, TitleMode } from "./types/globalEnums"
export interface IGraphGroupFlags extends Record<string, unknown> {
pinned?: true
@@ -145,9 +140,9 @@ export class LGraphGroup {
if (LiteGraph.highlight_selected_group && this.selected) {
graphCanvas.drawSelectionBounding(ctx, this._bounding, {
shape: LiteGraph.BOX_SHAPE,
shape: RenderShape.BOX,
title_height: this.titleHeight,
title_mode: LiteGraph.NORMAL_TITLE,
title_mode: TitleMode.NORMAL_TITLE,
fgcolor: this.color,
padding,
})

64
src/LGraphNode.ts
View File

@@ -2,10 +2,10 @@ import type { Dictionary, IContextMenuValue, IFoundSlot, INodeFlags, INodeInputS
import type { LGraph } from "./LGraph"
import type { IWidget, TWidgetValue } from "./types/widgets"
import type { ISerialisedNode } from "./types/serialisation"
import { RenderShape } from "./types/globalEnums"
import type { LGraphCanvas } from "./LGraphCanvas"
import type { CanvasMouseEvent } from "./types/events"
import type { DragAndScale } from "./DragAndScale"
import { LGraphEventMode, NodeSlotType, TitleMode, RenderShape } from "./types/globalEnums"
import { BadgePosition, LGraphBadge } from "./LGraphBadge"
import { type LGraphNodeConstructor, LiteGraph } from "./litegraph"
import { isInsideRectangle } from "./measure"
@@ -98,7 +98,7 @@ supported callbacks:
+ onDropItem : DOM item dropped over the node
+ onDropFile : file dropped over the node
+ onConnectInput : if returns false the incoming connection will be canceled
+ onConnectionsChange : a connection changed (new one or removed) (LiteGraph.INPUT or LiteGraph.OUTPUT, slot, true if connected, link_info, input_info )
+ onConnectionsChange : a connection changed (new one or removed) (NodeSlotType.INPUT or NodeSlotType.OUTPUT, slot, true if connected, link_info, input_info )
+ onAction: action slot triggered
+ getExtraMenuOptions: to add option to context menu
*/
@@ -131,7 +131,7 @@ export class LGraphNode {
connections: unknown[]
properties: INodeProperties
properties_info: INodePropertyInfo[]
flags?: INodeFlags
flags: INodeFlags
widgets?: IWidget[]
size: Size
@@ -139,7 +139,7 @@ export class LGraphNode {
// Execution order, automatically computed during run
order?: number
mode: number
mode: LGraphEventMode
last_serialization?: ISerialisedNode
serialize_widgets?: boolean
color: string
@@ -354,7 +354,7 @@ export class LGraphNode {
for (let i = 0; i < this.inputs.length; ++i) {
const input = this.inputs[i]
const link = this.graph ? this.graph.links[input.link] : null
this.onConnectionsChange?.(LiteGraph.INPUT, i, true, link, input)
this.onConnectionsChange?.(NodeSlotType.INPUT, i, true, link, input)
this.onInputAdded?.(input)
}
}
@@ -367,7 +367,7 @@ export class LGraphNode {
}
for (let j = 0; j < output.links.length; ++j) {
const link = this.graph ? this.graph.links[output.links[j]] : null
this.onConnectionsChange?.(LiteGraph.OUTPUT, i, true, link, output)
this.onConnectionsChange?.(NodeSlotType.OUTPUT, i, true, link, output)
}
this.onOutputAdded?.(output)
}
@@ -826,19 +826,19 @@ export class LGraphNode {
changeMode(modeTo: number): boolean {
switch (modeTo) {
case LiteGraph.ON_EVENT:
case LGraphEventMode.ON_EVENT:
// this.addOnExecutedOutput();
break
case LiteGraph.ON_TRIGGER:
case LGraphEventMode.ON_TRIGGER:
this.addOnTriggerInput()
this.addOnExecutedOutput()
break
case LiteGraph.NEVER:
case LGraphEventMode.NEVER:
break
case LiteGraph.ALWAYS:
case LGraphEventMode.ALWAYS:
break
// @ts-expect-error Not impl.
@@ -969,7 +969,7 @@ export class LGraphNode {
//node not found?
if (!node) continue
if (node.mode === LiteGraph.ON_TRIGGER) {
if (node.mode === LGraphEventMode.ON_TRIGGER) {
// generate unique trigger ID if not present
if (!options.action_call) options.action_call = this.id + "_trigg_" + Math.floor(Math.random() * 9999)
// -- wrapping node.onExecute(param); --
@@ -1419,7 +1419,7 @@ export class LGraphNode {
*/
measure(out: Rect, pad = 0): void {
const titleMode = this.constructor.title_mode
const renderTitle = titleMode != LiteGraph.TRANSPARENT_TITLE && titleMode != LiteGraph.NO_TITLE
const renderTitle = titleMode != TitleMode.TRANSPARENT_TITLE && titleMode != TitleMode.NO_TITLE
const titleHeight = renderTitle ? LiteGraph.NODE_TITLE_HEIGHT : 0
out[0] = this.pos[0] - pad
@@ -1468,7 +1468,7 @@ export class LGraphNode {
? 0
: LiteGraph.NODE_TITLE_HEIGHT
if (this.flags?.collapsed) {
if (this.flags.collapsed) {
//if ( distance([x,y], [this.pos[0] + this.size[0]*0.5, this.pos[1] + this.size[1]*0.5]) < LiteGraph.NODE_COLLAPSED_RADIUS)
if (isInsideRectangle(
x,
@@ -1831,7 +1831,7 @@ export class LGraphNode {
} else if (target_slot === LiteGraph.EVENT) {
// TODO: Events
if (LiteGraph.do_add_triggers_slots) {
target_node.changeMode(LiteGraph.ON_TRIGGER)
target_node.changeMode(LGraphEventMode.ON_TRIGGER)
targetIndex = target_node.findInputSlot("onTrigger")
} else {
return null
@@ -1917,7 +1917,7 @@ export class LGraphNode {
//link_info has been created now, so its updated
this.onConnectionsChange?.(
LiteGraph.OUTPUT,
NodeSlotType.OUTPUT,
slot,
true,
link_info,
@@ -1925,21 +1925,21 @@ export class LGraphNode {
)
target_node.onConnectionsChange?.(
LiteGraph.INPUT,
NodeSlotType.INPUT,
targetIndex,
true,
link_info,
input
)
this.graph?.onNodeConnectionChange?.(
LiteGraph.INPUT,
NodeSlotType.INPUT,
target_node,
targetIndex,
this,
slot
)
this.graph?.onNodeConnectionChange?.(
LiteGraph.OUTPUT,
NodeSlotType.OUTPUT,
this,
slot,
target_node,
@@ -1999,14 +1999,14 @@ export class LGraphNode {
//link_info hasn't been modified so its ok
target_node.onConnectionsChange?.(
LiteGraph.INPUT,
NodeSlotType.INPUT,
link_info.target_slot,
false,
link_info,
input
)
this.onConnectionsChange?.(
LiteGraph.OUTPUT,
NodeSlotType.OUTPUT,
slot,
false,
link_info,
@@ -2014,9 +2014,9 @@ export class LGraphNode {
)
// FIXME: Called twice.
graph?.onNodeConnectionChange?.(LiteGraph.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(LiteGraph.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(LiteGraph.INPUT, target_node, link_info.target_slot)
graph?.onNodeConnectionChange?.(NodeSlotType.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(NodeSlotType.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(NodeSlotType.INPUT, target_node, link_info.target_slot)
break
}
}
@@ -2038,27 +2038,27 @@ export class LGraphNode {
//link_info hasn't been modified so its ok
target_node.onConnectionsChange?.(
LiteGraph.INPUT,
NodeSlotType.INPUT,
link_info.target_slot,
false,
link_info,
input
)
// FIXME: Called twice.
graph?.onNodeConnectionChange?.(LiteGraph.INPUT, target_node, link_info.target_slot)
graph?.onNodeConnectionChange?.(NodeSlotType.INPUT, target_node, link_info.target_slot)
}
//remove the link from the links pool
delete graph.links[link_id]
this.onConnectionsChange?.(
LiteGraph.OUTPUT,
NodeSlotType.OUTPUT,
slot,
false,
link_info,
output
)
graph?.onNodeConnectionChange?.(LiteGraph.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(LiteGraph.INPUT, target_node, link_info.target_slot)
graph?.onNodeConnectionChange?.(NodeSlotType.OUTPUT, this, slot)
graph?.onNodeConnectionChange?.(NodeSlotType.INPUT, target_node, link_info.target_slot)
}
output.links = null
}
@@ -2123,21 +2123,21 @@ export class LGraphNode {
if (this.graph) this.graph._version++
this.onConnectionsChange?.(
LiteGraph.INPUT,
NodeSlotType.INPUT,
slot,
false,
link_info,
input
)
target_node.onConnectionsChange?.(
LiteGraph.OUTPUT,
NodeSlotType.OUTPUT,
i,
false,
link_info,
output
)
this.graph?.onNodeConnectionChange?.(LiteGraph.OUTPUT, target_node, i)
this.graph?.onNodeConnectionChange?.(LiteGraph.INPUT, this, slot)
this.graph?.onNodeConnectionChange?.(NodeSlotType.OUTPUT, target_node, i)
this.graph?.onNodeConnectionChange?.(NodeSlotType.INPUT, this, slot)
}
}

3
src/LLink.ts
View File

@@ -20,8 +20,11 @@ export class LLink {
target_slot?: number
data?: number | string | boolean | { toToolTip?(): string }
_data?: unknown
/** Centre point of the link, calculated during render only - can be inaccurate */
_pos: Float32Array
/** @todo Clean up - never implemented in comfy. */
_last_time?: number
/** The last canvas 2D path that was used to render this link */
path?: Path2D
#color?: CanvasColour

2
src/LiteGraphGlobal.ts
View File

@@ -458,7 +458,7 @@ export class LiteGraphGlobal {
//call onresize?
node.size ||= node.computeSize()
node.pos ||= this.DEFAULT_POSITION.concat()
node.mode ||= this.ALWAYS
node.mode ||= LGraphEventMode.ALWAYS
//extra options
if (options) {

10
src/measure.ts
View File

@@ -63,7 +63,7 @@ export function isInsideRectangle(x: number, y: number, left: number, top: numbe
* @param radius Radius to use as rough guide for octagon
* @returns true if the point is roughly inside the octagon centred on 0,0 with specified radius
*/
export function isSortaInsideOctagon(x: number, y: number, radius: number) {
export function isSortaInsideOctagon(x: number, y: number, radius: number): boolean {
const sum = Math.min(radius, Math.abs(x)) + Math.min(radius, Math.abs(y))
return sum < radius * 0.75
}
@@ -113,12 +113,14 @@ export function addDirectionalOffset(amount: number, direction: LinkDirection, o
}
/**
* Flips axes of a 2D vector - "rotating" them by 90°
* @param offset The offset to rotate
* Rotates an offset in 90° increments.
*
* Swaps/flips axis values of a 2D vector offset - effectively rotating {@link offset} by 90°
* @param offset The zero-based offset to rotate
* @param from Direction to rotate from
* @param to Direction to rotate to
*/
export function rotateLinkDirection(offset: Point, from: LinkDirection, to: LinkDirection): void {
export function rotateLink(offset: Point, from: LinkDirection, to: LinkDirection): void {
let x: number
let y: number

8
src/polyfills.ts
View File

@@ -12,10 +12,10 @@ if (typeof (window) != "undefined" && window.CanvasRenderingContext2D && !window
radius,
radius_low
) {
var top_left_radius = 0;
var top_right_radius = 0;
var bottom_left_radius = 0;
var bottom_right_radius = 0;
let top_left_radius = 0;
let top_right_radius = 0;
let bottom_left_radius = 0;
let bottom_right_radius = 0;
if (radius === 0) {
this.rect(x, y, w, h);

1
src/types/events.ts
View File

@@ -26,6 +26,7 @@ export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent { }
/** MouseEvent with canvasX/Y and deltaX/Y properties */
export interface CanvasMouseEvent extends MouseEvent, ICanvasPosition, IDeltaPosition {
/** @deprecated Part of DragAndScale mouse API - incomplete / not maintained */
dragging?: boolean
click_time?: number
dataTransfer?: unknown

6
src/types/serialisation.ts
View File

@@ -1,4 +1,4 @@
import type { CanvasColour, Dictionary, INodeFlags, INodeInputSlot, INodeOutputSlot, Point, Rect, Size } from "@/interfaces"
import type { Dictionary, INodeFlags, INodeInputSlot, INodeOutputSlot, Point, Rect, Size } from "@/interfaces"
import type { LGraph } from "@/LGraph"
import type { IGraphGroupFlags, LGraphGroup } from "@/LGraphGroup"
import type { LGraphNode, NodeId } from "@/LGraphNode"
@@ -21,8 +21,8 @@ export interface ISerialisedNode {
inputs?: INodeInputSlot[]
properties?: Dictionary<unknown>
shape?: RenderShape
boxcolor?: CanvasColour
color?: CanvasColour
boxcolor?: string
color?: string
bgcolor?: string
widgets_values?: TWidgetValue[]
}