1. Home
  2. Forum
  3. Vue
  4. User handles

User handles

Hello

I'm trying to attach custom user handles passing selectedItems property. 



Handles are presented: 


But after mounted passed, user handles are empty 

How can I apply them via HTML props way?

Other questions, which I couldn't find in documentation:
1) How can I set my custom icon for user handle?
2) How can I show user handle for specific nodes based on condition?
3) How can I attach my custom function with my specific logic after I clicked on userHandle?

Thanks


4 Replies 1 reply marked as answer
AR Aravind Ravi Syncfusion Team June 19, 2020 02:51 PM UTC

Hi Alex, 

We are validating your requirements and update you with more details on June 23rd 2020. 

Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team June 23, 2020 09:22 AM UTC

Hi Alex, 
 
Please find the response for queries in below table 
 
How can I set my custom icon for user handle? 
By using the user handle source property we can able to set icon or image for the user handle. Please refer below code example for how to set image in user handle 
 
{ 
    name: 'image', source: 'https://media.glassdoor.com/companyupdate/w300/263207/syncfusion-companyupdate-1570110021268.jpg', visible: true, backgroundColor: 'black', offset: 0, side: 'Top', margin: { top: 0, bottom: 0, left: 0, right: 0 } 
    ,pathColor: 'white' 
} , 
 
 
How can I show user handle for specific nodes based on condition? 
When you select a specific node selectionChange event gets triggered . In that event you can check node id and by using the userHandle visible property you can able to hide the user handle. Please refer below code example for how to hide user handle based on the node id. 
 
selectionChange: (args) => { 
          if(args.state=== 'Changed') { 
            if(args.newValue[0].id === 'Node3') { 
              diagram.selectedItems.userHandles[1].visible = false; 
              diagram.dataBind(); 
            } 
            else { 
              diagram.selectedItems.userHandles[1].visible = true; 
              diagram.dataBind(); 
            } 
          } 
      } 
 
 
How can I attach my custom function with my specific logic after I clicked on userHandle? 
When you click on a user handle getCustomTool call back method gets triggers. In that method you can check if the action is corresponding to user handle or not. If the action is user handle’s tool means then you can write your specific function. 
 
<ejs-diagram ref="diagramObj" 
      id="diagram" 
      :width="width" 
      :height="height" 
      :nodes="nodes" 
      :selectedItems='selectedItems' 
      :getCustomTool='getCustomTool' 
      :selectionChange = "selectionChange" 
    ></ejs-diagram> 
 
 
function getTool(action) { 
  let tool; 
  if (action === "clone") { 
    diagram.selectedItems.nodes[0].style.fill = 'red'; 
    diagram.dataBind(); 
  } else if (action === 'image') { 
    diagram.selectedItems.nodes[0].style.fill = 'blue'; 
    diagram.dataBind(); 
  } 
   
} 
 
 
We have attached a sample for your reference. Please find the sample in below link 
 
 
Regards 
Aravind Ravi 
 
 


Marked as answer
AB Alex B June 23, 2020 11:03 AM UTC

Thanks Avavind for example and explanation.

The problem I hit, that I use font icons Font Awesome 

And I need  to convert it to svg, then add locally to my project, and then pass it via source property.
Is it only way to add icon? The best one will be using css class.


AR Aravind Ravi Syncfusion Team June 24, 2020 04:23 PM UTC

Hi Alex, 
 
By using the user handle ‘content’ property we can able to set SVG content for the user handles. We does not have support to set the css in the user handle property. Please find the below code snippet for how to set SVG for the user handle 
 
{ 
            name: 'handle3', 
            content: '<g><path d="M90,43.841c0,24.213-19.779,43.841-44.182,43.841c-7.747,0-15.025-1.98-21.357-5.455L0,90l7.975-23.522' + 
                'c-4.023-6.606-6.34-14.354-6.34-22.637C1.635,19.628,21.416,0,45.818,0C70.223,0,90,19.628,90,43.841z M45.818,6.982' + 
                'c-20.484,0-37.146,16.535-37.146,36.859c0,8.065,2.629,15.534,7.076,21.61L11.107,79.14l14.275-4.537' + 
                'c5.865,3.851,12.891,6.097,20.437,6.097c20.481,0,37.146-16.533,37.146-36.857S66.301,6.982,45.818,6.982z' + 
                ' M68.129,53.938' + 
                'c-0.273-0.447-0.994-0.717-2.076-1.254c-1.084-0.537-6.41-3.138-7.4-3.495c-0.993-0.358-1.717-0.538-2.438,0.537' + 
                'c-0.721,1.076-2.797,3.495-3.43,4.212c-0.632,0.719-1.263,0.809-2.347,0.271c-1.082-0.537-4.571-1.673-8.708-5.333' + 
                'c-3.219-2.848-5.393-6.364-6.025-7.441c-0.631-1.075-0.066-1.656,0.475-2.191c0.488-0.482,1.084-1.255,1.625-1.882' + 
                'c0.543-0.628,0.723-1.075,1.082-1.793c0.363-0.717,0.182-1.344-0.09-1.883c-0.27-0.537-2.438-5.825-3.34-7.977' + 
                'c-0.902-2.15-1.803-1.792-2.436-1.792c-0.631,0-1.354-0.09-2.076-0.09c-0.722,0-1.896,0.269-2.889,1.344' + 
                'c-0.992,1.076-3.789,3.676-3.789,8.963c0,5.288,3.879,10.397,4.422,11.113c0.541,0.716,7.49,11.92,18.5,16.223' + 
                'C58.2,65.771,58.2,64.336,60.186,64.156c1.984-0.179,6.406-2.599,7.312-5.107' + 
                'C68.398,56.537,68.398,54.386,68.129,53.938z"></path></g>', 
            side: 'Top', horizontalAlignment: 'Center', verticalAlignment: 'Center', margin: { top: 0, bottom: 0, left: 0, right: 0 }, offset: 1, 
            pathColor: 'yellow' 
        } 
  
For respective SVG content user handle is rendered as below image. 
 
 
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon