filter node creation list + bugfix in draggable value + added id to node types to be used in the serialized json + win nodes have an .update function to inform the node when it's props have changed

Author: bandinopla

src/EditorNodes.ts

@@ -10,29 +10,29 @@ type Constructor<T extends WinNode> = new (...args: any[]) => T;
 export type NodeGroupType = {
     group:string
     color:string
-    nodes:{ TypeClass:Constructor<WinNode>, name:string }[]
+    nodes:{ TypeClass:Constructor<WinNode>, name:string, id:string }[]
 }
 
 export const NodeTypes : NodeGroupType[] = [
     {
         group:"Attribute",
         color:Theme.config.groupAttribute as string,
         nodes:[
-            { TypeClass:UVNode, name:"UV" }
+            { TypeClass:UVNode, name:"UV", id:"uv" }
         ]
     },
     {
         group:"Shader",
         color:Theme.config.groupShader as string,
         nodes:[
-            { TypeClass:MeshStandardNode, name:"Mesh Standard"}
+            { TypeClass:MeshStandardNode, name:"Mesh Standard", id:"mesh-standard-shader"}
         ]
     }, 
     {
         group:"Texture",
         color:Theme.config.groupTexture as string,
         nodes:[
-            { TypeClass:ImageTextureNode, name:"Image Texture"}
+            { TypeClass:ImageTextureNode, name:"Image Texture", id:"image-texture"}
         ]
     }
 ]

src/components/DraggableValue.ts

@@ -34,7 +34,10 @@ export class DraggableValue extends InteractiveLayoutElement {
     }
     set value( v:number ) { 
 
+        const oldValue = this._value;
         this._value = clamp( v , 0, 1);  
+        if( oldValue!=this._value )
+            this.onChange?.( this._value, this.min + Math.floor(((this.max-this.min)*this._value)/this.step)*this.step );
 
     }
 
@@ -66,13 +69,9 @@ export class DraggableValue extends InteractiveLayoutElement {
 
     override onMouseMove(deltaX: number, deltaY: number): void {
         this.dragOriginX += deltaX;
-
-        const oldValue = this._value;
-
+ 
         this.value = this.dragOriginX / this.hitArea.w  ;
-
-        if( oldValue!=this._value )
-            this.onChange?.( this._value, this.min + Math.floor(((this.max-this.min)*this._value)/this.step)*this.step );
+ 
 
     }
     override onMouseDown(cursorX: number, cursorY: number): void {

src/core/CanvasElement.ts

@@ -70,5 +70,12 @@ export class CanvasElement {
             ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // Color of the shadow (semi-transparent black)
         }
     }
- 
+
+    serialize():Record<string, any> {
+        return {}
+    }
+    
+    unserialize( data:Record<string, any> ) {
+
+    }
 }

src/nodes/WinNode.ts

@@ -20,4 +20,13 @@ export class WinNode extends Node {
             direction:"column"
         })); 
     }
+
+    /**
+     * Call this when the node had something changed or needs to be udated 
+     */
+    update() {
+        console.log("UPDATE NODE")
+        //... update and...
+        this.somethingChanged();
+    }
 }

src/nodes/preview/ScenePreview.ts

