@elicdavis/node-flow 0.1.20 → 0.2.1

package/dist/index.d.ts

@@ -81,7 +81,7 @@ declare class Connection {
     outNode(): FlowNode | null;
     clearPort(mousePosition: Vector2): void;
     clearPorts(): void;
-    setInput(node: FlowNode, portIndex: number, replace?: boolean): void;
+    setInput(node: FlowNode, portIndex: number, replace?: boolean, insertAt?: number): void;
     setOutput(node: FlowNode, portIndex: number): void;
     clearInput(): void;
     clearOutput(): void;
@@ -106,7 +106,8 @@ declare enum CursorStyle {
     ZoomIn = "zoom-in",
     ZoomOut = "zoom-out",
     None = "none",
-    ContextMenu = "context-menu"
+    ContextMenu = "context-menu",
+    EWResize = "ew-resize"
 }
 
 interface RenderResults {
@@ -152,7 +153,8 @@ declare class PassSubsystem {
 interface Box {
     Position: Vector2;
     Size: Vector2;
-}
+}
+declare function InBox(box: Box, position: Vector2): boolean;
 
 declare enum PortType {
     Input = "INPUT",
@@ -187,6 +189,10 @@ interface PortConfig {
      * unless `anyType` says otherwise.
      */
     acceptedTypes?: Array<string>;
+    /**
+     * Leaves the port off the node until something is connected to it.
+     */
+    hidden?: boolean;
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
     onConnectionAdded?: ConnectionChangeCallback;
@@ -210,10 +216,20 @@ declare class Port {
      * Scope accepted types to singular type
      */
     settleOn(type: string): void;
-    addConnection(connection: Connection): void;
+    addConnection(connection: Connection, index?: number): void;
     replaceConnection(connection: Connection, index: number): void;
     addConnectionAddedListener(callback: ConnectionChangeCallback): void;
     connections(): Array<Connection>;
+    /**
+     * How many wires the port has room for: one per connection on an array
+     * input, so each can be told apart and picked up on its own.
+     */
+    slots(): number;
+    setHidden(hidden: boolean): void;
+    /**
+     * A port asked to hide still shows while anything is connected to it.
+     */
+    hidden(): boolean;
     addConnectionRemovedListener(callback: ConnectionChangeCallback): void;
     clearConnection(connection: Connection): void;
     getDataType(): string;
@@ -229,11 +245,58 @@ declare class Port {
     render(ctx: CanvasRenderingContext2D, position: Vector2, camera: Camera, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): Box;
 }
 
+/**
+ * Where the pointer is, in canvas pixels, and whether it is over the widget.
+ * A press that starts on a widget keeps reporting to it until it is let go,
+ * wherever the pointer wanders.
+ */
+interface WidgetPointer {
+    position: Vector2;
+    inside: boolean;
+}
 interface Widget {
+    /**
+     * The smallest room the widget needs, in graph units. The node may hand
+     * it a wider box.
+     */
     Size(): Vector2;
-    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box;
-    ClickStart(): void;
-    ClickEnd(): void;
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
+    PointerDown?(pointer: WidgetPointer): void;
+    PointerMove?(pointer: WidgetPointer): void;
+    PointerUp?(pointer: WidgetPointer): void;
+    Cursor?(): CursorStyle;
+    Hidden?(): boolean;
+    Disabled?(): boolean;
+}
+declare abstract class WidgetBase implements Widget {
+    #private;
+    abstract Size(): Vector2;
+    protected abstract render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
+    PointerDown(pointer: WidgetPointer): void;
+    PointerMove(pointer: WidgetPointer): void;
+    PointerUp(pointer: WidgetPointer): void;
+    Cursor(): CursorStyle;
+    Hidden(): boolean;
+    setHidden(hidden: boolean): void;
+    Disabled(): boolean;
+    setDisabled(disabled: boolean): void;
+    protected hovered(): boolean;
+    protected pressed(): boolean;
+    /**
+     * Where the widget was last drawn, in canvas pixels.
+     */
+    protected box(): Box;
+    protected canvas(): HTMLCanvasElement | null;
+    protected scale(): number;
+    protected editText(value: string, onCommit: (text: string) => void): void;
+    protected onPointerDown(pointer: WidgetPointer): void;
+    protected onPointerMove(pointer: WidgetPointer): void;
+    protected onPointerUp(pointer: WidgetPointer): void;
+    /**
+     * A press and release that both landed on the widget.
+     */
+    protected onClick(pointer: WidgetPointer): void;
 }
 
 interface StrokeStyleConfig {
@@ -247,18 +310,238 @@ interface BoxStyleConfig {
     radius?: number;
 }
 
+interface ValueWidgetConfig<T> {
+    /**
+     * A node property the widget shows and edits. Setting the property from
+     * code updates the widget without counting as an edit.
+     */
+    property?: string;
+    value?: T;
+    label?: string;
+    /**
+     * The narrowest the widget gets, in graph units.
+     */
+    width?: number;
+    /**
+     * A person finished changing the value.
+     */
+    callback?: (value: T) => void;
+    /**
+     * The value moved while a person is still changing it.
+     */
+    onInput?: (value: T) => void;
+}
+declare abstract class ValueWidget<T> extends WidgetBase {
+    #private;
+    constructor(node: FlowNode, config: ValueWidgetConfig<T> | undefined, fallback: T);
+    Size(): Vector2;
+    value(): T;
+    /**
+     * Shows a new value without treating it as a person's edit: no callback
+     * and no edit event.
+     */
+    setValue(value: T): void;
+    label(): string;
+    setLabel(label: string): void;
+    protected node(): FlowNode;
+    protected input(value: T): void;
+    /**
+     * Ends a person's edit. Nothing is reported when they ended where they
+     * started.
+     */
+    protected commit(value: T, startedAt: T): void;
+    protected valueChanged(): void;
+    protected equal(a: T, b: T): boolean;
+}
+
+interface NumberWidgetConfig extends ValueWidgetConfig<number> {
+    /**
+     * How much the value moves per pixel dragged. Left out, it scales with
+     * the value's size.
+     */
+    step?: number;
+    integer?: boolean;
+    min?: number;
+    max?: number;
+}
+declare class NumberWidget extends ValueWidget<number> {
+    #private;
+    constructor(node: FlowNode, config?: NumberWidgetConfig);
+    Cursor(): CursorStyle;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onPointerDown(pointer: WidgetPointer): void;
+    protected onPointerMove(pointer: WidgetPointer): void;
+    protected onPointerUp(): void;
+    protected onClick(): void;
+}
+declare function formatNumber(value: number): string;
+
+interface ButtonWidgetConfig {
+    text?: string;
+    callback?: () => void;
+    width?: number;
+}
+declare class ButtonWidget extends WidgetBase {
+    #private;
+    constructor(config?: ButtonWidgetConfig);
+    Size(): Vector2;
+    text(): string;
+    setText(text: string): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onClick(): void;
+}
+
+interface ColorWidgetConfig extends ValueWidgetConfig<string> {
+}
+declare class ColorWidget extends ValueWidget<string> {
+    #private;
+    constructor(node: FlowNode, config?: ColorWidgetConfig);
+    protected valueChanged(): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onClick(): void;
+}
+
+interface SliderWidgetConfig extends ValueWidgetConfig<number> {
+    min?: number;
+    max?: number;
+    snapIncrement?: number;
+    fillColor?: string;
+}
+declare class SliderWidget extends ValueWidget<number> {
+    #private;
+    constructor(node: FlowNode, config?: SliderWidgetConfig);
+    Cursor(): CursorStyle;
+    setValue(value: number): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onPointerDown(pointer: WidgetPointer): void;
+    protected onPointerMove(pointer: WidgetPointer): void;
+    protected onPointerUp(): void;
+}
+
+interface StringWidgetConfig extends ValueWidgetConfig<string> {
+}
+declare class StringWidget extends ValueWidget<string> {
+    constructor(node: FlowNode, config?: StringWidgetConfig);
+    Cursor(): CursorStyle;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onClick(): void;
+}
+
+interface ToggleWidgetConfig extends ValueWidgetConfig<boolean> {
+    onColor?: string;
+    offColor?: string;
+}
+declare class ToggleWidget extends ValueWidget<boolean> {
+    #private;
+    constructor(node: FlowNode, config?: ToggleWidgetConfig);
+    Toggle(): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onClick(): void;
+}
+
+interface ImageWidgetConfig {
+    image?: string;
+    maxWidth?: number;
+    maxHeight?: number;
+    blob?: Blob;
+}
+declare class ImageWidget extends WidgetBase {
+    #private;
+    constructor(config?: ImageWidgetConfig);
+    SetBlob(blob: Blob): void;
+    SetUrl(url: string): void;
+    Cursor(): CursorStyle;
+    Size(): Vector2;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+}
+
+interface TextWidgetConfig {
+    property?: string;
+    value?: string;
+    textBoxStyle?: TextStyleConfig;
+}
+declare class TextWidget extends WidgetBase {
+    #private;
+    constructor(node: FlowNode, config?: TextWidgetConfig);
+    Cursor(): CursorStyle;
+    Size(): Vector2;
+    text(): string;
+    setText(value: string): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+}
+
+interface RowWidgetConfig {
+    /**
+     * How the room beyond each child's own width is shared out. Left out,
+     * every child grows the same; 0 keeps a child at its own width.
+     */
+    grow?: Array<number>;
+    gap?: number;
+}
+declare class RowWidget extends WidgetBase {
+    #private;
+    constructor(children: Array<Widget>, config?: RowWidgetConfig);
+    children(): ReadonlyArray<Widget>;
+    Size(): Vector2;
+    Cursor(): CursorStyle;
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+    protected onPointerDown(pointer: WidgetPointer): void;
+    protected onPointerMove(pointer: WidgetPointer): void;
+    protected onPointerUp(pointer: WidgetPointer): void;
+}
+
+interface RowWidgetFactoryConfig extends RowWidgetConfig {
+    widgets: Array<WidgetConfig>;
+}
+interface WidgetConfigs {
+    button: ButtonWidgetConfig;
+    number: NumberWidgetConfig;
+    color: ColorWidgetConfig;
+    slider: SliderWidgetConfig;
+    string: StringWidgetConfig;
+    toggle: ToggleWidgetConfig;
+    image: ImageWidgetConfig;
+    text: TextWidgetConfig;
+    row: RowWidgetFactoryConfig;
+}
+interface WidgetTypes {
+    button: ButtonWidget;
+    number: NumberWidget;
+    color: ColorWidget;
+    slider: SliderWidget;
+    string: StringWidget;
+    toggle: ToggleWidget;
+    image: ImageWidget;
+    text: TextWidget;
+    row: RowWidget;
+}
+type WidgetConfig = {
+    [K in keyof WidgetConfigs]: {
+        type: K;
+        config?: WidgetConfigs[K];
+    };
+}[keyof WidgetConfigs];
+type WidgetBuilder = (node: FlowNode, config?: any) => Widget;
+declare class WidgetFactory {
+    #private;
+    constructor();
+    register(widgetType: string, builder: WidgetBuilder): void;
+    create<K extends keyof WidgetConfigs>(node: FlowNode, widgetType: K, config?: WidgetConfigs[K]): WidgetTypes[K];
+    create(node: FlowNode, widgetType: string, config?: unknown): Widget;
+    createFromConfig(node: FlowNode, config: WidgetConfig): Widget;
+}
+declare const GlobalWidgetFactory: WidgetFactory;
+
 interface Metadata {
     [name: string]: any;
 }
 
 type AnyPropertyChangeCallback = (propertyName: string, oldValue: any, newValue: any) => void;
 type PropertyChangeCallback = (oldValue: any, newValue: any) => void;
+type PropertyEditCallback = (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;
@@ -321,6 +604,7 @@ interface NodeIntersection {
     PortIsInput?: boolean;
     Widget?: Widget;
     WidgetIndex?: number;
+    WidgetBox?: Box;
 }
 declare class FlowNode {
     #private;
@@ -335,6 +619,16 @@ declare class FlowNode {
     addAnyPropertyChangeListener(callback: AnyPropertyChangeCallback): void;
     addPropertyChangeListener(name: string, callback: PropertyChangeCallback): void;
     setProperty(name: string, value: any): void;
+    /**
+     * Listens for a person changing the property through a widget, but not
+     * for the property being set from code.
+     */
+    addPropertyEditListener(name: string, callback: PropertyEditCallback): void;
+    /**
+     * Sets the property as a person's finished edit, so edit listeners hear
+     * it even when the value was already showing.
+     */
+    editProperty(name: string, value: any): void;
     getProperty(name: string): any;
     contextMenu(): ContextMenuConfig;
     unselect(): void;
@@ -368,6 +662,7 @@ declare class FlowNode {
     setTitle(newTitle: string): void;
     setInfo(newInfo: string): void;
     inputPortPosition(index: number): Box;
+    widgetPosition(index: number): Box | undefined;
     inputPort(index: number): Port;
     inputs(): number;
     outputPortPosition(index: number): Box;
@@ -376,8 +671,14 @@ declare class FlowNode {
     addMessage(message: NodeMessageConfig): void;
     clearMessages(): void;
     hasBeenLaidOut(): boolean;
+    /**
+     * Throws away where the ports were last placed, so wires wait for the
+     * next draw instead of pointing at the old spots.
+     */
+    invalidateLayout(): void;
     render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void;
     layoutPortsWithoutDrawing(bounds: Box, zoom: number): boolean;
+    placePorts(bounds: Box, zoom: number): boolean;
 }
 
 type NodeAddedCallback = (node: FlowNode) => void;
@@ -668,10 +969,15 @@ declare class NodeFlowGraph {
     dispose(): void;
 }
 
-declare const Theme: {
+interface BevelColors {
+    Light: string;
+    Dark: string;
+}
+declare const defaults: {
     FontFamily: string;
     Graph: {
         BackgroundColor: string;
+        DotColor: string;
     };
     Node: {
         FontColor: string;
@@ -688,6 +994,7 @@ declare const Theme: {
             Grabbed: string;
             Selected: string;
         };
+        Bevel: BevelColors | null;
         Port: {
             FontColor: string;
         };
@@ -705,15 +1012,25 @@ declare const Theme: {
     };
     Widget: {
         FontColor: string;
+        LabelColor: string;
+        FontSize: number;
+        Padding: number;
+        Gap: number;
         BackgroundColor: string;
         Border: {
             Color: string;
             Size: number;
             Radius: number;
         };
+        Bevel: BevelColors | null;
         Hover: {
             BackgroundColor: string;
         };
+        Input: {
+            BackgroundColor: string;
+            HoverBackgroundColor: string;
+            FontColor: string;
+        };
         Slider: {
             FillColor: string;
         };
@@ -726,8 +1043,10 @@ declare const Theme: {
     ContextMenu: {
         BackgroundColor: string;
         HighlightColor: string;
+        HighlightFontColor: string;
         FontColor: string;
         DisabledFontColor: string;
+        BorderRadius: number;
     };
     Minimap: {
         BackgroundColor: string;
@@ -737,6 +1056,13 @@ declare const Theme: {
         NodeColor: string;
         ViewportColor: string;
     };
+    Popup: {
+        BackgroundColor: string;
+        FontColor: string;
+        FontFamily: string;
+        BorderRadius: number;
+        Backdrop: string;
+    };
     Note: {
         FontColor: string;
         FontSize: number;
@@ -755,232 +1081,73 @@ declare const Theme: {
         };
         CodeBlock: {
             BackgroundColor: string;
+            FontColor: string;
             Padding: number;
             BorderRadius: number;
         };
     };
-};
+};
+type ThemeValues = typeof defaults;
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object | null ? (null extends T[K] ? T[K] : DeepPartial<T[K]>) : T[K];
+};
+type ThemeConfig = DeepPartial<ThemeValues>;
+declare const DefaultTheme: Readonly<ThemeValues>;
+declare const Theme: ThemeValues;
+/**
+ * Replaces the theme: the defaults, with anything in config laid over them.
+ * Everything already on screen picks the change up on its next draw.
+ */
+declare function setTheme(config?: ThemeConfig): void;
+declare function themeVersion(): number;
+declare function onThemeChange(listener: () => void): () => void;
 
 declare function requestRender(): void;
 declare function renderContinuously(): () => void;
 
-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 TextWidgetConfig {
-    property?: string;
-    value?: string;
-    textBoxStyle?: TextStyleConfig;
-    callback?: (newString: string) => void;
-}
-declare class TextWidget {
-    #private;
-    constructor(node: FlowNode, config?: TextWidgetConfig);
-    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;
+interface FieldLook {
+    hovered: boolean;
+    pressed?: boolean;
+    /**
+     * Something typed or dragged into, as opposed to something pressed.
+     */
+    input?: boolean;
+    label?: string;
+    value: string;
+    background?: string;
+    border?: string;
+    textColor?: string;
 }
-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;
-}
+declare function widgetFont(scale: number): string;
+declare function drawFieldBox(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): void;
+/**
+ * A boxed value with an optional label: the label on the left and the value
+ * on the right, or the value alone in the middle.
+ */
+declare function drawField(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): void;
+declare function drawFieldText(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): 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;
+interface InPlaceEditConfig {
+    canvas: HTMLCanvasElement | null;
+    /**
+     * Where to sit, in canvas pixels.
+     */
+    box: Box;
+    scale: number;
+    value: string;
+    onCommit: (text: string) => void;
 }
-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;
+interface InPlaceEdit {
+    input: HTMLInputElement;
+    /**
+     * Moves the input over where the widget was just drawn, in canvas pixels.
+     */
+    place(box: Box, scale: number): void;
 }
 /**
- *   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)
-        })
-    }
+ * Lays a text input over a widget. Enter or clicking away keeps what was
+ * typed; Escape throws it away.
  */
-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;
+declare function editInPlace(config: InPlaceEditConfig): InPlaceEdit | null;
 
-export { type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, type DanglingConnection, DefaultConnectionRenderer, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, ImageWidget, type ImageWidgetConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ToggleStyleConfig, ToggleWidget, type ToggleWidgetConfig, type Vector2, type Widget, type WidgetBuilder, type WidgetConfig, WidgetFactory, portConfigTypes, portsCompatible, renderContinuously, requestRender, typeSetsCompatible };
+export { type BevelColors, type Box, ButtonWidget, type ButtonWidgetConfig, type CameraOrientation, ColorWidget, type ColorWidgetConfig, Connection, type ConnectionRenderer, type ConnectionRendererParams, type ContextMenuConfig, type ContextMenuItemConfig, ContextMenuItemState, type CopyCallback, CursorStyle, type DanglingConnection, DefaultConnectionRenderer, DefaultTheme, type FieldLook, FlowNode, type FlowNodeConfig, type FlowNodeGraphConfiguration, type FlowNodeStyle, type FlowNodeTitleConfig, FlowNote, type FlowNoteConfig, GlobalWidgetFactory, type GraphRenderer, GraphView, ImageWidget, type ImageWidgetConfig, InBox, type InPlaceEdit, type InPlaceEditConfig, type InternalConnection, MessageType, Minimap, type MinimapConfig, type NodeCreatedCallback, NodeFactory, type NodeFactoryConfig, NodeFlowGraph, type NodeIntersection, type NodeMenuFilter, type NodeMessageConfig, NodeState, type NoteAddedCallback, type NoteContentChangeCallback, type NoteDragStartCallback, type NoteDragStopCallback, type NoteRemovedCallback, type NoteSubsystemConfig, type NoteWidthChangeCallback, NumberWidget, type NumberWidgetConfig, type PasteCallback, Port, type PortConfig, type PortStyle, PortType, Publisher, type PublisherConfig, RowWidget, type RowWidgetConfig, type RowWidgetFactoryConfig, SliderWidget, type SliderWidgetConfig, StringWidget, type StringWidgetConfig, TextWidget, type TextWidgetConfig, Theme, type ThemeConfig, type ThemeValues, ToggleWidget, type ToggleWidgetConfig, ValueWidget, type ValueWidgetConfig, type Vector2, type Widget, WidgetBase, type WidgetBuilder, type WidgetConfig, type WidgetConfigs, WidgetFactory, type WidgetPointer, type WidgetTypes, drawField, drawFieldBox, drawFieldText, editInPlace, formatNumber, onThemeChange, portConfigTypes, portsCompatible, renderContinuously, requestRender, setTheme, themeVersion, typeSetsCompatible, widgetFont };