three.js/playground/NodeEditorUtils.js

import { StringInput, NumberInput, ColorInput, Element, LabelElement } from 'flow';
import { string, float, vec2, vec3, vec4, color } from 'three/tsl';
import { Color } from 'three';
import { setInputAestheticsFromType, setOutputAestheticsFromType } from './DataTypeLib.js';

export function exportJSON( object, name ) {

	const json = JSON.stringify( object );

	const a = document.createElement( 'a' );
	const file = new Blob( [ json ], { type: 'text/plain' } );

	a.href = URL.createObjectURL( file );
	a.download = name + '.json';
	a.click();

}

export function disposeScene( scene ) {

	scene.traverse( object => {

		if ( ! object.isMesh ) return;

		object.geometry.dispose();

		if ( object.material.isMaterial ) {

			disposeMaterial( object.material );

		} else {

			for ( const material of object.material ) {

				disposeMaterial( material );

			}

		}

	} );

}

export function resetScene( scene ) {

	if ( scene.environment !== null ) {

		scene.environment.dispose();
		scene.environment = null;

	}

	if ( scene.background !== null ) {

		if ( scene.background.isTexture ) scene.background.dispose();

	}

	scene.background = new Color( 0x333333 );

}

export function disposeMaterial( material )	{

	material.dispose();

	for ( const key of Object.keys( material ) ) {

		const value = material[ key ];

		if ( value && typeof value === 'object' && typeof value.dispose === 'function' ) {

			value.dispose();

		}

	}

}

export const createColorInput = ( node, element ) => {

	const input = new ColorInput().onChange( () => {

		node.value.setHex( input.getValue() );

		element.dispatchEvent( new Event( 'changeInput' ) );

	} );

	element.add( input );

};

export const createFloatInput = ( node, element ) => {

	const input = new NumberInput().onChange( () => {

		node.value = input.getValue();

		element.dispatchEvent( new Event( 'changeInput' ) );

	} );

	element.add( input );

};

export const createStringInput = ( node, element, settings = {} ) => {

	const input = new StringInput().onChange( () => {

		let value = input.getValue();

		if ( settings.transform === 'lowercase' ) value = value.toLowerCase();
		else if ( settings.transform === 'uppercase' ) value = value.toUpperCase();

		node.value = value;

		element.dispatchEvent( new Event( 'changeInput' ) );

	} );

	element.add( input );

	if ( settings.options ) {

		for ( const option of settings.options ) {

			input.addOption( option );

		}

	}

	const field = input.getInput();

	if ( settings.allows ) field.addEventListener( 'input', () => field.value = field.value.replace( new RegExp( '[^\\s' + settings.allows + ']', 'gi' ), '' ) );
	if ( settings.maxLength ) field.maxLength = settings.maxLength;
	if ( settings.transform ) field.style[ 'text-transform' ] = settings.transform;

};

export const createVector2Input = ( node, element ) => {

	const onUpdate = () => {

		node.value.x = fieldX.getValue();
		node.value.y = fieldY.getValue();

		element.dispatchEvent( new Event( 'changeInput' ) );

	};

	const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
	const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );

	element.add( fieldX ).add( fieldY );

};

export const createVector3Input = ( node, element ) => {

	const onUpdate = () => {

		node.value.x = fieldX.getValue();
		node.value.y = fieldY.getValue();
		node.value.z = fieldZ.getValue();

		element.dispatchEvent( new Event( 'changeInput' ) );

	};

	const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
	const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
	const fieldZ = new NumberInput().setTagColor( 'blue' ).onChange( onUpdate );

	element.add( fieldX ).add( fieldY ).add( fieldZ );

};

export const createVector4Input = ( node, element ) => {

	const onUpdate = () => {

		node.value.x = fieldX.getValue();
		node.value.y = fieldY.getValue();
		node.value.z = fieldZ.getValue();
		node.value.w = fieldZ.getValue();

		element.dispatchEvent( new Event( 'changeInput' ) );

	};

	const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
	const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
	const fieldZ = new NumberInput().setTagColor( 'blue' ).onChange( onUpdate );
	const fieldW = new NumberInput( 1 ).setTagColor( 'white' ).onChange( onUpdate );

	element.add( fieldX ).add( fieldY ).add( fieldZ ).add( fieldW );

};