@@ -6,19 +6,26 @@ import { WinNode } from "../WinNode";
 import { ThreeScene } from "../../ThreeScene";
 
 export class ScenePreviewNode extends WinNode {
+
+    protected materialSlots:MaterialProperty[];
+
     constructor( protected scene:ThreeScene ) { 
 
         const ambientLightSlider = new DraggableValue("Ambient light", true, 0, 3, 0.1, (_, intensity)=>this.onAmbientLightSlider(intensity) );
 
-        super("Scene Preview", Theme.config.groupOutput, [
-            ambientLightSlider,
-            new DraggableValue("Rotation speed", true, 0, 2, 0.1),
+        const materialSlots = [
             new MaterialProperty(0),
             new MaterialProperty(1),
             new MaterialProperty(2),
+        ]
+        super("Scene Preview", Theme.config.groupOutput, [
+            ambientLightSlider,
+            new DraggableValue("Rotation speed", true, 0, 2, 0.1),
+            ...materialSlots
         ]); 
 
         this.canBeDeleted = false; 
+        this.materialSlots = materialSlots;
 
         ambientLightSlider.value = this.scene.ambientLight.intensity;
     }
@@ -29,6 +36,6 @@ export class ScenePreviewNode extends WinNode {
     }
 
     protected override somethingChanged(): void {
-        alert("Got it! recompile!!")
+        
     }
 }

src/properties/OutletProperty.ts

@@ -2,11 +2,12 @@ import { FillStyle, Theme } from "../colors/Theme";
 import { IOutlet, OutletSize } from "../core/IOutlet";
 import { LayoutElement } from "../layout/LayoutElement";
 import { Node } from "../nodes/Node";
+import { WinNodeProperty } from "./WinNodeProperty";
 
 /**
  * A property that renders a tiny colored dot indicating a place to plug a pipe to connect nodes.
  */
-export class OutletProperty extends LayoutElement implements IOutlet
+export class OutletProperty extends WinNodeProperty implements IOutlet
 {
     private _globalX = 0;
     private _globalY = 0;

src/properties/UVChannelProperty.ts

@@ -5,12 +5,16 @@ import { Input } from "./Input";
 
 export class UVChannelProperty extends Input
 {
+    private slider:DraggableValue;
+
     constructor() {
         super( 1 ) 
 
+        this.slider = new DraggableValue("UV Channel", false, 0, 5, 1, ()=>this.node.update());
+
         //"column","space-around","stretch",
         this.layout = new Layout([
-            new DraggableValue("UV Channel", false, 0, 5, 1)
+            this.slider 
         ], {
             direction:"column",
             justify:"space-around",

src/properties/WinNodeProperty.ts

@@ -0,0 +1,11 @@
+import { LayoutElement } from "../layout/LayoutElement";
+import { WinNode } from "../nodes/WinNode";
+
+/**
+ * Every property of a Win Node should extend this, so it was access to the `node` they are in...
+ */
+export class WinNodeProperty extends LayoutElement {
+    get node() {
+        return this.root as WinNode;
+    }
+}

src/ui/NodeSelectionModal.module.css

@@ -9,6 +9,18 @@
     border-radius: 5px;
 }
 
+.groupLabel {
+    display: none;
+    margin-right: 10px;
+}
+
+.root.term .groupTitle, .root ul .groupTitle {
+    display: none;
+}
+.root.term .groupLabel, .root.term ul .groupTitle {
+    display: inline;
+}
+
 .root ul {
     margin: 0px;
     padding: 0px;
@@ -27,7 +39,7 @@
 .groupTitle {
     padding: 3px 10px;
     font-size: 0.8em;
-    display: inline-block;
+    display: inline;
     border-radius: 5px;
 }
 

src/ui/NodeSelectionModal.ts

@@ -28,7 +28,16 @@ class NodeSelector {
 
         this.div.addEventListener("mousedown", ev=>{
             ev.stopImmediatePropagation()
-        })
+        });
+
+        //
+        // Autocomplete
+        //
+        let autocompleteIntrv = 0; 
+        this.input.addEventListener("keyup", ev=>{ 
+            clearInterval(autocompleteIntrv);
+            autocompleteIntrv = setTimeout(()=>this.filterList(),300);
+        });
 
         // render types!
         //#region Node Types
@@ -46,7 +55,17 @@ class NodeSelector {
 
                 const li = ul.appendChild( document.createElement("li"));
 
-                li.innerText = "→" + node.name;
+                li.setAttribute("node-id", node.id);
+                li.setAttribute("node-name", node.name);
+
+                const groupLabel = li.appendChild( document.createElement("div") );
+                const label = li.appendChild( document.createElement("span") );
+                label.innerText = "→" + node.name;
+
+                groupLabel.classList.add(styles.groupTitle)
+                groupLabel.style.backgroundColor = groupType.color;
+                groupLabel.innerText = groupType.group;
+
                 li.addEventListener("click", ev=>this.addNewNode(new node.TypeClass))
 
             });
@@ -64,6 +83,19 @@ class NodeSelector {
         return !this.div.classList.contains(styles.hide)
     }
 
+    private filterList() {
+        const term = this.input.value.toLowerCase();
+        this.div.classList.remove( styles.term );
+        if( term!=="" ) this.div.classList.add( styles.term );
+        this.div.querySelectorAll("li").forEach( li => {
+            const match = term=="" || li.getAttribute("node-name")?.toLowerCase().includes(term);
+            li.classList.remove(styles.hide);
+            if(!match){
+                li.classList.add( styles.hide )
+            }
+        })
+    }
+
     private addNewNode( node:WinNode )
     {
         this._onCreated?.(node);
@@ -83,6 +115,7 @@ class NodeSelector {
 
         this.input.value="";
         this.input.focus()
+        this.filterList()
 
         this._onCreated = onCreated;
     }