Problem with diagram HTML type shapes disappearing when zoom is changed

[kim minseok]

Hi,
I have encountered an issue related to HTML type shapes.

I have attached two files.

One is a Syncfusion example, and the other is my case.

The Preview Sample of the HTML Node With Template example does not seem to be working correctly.

In the second video, the HTML type shape disappears when I move the diagram or change the zoom.

I am trying to display data related to nodes connected through connectors. It's okay if it's not an HTML shape. Please provide advice.
like this,

thanks.

Attachment: Captures_9ca4d456.zip

[Sivaranjith Jeyabalan]

Hi Kim,

We will validate and update you with more details on November 27, 2023.

Regards,

Sivaranjith

[Sivaranjith Jeyabalan]

Hi Kim,

Please find the response for the below queries,

Query	Response
The Preview Sample of the HTML Node with Template example does not seem to be working correctly.	We can reproduce the issue and confirmed this as a defect. We have logged a UG documentation task for this issue. We will fix this issue and update you once the documentation gets refreshed.
In the second video, the HTML type shape disappears when I move the diagram or change the zoom.   I am trying to display data related to nodes connected through connectors. It's okay if it's not an HTML shape. Please provide advice.	We haven't been able to reproduce the issue on our end. Could you provide more details on how you're dynamically adding the HTML node? This additional information will assist us in conducting a more thorough investigation. For reference, we've included a sample below where we added an HTML node in the 'elementDraw' completed state after drawing the connector. If you need further clarification, please don't hesitate to ask.   Sample: https://stackblitz.com/edit/sggg8u?file=src%2FApp.vue

Regards,

Sivaranjith

[kim minseok]

Hi,  Sivaranjith

It works fine in your sample, but it still doesn't work in my project.

The biggest difference seems to be between Vue 3 and Vue 2.

Even when I use mine, the shape doesn't disappear

Sample: https://stackblitz.com/edit/sggg8u-uk2anm?file=src%2FApp.vue

Especially when using templates for HTML shapes, if I don't separately specify content for the shape, the issue arises. 

I worked on it referencing the example below.

https://ej2.syncfusion.com/vue/demos/#/material3/diagram/html-node.html

thanks,

[Vivisa Ganesan]

Hi,

We will validate and update you with more details on September 1,2023

Regards,

Vivisa

[Vivisa Ganesan]

Hi,

We have created a sample project in Vue 2 to attempt to replicate the reported issue, but we haven't encountered the problem. To assist you better, we would appreciate it if you could provide us with a simplified version of your production code or a sample that reproduces the issue.

Additionally, we can share a simple sample from our side using Vue 2. This will allow us to compare the two implementations and identify any differences that might be causing the problem

Regards,

Vivisa

Attachment: VueTestingApp_58dd4170.zip

[kim minseok]

After removing virtualization, Everything is working correctly.

<ejs-diagram ... :constraints="diagramConstraints"></ejs-diagram>

Changed from:

diagramConstraints: DiagramConstraints.Default | DiagramConstraints.Virtualization

to:

diagramConstraints: DiagramConstraints.Default



After this change, it is working fine.

Additionally, I had applied alignment to annotations based on the example in the demo. However, when virtualization was applied, an error occurred when loading a saved diagram. 

1. apply align Bottom to annotation

2. just after loading the saved diagram.

After remove virtualization from diagram constraints , It is working correctly.

There seems to be an issue related to virtualization, but it's challenging to investigate further without more detailed examples. It would be helpful if there were more examples related to virtualization.

Thank you.

[Moulidharan Gopalakrishnan]

Hi,

Query	Response
diagram HTML type shapes disappearing when zoom is changed	We have checked the HTML template sample by enabling virtualization. We could not able to replicate the issue at our end. Could you please modify the below sample to replicate the issue at our end.
Annotation Alignment does not updated correctly on save and loading  diagram with virtualization constraints enabled	We can reproduce the issue, We will validate and update you with more details on January 11, 2024.

Regards,

Moulidharan

Attachment: VueTestingApp_d79605f4.zip

[Moulidharan Gopalakrishnan]

Hi, 

 

Reported Issue : Annotation alignment not updated properly when virtualisation constraints enabled Scheduled

 

We can reproduce the issue and confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on February 6th 2024 weekly patch release. 

 

Feedback link: Annotation alignment not updated properly when virtualisation constraints enabled in Vue | Feedback Portal (syncfusion.com)

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

Regards,

Moulidharan

[Moulidharan Gopalakrishnan]

Hi ,

 

Reported issue: Annotation alignment not updated properly when virtualization constraints enabled Scheduled

 

We have fixed the reported issue and included it in our latest patch release which is rolled out successfully.

Please upgrade to the latest version (v24.2.4) packages of the diagram to resolve this issue.      

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

 

Regards,

Moulidharan