@elicdavis/node-flow 0.1.20 → 0.2.1

package/src/widgets/button.ts

@@ -1,107 +1,52 @@
-import { Theme } from "../theme";
-import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
-import { Box, InBox } from "../types/box";
-import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, width } from "./widget";
-
-
-export interface ButtonWidgetConfig {
-    text?: string;
-    callback?: () => void;
-    idleStyle?: TextBoxStyleConfig;
-    hoverStyle?: TextBoxStyleConfig;
-    clickStyle?: TextBoxStyleConfig;
-}
-
-export class ButtonWidget {
-
-    #text: string;
-
-    #idleStyle: TextBoxStyle;
-
-    #hoverStyle: TextBoxStyle;
-
-    #clickStyle: TextBoxStyle;
-
-    #callback?: () => void;
-
-    #gettingClicked: boolean;
-
-    constructor(config?: ButtonWidgetConfig) {
-        this.#text = config?.text === undefined ? "Button" : config?.text;
-        this.#callback = config?.callback
-        this.#gettingClicked = false;
-
-        this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idleStyle, {
-            box: {
-                color: Theme.Widget.BackgroundColor,
-                border: {
-                    size: Theme.Widget.Border.Size,
-                    color: Theme.Widget.Border.Color,
-                }
-            },
-            text: { color: Theme.Widget.FontColor },
-        }));
-        this.#hoverStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.hoverStyle, {
-            box: {
-                color: Theme.Widget.Hover.BackgroundColor,
-                border: {
-                    size: Theme.Widget.Border.Size,
-                    color: Theme.Widget.Border.Color,
-                }
-            },
-            text: { color: Theme.Widget.FontColor },
-        }));
-        this.#clickStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.clickStyle, {
-            box: { 
-                color: Theme.Widget.Button.Click.BackgroundColor,
-                border: {
-                    size: Theme.Widget.Border.Size,
-                    color: Theme.Widget.Border.Color,
-                }
-            },
-            text: { color: Theme.Widget.FontColor },
-        }))
-    }
-
-    Size(): Vector2 {
-        return { "x": width, "y": height }
-    }
-
-    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 && !this.#gettingClicked) {
-            if (InBox(box, mousePosition)) {
-                style = this.#hoverStyle;
-            }
-        }
-
-        if (this.#gettingClicked) {
-            style = this.#clickStyle;
-        }
-        style.Draw(ctx, box, scale, this.#text);
-
-        return box
-    }
-
-    ClickStart(): void {
-        this.#gettingClicked = true;
-    }
-
-    ClickEnd(): void {
-        this.#gettingClicked = false;
-        if (this.#callback !== undefined) {
-            this.#callback();
-        }
-    }
-}
+import { requestRender } from "../render_scheduler";
+import { Box } from "../types/box";
+import { Vector2 } from "../types/vector2";
+import { drawField } from "./field";
+import { height, width, WidgetBase } from "./widget";
+
+export interface ButtonWidgetConfig {
+    text?: string;
+    callback?: () => void;
+    width?: number;
+}
+
+export class ButtonWidget extends WidgetBase {
+
+    #text: string;
+
+    #callback?: () => void;
+
+    #width: number;
+
+    constructor(config?: ButtonWidgetConfig) {
+        super();
+        this.#text = config?.text ?? "Button";
+        this.#callback = config?.callback;
+        this.#width = config?.width ?? width;
+    }
+
+    Size(): Vector2 {
+        return { x: this.#width, y: height };
+    }
+
+    text(): string {
+        return this.#text;
+    }
+
+    setText(text: string): void {
+        this.#text = text;
+        requestRender();
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawField(ctx, box, scale, {
+            hovered: this.hovered(),
+            pressed: this.pressed(),
+            value: this.#text,
+        });
+    }
+
+    protected onClick(): void {
+        this.#callback?.();
+    }
+}

package/src/widgets/color.ts

@@ -1,150 +1,91 @@
-import { HexToColor } from "../utils/color";
-import { TextStyleConfig } from "../styles/text";
-import { Box } from "../types/box";
-import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, startingWidgetValue, width } from "./widget";
-import { Popup } from "../popup";
-import { TextBoxStyle } from '../styles/textBox';
-import { Theme } from "../theme";
-import { FlowNode } from "../node";
-
-export interface ColorWidgetConfig {
-    value?: string;
-
-    property?: string;
-
-    textStyle?: TextStyleConfig;
-
-    callback?: (newColor: string) => void;
-}
-
-function contrastColor(color: string): string {
-    const c = HexToColor(color);
-    if (c === null) {
-        return "black";
-    }
-
-    if ((c.r + c.g + c.b) / 3 > 0.5) {
-        return "black"
-    }
-
-    return "white";
-}
-
-export class ColorWidget {
-
-    #node: FlowNode;
-
-    #nodeProperty: string | undefined;
-
-    #value: string;
-
-    #contrast: string;
-
-    #textBoxStyle: TextBoxStyle;
-
-    #callback?: (newColor: string) => void;
-
-    constructor(node: FlowNode, config?: ColorWidgetConfig) {
-        this.#node = node;
-        this.#nodeProperty = config?.property;
-        this.#callback = config?.callback;
-
-        this.#value = startingWidgetValue(node, this.#nodeProperty, config?.value, "#000000");
-        this.#contrast = contrastColor(this.#value);
-        this.#textBoxStyle = new TextBoxStyle({
-            box: {
-                color: this.#value,
-                border: {
-                    color: this.#contrast,
-                    size: Theme.Widget.Border.Size
-                }
-            },
-            text: config?.textStyle
-        });
-
-        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.#callback !== undefined) {
-            this.#callback(this.#value);
-        }
-
-        if (this.#nodeProperty !== undefined) {
-            this.#node.setProperty(this.#nodeProperty, this.#value);
-        }
-
-        // Update Styling
-        this.#contrast = contrastColor(this.#value);
-        this.#textBoxStyle.setBoxColor(this.#value);
-        this.#textBoxStyle.setBorderColor(this.#contrast);
-        this.#textBoxStyle.setTextColor(this.#contrast);
-    }
-
-    ClickStart(): void {
-    }
-
-    ClickEnd(): void {
-        let input: HTMLInputElement | null = null;
-
-        const popup = new Popup({
-            title: "Set Color",
-            options: ["Set", "Cancel"],
-            content: () => {
-                const container = document.createElement('div');
-
-                input = document.createElement('input')
-                input.type = "color";
-                input.value = this.#value;
-                input.name = "color"
-                container.append(input);
-
-                const label = document.createElement("label");
-                label.htmlFor = "color";
-                label.textContent = "Color";
-                container.append(label);
-
-                return container;
-            },
-            onClose: (button: string | null): void => {
-                if (button !== "Set" || input === null) {
-                    return;
-                }
-
-                this.Set(input.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);
-
-        this.#textBoxStyle.Draw(ctx, box, scale, this.#value)
-
-        return box;
-    }
-}
+import { HexToColor } from "../utils/color";
+import { Box } from "../types/box";
+import { drawField } from "./field";
+import { FlowNode } from "../node";
+import { ValueWidget, ValueWidgetConfig } from "./value";
+
+export interface ColorWidgetConfig extends ValueWidgetConfig<string> { }
+
+function contrastColor(color: string): string {
+    const c = HexToColor(color);
+    if (c === null) {
+        return "black";
+    }
+
+    if ((c.r + c.g + c.b) / 3 > 0.5) {
+        return "black"
+    }
+
+    return "white";
+}
+
+let picker: HTMLInputElement | null = null;
+
+function sharedPicker(): HTMLInputElement {
+    if (picker === null || !picker.isConnected) {
+        picker = document.createElement("input");
+        picker.type = "color";
+        document.body.appendChild(picker);
+    }
+    return picker;
+}
+
+export class ColorWidget extends ValueWidget<string> {
+
+    #contrast: string;
+
+    constructor(node: FlowNode, config?: ColorWidgetConfig) {
+        super(node, config, "#000000");
+        this.#contrast = contrastColor(this.value());
+    }
+
+    protected valueChanged(): void {
+        this.#contrast = contrastColor(this.value());
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawField(ctx, box, scale, {
+            input: true,
+            hovered: this.hovered(),
+            label: this.label(),
+            value: this.value(),
+            background: this.value(),
+            border: this.#contrast,
+            textColor: this.#contrast,
+        });
+    }
+
+    protected onClick(): void {
+        const canvas = this.canvas();
+        if (canvas === null) {
+            return;
+        }
+
+        const before = this.value();
+        // The browser's picker has no alpha, so the old alpha is carried over.
+        const alpha = before.slice(7);
+        const box = this.box();
+        const rect = canvas.getBoundingClientRect();
+        const sx = canvas.width > 0 ? rect.width / canvas.width : 1;
+        const sy = canvas.height > 0 ? rect.height / canvas.height : 1;
+
+        const input = sharedPicker();
+        input.style.cssText = [
+            "position: fixed",
+            `left: ${rect.left + (box.Position.x * sx)}px`,
+            `top: ${rect.top + (box.Position.y * sy)}px`,
+            `width: ${box.Size.x * sx}px`,
+            `height: ${box.Size.y * sy}px`,
+            "opacity: 0",
+            "pointer-events: none",
+            "border: 0",
+            "padding: 0",
+        ].join(";");
+        input.value = before.slice(0, 7);
+        input.oninput = () => this.input(input.value + alpha);
+        input.onchange = () => this.commit(input.value + alpha, before);
+        // Reading the rect lays the input out first; the picker opens at its last laid-out spot.
+        input.getBoundingClientRect();
+        input.click();
+    }
+}

package/src/widgets/factory.ts

@@ -1,46 +1,89 @@
-import { Widget } from "./widget";
-import { NumberWidget, NumberWidgetConfig } from './number';
-import { ButtonWidget, ButtonWidgetConfig } from './button';
-import { ColorWidget, ColorWidgetConfig } from './color';
-import { SliderWidget, SliderWidgetConfig } from './slider';
-import { StringWidget, StringWidgetConfig } from './string';
-import { ToggleWidget, ToggleWidgetConfig } from './toggle';
-import { FlowNode } from "../node";
-import { ImageWidget, ImageWidgetConfig } from "./image";
-import { TextWidget, TextWidgetConfig } from "./text";
-
-export type WidgetBuilder = (node: FlowNode, confg?: any) => Widget;
-
-export class WidgetFactory {
-
-    #registeredWidgets: Map<string, WidgetBuilder>
-
-    constructor() {
-        this.#registeredWidgets = new Map<string, WidgetBuilder>();
-    }
-
-    register(widgetType: string, builder: WidgetBuilder): void {
-        this.#registeredWidgets.set(widgetType, builder);
-    }
-
-    create(node: FlowNode, widgetType: string, config: any): Widget {
-        const builder = this.#registeredWidgets.get(widgetType)
-        if (builder === undefined) {
-            throw new Error("no builder registered for widget: " + widgetType);
-        }
-        return builder(node, config);
-    }
-}
-
-const GlobalWidgetFactory = new WidgetFactory();
-
-GlobalWidgetFactory.register("button", (node: FlowNode, config?: ButtonWidgetConfig) => new ButtonWidget(config));
-GlobalWidgetFactory.register("number", (node: FlowNode, config?: NumberWidgetConfig) => new NumberWidget(node, config));
-GlobalWidgetFactory.register("color", (node: FlowNode, config?: ColorWidgetConfig) => new ColorWidget(node, config));
-GlobalWidgetFactory.register("slider", (node: FlowNode, config?: SliderWidgetConfig) => new SliderWidget(node, config));
-GlobalWidgetFactory.register("string", (node: FlowNode, config?: StringWidgetConfig) => new StringWidget(node, config));
-GlobalWidgetFactory.register("toggle", (node: FlowNode, config?: ToggleWidgetConfig) => new ToggleWidget(node, config));
-GlobalWidgetFactory.register("image", (node: FlowNode, config?: ImageWidgetConfig) => new ImageWidget(config));
-GlobalWidgetFactory.register("text", (node: FlowNode, config?: TextWidgetConfig) => new TextWidget(node, config));
-
-export { GlobalWidgetFactory };
+import { Widget } from "./widget";
+import { NumberWidget, NumberWidgetConfig } from './number';
+import { ButtonWidget, ButtonWidgetConfig } from './button';
+import { ColorWidget, ColorWidgetConfig } from './color';
+import { SliderWidget, SliderWidgetConfig } from './slider';
+import { StringWidget, StringWidgetConfig } from './string';
+import { ToggleWidget, ToggleWidgetConfig } from './toggle';
+import { FlowNode } from "../node";
+import { ImageWidget, ImageWidgetConfig } from "./image";
+import { TextWidget, TextWidgetConfig } from "./text";
+import { RowWidget, RowWidgetConfig } from "./row";
+
+export interface RowWidgetFactoryConfig extends RowWidgetConfig {
+    widgets: Array<WidgetConfig>;
+}
+
+export interface WidgetConfigs {
+    button: ButtonWidgetConfig;
+    number: NumberWidgetConfig;
+    color: ColorWidgetConfig;
+    slider: SliderWidgetConfig;
+    string: StringWidgetConfig;
+    toggle: ToggleWidgetConfig;
+    image: ImageWidgetConfig;
+    text: TextWidgetConfig;
+    row: RowWidgetFactoryConfig;
+}
+
+export interface WidgetTypes {
+    button: ButtonWidget;
+    number: NumberWidget;
+    color: ColorWidget;
+    slider: SliderWidget;
+    string: StringWidget;
+    toggle: ToggleWidget;
+    image: ImageWidget;
+    text: TextWidget;
+    row: RowWidget;
+}
+
+export type WidgetConfig = {
+    [K in keyof WidgetConfigs]: { type: K; config?: WidgetConfigs[K] }
+}[keyof WidgetConfigs];
+
+export type WidgetBuilder = (node: FlowNode, config?: any) => Widget;
+
+export class WidgetFactory {
+
+    #registeredWidgets: Map<string, WidgetBuilder>
+
+    constructor() {
+        this.#registeredWidgets = new Map<string, WidgetBuilder>();
+    }
+
+    register(widgetType: string, builder: WidgetBuilder): void {
+        this.#registeredWidgets.set(widgetType, builder);
+    }
+
+    create<K extends keyof WidgetConfigs>(node: FlowNode, widgetType: K, config?: WidgetConfigs[K]): WidgetTypes[K];
+    create(node: FlowNode, widgetType: string, config?: unknown): Widget;
+    create(node: FlowNode, widgetType: string, config?: unknown): Widget {
+        const builder = this.#registeredWidgets.get(widgetType)
+        if (builder === undefined) {
+            throw new Error("no builder registered for widget: " + widgetType);
+        }
+        return builder(node, config);
+    }
+
+    createFromConfig(node: FlowNode, config: WidgetConfig): Widget {
+        return this.create(node, config.type, config.config);
+    }
+}
+
+const GlobalWidgetFactory = new WidgetFactory();
+
+GlobalWidgetFactory.register("button", (node: FlowNode, config?: ButtonWidgetConfig) => new ButtonWidget(config));
+GlobalWidgetFactory.register("number", (node: FlowNode, config?: NumberWidgetConfig) => new NumberWidget(node, config));
+GlobalWidgetFactory.register("color", (node: FlowNode, config?: ColorWidgetConfig) => new ColorWidget(node, config));
+GlobalWidgetFactory.register("slider", (node: FlowNode, config?: SliderWidgetConfig) => new SliderWidget(node, config));
+GlobalWidgetFactory.register("string", (node: FlowNode, config?: StringWidgetConfig) => new StringWidget(node, config));
+GlobalWidgetFactory.register("toggle", (node: FlowNode, config?: ToggleWidgetConfig) => new ToggleWidget(node, config));
+GlobalWidgetFactory.register("image", (node: FlowNode, config?: ImageWidgetConfig) => new ImageWidget(config));
+GlobalWidgetFactory.register("text", (node: FlowNode, config?: TextWidgetConfig) => new TextWidget(node, config));
+GlobalWidgetFactory.register("row", (node: FlowNode, config?: RowWidgetFactoryConfig) => new RowWidget(
+    (config?.widgets ?? []).map((child) => GlobalWidgetFactory.createFromConfig(node, child)),
+    config,
+));
+
+export { GlobalWidgetFactory };

package/src/widgets/field.ts

@@ -0,0 +1,99 @@
+import { Theme } from "../theme";
+import { drawBevel } from "../styles/bevel";
+import { Box } from "../types/box";
+import { fitString } from "../utils/string";
+
+export 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;
+}
+
+export function widgetFont(scale: number): string {
+    return `${Theme.Widget.FontSize * scale}px ${Theme.FontFamily}`;
+}
+
+function fieldBackground(look: FieldLook): string {
+    if (look.background !== undefined) {
+        return look.background;
+    }
+    if (look.input) {
+        return look.hovered ? Theme.Widget.Input.HoverBackgroundColor : Theme.Widget.Input.BackgroundColor;
+    }
+    if (look.pressed) {
+        return Theme.Widget.Button.Click.BackgroundColor;
+    }
+    return look.hovered ? Theme.Widget.Hover.BackgroundColor : Theme.Widget.BackgroundColor;
+}
+
+export function drawFieldBox(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): void {
+    ctx.fillStyle = fieldBackground(look);
+    ctx.beginPath();
+    ctx.roundRect(box.Position.x, box.Position.y, box.Size.x, box.Size.y, Theme.Widget.Border.Radius * scale);
+    ctx.fill();
+
+    if (Theme.Widget.Border.Size > 0) {
+        ctx.strokeStyle = look.border ?? Theme.Widget.Border.Color;
+        ctx.lineWidth = Theme.Widget.Border.Size * scale;
+        ctx.stroke();
+    }
+
+    if (Theme.Widget.Bevel !== null) {
+        drawBevel(ctx, box, scale, Theme.Widget.Bevel, look.input === true || look.pressed === true);
+    }
+}
+
+/**
+ * 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.
+ */
+export function drawField(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): void {
+    drawFieldBox(ctx, box, scale, look);
+    drawFieldText(ctx, box, scale, look);
+}
+
+export function drawFieldText(ctx: CanvasRenderingContext2D, box: Box, scale: number, look: FieldLook): void {
+    const padding = Theme.Widget.Padding * scale;
+    const middle = box.Position.y + (box.Size.y / 2);
+    const textColor = look.textColor ?? (look.input ? Theme.Widget.Input.FontColor : Theme.Widget.FontColor);
+
+    ctx.font = widgetFont(scale);
+    ctx.textBaseline = "middle";
+
+    if (look.label === undefined || look.label === "") {
+        ctx.textAlign = "center";
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+            fitString(ctx, look.value, box.Size.x - (padding * 2)),
+            box.Position.x + (box.Size.x / 2),
+            middle,
+        );
+        return;
+    }
+
+    const room = box.Size.x - (padding * 2);
+    const label = fitString(ctx, look.label, room / 2);
+    const labelWidth = ctx.measureText(label).width;
+
+    ctx.textAlign = "left";
+    ctx.fillStyle = look.textColor ?? Theme.Widget.LabelColor;
+    ctx.fillText(label, box.Position.x + padding, middle);
+
+    ctx.textAlign = "right";
+    ctx.fillStyle = textColor;
+    ctx.fillText(
+        fitString(ctx, look.value, room - labelWidth - padding),
+        box.Position.x + box.Size.x - padding,
+        middle,
+    );
+}