@elicdavis/node-flow 0.1.19 → 0.2.0

package/src/widgets/image.ts

@@ -1,165 +1,107 @@
-import { requestRender } from "../render_scheduler";
-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;
-            requestRender();
-        };
-        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;
-    }
-}
+import { requestRender } from "../render_scheduler";
+import { CursorStyle } from "../styles/cursor";
+import { Box } from "../types/box";
+import { Vector2 } from "../types/vector2";
+import { WidgetBase } from "./widget";
+
+export interface ImageWidgetConfig {
+    image?: string;
+    maxWidth?: number
+    maxHeight?: number
+    blob?: Blob;
+}
+
+export class ImageWidget extends WidgetBase {
+
+    #url: string | undefined;
+
+    #ownedUrl: string | undefined;
+
+    #image: HTMLImageElement | undefined;
+
+    #maxWidth: number;
+
+    #maxHeight: number;
+
+    constructor(config?: ImageWidgetConfig) {
+        super();
+        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 url = URL.createObjectURL(blob);
+        this.SetUrl(url);
+        this.#ownedUrl = url;
+    }
+
+    SetUrl(url: string) {
+        if (this.#ownedUrl !== undefined) {
+            URL.revokeObjectURL(this.#ownedUrl);
+            this.#ownedUrl = undefined;
+        }
+        this.#image = undefined;
+        this.#url = url;
+
+        const img = document.createElement("img");
+        img.src = url;
+        img.onload = () => {
+            if (this.#url !== url) {
+                return;
+            }
+            this.#image = img;
+            requestRender();
+        };
+        img.onerror = (event) => {
+            console.log("error loading image:", url, event);
+        }
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.Default;
+    }
+
+    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
+        }
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        if (!this.#image) {
+            return;
+        }
+        const size = this.Size();
+        const w = size.x * scale;
+        const h = size.y * scale;
+        ctx.drawImage(
+            this.#image,
+            box.Position.x + ((box.Size.x - w) / 2),
+            box.Position.y,
+            w,
+            h
+        );
+    }
+}

package/src/widgets/inplace.ts

@@ -0,0 +1,84 @@
+import { requestRender } from "../render_scheduler";
+import { Theme } from "../theme";
+import { Box } from "../types/box";
+
+export interface InPlaceEditConfig {
+    canvas: HTMLCanvasElement | null;
+
+    /**
+     * Where to sit, in canvas pixels.
+     */
+    box: Box;
+
+    scale: number;
+
+    value: string;
+
+    onCommit: (text: string) => void;
+}
+
+/**
+ * Lays a text input over a widget. Enter or clicking away keeps what was
+ * typed; Escape throws it away.
+ */
+export function editInPlace(config: InPlaceEditConfig): HTMLInputElement | null {
+    const canvas = config.canvas;
+    if (canvas === null) {
+        return null;
+    }
+
+    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 = document.createElement("input");
+    input.type = "text";
+    input.value = config.value;
+    input.style.cssText = [
+        "position: fixed",
+        `left: ${rect.left + (config.box.Position.x * sx)}px`,
+        `top: ${rect.top + (config.box.Position.y * sy)}px`,
+        `width: ${config.box.Size.x * sx}px`,
+        `height: ${config.box.Size.y * sy}px`,
+        "box-sizing: border-box",
+        "margin: 0",
+        `padding: 0 ${Theme.Widget.Padding * config.scale}px`,
+        `font: ${Theme.Widget.FontSize * config.scale * sy}px ${Theme.FontFamily}`,
+        `color: ${Theme.Widget.FontColor}`,
+        `background: ${Theme.Widget.Hover.BackgroundColor}`,
+        `border: ${Theme.Widget.Border.Size * config.scale}px solid ${Theme.Widget.Border.Color}`,
+        `border-radius: ${Theme.Widget.Border.Radius * config.scale}px`,
+        "outline: none",
+        "z-index: 1000",
+    ].join(";");
+
+    let done = false;
+    const finish = (keep: boolean) => {
+        if (done) {
+            return;
+        }
+        done = true;
+        input.remove();
+        if (keep) {
+            config.onCommit(input.value);
+        }
+        requestRender();
+    };
+
+    input.addEventListener("keydown", (event: KeyboardEvent) => {
+        event.stopPropagation();
+        if (event.key === "Enter") {
+            event.preventDefault();
+            finish(true);
+        } else if (event.key === "Escape") {
+            event.preventDefault();
+            finish(false);
+        }
+    });
+    input.addEventListener("blur", () => finish(true));
+
+    document.body.appendChild(input);
+    input.focus();
+    input.select();
+    return input;
+}

