@elicdavis/node-flow 0.2.2 → 0.2.4

package/index.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="#" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=VT323&display=swap"
         rel="stylesheet">
     <style>
         * {
@@ -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";
@@ -253,6 +253,7 @@
                 },
                 Note: {
                     FontColor: "#ffffff",
+                    CodeFontFamily: "VT323",
                     CodeBlock: { BackgroundColor: "#000000", FontColor: "#c0c0c0", BorderRadius: 0 },
                 },
             },
@@ -352,46 +353,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 +706,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 +731,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.4",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/contextMenu.ts

@@ -261,11 +261,11 @@ export class ContextMenu {
 
     #bounds: Box | null = null;
 
-    #contains(point: Vector2): boolean {
+    public contains(point: Vector2): boolean {
         if (this.#bounds !== null && InBox(this.#bounds, point)) {
             return true;
         }
-        return this.#openSubMenu !== undefined && this.#openSubMenu.#contains(point);
+        return this.#openSubMenu !== undefined && this.#openSubMenu.contains(point);
     }
 
     /**
@@ -315,7 +315,7 @@ export class ContextMenu {
             Size: { x: scaledEntryWidth, y: totalScaledHeight },
         };
 
-        const pointer = mousePosition !== undefined && this.#openSubMenu !== undefined && this.#openSubMenu.#contains(mousePosition)
+        const pointer = mousePosition !== undefined && this.#openSubMenu !== undefined && this.#openSubMenu.contains(mousePosition)
             ? undefined
             : mousePosition;
 

package/src/graph.ts

@@ -10,7 +10,7 @@ import { Clamp01 } from "./utils/math";
 import { GraphSubsystem, RenderResults } from './graphSubsystem';
 import { FlowNote } from "./notes/note";
 import { NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback, NoteRemovedCallback, NoteSubsystem, NoteSubsystemConfig } from "./notes/subsystem";
-import { ConnectionRendererConfiguration, DanglingConnection, InternalConnection, NodeAddedCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
+import { ConnectionRendererConfiguration, DanglingConnection, InternalConnection, NodeAddedCallback, NodeHoverCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
 import { Connection } from './connection';
 import { Publisher } from './nodes/publisher';
 import { VectorPool } from './types/pool';
@@ -21,6 +21,7 @@ import { QuickMenu } from './quickMenu';
 import { onRenderRequested, renderContinuously, requestRender } from './render_scheduler';
 import { placeEditsDuring } from './widgets/inplace';
 import { Minimap, MinimapConfig } from './minimap';
+import { Cast } from './port';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
 
@@ -65,6 +66,7 @@ export interface FlowNodeGraphConfiguration {
     idleConnection?: ConnectionRendererConfiguration
     contextMenu?: ContextMenuConfig
     nodes?: NodeFactoryConfig
+    casts?: Array<Cast>
     board?: NoteSubsystemConfig
     minimap?: MinimapConfig
 }
@@ -164,6 +166,8 @@ export class NodeFlowGraph {
 
     #mousePosition: Vector2 | undefined;
 
+    #mouseOverCanvas = false;
+
     #camera: Camera;
 
     #openedContextMenu: OpenContextMenu | null;
@@ -185,7 +189,8 @@ export class NodeFlowGraph {
 
         this.#mainNodeSubsystem = new NodeSubsystem(postProcessPass, {
             nodes: config?.nodes,
-            idleConnection: config?.idleConnection
+            idleConnection: config?.idleConnection,
+            casts: config?.casts,
         });
 
         this.#lastFrameCursor = CursorStyle.Default;
@@ -245,6 +250,7 @@ export class NodeFlowGraph {
             this.#mouseDragEvent.bind(this),
             (mousePosition) => {
                 this.#mousePosition = mousePosition;
+                this.#mouseOverCanvas = true;
             },
             this.#clickStart.bind(this),
             this.#clickEnd.bind(this),
@@ -252,6 +258,9 @@ export class NodeFlowGraph {
             this.#fileDrop.bind(this),
             (factor, anchor) => {
                 this.#zoomBy(factor, anchor);
+            },
+            () => {
+                this.#mouseOverCanvas = false;
             }
         );
 
@@ -455,6 +464,7 @@ export class NodeFlowGraph {
         this.#contextMenuEntryHovering = null;
 
         this.#mousePosition = mousePosition;
+        this.#mouseOverCanvas = true;
 
         if (this.#minimap.contains(mousePosition)) {
             this.#lookAtFromMinimap(mousePosition);
@@ -494,6 +504,10 @@ export class NodeFlowGraph {
         this.#mainNodeSubsystem.addPublisher(identifier, publisher);
     }
 
+    setCasts(casts: Array<Cast>): void {
+        this.#mainNodeSubsystem.setCasts(casts);
+    }
+
     getNodes(): Array<FlowNode> {
         return this.#mainNodeSubsystem.getNodes();
     }
@@ -643,6 +657,10 @@ export class NodeFlowGraph {
         this.#mainNodeSubsystem.addOnNodeRemovedListener(callback);
     }
 
+    public addNodeHoverListener(callback: NodeHoverCallback): void {
+        this.#mainNodeSubsystem.addNodeHoverListener(callback);
+    }
+
     #sceenPositionToGraphPosition(screenPosition: Vector2): Vector2 {
         const out = Zero();
         this.#camera.screenSpaceToGraphSpace(screenPosition, out);
@@ -674,6 +692,7 @@ export class NodeFlowGraph {
             {
                 needs: dangling.needs,
                 types: dangling.types,
+                casts: this.#mainNodeSubsystem.casts(),
                 onCreated: dangling.connectTo,
             },
         );
@@ -767,7 +786,7 @@ export class NodeFlowGraph {
 
         TimeExecution("Render_View_" + this.#currentView, () => {
             placeEditsDuring(this.#canvas, () => {
-                let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
+                let results = this.currentView().render(this.#ctx, this.#camera, this.#pointerOnGraph());
                 if (results?.cursorStyle) {
                     this.#cursor = results?.cursorStyle;
                 }
@@ -790,6 +809,21 @@ export class NodeFlowGraph {
         this.#lastFrameCursor = this.#cursor;
     }
 
+    #pointer(): Vector2 | undefined {
+        return this.#mouseOverCanvas ? this.#mousePosition : undefined;
+    }
+
+    #pointerOnGraph(): Vector2 | undefined {
+        const pointer = this.#pointer();
+        if (pointer === undefined) {
+            return undefined;
+        }
+        if (this.#openedContextMenu?.Menu.contains(pointer) || this.#openQuickMenu?.Menu.contains(pointer)) {
+            return undefined;
+        }
+        return pointer;
+    }
+
     #renderBackground(): void {
         this.#backgroundRenderer(this.#canvas, this.#ctx, this.#camera.position, this.#camera.zoom);
     }
@@ -799,7 +833,7 @@ export class NodeFlowGraph {
             if (this.#openedContextMenu !== null) {
                 const pos = VectorPool.get();
                 this.#camera.graphSpaceToScreenSpace(this.#openedContextMenu.Position, pos)
-                this.#contextMenuEntryHovering = this.#openedContextMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#mousePosition, true);
+                this.#contextMenuEntryHovering = this.#openedContextMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#pointer(), true);
 
                 if (this.#contextMenuEntryHovering !== null) {
                     this.#cursor = CursorStyle.Pointer;
@@ -813,7 +847,7 @@ export class NodeFlowGraph {
             if (this.#openQuickMenu !== null) {
                 const pos = VectorPool.get();
                 this.#camera.graphSpaceToScreenSpace(this.#openQuickMenu.Position, pos)
-                this.#contextMenuEntryHovering = this.#openQuickMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#mousePosition);
+                this.#contextMenuEntryHovering = this.#openQuickMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#pointer());
 
                 if (this.#contextMenuEntryHovering !== null) {
                     this.#cursor = CursorStyle.Pointer;

package/src/index.ts

@@ -24,8 +24,8 @@ export {
 };
 
 // Ports
-import { Port, PortConfig, PortStyle, PortType, portsCompatible } from './port';
-export { Port, PortConfig, PortStyle, PortType, portsCompatible };
+import { Cast, Port, PortConfig, PortStyle, PortType, portsCompatible, portsConnect } from './port';
+export { Cast, Port, PortConfig, PortStyle, PortType, portsCompatible, portsConnect };
 
 // Rendering
 import { renderContinuously, requestRender } from './render_scheduler';
@@ -34,14 +34,14 @@ export { renderContinuously, requestRender };
 import { Minimap, MinimapConfig } from './minimap';
 export { Minimap, MinimapConfig };
 
-import { DanglingConnection, InternalConnection } from './nodes/subsystem';
-export { DanglingConnection, InternalConnection };
+import { DanglingConnection, InternalConnection, NodeHoverCallback } from './nodes/subsystem';
+export { DanglingConnection, InternalConnection, NodeHoverCallback };
 
 import { NodeMenuFilter } from './nodes/publisher';
 export { NodeMenuFilter };
 
-import { portConfigTypes, typeSetsCompatible } from './port';
-export { portConfigTypes, typeSetsCompatible };
+import { portConfigTypes, portTypeColor, typeSetsCompatible, typeSetsConnect } from './port';
+export { portConfigTypes, portTypeColor, typeSetsCompatible, typeSetsConnect };
 
 // Connections
 import {

package/src/input.ts

@@ -19,6 +19,8 @@ export class MouseObserver {
     #clickStop: () => void;
     #contextMenu: (position: Vector2) => void;
     #zoomCallback: (factor: number, anchor: Vector2) => void;
+    #leaveCallback: (() => void) | undefined;
+    #inside = false;
 
     #longPressTimer: ReturnType<typeof setTimeout> | null = null;
     #longPressOrigin: Vector2 = Zero();
@@ -35,6 +37,7 @@ export class MouseObserver {
         contextMenu: (position: Vector2) => void,
         fileDrop: (file: File) => void,
         zoomCallback: (factor: number, anchor: Vector2) => void,
+        leaveCallback?: () => void,
     ) {
         this.#ele = ele;
         this.#dragCallback = dragCallback;
@@ -43,6 +46,7 @@ export class MouseObserver {
         this.#clickStop = clickStop;
         this.#contextMenu = contextMenu;
         this.#zoomCallback = zoomCallback;
+        this.#leaveCallback = leaveCallback;
 
         this.#clicked = false;
         this.#lastTouch = Zero();
@@ -64,6 +68,12 @@ export class MouseObserver {
         document.addEventListener("touchcancel", redraws(this.#touchEnd.bind(this)), false);
 
         ele.addEventListener("mousemove", redraws(this.#move.bind(this)), false);
+        ele.addEventListener("mouseleave", redraws(() => {
+            this.#inside = false;
+            if (!this.#clicked) {
+                this.#leaveCallback?.();
+            }
+        }), false);
         ele.addEventListener("touchmove", redraws(this.#touchMove.bind(this)), { passive: false });
 
         ele.addEventListener("wheel", redraws(this.#wheel.bind(this)), { passive: false });
@@ -144,6 +154,7 @@ export class MouseObserver {
         if (this.#fromTouch()) {
             return;
         }
+        this.#inside = true;
         const pos = this.#mousePos(event);
         if (this.#clicked) {
             const delta = Zero();
@@ -158,6 +169,7 @@ export class MouseObserver {
         if (event.button !== 0 || this.#fromTouch()) {
             return;
         }
+        this.#inside = true;
         this.#clicked = true;
         this.#clickStart(this.#mousePos(event), event.ctrlKey || event.shiftKey);
     }
@@ -166,8 +178,12 @@ export class MouseObserver {
         if (event.button !== 0 || this.#fromTouch()) {
             return;
         }
+        const wasClicked = this.#clicked;
         this.#clicked = false;
         this.#clickStop();
+        if (wasClicked && !this.#inside) {
+            this.#leaveCallback?.();
+        }
     }
 
     #touchStart(event: TouchEvent): void {

package/src/markdown/syntaxParser.ts

@@ -150,7 +150,7 @@ export class MarkdownSyntaxParser {
             this.#inc();
         }
 
-        return [new Text(content, { font: "monospace" })];
+        return [new Text(content, { font: Theme.Note.CodeFontFamily ?? "monospace" })];
     }
 
     #text(): Array<Text> {
@@ -315,7 +315,7 @@ export class MarkdownSyntaxParser {
         this.#inc(); // puts us on the next token
 
         const codeBlockText = this.#originalText.substring(start as number, end).replace(/\r?\n$/, "");
-        const entryText = new Text(codeBlockText);
+        const entryText = new Text(codeBlockText, { font: Theme.Note.CodeFontFamily ?? undefined });
         this.#assignStandardStyling([entryText])
         entryText.setColor(Theme.Note.CodeBlock.FontColor);
         return new CodeBlockEntry(entryText)

package/src/node.ts

@@ -237,12 +237,16 @@ export class FlowNode {
 
     #selected: boolean;
 
+    #highlighted = false;
+
     #inputPortPositions: List<Box>;
 
     #outputPortPositions: List<Box>;
 
     #widgetPositions: List<Box>;
 
+    #portWidgetPositions: List<Box> = new List<Box>();
+
     #data: Metadata;
 
     #registeredAnyPropertyChangeCallbacks: Array<AnyPropertyChangeCallback>;
@@ -366,6 +370,18 @@ export class FlowNode {
         }
     }
 
+    public highlighted(): boolean {
+        return this.#highlighted;
+    }
+
+    public setHighlighted(highlighted: boolean): void {
+        if (this.#highlighted === highlighted) {
+            return;
+        }
+        this.#highlighted = highlighted;
+        requestRender();
+    }
+
     public raiseDragStoppedEvent() {
         for (let i = 0; i < this.#onDragStop.length; i++) {
             this.#onDragStop[i](this);
@@ -802,7 +818,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 +845,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 +999,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 +1156,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 +1192,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;
 
@@ -1162,6 +1202,21 @@ export class FlowNode {
             const nodeStyle = this.#calculateStyle(state);
             nodeStyle.Draw(ctx, nodeBounds, camera.zoom);
 
+            if (this.#highlighted) {
+                const gap = 3;
+                ctx.save();
+                ctx.strokeStyle = Theme.Node.Border.Highlighted;
+                ctx.lineWidth = 2;
+                ctx.beginPath();
+                ctx.roundRect(
+                    nodeBounds.Position.x - gap, nodeBounds.Position.y - gap,
+                    nodeBounds.Size.x + gap * 2, nodeBounds.Size.y + gap * 2,
+                    nodeStyle.radius() * camera.zoom + gap
+                );
+                ctx.stroke();
+                ctx.restore();
+            }
+
             // Title
             const borderSize = nodeStyle.borderSize();
             ctx.textAlign = TextAlign.Center;
@@ -1293,6 +1348,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 +1362,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 +1482,7 @@ export class FlowNode {
             return false;
         }
         this.#widgetPositions.Clear();
+        this.#portWidgetPositions.Clear();
         this.#hiddenPortsTogglePosition = null;
         return true;
     }

package/src/nodes/publisher.ts

@@ -1,6 +1,6 @@
 import { ContextMenuConfig, ContextMenuItemConfig } from "../contextMenu";
 import { FlowNode, FlowNodeConfig } from '../node';
-import { PortConfig, PortType, portConfigTypes, typeSetsCompatible } from "../port";
+import { Cast, PortConfig, PortType, portConfigTypes, typeSetsConnect } from "../port";
 import { Vector2 } from "../types/vector2";
 import { NodeSubsystem } from "./subsystem";
 
@@ -15,18 +15,16 @@ export interface NodeMenuFilter {
     /** Types that side has to accept. An empty list takes anything. */
     types: Array<string>;
 
+    casts?: Array<Cast>;
+
     onCreated?: (node: FlowNode) => void;
 }
 
 function offersMatchingPort(config: FlowNodeConfig, filter: NodeMenuFilter): boolean {
-    const ports: Array<PortConfig> | undefined =
-        filter.needs === PortType.Input ? config.inputs : config.outputs;
-
-    if (ports === undefined) {
-        return false;
+    if (filter.needs === PortType.Input) {
+        return (config.inputs ?? []).some((port) => typeSetsConnect(filter.types, portConfigTypes(port), filter.casts));
     }
-
-    return ports.some((port) => typeSetsCompatible(portConfigTypes(port), filter.types));
+    return (config.outputs ?? []).some((port) => typeSetsConnect(portConfigTypes(port), filter.types, filter.casts));
 }
 
 interface PublisherNodes {