double click to show node selection menu

Author: bandinopla

src/Editor.ts

@@ -11,6 +11,8 @@ import { calculateDirectionAlignment } from "./util/isPointingAt";
 import { isMouseHandler } from "./events/isMouseHandler";
 import { IOverlayRenderer } from "./layout/IOverlayRenderer";
 import { LayoutElement } from "./layout/LayoutElement";
+import { onDoubleClick } from "./util/onDoubleClick";
+import { createNewNode } from "./ui/NodeSelectionModal";
 
 type MouseInfo = {
     clientX:number, clientY:number
@@ -26,6 +28,9 @@ type OuletCandidate = {
     alignmentScore:number
 }
 
+/**
+ * I'm the editor. I show the nodes, and run the ThreeJs background scene. 
+ */
 export class Editor {
     private _ctx:CanvasRenderingContext2D;
     private mouseDrag = false;
@@ -73,6 +78,9 @@ export class Editor {
 
         // fix aspect ratio...
         this.ctx.scale(1, this.aspectCorrection) ;
+
+        // Double Click
+        onDoubleClick(canvas, ev=>this.showNodeCreationMenu(ev));
 
         //#region MOUSE WHEEL
         const mouseWheelCaptured = (obj:LayoutElement, globalMouse:Vector2Like, delta:number) => obj.traverse( elem=>{
@@ -691,4 +699,17 @@ export class Editor {
 
         requestAnimationFrame(()=>this.start());
     }
+
+    protected showNodeCreationMenu( ev:MouseEvent ) {
+        const at = this.getCanvasMousePosition(this.mouse ); ;
+
+        createNewNode( ev.clientX, ev.clientY, newNode => {
+ 
+            newNode.x = at.x;
+            newNode.y = at.y;
+
+            this.add( newNode );
+
+        });
+    }
 }

src/EditorNodes.ts

@@ -0,0 +1,38 @@
+import { FillStyle, Theme } from "./colors/Theme";
+import { UVNode } from "./nodes/attribute/UVNode";
+import { MeshStandardNode } from "./nodes/shader/MeshStandardNode";
+import { ImageTextureNode } from "./nodes/texture/ImageTextureNode";
+import { WinNode } from "./nodes/WinNode";
+
+// Define the type for class constructors that extend BaseType
+type Constructor<T extends WinNode> = new (...args: any[]) => T;
+ 
+export type NodeGroupType = {
+    group:string
+    color:string
+    nodes:{ TypeClass:Constructor<WinNode>, name:string }[]
+}
+
+export const NodeTypes : NodeGroupType[] = [
+    {
+        group:"Attribute",
+        color:Theme.config.groupAttribute as string,
+        nodes:[
+            { TypeClass:UVNode, name:"UV" }
+        ]
+    },
+    {
+        group:"Shader",
+        color:Theme.config.groupShader as string,
+        nodes:[
+            { TypeClass:MeshStandardNode, name:"Mesh Standard"}
+        ]
+    }, 
+    {
+        group:"Texture",
+        color:Theme.config.groupTexture as string,
+        nodes:[
+            { TypeClass:ImageTextureNode, name:"Image Texture"}
+        ]
+    }
+]

src/ui/NodeSelectionModal.module.css

@@ -0,0 +1,42 @@
+.root {
+    max-height: 300px;
+    width: 300px;
+    background-color: black;
+    position: fixed;
+    overflow-y: auto;
+    z-index: 9;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.root ul {
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+.root li {
+    cursor: pointer;
+    padding: 2px;
+}
+.root li:hover {
+    background-color: rgba(255,255,255,0.1);
+     
+    
+}
+
+.groupTitle {
+    padding: 3px 10px;
+    font-size: 0.8em;
+    display: inline-block;
+    border-radius: 5px;
+}
+
+.root > input[type="text"] {
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+.hide {
+    display: none;
+}

src/ui/NodeSelectionModal.ts

@@ -0,0 +1,98 @@
+import { NodeTypes } from "../EditorNodes";
+import { WinNode } from "../nodes/WinNode";
+import styles from "./NodeSelectionModal.module.css";
+
+type NodeHandler = (node:WinNode)=>void
+
+class NodeSelector {
+    private div:HTMLDivElement;
+    private input:HTMLInputElement;
+    private _onCreated?:NodeHandler;
+
+    constructor() { 
+        this.div = document.createElement("div");
+        this.div.classList.add( styles.root, styles.hide );
+        document.body.appendChild( this.div );
+
+        this.input = document.createElement("input");
+        this.input.type= "text";
+        this.input.placeholder="Find node by name...";
+
+        this.div.appendChild( this.input );
+
+        window.addEventListener("mousedown", ev=>{
+
+            if( this.visible ) this.hide()
+
+        });
+
+        this.div.addEventListener("mousedown", ev=>{
+            ev.stopImmediatePropagation()
+        })
+
+        // render types!
+        //#region Node Types
+        NodeTypes.forEach( groupType=>{
+
+            const ul = document.createElement("ul");
+            const groupDiv = this.div.appendChild( document.createElement("div") );
+            const title = groupDiv.appendChild( document.createElement("div"));
+
+            title.innerText = groupType.group;
+            title.style.backgroundColor = groupType.color;
+            title.classList.add( styles.groupTitle )
+
+            groupType.nodes.forEach( node => {
+ 
+                const li = ul.appendChild( document.createElement("li"));
+
+                li.innerText = "→" + node.name;
+                li.addEventListener("click", ev=>this.addNewNode(new node.TypeClass))
+
+            });
+
+            groupDiv.classList.add( styles.group );
+            groupDiv.appendChild(ul)
+
+            
+
+        });
+        //#endregion
+    }
+
+    get visible() {
+        return !this.div.classList.contains(styles.hide)
+    }
+
+    private addNewNode( node:WinNode )
+    {
+        this._onCreated?.(node);
+        this.hide();
+        
+    }
+
+    hide() {
+        this.div.classList.add(styles.hide);
+        this._onCreated = undefined;
+    }
+
+    show( posX:number, porY:number, onCreated:NodeHandler ) {
+        this.div.classList.remove(styles.hide);
+        this.div.style.left = `${posX-20}px`;
+        this.div.style.top = `${porY-20}px`;
+
+        this.input.value="";
+        this.input.focus()
+
+        this._onCreated = onCreated;
+    }
+}
+
+let modal:NodeSelector;
+
+export function createNewNode( showModalAtX:number, showModalAtY:number, onCreated:NodeHandler ) 
+{
+    if(!modal) modal = new NodeSelector();  
+
+    modal.show(showModalAtX, showModalAtY, onCreated);
+}

src/util/onDoubleClick.ts

@@ -0,0 +1,21 @@
+export function onDoubleClick( elem:HTMLElement , onClick:(ev:MouseEvent)=>void )
+{
+    let clickCount = 0;
+    let clickTimer = 0;
+    
+    elem.addEventListener('click', (event) => {
+      clickCount++;
+    
+      if (clickCount === 1) {
+        clickTimer = setTimeout(() => {
+          // Single click action 
+          clickCount = 0;
+        }, 300); // Adjust the delay as needed (milliseconds)
+      } else if (clickCount === 2) {
+        clearTimeout(clickTimer);
+        // Double click action
+        onClick(event)
+        clickCount = 0;
+      }
+    });
+}