How to customizing group shape?

Question

HelloYour Guys.I have a question.I want to customizing group shape in diagram.I tried...But I couldn't it...I just make diagram like this picture.and,I want to customizing like this picture.could your guys help me??I prefer to change shape with html type.I also append my source code.Regards,Attachment: diagram_6ab22770.zip

Shyam G · Answer

Hi Acryl, 
 
We have created a sample in which we have created a group node with your SVG content. Please refer to a sample below. Also, we could not able to view your expected requirement in your screenshot. 
 
Sample: https://stackblitz.com/edit/ksxh9v-bjfzw3?file=index.ts 
 
Help documentation: 
Native shape: https://ej2.syncfusion.com/documentation/diagram/shapes/#native 
Group node: https://ej2.syncfusion.com/documentation/diagram/group/ 
 
Regards, 
Shyam G

Acryl · Answer

thank you for your reply.But I don't want it.I have four node like this pictureI want to push node in blue node like this.So I tried...But Couldn't push node on blue node.I mean, I couldn't push node and The child nodes did not move together when the blue nodes were moved.(Like SubPocess node of BPMN )(https://ej2.syncfusion.com/demos/#/material/diagram/bpmn-editor.html)What I want is three things bellow,1. I'd like to put a regular node inside a blue node.2. The child node move together when the blue nodes were moved.3. The child node should be not resized when the blue nodes were resized.I'd appreciate your help.Thank you

Shyam G · Answer

Hi Acryl, 
 




Query 

Response 


 I'd like to put a regular node inside a blue node. 

We have created a sample in which we have put a regular node inside a blue node as a group node. Since it is an HTML node, the connectors will stay behind the blue node. So, I have changed the blue node as a transparent node. please refer to a sample below. 


The child node move together when the blue nodes were moved. 

Yes, when you move the blue node, the child nodes will move together. 


The child node should be not resized when the blue nodes were resized.  

In a group node, the first click will select a group and the second click will select a child node. So, you need to click twice on a blue node to achieve your requirement. 
 
 
Sample: https://stackblitz.com/edit/ksxh9v-jbof9s?file=index.ts 
 
Regards, 
Shyam G

Query	Response
I'd like to put a regular node inside a blue node.	We have created a sample in which we have put a regular node inside a blue node as a group node. Since it is an HTML node, the connectors will stay behind the blue node. So, I have changed the blue node as a transparent node. please refer to a sample below.
The child node move together when the blue nodes were moved.	Yes, when you move the blue node, the child nodes will move together.
The child node should be not resized when the blue nodes were resized.	In a group node, the first click will select a group and the second click will select a child node. So, you need to click twice on a blue node to achieve your requirement.