Adding nodes programmatically using layers

raphael chancey

Asked On November 12, 2019 11:31 PM UTC

I am adding nodes programmatically using diagramInstance.add().. same with connections. All working fine. Thanks for your other answer to use the 'add' method.

I am now trying to enable different nodes in different layers.

I am using the layers array and setting them visible and not visible. I add the nodes to the diagram and to the layer.. and then set a layer to be false.

all nodes show.

I was thinking I need to not add nodes to the diagram directly rather add them to the nodes array and then show a layer.. but not sure.

can you share an example of programmatically adding nodes and connections, also to a layer, and then hiding a layer?

I think I must have the wrong combination of things/

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 13, 2019 12:28 PM UTC

Hi Raphael,

We have created a sample to show how to create layers with objects initially, add a layer at runtime and show/hide the layers at runtime. Please refer to a sample and help documentation for more details.

Sample: https://stackblitz.com/edit/react-3akpcb-uj83bw?file=index.js

Help documentation: https://ej2.syncfusion.com/react/documentation/diagram/layers/

Regards,

Shyam G

Reply | Reply with quote

raphael chancey

Replied On November 13, 2019 10:42 PM UTC

Thank you Shyam, for your reply and example. I can see how to set the layers visible and such.

Can you explain how to add nodes to an existing layer at runtime.?

I added a button to your example and I tried the below but it has no effect. I can of course add it to the diagram using add but then it won't hide when I set the layer invisible

in fact when I add a node to the layer 'objects' and then I try to set invisible I get this error: undefined is not an object (evaluating 's.wrapper')

do I need remove and rebuild the layer each time? Interesting there is no mention in the API of adding objects to a layer at runtime.

Additionally it looks like I also need to add the connections to the layer for them to hide and show?

Appreciate any insight. Thank you.

 drawNode() { 
    let node = {id: 'newNode', width:100, height: 100, offsetX: 200,offsetY: 200}; 
    nodes.push(node);
    diagramInstance.layers[0].objects.push(node); 
    }

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 14, 2019 11:14 AM UTC

Hi Raphael,

Please refer to an below code example in which we have shown how to add an object to an existing layer.

Code example:

function addLayer() {

var node = {

id: 'nodeData', offsetX: 400, offsetY: 0, height: 100, width: 100,

};

// add object to an existing layer

diagramInstance.addLayer(diagramInstance.layers[0], [node])

}

Sample: https://stackblitz.com/edit/react-3akpcb-uj83bw?file=index.js

Regards,

Shyam G

Reply | Reply with quote

raphael chancey

Replied On November 14, 2019 05:02 PM UTC

Ok.. I see.. so rather than diagram.add and then adding to the object array this is a nice helper.. thank you.

Well, the issue now is it is adding a new layer each time.. which makes sense since the function is called 'addLayer'

I am trying to add nodes to an existing layer.. and I was using layer.objects.push()..

what is the correct way to add nodes to an 'existing' layer at runtime?

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 15, 2019 12:44 AM UTC

Hi Raphael,

We should use addLayer method to add a node into an existing layer at runtime. In the previous update, we have shared a code example in which we have added new node into an existing layer “layer1” at runtime.

Regards,

Shyam G

Reply | Reply with quote

raphael chancey

Replied On November 15, 2019 01:16 AM UTC

I understand.. for some reason it kept adding a new layer each time.. I ended up with 10k layers :-(

I have removed layers for now.. maybe later I can come back to it

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On November 15, 2019 06:30 AM UTC

Hi Raphael,

Could you please share us more details such as exact scenario of an issue or modify the below sample.

sample:https://stackblitz.com/edit/react-3akpcb-uj83bw?file=index.js

Regards,

Shyam G

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
149059	Nov 12,2019 11:31 PM UTC	Nov 15,2019 06:30 AM UTC	React - EJ 2	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US