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

[TS] Update callbacks using CanvasMouseEvent (#1104)

Browse Source
This commit is contained in:
filtered
2025-07-05 10:52:25 -07:00
committed by GitHub
parent 5eac669b41
commit fe57458a66
5 changed files with 32 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ContextMenu.ts
View File

@@ -347,7 +347,7 @@ export class ContextMenu<TValue = unknown> {
const evt = document.createEvent("CustomEvent")
evt.initCustomEvent(event_name, true, true, params)
if (element.dispatchEvent) element.dispatchEvent(evt)
// else nothing seems binded here so nothing to do
// else nothing seems bound here so nothing to do
return evt
}

29
src/LGraphCanvas.ts
View File

@@ -29,7 +29,6 @@ import type {
} from "./interfaces"
import type { LGraph } from "./LGraph"
import type {
CanvasMouseEvent,
CanvasPointerEvent,
CanvasPointerExtensions,
} from "./types/events"
@@ -114,7 +113,7 @@ interface ICreateNodeOptions {
// FIXME: Should not be optional
/** choose a nodetype to add, AUTO to set at first good */
nodeType?: string
e?: CanvasMouseEvent
e?: CanvasPointerEvent
allow_searchbox?: boolean
}
@@ -502,7 +501,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
/** to personalize the search box */
onSearchBox?: (helper: Element, str: string, canvas: LGraphCanvas) => any
onSearchBoxSelection?: (name: any, event: any, canvas: LGraphCanvas) => void
onMouse?: (e: CanvasMouseEvent) => boolean
onMouse?: (e: CanvasPointerEvent) => boolean
/** to render background objects (behind nodes and connections) in the canvas affected by transform */
onDrawBackground?: (ctx: CanvasRenderingContext2D, visible_area: any) => void
/** to render foreground objects (above nodes and connections) in the canvas affected by transform */
@@ -590,7 +589,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
selected_group_resizing?: boolean
/** @deprecated See {@link pointer}.{@link CanvasPointer.dragStarted dragStarted} */
last_mouse_dragging?: boolean
onMouseDown?: (arg0: CanvasMouseEvent) => void
onMouseDown?: (arg0: CanvasPointerEvent) => void
_highlight_pos?: Point
_highlight_input?: INodeInputSlot
// TODO: Check if panels are used
@@ -1727,7 +1726,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
*/
bindEvents(): void {
if (this._events_binded) {
console.warn("LGraphCanvas: events already binded")
console.warn("LGraphCanvas: events already bound")
return
}
@@ -1771,7 +1770,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
*/
unbindEvents(): void {
if (!this._events_binded) {
console.warn("LGraphCanvas: no events binded")
console.warn("LGraphCanvas: no events bound")
return
}
@@ -1911,7 +1910,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
* @param node The node that the mouse is now over
* @param e MouseEvent that is triggering this
*/
updateMouseOverNodes(node: LGraphNode | null, e: CanvasMouseEvent): void {
updateMouseOverNodes(node: LGraphNode | null, e: CanvasPointerEvent): void {
if (!this.graph) throw new NullGraphError()
const { pointer } = this
@@ -3150,7 +3149,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
* Called when the mouse moves off the canvas. Clears all node hover states.
* @param e
*/
processMouseOut(e: MouseEvent): void {
processMouseOut(e: PointerEvent): void {
// TODO: Check if document.contains(e.relatedTarget) - handle mouseover node textarea etc.
this.adjustMouseEvent(e)
this.updateMouseOverNodes(null, e)
@@ -3614,7 +3613,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
*/
processSelect<TPositionable extends Positionable = LGraphNode>(
item: TPositionable | null | undefined,
e: CanvasMouseEvent | undefined,
e: CanvasPointerEvent | undefined,
sticky: boolean = false,
): void {
const addModifier = e?.shiftKey
@@ -3717,7 +3716,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
}
/** @deprecated See {@link LGraphCanvas.processSelect} */
processNodeSelected(item: LGraphNode, e: CanvasMouseEvent): void {
processNodeSelected(item: LGraphNode, e: CanvasPointerEvent): void {
this.processSelect(
item,
e,
@@ -3894,7 +3893,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
*/
adjustMouseEvent<T extends MouseEvent>(
e: T & Partial<CanvasPointerExtensions>,
): asserts e is T & CanvasMouseEvent {
): asserts e is T & CanvasPointerEvent {
let clientX_rel = e.clientX
let clientY_rel = e.clientY
@@ -4251,7 +4250,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
}
/** @returns If the pointer is over a link centre marker, the link segment it belongs to. Otherwise, `undefined`. */
#getLinkCentreOnPos(e: CanvasMouseEvent): LinkSegment | undefined {
#getLinkCentreOnPos(e: CanvasPointerEvent): LinkSegment | undefined {
for (const linkSegment of this.renderedPaths) {
const centre = linkSegment._pos
if (!centre) continue
@@ -5676,7 +5675,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
return LGraphCanvas.getBoundaryNodes(this.selected_nodes)
}
showLinkMenu(segment: LinkSegment, e: CanvasMouseEvent): boolean {
showLinkMenu(segment: LinkSegment, e: CanvasPointerEvent): boolean {
const { graph } = this
if (!graph) throw new NullGraphError()
@@ -6092,7 +6091,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
title: string,
value: any,
callback: (arg0: any) => void,
event: CanvasMouseEvent,
event: CanvasPointerEvent,
multiline?: boolean,
): HTMLDivElement {
const that = this
@@ -7505,7 +7504,7 @@ export class LGraphCanvas implements CustomEventDispatcher<LGraphCanvasEventMap>
return group.getMenuOptions()
}
processContextMenu(node: LGraphNode | undefined, event: CanvasMouseEvent): void {
processContextMenu(node: LGraphNode | undefined, event: CanvasPointerEvent): void {
const canvas = LGraphCanvas.active_canvas
const ref_window = canvas.getCanvasWindow()

24
src/LGraphNode.ts
View File

@@ -27,7 +27,7 @@ import type { LGraph } from "./LGraph"
import type { Reroute, RerouteId } from "./Reroute"
import type { SubgraphInputNode } from "./subgraph/SubgraphInputNode"
import type { SubgraphOutputNode } from "./subgraph/SubgraphOutputNode"
import type { CanvasMouseEvent } from "./types/events"
import type { CanvasPointerEvent } from "./types/events"
import type { NodeLike } from "./types/NodeLike"
import type { ISerialisedNode, SubgraphIO } from "./types/serialisation"
import type { IBaseWidget, IWidgetOptions, TWidgetType, TWidgetValue } from "./types/widgets"
@@ -566,7 +566,7 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
canvas: LGraphCanvas,
canvasElement: HTMLCanvasElement,
): void
onMouseLeave?(this: LGraphNode, e: CanvasMouseEvent): void
onMouseLeave?(this: LGraphNode, e: CanvasPointerEvent): void
/**
* Override the default slot menu options.
*/
@@ -585,10 +585,10 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
file: any,
): void
onDropFile?(this: LGraphNode, file: any): void
onInputClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
onInputDblClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
onOutputClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
onOutputDblClick?(this: LGraphNode, index: number, e: CanvasMouseEvent): void
onInputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
onInputDblClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
onOutputClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
onOutputDblClick?(this: LGraphNode, index: number, e: CanvasPointerEvent): void
// TODO: Return type
onGetPropertyInfo?(this: LGraphNode, property: string): any
onNodeOutputAdd?(this: LGraphNode, value: unknown): void
@@ -601,26 +601,26 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
this: LGraphNode,
entries: (IContextMenuValue<INodeSlotContextItem> | null)[],
): (IContextMenuValue<INodeSlotContextItem> | null)[]
onMouseUp?(this: LGraphNode, e: CanvasMouseEvent, pos: Point): void
onMouseEnter?(this: LGraphNode, e: CanvasMouseEvent): void
onMouseUp?(this: LGraphNode, e: CanvasPointerEvent, pos: Point): void
onMouseEnter?(this: LGraphNode, e: CanvasPointerEvent): void
/** Blocks drag if return value is truthy. @param pos Offset from {@link LGraphNode.pos}. */
onMouseDown?(
this: LGraphNode,
e: CanvasMouseEvent,
e: CanvasPointerEvent,
pos: Point,
canvas: LGraphCanvas,
): boolean
/** @param pos Offset from {@link LGraphNode.pos}. */
onDblClick?(
this: LGraphNode,
e: CanvasMouseEvent,
e: CanvasPointerEvent,
pos: Point,
canvas: LGraphCanvas,
): void
/** @param pos Offset from {@link LGraphNode.pos}. */
onNodeTitleDblClick?(
this: LGraphNode,
e: CanvasMouseEvent,
e: CanvasPointerEvent,
pos: Point,
canvas: LGraphCanvas,
): void
@@ -652,7 +652,7 @@ export class LGraphNode implements NodeLike, Positionable, IPinnable, IColorable
onRemoved?(this: LGraphNode): void
onMouseMove?(
this: LGraphNode,
e: MouseEvent,
e: CanvasPointerEvent,
pos: Point,
arg2: LGraphCanvas,
): void

4
src/types/widgets.ts
View File

@@ -1,6 +1,6 @@
import type { CanvasColour, Point, RequiredProps, Size } from "../interfaces"
import type { CanvasPointer, LGraphCanvas, LGraphNode } from "../litegraph"
import type { CanvasMouseEvent, CanvasPointerEvent } from "./events"
import type { CanvasPointerEvent } from "./events"
export interface IWidgetOptions<TValues = unknown[]> {
on?: string
@@ -207,7 +207,7 @@ export interface IBaseWidget<
canvas?: LGraphCanvas,
node?: LGraphNode,
pos?: Point,
e?: CanvasMouseEvent,
e?: CanvasPointerEvent,
): void
/**

6
src/widgets/BaseWidget.ts
View File

@@ -1,6 +1,6 @@
import type { Point } from "@/interfaces"
import type { CanvasPointer, LGraphCanvas, LGraphNode, Size } from "@/litegraph"
import type { CanvasMouseEvent, CanvasPointerEvent } from "@/types/events"
import type { CanvasPointerEvent } from "@/types/events"
import type { IBaseWidget } from "@/types/widgets"
import { drawTextInArea } from "@/draw"
@@ -24,7 +24,7 @@ export interface DrawTruncatingTextOptions extends DrawWidgetOptions {
}
export interface WidgetEventOptions {
e: CanvasMouseEvent
e: CanvasPointerEvent
node: LGraphNode
canvas: LGraphCanvas
}
@@ -75,7 +75,7 @@ export abstract class BaseWidget<TWidget extends IBaseWidget = IBaseWidget> impl
canvas?: LGraphCanvas,
node?: LGraphNode,
pos?: Point,
e?: CanvasMouseEvent,
e?: CanvasPointerEvent,
): void
mouse?(event: CanvasPointerEvent, pointerOffset: Point, node: LGraphNode): boolean
computeSize?(width?: number): Size