Typescript conversion 0.7.84 (#194)

* Convert litegraph.js to TS

* Overhaul static litegraph.d.ts with updated types

* Fix rename oversights and revert fix unused param

- Some functions were broken by merging updated TS function signatures which included param renames
- Removal of unused params does not belong in the TS conversion PR, and has been reverted

* Remove legacy static .d.ts file

* Add callback decl from #180

Support allowing links to widgets (#180)
c23e610c11

* Convert NodeId to string | number

Results in significantly less downstream changes, despite being a change from the old static file.

---------

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>

src/types/events.ts

@@ -0,0 +1,40 @@
+/**
+ * Event interfaces for event extension
+ */
+
+/** For Canvas*Event - adds graph space co-ordinates (property names are shipped) */
+export interface ICanvasPosition {
+    /** X co-ordinate of the event, in graph space (NOT canvas space) */
+    canvasX?: number
+    /** Y co-ordinate of the event, in graph space (NOT canvas space) */
+    canvasY?: number
+}
+
+/** For Canvas*Event */
+export interface IDeltaPosition {
+    deltaX?: number
+    deltaY?: number
+}
+
+/** PointerEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasPointerEvent extends PointerEvent, CanvasMouseEvent { }
+
+/** MouseEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasMouseEvent extends MouseEvent, ICanvasPosition, IDeltaPosition {
+    dragging?: boolean
+    click_time?: number
+    dataTransfer?: unknown
+}
+
+/** WheelEvent with canvasX/Y properties */
+export interface CanvasWheelEvent extends WheelEvent, ICanvasPosition {
+    dragging?: boolean
+    click_time?: number
+    dataTransfer?: unknown
+}
+
+/** DragEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasDragEvent extends DragEvent, ICanvasPosition, IDeltaPosition { }
+
+/** TouchEvent with canvasX/Y and deltaX/Y properties */
+export interface CanvasTouchEvent extends TouchEvent, ICanvasPosition, IDeltaPosition { }

src/types/globalEnums.ts

@@ -0,0 +1,51 @@
+/** Node slot type - input or output */
+export enum NodeSlotType {
+    INPUT = 1,
+    OUTPUT = 2,
+}
+
+/** Shape that an object will render as - used by nodes and slots */
+export enum RenderShape {
+    BOX = 1,
+    ROUND = 2,
+    CIRCLE = 3,
+    CARD = 4,
+    ARROW = 5,
+    /** intended for slot arrays */
+    GRID = 6,
+}
+
+/** The direction that a link point will flow towards - e.g. horizontal outputs are right by default */
+export enum LinkDirection {
+    NONE = 0,
+    UP = 1,
+    DOWN = 2,
+    LEFT = 3,
+    RIGHT = 4,
+    CENTER = 5,
+}
+
+/** The path calculation that links follow */
+export enum LinkRenderType {
+    /** Juts out from the input & output a little @see LinkDirection, then a straight line between them */
+    STRAIGHT_LINK = 0,
+    /** 90° angles, clean and box-like */
+    LINEAR_LINK = 1,
+    /** Smooth curved links - default */
+    SPLINE_LINK = 2,
+}
+
+export enum TitleMode {
+    NORMAL_TITLE = 0,
+    NO_TITLE = 1,
+    TRANSPARENT_TITLE = 2,
+    AUTOHIDE_TITLE = 3,
+}
+
+export enum LGraphEventMode {
+    ALWAYS = 0,
+    ON_EVENT = 1,
+    NEVER = 2,
+    ON_TRIGGER = 3,
+    BYPASS = 4,
+}

src/types/serialisation.ts

@@ -0,0 +1,61 @@
+import type { CanvasColour, 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"
+import type { LiteGraph } from "@/litegraph"
+import type { LinkId, LLink } from "@/LLink"
+import type { TWidgetValue } from "@/types/widgets"
+
+/** Serialised LGraphNode */
+export interface ISerialisedNode {
+    title?: string
+    id?: NodeId
+    type?: string
+    pos?: Point
+    size?: Size
+    flags?: INodeFlags
+    order?: number
+    mode?: number
+    outputs?: INodeOutputSlot[]
+    inputs?: INodeInputSlot[]
+    properties?: Dictionary<unknown>
+    shape?: Rect
+    boxcolor?: CanvasColour
+    color?: CanvasColour
+    bgcolor?: string
+    widgets_values?: TWidgetValue[]
+}
+
+/** Contains serialised graph elements */
+export type ISerialisedGraph<
+    TNode = ReturnType<LGraphNode["serialize"]>,
+    TLink = ReturnType<LLink["serialize"]>,
+    TGroup = ReturnType<LGraphGroup["serialize"]>
+> = {
+    last_node_id: LGraph["last_node_id"]
+    last_link_id: LGraph["last_link_id"]
+    last_reroute_id: LGraph["last_reroute_id"]
+    nodes: TNode[]
+    links: TLink[] | LLink[]
+    groups: TGroup[]
+    config: LGraph["config"]
+    version: typeof LiteGraph.VERSION
+    extra?: unknown
+}
+
+/** Serialised LGraphGroup */
+export interface ISerialisedGroup {
+    title: string
+    bounding: number[]
+    color: string
+    font_size: number
+    flags?: IGraphGroupFlags
+}
+
+export type TClipboardLink = [targetRelativeIndex: number, originSlot: number, nodeRelativeIndex: number, targetSlot: number, targetNodeId: NodeId]
+
+/** */
+export interface IClipboardContents {
+    nodes?: ISerialisedNode[]
+    links?: TClipboardLink[]
+}

src/types/widgets.ts

@@ -0,0 +1,124 @@
+import { CanvasColour, Point, Size } from "@/interfaces"
+import type { LGraphCanvas, LGraphNode } from "@/litegraph"
+import type { CanvasMouseEvent } from "./events"
+
+export interface IWidgetOptions<TValue = unknown> extends Record<string, unknown> {
+    on?: string
+    off?: string
+    max?: number
+    min?: number
+    slider_color?: CanvasColour
+    marker_color?: CanvasColour
+    precision?: number
+    read_only?: boolean
+    step?: number
+    y?: number
+    multiline?: boolean
+    // TODO: Confirm this
+    property?: string
+
+    hasOwnProperty?(arg0: string): any
+    // values?(widget?: IWidget, node?: LGraphNode): any
+    values?: TValue[]
+    callback?: IWidget["callback"]
+
+    onHide?(widget: IWidget): void
+}
+
+/**
+ * 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.
+ * Recommend declaration merging any properties that use IWidget (e.g. {@link LGraphNode.widgets}) with a new type alias.
+ * @see ICustomWidget
+ */
+export type IWidget = IBooleanWidget | INumericWidget | IStringWidget | IMultilineStringWidget | IComboWidget | ICustomWidget
+
+export interface IBooleanWidget extends IBaseWidget {
+    type?: "toggle"
+    value: boolean
+}
+
+/** Any widget that uses a numeric backing */
+export interface INumericWidget extends IBaseWidget {
+    type?: "slider" | "number"
+    value: number
+}
+
+/** A combo-box widget (dropdown, select, etc) */
+export interface IComboWidget extends IBaseWidget {
+    type?: "combo"
+    value: string | number
+    options: IWidgetOptions<string>
+}
+
+export type IStringWidgetType = IStringWidget["type"] | IMultilineStringWidget["type"]
+
+/** A widget with a string value */
+export interface IStringWidget extends IBaseWidget {
+    type?: "string" | "text" | "button"
+    value: string
+}
+
+/** A widget with a string value and a multiline text input */
+export interface IMultilineStringWidget<TElement extends HTMLElement = HTMLTextAreaElement> extends IBaseWidget {
+    type?: "multiline"
+    value: string
+
+    /** HTML textarea element  */
+    element?: TElement
+}
+
+/** A custom widget - accepts any value and has no built-in special handling */
+export interface ICustomWidget<TElement extends HTMLElement = HTMLElement> extends IBaseWidget<TElement> {
+    type?: "custom"
+    value: string | object
+
+    element?: TElement
+}
+
+
+/**
+ * Valid widget types.  TS cannot provide easily extensible type safety for this at present.
+ * Override linkedWidgets[]
+ * Values not in this list will not result in litegraph errors, however they will be treated the same as "custom".
+ */
+export type TWidgetType = IWidget["type"]
+export type TWidgetValue = IWidget["value"]
+
+/**
+ * The base type for all widgets.  Should not be implemented directly.
+ * @see IWidget
+ */
+export interface IBaseWidget<TElement extends HTMLElement = HTMLElement> {
+    linkedWidgets?: IWidget[]
+
+    options: IWidgetOptions
+    marker?: number
+    label?: string
+    clicked?: boolean
+    name?: string
+    /** Widget type (see {@link TWidgetType}) */
+    type?: TWidgetType
+    value?: TWidgetValue
+    y?: number
+    last_y?: number
+    width?: number
+    disabled?: boolean
+
+    tooltip?: string
+
+    /** HTML widget element  */
+    element?: TElement
+
+    // TODO: Confirm this format
+    callback?(value: any, canvas?: LGraphCanvas, node?: LGraphNode, pos?: Point, e?: CanvasMouseEvent): void
+    onRemove?(): void
+    beforeQueued?(): void
+
+    mouse?(event: CanvasMouseEvent, arg1: number[], node: LGraphNode): boolean
+    draw?(ctx: CanvasRenderingContext2D, node: LGraphNode, widget_width: number, y: number, H: number): void
+    computeSize?(width: number): Size
+}