first test run of complete node preview. Connected nodes will generate a script that will be evaluated to obtain the material and then passed to the preview scene.

Author: bandinopla

src/Editor.ts

@@ -30,6 +30,7 @@ export class Editor {
     private focusedChild :Node|undefined;
     private mouse:Vector2Like = {x:0, y:0}
     private aspectCorrection = 1; 
+    private canvasAspect:number;
 
     private handIcon : HandIcon;
 
@@ -77,12 +78,14 @@ export class Editor {
         this._ctx = canvas.getContext('2d')!; //TODO:handle error
         this._ctx.font = Theme.config.fontSize+'px '+Theme.config.fontFamily;
 
-        const aspect = canvas.width / canvas.height;
-        this.aspectCorrection = ( canvas.offsetWidth/canvas.offsetHeight )*aspect
-        
-        // fix aspect ratio...
+        this.canvasAspect = this.canvas.width / this.canvas.height;
+        this.aspectCorrection = ( this.canvas.offsetWidth/this.canvas.offsetHeight )*this.canvasAspect;
+         
         this.ctx.scale(1, this.aspectCorrection) ;
 
+        window.addEventListener("resize", this.onResize.bind(this)); 
+        
+
         // Double Click
         onDoubleClick(canvas, ev=>this.showNodeCreationMenu(ev));
 
@@ -149,13 +152,7 @@ export class Editor {
         canvas.addEventListener('mousemove', (event) => {
             let scale = this.ctx.getTransform().a; // Get the current scale (assuming uniform scaling)
             const mousePos = this.getMousePos( event); 
-            const canvasPos = this.getCanvasMousePosition(mousePos);
-
-            // if( this.boxSelectionStart )
-            // {
-            //     this.selectNodesInsideBoxSelection(this.boxSelectionStart, canvasPos);
-            //     return;
-            // }
+            const canvasPos = this.getCanvasMousePosition(mousePos); 
 
             let sx = ( mousePos.x - this.mouse.x )  ;
             let sy = ( mousePos.y - this.mouse.y ) ;
@@ -197,8 +194,7 @@ export class Editor {
             {
                 //
                 // update tail of "open" connections
-                //
-                ///this.connections.filter(c=>!( isOutlet(c.to) )).forEach( c=>c.to=mousePos);  
+                // 
                 this.connections.setOrphansTarget( mousePos );
             } 
 
@@ -270,6 +266,7 @@ export class Editor {
                             });
 
                             this.selectedOutlet = outlet;
+                            this.clearBoxSelection(); 
                         }
                         else 
                         {
@@ -278,10 +275,9 @@ export class Editor {
 
                     });
 
-                    if( this.selectedOutlet ) {
-                        this.clearBoxSelection(); 
-                        break;
-                    }
+                    if( this.selectedOutlet ) 
+                        continue; //<------------------ we continue because we want to keep looping to collect all outlets.
+                    
                     //#endregion
 
                     //#region Click on element...
@@ -305,9 +301,7 @@ export class Editor {
                         // default... will make the object move...
                         this.focusedChild = obj; 
                         this.bingToTop(obj);
-                        
-                        
-
+                         
                         break; //<-- to avoid processing childrens under us....
                     } 
 
@@ -328,7 +322,7 @@ export class Editor {
                                 && this.selectedOutlet!.isCompatible( outlet )
                                 && ( outlet.owner !== this.selectedOutlet!.owner )
                                 ; // TODO: check for outlet TYPE compatibility 
-                    });
+                    }); 
                 } 
 
                 //
@@ -383,35 +377,7 @@ export class Editor {
                 this.focusedChild = undefined;
             }
             else 
