From 7e2009188de9dfcab046307c5d79de89fd539111 Mon Sep 17 00:00:00 2001 From: filtered <176114999+webfiltered@users.noreply.github.com> Date: Fri, 7 Mar 2025 20:07:38 +1100 Subject: [PATCH] [Refactor] Split functions out to file (#713) Splits code out from `LGraphCanvas`. --- src/LGraphCanvas.ts | 82 +++++--------------------------------- src/canvas/measureSlots.ts | 75 ++++++++++++++++++++++++++++++++++ src/litegraph.ts | 1 + 3 files changed, 87 insertions(+), 71 deletions(-) create mode 100644 src/canvas/measureSlots.ts diff --git a/src/LGraphCanvas.ts b/src/LGraphCanvas.ts index f1b308b50..e6c87fb24 100644 --- a/src/LGraphCanvas.ts +++ b/src/LGraphCanvas.ts @@ -36,6 +36,7 @@ import type { import type { ClipboardItems } from "./types/serialisation" import type { IWidget } from "./types/widgets" +import { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots" import { CanvasPointer } from "./CanvasPointer" import { DragAndScale } from "./DragAndScale" import { strokeShape } from "./draw" @@ -2666,8 +2667,8 @@ export class LGraphCanvas implements ConnectionColorContext { // For input/output hovering // to store the output of isOverNodeInput const pos: Point = [0, 0] - const inputId = this.isOverNodeInput(node, e.canvasX, e.canvasY, pos) - const outputId = this.isOverNodeOutput(node, e.canvasX, e.canvasY, pos) + const inputId = isOverNodeInput(node, e.canvasX, e.canvasY, pos) + const outputId = isOverNodeOutput(node, e.canvasX, e.canvasY, pos) const overWidget = this.getWidgetAtCursor(node) if (!node.mouseOver) { @@ -2980,7 +2981,7 @@ export class LGraphCanvas implements ConnectionColorContext { // slot below mouse? connect if (link.output) { - const slot = this.isOverNodeInput(node, x, y) + const slot = isOverNodeInput(node, x, y) if (slot != -1) { // Trying to move link onto itself if (link.link?.target_id === node.id && link.link?.target_slot === slot) return @@ -3008,7 +3009,7 @@ export class LGraphCanvas implements ConnectionColorContext { } } } else if (link.input) { - const slot = this.isOverNodeOutput(node, x, y) + const slot = isOverNodeOutput(node, x, y) const newLink = slot != -1 // this is inverted has output-input nature like @@ -3109,75 +3110,14 @@ export class LGraphCanvas implements ConnectionColorContext { return } - /** - * returns the INDEX if a position (in graph space) is on top of a node input slot - */ - isOverNodeInput( - node: LGraphNode, - canvasx: number, - canvasy: number, - slot_pos?: Point, - ): number { - const { inputs } = node - if (inputs) { - for (const [i, input] of inputs.entries()) { - const link_pos = node.getConnectionPos(true, i) - let is_inside = false - // TODO: Find a cheap way to measure text, and do it on node label change instead of here - // Input icon width + text approximation - const width = - 20 + ((input.label?.length ?? input.localized_name?.length ?? input.name?.length) || 3) * 7 - is_inside = isInRectangle( - canvasx, - canvasy, - link_pos[0] - 10, - link_pos[1] - 10, - width, - 20, - ) - if (is_inside) { - if (slot_pos) { - slot_pos[0] = link_pos[0] - slot_pos[1] = link_pos[1] - } - return i - } - } - } - return -1 + /** @deprecated - use {@link isOverNodeInput} from '@/canvas/measureSlots.ts' */ + isOverNodeInput(node: LGraphNode, canvasx: number, canvasy: number, slot_pos?: Point): number { + return isOverNodeInput(node, canvasx, canvasy, slot_pos) } - /** - * returns the INDEX if a position (in graph space) is on top of a node output slot - */ - isOverNodeOutput( - node: LGraphNode, - canvasx: number, - canvasy: number, - slot_pos?: Point, - ): number { - const { outputs } = node - if (outputs) { - for (let i = 0; i < outputs.length; ++i) { - const link_pos = node.getConnectionPos(false, i) - const is_inside = isInRectangle( - canvasx, - canvasy, - link_pos[0] - 10, - link_pos[1] - 10, - 40, - 20, - ) - if (is_inside) { - if (slot_pos) { - slot_pos[0] = link_pos[0] - slot_pos[1] = link_pos[1] - } - return i - } - } - } - return -1 + /** @deprecated - use {@link isOverNodeOutput} from '@/canvas/measureSlots.ts' */ + isOverNodeOutput(node: LGraphNode, canvasx: number, canvasy: number, slot_pos?: Point): number { + return isOverNodeOutput(node, canvasx, canvasy, slot_pos) } /** diff --git a/src/canvas/measureSlots.ts b/src/canvas/measureSlots.ts new file mode 100644 index 000000000..4fed1b319 --- /dev/null +++ b/src/canvas/measureSlots.ts @@ -0,0 +1,75 @@ +import type { Point } from "@/interfaces" +import type { LGraphNode } from "@/LGraphNode" + +import { isInRectangle } from "@/measure" + +/** + * returns the INDEX if a position (in graph space) is on top of a node input slot + */ +export function isOverNodeInput( + node: LGraphNode, + canvasx: number, + canvasy: number, + slot_pos?: Point, +): number { + const { inputs } = node + if (inputs) { + for (const [i, input] of inputs.entries()) { + const link_pos = node.getConnectionPos(true, i) + let is_inside = false + // TODO: Find a cheap way to measure text, and do it on node label change instead of here + // Input icon width + text approximation + const width = + 20 + ((input.label?.length ?? input.localized_name?.length ?? input.name?.length) || 3) * 7 + is_inside = isInRectangle( + canvasx, + canvasy, + link_pos[0] - 10, + link_pos[1] - 10, + width, + 20, + ) + if (is_inside) { + if (slot_pos) { + slot_pos[0] = link_pos[0] + slot_pos[1] = link_pos[1] + } + return i + } + } + } + return -1 +} + +/** + * returns the INDEX if a position (in graph space) is on top of a node output slot + */ +export function isOverNodeOutput( + node: LGraphNode, + canvasx: number, + canvasy: number, + slot_pos?: Point, +): number { + const { outputs } = node + if (outputs) { + for (let i = 0; i < outputs.length; ++i) { + const link_pos = node.getConnectionPos(false, i) + const is_inside = isInRectangle( + canvasx, + canvasy, + link_pos[0] - 10, + link_pos[1] - 10, + 40, + 20, + ) + if (is_inside) { + if (slot_pos) { + slot_pos[0] = link_pos[0] + slot_pos[1] = link_pos[1] + } + return i + } + } + } + return -1 +} diff --git a/src/litegraph.ts b/src/litegraph.ts index 7dfd48bf1..d26a92eda 100644 --- a/src/litegraph.ts +++ b/src/litegraph.ts @@ -87,6 +87,7 @@ export interface LGraphNodeConstructor { // End backwards compat +export { isOverNodeInput, isOverNodeOutput } from "./canvas/measureSlots" export { CanvasPointer } from "./CanvasPointer" export { ContextMenu } from "./ContextMenu" export { CurveEditor } from "./CurveEditor"