You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
3.0 KiB
JavaScript
200 lines
3.0 KiB
JavaScript
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();
|
|
|
|
}
|
|
|
|
}
|