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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Editing userhandles positions.

Thread ID:

Created:

Updated:

Platform:

Replies:

130997 Jun 15,2017 09:17 AM UTC Jun 26,2017 05:25 AM UTC Angular 8
loading
Tags: ejDiagram
Robert Williamson
Asked On June 15, 2017 09:17 AM UTC

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
Replied On June 15, 2017 09:33 AM UTC


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 [Syncfusion]
Replied On June 16, 2017 11:38 AM UTC

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
Replied On June 21, 2017 02:14 PM UTC

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 [Syncfusion]
Replied On June 22, 2017 12:34 PM UTC

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
Replied On June 22, 2017 02:58 PM UTC

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 [Syncfusion]
Replied On June 23, 2017 03:57 AM UTC

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
Replied On June 23, 2017 09:38 AM UTC

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 [Syncfusion]
Replied On June 26, 2017 05:25 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;