uniforms logic + draggable number callback + options in button ui + renamed math group to operators and there I will put math and logic nodes. + version in output js

Author: bandinopla

src/Editor.ts

@@ -1041,7 +1041,7 @@ export class Editor {
      * Save current layout as JSON embeded in a comment and export all the material nodes as javascript to be used as-is.
      */
     save() {
-        const formatVersion = "0.0.1";
+        const formatVersion = import.meta.env.APP_VERSION;
         const signature = `//
 // ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖▗▄▄▄▖   ▗▖ ▗▄▄▖
 //   █  ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌      ▐▌▐▌   

src/EditorNodes.ts

@@ -26,10 +26,10 @@ export const NodeTypes : NodeGroupType[] = [
         ]
     }, 
     {
-        group:"Math",
+        group:"Operators",
         color:Theme.config.groupMath as string, 
         nodes:[
-            { TypeClass:MathNode, name:"Operation", id:"math-operation"}
+            { TypeClass:MathNode, name:"Math", id:"math-operation"}
         ]
     }, 
     {

src/components/Button.ts

@@ -1,18 +1,27 @@
 import { Theme } from "../colors/Theme";
 import { InteractiveLayoutElement } from "../layout/InteractiveLayoutElement"; 
 
+type ButtonOptions = {
+    fullWidth?:boolean
+}
+
 export class Button extends InteractiveLayoutElement
 {
     private xpadding = 5;
+    protected options:ButtonOptions;
 
-    constructor( protected _label:string , protected onClick?:VoidFunction )
+    constructor( protected _label:string , protected onClick?:VoidFunction, options?:Partial<ButtonOptions> )
     {
         super();
+        this.options = {
+            fullWidth:false,
+            ...options
+        };
     }
 
     override width(ctx: CanvasRenderingContext2D): number {
 
-        return ctx.measureText(this.label).width + this.xpadding*2;
+        return this.options.fullWidth? 0 : ctx.measureText(this.label).width + this.xpadding*2;
     }
 
     override render(ctx: CanvasRenderingContext2D, maxWidth: number, maxHeight: number): void {

src/components/DraggableNumber.ts

@@ -1,7 +1,7 @@
 import { DraggableValue } from "./DraggableValue";
 
 export class DraggableNumber extends DraggableValue {
-    constructor( name:string ="" ) {
-        super(name, false, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 1 );
+    constructor( name:string ="", onChange?:(newValue:number)=>void ) {
+        super(name, false, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 1, onChange );
     }
 }

src/export/Script.ts

@@ -1,6 +1,9 @@
 import * as TSL from 'three/tsl';
 import * as THREE from 'three/webgpu'; 
 
+
+export type UniformType = "boolean" | "number" | "Color" | "Vector2" | "Vector3" | "Vector4" | "Matrix3" | "Matrix4";
+
 /**
  * Handles the creation of the TSL output string
  */
@@ -10,6 +13,12 @@ export class Script {
 
     protected imports:Record<string, Set<string>>;  
     protected definitions:[ name:string, value:string][] ; 
+
+    /**
+     * array of [ index the definition in the definitions array, the variable type of the uniform ]
+     */
+    protected uniforms:[ name:string, type:UniformType, initialValue:string ][]=[];
+
     protected imagePaths:[ path:string, previewImage?:string, textureSetup?:( refName:string)=>string ][] ; 
     protected moduleName2Ref:Record<string, unknown>; 
 
@@ -39,6 +48,25 @@ export class Script {
         return varName;
     }
 
+    /**
+     * Defines a uniform variable.
+     * 
+     * 
+     * @see https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#uniform
+     * @param varName 
+     * @param initialValue must ve a valid uniform value.
+     * @returns the name of the variable holding the uniform.
+     */
+    defineUniform( varName:string, type:UniformType, initialValue:string ) {
+         
+        if( !this.uniforms.find( u=>u[0]==varName) )
+        {
+            this.uniforms.push( [ varName, type, initialValue ] );
+        }
+
+        return "$uniforms."+varName;
+    }
+
     /**
      * Module to import
      * @param dep 
@@ -92,10 +120,12 @@ export class Script {
 
     toString( lastExpression:string="", forExport = false ) {
 
-        let output = ``;
+        let output = `\n`;
 
         if( forExport )
         { 
+            output += "import * as THREE from 'three/webgpu';\n";
+
             //
             // Imports...
             //
@@ -113,6 +143,13 @@ export class Script {
                 `; 
         }
 
+        //
+        // uniforms
+        //
+        output += "\n" + (forExport?"export":"") + " const $uniforms = {\n" +
+        this.uniforms.map( uniform => `${uniform[0]} : uniform( ${uniform[2]} )`).join(",")
+        +"\n}\n";
+
         //
         // image loaders...
         //
@@ -157,4 +194,28 @@ export class Script {
 
         return eval( this.toString( returnThisRef, false ) );
     }
+
+    public static makeValidVariableName(input:string) {
+        // Return empty string if input is not a string or is empty
+        if (typeof input !== 'string' || input.trim() === '') {
+            return 'foo';
+        }
+    
+        let str = input.trim();
+    
+        // Remove or replace invalid characters
+        str = str.replace(/[^a-zA-Z0-9_$]/g, '_');
+        
+        // If starts with a number, prepend an underscore
+        if (/^\d/.test(str)) {
+            str = '_' + str;
+        }
+        
+        // If empty after cleaning or starts with invalid character, use default name
+        if (!str || !/^[a-zA-Z_$]/.test(str)) {
+            return 'validVar';
+        } 
+        
+        return "$"+str;
+    }
 }

