litegraph.js icon indicating copy to clipboard operation
litegraph.js copied to clipboard

How is the first node in the list determined?

Open NickHatBoecker opened this issue 4 years ago • 3 comments

Hey there,

I hope this is not a dump question, but I couldn't find anything in the docs.

On a button click I get all nodes via this.graph.serialize().nodes. But I can't seem to find out, how the order of these nodes is generated. The first node is not automatically the smallest id (for example nodes with ids 1, 2, 3 => first is not 1, it's 2). I arrange the nodes from left to right, but it's also not the far leftest. And it's not the one, which was last selected, nor the first one that was created.

For my purpose I just need the first "real" node. Maybe there is a way to control / set the first one? The remaining nodes can be randomly organized or whatever in my case.

Thanks in advance!

NickHatBoecker avatar Dec 04 '21 01:12 NickHatBoecker

Hi @NickHatBoecker, what about remapping them after serialize? Cycle the serialized array and remap in a new array with the key you prefer (node.id or node.order)

atlasan avatar Dec 04 '21 08:12 atlasan

@atlasan yeah that was my plan B, but I wanted to make sure that there is no other way :) Is it possible to show the node id in the title or somewhere in the node? 🤔 Then I could create an input field, type in the number I see and generate my result.

An example node of mine looks like this. but this.id is not available.

export default class TextboxNode {
    constructor () {
        this.characterWidget = this.addWidget('text', 'Character', '', () => {})
        this.textWidget = this.addWidget('text', 'Text', '', () => {})

        this.addInput('I', 'number')
        this.addOutput('O', 'number')

        this.title = 'Textbox'
        this.color = '#222234'
        this.bgcolor = '#333257'
    }

    onExecute () {
        const nodeData = {
            character: this.characterWidget?.value || '',
            text: this.textWidget?.value || '',
        }

        this.properties.nodeData = nodeData
    }
}

// Registering the node
LiteGraph.registerNodeType('game/textbox', TextboxNode)

NickHatBoecker avatar Dec 04 '21 20:12 NickHatBoecker

Found a solution. I add the id to the title afterwards, so I updated the onExecute method:

onExecute () {
    if (!this.title.startsWith('#')) {
        this.title = `#${this.id} ${this.title}`
    }

    const nodeData = {
        character: this.characterWidget?.value || '',
        text: this.textWidget?.value || '',
    }

    this.properties.nodeData = nodeData
}

But maybe there's a smarter way to do it.

NickHatBoecker avatar Dec 05 '21 00:12 NickHatBoecker