Add CanvasPointer callback for node widgets

[webfiltered]

CanvasPointer API - Widgets

Adds onPointerDown callback to node widgets. A few benefits of the new API:

• Simplified usage
• Exposes callbacks like "double click", removing the need to time / measure multiple pointer events
• Unified UX - same API as used in the rest of Litegraph
• Honours the user's click speed and pointer accuracy settings

Usage

// Callbacks for each pointer action can be configured ahead of time
widget.onPointerDown = function (pointer, node, canvas) {
  const e = pointer.eDown
  const offsetFromNode = [
    e.canvasX - node.pos[0],
    e.canvasY - node.pos[1],
  ]

  // Click events - no overlap with drag events
  pointer.onClick = (upEvent) => {
    // Provides access to the whole lifecycle of events in every callback
    console.log(pointer.eDown)
    console.log(pointer.eMove ?? "Pointer didn't move")
    console.log(pointer.eUp)
  }
  pointer.onDoubleClick = (upEvent) => this.customFunction(upEvent)

  // Runs once before the first onDrag event
  pointer.onDragStart = () => {}
  // Receives every movement event
  pointer.onDrag = (moveEvent) => {}
  // The pointerup event of a drag
  pointer.onDragEnd = (upEvent) => {}

  // Semantics of a "finally" block (try/catch).  Once set, the block always executes.
  pointer.finally = () => {}

  // Return true to cancel regular Litegraph handling of this click / drag
  return true
}

TypeScript & JSDoc

Full documentation and typing is available in the IDE. It can be added to your JS projects using the @comfyorg/litegraph npm package and used in mainstream editors.

/** @import { IWidget } from './path/to/@comfyorg/litegraph/litegraph.d.ts' */
/** @type IWidget */
const widget = node.widgets[0]
widget.onPointerDown = function (pointer, node, canvas) { }

VS Code