@elicdavis/node-flow 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,761 @@
+interface Vector2 {
+    x: number;
+    y: number;
+}
+
+declare enum FontWeight {
+    Normal = "",
+    Bold = "bold"
+}
+declare enum FontStyle {
+    Normal = "",
+    Italic = "italic"
+}
+interface TextStyleConfig {
+    size?: number;
+    color?: string;
+    font?: string;
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+
+interface ContextMenuItemConfig {
+    name?: string;
+    textStyle?: TextStyleConfig;
+    group?: string;
+    callback?: () => void;
+}
+interface ContextMenuConfig {
+    name?: string;
+    textStyle?: TextStyleConfig;
+    group?: string;
+    subMenus?: Array<ContextMenuConfig>;
+    items?: Array<ContextMenuItemConfig>;
+}
+
+declare class Camera {
+    zoom: number;
+    position: Vector2;
+    constructor();
+    screenSpaceToGraphSpace(screenPosition: Vector2, out: Vector2): void;
+    graphSpaceToScreenSpace(graphPosition: Vector2, out: Vector2): void;
+    reset(): void;
+}
+
+interface ConnectionRendererParams {
+    ctx: CanvasRenderingContext2D;
+    start: Vector2;
+    end: Vector2;
+    graphScale: number;
+    mouseOver: boolean;
+    inNode: FlowNode | null;
+    inPort: Port | null;
+    outNode: FlowNode | null;
+    outPort: Port | null;
+}
+type ConnectionRenderer = (params: ConnectionRendererParams) => void;
+declare class Connection {
+    #private;
+    constructor(inNode: FlowNode | null, inNodePortIndex: number, outNode: FlowNode | null, outNodePortIndex: number, renderer: ConnectionRenderer);
+    render(ctx: CanvasRenderingContext2D, graphScale: number, mouseOver: boolean, mousePosition: Vector2 | undefined): void;
+    inNode(): FlowNode | null;
+    outNode(): FlowNode | null;
+    clearPort(mousePosition: Vector2): void;
+    clearPorts(): void;
+    setInput(node: FlowNode, portIndex: number, replace?: boolean): void;
+    setOutput(node: FlowNode, portIndex: number): void;
+    clearInput(): void;
+    clearOutput(): void;
+    mouseOverPort(mousePosition: Vector2): Port | null;
+    outPort(): Port | null;
+    inPort(): Port | null;
+    referencesNode(node: FlowNode): boolean;
+}
+
+declare enum CursorStyle {
+    Default = "default",
+    Pointer = "pointer",
+    Grab = "grab",
+    Grabbing = "grabbing",
+    Wait = "wait",
+    Help = "help",
+    Crosshair = "crosshair",
+    Cell = "cell",
+    Text = "text",
+    Move = "move",
+    NotAllowed = "not-allowed",
+    ZoomIn = "zoom-in",
+    ZoomOut = "zoom-out",
+    None = "none",
+    ContextMenu = "context-menu"
+}
+
+interface RenderResults {
+    cursorStyle?: CursorStyle;
+}
+interface GraphSubsystem {
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined;
+    openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null;
+    /**
+     * Event for when the graph is clicked.
+     *
+     * Returns whether or not the subsystem had one of it's elements clicked on
+     *
+     * @param mousePosition Where the mouse is on the graph
+     * @param ctrlKey Whether or not the ctrl key is pressed
+     */
+    clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean;
+    mouseDragEvent(delta: Vector2, scale: number): boolean;
+    fileDrop(file: File): boolean;
+    clickEnd(): void;
+}
+
+type RenderLambda = () => void;
+/**
+ * Generic subsystem meant for other sybsystems to pass whatever to to render
+ * at a certain time.
+ *
+ * Initial inspriation is for a subsytem to submit something to render on top
+ * of all other subsystems.
+ */
+declare class PassSubsystem {
+    #private;
+    constructor();
+    queue(lambda: RenderLambda): void;
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined;
+    openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null;
+    clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean;
+    mouseDragEvent(delta: Vector2, scale: number): boolean;
+    fileDrop(file: File): boolean;
+    clickEnd(): void;
+}
+
+interface Box {
+    Position: Vector2;
+    Size: Vector2;
+}
+
+declare enum PortType {
+    Input = "INPUT",
+    Output = "OUTPUT",
+    InputArray = "INPUTARRAY"
+}
+interface PortStyle {
+    size?: number;
+    fillColor?: string;
+    borderColor?: string;
+    borderSize?: number;
+}
+type ConnectionChangeCallback = (connection: Connection, connectionIndex: number, port: Port, portType: PortType, node: FlowNode) => void;
+interface PortConfig {
+    name?: string;
+    type?: string;
+    array?: boolean;
+    emptyStyle?: PortStyle;
+    filledStyle?: PortStyle;
+    onConnectionAdded?: ConnectionChangeCallback;
+    onConnectionRemoved?: ConnectionChangeCallback;
+}
+declare class Port {
+    #private;
+    constructor(node: FlowNode, portType: PortType, config?: PortConfig);
+    addConnection(connection: Connection): void;
+    replaceConnection(connection: Connection, index: number): void;
+    addConnectionAddedListener(callback: ConnectionChangeCallback): void;
+    connections(): Array<Connection>;
+    addConnectionRemovedListener(callback: ConnectionChangeCallback): void;
+    clearConnection(connection: Connection): void;
+    getDataType(): string;
+    getPortType(): PortType;
+    getDisplayName(): string;
+    filledStyleColor(): string;
+    render(ctx: CanvasRenderingContext2D, position: Vector2, camera: Camera, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): Box;
+}
+
+interface Widget {
+    Size(): Vector2;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+    ClickStart(): void;
+    ClickEnd(): void;
+}
+
+interface StrokeStyleConfig {
+    size?: number;
+    color?: string;
+}
+
+interface BoxStyleConfig {
+    border?: StrokeStyleConfig;
+    color?: string;
+    radius?: number;
+}
+
+interface Metadata {
+    [name: string]: any;
+}
+
+type AnyPropertyChangeCallback = (propertyName: string, oldValue: any, newValue: any) => void;
+type PropertyChangeCallback = (oldValue: any, newValue: any) => void;
+type TitleChangeCallback = (node: FlowNode, oldTitle: string, newTitle: string) => void;
+type InfoChangeCallback = (node: FlowNode, oldInfo: string, newInfo: string) => void;
+interface WidgetConfig {
+    type?: string;
+    config?: any;
+}
+interface FlowNodeTitleConfig {
+    textStyle?: TextStyleConfig;
+    color?: string;
+    padding?: number;
+}
+interface FlowNodeStyle {
+    title?: FlowNodeTitleConfig;
+    idle?: BoxStyleConfig;
+    mouseOver?: BoxStyleConfig;
+    grabbed?: BoxStyleConfig;
+    selected?: BoxStyleConfig;
+    portText?: TextStyleConfig;
+}
+interface FlowNodeConfig {
+    position?: Vector2;
+    title?: string;
+    subTitle?: string;
+    info?: string;
+    locked?: boolean;
+    data?: Metadata;
+    contextMenu?: ContextMenuConfig;
+    metadata?: any;
+    canEditTitle?: boolean;
+    canEditInfo?: boolean;
+    canEditPorts?: boolean;
+    inputs?: Array<PortConfig>;
+    outputs?: Array<PortConfig>;
+    onGrab?: () => void;
+    onRelease?: () => void;
+    onSelect?: () => void;
+    onUnselect?: () => void;
+    onDragStop?: (FlowNode: FlowNode) => void;
+    onFileDrop?: (file: File) => void;
+    onTitleChange?: TitleChangeCallback;
+    onInfoChange?: InfoChangeCallback;
+    widgets?: Array<WidgetConfig>;
+    style?: FlowNodeStyle;
+}
+declare enum NodeState {
+    Idle = 0,
+    MouseOver = 1,
+    Grabbed = 2
+}
+interface NodeIntersection {
+    Node?: FlowNode;
+    Port?: Port;
+    PortIndex?: number;
+    PortIsInput?: boolean;
+    Widget?: Widget;
+    WidgetIndex?: number;
+}
+declare class FlowNode {
+    #private;
+    constructor(config?: FlowNodeConfig);
+    metadata(): any;
+    selected(): boolean;
+    select(): void;
+    raiseDragStoppedEvent(): void;
+    addTitleChangeListener(callback: TitleChangeCallback): void;
+    addInfoChangeListener(callback: InfoChangeCallback): void;
+    addDragStoppedListener(callback: (node: FlowNode) => void): void;
+    addAnyPropertyChangeListener(callback: AnyPropertyChangeCallback): void;
+    addPropertyChangeListener(name: string, callback: PropertyChangeCallback): void;
+    setProperty(name: string, value: any): void;
+    getProperty(name: string): any;
+    contextMenu(): ContextMenuConfig;
+    unselect(): void;
+    addUnselectListener(callback: () => void): void;
+    addSelectListener(callback: () => void): void;
+    dropFile(file: File): void;
+    addFileDropListener(callback: (file: File) => void): void;
+    locked(): boolean;
+    lock(): void;
+    unlock(): void;
+    setPosition(position: Vector2): void;
+    getPosition(): Vector2;
+    calculateBounds(ctx: CanvasRenderingContext2D, camera: Camera): Box;
+    addInput(config: PortConfig): Port;
+    addOutput(config: PortConfig): Port;
+    addWidget(widget: Widget): void;
+    getWidget(index: number): Widget;
+    widgetCount(): number;
+    translate(delta: Vector2): void;
+    inBounds(ctx: CanvasRenderingContext2D, camera: Camera, position: Vector2): NodeIntersection;
+    canEditTitle(): boolean;
+    canEditPorts(): boolean;
+    title(): string;
+    setTitle(newTitle: string): void;
+    setInfo(newInfo: string): void;
+    inputPortPosition(index: number): Box;
+    inputPort(index: number): Port;
+    inputs(): number;
+    outputPortPosition(index: number): Box;
+    outputPort(index: number): Port;
+    outputs(): number;
+    render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void;
+}
+
+type NodeAddedCallback = (node: FlowNode) => void;
+type NodeRemovedCallback = (node: FlowNode) => void;
+interface ConnectionRendererConfiguration {
+    size?: number;
+    color?: string;
+    mouseOverSize?: number;
+    mouseOverColor?: string;
+    renderer?: ConnectionRenderer;
+}
+interface NodeSubsystemConfig {
+    idleConnection?: ConnectionRendererConfiguration;
+    nodes?: NodeFactoryConfig;
+}
+declare class NodeSubsystem {
+    #private;
+    constructor(postProcessPass: PassSubsystem, config?: NodeSubsystemConfig);
+    addPublisher(identifier: string, publisher: Publisher): void;
+    addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
+    nodeFactory(): NodeFactory;
+    addOnNodeAddedListener(callback: NodeAddedCallback): void;
+    addOnNodeRemovedListener(callback: NodeRemovedCallback): void;
+    clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean;
+    mouseDragEvent(delta: Vector2, scale: number): boolean;
+    clearNodeInputConnection(node: FlowNode, index: number): void;
+    clickEnd(): void;
+    connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
+    getNodes(): Array<FlowNode>;
+    /**
+     * Returns all nodes who are connected to the inputs of the
+     * node in question
+     *
+     * @param nodeIndex index of the node to examine inputs to
+     */
+    connectedInputsNodeReferencesByIndex(nodeIndex: number): Array<FlowNode>;
+    connectedInputsNodeReferences(node: FlowNode): Array<FlowNode>;
+    connectedOutputsNodeReferences(nodeIndex: number): Array<FlowNode>;
+    addNode(node: FlowNode): void;
+    fileDrop(file: File): boolean;
+    organize(ctx: CanvasRenderingContext2D): void;
+    openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null;
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined;
+}
+
+interface PublisherNodes {
+    [name: string]: FlowNodeConfig;
+}
+interface PublisherConfig {
+    name?: string;
+    description?: string;
+    version?: string;
+    nodes?: PublisherNodes;
+}
+declare class Publisher {
+    #private;
+    constructor(config?: PublisherConfig);
+    nodes(): Map<string, FlowNodeConfig>;
+    register(nodeType: string, config: FlowNodeConfig): void;
+    contextMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+    create(nodeType: string): FlowNode;
+}
+
+type NodeCreatedCallback = (publisher: string, nodeType: string, node: FlowNode) => void;
+interface NodeFactoryPublishers {
+    [name: string]: PublisherConfig;
+}
+interface NodeFactoryConfig {
+    publishers?: NodeFactoryPublishers;
+    onNodeCreated?: NodeCreatedCallback;
+}
+declare class NodeFactory {
+    #private;
+    constructor(config?: NodeFactoryConfig);
+    addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
+    addPublisher(identifier: string, publisher: Publisher): void;
+    create(publisher: string, nodeType: string): FlowNode;
+    newNodeSubmenus(graph: NodeSubsystem, position: Vector2): Array<ContextMenuConfig>;
+    openMenu(graph: NodeSubsystem, position: Vector2): ContextMenuConfig;
+}
+
+type NoteContentChangeCallback = (node: FlowNote, newContents: string) => void;
+type NoteWidthChangeCallback = (node: FlowNote, newWidth: number) => void;
+interface FlowNoteConfig {
+    text?: string;
+    style?: TextStyleConfig;
+    metadata?: Metadata;
+    position?: Vector2;
+    width?: number;
+    locked?: boolean;
+    onWidthChange?: NoteWidthChangeCallback;
+    onContentChange?: NoteContentChangeCallback;
+}
+declare enum DragHandle {
+    None = 0,
+    Left = 1,
+    Right = 2
+}
+declare class FlowNote {
+    #private;
+    constructor(config?: FlowNoteConfig);
+    setText(text: string): void;
+    setMetadataProperty(name: string, value: any): void;
+    getMetadataProperty(name: string): any;
+    text(): string;
+    width(): number;
+    position(): Vector2;
+    translate(delta: Vector2): void;
+    setPosition(position: Vector2): void;
+    handleSelected(): DragHandle;
+    selectHandle(handle: DragHandle): void;
+    setWidth(newWidth: number): void;
+    addWidthChangeListener(callback: NoteWidthChangeCallback): void;
+    addContentChangeListener(callback: NoteContentChangeCallback): void;
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): void;
+    leftResizeHandleBox(): Box;
+    rightResizeHandleBox(): Box;
+    edittingLayout(): boolean;
+    setHovering(hovering: boolean): void;
+    editContent(): void;
+    lock(): void;
+    unlock(): void;
+    bounds(): Box;
+}
+
+type NoteAddedCallback = (addedNote: FlowNote) => void;
+type NoteRemovedCallback = (noteRemoved: FlowNote) => void;
+type NoteDragStartCallback = (nodeDragged: FlowNote) => void;
+type NoteDragStopCallback = (nodeDragged: FlowNote) => void;
+interface NoteSubsystemConfig {
+    onNoteAdded?: NoteAddedCallback;
+    onNoteRemoved?: NoteRemovedCallback;
+    onNoteDragStop?: NoteDragStopCallback;
+    onNoteDragStart?: NoteDragStartCallback;
+    notes?: Array<FlowNoteConfig>;
+}
+
+type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
+interface FlowNodeGraphConfiguration {
+    backgroundRenderer?: GraphRenderer;
+    backgroundColor?: string;
+    idleConnection?: ConnectionRendererConfiguration;
+    contextMenu?: ContextMenuConfig;
+    nodes?: NodeFactoryConfig;
+    board?: NoteSubsystemConfig;
+}
+declare class GraphView {
+    #private;
+    constructor(subsystems: Array<GraphSubsystem>);
+    clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): void;
+    fileDrop(file: File): boolean;
+    openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig;
+    clickEnd(): void;
+    mouseDragEvent(delta: Vector2, scale: number): boolean;
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults;
+}
+declare class NodeFlowGraph {
+    #private;
+    constructor(canvas: HTMLCanvasElement, config?: FlowNodeGraphConfiguration);
+    addNoteAddedListener(callback: NoteAddedCallback): void;
+    addNoteRemovedListener(callback: NoteRemovedCallback): void;
+    addNoteDragStartListener(callback: NoteDragStartCallback): void;
+    addNoteDragStopListener(callback: NoteDragStopCallback): void;
+    zoom(amount: number): void;
+    currentView(): GraphView;
+    organize(): void;
+    addPublisher(identifier: string, publisher: Publisher): void;
+    getNodes(): Array<FlowNode>;
+    connectedInputsNodeReferences(nodeIndex: number): Array<FlowNode>;
+    connectedOutputsNodeReferences(nodeIndex: number): Array<FlowNode>;
+    connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined;
+    addNode(node: FlowNode): void;
+    addNote(note: FlowNote): void;
+    addOnNodeCreatedListener(callback: NodeCreatedCallback): void;
+    addOnNodeAddedListener(callback: NodeAddedCallback): void;
+    addOnNodeRemovedListener(callback: NodeRemovedCallback): void;
+}
+
+declare const Theme: {
+    FontFamily: string;
+    Graph: {
+        BackgroundColor: string;
+    };
+    Node: {
+        FontColor: string;
+        BackgroundColor: string;
+        Title: {
+            Color: string;
+            FontColor: string;
+            Padding: number;
+        };
+        BorderRadius: number;
+        Border: {
+            Idle: string;
+            MouseOver: string;
+            Grabbed: string;
+            Selected: string;
+        };
+        Port: {
+            FontColor: string;
+        };
+    };
+    BoxSelect: {
+        Color: string;
+        Size: number;
+        Radius: number;
+        LineDashLength: number;
+    };
+    Widget: {
+        FontColor: string;
+        BackgroundColor: string;
+        Border: {
+            Color: string;
+            Size: number;
+            Radius: number;
+        };
+        Hover: {
+            BackgroundColor: string;
+        };
+        Slider: {
+            FillColor: string;
+        };
+        Button: {
+            Click: {
+                BackgroundColor: string;
+            };
+        };
+    };
+    ContextMenu: {
+        BackgroundColor: string;
+        HighlightColor: string;
+        FontColor: string;
+    };
+    Note: {
+        FontColor: string;
+        FontSize: number;
+        EntrySpacing: number;
+        LineSpacing: number;
+        DotSize: number;
+        HeaderLineWidth: number;
+        H1: {
+            FontSize: number;
+        };
+        H2: {
+            FontSize: number;
+        };
+        H3: {
+            FontSize: number;
+        };
+        CodeBlock: {
+            BackgroundColor: string;
+            Padding: number;
+            BorderRadius: number;
+        };
+    };
+};
+
+interface TextBoxStyleConfig {
+    box?: BoxStyleConfig;
+    text?: TextStyleConfig;
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+}
+
+interface NumberWidgetConfig {
+    value?: number;
+    property?: string;
+    idleBoxStyle?: TextBoxStyleConfig;
+    highlightBoxStyle?: TextBoxStyleConfig;
+    callback?: (newNumber: number) => void;
+}
+declare class NumberWidget {
+    #private;
+    constructor(node: FlowNode, config?: NumberWidgetConfig);
+    Size(): Vector2;
+    Set(newNumber: number): void;
+    ClickStart(): void;
+    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+}
+
+interface ColorWidgetConfig {
+    value?: string;
+    property?: string;
+    textStyle?: TextStyleConfig;
+    callback?: (newColor: string) => void;
+}
+declare class ColorWidget {
+    #private;
+    constructor(node: FlowNode, config?: ColorWidgetConfig);
+    Size(): Vector2;
+    Set(value: string): void;
+    ClickStart(): void;
+    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+}
+
+interface StringWidgetConfig {
+    property?: string;
+    value?: string;
+    textBoxStyle?: TextBoxStyleConfig;
+    callback?: (newString: string) => void;
+}
+declare class StringWidget {
+    #private;
+    constructor(node: FlowNode, config?: StringWidgetConfig);
+    Size(): Vector2;
+    Set(value: string): void;
+    ClickStart(): void;
+    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+}
+
+interface ButtonWidgetConfig {
+    text?: string;
+    callback?: () => void;
+    idleStyle?: TextBoxStyleConfig;
+    hoverStyle?: TextBoxStyleConfig;
+    clickStyle?: TextBoxStyleConfig;
+}
+declare class ButtonWidget {
+    #private;
+    constructor(config?: ButtonWidgetConfig);
+    Size(): Vector2;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+    ClickStart(): void;
+    ClickEnd(): void;
+}
+
+interface ToggleStyleConfig {
+    idle?: TextBoxStyleConfig;
+    hover?: TextBoxStyleConfig;
+    lightColor?: string;
+    lightBorderColor?: string;
+    lightBlur?: number;
+}
+interface ToggleWidgetConfig {
+    property?: string;
+    value?: boolean;
+    text?: string;
+    callback?: () => void;
+    enabledStyle?: ToggleStyleConfig;
+    disabledStyle?: ToggleStyleConfig;
+}
+declare class ToggleWidget {
+    #private;
+    constructor(node: FlowNode, config?: ToggleWidgetConfig);
+    Size(): Vector2;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+    Toggle(): void;
+    Set(value: boolean): void;
+    ClickStart(): void;
+    ClickEnd(): void;
+}
+
+interface SliderWidgetConfig {
+    property?: string;
+    min?: number;
+    max?: number;
+    value?: number;
+    backgroundColor?: string;
+    borderColor?: string;
+    fillColor?: string;
+    textStyle?: TextStyleConfig;
+    change?: (newValue: number) => void;
+    release?: (newValue: number) => void;
+    snapIncrement?: number;
+}
+declare class SliderWidget {
+    #private;
+    constructor(node: FlowNode, config?: SliderWidgetConfig);
+    SetValue(newValue: number): void;
+    Size(): Vector2;
+    ClickStart(): void;
+    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+}
+
+interface ImageWidgetConfig {
+    image?: string;
+    maxWidth?: number;
+    maxHeight?: number;
+    blob?: Blob;
+}
+/**
+ *   constructor(lightNode, nodeManager, id, parameterData, app) {
+        this.lightNode = lightNode;
+        this.id = id;
+        this.app = app;
+        this.lightNode.title = parameterData.name;
+
+        this.lightNode.onDropFile = (file) => {
+            // console.log(file)
+            var reader = new FileReader();
+            reader.onload = (evt) => {
+                console.log(evt.target.result)
+                nodeManager.nodeParameterChanged({
+                    id: id,
+                    data: evt.target.result,
+                    binary: true
+                });
+            }
+            reader.readAsArrayBuffer(file);
+
+            const url = URL.createObjectURL(file);
+            // this.loadImage(this._url, function (img) {
+            //     that.size[1] = (img.height / img.width) * that.size[0];
+            // });
+            this.loadImgFromURL(url);
+        }
+    }
+
+    loadImgFromURL(url) {
+        const img = document.createElement("img");
+        img.src = url;
+        img.onload = () => {
+            // if (callback) {
+            // callback(this);
+            // }
+            // console.log("Image loaded, size: " + img.width + "x" + img.height);
+            // this.dirty = true;
+            // that.boxcolor = "#9F9";f
+            // that.setDirtyCanvas(true);
+            this.lightNode.widgets[0].image = img
+            this.lightNode.setSize(this.lightNode.computeSize());
+        };
+        img.onerror = () => {
+            console.log("error loading the image:" + url);
+        }
+    }
+
+    update(parameterData) {
+        console.log("image parameter", parameterData)
+        const curVal = parameterData.currentValue;
+        this.app.RequestManager.getParameterValue(this.id, (response) => {
+            const url = URL.createObjectURL(response);
+            this.loadImgFromURL(url)
+        })
+    }
+ */
+declare class ImageWidget {
+    #private;
+    constructor(config?: ImageWidgetConfig);
+    SetBlob(blob: Blob): void;
+    SetUrl(url: string): void;
+    Size(): Vector2;
+    ClickStart(): void;
+    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
+}
+
+type WidgetBuilder = (node: FlowNode, confg?: any) => Widget;
+declare class WidgetFactory {
+    #private;
+    constructor();
+    register(widgetType: string, builder: WidgetBuilder): void;
+    create(node: FlowNode, widgetType: string, config: any): Widget;
+}
+declare const GlobalWidgetFactory: WidgetFactory;
+
+export { ButtonWidget, ColorWidget, FlowNode, type FlowNodeConfig, FlowNote, GlobalWidgetFactory, ImageWidget, NodeFlowGraph, NumberWidget, Publisher, type PublisherConfig, SliderWidget, StringWidget, Theme, ToggleWidget };