✨ type support on addWidget

lenML · May 29, 2024 · 78153fe · 78153fe
1 parent 437a2b4
commit 78153fe
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 20 deletions.
diff --git a/apps/editor/src/main.ts b/apps/editor/src/main.ts
@@ -24,9 +24,9 @@ LiteGraph.node_images_path = "litegraph-ts/nodes_data";
 
 const editor = new Editor("main", { miniwindow: false });
 editor.graphCanvas.pause_rendering = false;
-(window as any).editor = editor;
 
 window["editor"] = editor;
+window["LiteGraph"] = LiteGraph;
 
 window.addEventListener("resize", () => {
     editor.graphCanvas.resize();

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@litegraph-ts/core",
-    "version": "0.2.23",
+    "version": "0.2.24",
     "description": "A graph node editor similar to PD or UDK Blueprints. It works in an HTML5 Canvas and allows to export graphs to be included in applications.",
     "source": "src/index.ts",
     "types": "src/index.ts",

diff --git a/packages/core/src/INodeSlot.ts b/packages/core/src/INodeSlot.ts
@@ -1,7 +1,9 @@
 import type { Dir, SlotShape, SlotType, Vector2 } from "./types";
 import LLink from "./LLink";
 
-/** https://github.com/jagenjo/litegraph.js/tree/master/guides#node-slots */
+/**
+ * https://github.com/lenML/litegraph.ts/blob/master/GUIDE.md#node-slots
+ * */
 export default interface INodeSlot {
     name: string;
     type: SlotType;

diff --git a/packages/core/src/IWidget.ts b/packages/core/src/IWidget.ts
@@ -70,7 +70,7 @@ export default interface IWidget<TOptions = any, TValue = any> {
 
     onRemoved?(): void;
 }
-export interface IButtonWidget extends IWidget<{}, null> {
+export interface IButtonWidget extends IWidget<WidgetPanelOptions, null> {
     type: "button";
 }
 export interface IToggleWidgetOptions extends WidgetPanelOptions {
@@ -109,7 +109,7 @@ export interface ITextWidgetOptions extends WidgetPanelOptions {
     inputStyle?: Partial<CSSStyleDeclaration>;
     max_length?: number;
 }
-export interface ITextWidget extends IWidget<{}, string> {
+export interface ITextWidget extends IWidget<WidgetPanelOptions, string> {
     type: "text";
 }
 export interface IEnumWidgetOptions extends WidgetPanelOptions {
@@ -118,3 +118,12 @@ export interface IEnumWidgetOptions extends WidgetPanelOptions {
 export interface IEnumWidget extends IWidget<IEnumWidgetOptions, string[]> {
     type: "enum";
 }
+
+export type AllBuiltinWidget =
+    | IButtonWidget
+    | IComboWidget
+    | IEnumWidget
+    | ITextWidget
+    | INumberWidget
+    | ISliderWidget
+    | IToggleWidget;
diff --git a/packages/core/src/LGraphNode.ts b/packages/core/src/LGraphNode.ts
@@ -10,7 +10,18 @@ import type {
     SlotNameOrIndex,
 } from "./INodeSlot";
 import type { default as IProperty, IPropertyInfo } from "./IProperty";
-import type { default as IWidget, WidgetCallback } from "./IWidget";
+import type {
+    AllBuiltinWidget,
+    IButtonWidget,
+    IComboWidget,
+    IEnumWidget,
+    INumberWidget,
+    ISliderWidget,
+    ITextWidget,
+    IToggleWidget,
+    default as IWidget,
+    WidgetCallback,
+} from "./IWidget";
 import LGraph, { LGraphRemoveNodeOptions } from "./LGraph";
 import LGraphCanvas, { type INodePanel } from "./LGraphCanvas";
 import LLink from "./LLink";
@@ -97,14 +108,24 @@ export type PropertyLayout = {
     options?: Partial<IPropertyInfo>;
 }[];
 
+type WidgetLayoutItem<T extends IWidget = IWidget> = {
+    type: T["type"];
+    name: string;
+    value: T["value"];
+    callback?: WidgetCallback<T> | string;
+    options?: T["options"];
+};
+
 export type WidgetLayout = (
-    | {
-          type: IWidget["type"];
-          name: string;
-          value: IWidget["value"];
-          callback?: WidgetCallback<IWidget> | string;
-          options?: IWidget["options"];
-      }
+    | WidgetLayoutItem
+    // TODO
+    // | WidgetLayoutItem<IButtonWidget>
+    // | WidgetLayoutItem<ISliderWidget>
+    // | WidgetLayoutItem<IEnumWidget>
+    // | WidgetLayoutItem<INumberWidget>
+    // | WidgetLayoutItem<ITextWidget>
+    // | WidgetLayoutItem<IComboWidget>
+    // | WidgetLayoutItem<IToggleWidget>
     | {
           widget: (n: LGraphNode) => IWidget;
       }
@@ -159,7 +180,9 @@ export type SerializedLGraphNode<T extends LGraphNode = LGraphNode> = {
     widgets_values?: IWidget["value"][];
 };
 
-/** https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#lgraphnode */
+/**
+ * https://github.com/lenML/litegraph.ts/blob/master/GUIDE.md#lgraphnode
+ */
 export default class LGraphNode {
     get slotLayout(): SlotLayout {
         if ("slotLayout" in this.constructor) {
@@ -1938,10 +1961,52 @@ export default class LGraphNode {
     }
 
     /**
-     * https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#node-widgets
+     * https://github.com/lenML/litegraph.ts/blob/master/GUIDE.md#node-widgets
      * @return created widget
      */
-    addWidget<T extends IWidget>(
+    addWidget(
+        type: "toggle",
+        name: string,
+        value: IToggleWidget["value"],
+        callback?: WidgetCallback<IToggleWidget> | string,
+        options?: IToggleWidget["options"],
+    ): IToggleWidget;
+    addWidget(
+        type: "slider",
+        name: string,
+        value: ISliderWidget["value"],
+        callback?: WidgetCallback<ISliderWidget> | string,
+        options?: ISliderWidget["options"],
+    ): ISliderWidget;
+    addWidget(
+        type: "number",
+        name: string,
+        value: INumberWidget["value"],
+        callback?: WidgetCallback<INumberWidget> | string,
+        options?: INumberWidget["options"],
+    ): INumberWidget;
+    addWidget(
+        type: "text",
+        name: string,
+        value: ITextWidget["value"],
+        callback?: WidgetCallback<ITextWidget> | string,
+        options?: ITextWidget["options"],
+    ): ITextWidget;
+    addWidget(
+        type: "enum",
+        name: string,
+        value: IEnumWidget["value"],
+        callback?: WidgetCallback<IEnumWidget> | string,
+        options?: IEnumWidget["options"],
+    ): IEnumWidget;
+    addWidget(
+        type: "button",
+        name: string,
+        value: IButtonWidget["value"],
+        callback?: WidgetCallback<IButtonWidget> | string,
+        options?: IButtonWidget["options"],
+    ): IButtonWidget;
+    addWidget<T extends AllBuiltinWidget>(
         type: T["type"],
         name: string,
         value: T["value"],
@@ -1990,7 +2055,7 @@ export default class LGraphNode {
                 "LiteGraph addWidget(...) without a callback or property assigned",
             );
         }
-        if (type == "combo" && !w.options.values) {
+        if (w.type === "combo" && !w.options.values) {
             throw "LiteGraph addWidget('combo',...) requires to pass values in options: { values:['red','blue'] }";
         }
         this.widgets.push(w);
@@ -3443,7 +3508,9 @@ export default class LGraphNode {
         });
     }
 
-    // https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#custom-node-appearance
+    /**
+     * https://github.com/lenML/litegraph.ts/blob/master/GUIDE.md#custom-node-appearance
+     */
     onDrawBackground?(
         ctx: CanvasRenderingContext2D,
         graphCanvas: LGraphCanvas,
@@ -3496,7 +3563,9 @@ export default class LGraphNode {
 
     onBounding?(area: Float32Array): boolean;
 
-    // https://github.com/jagenjo/litegraph.js/blob/master/guides/README.md#custom-node-behaviour
+    /**
+     * https://github.com/lenML/litegraph.ts/blob/master/GUIDE.md#custom-node-appearance
+     */
     onMouseDown?(
         event: MouseEventExt,
         pos: Vector2,

diff --git a/packages/core/src/LiteGraph.ts b/packages/core/src/LiteGraph.ts
@@ -542,7 +542,7 @@ export default class LiteGraph {
                     node.addCustomWidget(widget);
                 } else {
                     const { name, type, value, callback, options } = item;
-                    node.addWidget(type, name, value, callback, options);
+                    node.addWidget(type as any, name, value, callback, options);
                 }
             }
         }