How to add the group which includes connector into symbol palette?

[Thin Sapal Yu]

Hello

May I know how to add the group which includes connector into symbol palette?

The detail conditions are as follows.

[Target group item]

Group is composed of two shapes and a connector.

[Code]

I expect to group item is registered in parts of symbol palette.

[Result]

highlighted code cannot work properly.

[Notes]

I can add group which is composed of only shapes. I'm not sure how to handle connectors.

[Aravind Ravi]

Hi Thin, 

Currently we don’t have Support to add group node with two child connected to the connector in palette in our diagram control. We have logged “Support to add group node with two child connected to the connector in palette” as a feature. We does not have any immediate plans to start this feature. We will implement this feature in any one of our upcoming releases.   

You can track the feature status from the below link

Link:  https://www.syncfusion.com/feedback/15453/support-to-add-group-node-with-two-child-connected-to-the-connector-in-palette

Regards,  

Aravind Ravi

[Thin Sapal Yu]

Dear Aravind

Thank you for the information.

Can I ask one more thing about group item?

Could you tell me how to implement function like copy&paste?

That means store selected items or group temporarily and add them into diagram.

I'd like to know whether we can achieve a requirement as follows.

[Requirement]

1. We can register selected items which maybe include group in diagram as reusable parts.
2. We can add the reusable parts into diagram.
3. We can update properties like addinfo of reusable parts and can reflect that change to the parts which has already existed in diagram.

[Aravind Ravi]

Hi Thin,

Please find the response for queries in the below table

We can register selected items which maybe include group in diagram as reusable parts.	By using the diagram copy public API method we can able to copy the selected items in the diagram.  Please refer below code snippet for how to copy the objects   diagramInstance.copy();
We can add the reusable parts into diagram.	The diagram paste method is used to add the copied parts in the diagram. After copied the group, you can paste that group into diagram. Please refer below code snippet   diagramInstance.paste();
We can update properties like addinfo of reusable parts and can reflect that change to the parts which has already existed in diagram.	The addInfo property of node is used to store the additional information of nodes. In that addInfo property you can set addInfo as group for group nodes.  When you copy and paste the group node, the addInfo of group is automatically set to the newly pasted node. When you want to update properties for group nodes means then iterate all the nodes which has addInfo as group and update their properties. So changes get reflected to all group nodes. Please refer to below code snippet and sample   function Change() {   for (var i = 0; i < diagramInstance.nodes.length; i++) {     if (diagramInstance.nodes[i].addInfo === 'group') {       diagramInstance.nodes[i].style.fill = 'red';       diagramInstance.dataBind();     }   } }   Sample: https://stackblitz.com/edit/react-tova4f?file=index.js

Regards

Aravind Ravi

[Thin Sapal Yu]

Dear Aravind

Thank you for the information.

I have another question.

Is the scenario below possible? Copy and Paste method is not working after refresh drawing.

1.Select nodes and connectors in diagram and store them as a reusable part.

2.Reflesh diagram, it means there is no selected items at step 1.

3.Add reusable parts in refreshed diagram.

[Shyam G]

Hi Thin,

When you copy a object and it should be pasted before refreshing the diagram. You can’t paste after refreshing the diagram. It is a default behavior of our diagram control. Please elaborate your requirement why do you need to paste the diagram after refreshing the diagram. So that we can validate and provide you a solution for it.

Regards,

Shyam G

[Thin Sapal Yu]

Hi Sham

Thank you for the information.

My requirements are as follows. Can you validate and provide a solution?

[Requirements]

User can register and reuse the group they created. 

That group can have shapes and connectors with custom properties as addinfo.

[Expected behavior]

1. User creates components of group like shape and connectors in a diagram.

2. User registers that group as reusable parts. And user can open and edit reusable parts in another window.

3. User open another diagram and select and add the group registered as reusable parts at step2. And save it and close.

4. User can update reusable parts (e.g. change annotation value) respectively in diagram for reusable parts and reflect it to group that is added into a diagram at step3.

[Aravind Ravi]

Hi Thin,

In the diagram we have support for the save the diagram and load that diagram in another diagram. In the diagram you can create a group node and add custom properties to the node. By using the saveDiagram method we can able to save the diagram. So save the diagram which has group as a JSON. Open new diagram and load the saved JSON through loadDiagram method. After load the diagram you can able to get the group node using the addInfo property and change its style. For more information about how to save the diagram, please refer to the below UG Link

UG Link: https://ej2.syncfusion.com/react/documentation/diagram/serialization/

We have created a sample to save and load the diagram as JSON. Please find the sample in below link

Sample: https://ej2.syncfusion.com/react/demos/#/bootstrap5/diagram/serialization

Regards

Aravind Ravi

[Thin Sapal Yu]

Hi Aravind

Thank you for the information.

saveDiagram and loadDiagram are targeting the whole of diagram, right?

May I know whether I can achieve below?

1. Save part of diagram.
2. Load saved part without clearing existing diagram.

[Aravind Ravi]

Hi Thin,

In the diagram we have support for serializing the full part of the diagram only, we cannot able to save separate parts of the diagram. Also, when we load the diagram using loadDiagram means we have cleared the existing diagram and loaded the new diagram. We cannot able to load the JSON in the existing diagram. This is the default behavior of diagram control. If you want to save separate parts means then taken the group nodes as JSON and save them in local storage or DB. In the new diagram, you can take that group nodes JSON from local storage and add the nodes and connectors manually.

Regards

Aravind Ravi

[Thin Sapal Yu]

Hi Aravind

Thank you for the information.

If possible, can you share the simple example?

[Aravind Ravi]

Hi Thin,

We have created a sample to save the group nodes as JSON data. By using the diagram selectedItems you can able to get the selected group node. Create an empty array JSON object and iterate the nodes from the selectedItems and get the node id , children through node. After push the group node to JSON object, iterate the group node’s children and get the node id, annotations, style, offset, height, width properties to node. For every node push the created object to the json object. At last you can store the JSON object in the data base and later you can get the JSON from db and add it in the diagram through add public API method. Please refer the below code example and sample below

function download() {

  var json = [];

  var data;

  for (var i = 0; i < diagramInstance.selectedItems.nodes.length; i++) {

    var node = diagramInstance.selectedItems.nodes[i];

    if (node.children && node.children.length > 0) {

      for (var j = 0; j < node.children.length; j++) {

        var childNode = diagramInstance.getObject(node.children[j]);

        {

          data = {

            id: childNode.id,

            annotations: [{ content: childNode.annotations[0].content }],

            style: { fill: childNode.style.fill },

            offsetX: childNode.offsetX,

            offsetY: childNode.offsetY,

            width: childNode.width,

            height: childNode.height,

          };

          json.push(data);

        }

      }

      data = { id: node.id, children: node.children };

      json.push(data);

    }

  }

  console.log(json);

}

Sample: https://stackblitz.com/edit/react-y6hs2c?file=index.js

Regards 

Aravind Ravi