@codebolt/litegraph 0.0.1

package/LICENSE

@@ -0,0 +1,19 @@
+Copyright (C) 2013 by Javi Agenjo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+
+# @codebolt/litegraph
+
+This is the litegraph version used in [ComfyUI_frontend](https://github.com/Comfy-Org/ComfyUI_frontend).
+
+It is a fork of the original `litegraph.js`. Some APIs may by unchanged, however it is largely incompatible with the original.
+
+Some early highlights:
+
+- Accumulated comfyUI custom changes (2024-01 ~ 2024-05) (https://github.com/Comfy-Org/litegraph.js/pull/1)
+- Type schema change for ComfyUI_frontend TS migration (https://github.com/Comfy-Org/litegraph.js/pull/3)
+- Zoom fix (https://github.com/Comfy-Org/litegraph.js/pull/7)
+- Emit search box triggering custom events (<https://github.com/Comfy-Org/litegraph.js/pull/10>)
+- Truncate overflowing combo widget text (<https://github.com/Comfy-Org/litegraph.js/pull/17>)
+- Sort node based on ID on graph serialization (<https://github.com/Comfy-Org/litegraph.js/pull/21>)
+- Fix empty input not used when connecting links (<https://github.com/Comfy-Org/litegraph.js/pull/24>)
+- Batch output connection move/disconnect (<https://github.com/Comfy-Org/litegraph.js/pull/39>)
+- And now with hundreds more...
+
+# Install
+
+`npm i @codebolt/litegraph`
+
+# litegraph.js
+
+A TypeScript library to create graphs in the browser similar to Unreal Blueprints.
+
+<details>
+
+<summary>Description of the original litegraph.js</summary>
+
+A library in Javascript to create graphs in the browser similar to Unreal Blueprints. Nodes can be programmed easily and it includes an editor to construct and tests the graphs.
+
+It can be integrated easily in any existing web applications and graphs can be run without the need of the editor.
+
+</details>
+
+![Node Graph](imgs/node_graph_example.png "Node graph example")
+
+## Features
+
+- Renders on Canvas2D (zoom in/out and panning, easy to render complex interfaces, can be used inside a WebGLTexture)
+- Easy to use editor (searchbox, keyboard shortcuts, multiple selection, context menu, ...)
+- Optimized to support hundreds of nodes per graph (on editor but also on execution)
+- Customizable theme (colors, shapes, background)
+- Callbacks to personalize every action/drawing/event of nodes
+- Graphs can be executed in NodeJS
+- Highly customizable nodes (color, shape, widgets, custom rendering)
+- Easy to integrate in any JS application (one single file, no dependencies)
+- Typescript support
+
+## Installation
+
+You can install it using npm
+
+```bash
+npm install @comfyorg/litegraph
+```
+
+## How to code a new Node type
+
+Here is an example of how to build a node that sums two inputs:
+
+```ts
+import { LiteGraph, LGraphNode } from "./litegraph"
+
+class MyAddNode extends LGraphNode {
+  // Name to show
+  title = "Sum"
+
+  constructor() {
+    this.addInput("A", "number")
+    this.addInput("B", "number")
+    this.addOutput("A+B", "number")
+    this.properties.precision = 1
+  }
+
+  // Function to call when the node is executed
+  onExecute() {
+    var A = this.getInputData(0)
+    if (A === undefined) A = 0
+    var B = this.getInputData(1)
+    if (B === undefined) B = 0
+    this.setOutputData(0, A + B)
+  }
+}
+
+// Register the node type
+LiteGraph.registerNodeType("basic/sum", MyAddNode)
+```
+
+## Server side
+
+It also works server-side using NodeJS although some nodes do not work in server (audio, graphics, input, etc).
+
+```ts
+import { LiteGraph, LGraph } from "./litegraph.js"
+
+const graph = new LGraph()
+
+const firstNode = LiteGraph.createNode("basic/sum")
+graph.add(firstNode)
+
+const secondNode = LiteGraph.createNode("basic/sum")
+graph.add(secondNode)
+
+firstNode.connect(0, secondNode, 1)
+
+graph.start()
+```
+
+## Projects using it
+
+### [ComfyUI](https://github.com/comfyanonymous/ComfyUI)
+
+![ComfyUI default workflow](https://github.com/comfyanonymous/ComfyUI/blob/6efe561c2a7321501b1b27f47039c7616dda1860/comfyui_screenshot.png "ComfyUI default workflow")
+
+### Projects using the original litegraph.js
+
+<details>
+
+<summary>Click to expand</summary>
+
+### [webglstudio.org](http://webglstudio.org)
+
+![WebGLStudio](imgs/webglstudio.gif "WebGLStudio")
+
+### [MOI Elephant](http://moiscript.weebly.com/elephant-systegraveme-nodal.html)
+
+![MOI Elephant](imgs/elephant.gif "MOI Elephant")
+
+### Mynodes
+
+![MyNodes](imgs/mynodes.png "MyNodes")
+
+</details>
+
+## Feedback
+
+Please [open an issue](https://github.com/codebolt/litegraph.js/issues/) on the GitHub repo.
+
+# Development
+
+Litegraph has no runtime dependencies. The build tooling has been tested on Node.JS 20.18.x
+
+## Releasing
+
+Use GitHub actions to release normal versions.
+
+1. Run the `Release a New Version` action, selecting the version incrment type
+1. Merge the resultion PR
+1. A GitHub release is automatically published on merge
+
+### Pre-release
+
+The action directly translates `Version increment type` to the npm version command. `Pre-release ID (suffix)` is the option for the `--preid` argument.
+
+e.g. Use `prerelease` increment type to automatically bump the patch version and create a pre-release version. Subsequent runs of prerelease will update the prerelease version only.
+Use `patch` when ready to remove the pre-release suffix.
+
+

package/dist/CanvasPointer.d.ts

@@ -0,0 +1,120 @@
+import { CompassCorners } from './interfaces';
+import { CanvasPointerEvent } from './types/events';
+/**
+ * Allows click and drag actions to be declared ahead of time during a pointerdown event.
+ *
+ * By default, it retains the most recent event of each type until it is reset (on pointerup).
+ * - {@link eDown}
+ * - {@link eMove}
+ * - {@link eUp}
+ *
+ * Depending on whether the user clicks or drags the pointer, only the appropriate callbacks are called:
+ * - {@link onClick}
+ * - {@link onDoubleClick}
+ * - {@link onDragStart}
+ * - {@link onDrag}
+ * - {@link onDragEnd}
+ * - {@link finally}
+ * @see
+ * - {@link LGraphCanvas.processMouseDown}
+ * - {@link LGraphCanvas.processMouseMove}
+ * - {@link LGraphCanvas.processMouseUp}
+ */
+export declare class CanvasPointer {
+    #private;
+    /** Maximum time in milliseconds to ignore click drift */
+    static bufferTime: number;
+    /** Maximum gap between pointerup and pointerdown events to be considered as a double click */
+    static doubleClickTime: number;
+    /** Maximum offset from click location */
+    static get maxClickDrift(): number;
+    static set maxClickDrift(value: number);
+    /** The element this PointerState should capture input against when dragging. */
+    element: Element;
+    /** Pointer ID used by drag capture. */
+    pointerId?: number;
+    /** Set to true when if the pointer moves far enough after a down event, before the corresponding up event is fired. */
+    dragStarted: boolean;
+    /** The {@link eUp} from the last successful click */
+    eLastDown?: CanvasPointerEvent;
+    /** Used downstream for touch event support. */
+    isDouble: boolean;
+    /** Used downstream for touch event support. */
+    isDown: boolean;
+    /** The resize handle currently being hovered or dragged */
+    resizeDirection?: CompassCorners;
+    /**
+     * If `true`, {@link eDown}, {@link eMove}, and {@link eUp} will be set to
+     * `undefined` when {@link reset} is called.
+     *
+     * Default: `true`
+     */
+    clearEventsOnReset: boolean;
+    /** The last pointerdown event for the primary button */
+    eDown?: CanvasPointerEvent;
+    /** The last pointermove event for the primary button */
+    eMove?: CanvasPointerEvent;
+    /** The last pointerup event for the primary button */
+    eUp?: CanvasPointerEvent;
+    /**
+     * If set, as soon as the mouse moves outside the click drift threshold, this action is run once.
+     * @param pointer [DEPRECATED] This parameter will be removed in a future release.
+     * @param eMove The pointermove event of this ongoing drag action.
+     *
+     * It is possible for no `pointermove` events to occur, but still be far from
+     * the original `pointerdown` event. In this case, {@link eMove} will be null, and
+     * {@link onDragEnd} will be called immediately after {@link onDragStart}.
+     */
+    onDragStart?(pointer: this, eMove?: CanvasPointerEvent): unknown;
+    /**
+     * Called on pointermove whilst dragging.
+     * @param eMove The pointermove event of this ongoing drag action
+     */
+    onDrag?(eMove: CanvasPointerEvent): unknown;
+    /**
+     * Called on pointerup after dragging (i.e. not called if clicked).
+     * @param upEvent The pointerup or pointermove event that triggered this callback
+     */
+    onDragEnd?(upEvent: CanvasPointerEvent): unknown;
+    /**
+     * Callback that will be run once, the next time a pointerup event appears to be a normal click.
+     * @param upEvent The pointerup or pointermove event that triggered this callback
+     */
+    onClick?(upEvent: CanvasPointerEvent): unknown;
+    /**
+     * Callback that will be run once, the next time a pointerup event appears to be a normal click.
+     * @param upEvent The pointerup or pointermove event that triggered this callback
+     */
+    onDoubleClick?(upEvent: CanvasPointerEvent): unknown;
+    /**
+     * Run-once callback, called at the end of any click or drag, whether or not it was successful in any way.
+     *
+     * The setter of this callback will call the existing value before replacing it.
+     * Therefore, simply setting this value twice will execute the first callback.
+     */
+    get finally(): (() => unknown) | undefined;
+    set finally(value: (() => unknown) | undefined);
+    constructor(element: Element);
+    /**
+     * Callback for `pointerdown` events.  To be used as the event handler (or called by it).
+     * @param e The `pointerdown` event
+     */
+    down(e: CanvasPointerEvent): void;
+    /**
+     * Callback for `pointermove` events.  To be used as the event handler (or called by it).
+     * @param e The `pointermove` event
+     */
+    move(e: CanvasPointerEvent): void;
+    /**
+     * Callback for `pointerup` events.  To be used as the event handler (or called by it).
+     * @param e The `pointerup` event
+     */
+    up(e: CanvasPointerEvent): boolean;
+    /**
+     * Resets the state of this {@link CanvasPointer} instance.
+     *
+     * The {@link finally} callback is first executed, then all callbacks and intra-click
+     * state is cleared.
+     */
+    reset(): void;
+}

package/dist/ContextMenu.d.ts

@@ -0,0 +1,41 @@
+import { ContextMenuDivElement, IContextMenuOptions, IContextMenuValue } from './interfaces';
+export interface ContextMenu<TValue = unknown> {
+    constructor: new (...args: ConstructorParameters<typeof ContextMenu<TValue>>) => ContextMenu<TValue>;
+}
+/**
+ * ContextMenu from LiteGUI
+ */
+export declare class ContextMenu<TValue = unknown> {
+    options: IContextMenuOptions<TValue>;
+    parentMenu?: ContextMenu<TValue>;
+    root: ContextMenuDivElement<TValue>;
+    current_submenu?: ContextMenu<TValue>;
+    lock?: boolean;
+    controller: AbortController;
+    /**
+     * @todo Interface for values requires functionality change - currently accepts
+     * an array of strings, functions, objects, nulls, or undefined.
+     * @param values (allows object { title: "Nice text", callback: function ... })
+     * @param options [optional] Some options:\
+     * - title: title to show on top of the menu
+     * - callback: function to call when an option is clicked, it receives the item information
+     * - ignore_item_callbacks: ignores the callback inside the item, it just calls the options.callback
+     * - event: you can pass a MouseEvent, this way the ContextMenu appears in that position
+     */
+    constructor(values: readonly (string | IContextMenuValue<TValue> | null)[], options: IContextMenuOptions<TValue>);
+    /**
+     * Checks if {@link node} is inside this context menu or any of its submenus
+     * @param node The {@link Node} to check
+     * @param visited A set of visited menus to avoid circular references
+     * @returns `true` if {@link node} is inside this context menu or any of its submenus
+     */
+    containsNode(node: Node, visited?: Set<this>): boolean;
+    addItem(name: string | null, value: string | IContextMenuValue<TValue> | null, options: IContextMenuOptions<TValue>): HTMLElement;
+    close(e?: MouseEvent, ignore_parent_menu?: boolean): void;
+    /** @deprecated Likely unused, however code search was inconclusive (too many results to check by hand). */
+    static trigger(element: HTMLDivElement, event_name: string, params: MouseEvent): CustomEvent;
+    getTopMenu(): ContextMenu<TValue>;
+    getFirstEvent(): MouseEvent | undefined;
+    /** @deprecated Unused. */
+    static isCursorOverElement(event: MouseEvent, element: HTMLDivElement): boolean;
+}

package/dist/CurveEditor.d.ts

@@ -0,0 +1,18 @@
+import { Point, Rect } from './interfaces';
+import { LGraphCanvas } from './litegraph';
+export declare class CurveEditor {
+    points: Point[];
+    selected: number;
+    nearest: number;
+    size: Rect | null;
+    must_update: boolean;
+    margin: number;
+    _nearest?: number;
+    constructor(points: Point[]);
+    static sampleCurve(f: number, points: Point[]): number | undefined;
+    draw(ctx: CanvasRenderingContext2D, size: Rect, graphcanvas?: LGraphCanvas, background_color?: string, line_color?: string, inactive?: boolean): void;
+    onMouseDown(localpos: Point, graphcanvas: LGraphCanvas): boolean | undefined;
+    onMouseMove(localpos: Point, graphcanvas: LGraphCanvas): void;
+    onMouseUp(): boolean;
+    getCloserPoint(pos: Point, max_dist: number): number;
+}

package/dist/DragAndScale.d.ts

@@ -0,0 +1,67 @@
+import { Point, ReadOnlyRect, Rect } from './interfaces';
+import { EaseFunction, Rectangle } from './litegraph';
+export interface DragAndScaleState {
+    /**
+     * The offset from the top-left of the current canvas viewport to `[0, 0]` in graph space.
+     * Or said another way, the inverse offset of the viewport.
+     */
+    offset: [number, number];
+    /** The scale of the graph. */
+    scale: number;
+}
+export type AnimationOptions = {
+    /** Duration of the animation in milliseconds. */
+    duration?: number;
+    /** Relative target zoom level. 1 means the view is fit exactly on the bounding box. */
+    zoom?: number;
+    /** The animation easing function (curve) */
+    easing?: EaseFunction;
+};
+export declare class DragAndScale {
+    #private;
+    /**
+     * The state of this DragAndScale instance.
+     *
+     * Implemented as a POCO that can be proxied without side-effects.
+     */
+    state: DragAndScaleState;
+    lastState: DragAndScaleState;
+    /** Maximum scale (zoom in) */
+    max_scale: number;
+    /** Minimum scale (zoom out) */
+    min_scale: number;
+    enabled: boolean;
+    last_mouse: Point;
+    element: HTMLCanvasElement;
+    visible_area: Rectangle;
+    dragging?: boolean;
+    viewport?: Rect;
+    onredraw?(das: DragAndScale): void;
+    onChanged?(scale: number, offset: Point): void;
+    get offset(): [number, number];
+    set offset(value: Point);
+    get scale(): number;
+    set scale(value: number);
+    constructor(element: HTMLCanvasElement);
+    computeVisibleArea(viewport: Rect | undefined): void;
+    toCanvasContext(ctx: CanvasRenderingContext2D): void;
+    convertOffsetToCanvas(pos: Point): Point;
+    convertCanvasToOffset(pos: Point, out?: Point): Point;
+    /** @deprecated Has not been kept up to date */
+    mouseDrag(x: number, y: number): void;
+    changeScale(value: number, zooming_center?: Point, roundToScaleOne?: boolean): void;
+    changeDeltaScale(value: number, zooming_center?: Point): void;
+    /**
+     * Fits the view to the specified bounds.
+     * @param bounds The bounds to fit the view to, defined by a rectangle.
+     */
+    fitToBounds(bounds: ReadOnlyRect, { zoom }?: {
+        zoom?: number;
+    }): void;
+    /**
+     * Starts an animation to fit the view around the specified selection of nodes.
+     * @param bounds The bounds to animate the view to, defined by a rectangle.
+     */
+    animateToBounds(bounds: ReadOnlyRect, setDirty: () => void, { duration, zoom, easing, }?: AnimationOptions): void;
+    reset(): void;
+}