Set node position and size programmatically

[Justus Pett]

Hello,

I am trying to figure out a way to set a node's position and size via code. I tried something like:

node.offsetX = newPosition.x;

node.offsetY = newPosition.y;

and

node.width = newSize.width;

node.height = newSize.height;

Unfortunately, the diagram is not updated accordingly. However, I didn't find any method in DiagramComponent or in the Node class, which would allow me to update these properties. The only way I was able to make it work somehow was by calling diagram.removeNode and diagram.addNode. Besides of being not a very nice solution it also came with problems with the current selection which was not updated correctly.

I am sure I just missed the correct methods or properties to call. Any help would be very much appreciated.

Thanks and best regards,

Justus

[Shyam G]

Hi Justus, 

 

We have created a sample to show how to programmatically render nodes and connectors in the diagram. We also showed how to change node properties during runtime by clicking the button. Please refer to a code example and sample below. 

 

Code example: 

 

App.component.html 

 

   <!-- define diagram --> 

                <ejs-diagram #diagram id="diagram" width="100%" height="700px" [nodes]="nodes" [connectors]="connectors"></ejs-diagram> 

 

App.component.ts 

 

//Initialize nodes collection 

 public nodes: NodeModel[] = [ 

   //create node 

   { 

     id: 'node',  

     //set node size 

     width:100,height:100, 

     //set node position 

     offsetX:200,offsetY:200, 

     //set node shape 

     shape: {type:'Basic', shape: 'Ellipse'}, 

     // set node annotations 

     annotations: [ 

       {content: "Ellipse"} 

     ] 

   }, 

    { 

     id: 'node1', width:100,height:100,offsetX:400,offsetY:200, 

      annotations: [ 

       {content: "Rectangle"} 

     ] 

   } 

 ] 

 

//initialize connectors collection 

 public connectors: ConnectorModel[] = [ 

   //create connector 

   { 

     id: 'connector',  

     //set source Node id 

     sourceID: 'node',  

     //set target Node id 

     targetID: 'node1' 

   } 

 ] 

 

 

Sample: https://stackblitz.com/edit/angular-j5rvvl-nhlcth?file=app.component.ts 

 

 

Regards, 

Shyam G 

[Justus Pett]

Hi Shyam,

thanks a lot for your help. The dataBind() method was what I was missing...

Best regards,

Justus

[Shyam G]

Hi Justus, 

Thanks for your update. 

Regards, 

Shyam G