package/src/widgets/number.ts

@@ -1,154 +1,122 @@
-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, startingWidgetValue, 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(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
-
-        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;
-    }
-}
+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";
+import { WidgetPointer } from "./widget";
+
+export interface NumberWidgetConfig extends ValueWidgetConfig<number> {
+    /**
+     * How much the value moves per pixel dragged. Left out, it scales with
+     * the value's size.
+     */
+    step?: number;
+
+    integer?: boolean;
+
+    min?: number;
+
+    max?: number;
+}
+
+const DRAG_THRESHOLD = 3;
+
+export class NumberWidget extends ValueWidget<number> {
+
+    #step: number | undefined;
+
+    #integer: boolean;
+
+    #min: number;
+
+    #max: number;
+
+    #startX = 0;
+
+    #startValue = 0;
+
+    #dragging = false;
+
+    #dragged = false;
+
+    constructor(node: FlowNode, config?: NumberWidgetConfig) {
+        super(node, config, 0);
+        this.#step = config?.step;
+        this.#integer = config?.integer === true;
+        this.#min = config?.min ?? -Infinity;
+        this.#max = config?.max ?? Infinity;
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.EWResize;
+    }
+
+    protected render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        drawField(ctx, box, scale, {
+            input: true,
+            hovered: this.hovered() || this.pressed(),
+            label: this.label(),
+            value: formatNumber(this.value()),
+        });
+    }
+
+    protected onPointerDown(pointer: WidgetPointer): void {
+        this.#startX = pointer.position.x;
+        this.#startValue = this.value();
+        this.#dragging = false;
+        this.#dragged = false;
+    }
+
+    protected onPointerMove(pointer: WidgetPointer): void {
+        const dx = pointer.position.x - this.#startX;
+        if (!this.#dragging && Math.abs(dx) < DRAG_THRESHOLD) {
+            return;
+        }
+        this.#dragging = true;
+        this.input(this.#clean(this.#startValue + (dx * this.#stepFor(this.#startValue))));
+    }
+
+    protected onPointerUp(): void {
+        this.#dragged = this.#dragging;
+        if (this.#dragging) {
+            this.#dragging = false;
+            this.commit(this.value(), this.#startValue);
+        }
+    }
+
+    protected onClick(): void {
+        if (this.#dragged) {
+            return;
+        }
+        const before = this.value();
+        editInPlace({
+            canvas: this.canvas(),
+            box: this.box(),
+            scale: this.scale(),
+            value: String(before),
+            onCommit: (text) => {
+                const parsed = Number.parseFloat(text);
+                if (Number.isFinite(parsed)) {
+                    this.commit(this.#clean(parsed), before);
+                }
+            },
+        });
+    }
+
+    #stepFor(value: number): number {
+        if (this.#step !== undefined) {
+            return this.#step;
+        }
+        return Math.max(Math.abs(value) * 0.01, this.#integer ? 0.1 : 0.01);
+    }
+
+    #clean(value: number): number {
+        const rounded = this.#integer ? Math.round(value) : value;
+        return Math.min(this.#max, Math.max(this.#min, rounded));
+    }
+}
+
+export function formatNumber(value: number): string {
+    return '' + parseFloat(value.toPrecision(6));
+}