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. Image for the cookie policy date

Ghosting effect after setting node annotations template in realtime


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

8 Replies

LA Laurens Albers 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


SG Shyam G Syncfusion Team 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 



LA Laurens Albers 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


SG Shyam G Syncfusion Team 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 



SG Shyam G Syncfusion Team 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 



LA Laurens Albers 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


SG Shyam G Syncfusion Team 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 



SG Shyam G Syncfusion Team 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  


Loader.
Live Chat Icon For mobile
Up arrow icon