Organizational diagram demo resize weirdness

[Wil van Antwerpen]

Hi,

When using the demo from the organization demo like here: https://ej2.syncfusion.com/demos/#/material3/diagram/organization-model.html  and change it a little bit to allow the user to select a node, it behaves very weird when resizing that node.
Let me explain, the stackblitz with the changed code is here:
https://stackblitz.com/edit/ypbukd?file=index.ts

If you then select the top node "Board" and resize that node a little bit to the right, the node itself moves to the left, trying to correct that by resizing to the left makes it worse. In the meantime the node also gets taller.
It's very weird.

What makes it weirder is that this all works as expected in teh zooming & panning demo (see https://ej2.syncfusion.com/demos/#/material3/diagram/zoom-and-pan.html  )

But I can't find out what the difference is between the two.
Can someone at syncfusion enlight me please what is happening here?

Thanks!
--
Wil

[Moulidharan Gopalakrishnan]

Hi,

We can replicate the reported behavior where the node moves in the opposite direction of resizing and increases in size. We will validate this scenario and update you at the earliest.

Regards,
Moulidharan

[Wil van Antwerpen]

Hello Moulidharan,

Thanks for confirming that you can reproduce the issue. Always good to know.
Hopefully there's an easy solution for this.

Thanks!

--
Wil

[Moulidharan Gopalakrishnan]

Hi,

Thanks for the update. As mentioned earlier, we will validate this case and update you at the earliest.

Regards,
Moulidharan

[Unknown]

Hi,
 Copy

 

We recommend solving this issue by using alternative shapes instead of a text shape node. However, if your requirements specifically involve using a text shape node, please let us know, and we can assist accordingly.

Code Snippet

doBinding: (nodeModel: NodeModel, data: object) => {
        nodeModel.shape = {
            type: 'Basic',
            margin: { left: 10, right: 10, top: 10, bottom: 10 }
        };
        nodeModel.annotations = [{}];
        nodeModel.annotations[0].content = (data as EmployeeInfo).Role;
 }

 Copy

For further details, please refer to the attached sample:

 

Modified Sample: https://stackblitz.com/edit/ypbukd-esgvgp?file=index.ts

 

Regards,

Pranoove

[Wil van Antwerpen]

Hello Pranoove,

Strangely enough colors and sizes are bit different when using this solution, but that can be adjusted.
Thanks, this is a suitable workaround.

--
Wil

[Preethi Rajakandham]

Hi Wil van Antwerpen,

You're welcome. We will proceed with marking this thread as solved. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,
Preethi R