@elicdavis/node-flow 0.1.19 → 0.2.0

package/src/widgets/text.ts

@@ -1,92 +1,81 @@
-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;
-    }
-}
+import { Theme, themeVersion } from "../theme";
+import { Box } from "../types/box";
+import { Vector2, Zero } from "../types/vector2";
+import { FlowNode } from '../node';
+import { Text } from "../types/text";
+import { TextStyleConfig, TextStyleFallback } from "../styles/text";
+import { CursorStyle } from "../styles/cursor";
+import { requestRender } from "../render_scheduler";
+import { WidgetBase } from "./widget";
+
+export interface TextWidgetConfig {
+    property?: string;
+    value?: string;
+    textBoxStyle?: TextStyleConfig;
+}
+
+export class TextWidget extends WidgetBase {
+
+    #value: Text;
+
+    #size: Vector2;
+
+    #styleConfig: TextStyleConfig | undefined;
+
+    #styledForTheme = -1;
+
+    #followTheme(): void {
+        if (this.#styledForTheme === themeVersion()) {
+            return;
+        }
+        this.#styledForTheme = themeVersion();
+        const style = this.#value.style();
+        style.setColor(this.#styleConfig?.color ?? Theme.Widget.FontColor);
+        style.setSize(this.#styleConfig?.size ?? Theme.Note.FontSize);
+    }
+
+    constructor(node: FlowNode, config?: TextWidgetConfig) {
+        super();
+        this.#size = Zero();
+        this.#styleConfig = config?.textBoxStyle;
+        this.#value = new Text("", TextStyleFallback(config?.textBoxStyle, {}));
+        this.#followTheme();
+        this.setText(config?.value ?? "");
+
+        const property = config?.property;
+        if (property !== undefined) {
+            const existing = node.getProperty(property);
+            if (existing !== undefined && existing !== null) {
+                this.setText(String(existing));
+            }
+            node.addPropertyChangeListener(property, (_, next) => this.setText(String(next)));
+        }
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.Default;
+    }
+
+    Size(): Vector2 {
+        return this.#size;
+    }
+
+    text(): string {
+        return this.#value.get();
+    }
+
+    setText(value: string): void {
+        if (this.#value.get() === value) {
+            return;
+        }
+        this.#value.set(value);
+        requestRender();
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        this.#followTheme();
+        this.#value.size(ctx, 1, this.#size);
+        ctx.textAlign = "left";
+        this.#value.render(ctx, scale, box.Position);
+    }
+}

package/src/widgets/toggle.ts

@@ -1,207 +1,62 @@
-import { Theme } from "../theme";
-import { Box, InBox } from "../types/box";
-import { CopyVector2, Vector2 } from "../types/vector2";
-import { height, startingWidgetValue, width } from "./widget";
-import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
-import { FlowNode } from "../node";
-
-export interface ToggleStyleConfig {
-    idle?: TextBoxStyleConfig,
-    hover?: TextBoxStyleConfig,
-    lightColor?: string;
-    lightBorderColor?: string;
-    lightBlur?: number;
-}
-
-export interface ToggleWidgetConfig {
-    property?: string;
-    value?: boolean;
-    text?: string;
-    callback?: () => void;
-    enabledStyle?: ToggleStyleConfig;
-    disabledStyle?: ToggleStyleConfig;
-}
-
-class ToggleStyle {
-
-    #idleStyle: TextBoxStyle;
-
-    #hoverStyle: TextBoxStyle;
-
-    #lightColor: string;
-
-    #lightBorderColor: string;
-
-    #lightBlur?: number;
-
-    #box: Box;
-
-    constructor(config?: ToggleStyleConfig) {
-        this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idle, {
-            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?.hover, {
-            box: {
-                color: Theme.Widget.Hover.BackgroundColor,
-                border: {
-                    size: Theme.Widget.Border.Size,
-                    color: Theme.Widget.Border.Color,
-                }
-            },
-            text: { color: Theme.Widget.FontColor },
-        }));
-        this.#lightColor = config?.lightColor === undefined ? "#222222" : config.lightColor;
-        this.#lightBorderColor = config?.lightBorderColor === undefined ? "black" : config.lightBorderColor;
-        this.#lightBlur = config?.lightBlur;
-
-        this.#box = {Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
-    }
-
-    Draw(ctx: CanvasRenderingContext2D, pos: Vector2, scale: number, text: string, mousePosition: Vector2 | undefined): Box {
-        const scaledWidth = width * scale;
-        const scaledHeight = height * scale;
-        this.#box.Size.x = scaledWidth;
-        this.#box.Size.y = scaledHeight;
-        CopyVector2(this.#box.Position, pos);
-
-        // Background
-        let style: TextBoxStyle = this.#idleStyle;
-        if (mousePosition !== undefined) {
-            if (InBox(this.#box, mousePosition)) {
-                style = this.#hoverStyle;
-            }
-        }
-        style.Draw(ctx, this.#box, scale, text);
-
-        // Light
-        const lightScale = Math.min(scaledWidth, scaledHeight);
-        ctx.strokeStyle = this.#lightBorderColor;
-        ctx.fillStyle = this.#lightColor
-        ctx.beginPath();
-        ctx.roundRect(
-            pos.x + (lightScale * .2),
-            pos.y + (lightScale * .2),
-            lightScale * .6,
-            lightScale * .6,
-            Theme.Widget.Border.Radius * scale
-        );
-        if (this.#lightBlur) {
-            ctx.shadowBlur = this.#lightBlur * scale;
-            ctx.shadowColor = this.#lightColor;
-        }
-        ctx.fill();
-        if (this.#lightBlur) {
-            ctx.shadowBlur = 0;
-        }
-        // ctx.stroke();
-
-        return this.#box
-    }
-}
-
-export class ToggleWidget {
-
-    #node: FlowNode;
-
-    #nodeProperty: string | undefined;
-
-    #value: boolean;
-
-    #text: string;
-
-    #enabledStyle: ToggleStyle;
-
-    #disabledStyle: ToggleStyle;
-
-    #callback?: (value: boolean) => void;
-
-    constructor(node: FlowNode, config?: ToggleWidgetConfig) {
-        this.#value = false;
-
-        this.#node = node;
-        this.#nodeProperty = config?.property;
-        this.#text = config?.text === undefined ? "Toggle" : config?.text;
-
-        this.#enabledStyle = new ToggleStyle({
-            idle: TextBoxStyleWithFallback(config?.enabledStyle?.idle, {
-                box: {
-                    color: Theme.Widget.BackgroundColor,
-                    border: {
-                        size: Theme.Widget.Border.Size,
-                        color: Theme.Widget.Border.Color,
-                    }
-                },
-                text: { color: Theme.Widget.FontColor },
-            }),
-            lightBorderColor: config?.enabledStyle?.lightBorderColor,
-            lightColor: config?.enabledStyle?.lightColor === undefined ? "#00FF00" : config?.enabledStyle?.lightColor,
-            lightBlur: config?.enabledStyle?.lightBlur === undefined ? 15 : config?.enabledStyle?.lightBlur
-        });
-        this.#disabledStyle = new ToggleStyle({
-            idle: TextBoxStyleWithFallback(config?.disabledStyle?.idle, {
-                box: {
-                    color: Theme.Widget.BackgroundColor,
-                    border: {
-                        size: Theme.Widget.Border.Size,
-                        color: Theme.Widget.Border.Color,
-                    }
-                },
-                text: { color: Theme.Widget.FontColor },
-            }),
-            lightBorderColor: config?.disabledStyle?.lightBorderColor,
-            lightColor: config?.disabledStyle?.lightColor === undefined ? "#004400" : config?.enabledStyle?.lightColor,
-        });
-
-        this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
-
-        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 }
-    }
-
-    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
-        let style = this.#value ? this.#enabledStyle : this.#disabledStyle;
-        return style.Draw(ctx, position, scale, this.#text, mousePosition);
-    }
-
-    Toggle(): void {
-        this.Set(!this.#value);
-    }
-
-    Set(value: boolean): 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 {
-        this.Toggle();
-    }
-
-    ClickEnd(): void {
-    }
-}
+import { Theme } from "../theme";
+import { Box } from "../types/box";
+import { FlowNode } from "../node";
+import { drawFieldBox, widgetFont } from "./field";
+import { ValueWidget, ValueWidgetConfig } from "./value";
+import { fitString } from "../utils/string";
+
+export interface ToggleWidgetConfig extends ValueWidgetConfig<boolean> {
+    onColor?: string;
+    offColor?: string;
+}
+
+export class ToggleWidget extends ValueWidget<boolean> {
+
+    #onColor: string;
+
+    #offColor: string;
+
+    constructor(node: FlowNode, config?: ToggleWidgetConfig) {
+        super(node, { ...config, label: config?.label ?? "Toggle" }, false);
+        this.#onColor = config?.onColor ?? "#00FF00";
+        this.#offColor = config?.offColor ?? "#004400";
+    }
+
+    Toggle(): void {
+        const before = this.value();
+        this.commit(!before, before);
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawFieldBox(ctx, box, scale, { hovered: this.hovered(), value: "" });
+
+        const light = Math.min(box.Size.x, box.Size.y) * 0.6;
+        const inset = (box.Size.y - light) / 2;
+        const on = this.value();
+        ctx.fillStyle = on ? this.#onColor : this.#offColor;
+        ctx.beginPath();
+        ctx.roundRect(box.Position.x + inset, box.Position.y + inset, light, light, Theme.Widget.Border.Radius * scale);
+        if (on) {
+            ctx.shadowBlur = 15 * scale;
+            ctx.shadowColor = this.#onColor;
+        }
+        ctx.fill();
+        ctx.shadowBlur = 0;
+
+        const textLeft = box.Position.x + (inset * 2) + light;
+        ctx.font = widgetFont(scale);
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = Theme.Widget.FontColor;
+        const room = box.Position.x + box.Size.x - textLeft - inset;
+        ctx.fillText(
+            fitString(ctx, this.label(), room),
+            textLeft + (room / 2),
+            box.Position.y + (box.Size.y / 2),
+        );
+    }
+
+    protected onClick(): void {
+        this.Toggle();
+    }
+}

