Node system: Quick add and connect when connecting to air

Author: nahkd123

lab/node-system/README.md

@@ -23,6 +23,8 @@ Node network view navigation controls:
 - Drag and drop socket of the same type to connect.
   - Most of the socket only accepts at most 1 input.
   - Some socket can accept more than 1 input.
+- Quickly create and connect to new node by dragging socket to the air.
+  - Only socket of compatible type will be shown.
 
 ## Goals
 In order to consider this experiment a success, all required goals must be achieved.

lab/node-system/demo/nodes.base.ts

@@ -1,4 +1,4 @@
-import { Node, type NodeCreateOptions, type NodePart, type Socket } from "../mod.ts";
+import { Node, type NodeCreateOptions, type NodePart, type Socket, SocketInfo } from "../mod.ts";
 
 export abstract class WgslNode extends Node {
     abstract wgslSetup(ctx: WgslContext): void;
@@ -14,6 +14,7 @@ export interface WgslContext {
 export interface NodeFactory<N extends Node> {
     readonly name: string;
     type: { new (options: NodeCreateOptions): N };
+    initials?: SocketInfo[];
     populatePartInterface?(node: N, part: NodePart): Element;
 }
 

lab/node-system/demo/nodes.shader.ts

@@ -19,7 +19,14 @@ export class VertexInputNode extends WgslNode {
         }
     }
 
-    static readonly factory: NodeFactory<VertexInputNode> = { name: "Vertex Input", type: VertexInputNode };
+    static readonly factory: NodeFactory<VertexInputNode> = {
+        name: "Vertex Input",
+        type: VertexInputNode,
+        initials: [
+            { id: "position", direction: "out", type: "vec4f", name: "Position" },
+            { id: "uv", direction: "out", type: "vec2f", name: "UV" },
+        ],
+    };
 }
 
 export class RenderOutputNode extends Node {
@@ -96,6 +103,7 @@ export class RenderOutputNode extends Node {
         return {
             name: "Render Output",
             type: RenderOutputNode,
+            initials: [{ id: "color", direction: "in", type: "vec4f", name: "Color" }],
             populatePartInterface: (node, part) => {
                 const div = document.createElement("div");
                 if (part != node.uiPart) return div;

lab/node-system/demo/nodes.ts

@@ -1,4 +1,4 @@
-import type { NodeCreateOptions, NodePart, Socket } from "../mod.ts";
+import type { NodeCreateOptions, NodePart, Socket, SocketDirection } from "../mod.ts";
 import { createNumberInputField, type NodeFactory, type WgslContext, WgslNode } from "./nodes.base.ts";
 
 interface GeneratedNodeClass<T = object> {
@@ -26,6 +26,7 @@ export class ConstF32Node extends WgslNode {
     static readonly factory: NodeFactory<ConstF32Node> = {
         name: "Scalar",
         type: ConstF32Node,
+        initials: [{ id: "constant", direction: "out", type: "f32", name: "Constant" }],
         populatePartInterface: (node, part) => {
             const div = document.createElement("div");
             if (part != node.uiPart) return div;
@@ -64,6 +65,7 @@ export function constantVectorNode(dim: number, dtype: string, name: string): Ge
         static readonly factory: NodeFactory<ConstantVectorNode> = {
             name,
             type: ConstantVectorNode,
+            initials: [{ id: "constant", direction: "out", type: dtype, name: "Constant" }],
             populatePartInterface: (node, part) => {
                 const div = document.createElement("div");
                 if (part != node.uiPart) return div;
@@ -115,7 +117,19 @@ export function splitVectorNode(components: [string, string][], dtype: string, n
             return `${ctx.nameOf("input")}.${components[idx][0]}`;
         }
 
-        static readonly factory: NodeFactory<SplitVectorNode> = { name, type: SplitVectorNode };
+        static readonly factory: NodeFactory<SplitVectorNode> = {
+            name,
+            type: SplitVectorNode,
+            initials: [
+                { id: "input", direction: "in", type: dtype, name: "Vector" },
+                ...components.map(([id, label]) => ({
+                    id,
+                    direction: "out" as SocketDirection,
+                    type: "f32",
+                    name: label,
+                })),
+            ],
+        };
     };
 }
 
@@ -155,7 +169,19 @@ export function mergeVectorNode(components: [string, string][], dtype: string, n
             throw new Error("Invalid socket");
         }
 
-        static readonly factory: NodeFactory<MergeVectorNode> = { name, type: MergeVectorNode };
+        static readonly factory: NodeFactory<MergeVectorNode> = {
+            name,
+            type: MergeVectorNode,
+            initials: [
+                { id: "output", direction: "out", type: dtype, name: "Vector" },
+                ...components.map(([id, label]) => ({
+                    id,
+                    direction: "in" as SocketDirection,
+                    type: "f32",
+                    name: label,
+                })),
+            ],
+        };
     };
 }
 
@@ -204,6 +230,11 @@ export function mathNode(dtype: string, name: string): GeneratedNodeClass {
         static readonly factory: NodeFactory<MathNode> = {
             name,
             type: MathNode,
+            initials: [
+                { id: "a", direction: "in", type: dtype, name: "A" },
+                { id: "b", direction: "in", type: dtype, name: "B" },
+                { id: "output", direction: "out", type: dtype, name: "Output" },
+            ],
             populatePartInterface: (node) => {
                 const select = document.createElement("select");
                 select.style.width = "100%";

lab/node-system/demo/nodes.vector.ts

@@ -60,7 +60,6 @@ view.addEventListener("pointerdown", (e) => {
 
 view.addEventListener("nodeoption", (e) => {
     existingMenu?.remove();
-
     const menu = document.createElement("div");
     menu.classList.add("context-menu");
     menu.style.left = `${e.parent.clientX}px`;
@@ -133,7 +132,6 @@ view.addEventListener("nodeoption", (e) => {
 view.addEventListener("contextmenu", (e) => e.preventDefault());
 
 const partToElement = new Map<NodePart, Element>();
-
 view.addEventListener("partshow", (e) => {
     const factory = factories.find((factory) => typeof factory != "string" && e.part.node instanceof factory.type);
     if (factory == null) return;
@@ -145,7 +143,6 @@ view.addEventListener("partshow", (e) => {
         partToElement.set(e.part, element);
     }
 });
-
 view.addEventListener("parthide", (e) => {
     const element = partToElement.get(e.part);
 
@@ -154,6 +151,52 @@ view.addEventListener("parthide", (e) => {
         partToElement.delete(e.part);
     }
 });
+view.addEventListener("airconnect", (e) => {
+    if (e.source.direction == "in" && e.source.targets.size >= e.source.maxInputs) return;
+
+    existingMenu?.remove();
+    const menu = document.createElement("div");
+    menu.classList.add("context-menu");
+    menu.style.left = `${e.parent.clientX}px`;
+    menu.style.top = `${e.parent.clientY + 1}px`;
+    existingMenu = menu;
+
+    factories.forEach((factory) => {
+        if (typeof factory == "string") return;
+        if (factory.initials == null) return;
+        const targets = factory.initials.filter((socket) =>
+            socket.type == e.source.type && socket.direction != e.source.direction
+        );
+        if (targets.length == 0) return;
+
+        const label = document.createElement("div");
+        label.classList.add("label");
+        label.textContent = factory.name;
+        menu.append(label);
+
+        for (const socket of targets) {
+            const btn = document.createElement("button");
+            btn.textContent = socket.name ?? socket.id;
+
+            btn.addEventListener("click", () => {
+                const node = new factory.type({
+                    name: factory.name,
+                    x: e.parent.clientX - view.panX - (socket.direction == "in" ? 0 : 160),
+                    y: e.parent.clientY - view.panY,
+                });
+                view.network?.addNode(node);
+                node.sockets.get(socket.id)?.connect(e.source);
+
+                existingMenu?.remove();
+                existingMenu = null;
+            });
+
+            menu.append(btn);
+        }
+    });
+
+    document.body.append(menu);
+});
 
 document.body.append(view);
 view.network = new Network();