fixedUserHandle inconsistent behaviour

[Kabe]

Hi there

I'm changing the fixedUserHandle pathData at runtime in javascript.

It was working fine, but if I add a node also at runtime it no longer works.

This works:

        let uh = node.fixedUserHandles[0];
        uh.pathData = "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11z";

This doesn't work (the new node appears but the userhandle icon no longer changes):

        let uh = node.fixedUserHandles[0];
        uh.pathData = "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11z";

        var diagram = document.getElementById("diagram").ej2_instances[0];

        var mynode = {
            id: 'node1', offsetX: 100, offsetY: 100, height: 50, width: 100
        };
        diagram.add(mynode);

I'm doing this in the fixedUserHandleClick event.

Any idea why adding the node would prevent the fixedUserHandle manipulation from working?

[Sivaranjith Jeyabalan]

Hi Kabe,

Please use diagram dataBind method to reflect the changes immediately in the diagram canvas. Please find the modified code example below.

Code Example:

 function userHandleClick(args) {

       

        var uh = node.fixedUserHandles[0];

        uh.pathData = "M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm4 9h8a.5.5 0 0 0 .374-.832l-4-4.5a.5.5 0 0 0-.748 0l-4 4.5A.5.5 0 0 0 4 11z";

        diagram.dataBind();

        var mynode = {

            id: 'newNode1', offsetX: 100, offsetY: 100, height: 50, width: 100

        };

        diagram.add(mynode);

    }

 

Regards,

Sivaranjith

[Kabe]

Hello and thanks! It works!

I did try dataBind as the last statement (after diagram.add(mynode); ) and it did not work there. I'm unclear of when to insert dataBind() and I can't find it in the documentation. Can you shed some light on this?

Thanks!

[Sivaranjith Jeyabalan]

Hi Kabe,

We are happy to hear that your problem is resolved. Please find the API documentation link below.

https://ej2.syncfusion.com/documentation/api/diagram/#databind

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sivaranjith

[Kabe]

Thanks for that, although the documentation is maybe a little light on details. 

As mentioned above in my example, dataBind() did not work when it was placed after diagram.add(mynode) ... so I'm a little unsure as to where/when to use it. I thought making it the last statement would be ideal.

[Sivaranjith Jeyabalan]

Hi Kabe,

If we change  node/connector/diagram property at runtime, we should call dataBind() to reflect the changes immediately in the diagram. But when we call any method, e.g., (diagram.saveDiagram()), there is no need to call dataBind().

Regards,

Sivaranjith