Can we preserve output- class of output bubbles?

[ishpreetkaurwebner]

Suppose, I have 6 output bubbles with class names output_1, output_2, .... output_6.
I removes one output bubble having class output_4 with method editor.removeNodeOutput(), it renames all bubble outputs like output_1, output_2, output_3, output_4, output_5. I would like to have output classes as:
output_1, output_2, output_3, output_5, output_6. output_4 is removed, so it should not be there in sequence.

When we remove any node, then node classes are not renamed. In same way, can output bubbles' classes can be preserved?

[jerosoler]

Hello @ishpreetkaurwebner

There is no function to hold className.

The only option I can think of is that you overwrite the removeNodeOutput function.

Even though I don't know if it would give problems with the addNodeOuput function, even if it said problems you could also overwrite it.

[ishpreetkaurwebner]

@jerosoler Thanks a lot for quick reply.
Although, I can do it with the idea you have provided, still I want to know how much time it will take for you to provide code for it? It will be great help if you provide it if it takes less time for you to handle this problem.

[techies-sudo]

@ishpreetkaurwebner when you deleted the output class while it connected to other nodes ,please check node which this class belongs , in editor,drawflow.drawflow.Home.data and try to console getNodeFromId(node_id) as well.check the outputs object. #151

[ishpreetkaurwebner]

@jerosoler and @techies-sudo: Thanks a lot for your reply.
Your idea to handle this problem is working perfectly fine.

overwrite the removeNodeOutput, getNodeFromId, removeSingleConnection all have helped me to resolve my problem.
Now, result is perfectly fine.

But, I am facing another issue: When I export the drawflow, it is displaying me old bubbles also. It has not removed old bubbles in export data. It is showing all bubbles which is/are removed. When I removed bubble, then I removed connections linked with this bubble as shown in following code. Export does not show connections, it is perfect here, but bubbles are still showing in export.

I have made following changes for override

class Drawflowoverride extends Drawflow {

removeNodeOutput(id, output_class) {
    
    var nodeInfo = this.getNodeFromId(id);
    var outputNodeConnections = nodeInfo['outputs'][output_class]['connections'];
   
    if(outputNodeConnections.length > 0) {                                        // code starts for deleting connections
      outputNodeConnections.forEach(connectionInfo => {
        this.removeSingleConnection(id, connectionInfo['node'], output_class, connectionInfo['output']);
      });
    }

    $('#node-'+id+ ' .outputs .'+output_class).remove();                      // removing bubble.
}

Any idea to update the drawflow.

[ishpreetkaurwebner]

Hello @jerosoler , I am able to update the drawflow using

delete this.drawflow.drawflow.Home.data[id]['outputs'][output_class];

and export is working perfectly.

So, when I export the drawflow and then import the drawflow, then it shows me output connections as

As you can see in image, output_5 is missing as I have removed this bubble, so it is missing here and no reordering of output bubbles happened with function override as suggested by you.

Now, I have imported the same drawflow on web page, and in import, if we see with console.log, output bubbles are shown as with same class output_1, output_2, output_3, output_4, output_6, output_7 which was exported,
but on UI, it is again reordered as output_1, output_2, output_3, output_4, output_5, output_6 as shown in following image,

Now, any idea to avoid reordering of output_ class while importing?

Once again thanks for quick reply.

[jerosoler]

👍
uhmmm...

Override addNodeImport
The problem is here:

for(var x = 0; x < Object.keys(dataNode.outputs).length; x++) {
      const output = document.createElement('div');
      output.classList.add("output");
      output.classList.add("output_"+(x+1));
      outputs.appendChild(output);
    }

I don't think it's difficult to change that.

[ishpreetkaurwebner]

@jerosoler Thanks for reply.
I have seen that the function "addNodeImport" is very lengthy functions as compared to others. If I override the function, then other lines of code will also get dis-functional along with lines of code you have mentioned in above comment.
Can I know what is the purpose of lot of other lines of code other than above code? Whether override will work smooth? Whether other code will not affect anything already in working condition?

[ishpreetkaurwebner]

@jerosoler I have read the code carefully, it is creating each and every class like 'parent-node', 'inputs', 'outputs'. If I override the function, then definitely every div will be removed.
It means while overriding I have to write whole function along the change in above mentioned lines of code? Am I right?

[jerosoler]

Not remove, edit!

I think everything else will work fine.

Or maybe you also have to touch the addNodeOutput

[ishpreetkaurwebner]

@jerosoler : Thanks for giving me idea of lines of code which is producing reordering of outputs.
I have tried to override "addNodeImport", and in override method, I have added only few lines where only output_ class bubbles will be adding up to maintain sequence according to import, but with that import method is not showing anything on page. It is now blank.

So, I am trying to add new function for ordering of output_ class bubbles and I want to call that function in

editor.on('import', function(){
         // write code here
});

But it is not working at all. Even simple alert(1); is not working.

Whether I am doing something wrong in callback function for event

editor.on('import', function(){
        alert(1);
});

[jerosoler]

The console show error?

[ishpreetkaurwebner]

Console does not display any error, but no alert message is displayed on editor.on('import', function(){

[ishpreetkaurwebner]

I have done by first removing bubbles and then creating bubbles in a function and calling this function immediately after import function. I have not done any code relating to maintaining actual sequence of code in any editor events.

Thanks for giving idea of code and that idea helps me to do ordering of output bubbles.

[jerosoler]

add before import editor.on('import', function(){... and works