Symbol id generation

[Alex Pla Alonso]

Hi!
I've reviewed your documentation but I cannot find the answer to this question there.
We need to limit the max char length of the symbols added to the diagram (for example, id should be max 128 chars). The problem is that I cannot find how we can tell Diagram component (or SymbolPalette if that's the one who generates the new ids) this condition. I've looked a bit into this components code but cannot find where this ids get generated nor if we can pass some prop to the components to control that.

Is there any way to do this? Since we need to save those ids in DBs and sometimes they get pretty long and sometimes they're a lot shorter.

Thank you.

[Gowtham Gunashekar]

Hi Alex, 

 

We don’t have support to change or validate  the node or connector id while rendering the diagram, but you can do the validation before rendering the diagram in sample side. We have added sample link to demonstrate how to validate the node and connector id before rendering a diagram, in that we have set the random id up to 12 characters. 

 

Sample link: https://stackblitz.com/edit/react-ofekct-ossqgz?file=index.js  

Regards, 

Gowtham. 

 

[Alex Pla Alonso]

Thank you for your response, but I think this doesn't apply to my problem.
What I want, is, while using the Diagram and SymbolsPalette components together, to somehow "control" the id's of the new elements that the user drags from the palette to the component.

Sorry, maybe that's what you are telling me that you don't support, but I don't know if maybe this wasn't clear in my first post.

Thanks again.

[Gowtham Gunashekar]

Hi Alex, 

 

We have added a sample link to demonstrate how to change the id of nodes and connector while drag and drop from palette by using drop event. 

 

Sample Link: https://stackblitz.com/edit/react-wfsnrc-ztvd7i?file=index.js  

 

Code snippet: 

     drop={args => { 

                  args.cancel = true; 

                  var node = args.element; 

                  diagramInstance.add({ 

                    id: node.id + "qwertyuiotyuio", 

                    shape: node.shape, 

                    offsetX: node.offsetX, 

                    offsetY: node.offsetY, 

                    width: node.width, 

                    height: node.height 

                  }); 

                }} 

 

 

Regards,  

Gowtham 

 

[Alex Pla Alonso]

Hi Gowtham, sorry for the late reply, but I couldn't test this before.

Yes, I already knew what you propose here. The problem I have is that, even though I create the palette symbols object passing a specific id for each palette item (for example: CLOSED_PROCESS), at the drop callback in the diagram component, the element.id is not CLOSED_PROCESS, but CLOSED_PROCESSxUYdmaEDKsadasdE (for example), and that random chars that are added there there seems to be no way to control them. I can't discard the element.id since for me is important that it starts with CLOSED_PROCESS, but I want to control the random chars max length.
Of course, I don't generate those random chars in my code, it's something that I imagine the SymbolPaletteComponent does, but I couldn't find it.

I hope that now I've made myself clear, sorry if I wasn't clear enough on my previous comments.

Best regards, and thank you again.

[Senthil Kumar Venkatesan]

Hi Alex ,  

Can you please refer the below snippet . If we used the snippet like this , then random chars for the node id will not appear . And please refer the below image , we don’t find any random chars for the newly added nodes from the palette . Also please note that , each node should have specific node ID and should not use the same ID for all the nodes that you are dropping from the palette

drop={args => {
args.cancel = true;
var node = args.element;
diagramInstance.add({
id: "CLOSED_PROCESS"+ "_" + diagramInstance.nodes.length,
shape: node.shape,
offsetX: node.offsetX,
offsetY: node.offsetY,
width: node.width,
height: node.height
});
}}
 

Reference image : https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-image-235825824.zip 

Sample : https://stackblitz.com/edit/react-wfsnrc-ayvtnm?file=index.js 

  

Regards, 

Senthil Kumar V 

  

[Alex Pla Alonso]

As I told you before, in the drop callback the args.element.id DO come with the random chars. You're discarding that id, and that's the ID that we're using, the one I was referring that comes with the random chars.

I think the solution then would be do as you do and disregard the id "root" that I give to the symbols in the palettes object of SymbolsPalette and just overrite it in the drop.
Anyway, it's clear to me now that there's no way to control this id "generation" that the SymbolsPalette component does upon symbol click + drag into the diagram.

Thank you again.

[Gowtham Gunashekar]

Hi Alex ,  

 

As we said earlier We don’t have support to change or validate the node or connector id while rendering the diagram, only way to do this we can change the id in drop event while drag and drop the symbol from the symbol palette. 

 

Regards,   

Gowtham