123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398 |
- 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;
- }
- };
- }
|