NodeEditor: Update Flow.js lib and added TreeView to create Node

examples/jsm/node-editor/NodeEditor.js

@@ -1,4 +1,4 @@
-import { Styles, Canvas, CircleMenu, ButtonInput, ContextMenu, Tips, Search, Loader } from '../libs/flow.module.js';
+import { Styles, Canvas, CircleMenu, ButtonInput, StringInput, ContextMenu, Tips, Search, Loader, Node, TreeViewNode, TreeViewInput, Element } from '../libs/flow.module.js';
 import { BasicMaterialEditor } from './materials/BasicMaterialEditor.js';
 import { StandardMaterialEditor } from './materials/StandardMaterialEditor.js';
 import { PointsMaterialEditor } from './materials/PointsMaterialEditor.js';
@@ -759,7 +759,7 @@ export class NodeEditor extends EventDispatcher {
 
 	_initNodesContext() {
 
-		const context = new ContextMenu( this.domElement );
+		const context = new ContextMenu( this.canvas.canvas ).setWidth( 300 );
 
 		let isContext = false;
 		const contextPosition = {};
@@ -801,17 +801,129 @@ export class NodeEditor extends EventDispatcher {
 
 		} );
 
+		context.addEventListener( 'show', () => {
+
+			reset();
+			focus();
+
+		} );
+
 		//**************//
 		// INPUTS
 		//**************//
 
+		const nodeButtons = [];
+
+		let nodeButtonsVisible = [];
+		let nodeButtonsIndex = - 1;
+
+		const focus = () => requestAnimationFrame( () => search.inputDOM.focus() );
+		const reset = () => {
+
+			search.setValue( '' );
+
+			for ( const button of nodeButtons ) {
+
+				button.setOpened( false ).setVisible( true ).setSelected( false );
+
+			}
+
+		};
+
+		const node = new Node();
+		context.add( node );
+
+		const search = new StringInput().setPlaceHolder( 'Search...' ).setIcon( 'ti ti-list-search' );
+
+		search.inputDOM.addEventListener( 'keydown', e => {
+
+			const key = e.key;
+
+			if ( key === 'ArrowDown' ) {
+
+				const previous = nodeButtonsVisible[ nodeButtonsIndex ];
+				if ( previous ) previous.setSelected( false );
+
+				const current = nodeButtonsVisible[ nodeButtonsIndex = ( nodeButtonsIndex + 1 ) % nodeButtonsVisible.length ];
+				if ( current ) current.setSelected( true );
+
+				e.preventDefault();
+				e.stopImmediatePropagation();
+
+			} else if ( key === 'ArrowUp' ) {
+
+				const previous = nodeButtonsVisible[ nodeButtonsIndex ];
+				if ( previous ) previous.setSelected( false );
+
+				const current = nodeButtonsVisible[ nodeButtonsIndex > 0 ? -- nodeButtonsIndex : ( nodeButtonsIndex = nodeButtonsVisible.length - 1 ) ];
+				if ( current ) current.setSelected( true );
+
+				e.preventDefault();
+				e.stopImmediatePropagation();
+
+			} else if ( key === 'Enter' ) {
+
+				nodeButtonsVisible[ nodeButtonsIndex ].dom.click();
+
+				e.preventDefault();
+				e.stopImmediatePropagation();
+
+			}
+
+		} );
+
+		search.onChange( () => {
+
+			const value = search.getValue().toLowerCase();
+
+			if ( value.length === 0 ) return reset();
+
+			nodeButtonsVisible = [];
+			nodeButtonsIndex = 0;
+
+			for ( const button of nodeButtons ) {
+
+				const buttonLabel = button.getLabel().toLowerCase();
+
+				button.setVisible( false ).setSelected( false );
+
+				let visible = buttonLabel.indexOf( value ) !== - 1;
+
+				if ( visible && button.parent !== null ) {
+
+					nodeButtonsVisible.push( button );
+
+				}
+
+			}
+
+			for ( const button of nodeButtonsVisible ) {
+
+				let parent = button;
+
+				while ( parent !== null ) {
+
+					parent.setOpened( true ).setVisible( true );
+
+					parent = parent.parent;
+
+				}
+
+			}
+
+			nodeButtonsVisible[ nodeButtonsIndex ].setSelected( true );
+
+		} );
+
+		const treeView = new TreeViewInput();
+		node.add( new Element().setHeight( 30 ).add( search ) );
+		node.add( new Element().setHeight( 200 ).add( treeView ) );
+
 		const createButtonMenu = ( item ) => {
 
-			const button = new ButtonInput( item.name );
+			const button = new TreeViewNode( item.name );
 			button.setIcon( `ti ti-${item.icon}` );
 
-			let context = null;
-
 			if ( item.nodeClass ) {
 
 				button.onClick( () => add( new item.nodeClass() ) );
@@ -820,33 +932,33 @@ export class NodeEditor extends EventDispatcher {
 
 			if ( item.tip ) {
 
-				button.setToolTip( item.tip );
+				//button.setToolTip( item.tip );
 
 			}
 
-			if ( item.children ) {
+			nodeButtons.push( button );
 
-				context = new ContextMenu();
+			if ( item.children ) {
 
 				for ( const subItem of item.children ) {
 
-					const buttonMenu = createButtonMenu( subItem );
+					const subButton = createButtonMenu( subItem );
 
-					context.add( buttonMenu.button, buttonMenu.context );
+					button.add( subButton );
 
 				}
 
 			}
 
-			return { button, context };
+			return button;
 
 		};
 
 		for ( const item of NodeList ) {
 
-			const buttonMenu = createButtonMenu( item );
+			const button = createButtonMenu( item );
 
-			context.add( buttonMenu.button, buttonMenu.context );
+			treeView.add( button );
 
 		}
 

examples/jsm/node-editor/core/BaseNode.js

@@ -1,4 +1,4 @@
-import { ObjectNode } from '../../libs/flow.module.js';
+import { Node, ButtonInput, TitleElement, ContextMenu } from '../../libs/flow.module.js';
 
 export const onNodeValidElement = ( inputElement, outputElement ) => {
 
@@ -12,17 +12,45 @@ export const onNodeValidElement = ( inputElement, outputElement ) => {
 
 };
 
-export class BaseNode extends ObjectNode {
+export class BaseNode extends Node {
 
-	constructor( name, inputLength, value = null, width = 300 ) {
+	constructor( name, outputLength, value = null, width = 300 ) {
+
+		super();
 
 		const getObjectCallback = ( /*output = null*/ ) => {
 
 			return this.value;
 
 		};
 
-		super( name, inputLength, getObjectCallback, width );
+		this.setWidth( width );
+
+		const title = new TitleElement( name )
+			.setObjectCallback( getObjectCallback )
+			.setSerializable( false )
+			.setOutput( outputLength );
+
+		const closeButton = new ButtonInput().onClick( () => {
+
+			context.open();
+
+		} ).setIcon( 'ti ti-dots' );
+
+		const context = new ContextMenu( this.dom );
+		context.add( new ButtonInput( 'Remove' ).setIcon( 'ti ti-trash' ).onClick( () => {
+
+			this.dispose();
+
+		} ) );
+
+		this.title = title;
+		this.closeButton = closeButton;
+		this.context = context;
+
+		title.addButton( closeButton );
+
+		this.add( title );
 
 		this.setOutputColor( this.getColorValueFromValue( value ) );
 
@@ -93,4 +121,70 @@ export class BaseNode extends ObjectNode {
 
 	}
 
+	setName( value ) {
+
+		this.title.setTitle( value );
+
+		return this;
+
+	}
+
+	getName() {
+
+		return this.title.getTitle();
+
+	}
+
+	setObjectCallback( callback ) {
+
+		this.title.setObjectCallback( callback );
+
+		return this;
+
+	}
+
+	getObject( callback ) {
+
+		return this.title.getObject( callback );
+
+	}
+
+	setColor( color ) {
+
+		this.title.setColor( color );
+
+		return this;
+
+	}
+
+	setOutputLength( length ) {
+
+		this.title.setOutput( length );
+
+		return this;
+
+	}
+
+	setOutputColor( color ) {
+
+		this.title.setOutputColor( color );
+
+		return this;
+
+	}
+
+	invalidate() {
+
+		this.title.dispatchEvent( new Event( 'connect' ) );
+
+	}
+
+	dispose() {
+
+		this.context.hide();
+
+		super.dispose();
+
+	}
+
 }