NodeEditor: minor improvement (#23425)

* optimize joinNode: Support for multi-vector inputs, right? e.g: [ vec2, float ] -> vec3?

* NODE EDITOR: FIX InvertEditor nodeClass

* NODE EDITOR:
Add NumberInputs to PowerEditor / OperatorEditor / LimiterEditor
Move NULL_VALUE inside class to avoid sharing value against multiple instances
Add Saturate in LimiterEditor

examples/jsm/node-editor/NodeEditor.js

@@ -120,7 +120,7 @@ export const NodeList = [
 				name: 'Invert',
 				icon: 'flip-vertical',
 				tip: 'Negate',
-				nodeClass: OperatorEditor
+				nodeClass: InvertEditor
 			},
 			{
 				name: 'Limiter',

examples/jsm/node-editor/math/LimiterEditor.js

@@ -1,25 +1,29 @@
-import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { SelectInput, LabelElement, Element, NumberInput } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
 
 export class LimiterEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new FloatNode();
+
 		const node = new MathNode( MathNode.MIN, NULL_VALUE, NULL_VALUE );
 
 		super( 'Limiter', 1, node, 175 );
 
 		const methodInput = new SelectInput( [
 			{ name: 'Min', value: MathNode.MIN },
-			{ name: 'Max', value: MathNode.MAX }
+			{ name: 'Max', value: MathNode.MAX },
+			// { name: 'Clamp', value: MathNode.CLAMP }
+			{ name: 'Saturate', value: MathNode.SATURATE }
 		], MathNode.MIN );
 
 		methodInput.onChange( ( data ) => {
 
 			node.method = data.getValue();
+			bElement.setVisible( data.getValue() !== MathNode.SATURATE );
 
 			this.invalidate();
 
@@ -28,15 +32,25 @@ export class LimiterEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 1 );
 		const bElement = new LabelElement( 'B' ).setInput( 1 );
 
-		aElement.onConnect( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 

examples/jsm/node-editor/math/OperatorEditor.js

@@ -1,13 +1,14 @@
-import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { Element, LabelElement, NumberInput, SelectInput } from '../../libs/flow.module.js';
+import { FloatNode, OperatorNode } from '../../renderers/nodes/Nodes.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
 
 export class OperatorEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new FloatNode();
+
 		const node = new OperatorNode( '+', NULL_VALUE, NULL_VALUE );
 
 		super( 'Operator', 1, node, 150 );
@@ -30,18 +31,30 @@ export class OperatorEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 3 );
 		const bElement = new LabelElement( 'B' ).setInput( 3 );
 
-		aElement.onConnect( () => {
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
+
 		this.add( new Element().add( opInput ) )
 			.add( aElement )
 			.add( bElement );

examples/jsm/node-editor/math/PowerEditor.js

@@ -1,13 +1,13 @@
-import { LabelElement } from '../../libs/flow.module.js';
+import { LabelElement, NumberInput } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
 
 export class PowerEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new FloatNode();
 		const node = new MathNode( MathNode.POW, NULL_VALUE, NULL_VALUE );
 
 		super( 'Power', 1, node, 175 );
@@ -15,15 +15,25 @@ export class PowerEditor extends BaseNode {
 		const aElement = new LabelElement( 'A' ).setInput( 1 );
 		const bElement = new LabelElement( 'B' ).setInput( 1 );
 
-		aElement.onConnect( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
 
-			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 

examples/jsm/renderers/nodes/utils/JoinNode.js

@@ -12,7 +12,7 @@ class JoinNode extends Node {
 
 	getNodeType( builder ) {
 
-		return builder.getTypeFromLength( this.nodes.length );
+		return builder.getTypeFromLength( this.nodes.reduce( ( count, cur ) => count + builder.getTypeLength( cur.getNodeType( builder ) ), 0 ) );
 
 	}
 
@@ -27,7 +27,7 @@ class JoinNode extends Node {
 
 			const input = nodes[ i ];
 
-			const inputSnippet = input.build( builder, 'float' );
+			const inputSnippet = input.build( builder );
 
 			snippetValues.push( inputSnippet );