annotation width is ignored when diagram loaded using .loadDiagram() method.

[Mithun]

Hello Syncfusion Team,

I'm using the latest version of diagram component in my app:"@syncfusion/ej2-angular-diagrams": "^17.3.34".

In the app: 

• The diagrams are saved as json using the .saveDiagram() method when user's session ends. 
• Similarly, when the user re-logs in, their diagrams are loaded from json using the .loadDiagram() method. 

I notice that the annotation width is ignored when reloading. I have a stackblitz repro for this issue: https://stackblitz.com/edit/annotation-pagerefresh-issue-2

• In the diagram json (diagramContentAsJson.ts file), there is a text annotation width: 300 and height: 40 on the BasicShapeNode. 
• However when the diagram is loaded from JSON, the annotation's width setting is completely ignored.
  

I did notice that if you select/click just the annotation (not the node) and press any of the arrow keys (up/down/right/left), then the annotation will revert back to its specified width. 

Please let me know if this is a bug in the component or whether I'm doing something wrong.

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

 

We will validate your issue and update you with more details on 20^th January, 2020. 

 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

Is there any way we can expedite this one particular issue (it's holding up a release delivery on our end). 

If possible, we'd like for this issue to be prioritized above the other ones we reported (safari black background while printing, z-index errors while grouping nodes etc)? 

Any quick-n-dirty hacks/workarounds are also fine in the meanwhile. 

Thanks,

-Mithun

[Shyam G]

Hi Mithun, 

Sorry for the incorrect update and please ignore it. 

We will validate youw issue and update you with more details on 17th January, 2020. 

Regards, 

Shyam G 

[Naganathan Ganesh Babu]

Hi Mithun, 

 

On further analyzed, you had assigned “textWrapping” property for that annotation as "WrapWithOverflow". If the textWrapping ptoperty is assigned as "WrapWithOverflow", the annotation width will be same as node’s width. So, only the annotation width is assigned as 100. If you need the annotation value to be assigned as 300, then please assign textWrapping property as "NoWrap" such that the annotation width will be assigned to 300 (i.e the width of the annotation). We had attached the modified sample link below for the further reference. 

 

Sample link: https://stackblitz.com/edit/annotation-pagerefresh-issue-2-7yh81x?file=src/app/diagramContentAsJson.ts  

 

Regards, 

 

Naganathan K G 

 

[Mithun]

Thanks Naganathan! 

This resolves my issue. Appreciate the help! 

BTW - I'm not specifying any value for 'textWrapping'. Syncfusion's DiagramComponent assigns 'WrapWithOverflow' as the default value.

I propose that Syncfusion change the default value to 'NoWrap' in the DiagramComponent. 

 

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

The default value of textWrapping should not be changed because it may affect our other customers. As mentioned earlier, please set textWrapping as NoWrap in your application to resolve your issue. 

Regards, 

Shyam G