123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- 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();
- }
- }
|