src/nodes/WinNode.ts

@@ -37,7 +37,7 @@ export class WinNode extends Node {
         if( nameCount[name] )
         {
             // increment counter and append the trailing count to make the name unique...
-            name += (++nameCount[name]).toString().padEnd(4,"0");
+            name += (++nameCount[name]).toString().padStart(3,"0");
         }
         else 
         {

src/nodes/input/UniformBaseNode.ts

@@ -0,0 +1,76 @@
+import { Button } from "../../components/Button";
+import { Script, UniformType } from "../../export/Script";
+import { LayoutElement } from "../../layout/LayoutElement";
+import { Output } from "../../properties/Output";
+import { InputBaseNode } from "./InputBaseNode";
+
+
+
+export class UniformBaseNode extends InputBaseNode {
+
+    private static names:string[]=[];
+
+    protected varName?:string;
+
+    constructor( protected jsType:UniformType, childs:LayoutElement[]) {
+
+        childs.unshift(new Output("Value", 1));
+
+        childs.push( new Button("set name", ()=>this.setVariableName(), { fullWidth:true }))
+
+        super("Uniform", childs);
+
+        UniformBaseNode.names.push( this.uniformVarName );
+        this.setTitle( this.uniformVarName );
+    } 
+
+    private get uniformVarName() {
+        return this.varName ?? this.nodeName
+    }
+
+    private setVariableName( inputValue?:string ) {
+        let newName = prompt("Set the name of the uniform (must ve a valid js variable name)", inputValue ?? this.uniformVarName );
+        if( newName )
+        {
+            const currentIndex = UniformBaseNode.names.indexOf( this.uniformVarName );
+
+            const cleanName = Script.makeValidVariableName(newName);
+
+            //
+            // check for collisions
+            //
+            if( UniformBaseNode.names.filter( (name, i)=>name==newName && i!=currentIndex).length>0 )
+            {
+                alert(`Name [${newName}] is taken, pick another...`);
+                this.setVariableName( newName )
+                return;
+            }
+
+            UniformBaseNode.names.splice( currentIndex, 1, cleanName );
+            this.setTitle( cleanName.replace("$","$ ") );
+            this.varName = cleanName;
+        }
+    }
+
+    override writeScript(script: Script): string {
+        script.importModule("uniform");
+
+        return script.defineUniform( this.uniformVarName, this.jsType, this.getUniformJsValue() );
+    }
+
+    /**
+     * A class that extends this one must override this value.
+     * 
+     * Should return the javascript string representing the value of this uniform... 
+     * @see https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language#uniform
+     */
+    protected getUniformJsValue():string {
+        throw new Error("implement me...")
+    }
+
+    override onRemoved(): void {
+        super.onRemoved();
+        UniformBaseNode.names.splice( UniformBaseNode.names.indexOf( this.uniformVarName ), 1);
+    }
+    
+}

src/nodes/input/ValueNode.ts

@@ -2,13 +2,24 @@ import { DraggableNumber } from "../../components/DraggableNumber";
 import { DraggableValue } from "../../components/DraggableValue";
 import { Output } from "../../properties/Output";
 import { InputBaseNode } from "./InputBaseNode";
+import { UniformBaseNode } from "./UniformBaseNode";
+
+/**
+ * A number, either a float or an int...
+ */
+export class ValueNode extends UniformBaseNode {
+
+    protected inputValue: DraggableNumber;
 
-export class ValueNode extends InputBaseNode {
     constructor() {
 
-        super("Value", [
-            new Output("Value", 1),
-            new DraggableNumber()
-        ]);
+        super("number", [ new DraggableNumber("", () => this.update())]);
+
+        this.inputValue = this.getChildOfType(DraggableNumber)!;
+    }
+
+
+    protected override getUniformJsValue(): string {
+        return this.inputValue.stringValue;
     }
 }

src/nodes/operators/MathNode.ts

@@ -67,6 +67,10 @@ export class MathNode extends WinNode {
         this.onComboChange(0)
     }
 
+    override width(ctx: CanvasRenderingContext2D): number {
+        return 100
+    }
+
     protected onComboChange( newIndex:number ) 
     {
         const op = this.operators[newIndex];