@elicdavis/node-flow 0.1.0

package/src/utils/string.ts

@@ -0,0 +1,98 @@
+const binarySearch = ({ max, getValue, match }) => {
+    let min = 0;
+
+    while (min <= max) {
+        let guess = Math.floor((min + max) / 2);
+        const compareVal = getValue(guess);
+
+        if (compareVal === match) return guess;
+        if (compareVal < match) min = guess + 1;
+        else max = guess - 1;
+    }
+
+    return max;
+};
+
+export function fitString(ctx: CanvasRenderingContext2D, str: string, maxWidth: number): string {
+    let width = ctx.measureText(str).width;
+    const ellipsis = '…';
+    const ellipsisWidth = ctx.measureText(ellipsis).width;
+    if (width <= maxWidth || width <= ellipsisWidth) {
+        return str;
+    }
+
+    const index = binarySearch({
+        max: str.length,
+        getValue: guess => ctx.measureText(str.substring(0, guess)).width,
+        match: maxWidth - ellipsisWidth,
+    });
+
+    return str.substring(0, index) + ellipsis;
+};
+
+export function splitString(ctx: CanvasRenderingContext2D, str: string, maxWidth: number): Array<string> {
+    let width = ctx.measureText(str).width;
+    if (width <= maxWidth) {
+        return [str];
+    }
+
+    let index = binarySearch({
+        max: str.length,
+        getValue: guess => ctx.measureText(str.substring(0, guess)).width,
+        match: maxWidth,
+    });
+
+    for (let backward = index - 1; backward >= 1; backward--) {
+        if (str.charAt(backward) === " ") {
+            index = backward + 1;
+            break;
+        }
+    }
+
+    return [str.substring(0, index), str.substring(index)];
+};
+
+
+export function splitStringIntoLines(ctx: CanvasRenderingContext2D, str: string, maxWidth: number): Array<string> {
+    let width = ctx.measureText(str).width;
+    if (width <= maxWidth) {
+        return [str];
+    }
+
+    const strings = new Array<string>;
+    let remaining = str;
+    while (remaining !== "") {
+        let index = binarySearch({
+            max: remaining.length,
+            getValue: guess => ctx.measureText(remaining.substring(0, guess)).width,
+            match: maxWidth,
+        });
+
+        if (index === remaining.length) {
+            strings.push(remaining.substring(0, index))
+            break;
+        }
+
+        for (let backward = index - 1; backward >= 1; backward--) {
+            if (remaining.charAt(backward) === " ") {
+                index = backward + 1;
+                break;
+            }
+        }
+
+        strings.push(remaining.substring(0, index))
+        remaining = remaining.substring(index)
+    }
+
+    return strings;
+};
+
+// https://stackoverflow.com/a/18234317/4974261
+export function Format(str: string, ...args: Array<string>): string {
+    if (arguments.length) {
+        for (let key in args) {
+            str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
+        }
+    }
+    return str;
+};

package/src/widgets/button.ts

@@ -0,0 +1,107 @@
+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();
+        }
+    }
+}

package/src/widgets/color.ts

@@ -0,0 +1,151 @@
+import { HexToColor } from "../utils/color";
+import { TextStyleConfig } from "../styles/text";
+import { Box } from "../types/box";
+import { CopyVector2, Vector2 } from "../types/vector2";
+import { height, 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.#value = "#000000"
+        this.#contrast = contrastColor(this.#value);
+        this.Set(config?.value === undefined ? "#000000" : config?.value);
+        
+        this.#node = node;
+        this.#nodeProperty = config?.property;
+        this.#textBoxStyle = new TextBoxStyle({
+            box: {
+                color: this.#value,
+                border: {
+                    color: this.#contrast,
+                    size: Theme.Widget.Border.Size
+                }
+            },
+            text: config?.textStyle
+        });
+        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.#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;
+    }
+}

package/src/widgets/factory.ts

@@ -0,0 +1,46 @@
+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;
+
+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 };

package/src/widgets/image.ts

@@ -0,0 +1,163 @@
+import { Box } from "../types/box";
+import { CopyVector2, Vector2 } from "../types/vector2";
+
+const margin = 15;
+
+export interface ImageWidgetConfig {
+    image?: string;
+    maxWidth?: number
+    maxHeight?: number
+    blob?: Blob;
+}
+
+/**
+ *   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)
+        })
+    }
+ */
+
+export class ImageWidget {
+
+    #url: string | undefined;
+
+    #image: HTMLImageElement | undefined;
+
+    #maxWidth: number;
+
+    #maxHeight: number;
+
+    constructor(config?: ImageWidgetConfig) {
+        this.#maxWidth = config?.maxWidth === undefined ? 150 : config?.maxWidth;
+        this.#maxHeight = config?.maxHeight === undefined ? 150 : config?.maxHeight;
+        if (config?.image) {
+            this.SetUrl(config?.image);
+        } else if (config?.blob) {
+            this.SetBlob(config?.blob);
+        }
+    }
+
+    SetBlob(blob: Blob) {
+        const urlCreator = window.URL || window.webkitURL;
+        const imageUrl = urlCreator.createObjectURL(blob);
+        this.SetUrl(imageUrl);
+    }
+
+    SetUrl(url: string) {
+        this.#image = undefined;
+        this.#url = url;
+
+        const img = document.createElement("img");
+        img.src = url;
+        img.onload = () => {
+            this.#image = img;
+        };
+        img.onerror = (event) => {
+            console.log("error loading image:", url, event);
+        }
+    }
+
+    Size(): Vector2 {
+        if (this.#image === undefined) {
+            return { "x": 0, "y": 0 }
+        }
+
+        let adjust = 1;
+        if (this.#image.width > this.#maxWidth) {
+            adjust = this.#maxWidth / this.#image.width
+        }
+
+        if (this.#image.height > this.#maxHeight) {
+            let heightAdjust = this.#maxHeight / this.#image.height
+            if (heightAdjust < adjust) {
+                adjust = heightAdjust;
+            }
+        }
+
+        return {
+            "x": adjust * this.#image.width,
+            "y": adjust * this.#image.height
+        }
+    }
+
+    ClickStart(): void {
+    }
+
+    ClickEnd(): void {
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        const size = this.Size();
+        const box: Box = {
+            Position: { x: 0, y: 0 },
+            Size: {
+                x: size.x * scale,
+                y: size.y * scale,
+            }
+        }
+        CopyVector2(box.Position, position);
+
+        if (!this.#image) {
+            return box;
+        }
+
+        ctx.drawImage(
+            this.#image,
+            position.x,
+            position.y,
+            box.Size.x,
+            box.Size.y
+        );
+        return box;
+    }
+}