how to override connectorid when drawing connections

Question

hi,when I draw a connection it automatically gets an connection.id like connectorGl596.When I programmatically add a connection I use a guid as id.How can I override the connectorid when drawing a connection to use also a guid.I tried it when the connection gets drawed but that didn't work. if(args?.type === "Addition" && args?.state == "Changing")Best regardsTobias

Aravind Ravi · Answer

Hi Tobias, 
 
We have created a sample to change the connector id while draw at runtime. By default, in the diagram, we do not have support to change the connector ID. However, we have achieved this requirement in collectionChange event. After a new connector added, collectionChange event gets triggered. In that event you can remove the newly added connector and add the new connector with your own ID using the add public API method. Please refer to the below code snippet and sample 
 




collectionChange={(args) => { 
                  if ( 
                    args.state === 'Changed' && 
                    args.type === 'Addition' && 
                    !args.element.inEdges && 
                    args.element.addInfo !== 'NewConnector' 
                  ) { 
                    setTimeout(function () { 
// Remove the connector 
                      diagramInstance.remove(args.element); 
.// Create new connector with own ID 
                      var connector = args.element; 
                      connector.id = 
                        'newConnector' + 
                        (diagramInstance.connectors.length + 1); 
                      connector.addInfo = 'NewConnector'; 
// Add the connector 
                      diagramInstance.add(connector); 
                    }, 100); 
                  } 
                }} 
 
Sample: https://stackblitz.com/edit/react-1pqw7i 
 
Regards 
Aravind Ravi

Tobias Koller · Answer

hi Aravind,thanks for your support.But working with setTimeout is not the way I want to code. 100ms may work for your example but in my case this was not enough. I guess it depends on how much the system has to do..The better way would be to have a function-callback where we can override the default id-behaviour like<DiagramComponent                    id="diagram"                    ref={diagramInstanceRef}                    getId = {(args)=>{ return generateMyOwnId()}}where can I open an feature-request?Best regardsTobias

Sivakumar Sekar · Answer

Hi Tobias 

Please find the response to queries in the below table. 





But working with setTimeout is not the way I want to code. 100ms may work for your example but in my case this was not enough. I guess it depends on how much the system has to do.. 

On analysis of the shared query. we found that you need to modify the connector ID after drawing connections. We can able to achieve it only using the setTimeout even with 0ms.  

Sample link: https://stackblitz.com/edit/react-1pqw7i-rgwdkd  



The better way would be to have a function-callback where we can override the default id-behaviour like 

As said earlier only possible solution is to achieve your requirement using the setTimeout. 

Regards,  
Sivakumar

But working with setTimeout is not the way I want to code. 100ms may work for your example but in my case this was not enough. I guess it depends on how much the system has to do..	On analysis of the shared query. we found that you need to modify the connector ID after drawing connections. We can able to achieve it only using the setTimeout even with 0ms. Sample link: https://stackblitz.com/edit/react-1pqw7i-rgwdkd
The better way would be to have a function-callback where we can override the default id-behaviour like	As said earlier only possible solution is to achieve your requirement using the setTimeout.