Ghosting effect after setting node annotations template in realtime

Laurens Albers

Asked On September 23, 2019 12:49 PM UTC

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

Reply | Reply with quote

Laurens Albers

Replied On September 23, 2019 01:01 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 24, 2019 10:53 AM UTC

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

Reply | Reply with quote

Laurens Albers

Replied On September 25, 2019 03:03 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On September 30, 2019 12:36 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 21, 2019 09:43 AM UTC

Hi Laurens,

Sorry for the inconvenience.

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

Regards,

Shyam G

Reply | Reply with quote

Laurens Albers

Replied On October 21, 2019 12:46 PM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 22, 2019 05:51 AM UTC

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

Reply | Reply with quote

Shyam G [Syncfusion]

Replied On October 23, 2019 04:48 AM UTC

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147762	Sep 23,2019 12:49 PM UTC	Oct 23,2019 04:48 AM UTC	Angular - EJ 2	8

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US