Give node id as per your choice

[ishpreetkaurwebner]

In editor.addNode() function, we can pass name, input, output, position x, position y, class, and html. How we can pass node id and give node id according to our choice?

[jerosoler]

Hello @ishpreetkaurwebner

The node id cannot be passed.

It is self-assigned.

Only on import can you pass the id of the node.

Maybe you could change it with the "nodeCreated" event but it is not recommended.

Why do you need to know the id?

Jero

[pavlyuts]

The key question is why you want to set IDs.

If your application need that node id be unique and never the same on different flows, you may set:

 editor.useuuid = true;

After that, all the IDs generated will be UUIDs instead of autoincrement integers, unique for any node created. However, if you copy one flow from other, it is your duty to re-asign all the IDs to got clear new instance.

[ishpreetkaurwebner]

Is there anything like data-attr we can assign to node like we pass name and class to addNode()? I want to pass extra information, custom id we can't provide work according to you, so can we use our custom information on data-attr or any other suggestion you have?

[jerosoler]

You could create a custom html with a unique id for each node.

Or take the id assigned to it with the "nodeCreated" event.

Or create a hidden input with df- * variables and assign the variable to creation.

[pavlyuts]

Or just add a property to a node and the property will survive export-import.

[ishpreetkaurwebner]

Ok, thanks a lot, I will try

[rsvidevince]

I have a use case for this.

Im using Drawflow to render and edit some graph which is already saved in a database. Every node is a db row with self generated ids (primary keys), completely incompatible with the ids generated by drawflow...

A workaround would be to first create a new db row with a post, then import the data all over again, but that doesn't sound very smart (:

[jerosoler]

Hello @rsvidevince

Override the function uuid to get last insertdID in your db.

[rsvidevince]

Hmm, that sounds smarter! Can you give me a hint on how/where to do this ?

[jerosoler]

Use:

editor.useuuid = true;

editor.getUuid = function() {
/*
Your code for las insert db
*/
return your_last_inset_db;
}

[rsvidevince]

Thanks for your help @jerosoler ! I'm trying hard, but getUuid() always return before the async post, setting the id as undefined... I tried with async/await and with .then(), axios and fetch, no juice at all. Ideas?

[jerosoler]

Mmmmmm

editor.getUuid = async function() { 
/* 
Your code for las insert db 
*/ 
return your_last_inset_db;
 }

¿?

[rsvidevince]

I tried :T

editor.getUuid = async function() {
  console.log('called getUuid()')
  let answer = await axios({
    method: 'POST',
    url: 'my-url-here'
  })

  console.log('got the answer', answer)
  return answer.data.id
}

Prints in the console like this:

called getUuid()
nodeCreated with id [object Promise] // this is a console.log on editor.on('nodeCreated')
got the answer { … }

Similarly:

        editor.getUuid = function() {
          console.log('getUuid')
          axios({
            method: 'POST',
            url: 'my-url'
          }).then(answer => {
            console.log('answer', answer)
            return answer.data.id
          })
        }

prints:

getUuid
nodeCreated with id undefined
answer {…}

[jerosoler]

Separe functions in two functions. Example: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/async_function

[rsvidevince]

I tried that way too, unfortunately :T

        editor.getUuid = async function() {
          console.log('getUuid')
          let id = await resolveAfter2Seconds()
          console.log('awaited and got the', id)
          return id
        }

      function resolveAfter2Seconds() {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve('resolved-id');
          }, 2000);
        });
      }

Prints:

getUuid
nodeCreated with id [object Promise]
awaited and got the resolved-id

I've changed my logic a little, and made it! I'm running editor.addNode() only after the post, than I can return the new id synchronously with getUuid(). Thanks for the help! This lib rocks!

[shamilyn]

I need to get the html elements of a particular node to update the values of that node and that node is separate component... Is there any method to get it??