@elicdavis/node-flow 0.1.0

package/src/widgets/number.ts

@@ -0,0 +1,153 @@
+import { Theme } from "../theme";
+import { Popup } from "../popup";
+import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
+import { Box, InBox } from '../types/box';
+import { CopyVector2, Vector2 } from "../types/vector2";
+import { height, width } from "./widget";
+import { FlowNode } from "../node";
+
+export interface NumberWidgetConfig {
+    value?: number;
+
+    property?: string;
+
+    idleBoxStyle?: TextBoxStyleConfig;
+
+    highlightBoxStyle?: TextBoxStyleConfig;
+
+    callback?: (newNumber: number) => void;
+}
+
+export class NumberWidget {
+
+    #node: FlowNode;
+
+    #nodeProperty: string | undefined;
+
+    #value: number;
+
+    #idleBoxStyle: TextBoxStyle;
+
+    #highlightBoxStyle: TextBoxStyle;
+
+    #text: string;
+
+    #callback?: (newNumber: number) => void;
+
+    constructor(node: FlowNode, config?: NumberWidgetConfig) {
+        this.#value = 0;
+        this.#text = "0";
+
+        this.#node = node;
+        this.#nodeProperty = config?.property;
+        this.#idleBoxStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idleBoxStyle, {
+            box: {
+                color: Theme.Widget.BackgroundColor,
+                border: {
+                    size: Theme.Widget.Border.Size,
+                    color: Theme.Widget.Border.Color,
+                },
+                radius: Theme.Widget.Border.Radius
+            },
+            text: { color: Theme.Widget.FontColor },
+        }));
+        this.#highlightBoxStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.highlightBoxStyle, {
+            box: {
+                color: Theme.Widget.Hover.BackgroundColor,
+                border: {
+                    size: Theme.Widget.Border.Size,
+                    color: Theme.Widget.Border.Color,
+                },
+                radius: Theme.Widget.Border.Radius
+            },
+            text: { color: Theme.Widget.FontColor },
+        }));
+        this.Set(config?.value === undefined ? 0 : config?.value);
+        this.#callback = config?.callback;
+
+        if (this.#nodeProperty !== undefined) {
+            this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
+                this.Set(newVal);
+            });
+        }
+
+    }
+
+    Size(): Vector2 {
+        return { "x": width, "y": height }
+    }
+
+    Set(newNumber: number): void {
+        if (this.#value === newNumber) {
+            return;
+        }
+
+        this.#value = newNumber;
+
+        if (this.#nodeProperty !== undefined) {
+            this.#node.setProperty(this.#nodeProperty, this.#value);
+        }
+
+        if (this.#callback !== undefined) {
+            this.#callback(this.#value);
+        }
+
+        // https://stackoverflow.com/questions/5765398/whats-the-best-way-to-convert-a-number-to-a-string-in-javascript
+        this.#text = '' + parseFloat(this.#value.toPrecision(6));
+    }
+
+    ClickStart(): void {
+    }
+
+    ClickEnd(): void {
+        let input: HTMLInputElement | null = null;
+
+        const setOption = "Set";
+        const cancelOption = "Cancel";
+        const popup = new Popup({
+            title: "Set Number",
+            options: [setOption, cancelOption],
+            content: () => {
+                const container = document.createElement('div');
+                input = document.createElement('input')
+                input.type = "number";
+                input.valueAsNumber = this.#value;
+                container.append(input);
+                return container;
+            },
+            onClose: (button: string | null): void => {
+                if (button !== setOption || input === null) {
+                    return;
+                }
+
+                this.Set(input.valueAsNumber);
+            },
+        });
+
+        popup.Show();
+    }
+
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        const box = {
+            Position: { x: 0, y: 0 },
+            Size: {
+                x: width * scale,
+                y: height * scale
+            }
+        };
+        CopyVector2(box.Position, position);
+
+        let style: TextBoxStyle = this.#idleBoxStyle;
+
+        if (mousePosition !== undefined) {
+            if (InBox(box, mousePosition)) {
+                style = this.#highlightBoxStyle;
+            }
+        }
+
+        style.DrawUnderline(ctx, box, scale, this.#text)
+
+        return box;
+    }
+}

