further clean up code; Allow color to be null

Author: abc013

playground/BaseNodeEditor.js

@@ -83,7 +83,9 @@ export class BaseNodeEditor extends Node {
 
 	getColor() {
 
-		return ( getColorFromNode( this.value ) ) + 'BB';
+		const color = getColorFromNode( this.value );
+
+		return color ? color + 'BB' : null;
 
 	}
 

playground/DataTypeLib.js

@@ -42,7 +42,6 @@ export function getLengthFromNode( value ) {
 
 }
 
-
 export const typeToColorLib = {
 	// gpu
 	string: '#ff0000',
@@ -63,11 +62,9 @@ export const typeToColorLib = {
 	node: '#ff00ff'
 };
 
-export const defaultColor = '#777777';
-
 export function getColorFromType( type ) {
 
-	return typeToColorLib[ type ] || defaultColor;
+	return typeToColorLib[ type ] || null;
 
 }
 
@@ -79,7 +76,7 @@ export function getColorFromNode( value ) {
 
 }
 
-export function getTypeFromNode ( value ) {
+function getTypeFromNode( value ) {
 
 	if ( value ) {
 
@@ -90,7 +87,7 @@ export function getTypeFromNode ( value ) {
 
 }
 
-export function getTypeFromValue( value ) {
+function getTypeFromValue( value ) {
 
 	if ( value && value.isScriptableValueNode ) value = value.value;
 	if ( ! value ) return;
@@ -106,18 +103,17 @@ export function getTypeFromValue( value ) {
 
 }
 
-export function getColorFromValue( value ) {
+export function setInputAestheticsFromType( element, type ) {
 
-	const type = getTypeFromValue( value );
+	element.setInput( getLengthFromType( type ) );
 
-	return getColorFromType( type );
+	const color = getColorFromType( type );
 
-}
+	if ( color ) {
 
-export function setInputAestheticsFromType( element, type ) {
+		element.setInputColor( color );
 
-	element.setInput( getLengthFromType( type ) );
-	element.setInputColor( getColorFromType( type ) );
+	}
 
 	return element;
 
@@ -133,7 +129,11 @@ export function setOutputAestheticsFromNode( element, node ) {
 
 	}
 
-	let type = getTypeFromNode( node );
+	return setOutputAestheticsFromType( element, getTypeFromNode( node ) );
+
+}
+
+export function setOutputAestheticsFromType( element, type ) {
 
 	if ( ! type ) {
 
@@ -143,8 +143,23 @@ export function setOutputAestheticsFromNode( element, node ) {
 
 	}
 
+	if ( type == 'void' ) {
+
+		element.setOutput( 0 );
+
+		return element;
+
+	}
+
 	element.setOutput( getLengthFromType( type ) );
-	element.setOutputColor( getColorFromType( type ) );
+
+	const color = getColorFromType( type );
+
+	if ( color ) {
+
+		element.setOutputColor( color );
+
+	}
 
 	return element;
 

playground/NodeEditorUtils.js

@@ -1,6 +1,6 @@
 import { StringInput, NumberInput, ColorInput, Element, LabelElement } from 'flow';
 import { string, float, vec2, vec3, vec4, color } from 'three/nodes';
-import { getColorFromType } from './DataTypeLib.js';
+import { setInputAestheticsFromType, setOutputAestheticsFromType } from './DataTypeLib.js';
 
 export function exportJSON( object, name ) {
 
@@ -265,19 +265,17 @@ export function createElementFromJSON( json ) {
 
 	if ( inputType && json.inputConnection !== false ) {
 
-		element.setInputColor( getColorFromType( inputType ) );
+		setInputAestheticsFromType( element, inputType );
 		//element.setInputStyle( 'dotted' ); // 'border-style: dotted;'
-		element.setInput( 1 );
 
 		element.onValid( onValidType( inputType ) );
 
 	}
 
 	if ( outputType ) {
 
-		element.setInputColor( getColorFromType( outputType ) );
+		setOutputAestheticsFromType( element, outputType );
 		//element.setInputStyle( 'dotted' ); // 'border-style: dotted;'
-		element.setOutput( 1 );
 
 	}
 

playground/editors/ScriptableEditor.js

@@ -2,7 +2,7 @@ import { BaseNodeEditor } from '../BaseNodeEditor.js';
 import { CodeEditorElement } from '../elements/CodeEditorElement.js';
 import { disposeScene, createElementFromJSON, isGPUNode, onValidType } from '../NodeEditorUtils.js';
 import { global, scriptable, js, scriptableValue } from 'three/nodes';
-import { getColorFromType } from '../DataTypeLib.js';
+import { getColorFromType, setInputAestheticsFromType, setOutputAestheticsFromType } from '../DataTypeLib.js';
 
 const defaultTitle = 'Scriptable';
 const defaultWidth = 500;
@@ -70,7 +70,9 @@ export class ScriptableEditor extends BaseNodeEditor {
 
 	getColor() {
 
-		return getColorFromType( this.layout ? this.layout.outputType : null ) + 'BB';
+		const color = getColorFromType( this.layout ? this.layout.outputType : null );
+
+		return color ? color + 'BB' : null;
 
 	}
 
@@ -171,8 +173,7 @@ export class ScriptableEditor extends BaseNodeEditor {
 
 			const outputType = layout.outputType;
 
-			this.title.setOutputColor( getColorFromType( outputType ) );
-			this.title.setOutput( outputType && outputType !== 'void' ? this.outputLength : 0 );
+			setOutputAestheticsFromType( this.title, outputType );
 
 		} else {
 
@@ -407,7 +408,7 @@ export class ScriptableEditor extends BaseNodeEditor {
 
 	_initExternalConnection() {
 
-		this.title.setInputColor( getColorFromType( 'CodeNode' ) ).setInput( 1 ).onValid( onValidType( 'CodeNode' ) ).onConnect( () => {
+		setInputAestheticsFromType(this.title, 'CodeNode' ).onValid( onValidType( 'CodeNode' ) ).onConnect( () => {
 
 			this.hasExternalEditor ? this._toExternal() : this._toInternal();