@elicdavis/node-flow 0.2.0 → 0.2.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@elicdavis/node-flow",
   "description": "build node graphs",
   "author": "Eli C Davis",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/graph.ts

@@ -19,6 +19,7 @@ export { CameraOrientation };
 import { PassSubsystem } from './pass/subsystem';
 import { QuickMenu } from './quickMenu';
 import { onRenderRequested, renderContinuously, requestRender } from './render_scheduler';
+import { placeEditsDuring } from './widgets/inplace';
 import { Minimap, MinimapConfig } from './minimap';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
@@ -761,10 +762,12 @@ export class NodeFlowGraph {
         TimeExecution("Render_Background", this.#renderBackground.bind(this));
 
         TimeExecution("Render_View_" + this.#currentView, () => {
-            let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
-            if (results?.cursorStyle) {
-                this.#cursor = results?.cursorStyle;
-            }
+            placeEditsDuring(this.#canvas, () => {
+                let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
+                if (results?.cursorStyle) {
+                    this.#cursor = results?.cursorStyle;
+                }
+            });
         });
 
         TimeExecution("Render_Minimap", () => {

package/src/index.ts

@@ -66,7 +66,7 @@ import { SliderWidget, SliderWidgetConfig } from './widgets/slider';
 import { ImageWidget, ImageWidgetConfig } from './widgets/image';
 import { RowWidget, RowWidgetConfig } from './widgets/row';
 import { drawField, drawFieldBox, drawFieldText, FieldLook, widgetFont } from './widgets/field';
-import { editInPlace, InPlaceEditConfig } from './widgets/inplace';
+import { editInPlace, InPlaceEdit, InPlaceEditConfig } from './widgets/inplace';
 export {
     WidgetBase, ValueWidget,
     NumberWidget, ColorWidget, StringWidget, TextWidget,
@@ -74,7 +74,7 @@ export {
     drawField, drawFieldBox, drawFieldText, widgetFont, editInPlace, formatNumber,
 };
 export type {
-    Widget, WidgetPointer, ValueWidgetConfig, FieldLook, InPlaceEditConfig,
+    Widget, WidgetPointer, ValueWidgetConfig, FieldLook, InPlaceEdit, InPlaceEditConfig,
     NumberWidgetConfig, ColorWidgetConfig, StringWidgetConfig, TextWidgetConfig,
     ButtonWidgetConfig, ToggleWidgetConfig, SliderWidgetConfig,
     ImageWidgetConfig, RowWidgetConfig,

package/src/widgets/inplace.ts

@@ -17,40 +17,90 @@ export interface InPlaceEditConfig {
     onCommit: (text: string) => void;
 }
 
+export interface InPlaceEdit {
+    input: HTMLInputElement;
+
+    /**
+     * Moves the input over where the widget was just drawn, in canvas pixels.
+     */
+    place(box: Box, scale: number): void;
+}
+
+interface OpenEdit {
+    canvas: HTMLCanvasElement;
+    input: HTMLInputElement;
+    placed: boolean;
+}
+
+const open = new Set<OpenEdit>();
+
+export function placeEditsDuring(canvas: HTMLCanvasElement, draw: () => void): void {
+    open.forEach((edit) => {
+        if (edit.canvas === canvas) {
+            edit.placed = false;
+        }
+    });
+    draw();
+    open.forEach((edit) => {
+        if (edit.canvas === canvas && !edit.placed) {
+            // Not visibility or display: hiding either way blurs the input, which ends the edit.
+            edit.input.style.opacity = "0";
+            edit.input.style.pointerEvents = "none";
+        }
+    });
+}
+
 /**
  * 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 {
+export function editInPlace(config: InPlaceEditConfig): InPlaceEdit | 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(";");
+    const edit: OpenEdit = { canvas, input, placed: true };
+
+    const place = (box: Box, scale: number) => {
+        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 left = rect.left + (box.Position.x * sx);
+        const top = rect.top + (box.Position.y * sy);
+        const width = box.Size.x * sx;
+        const height = box.Size.y * sy;
+        const clip = [
+            Math.max(0, rect.top - top),
+            Math.max(0, (left + width) - (rect.left + rect.width)),
+            Math.max(0, (top + height) - (rect.top + rect.height)),
+            Math.max(0, rect.left - left),
+        ];
+
+        edit.placed = true;
+        input.style.cssText = [
+            "position: fixed",
+            `left: ${left}px`,
+            `top: ${top}px`,
+            `width: ${width}px`,
+            `height: ${height}px`,
+            `clip-path: inset(${clip.map((c) => `${c}px`).join(" ")})`,
+            "box-sizing: border-box",
+            "margin: 0",
+            `padding: 0 ${Theme.Widget.Padding * scale}px`,
+            `font: ${Theme.Widget.FontSize * scale * sy}px ${Theme.FontFamily}`,
+            `color: ${Theme.Widget.FontColor}`,
+            `background: ${Theme.Widget.Hover.BackgroundColor}`,
+            `border: ${Theme.Widget.Border.Size * scale}px solid ${Theme.Widget.Border.Color}`,
+            `border-radius: ${Theme.Widget.Border.Radius * scale}px`,
+            "outline: none",
+            "z-index: 1000",
+        ].join(";");
+    };
+    place(config.box, config.scale);
 
     let done = false;
     const finish = (keep: boolean) => {
@@ -58,6 +108,7 @@ export function editInPlace(config: InPlaceEditConfig): HTMLInputElement | null
             return;
         }
         done = true;
+        open.delete(edit);
         input.remove();
         if (keep) {
             config.onCommit(input.value);
@@ -77,8 +128,9 @@ export function editInPlace(config: InPlaceEditConfig): HTMLInputElement | null
     });
     input.addEventListener("blur", () => finish(true));
 
+    open.add(edit);
     document.body.appendChild(input);
     input.focus();
     input.select();
-    return input;
+    return { input, place };
 }

package/src/widgets/number.ts

@@ -2,7 +2,6 @@ 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";
 
@@ -90,17 +89,11 @@ export class NumberWidget extends ValueWidget<number> {
             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);
-                }
-            },
+        this.editText(String(before), (text) => {
+            const parsed = Number.parseFloat(text);
+            if (Number.isFinite(parsed)) {
+                this.commit(this.#clean(parsed), before);
+            }
         });
     }
 

package/src/widgets/string.ts

@@ -2,7 +2,6 @@ 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> { }
@@ -28,12 +27,6 @@ export class StringWidget extends ValueWidget<string> {
 
     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),
-        });
+        this.editText(before, (text) => this.commit(text, before));
     }
 }

package/src/widgets/widget.ts

@@ -1,180 +1,201 @@
-import { Box, InBox } from '../types/box';
-import { Vector2 } from '../types/vector2';
-import { CursorStyle } from '../styles/cursor';
-import { requestRender } from '../render_scheduler';
-
-export const width = 150;
-export const height = 25;
-
-/**
- * Where the pointer is, in canvas pixels, and whether it is over the widget.
- * A press that starts on a widget keeps reporting to it until it is let go,
- * wherever the pointer wanders.
- */
-export interface WidgetPointer {
-    position: Vector2;
-    inside: boolean;
-}
-
-export interface Widget {
-    /**
-     * The smallest room the widget needs, in graph units. The node may hand
-     * it a wider box.
-     */
-    Size(): Vector2;
-
-    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
-
-    PointerDown?(pointer: WidgetPointer): void;
-    PointerMove?(pointer: WidgetPointer): void;
-    PointerUp?(pointer: WidgetPointer): void;
-
-    Cursor?(): CursorStyle;
-    Hidden?(): boolean;
-    Disabled?(): boolean;
-}
-
-export abstract class WidgetBase implements Widget {
-
-    #hidden = false;
-
-    #disabled = false;
-
-    #hovered = false;
-
-    #pressed = false;
-
-    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
-
-    #canvas: HTMLCanvasElement | null = null;
-
-    #scale = 1;
-
-    abstract Size(): Vector2;
-
-    protected abstract render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
-
-    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void {
-        this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
-        this.#canvas = ctx.canvas ?? null;
-        this.#scale = scale;
-        this.#hovered = !this.#disabled && mousePosition !== undefined && InBox(box, mousePosition);
-
-        ctx.save();
-        if (this.#disabled) {
-            ctx.globalAlpha *= 0.4;
-        }
-        this.render(ctx, box, scale);
-        ctx.restore();
-    }
-
-    PointerDown(pointer: WidgetPointer): void {
-        if (this.#disabled) {
-            return;
-        }
-        this.#pressed = true;
-        this.onPointerDown(pointer);
-        requestRender();
-    }
-
-    PointerMove(pointer: WidgetPointer): void {
-        if (!this.#pressed) {
-            return;
-        }
-        this.onPointerMove(pointer);
-        requestRender();
-    }
-
-    PointerUp(pointer: WidgetPointer): void {
-        if (!this.#pressed) {
-            return;
-        }
-        this.#pressed = false;
-        this.onPointerUp(pointer);
-        if (pointer.inside) {
-            this.onClick(pointer);
-        }
-        requestRender();
-    }
-
-    Cursor(): CursorStyle {
-        return CursorStyle.Pointer;
-    }
-
-    Hidden(): boolean {
-        return this.#hidden;
-    }
-
-    setHidden(hidden: boolean): void {
-        this.#hidden = hidden;
-        requestRender();
-    }
-
-    Disabled(): boolean {
-        return this.#disabled;
-    }
-
-    setDisabled(disabled: boolean): void {
-        this.#disabled = disabled;
-        if (disabled) {
-            this.#pressed = false;
-        }
-        requestRender();
-    }
-
-    protected hovered(): boolean {
-        return this.#hovered;
-    }
-
-    protected pressed(): boolean {
-        return this.#pressed;
-    }
-
-    /**
-     * Where the widget was last drawn, in canvas pixels.
-     */
-    protected box(): Box {
-        return this.#box;
-    }
-
-    protected canvas(): HTMLCanvasElement | null {
-        return this.#canvas;
-    }
-
-    protected scale(): number {
-        return this.#scale;
-    }
-
-    protected onPointerDown(pointer: WidgetPointer): void { }
-
-    protected onPointerMove(pointer: WidgetPointer): void { }
-
-    protected onPointerUp(pointer: WidgetPointer): void { }
-
-    /**
-     * A press and release that both landed on the widget.
-     */
-    protected onClick(pointer: WidgetPointer): void { }
-}
-
-interface PropertyReader {
-    getProperty(name: string): any;
-}
-
-export function startingWidgetValue<T>(
-    node: PropertyReader,
-    property: string | undefined,
-    configured: T | undefined,
-    fallback: T,
-): T {
-    if (configured !== undefined) {
-        return configured;
-    }
-    if (property !== undefined && property !== null) {
-        const existing = node.getProperty(property);
-        if (existing !== undefined && existing !== null) {
-            return existing as T;
-        }
-    }
-    return fallback;
-}
+import { Box, InBox } from '../types/box';
+import { Vector2 } from '../types/vector2';
+import { CursorStyle } from '../styles/cursor';
+import { requestRender } from '../render_scheduler';
+import { editInPlace, InPlaceEdit } from './inplace';
+
+export const width = 150;
+export const height = 25;
+
+/**
+ * Where the pointer is, in canvas pixels, and whether it is over the widget.
+ * A press that starts on a widget keeps reporting to it until it is let go,
+ * wherever the pointer wanders.
+ */
+export interface WidgetPointer {
+    position: Vector2;
+    inside: boolean;
+}
+
+export interface Widget {
+    /**
+     * The smallest room the widget needs, in graph units. The node may hand
+     * it a wider box.
+     */
+    Size(): Vector2;
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void;
+
+    PointerDown?(pointer: WidgetPointer): void;
+    PointerMove?(pointer: WidgetPointer): void;
+    PointerUp?(pointer: WidgetPointer): void;
+
+    Cursor?(): CursorStyle;
+    Hidden?(): boolean;
+    Disabled?(): boolean;
+}
+
+export abstract class WidgetBase implements Widget {
+
+    #hidden = false;
+
+    #disabled = false;
+
+    #hovered = false;
+
+    #pressed = false;
+
+    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+
+    #canvas: HTMLCanvasElement | null = null;
+
+    #scale = 1;
+
+    #editing: InPlaceEdit | null = null;
+
+    abstract Size(): Vector2;
+
+    protected abstract render(ctx: CanvasRenderingContext2D, box: Box, scale: number): void;
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, mousePosition: Vector2 | undefined): void {
+        this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
+        this.#canvas = ctx.canvas ?? null;
+        this.#scale = scale;
+        this.#hovered = !this.#disabled && mousePosition !== undefined && InBox(box, mousePosition);
+
+        if (this.#editing !== null) {
+            if (this.#editing.input.isConnected) {
+                this.#editing.place(this.#box, scale);
+            } else {
+                this.#editing = null;
+            }
+        }
+
+        ctx.save();
+        if (this.#disabled) {
+            ctx.globalAlpha *= 0.4;
+        }
+        this.render(ctx, box, scale);
+        ctx.restore();
+    }
+
+    PointerDown(pointer: WidgetPointer): void {
+        if (this.#disabled) {
+            return;
+        }
+        this.#pressed = true;
+        this.onPointerDown(pointer);
+        requestRender();
+    }
+
+    PointerMove(pointer: WidgetPointer): void {
+        if (!this.#pressed) {
+            return;
+        }
+        this.onPointerMove(pointer);
+        requestRender();
+    }
+
+    PointerUp(pointer: WidgetPointer): void {
+        if (!this.#pressed) {
+            return;
+        }
+        this.#pressed = false;
+        this.onPointerUp(pointer);
+        if (pointer.inside) {
+            this.onClick(pointer);
+        }
+        requestRender();
+    }
+
+    Cursor(): CursorStyle {
+        return CursorStyle.Pointer;
+    }
+
+    Hidden(): boolean {
+        return this.#hidden;
+    }
+
+    setHidden(hidden: boolean): void {
+        this.#hidden = hidden;
+        requestRender();
+    }
+
+    Disabled(): boolean {
+        return this.#disabled;
+    }
+
+    setDisabled(disabled: boolean): void {
+        this.#disabled = disabled;
+        if (disabled) {
+            this.#pressed = false;
+        }
+        requestRender();
+    }
+
+    protected hovered(): boolean {
+        return this.#hovered;
+    }
+
+    protected pressed(): boolean {
+        return this.#pressed;
+    }
+
+    /**
+     * Where the widget was last drawn, in canvas pixels.
+     */
+    protected box(): Box {
+        return this.#box;
+    }
+
+    protected canvas(): HTMLCanvasElement | null {
+        return this.#canvas;
+    }
+
+    protected scale(): number {
+        return this.#scale;
+    }
+
+    protected editText(value: string, onCommit: (text: string) => void): void {
+        this.#editing = editInPlace({
+            canvas: this.#canvas,
+            box: this.#box,
+            scale: this.#scale,
+            value,
+            onCommit,
+        });
+    }
+
+    protected onPointerDown(pointer: WidgetPointer): void { }
+
+    protected onPointerMove(pointer: WidgetPointer): void { }
+
+    protected onPointerUp(pointer: WidgetPointer): void { }
+
+    /**
+     * A press and release that both landed on the widget.
+     */
+    protected onClick(pointer: WidgetPointer): void { }
+}
+
+interface PropertyReader {
+    getProperty(name: string): any;
+}
+
+export function startingWidgetValue<T>(
+    node: PropertyReader,
+    property: string | undefined,
+    configured: T | undefined,
+    fallback: T,
+): T {
+    if (configured !== undefined) {
+        return configured;
+    }
+    if (property !== undefined && property !== null) {
+        const existing = node.getProperty(property);
+        if (existing !== undefined && existing !== null) {
+            return existing as T;
+        }
+    }
+    return fallback;
+}

package/test/support.ts

@@ -94,7 +94,7 @@ export interface StubElement {
     tagName: string;
     type: string;
     value: string;
-    style: { cssText: string };
+    style: { cssText: string, opacity?: string, pointerEvents?: string };
     children: Array<StubElement>;
     isConnected: boolean;
     clicked: number;
@@ -115,6 +115,19 @@ export interface StubElement {
     fire(name: string, event?: any): void;
 }
 
+function stubStyle(): StubElement['style'] {
+    const style: any = {};
+    let css = '';
+    Object.defineProperty(style, 'cssText', {
+        get: () => css,
+        set: (value: string) => {
+            css = value;
+            Object.keys(style).forEach((key) => delete style[key]);
+        },
+    });
+    return style;
+}
+
 export function withDocument(run: (body: StubElement, created: Array<StubElement>) => void): void {
     const created: Array<StubElement> = [];
     const element = (tagName: string): StubElement => {
@@ -123,7 +136,7 @@ export function withDocument(run: (body: StubElement, created: Array<StubElement
             tagName,
             type: '',
             value: '',
-            style: { cssText: '' },
+            style: stubStyle(),
             children: [],
             isConnected: false,
             clicked: 0,