@elicdavis/node-flow 0.2.2 → 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.2",
+  "version": "0.2.3",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/node.ts

@@ -243,6 +243,8 @@ export class FlowNode {
 
     #widgetPositions: List<Box>;
 
+    #portWidgetPositions: List<Box> = new List<Box>();
+
     #data: Metadata;
 
     #registeredAnyPropertyChangeCallbacks: Array<AnyPropertyChangeCallback>;
@@ -802,7 +804,7 @@ 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)
         }
 
         const widgets = this.#hasHiddenPortsToggle() ? [this.#hiddenPortsToggle, ...this.#widgets] : this.#widgets;
@@ -829,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;
     }
@@ -980,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;
     }
 
@@ -1125,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 {
@@ -1153,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;
 
@@ -1293,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);
@@ -1306,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));
 
@@ -1411,6 +1453,7 @@ 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,11 +349,31 @@ 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;
+    }
+
+    /**
+     * 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.