We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Ghosting effect after setting node annotations template in realtime

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
loading
Tags: Diagram
Laurens Albers
Asked On September 23, 2019 12:49 PM UTC


Hi,

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
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

Shyam G [Syncfusion]
Replied On September 24, 2019 10:53 AM UTC

Hi Laurens, 

Query 
Response 
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. 


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
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

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 21st  October, 2019. 
 
Now, you can track the status of your request through below feedback link. 
 
 
Regards, 
Shyam G 


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 


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

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 23rd October, 2019. We have addressed the issue for connectors. 

Regards, 
Shyam G 


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.      
 
here is your modified sample  
   
Regards,   
Shyam G  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon