three.js/playground/BaseNodeEditor.js

import { Node, ButtonInput, TitleElement, ContextMenu } from 'flow';
import { exportJSON, onValidNode } from './NodeEditorUtils.js';
import { setOutputAestheticsFromNode, getColorFromNode, getLengthFromNode } from './DataTypeLib.js';

export class BaseNodeEditor extends Node {

	constructor( name, value = null, width = 300 ) {

		super();

		const getObjectCallback = ( /*output = null*/ ) => {

			return this.value;

		};

		this.setWidth( width );

		const title = new TitleElement( name )
			.setObjectCallback( getObjectCallback )
			.setSerializable( false );
		
		setOutputAestheticsFromNode( title, value );

		const contextButton = new ButtonInput().onClick( () => {

			context.open();

		} ).setIcon( 'ti ti-dots' );

		const onAddButtons = () => {

			context.removeEventListener( 'show', onAddButtons );

			context.add( new ButtonInput( 'Remove' ).setIcon( 'ti ti-trash' ).onClick( () => {

				this.dispose();

			} ) );

			if ( this.hasJSON() ) {

				this.context.add( new ButtonInput( 'Export' ).setIcon( 'ti ti-download' ).onClick( () => {

					exportJSON( this.exportJSON(), this.constructor.name );

				} ) );

			}

			context.add( new ButtonInput( 'Isolate' ).setIcon( 'ti ti-3d-cube-sphere' ).onClick( () => {

				this.context.hide();

				this.title.dom.dispatchEvent( new MouseEvent( 'dblclick' ) );

			} ) );

		};

		const context = new ContextMenu( this.dom );
		context.addEventListener( 'show', onAddButtons );

		this.title = title;

		if ( this.icon ) this.setIcon( 'ti ti-' + this.icon );

		this.contextButton = contextButton;
		this.context = context;

		title.addButton( contextButton );

		this.add( title );

		this.editor = null;

		this.value = value;

		this.onValidElement = onValidNode;

		this.outputLength = getLengthFromNode( value );
	}

	getColor() {

		const color = getColorFromNode( this.value );

		return color ? color + 'BB' : null;

	}

	hasJSON() {

		return this.value && typeof this.value.toJSON === 'function';

	}

	exportJSON() {

		return this.value.toJSON();

	}

	serialize( data ) {

		super.serialize( data );

		delete data.width;

	}

	deserialize( data ) {

		delete data.width;

		super.deserialize( data );

	}

	setEditor( value ) {

		this.editor = value;

		this.dispatchEvent( new Event( 'editor' ) );

		return this;

	}

	add( element ) {

		element.onValid( ( source, target ) => this.onValidElement( source, target ) );

		return super.add( element );

	}

	setName( value ) {

		this.title.setTitle( value );

		return this;

	}

	setIcon( value ) {

		this.title.setIcon( 'ti ti-' + 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;

	}

	invalidate() {

		this.title.dispatchEvent( new Event( 'connect' ) );

	}

	dispose() {

		this.setEditor( null );

		this.context.hide();

		super.dispose();

	}

}