-            {
-
-                // check if we are on top of an oulet...
-                
-                // this.objs.forEach( obj=>{
-
-                //     //
-                //     // create a connection between the current compatible outlets...
-                //     //
-                //     if( obj.pressetOutlet( cursor.x-obj.x, cursor.y-obj.y, outlet =>{  
-
-                //         this.destroyConnectionsUsing( outlet )
-                        
-                //         //
-                //         // filer valid outlets
-                //         //
-                //         const outlets = this.connections.filter( c=>
-                //             !("child" in c.to) //must not have an ending
-                //             && c.from.isInput!=outlet.isInput //oposite kind (input->output)
-                //         );
-
-                //         outlets.forEach( c => {
-                //             c.to = outlet;
-                //         })
-                       
-
-                //     } )) return;
-
-                // }); 
+            { 
 
                 if( this.chosenOutlet.length )
                 { 
@@ -422,31 +388,29 @@ export class Editor {
                     this.destroyConnectionsUsing( this.chosenOutlet[0].outlet );
 
                     this.connections.setOrphansTarget( this.chosenOutlet[0].outlet );
-
-                    console.log("CONNECT",  this.chosenOutlet[0].outlet)
-                    // this.connections.forEach( connection => { 
-
-                    //     if( !("owner" in connection.to))
-                    //     {
-                    //         connection.to = this.chosenOutlet[0].outlet;
-                    //     }
-
-                    // }); 
+  
                 }
 
                 this.chosenOutlet.length=0;
                 this.availableOutlets.length=0;
 
                 //remove connections with no end...
-                this.connections.purge( c=>isOutlet(c.to) )
-                // let clean = this.connections.filter( c=>"owner" in c.to);
-                // this.connections.length=0;
-                // this.connections.push(...clean)
+                this.connections.purge( c=>isOutlet(c.to) ) 
             }
         });
         //#endregion
     } 
 
+    protected onResize() { 
+        const newAspectCorrection = ( this.canvas.offsetWidth/this.canvas.offsetHeight )*this.canvasAspect;
+
+        const xChange = this.aspectCorrection/newAspectCorrection;
+
+        this.aspectCorrection = newAspectCorrection;
+
+        this.ctx.scale(xChange, 1) ; 
+    }
+
     get ctx() {
         return this._ctx;
     }

src/ThreeScene.ts

