@elicdavis/node-flow 0.1.20 → 0.2.0

package/src/widgets/row.ts

@@ -0,0 +1,138 @@
+import { Theme } from "../theme";
+import { CursorStyle } from "../styles/cursor";
+import { Box, InBox } from "../types/box";
+import { Vector2 } from "../types/vector2";
+import { Widget, WidgetBase, WidgetPointer } from "./widget";
+
+export 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;
+}
+
+export class RowWidget extends WidgetBase {
+
+    #children: Array<Widget>;
+
+    #grow: Array<number>;
+
+    #gap: number;
+
+    #boxes: Array<Box | null> = [];
+
+    #captured: Widget | null = null;
+
+    #capturedBox: Box | null = null;
+
+    #mouse: Vector2 | undefined;
+
+    constructor(children: Array<Widget>, config?: RowWidgetConfig) {
+        super();
+        this.#children = children;
+        this.#grow = config?.grow ?? children.map(() => 1);
+        this.#gap = config?.gap ?? Theme.Widget.Gap;
+    }
+
+    children(): ReadonlyArray<Widget> {
+        return this.#children;
+    }
+
+    Size(): Vector2 {
+        const shown = this.#shown();
+        let x = 0;
+        let y = 0;
+        for (const child of shown) {
+            const size = child.Size();
+            x += size.x;
+            y = Math.max(y, size.y);
+        }
+        x += Math.max(0, shown.length - 1) * this.#gap;
+        return { x, y };
+    }
+
+    Cursor(): CursorStyle {
+        const over = this.#captured ?? this.#childAt(this.#mouse);
+        return over?.Cursor?.() ?? CursorStyle.Default;
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void {
+        this.#mouse = mousePosition;
+        super.Draw(ctx, box, scale, mousePosition);
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        const shown = this.#shown();
+        const gap = this.#gap * scale;
+        const natural = shown.reduce((sum, child) => sum + (child.Size().x * scale), 0);
+        const extra = Math.max(0, box.Size.x - natural - (gap * Math.max(0, shown.length - 1)));
+        const totalGrow = shown.reduce((sum, child) => sum + this.#growOf(child), 0);
+
+        this.#boxes = this.#children.map(() => null);
+        let x = box.Position.x;
+        for (const child of shown) {
+            const size = child.Size();
+            const share = totalGrow > 0 ? extra * (this.#growOf(child) / totalGrow) : 0;
+            const childBox: Box = {
+                Position: { x, y: box.Position.y + ((box.Size.y - (size.y * scale)) / 2) },
+                Size: { x: (size.x * scale) + share, y: size.y * scale },
+            };
+            this.#boxes[this.#children.indexOf(child)] = childBox;
+            child.Draw(ctx, childBox, scale, this.#captured === null || this.#captured === child ? this.#mouse : undefined);
+            x += childBox.Size.x + gap;
+        }
+    }
+
+    protected onPointerDown(pointer: WidgetPointer): void {
+        const child = this.#childAt(pointer.position);
+        if (child === null || child.Disabled?.()) {
+            return;
+        }
+        this.#captured = child;
+        this.#capturedBox = this.#boxes[this.#children.indexOf(child)];
+        child.PointerDown?.(this.#forChild(pointer));
+    }
+
+    protected onPointerMove(pointer: WidgetPointer): void {
+        this.#captured?.PointerMove?.(this.#forChild(pointer));
+    }
+
+    protected onPointerUp(pointer: WidgetPointer): void {
+        const child = this.#captured;
+        const forChild = this.#forChild(pointer);
+        this.#captured = null;
+        this.#capturedBox = null;
+        child?.PointerUp?.(forChild);
+    }
+
+    #forChild(pointer: WidgetPointer): WidgetPointer {
+        return {
+            position: pointer.position,
+            inside: this.#capturedBox !== null && InBox(this.#capturedBox, pointer.position),
+        };
+    }
+
+    #childAt(position: Vector2 | undefined): Widget | null {
+        if (position === undefined) {
+            return null;
+        }
+        for (let i = 0; i < this.#children.length; i++) {
+            const box = this.#boxes[i];
+            if (box && InBox(box, position)) {
+                return this.#children[i];
+            }
+        }
+        return null;
+    }
+
+    #shown(): Array<Widget> {
+        return this.#children.filter((child) => !child.Hidden?.());
+    }
+
+    #growOf(child: Widget): number {
+        return this.#grow[this.#children.indexOf(child)] ?? 1;
+    }
+}

package/src/widgets/slider.ts

@@ -1,216 +1,101 @@
-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, startingWidgetValue, 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(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
-
-        // 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 (Object.is(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
-            }
-        };
-    }
-}
+import { Theme } from "../theme";
+import { Box } from "../types/box";
+import { Clamp, Clamp01 } from "../utils/math";
+import { FlowNode } from "../node";
+import { CursorStyle } from "../styles/cursor";
+import { drawFieldBox, drawFieldText } from "./field";
+import { formatNumber } from "./number";
+import { ValueWidget, ValueWidgetConfig } from "./value";
+import { WidgetPointer } from "./widget";
+
+export interface SliderWidgetConfig extends ValueWidgetConfig<number> {
+    min?: number;
+
+    max?: number;
+
+    snapIncrement?: number;
+
+    fillColor?: string;
+}
+
+export class SliderWidget extends ValueWidget<number> {
+
+    #min: number;
+
+    #max: number;
+
+    #snapIncrement?: number;
+
+    #fillColor: string | undefined;
+
+    #startValue = 0;
+
+    constructor(node: FlowNode, config?: SliderWidgetConfig) {
+        const min = config?.min ?? 0;
+        const max = config?.max ?? 1;
+        super(node, { ...config, value: config?.value === undefined ? undefined : Clamp(config.value, min, max) }, min);
+        this.#min = min;
+        this.#max = max;
+        this.#snapIncrement = config?.snapIncrement;
+        this.#fillColor = config?.fillColor;
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.EWResize;
+    }
+
+    setValue(value: number): void {
+        super.setValue(Clamp(value, this.#min, this.#max));
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawFieldBox(ctx, box, scale, { input: true, hovered: this.hovered() || this.pressed(), value: "" });
+
+        const border = Theme.Widget.Border.Size * scale;
+        const fill = Clamp01((this.value() - this.#min) / (this.#max - this.#min));
+        ctx.fillStyle = this.#fillColor ?? Theme.Widget.Slider.FillColor;
+        ctx.beginPath();
+        ctx.roundRect(
+            box.Position.x + (border / 2),
+            box.Position.y + (border / 2),
+            Math.max(0, (box.Size.x * fill) - border),
+            box.Size.y - border,
+            Theme.Widget.Border.Radius * scale
+        );
+        ctx.fill();
+
+        drawFieldText(ctx, box, scale, {
+            input: true,
+            hovered: false,
+            label: this.label(),
+            value: formatNumber(Number(this.value().toFixed(3))),
+        });
+    }
+
+    protected onPointerDown(pointer: WidgetPointer): void {
+        this.#startValue = this.value();
+        this.input(this.#valueAt(pointer.position.x));
+    }
+
+    protected onPointerMove(pointer: WidgetPointer): void {
+        this.input(this.#valueAt(pointer.position.x));
+    }
+
+    protected onPointerUp(): void {
+        this.commit(this.value(), this.#startValue);
+    }
+
+    #valueAt(x: number): number {
+        const box = this.box();
+        const border = Theme.Widget.Border.Size * this.scale();
+        const min = box.Position.x + (border / 2);
+        const max = min + box.Size.x - border;
+        const p = Clamp01((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;
+        }
+        return Clamp(value, this.#min, this.#max);
+    }
+}

package/src/widgets/string.ts

@@ -1,130 +1,39 @@
-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, startingWidgetValue, 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(startingWidgetValue(node, this.#nodeProperty, 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;
-    }
-}
+import { FlowNode } from "../node";
+import { CursorStyle } from "../styles/cursor";
+import { Box } from "../types/box";
+import { drawField } from "./field";
+import { editInPlace } from "./inplace";
+import { ValueWidget, ValueWidgetConfig } from "./value";
+
+export interface StringWidgetConfig extends ValueWidgetConfig<string> { }
+
+export class StringWidget extends ValueWidget<string> {
+
+    constructor(node: FlowNode, config?: StringWidgetConfig) {
+        super(node, config, "");
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.Text;
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawField(ctx, box, scale, {
+            input: true,
+            hovered: this.hovered(),
+            label: this.label(),
+            value: this.value(),
+        });
+    }
+
+    protected onClick(): void {
+        const before = this.value();
+        editInPlace({
+            canvas: this.canvas(),
+            box: this.box(),
+            scale: this.scale(),
+            value: before,
+            onCommit: (text) => this.commit(text, before),
+        });
+    }
+}