Many text nodes of diagramComponent are not rendering

[Mithun]

Hello Syncfusion Team,

I'm using the following version of DiagramComponent: "@syncfusion/ej2-angular-diagrams": "^17.3.34", 

I'm encountering an issue where many of my text nodes are not rendering at all when I reload the diagram component from JSON.

The original diagram actually looks like this (notice the many text nodes): https://i.imgur.com/kOD3MSC.png

I have prepared a stackblitz demo (notice that quite a few of the text nodes are not rendering even though they are actually present in the json): https://stackblitz.com/edit/diagram-textnode-not-rendering

Any help would be appreciated. 

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

By analyzing your JSON, the text node has a parentId value which means you have rendered it as a group node but the group node is not present in your JSON. So only the text node is not loaded in the diagram. We have removed the parentId value in your JSON to resolve your issue. Also, please share us more details such as how you have created a group node with text node and saved in the diagram with code example or modify the below sample. 

Sample: https://stackblitz.com/edit/diagram-textnode-not-rendering-41ba6y?file=src/app/diagramContent.ts 

  

Regards, 

Shyam G 

[Mithun]

Thanks Shyam, that explains it. 

Even I'm not sure how the grouped node got removed since our app's users can only perform the standard operations as allowed by the DiagramCompoment (group/ungroup, cut/copy/paste, undo/redo, format style/shape etc). 

I would have assumed that deleting a parent group node would have deleted the child nodes as well, right? 

Would be awesome if the DiagramComponent's loadDiagram() method validated the JSON and flagged issues during loading itself.

In any event, I'll add some additional logging in our app and will revert back if I can repro it manually. 

Thanks,

Mithun

update: I looked through our app's code. All the grouping/ungrouping is done solely via the diagramComponent's built-in context menu. We don't have any code of our own to group/ungroup nodes.

[Shyam G]

Hi Mithun, 

We have created a sample in which we have set a node parentId value as empty whenever the group node is not present in the JSON. Please refer to a code example and sample below. 

Code example: 

 checkParentNode(diagramContent) { 

    let JSONString = JSON.stringify(diagramContent); 

    //parse JSON string 

    let parseData = JSON.parse(JSONString); 

    //Iterate a nodes 

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

      //get a node 

      let node = parseData.nodes[i]; 

      //check parentid 

      if (node.parentId) { 

        let nodeData = this.diagramControl.getObject(node.parentId); 

        if (!nodeData) { 

          node.parentId = ''; 

        } 

      } 

    } 

    return parseData; 

  } 

Sample: https://stackblitz.com/edit/diagram-textnode-not-rendering-1rnjeg?file=src/app/app.component.ts 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

Managed to get a repro (although it is not 100% reproducible always). 

The issue happens when we try to change z-index of a grouped node (we encounter a DOMException and this might be messing up the node's parentId). 

Please see attached video recording (GIF file) + DOMException logs (from browser console). 

I used Syncfusion's showcase demo app to reproduce the issue.

Please let me know if any additional details are needed.

Thanks,

Mithun

 

Attachment: repro_367369b5.zip

[Shyam G]

Hi Mithun, 

 

We are able to replicate an issue at our end. We will validate and provide you with more details on 30^th December, 2019. 

 

Regards, 

Shyam G 

[Aravind Ravi]

Hi Mithun,  

  

Reported Issue : Exception occurs while change zindex for group node at run time  

  

We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and the patch will be available on 14^th January, 2020.  

  

Now, you can track the status of your request through below feedback link.   

   

Feedback Link: https://www.syncfusion.com/feedback/11016/exception-occurs-while-change-zindex-for-group-node-at-run-time  

  

Regards,  

Aravind Ravi 

[Shyam G]

Hi Mithun, 

 

Reported Issue : Exception occurs while change zindex for group node at run time. 

 

We have fixed the reported issue and included it in our patch release (v17.4.43) which is rolled out successfully.  

  

Please upgrade to the latest version packages to resolve this issue.        

https://www.npmjs.com/package/@syncfusion/ej2-diagrams     

 

 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

I'm still seeing the DOMExpcetion even after upgrading to latest 17.4.43. 

Repro steps:

1. Drag any two basic shape nodes onto diagram.

2. Group them together using context menu

3. Select group -> order -> Send to back

This exception will show up in the browser console. Please see attached log.

Thanks,

-Mithun

Attachment: localhost1579085050677_fe9b7b3d.zip

[Naganathan Ganesh Babu]

Hi Mithun, 

 

Online samples browsers and diagram builder will not refresh in the weekly patch release. We will refresh those samples and diagram builder in Main/SP release alone. So, we will refresh the samples in our 2019 volume 4 SP1 release and which will be available on end of January 2020.  

 

Regards, 

 

Naganathan K G 

 

[Aravind Ravi]

Hi Mithun, 

  

We are glad to announce that our Essential Studio Volume 4, 2019 service-pack-release(v17-4-0-46) is rolled out and is available for download under the following link. 

  

https://www.syncfusion.com/forums/151087/essential-studio-2019-volume-4-service-pack-release-v17-4-0-46-is-available-for-download 

  

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Regards, 

Aravind Ravi