package/src/widgets/value.ts

@@ -0,0 +1,127 @@
+import { FlowNode } from "../node";
+import { requestRender } from "../render_scheduler";
+import { Vector2 } from "../types/vector2";
+import { height, startingWidgetValue, width, WidgetBase } from "./widget";
+
+export 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;
+}
+
+export abstract class ValueWidget<T> extends WidgetBase {
+
+    #node: FlowNode;
+
+    #property: string | undefined;
+
+    #value: T;
+
+    #label: string;
+
+    #width: number;
+
+    #callback?: (value: T) => void;
+
+    #onInput?: (value: T) => void;
+
+    constructor(node: FlowNode, config: ValueWidgetConfig<T> | undefined, fallback: T) {
+        super();
+        this.#node = node;
+        this.#property = config?.property;
+        this.#label = config?.label ?? "";
+        this.#width = config?.width ?? width;
+        this.#value = startingWidgetValue(node, this.#property, config?.value, fallback);
+        this.#callback = config?.callback;
+        this.#onInput = config?.onInput;
+
+        if (this.#property !== undefined) {
+            node.setProperty(this.#property, this.#value);
+            node.addPropertyChangeListener(this.#property, (_, next) => this.setValue(next));
+        }
+    }
+
+    Size(): Vector2 {
+        return { x: this.#width, y: height };
+    }
+
+    value(): T {
+        return this.#value;
+    }
+
+    /**
+     * Shows a new value without treating it as a person's edit: no callback
+     * and no edit event.
+     */
+    setValue(value: T): void {
+        if (this.equal(value, this.#value)) {
+            return;
+        }
+        this.#value = value;
+        this.valueChanged();
+        if (this.#property !== undefined) {
+            this.#node.setProperty(this.#property, value);
+        }
+        requestRender();
+    }
+
+    label(): string {
+        return this.#label;
+    }
+
+    setLabel(label: string): void {
+        this.#label = label;
+        requestRender();
+    }
+
+    protected node(): FlowNode {
+        return this.#node;
+    }
+
+    protected input(value: T): void {
+        this.setValue(value);
+        this.#onInput?.(value);
+    }
+
+    /**
+     * Ends a person's edit. Nothing is reported when they ended where they
+     * started.
+     */
+    protected commit(value: T, startedAt: T): void {
+        this.setValue(value);
+        if (this.equal(value, startedAt)) {
+            return;
+        }
+        if (this.#property !== undefined) {
+            this.#node.editProperty(this.#property, value);
+        }
+        this.#callback?.(value);
+    }
+
+    protected valueChanged(): void { }
+
+    protected equal(a: T, b: T): boolean {
+        return Object.is(a, b);
+    }
+}