@@ -1,22 +1,28 @@
-import * as THREE from 'three';
+import { clamp } from 'three/src/math/MathUtils.js';
+import * as THREE from 'three/webgpu';
+import { WebGPURenderer } from 'three/webgpu';
 
 export class ThreeScene {
     readonly scene:THREE.Scene;
     readonly camera:THREE.PerspectiveCamera;
-    readonly renderer:THREE.WebGLRenderer;
+    readonly renderer:WebGPURenderer;
     readonly objHolder:THREE.Object3D;
     private clock:THREE.Clock;
     readonly ambientLight:THREE.AmbientLight;
+    readonly directionalLight:THREE.DirectionalLight;
     private objs:THREE.Mesh[]=[]
     readonly pointLight:THREE.PointLight;
     private mouse:THREE.Vector2 = new THREE.Vector2();
     rotationSpeed = 1;
+    protected _currentObjectIndex = 0; 
+
+    private materialNotSet = new THREE.MeshStandardMaterial({ color: 0xcccccc });
 
     constructor() {
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
-        this.renderer = new THREE.WebGLRenderer();
+        this.renderer = new WebGPURenderer();
         this.renderer.setSize( window.innerWidth, window.innerHeight ); 
         this.renderer.setClearColor(0x1d1d1d)
 
@@ -25,36 +31,58 @@ export class ThreeScene {
 
         this.ambientLight = new THREE.AmbientLight(0xffffff,0.1);
         this.pointLight = new THREE.PointLight(0xffffff,5,15);
+        this.directionalLight = new THREE.DirectionalLight()
+        
 
         window.addEventListener('mousemove', (event) => {
             // Normalize mouse coordinates to [-1, 1]
             this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
             this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         });
 
+        window.addEventListener("resize", ev=>{
+            // Update camera aspect ratio
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+
+            // Update renderer size
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+        })
+
         this.buildScene()
     }
 
-    protected buildScene() {
-        const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-        const material = new THREE.MeshStandardMaterial( { color: 0xcccccc } );
-        const cube = new THREE.Mesh( geometry, material ); 
+    protected buildScene() { 
+        const material = this.materialNotSet;
+
+        //
+        // dummy objects
+        //
+        const cube = new THREE.Mesh( new THREE.BoxGeometry( 2, 2, 2 ), material ); 
+              cube.name="Cube"; 
+              this.objs.push( cube );
+              this.objHolder.add(cube);
+
+        const sphere = new THREE.Mesh( new THREE.SphereGeometry(1), material ); 
+              sphere.name="Sphere"; 
+              sphere.visible = false;
+              this.objs.push( sphere );
+              this.objHolder.add( sphere );
+
 
-        this.objHolder.add(cube);
         this.scene.add( this.objHolder )
 
         this.camera.position.z = 4;
-        this.camera.position.x = -4;
+        this.camera.position.x = -3;
 
         this.scene.add( this.ambientLight );
-        this.objs.push( cube );
+        this.scene.add( this.directionalLight );
+
 
-        const dirLight = new THREE.DirectionalLight()
-        this.scene.add( dirLight );
 
         this.scene.add( this.pointLight );
 
-        this.pointLight.intensity = 3
+        this.pointLight.intensity = 15
         this.pointLight.position.z = 3
     }
 
@@ -69,7 +97,7 @@ export class ThreeScene {
         const dir = vector.sub(this.camera.position).normalize();
 
         // We want the light to be at a fixed Z in world space (e.g., Z = 2)
-        const fixedZ = 2;
+        const fixedZ = 2
 
         // Calculate the distance from the camera to the plane at fixedZ
         const distance = (fixedZ - this.camera.position.z) / dir.z;
@@ -79,6 +107,18 @@ export class ThreeScene {
 
         // Update the light's position
         this.pointLight.position.set(pos.x, pos.y, fixedZ);
+      
+    }
+
+    get meshes() { return this.objs }
+
+    get currentObjectIndex() {
+        return this._currentObjectIndex;
+    }
+
+    set currentObjectIndex(index:number) {
+        this._currentObjectIndex = clamp( index, 0, this.objs.length-1 );
+        this.objs.forEach( (obj,i)=>obj.visible = i==index )
     }
 
     render() {
@@ -89,4 +129,36 @@ export class ThreeScene {
         this.objHolder.rotateX(delta*this.rotationSpeed)
         this.renderer.render( this.scene, this.camera );
     }
+
+    setMaterial(index: number, material?: THREE.Material) {
+
+        material ??= this.materialNotSet;
+
+        this.objs.forEach((obj: THREE.Mesh) => {
+          if (Array.isArray(obj.material)) {
+            // Object has multiple materials
+            if (index < obj.material.length) {
+              obj.material[index] = material;
+            } else {
+              // Create missing material slots
+              while (obj.material.length <= index) {
+                obj.material.push(this.materialNotSet);
+              }
+              obj.material[index] = material;
+            }
+          } else {
+            // Object has a single material
+            if (index === 0) {
+              obj.material = material;
+            } else {
+              // Change to an array of materials
+              obj.material = [obj.material];
+              while (obj.material.length <= index) {
+                obj.material.push(this.materialNotSet);
+              }
+              obj.material[index] = material;
+            }
+          }
+        });
+      }
 }

src/components/ColorPicker.ts

@@ -125,7 +125,7 @@ export class ColorPicker extends InteractiveLayoutElement  implements IOverlayRe
         const rgb = [c.r, c.g, c.b];
         this.RGBSliders.forEach( (slider,i)=>slider.value = rgb[i]);
 
-        const hsl:number[] = Object.values( c.getHSL( this.hsl ) );
+        const hsl:number[] = Object.values( this.hsl );// c.getHSL( this.hsl ) );
 
         this.HSLSliders.forEach( (slider, i)=>slider.value=hsl[i])
 

src/components/ColorWheel.ts

@@ -111,8 +111,7 @@ export class ColorWheel extends InteractiveLayoutElement {
 
     set color( c:Color ) {
         this._color = c;
-        const saturation = this.hsl.s;
-
+        const saturation = this.hsl.s; 
         c.getHSL(this.hsl); 
         this.hsl.s = saturation;
     }