How to group all shapes inside another shape?

[SaiSravya]

How do we group few shapes inside another shape. Please do refer the attachment.

When user drags 4 terminators to the diagram space he should be able to fit all those shapes inside a process as like in the screen shot

Same like grouping all the 4 terminators inside a process should be loaded in the diagram space

I need both the cases

Please do help me on this

Attachment: Group_in_a_shape_b3270ee2.rar

[Shyam G]

Hi SaiSravya, 

We have created a group node with 4 terminators inside a process shape. Please refer to a code example and sample below. 

Code example: 

  // define nodes 

  public nodes: NodeModel[] = [ 

    { 

      id: 'Process', width: 200, height:300, offsetX:200,offsetY:300, style: {fill:'grey',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Process' }, 

    }, 

    { 

      id: 'nodeA', width: 200, height:50, offsetX:200,offsetY:200, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 

      annotations: [{content: 'Will i be sent', style: {fontSize:14}}] 

    }, 

    { 

      id: 'nodeB', width: 200, height:50, offsetX:200,offsetY:270, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 

      annotations: [{content: 'What timezone', style: {fontSize:14}}] 

    }, 

    { 

      id: 'nodeC', width: 200, height:50, offsetX:200,offsetY:340, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 

      annotations: [{content: 'Can i register', style: {fontSize:14}}] 

    }, 

    { 

      id: 'nodeD', width: 200, height:50, offsetX:200,offsetY:410, style: {fill:'#80b3ff',strokeColor: '#80b3ff'}, shape: { type: 'Flow', shape: 'Terminator' }, 

      annotations: [{content: 'Is this a virtual', style: {fontSize:14}}] 

    }, 

    //create group node 

    { 

      id:'Group', children: ['Process', 'nodeA', 'nodeB', 'nodeC', 'nodeD'] 

    }  

  ]; 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/groupshape-1862832096 

Regards, 

Shyam G