package/src/widgets/slider.ts

@@ -0,0 +1,216 @@
+import { Theme } from "../theme";
+import { TextAlign } from "../styles/canvasTextAlign";
+import { TextStyle, TextStyleConfig, TextStyleFallback } from "../styles/text";
+import { Box } from '../types/box';
+import { CopyVector2, Vector2, Zero } from "../types/vector2";
+import { Clamp, Clamp01 } from "../utils/math";
+import { height, width } from "./widget";
+import { TextBaseline } from "../styles/canvasTextBaseline";
+import { FlowNode } from "../node";
+
+export 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;
+
+}
+
+export class SliderWidget {
+
+    // Data Variables =========================================================
+
+    #min: number;
+
+    #max: number;
+
+    #value: number;
+
+    #text: string;
+
+    #snapIncrement?: number;
+
+    #node: FlowNode;
+
+    #nodeProperty: string | undefined;
+
+    // Callbacks ==============================================================
+
+    #change?: (newValue: number) => void;
+
+    #release?: (newValue: number) => void;
+
+    // Styling Variables ======================================================
+
+    #textStyle: TextStyle
+
+    #backgroundColor: string;
+
+    #borderColor: string;
+
+    #fillColor: string;
+
+    // Runtime Variables ======================================================
+
+    #lastMousePosition: Vector2;
+
+    #clickStartMousePosition: Vector2;
+
+    #clicking: boolean;
+
+    constructor(node: FlowNode, config?: SliderWidgetConfig) {
+        this.#node = node;
+        this.#value = 0;
+        this.#min = config?.min === undefined ? 0 : config?.min;
+        this.#max = config?.max === undefined ? 1 : config?.max;
+        this.#snapIncrement = config?.snapIncrement;
+        this.#nodeProperty = config?.property;
+        this.#text = "";
+        
+        this.#release = config?.release;
+
+        this.#backgroundColor = config?.backgroundColor === undefined ? Theme.Widget.BackgroundColor : config?.backgroundColor;
+        this.#fillColor = config?.fillColor === undefined ? Theme.Widget.Slider.FillColor : config?.fillColor;
+        this.#borderColor = config?.borderColor === undefined ? Theme.Widget.Border.Color : config?.borderColor;
+        this.#textStyle = new TextStyle(TextStyleFallback(config?.textStyle, {
+            color: Theme.Widget.FontColor,
+        }));
+        this.#lastMousePosition = Zero();
+        this.#clickStartMousePosition = Zero();
+        this.#clicking = false;
+
+
+        if (config?.property !== undefined && config?.property !== null) {
+            node.addPropertyChangeListener(config.property, (oldVal, newVal) => {
+                this.SetValue(newVal);
+            });
+        }
+
+        this.SetValue(config?.value === undefined ? 0 : config?.value);
+
+        // Setup change callback after we set the initial value to prevent the callback from being 
+        this.#change = config?.change;
+    }
+
+    SetValue(newValue: number): void {
+        const cleanedValue = Clamp(newValue, this.#min, this.#max);
+        if (this.#value === cleanedValue) {
+            return;
+        }
+
+        this.#value = cleanedValue;
+
+        if (this.#nodeProperty) {
+            this.#node.setProperty(this.#nodeProperty, this.#value);
+        }
+
+        this.#text = this.#value.toFixed(3);
+        if (this.#change !== undefined) {
+            this.#change(this.#value);
+        }
+    }
+
+    Size(): Vector2 {
+        return { "x": width, "y": height }
+    }
+
+    ClickStart(): void {
+        this.#clicking = true;
+        CopyVector2(this.#clickStartMousePosition, this.#lastMousePosition)
+    }
+
+    ClickEnd(): void {
+        this.#clicking = false;
+        if (this.#release !== undefined) {
+            this.#release(this.#value);
+        }
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        const scaledWidth = width * scale;
+        const scaledHeight = height * scale;
+
+        const scaledBorderThickness = Theme.Widget.Border.Size * scale;
+
+        // Render background
+        ctx.fillStyle = this.#backgroundColor;
+        ctx.strokeStyle = this.#borderColor;
+        ctx.lineWidth = scaledBorderThickness;
+        ctx.beginPath();
+        ctx.roundRect(
+            position.x,
+            position.y,
+            scaledWidth,
+            scaledHeight,
+            Theme.Widget.Border.Radius * scale
+        );
+        ctx.fill();
+        ctx.stroke();
+
+        // Render Fill
+        const fill = Clamp01((this.#value - this.#min) / (this.#max - this.#min));
+        ctx.fillStyle = this.#fillColor;
+        ctx.beginPath();
+        ctx.roundRect(
+            position.x + (scaledBorderThickness / 2),
+            position.y + (scaledBorderThickness / 2),
+            (scaledWidth * fill) - scaledBorderThickness,
+            scaledHeight - scaledBorderThickness,
+            Theme.Widget.Border.Radius * scale
+        );
+        ctx.fill();
+
+        // Render Number
+        ctx.textAlign = TextAlign.Center;
+        ctx.textBaseline = TextBaseline.Middle;
+        this.#textStyle.setupStyle(ctx, scale);
+        ctx.fillText(
+            this.#text,
+            position.x + (scaledWidth / 2),
+            position.y + (scaledHeight / 2),
+        );
+
+        // Update value based on mouse position
+        if (mousePosition !== undefined) {
+            CopyVector2(this.#lastMousePosition, mousePosition);
+            if (this.#clicking) {
+                const min = position.x + (scaledBorderThickness / 2);
+                const max = min + scaledWidth - scaledBorderThickness;
+                const p = Clamp01((this.#lastMousePosition.x - min) / (max - min));
+
+                let value = (p * (this.#max - this.#min)) + this.#min;
+                if (this.#snapIncrement !== undefined) {
+                    value = Math.round(value / this.#snapIncrement) * this.#snapIncrement;
+                }
+
+                this.SetValue(value);
+            }
+        }
+
+        return {
+            Position: { x: position.x, y: position.y },
+            Size: {
+                x: scaledWidth,
+                y: scaledHeight
+            }
+        };
+    }
+}

package/src/widgets/string.ts

@@ -0,0 +1,128 @@
+import { Theme } from "../theme";
+import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
+import { Box, InBox } from "../types/box";
+import { CopyVector2, Vector2 } from "../types/vector2";
+import { fitString } from "../utils/string";
+import { height, width } from "./widget";
+import { FlowNode } from '../node';
+import { SetStringPopup } from "../popups/string";
+
+export interface StringWidgetConfig {
+    property?: string;
+
+    value?: string;
+
+    textBoxStyle?: TextBoxStyleConfig;
+
+    callback?: (newString: string) => void;
+}
+
+export class StringWidget {
+
+    #value: string;
+
+    #idleStyle: TextBoxStyle;
+
+    #hoverStyle: TextBoxStyle;
+
+    #callback?: (newString: string) => void;
+
+    #node: FlowNode
+
+    #nodeProperty: string | undefined;
+
+    constructor(node: FlowNode, config?: StringWidgetConfig) {
+        this.#value = "";
+        
+        this.#node = node;
+        this.#nodeProperty = config?.property;
+        this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.textBoxStyle, {
+            box: {
+                color: Theme.Widget.BackgroundColor,
+                border: {
+                    size: Theme.Widget.Border.Size,
+                    color: Theme.Widget.Border.Color,
+                },
+                radius: Theme.Widget.Border.Radius
+            },
+            text: { color: Theme.Widget.FontColor },
+        }));
+
+        this.#hoverStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.textBoxStyle, {
+            box: {
+                color: Theme.Widget.Hover.BackgroundColor,
+                border: {
+                    size: Theme.Widget.Border.Size,
+                    color: Theme.Widget.Border.Color,
+                },
+                radius: Theme.Widget.Border.Radius
+            },
+            text: { color: Theme.Widget.FontColor },
+        }));
+
+        this.Set(config?.value === undefined ? "" : config?.value);
+        this.#callback = config?.callback;
+        if (this.#nodeProperty !== undefined) {
+            this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
+                this.Set(newVal);
+            });
+        }
+    }
+
+    Size(): Vector2 {
+        return { "x": width, "y": height }
+    }
+
+    Set(value: string): void {
+        if (this.#value === value) {
+            return;
+        }
+        this.#value = value;
+
+        if (this.#nodeProperty !== undefined) {
+            this.#node.setProperty(this.#nodeProperty, this.#value)
+        }
+
+        if (this.#callback !== undefined) {
+            this.#callback(this.#value);
+        }
+    }
+
+    ClickStart(): void {
+    }
+
+    ClickEnd(): void {
+        const popup = SetStringPopup({
+            title: "Set String",
+            startingValue: this.#value,
+            onUpdate: (value: string): void => {
+                this.Set(value);
+            },
+        });
+        popup.Show();
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        const box = {
+            Position: { x: 0, y: 0 },
+            Size: {
+                x: width * scale,
+                y: height * scale
+            }
+        };
+        CopyVector2(box.Position, position);
+
+
+        let style: TextBoxStyle = this.#idleStyle;
+
+        if (mousePosition !== undefined) {
+            if (InBox(box, mousePosition)) {
+                style = this.#hoverStyle;
+            }
+        }
+
+        style.DrawUnderline(ctx, box, scale, fitString(ctx, this.#value, box.Size.x - (20 * scale)))
+
+        return box;
+    }
+}

package/src/widgets/text.ts

@@ -0,0 +1,92 @@
+import { Theme } from "../theme";
+import { Box, InBox } from "../types/box";
+import { CopyVector2, Vector2, Zero } from "../types/vector2";
+import { FlowNode } from '../node';
+import { Text } from "../types/text";
+import { TextStyle, TextStyleConfig, TextStyleFallback } from "../styles/text";
+
+export interface TextWidgetConfig {
+    property?: string;
+
+    value?: string;
+
+    textBoxStyle?: TextStyleConfig;
+
+    callback?: (newString: string) => void;
+}
+
+export class TextWidget {
+
+    #value: Text;
+
+    #callback?: (newString: string) => void;
+
+    #node: FlowNode
+
+    #nodeProperty: string | undefined;
+
+    #size: Vector2;
+
+    constructor(node: FlowNode, config?: TextWidgetConfig) {
+        this.#size = Zero();
+        this.#node = node;
+        this.#nodeProperty = config?.property;
+        this.#value = new Text("", TextStyleFallback(config?.textBoxStyle, {
+            font: Theme.FontFamily,
+            color: Theme.Widget.FontColor,
+            size: Theme.Note.FontSize,
+        }))
+
+        this.Set(config?.value === undefined ? "" : config?.value);
+        this.#callback = config?.callback;
+        if (this.#nodeProperty !== undefined) {
+            this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
+                this.Set(newVal);
+            });
+        }
+    }
+
+    Size(): Vector2 {
+        return this.#size;
+    }
+
+    Set(value: string): void {
+        if (this.#value.get() === value) {
+            return;
+        }
+        this.#value.set(value);
+
+        if (this.#nodeProperty !== undefined) {
+            this.#node.setProperty(this.#nodeProperty, value)
+        }
+
+        if (this.#callback !== undefined) {
+            this.#callback(value);
+        }
+    }
+
+    ClickStart(): void {
+        // Left blank for implementing Widget interface
+    }
+
+    ClickEnd(): void {
+        // Left blank for implementing Widget interface
+    }
+
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        this.#value.size(ctx, scale, this.#size);
+        const box = {
+            Position: { x: 0, y: 0 },
+            Size: this.#size
+        };
+        CopyVector2(box.Position, position);
+        this.#value.size(ctx, 1, this.#size);
+        
+        ctx.textAlign = "left";
+        this.#value.render(ctx, scale, box.Position);
+        // this.#idleStyle.DrawUnderline(ctx, box, scale, fitString(ctx, this.#value, box.Size.x - (20 * scale)))
+
+        return box;
+    }
+}