Adding nodes programmatically using layers

[raphael chancey]

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/

[Shyam G]

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 

[raphael chancey]

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); 

    }

[Shyam G]

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 

[raphael chancey]

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?

[Shyam G]

 

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 

[raphael chancey]

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 

[Shyam G]

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