@elicdavis/node-flow 0.2.1 → 0.2.3

package/index.html

@@ -192,7 +192,7 @@
         import {
             Theme, FlowNode, FlowNote, NodeFlowGraph, Publisher,
             MessageType, ContextMenuItemState, DefaultConnectionRenderer,
-            WidgetBase, ValueWidget, drawFieldBox, widgetFont,
+            ValueWidget, drawFieldBox, widgetFont,
             NumberWidget, StringWidget, ToggleWidget, ButtonWidget, TextWidget, ImageWidget, RowWidget,
             setTheme, onThemeChange,
         } from "./dist/web/NodeFlow.js";
@@ -352,46 +352,6 @@
             }
         }
 
-        class MorePortsWidget extends WidgetBase {
-            #ports;
-            #open = false;
-
-            constructor(ports) {
-                super();
-                this.#ports = ports;
-            }
-
-            Size() {
-                return { x: 150, y: 16 };
-            }
-
-            render(ctx, box, scale) {
-                const waiting = this.#ports.filter((p) => p.connections().length === 0).length;
-                const label = this.#open ? "▴ less" : `▾ ${waiting} more`;
-                const y = box.Position.y + box.Size.y / 2;
-                const cx = box.Position.x + box.Size.x / 2;
-                ctx.font = widgetFont(scale * 0.8);
-                const half = ctx.measureText(label).width / 2 + 6 * scale;
-                ctx.globalAlpha = this.hovered() ? 1 : 0.55;
-                ctx.strokeStyle = ctx.fillStyle = Theme.Widget.FontColor;
-                ctx.lineWidth = Math.max(1, scale);
-                ctx.beginPath();
-                ctx.moveTo(box.Position.x, y);
-                ctx.lineTo(cx - half, y);
-                ctx.moveTo(cx + half, y);
-                ctx.lineTo(box.Position.x + box.Size.x, y);
-                ctx.stroke();
-                ctx.textAlign = "center";
-                ctx.textBaseline = "middle";
-                ctx.fillText(label, cx, y);
-            }
-
-            onClick() {
-                this.#open = !this.#open;
-                this.#ports.forEach((p) => p.setHidden(!this.#open));
-            }
-        }
-
         const mathPublisher = new Publisher({
             name: "Math",
             description: "Nodes the live example evaluates",
@@ -745,7 +705,7 @@ inputs: [
 
 A port can start **hidden**, to keep busy nodes small. A hidden port still shows while something is wired to it, so no wire ever points at nothing.
 
-The "more" line is a custom widget that shows and hides them.
+A node with hidden ports gets a **more** line under them. Click it to show or hide them all.
 
 \`\`\`
 inputs: [
@@ -770,15 +730,52 @@ port.setHidden(false);
             ],
             outputs: [{ name: "material", type: "material" }],
         });
-        const hiddenPorts = [];
-        for (let i = 0; i < material.inputs(); i++) {
-            if (["Alpha", "Clearcoat", "Sheen", "Specular", "Unlit"].includes(material.inputPort(i).getDisplayName())) {
-                hiddenPorts.push(material.inputPort(i));
-            }
-        }
-        material.insertWidget(0, new MorePortsWidget(hiddenPorts));
         graph.connectNodes(sheen, 0, material, 5);
 
+        note(at(4, 0), `
+# Widgets on ports
+
+An input can hold its own value in a **widget** on its row. The widget stands in for a wire, so it steps aside while something is connected and comes back when the wire is removed.
+
+Try wiring **Size** into **Radius**.
+
+\`\`\`
+inputs: [
+  { name: "Radius", type: "float32",
+    widget: { type: "number", config:
+      { property: "radius", value: 1 } } },
+]
+\`\`\`
+
+The value lives in the node's **property**, so edit listeners and \`setProperty\` work as they do for any widget.
+`);
+        const size = add({
+            title: "Size", position: at(4, 0, 0, 600),
+            outputs: [{ name: "value", type: "float32" }],
+            widgets: [{ type: "number", config: { value: 2.5, label: "Value" } }],
+        });
+        const circle = add({
+            title: "Circle", subTitle: "Widgets on ports", position: at(4, 0, 330, 540),
+            inputs: [
+                { name: "Radius", type: "float32", widget: { type: "number", config: { property: "radius", value: 1, width: 90 } } },
+                { name: "Segments", type: "int", widget: { type: "number", config: { property: "segments", value: 32, integer: true, min: 3, width: 90 } } },
+                {
+                    name: "Center", type: "vector2", widget: {
+                        type: "row", config: {
+                            widgets: ["X", "Y"].map((axis) => ({ type: "number", config: { property: axis.toLowerCase(), label: axis, value: 0, width: 64 } })),
+                        },
+                    },
+                },
+                { name: "Fill", type: "color", widget: { type: "color", config: { property: "fill", value: "#3fa7d6", width: 90 } } },
+                { name: "Filled", type: "bool", widget: { type: "toggle", config: { property: "filled", value: true, label: "", width: 60 } } },
+                { name: "Name", type: "string", widget: { type: "string", config: { property: "name", value: "circle", width: 120 } } },
+            ],
+            outputs: [{ name: "shape", type: "shape" }],
+        });
+        logEdits(circle, "radius", "segments", "x", "y", "fill", "filled", "name");
+        circle.inputPort(0).addConnectionAddedListener(() => log("Circle", "Radius wired, its widget steps aside"));
+        circle.inputPort(0).addConnectionRemovedListener(() => log("Circle", "Radius unwired, its widget is back"));
+
         note(at(0, 1), `
 # Widgets
 

package/package.json

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

package/src/graph.ts

@@ -250,8 +250,8 @@ export class NodeFlowGraph {
             this.#clickEnd.bind(this),
             this.#openContextMenu.bind(this),
             this.#fileDrop.bind(this),
-            (amount, anchor) => {
-                this.zoom(amount, anchor);
+            (factor, anchor) => {
+                this.#zoomBy(factor, anchor);
             }
         );
 
@@ -417,6 +417,10 @@ export class NodeFlowGraph {
 
 
     zoom(amount: number, anchor?: Vector2): void {
+        this.#zoomBy(1 + amount * 0.05, anchor);
+    }
+
+    #zoomBy(factor: number, anchor?: Vector2): void {
         const anchorPos = anchor ?? this.#mousePosition;
 
         let oldPos: Vector2 | undefined = undefined;
@@ -424,7 +428,7 @@ export class NodeFlowGraph {
             oldPos = this.#sceenPositionToGraphPosition(anchorPos);
         }
 
-        this.#camera.zoom += amount * this.#camera.zoom * 0.05;
+        this.#camera.zoom *= factor;
 
         if (!oldPos || anchorPos === undefined) {
             return;

package/src/input.ts

@@ -3,7 +3,7 @@ import { CopyVector2, Distance, SubVector2, Vector2, Zero } from "./types/vector
 
 const LONG_PRESS_MS = 500;
 const LONG_PRESS_SLOP = 12;
-const PINCH_SENSITIVITY = 50;
+const WHEEL_ZOOM_PER_PIXEL = 0.0005;
 const SUPPRESS_MOUSE_MS = 600;
 
 export class MouseObserver {
@@ -18,7 +18,7 @@ export class MouseObserver {
     #clickStart: (position: Vector2, shiftOrCtrl: boolean) => void;
     #clickStop: () => void;
     #contextMenu: (position: Vector2) => void;
-    #zoomCallback: (amount: number, anchor: Vector2) => void;
+    #zoomCallback: (factor: number, anchor: Vector2) => void;
 
     #longPressTimer: ReturnType<typeof setTimeout> | null = null;
     #longPressOrigin: Vector2 = Zero();
@@ -34,7 +34,7 @@ export class MouseObserver {
         clickStop: () => void,
         contextMenu: (position: Vector2) => void,
         fileDrop: (file: File) => void,
-        zoomCallback: (amount: number, anchor: Vector2) => void,
+        zoomCallback: (factor: number, anchor: Vector2) => void,
     ) {
         this.#ele = ele;
         this.#dragCallback = dragCallback;
@@ -132,14 +132,12 @@ export class MouseObserver {
         } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
             dy *= this.#ele.clientHeight;
         }
-        // Scroll up zooms in (matches Figma / Maps).
-        const amount = -dy / 100;
-        if (amount === 0) {
+        if (dy === 0) {
             return;
         }
         const anchor = this.#mousePos(event);
         this.#moveCallback(anchor);
-        this.#zoomCallback(amount, anchor);
+        this.#zoomCallback(Math.exp(-dy * WHEEL_ZOOM_PER_PIXEL), anchor);
     }
 
     #move(event: MouseEvent): void {
@@ -226,7 +224,7 @@ export class MouseObserver {
             const anchor = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
             if (this.#pinchDist > 0) {
                 this.#moveCallback(anchor);
-                this.#zoomCallback((dist - this.#pinchDist) / PINCH_SENSITIVITY, anchor);
+                this.#zoomCallback(dist / this.#pinchDist, anchor);
             }
             this.#pinchDist = dist;
             return;

package/src/node.ts

@@ -4,6 +4,7 @@ import { FontWeight, TextStyle, TextStyleConfig, TextStyleFallback } from "./sty
 import { Box, InBox } from "./types/box";
 import { CopyVector2, Distance, ScaleVector, Vector2, Zero } from "./types/vector2";
 import { Widget } from './widgets/widget';
+import { HiddenPortsToggle } from './widgets/hidden_ports';
 import { List } from './types/list';
 import { BoxStyle, BoxStyleConfig, BoxStyleWithFallback } from "./styles/box";
 import { Text } from "./types/text";
@@ -242,6 +243,8 @@ export class FlowNode {
 
     #widgetPositions: List<Box>;
 
+    #portWidgetPositions: List<Box> = new List<Box>();
+
     #data: Metadata;
 
     #registeredAnyPropertyChangeCallbacks: Array<AnyPropertyChangeCallback>;
@@ -801,10 +804,11 @@ export class FlowNode {
             }
             this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
             size.y += this.#portRowHeight(port, tempMeasurement.y) + this.#elementSpacing;
-            size.x = Math.max(size.x, tempMeasurement.x + doublePadding)
+            size.x = Math.max(size.x, this.#portRowWidth(port, tempMeasurement.x) + doublePadding)
         }
 
-        for (const widget of this.#widgets) {
+        const widgets = this.#hasHiddenPortsToggle() ? [this.#hiddenPortsToggle, ...this.#widgets] : this.#widgets;
+        for (const widget of widgets) {
             if (widget.Hidden?.()) {
                 continue;
             }
@@ -827,6 +831,9 @@ export class FlowNode {
 
     addInput(config: PortConfig): Port {
         const port = new Port(this, config.array ? PortType.InputArray : PortType.Input, config);
+        if (config.widget !== undefined) {
+            port.setWidget(GlobalWidgetFactory.createFromConfig(this, config.widget));
+        }
         this.#input.push(port);
         return port;
     }
@@ -837,6 +844,38 @@ export class FlowNode {
         return port;
     }
 
+    #hiddenPortsShown = false;
+
+    #hiddenPortsToggle = new HiddenPortsToggle(this);
+
+    #hiddenPortsTogglePosition: Box | null = null;
+
+    hiddenPortsShown(): boolean {
+        return this.#hiddenPortsShown;
+    }
+
+    setHiddenPortsShown(shown: boolean): void {
+        if (shown === this.#hiddenPortsShown) {
+            return;
+        }
+        this.#hiddenPortsShown = shown;
+        this.invalidateLayout();
+    }
+
+    hiddenPortCount(): number {
+        let count = 0;
+        for (const port of [...this.#input, ...this.#output]) {
+            if (port.tucked()) {
+                count++;
+            }
+        }
+        return count;
+    }
+
+    #hasHiddenPortsToggle(): boolean {
+        return this.hiddenPortCount() > 0;
+    }
+
     addWidget(widget: Widget): void {
         this.#widgets.push(widget);
         requestRender();
@@ -930,6 +969,12 @@ export class FlowNode {
             }
         }
 
+        if (this.#hiddenPortsTogglePosition !== null && InBox(this.#hiddenPortsTogglePosition, position)) {
+            intersection.Node = this;
+            intersection.Widget = this.#hiddenPortsToggle;
+            intersection.WidgetBox = this.#hiddenPortsTogglePosition;
+        }
+
         for (let i = 0; i < this.#widgetPositions.Count(); i++) {
             const widget = this.#widgets[i];
             if (widget !== undefined && !widget.Hidden?.() && InBox(this.#widgetPositions.At(i), position)) {
@@ -940,6 +985,18 @@ export class FlowNode {
             }
         }
 
+        for (let i = 0; i < this.#portWidgetPositions.Count(); i++) {
+            const port = this.#input[i];
+            if (port !== undefined && port.widgetShown() && InBox(this.#portWidgetPositions.At(i), position)) {
+                intersection.Node = this;
+                intersection.Widget = port.widget() as Widget;
+                intersection.WidgetBox = this.#portWidgetPositions.At(i);
+                intersection.Port = undefined;
+                intersection.PortIndex = undefined;
+                intersection.PortIsInput = undefined;
+            }
+        }
+
         return intersection;
     }
 
@@ -1085,7 +1142,15 @@ export class FlowNode {
 
     #portRowHeight(port: Port, textHeight: number): number {
         const slots = port.slots();
-        return slots > 1 ? Math.max(textHeight, slots * ARRAY_SLOT_PITCH) : textHeight;
+        const widget = port.widgetShown() ? (port.widget() as Widget).Size().y : 0;
+        return Math.max(slots > 1 ? slots * ARRAY_SLOT_PITCH : 0, textHeight, widget);
+    }
+
+    #portRowWidth(port: Port, textWidth: number): number {
+        if (!port.widgetShown()) {
+            return textWidth;
+        }
+        return textWidth + this.#elementSpacing + (port.widget() as Widget).Size().x;
     }
 
     public hasBeenLaidOut(): boolean {
@@ -1113,6 +1178,7 @@ export class FlowNode {
             this.#inputPortPositions.Clear();
             this.#outputPortPositions.Clear();
             this.#widgetPositions.Clear();
+            this.#portWidgetPositions.Clear();
             const scaledPadding = this.#padding * camera.zoom;
             const scaledElementSpacing = this.#elementSpacing * camera.zoom;
 
@@ -1253,6 +1319,7 @@ export class FlowNode {
                 const port = this.#input[i];
                 if (port.hidden()) {
                     this.#inputPortPositions.Push({ Position: { x: nodeBounds.Position.x, y: startY }, Size: { x: 0, y: 0 } });
+                    this.#portWidgetPositions.Push({ Position: { x: nodeBounds.Position.x, y: startY }, Size: { x: 0, y: 0 } });
                     continue;
                 }
                 this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
@@ -1266,6 +1333,21 @@ export class FlowNode {
                 this.#portTextStyle.setupStyle(ctx, camera.zoom);
                 ctx.fillText(port.getDisplayName(), leftSide, position.y);
 
+                // Widget
+                if (port.widgetShown()) {
+                    const widget = port.widget() as Widget;
+                    const widgetHeight = widget.Size().y * camera.zoom;
+                    const widgetLeft = leftSide + (tempMeasurement.x * camera.zoom) + scaledElementSpacing;
+                    const box: Box = {
+                        Position: { x: widgetLeft, y: startY + ((portHeight - widgetHeight) / 2) },
+                        Size: { x: nodeBounds.Position.x + nodeBounds.Size.x - scaledPadding - widgetLeft, y: widgetHeight },
+                    };
+                    widget.Draw(ctx, box, camera.zoom, mousePosition);
+                    this.#portWidgetPositions.Push(box);
+                } else {
+                    this.#portWidgetPositions.Push({ Position: { x: nodeBounds.Position.x, y: startY }, Size: { x: 0, y: 0 } });
+                }
+
                 // Port
                 this.#inputPortPositions.Push(port.render(ctx, position, camera, mousePosition, postProcess));
 
@@ -1297,6 +1379,17 @@ export class FlowNode {
                 startY += portHeight + scaledElementSpacing;
             }
 
+            this.#hiddenPortsTogglePosition = null;
+            if (this.#hasHiddenPortsToggle()) {
+                const box: Box = {
+                    Position: { x: nodeBounds.Position.x + scaledPadding, y: startY },
+                    Size: { x: nodeBounds.Size.x - (scaledPadding * 2), y: this.#hiddenPortsToggle.Size().y * camera.zoom },
+                };
+                this.#hiddenPortsToggle.Draw(ctx, box, camera.zoom, mousePosition);
+                this.#hiddenPortsTogglePosition = box;
+                startY += box.Size.y + scaledElementSpacing;
+            }
+
             // Widgets
             for (let i = 0; i < this.#widgets.length; i++) {
                 const widget = this.#widgets[i];
@@ -1360,6 +1453,8 @@ export class FlowNode {
             return false;
         }
         this.#widgetPositions.Clear();
+        this.#portWidgetPositions.Clear();
+        this.#hiddenPortsTogglePosition = null;
         return true;
     }
 

package/src/port.ts

@@ -11,6 +11,8 @@ import { Box, InBox } from "./types/box";
 import { Text } from "./types/text";
 import { Vector2 } from "./types/vector2";
 import { Color, HSV, HSV2RGB, RgbToHex } from './utils/color';
+import type { Widget } from "./widgets/widget";
+import type { WidgetConfig } from "./widgets/factory";
 
 export enum PortType {
     Input = "INPUT",
@@ -56,6 +58,12 @@ export interface PortConfig {
      */
     hidden?: boolean;
 
+    /**
+     * A widget drawn on the port's own row while nothing is connected to
+     * it, for a value the port holds on its own. Input ports only.
+     */
+    widget?: WidgetConfig;
+
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
     onConnectionAdded?: ConnectionChangeCallback;
@@ -167,6 +175,8 @@ export class Port {
 
     #onConnectionRemoved: Array<ConnectionChangeCallback>;
 
+    #widget: Widget | null = null;
+
     constructor(node: FlowNode, portType: PortType, config?: PortConfig) {
         this.#node = node;
         this.#connections = new Array<Connection>();
@@ -339,15 +349,40 @@ export class Port {
     }
 
     #visibilityMayHaveChanged(was: boolean): void {
-        if (was !== this.hidden() || this.#portType === PortType.InputArray) {
+        if (was !== this.hidden() || this.#portType === PortType.InputArray || this.#widget !== null) {
             this.#node?.invalidateLayout();
         }
     }
 
+    setWidget(widget: Widget | null): void {
+        this.#widget = widget;
+        this.#node?.invalidateLayout();
+    }
+
+    widget(): Widget | null {
+        return this.#widget;
+    }
+
     /**
-     * A port asked to hide still shows while anything is connected to it.
+     * The widget stands in for a wire, so it leaves once one is connected.
+     */
+    widgetShown(): boolean {
+        return this.#widget !== null
+            && this.#portType !== PortType.Output
+            && this.#connections.length === 0
+            && !this.hidden()
+            && !(this.#widget.Hidden?.() ?? false);
+    }
+
+    /**
+     * A port asked to hide still shows while anything is connected to it,
+     * and while its node is showing its hidden ports.
      */
     hidden(): boolean {
+        return this.tucked() && !(this.#node?.hiddenPortsShown() ?? false);
+    }
+
+    tucked(): boolean {
         return this.#hidden && this.#connections.length === 0;
     }