⬅️ Back to Table of Contents

📄 BaseNodeEditor.js

📊 Analysis Summary

Metric	Count
🔧 Functions	17
🧱 Classes	1
📦 Imports	9
📊 Variables & Constants	1

📚 Table of Contents

• Imports
• Variables & Constants
• Functions
• Classes

🛠️ File Location:

📂 playground/BaseNodeEditor.js

📦 Imports

Name	Source
Node	flow
ButtonInput	flow
TitleElement	flow
ContextMenu	flow
exportJSON	./NodeEditorUtils.js
onValidNode	./NodeEditorUtils.js
setOutputAestheticsFromNode	./DataTypeLib.js
getColorFromNode	./DataTypeLib.js
getLengthFromNode	./DataTypeLib.js

---

Variables & Constants

Name	Type	Kind	Value	Exported
context	any	let/var	new ContextMenu( this.dom )	✗

---

Functions

BaseNodeEditor.getColor(): string

Returns: string

Calls:

• getColorFromNode (from ./DataTypeLib.js)

Code

getColor() {

        const color = getColorFromNode( this.value );

        return color ? color + 'BB' : null;

    }

BaseNodeEditor.hasJSON(): boolean

Returns: boolean

Code

hasJSON() {

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

    }

BaseNodeEditor.exportJSON(): any

Returns: any

Calls:

• this.value.toJSON

Code

exportJSON() {

        return this.value.toJSON();

    }

BaseNodeEditor.serialize(data: any): void

Parameters:

• data any

Returns: void

Calls:

• super.serialize

Code

serialize( data ) {

        super.serialize( data );

        delete data.width;

    }

BaseNodeEditor.deserialize(data: any): void

Parameters:

• data any

Returns: void

Calls:

• super.deserialize

Code

deserialize( data ) {

        delete data.width;

        super.deserialize( data );

    }

BaseNodeEditor.setEditor(value: any): this

Parameters:

• value any

Returns: this

Calls:

• this.dispatchEvent

Code

setEditor( value ) {

        this.editor = value;

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

        return this;

    }

BaseNodeEditor.add(element: any): any

Parameters:

• element any

Returns: any

Calls:

• element.onValid
• this.onValidElement
• super.add

Code

add( element ) {

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

        return super.add( element );

    }

BaseNodeEditor.setName(value: any): this

Parameters:

• value any

Returns: this

Calls:

• this.title.setTitle

Code

setName( value ) {

        this.title.setTitle( value );

        return this;

    }

BaseNodeEditor.setIcon(value: any): this

Parameters:

• value any

Returns: this

Calls:

• this.title.setIcon

Code

setIcon( value ) {

        this.title.setIcon( 'ti ti-' + value );

        return this;

    }

BaseNodeEditor.getName(): any

Returns: any

Calls:

• this.title.getTitle

Code

getName() {

        return this.title.getTitle();

    }

BaseNodeEditor.setObjectCallback(callback: any): this

Parameters:

• callback any

Returns: this

Calls:

• this.title.setObjectCallback

Code

setObjectCallback( callback ) {

        this.title.setObjectCallback( callback );

        return this;

    }

BaseNodeEditor.getObject(callback: any): any

Parameters:

• callback any

Returns: any

Calls:

• this.title.getObject

Code

getObject( callback ) {

        return this.title.getObject( callback );

    }

BaseNodeEditor.setColor(color: any): this

Parameters:

• color any

Returns: this

Calls:

• this.title.setColor

Code

setColor( color ) {

        this.title.setColor( color );

        return this;

    }

BaseNodeEditor.invalidate(): void

Returns: void

Calls:

• this.title.dispatchEvent

Code

invalidate() {

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

    }

BaseNodeEditor.dispose(): void

Returns: void

Calls:

• this.setEditor
• this.context.hide
• super.dispose

Code

dispose() {

        this.setEditor( null );

        this.context.hide();

        super.dispose();

    }

getObjectCallback(): any

Returns: any

Code

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

            return this.value;

        }

onAddButtons(): void

Returns: void

Calls:

• context.removeEventListener
• context.add
• new ButtonInput( 'Remove' ).setIcon( 'ti ti-trash' ).onClick
• this.dispose
• this.hasJSON
• this.context.add
• new ButtonInput( 'Export' ).setIcon( 'ti ti-download' ).onClick
• exportJSON (from ./NodeEditorUtils.js)
• this.exportJSON
• new ButtonInput( 'Isolate' ).setIcon( 'ti ti-3d-cube-sphere' ).onClick
• this.context.hide
• this.title.dom.dispatchEvent

Code

() => {

            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' ) );

            } ) );

        }

---

Classes

BaseNodeEditor

Class Code

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

    }

}

Methods

getColor(): string

Code

getColor() {

        const color = getColorFromNode( this.value );

        return color ? color + 'BB' : null;

    }

hasJSON(): boolean

Code

hasJSON() {

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

    }

exportJSON(): any

Code

exportJSON() {

        return this.value.toJSON();

    }

serialize(data: any): void

Code

serialize( data ) {

        super.serialize( data );

        delete data.width;

    }

deserialize(data: any): void

Code

deserialize( data ) {

        delete data.width;

        super.deserialize( data );

    }

setEditor(value: any): this

Code

setEditor( value ) {

        this.editor = value;

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

        return this;

    }

add(element: any): any

Code

add( element ) {

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

        return super.add( element );

    }

setName(value: any): this

Code

setName( value ) {

        this.title.setTitle( value );

        return this;

    }

setIcon(value: any): this

Code

setIcon( value ) {

        this.title.setIcon( 'ti ti-' + value );

        return this;

    }

getName(): any

Code

getName() {

        return this.title.getTitle();

    }

setObjectCallback(callback: any): this

Code

setObjectCallback( callback ) {

        this.title.setObjectCallback( callback );

        return this;

    }

getObject(callback: any): any

Code

getObject( callback ) {

        return this.title.getObject( callback );

    }

setColor(color: any): this

Code

setColor( color ) {

        this.title.setColor( color );

        return this;

    }

invalidate(): void

Code

invalidate() {

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

    }

dispose(): void

Code

dispose() {

        this.setEditor( null );

        this.context.hide();

        super.dispose();

    }

---