Ghosting effect after setting node annotations template in realtime

[Laurens Albers]

Hi,

I have a similar issue like my older issue https://www.syncfusion.com/forums/144538/node-with-handlers-creates-ghosting-effect-when-trying-to-drop,

but this time it's the annotation template within a node that's creating a ghosting trail effect. I have added a zip with a gif showing the issue.

Each of my nodes contains multiple annotations for different possible scenario's, which can all be active at the same time.

And the little squares hovering on top of the node(see gif for context) are set when i am manually checking the (backend)data to see if the flow is correct. After being set and the dragging happens the template creates a trail of of the template (ghosting effect). Cleaning the diagram(remove all nodes, connectors etc) does not remove the trail of squares. Only after refreshing the page, which you definitely dont want. The browser returns no issues during or after the issue.

version used:

"@syncfusion/ej2-angular-diagrams": "~17.2.49",

Here is a simple used example

node.constraints = NodeConstraints.Default | NodeConstraints.Tooltip;

node.tooltip.content = 'Status 0 : Flow issue!';

node.annotations[0]content// "name"

node.annotations[1]content// 'description' 

node.annotations[2].template// "progressbar, template"

//is a data uri

node.annotations[3].template = '<img style="width:18px; height:18px; margin-left:40px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIRSURBVGhD7Zm9LwRBHIYv/BH4K4ROpRKZu0hEcmg0KiUSUUp0t4NQSCTiuxGd2veuz6BAIxGOCEKDim7su0bC7B6z48zcybzJ02wuv3mfndnmJmFjY2Pzv7KwkC6lbqqVemSOumRJJ45HZjObpKWP9ZXwOmoZ2qivoG5yn3pJZhay56wly3mteMFO+G9kN3qwAVyyrbQz78cpYqBBcMx4PfkE30TEMJPgm+H15ONv5ao4aP64l7nZKS1gLXF9dOL15OO4SU8ctJGdZM+v91rAWuL66MTryceK5AkrIsaKxGR8uZ/NrGdCz4tKBBJpWhkgyhSNyGeJKJmiEImSAHSxkz293AW/0S5ydOWxm6ez0PNcfCfxyCWAVpHDyzXWNlLDuqebpGRkJYA2kcPsaiDxUeYnmTgSQIsIznHXZGOoVC6ZuBJA245cPByzjrG6UDlRRkUCaBMBP8moSgCtIiCXTPtobegZoBISQLsIyCUjQiUlgBERcP5w9K0MjSEBjImAk+st1jpQFZLomUnHkgBGRcDBxcoXmc6JxtgSwLgIgEzLYLWyBCgIEXB6u68sAQpG5LdYETFWJE/kTeT//GXqkdnQIMMo/oldeNcKjpdK83ryeb9yI9tRA42getGD4OrN/8B2IgdrxD9SW8M7DWW8llrwFvxhzY5Lpv23Enlp+VcEa/pr//oy1MbGxqbAkki8Ae7NAC8jWvHeAAAAAElFTkSuQmCC">';

Attachment: bugghosting_5c294b1f.zip

[Laurens Albers]

Additional issue with template: On your own website the node annotation template example is showing a glitch/bug when dragging. the template shift sometimes.(see zip containing a gif for example) or check the following url of your own website: https://ej2.syncfusion.com/angular/documentation/diagram/labels/#template-support-for-annotation

This happens in my code aswell, the shifting of the template, it's quite annoying.

greets,

Laurens

Attachment: bug_template_14b95003.zip

[Shyam G]

Hi Laurens, 

Query	Response
I have a similar issue like my older issue https://www.syncfusion.com/forums/144538/node-with-handlers-creates-ghosting-effect-when-trying-to-drop,  but this time it's the annotation template within a node that's creating a ghosting trail effect. I have added a zip with a gif showing the issue.	We have applied your code example in our sample and it is working fine at our end. We are unable to replicate an issue at our end. Could you please share us more details such as modify the below sample.  Sample: https://stackblitz.com/edit/angular-nxmvpt-avg3fk?file=app.component.html
Additional issue with template: On your own website the node annotation template example is showing a glitch/bug when dragging. the template shift sometimes.(see zip containing a gif for example) or check the following url of your own website: https://ej2.syncfusion.com/angular/documentation/diagram/labels/#template-support-for-annotation    This happens in my code aswell, the shifting of the template, it's quite annoying.	Please set width and height value for a annotation object to resolve your reported issue. Please refer to a code example below.  Code example:  public nodes: NodeModel[] = [           {              id: 'node1', offsetX: 150, offsetY: 150, width:100, height:100,                   annotations: [{ id:"label1", width:100,height:100, template:'<div><input type="button" value="Submit"></div>' }],           },  ]

Regards, 

Shyam G 

[Laurens Albers]

Hi,

I have updated the stackblitz and added a gif(in zip) as an demo example.

https://stackblitz.com/edit/angular-nxmvpt-u3kxp7?file=app.component.ts

Upon initilization the nodes contain an empty("") template(which I do want), upon calling a function(or button in the stackblitz) the template is set/changes.

After the template has been set/changed and the user drags the node, the issue is created(a trail of templates). The bug is random, for example: When i have 20 nodes on display probably half have this issue, and it's not always the same nodes after refreshing the page.

I also discovered that this happens with the connectors when updating, or changing the template contained  in the annotation.

greetings,

Laurens

Attachment: bug_templates_node_f8b3411d.zip

[Shyam G]

Hi Laurens, 

 

Reported Issue : Template annotation drawn numerous times during runtime changes 

 

We have confirmed this as a defect. We have logged a defect report for this issue. We will fix this issue and provide a patch on 21^st  October, 2019. 

 

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

 

Feedback Link:   https://www.syncfusion.com/feedback/9191/template-annotation-drawn-numerous-times-during-runtime-changes 

 

Regards, 

Shyam G 

[Shyam G]

Hi Laurens, 

  

Sorry for the inconvenience. 

  

The reported issue will be available in our weekly patch release 23rd October, 2019. 

  

Regards, 

Shyam G 

[Laurens Albers]

Hi, 

Thank you for the update!

1. I discovered that the main issue has been fixed in release https://ej2.syncfusion.com/angular/documentation/release-notes/17.3.17/ (15th of october), 

 #F147762 - The issue “Template annotation drawn numerous times during runtime changes” has been fixed.  ???????HUH???????

Updating the stackblitz does not fix the issue though. https://stackblitz.com/edit/angular-nxmvpt-u3kxp7?file=app.component.ts

Is there anything different upcoming week?

2. Has the other bug where the connector is showing the same issue aswell been adressed? Since it's also duplicating templates when dragging after updating in realtime.

greetings,

Laurens

[Shyam G]

Hi Laurens, 

Sorry for the inconvenience. 

We have fixed the issue but missed to include it in the release 17.3.17. However we have included the fix and will be available in our weekly patch release 23^rd October, 2019. We have addressed the issue for connectors. 

Regards, 

Shyam G 

[Shyam G]

Hi Laurens,     

   

Reported Issue : Template annotation drawn numerous times during runtime changes. 

   

We are glad to announce that our patch release (v17.3.19) is rolled out successfully and In that release, we have added the fix for reported issue. 

      

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

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

 

here is your modified sample  

sample: https://stackblitz.com/edit/angular-nxmvpt-wasucd?file=app.component.ts 

   

Regards,   

Shyam G