Add node with specific ID

[Wolf-Byte]

Firstly, I would like to thank you for your work on the plugin, it's the best Vue Flow editor available.

The only issue I am having is with the node ID's. I would like to update the node ID after saving a node to the database (Async). Looking through the code there does not appear to be any support for manually setting the ID (except UUID).

When using the import feature I am able to load the correct ID's however I don't want to import the entire flow when an individual node is saved. Ideally I would like to save the node and then replace the node based on the servers response.

I tried using addNodeImport however getNodeFromId failed as the module name was not returned which resulted in this.drawflow.drawflow[moduleName] being undefined. I don't think using the import feature is they way to go but I thought I would mention what I have tried.

I think the best plan of action would be to add an optional id parameter to addNode which could then be used as the node Id. Please could you let me know if you have any potential concerns with this approach? I understand the connections would also need to be updated, however, this is no big deal as functions exist to create connections.

Let me know what you think and I will take a look if you don't have the capacity at the moment.

[jerosoler]

Hi @Wolf-Byte

View: https://github.com/jerosoler/Drawflow/issues/126#issuecomment-902159417

And look this comment.

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

This will surely help you.

[Wolf-Byte]

Hi @Wolf-Byte

View: #126 (comment)

And look this comment.

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

This will surely help you.

Thank you for the swift response, I took a look over #126 and for my senario I would prefer not to make two api requests to the server to add a node (One to save the node and the other to get the id within getUuid).

I could store the id from the first response in a variable and then use the variable within getUuid however, I envisage this becoming a little confusing especially as we are using HashIds. I would also need to bind the context to functions which adds another layer of complexity.

For now I opted to add an additional parameter to the addNode function, when set the value will be applied to the nodes id.

I have not created a pull request, however, if you would like me to just let me know. https://github.com/Wolf-Byte/Drawflow/commit/d9e5cbd1dea1b5dd3dd90039f44debfde0f7e53e

Many thanks again, Joel

[jerosoler]

I prefer not to add that ids can be added, as it can cause duplicate id's problem.

Another simpler option:

editor.addNodeId  = function (name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false, id) {
          const lastId = editor.nodeId;
          editor.nodeId = id;
          editor.addNode(name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false)
          editor.nodeId = lastId;
        }  

editor.addNodeId('github', 0, 1, 100, 375, 'github', data, '<div>Hey<div id="test" contenteditable="true" df-name2-name3></div></div>', false, "hii");

[Wolf-Byte]

I prefer not to add that ids can be added, as it can cause duplicate id's problem.

Another simpler option:

editor.addNodeId  = function (name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false, id) {
          const lastId = editor.nodeId;
          editor.nodeId = id;
          editor.addNode(name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false)
          editor.nodeId = lastId;
        }  

editor.addNodeId('github', 0, 1, 100, 375, 'github', data, '<div>Hey<div id="test" contenteditable="true" df-name2-name3></div></div>', false, "hii");

I totally understand @jerosoler, the id parameter could cause confusion and result in duplicates if not properly used. I really like your solution to create a new function and then set the nodeId prior to calling addNode.

Thanks again