draggable value can be setted by clicking on it + bugfix on scroll on it + Math node with some basic operations

Author: bandinopla

src/EditorNodes.ts

@@ -1,5 +1,6 @@
 import { FillStyle, Theme } from "./colors/Theme";
 import { UVNode } from "./nodes/attribute/UVNode";
+import { MathNode } from "./nodes/operators/MathNode";
 import { MeshStandardNode } from "./nodes/shader/MeshStandardNode";
 import { ImageTextureNode } from "./nodes/texture/ImageTextureNode";
 import { WinNode } from "./nodes/WinNode";
@@ -22,6 +23,13 @@ export const NodeTypes : NodeGroupType[] = [
             { TypeClass:UVNode, name:"UV", id:"uv" }
         ]
     },
+    {
+        group:"Math",
+        color:Theme.config.groupMath as string, 
+        nodes:[
+            { TypeClass:MathNode, name:"Operation", id:"math-operation"}
+        ]
+    }, 
     {
         group:"Shader",
         color:Theme.config.groupShader as string,

src/colors/Theme.ts

@@ -51,4 +51,7 @@ export class Theme {
     readonly comboboxOptionsBgColor : FillStyle = "#181818"
     readonly comboSelectedItemBgColor : FillStyle = "#4772b3"
     readonly comboSelectedItemTextColor : FillStyle = "white"
+
+    readonly inputTextBg :FillStyle = "#545454";
+    readonly inputTextColor :FillStyle = "white";
 }

src/components/DraggableValue.ts

@@ -8,6 +8,7 @@ export class DraggableValue extends InteractiveLayoutElement {
     protected _percent = 0;
     private dragOriginX = 0; 
     private size = 0;
+    private promptValueOnMouseUp = false;
 
     constructor( readonly name:string, readonly usesBar:boolean, readonly min:number, readonly max:number, protected step:number, protected onChange?:( value:number, percent:number )=>void )
     {
@@ -20,7 +21,7 @@ export class DraggableValue extends InteractiveLayoutElement {
         let v = this.value;
 
 
-        return Math.round(this.step)==this.step? v.toString() : v.toFixed(2) ;
+        return Math.round(v)==v? v.toString() : v.toFixed(2) ;
     } 
 
     /**
@@ -72,17 +73,36 @@ export class DraggableValue extends InteractiveLayoutElement {
     override onMouseMove(deltaX: number, deltaY: number): void {
         this.dragOriginX += deltaX;
 
-        this.value = this.min + (this.dragOriginX / this.hitArea.w) * this.size  ;
- 
+        if( this.usesBar )
+        {
+            this.value = this.min + (this.dragOriginX / this.hitArea.w) * this.size  ;
+        }
+        else 
+        {
+            this.value += this.step * deltaX>0? 1 : -1
+        }  
 
+        this.promptValueOnMouseUp = false;
     }
-    override onMouseDown(cursorX: number, cursorY: number): void {
-        //this.isDragging = true;
+
+    override onMouseDown(cursorX: number, cursorY: number): void { 
         this.dragOriginX = cursorX;
+        this.promptValueOnMouseUp = true;
     }
-    // override onMouseUp(): void {
-    //     this.isDragging = false;
-    // }
+
+    override onMouseUp(): void { 
+        if( this.promptValueOnMouseUp )
+        {
+
+            const val = prompt("Enter the new value...", this._value.toString() );
+            if( val && !isNaN( Number(val) ) )
+            {
+                this.value = Number(val) ;
+            }
+
+        } 
+    }
+
     override onMouseWheel(deltaY: number): void {
 
         const inc = this.step;

src/components/Header.ts

@@ -2,11 +2,10 @@ import { FillStyle, Theme } from "../colors/Theme";
 import { LayoutElement } from "../layout/LayoutElement";
 
 export class HeaderElement extends LayoutElement {
-    constructor( protected title:string, protected bgColor:FillStyle )
+    constructor( public title:string, protected bgColor:FillStyle )
     {
         super(); 
     }
- 
 
     override renderContents(ctx: CanvasRenderingContext2D, maxWidth: number, maxHeight: number): void {
 

src/core/IOutlet.ts

@@ -3,7 +3,7 @@ import { IScript } from "../export/IScript";
 import { Script } from "../export/Script";
 import { Node } from "../nodes/Node"
 
-export type OutletSize = 1|2|3|4|5;
+export type OutletSize = 0|1|2|3|4|5; //<---- 0=any type except type 5...
 
 export interface IOutlet extends IScript {
     isInput:boolean 

src/core/isOutlet.ts

@@ -2,7 +2,7 @@ import { Node } from "../nodes/Node";
 import { IOutlet, OutletSize } from "./IOutlet";
 
 function isOutletSize(value: unknown): value is OutletSize {
-    return typeof value === 'number' && [1, 2, 3, 4, 5].includes(value);
+    return typeof value === 'number' && [0, 1, 2, 3, 4, 5].includes(value);
 }
 
 

src/nodes/WinNode.ts

@@ -12,13 +12,15 @@ const nameCount :Record<string, number> = {};
 
 export class WinNode extends Node {
     private _nodeName:string;
+    protected header:HeaderElement;
 
     constructor(protected title:string, groupColor:FillStyle, protected childs:LayoutElement[] )
     {
+        const header = new HeaderElement(title, groupColor);
+
         super(new Layout( [
 
-            new HeaderElement(title, groupColor),
-
+            header, 
             new Layout( childs, {
                 direction:"column",
                 gap: 5,
@@ -43,11 +45,17 @@ export class WinNode extends Node {
         }
 
         this._nodeName = name;
+        this.header = header;
         //#endregion
     } 
 
-    protected getChildOfType<T>(constructor: new (...args: any[]) => T): T | undefined {
-        return this.childs.find((child) => child instanceof constructor) as T | undefined;
+    protected setTitle( newTitle:string ){
+        this.header.title = newTitle;
+    }
+
+    protected getChildOfType<T>( constructor: new (...args: any[]) => T, pos=0 ): T | undefined {
+        const matches = this.childs.filter((child) => child instanceof constructor);
+        return matches[pos] as T | undefined;
     }
 
     override get nodeName(): string {

src/nodes/operators/MathNode.ts

@@ -0,0 +1,83 @@
+ 
+import { Theme } from "../../colors/Theme";
+import { ComboBox } from "../../components/ComboBox";
+import { Script } from "../../export/Script";
+import { InputOrValue } from "../../properties/InputOrValue";
+import { Output } from "../../properties/Output";
+import { WinNode } from "../WinNode";
+
+type Operator = [ symbol:string, tslMethod:string ];
+
+export class MathNode extends WinNode {
+    protected operators: Operator[];
+    protected A:InputOrValue;
+    protected B:InputOrValue;
+    protected combo:ComboBox;
+
+    constructor() {
+
+        const operators : Operator[] = [
+            ["+","add"],
+            ["-","sub"],
+            ["*","mul"],
+            ["/","div"],
+            ["%","mod"],
+            ["==","equal"],
+            ["!=","notEqual"]
+            // TODO: Add more....
+        ]
+
+        super("Math Operator", Theme.config.groupMath, [
+            new Output("Result", 0),
+            new InputOrValue(0, "A", ()=>this.update()),
+            new ComboBox("Operator", operators.map(o=>o[0]), i=>this.onComboChange(i)),
+            new InputOrValue(0, "B", ()=>this.update()),
+        ]);
+
+        this.A = this.getChildOfType(InputOrValue,0)!;
+        this.B = this.getChildOfType(InputOrValue,1)!;
+        this.combo = this.getChildOfType(ComboBox)!; 
+
+        this.operators = operators;
+
+        this.onComboChange(0)
+    }
+
+    protected onComboChange( newIndex:number ) 
+    {
+        const op = this.operators[newIndex];
+
+        this.setTitle( `.${op[1]}  A ${op[0]} B` );
+
+        this.update();
+    }
+
+    override writeScript(script: Script): string { 
+
+        const a = this.A.writeScript(script);
+        const b = this.B.writeScript(script);
+
+        const op = this.operators[this.combo.index][1];
+
+        console.log(  `${a}.${op}(${b})`)
+
+        return script.define( this.nodeName, `${a}.${op}(${b})`);
+    }
+
+    override serialize(): Record<string, any> {
+        return {
+            ...super.serialize(),
+            a: this.A.value,
+            b: this.B.value,
+            op: this.combo.index
+        }
+    }
+
+    override unserialize(data: Record<string, any>): void {
+        super.unserialize(data);
+
+        this.A.value = data.a ?? 0;
+        this.B.value = data.b ?? 0;
+        this.combo.index = data.op ?? 0;
+    }
+}

src/properties/BasicInputProperty.ts

@@ -17,6 +17,7 @@ export class BasicInputProperty extends Input {
     }
 
     override renderContents(ctx: CanvasRenderingContext2D, maxWidth: number, maxHeight: number): void {
+        if( this.layout ) return super.renderContents( ctx, maxWidth, maxHeight);
         this.writeText(ctx, this.label, this.fontSize, 0, maxHeight, this.fontColor);
     }
 

src/properties/InputOrValue.ts

@@ -0,0 +1,66 @@
+import { DraggableValue } from "../components/DraggableValue"; 
+import { IOutlet, OutletSize } from "../core/IOutlet";
+import { Script } from "../export/Script";
+import { Layout, Row } from "../layout/Layout";
+import { BasicInputProperty } from "./BasicInputProperty";
+import { Input } from "./Input";
+
+export class InputOrValue extends BasicInputProperty 
+{
+    protected notConnectedContent:Layout;
+    protected valueSlider:DraggableValue;
+
+    constructor( size:OutletSize, label:string, protected onChange?:(v?:number)=>void ) {
+        super( size, label );
+
+        this.valueSlider = new DraggableValue( label, false, Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER, 0.1, value => this.onChange?.(value) );
+
+        this.notConnectedContent = new Row([
+            this.valueSlider
+        ]);
+
+        //this.notConnectedContent.parent = this;
+        this.layout = this.notConnectedContent;
+        
+    }
+
+    get value() {
+        return this.valueSlider.value;
+    }
+
+    set value( newValue:number ) {
+        const changed = this.valueSlider.value!=newValue;
+        
+        if( changed )
+        {
+            this.valueSlider.value = newValue;
+            this.onChange?.(newValue);
+        }
+            
+    }
+
+    override width(ctx: CanvasRenderingContext2D): number {
+        if( this.connectedTo ) return super.width(ctx);
+        return this.notConnectedContent.width(ctx)
+    }
+
+    protected override onConnected(to: IOutlet): void {
+        this.layout = undefined;
+        this.onChange?.();
+    }
+
+    protected override onDisconnected(from: IOutlet): void {
+        this.layout = this.notConnectedContent;
+        this.onChange?.( this.valueSlider.value );
+    }
+
+    override writeScript(script: Script): string {
+        if( this.connectedTo )
+        {
+            return this.connectedTo.writeScript( script );
+        }
+
+        script.importModule("float");
+        return `float(${ this.valueSlider.stringValue })`
+    }
+}