export const createInputLib = {
	// gpu
	string: createStringInput,
	float: createFloatInput,
	vec2: createVector2Input,
	vec3: createVector3Input,
	vec4: createVector4Input,
	color: createColorInput,
	// cpu
	Number: createFloatInput,
	String: createStringInput,
	Vector2: createVector2Input,
	Vector3: createVector3Input,
	Vector4: createVector4Input,
	Color: createColorInput
};

export const inputNodeLib = {
	// gpu
	string,
	float,
	vec2,
	vec3,
	vec4,
	color,
	// cpu
	Number: float,
	String: string,
	Vector2: vec2,
	Vector3: vec3,
	Vector4: vec4,
	Color: color
};

export function createElementFromJSON( json ) {

	const { inputType, outputType, nullable } = json;

	const id = json.id || json.name;
	const element = json.name ? new LabelElement( json.name ) : new Element();
	const field = nullable !== true && json.field !== false;

	//

	let inputNode = null;

	if ( nullable !== true && inputNodeLib[ inputType ] !== undefined ) {

		inputNode = inputNodeLib[ inputType ]();

	}

	element.value = inputNode;

	//

	if ( json.height ) element.setHeight( json.height );

	if ( inputType ) {

		if ( field && createInputLib[ inputType ] ) {

			createInputLib[ inputType ]( inputNode, element, json );

		}

		element.onConnect( () => {

			const externalNode = element.getLinkedObject();

			element.setEnabledInputs( externalNode === null );

			element.value = externalNode || inputNode;

		} );

	}

	//

	if ( inputType && json.inputConnection !== false ) {

		setInputAestheticsFromType( element, inputType );
		//element.setInputStyle( 'dotted' ); // 'border-style: dotted;'

		element.onValid( onValidType( inputType ) );

	}

	if ( outputType ) {

		setOutputAestheticsFromType( element, outputType );
		//element.setInputStyle( 'dotted' ); // 'border-style: dotted;'

	}

	return { id, element, inputNode, inputType, outputType };

}

export function isGPUNode( object ) {

	return object && object.isNode === true && object.isCodeNode !== true && object.nodeType !== 'string' && object.nodeType !== 'ArrayBuffer';

}

export function isValidTypeToType( sourceType, targetType ) {

	if ( sourceType === targetType ) return true;

	return false;

}

export const onValidNode = onValidType();

export function onValidType( types = 'node', node = null ) {

	return ( source, target, stage ) => {

		const targetObject = target.getObject();

		if ( targetObject ) {

			for ( const type of types.split( '|' ) ) {

				let object = targetObject;

				if ( object.isScriptableValueNode ) {

					if ( object.outputType ) {

						if ( isValidTypeToType( object.outputType, type ) ) {

							return true;

						}

					}

					object = object.value;

				}

				if ( object === null || object === undefined ) continue;

				let isValid = false;

				if ( type === 'any' ) {

					isValid = true;

				} else if ( type === 'node' ) {

					isValid = isGPUNode( object );

				} else if ( type === 'string' || type === 'String' ) {

					isValid = object.nodeType === 'string';

				} else if ( type === 'Number' ) {

					isValid = object.isInputNode && typeof object.value === 'number';

				} else if ( type === 'URL' ) {

					isValid = object.nodeType === 'string' || object.nodeType === 'ArrayBuffer';

				} else if ( object[ 'is' + type ] === true ) {

					isValid = true;

				}

				if ( isValid ) return true;

			}

			if ( node !== null && stage === 'dragged' ) {

				const name = target.node.getName();

				node.editor.tips.error( `"${name}" is not a "${types}".` );

			}

			return false;

		}

	};

}