Editing userhandles positions.

[Robert Williamson]

Hi guys, 

I'm looking into editing the user handles a bit, what i'd like is to do is use my own positioning rather than the standard ones you have, is there anyway to override/edit these 

or what approach would you recommend to do this. An example of what i'd like is having 3 handles (top right, middle right, bottom right) but rather than the top and bottom being against their respective corners, i'd have them closer to the middle handle 

Thanks

Robert

[Robert Williamson]

Just to give a better picture, this is what our current silverlight project does for the handles. Management would want to try and get it as close to this before they will decide wether we want to use syncfusion for our new project

[Shyam G]

Hi Robert, 

 

Currently we don’t have support to adjust the position for the user handle. We have logged “Need to provide support to port label behavior for the user handles” as a feature. Also we don’t have any immediate plan to implement this feature. However as a workaround, you can use selectionChange event in which you can access the user handle DOM element to adjust the position. Please refer to the code example. 

 

Code example: 

 

//define selectionchange event 

<ej-diagram id="diagramCore" (selectionChange)="selectionchange($event)"> 

                </ej-diagram> 

 

 selectionchange(args) {         

        if (args.state === "changed") { 

                //position the circle element 

              $("#settings_shape").attr("cx", "250") 

             $("#settings_shape").attr("cy","250") 

      //position the icon element 

             $("#settings_icon").attr("transform","translate(245,245)") 

        } 

    } 

 

Note: settings is an user handle name. 

 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam

Thanks, for this, we've used this approach and it's working except for if we move a node in a swim lane, 

So if we click a node and move a node in a normal diagram the userhandles are displayed in our custom positions. If we click a node in a swimlane it will use the custom positions. if you move a node it will go back to the default positions on release. Any ideas on what could be happening here? 

Thanks

Robert

[Shyam G]

Hi Robert, 

 

When we drag the node, the selectionChange will not be fired. So instead of selectionChange event, please use window mouseup event in which you can position the user handles. Please refer to the code example below. 

 

Code example: 

//define window mouseup event  

<ej-diagram id="diagramCore" (window:mouseup)="mouseUp($event)">  

                </ej-diagram>  

 

    mouseUp(e) {          

        var diagram = $("#diagramCore").ejDiagram("instance"); 

        //get the slected node 

        var node = diagram.model.selectedItems.children[0]; 

        if (node) { 

            var userhandles = diagram.model.selectedItems.userHandles; 

            if (userhandles.length > 0) { 

                for (var i = 0; i < userhandles.length; i++) { 

                    if ($("#" + userhandles[i].name + "_shape").length > 0) { 

                        //you can do your logic to position the userhandle                          

                    } 

                } 

            } 

        } 

    } 

 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam, 

Thanks, I thought it would have been as it seems to be running on the moving of the node in the diagram.

After doing the proposed i'm getting the wanted result

Thanks

Robert

[Shyam G]

Hi Robert, 

We are happy to hear that your problem is resolved. 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[Robert Williamson]

Hi Shyam, 

Just another quick one around the Phase section on the swimlane, is there anyway to remove this or alter the text without using unsupported means? 

Thanks

Robert

[Kameshwaran R]

Hi Robert, 

Please add the following code snippet on SelectionChange event to achieve your requirement. 

selectionChange: function (args) { 

    if (args.selectedItems[0]) { 

        var diagram = $("#diagram").ejDiagram("instance"); 

        var handles = diagram.model.selectedItems.userHandles; 

        for (var i = 0; i < handles.length; i++) { 

            if (args.selectedItems[0].isPhase) 

                handles[i].visible = false; 

            else handles[i].visible = true; 

        } 

    } 

} 

Regards, 

Kameshwaran R.