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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. UserHandles per Shape Type

UserHandles per Shape Type

Hi,

i'd like to have different UserHandles for each shape type to allow some automation.
Which means, in respect of the selected shape i'd like to offer some shortcuts (icon menu)
to create related other shapes and connectors.

With the given example of your documentation i found no option to control this:

Regards
Manuel

12 Replies
NG Naganathan Ganesh Babu Syncfusion Team February 6, 2020 08:56 AM UTC

Hi Manuel, 
We have created a sample with two userhandles (clone and delete handles) and shown the different userhandles for node and connector in the selectionChange event. Please refer to the below code example and sample. 
Code example: 
private void SelectionChange(IBlazorSelectionChangeEventArgs args) 
    { 
        if (args.State == EventState.Changed) 
        { 
            if (args.NewValue.Nodes.Count > 0) 
            { 
                // enable clone user handle for nodes... 
                SelectedModel.UserHandles[1].Visible = false; 
                SelectedModel.UserHandles[0].Visible = true; 
            } 
            else if (args.NewValue.Connectors.Count > 0) 
            { 
                // enable delete user handle for connectors... 
                SelectedModel.UserHandles[0].Visible = false; 
                SelectedModel.UserHandles[1].Visible = true; 
            } 
        } 
    } 
//To defining a userhandles... 
        DiagramUserHandle cloneHandle = new DiagramUserHandle() 
        { 
            Name = "clone", 
            PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", 
            Visible = true, 
            Offset = 0, 
            Side = Side.Bottom, 
            Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, 
        }; 
        DiagramUserHandle deleteHandle = new DiagramUserHandle() 
        { 
            Name = "delete", 
            PathData = "M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76 96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04 91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z", 
            Visible = true, 
            Offset = 0, 
            Side = Side.Bottom, 
            Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } 
        }; 
        SelectedModel = new Syncfusion.EJ2.Blazor.Diagrams.DiagramSelectedItems() 
        { 
            Constraints = SelectorConstraints.UserHandle, 
            UserHandles = new ObservableCollection<DiagramUserHandle>() { cloneHandle, deleteHandle } 
        }; 

Regards, 
Naganathan K G 


MA Manuel February 6, 2020 11:55 AM UTC

Hi,

thanks for your sample. I tried it and it works.
But when i use it on my project i'm getting an exception.

I also tried to update to the latest version 17.4.0.47
but here the DiagramEvents tag is gone and there is no
information about it on the release notes:









Stacktrace
   at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor, Boolean wrapExceptions)
   at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
   at System.Reflection.MethodBase.Invoke(Object obj, Object[] parameters)
   at Syncfusion.EJ2.Blazor.Diagrams.EjsDiagramBase.UpdateCollectionProperty[T,R](T obj, String propertyName, R propertyValue)
   at Syncfusion.EJ2.Blazor.Diagrams.EjsDiagramBase.UpdateProperty[T](String propertyName, T propertyValue)
   at Syncfusion.EJ2.Blazor.Diagrams.DiagramUserHandle.set_Visible(Boolean value)
   at SyncfusionDiagram.Pages.IndexBase.d__29.MoveNext() in C:\Projects\Prototyping\SyncfusionDiagram\SyncfusionDiagram\Pages\Index.razor.cs:line 55

MA Manuel February 7, 2020 10:48 AM UTC

I also noticed that when i'm adding multiple UserHandles only one icon is shown,
but i've expected to get an "icon bar" to choose from different options.

NG Naganathan Ganesh Babu Syncfusion Team February 7, 2020 12:12 PM UTC

Hi Manuel, 
  
 
I also tried to update to the latest version 17.4.0.47 
but here the DiagramEvents tag is gone and there is no
information about it on the release notes: 
 
The reported issue is a known issue and we have already fixed this issue. Please apply the Custom Nuget package in your application to resolve the issue. 
 
However, the fix will be included in our weekly nuget package release on 11th February, 2020. 
 
 
I also noticed that when i'm adding multiple UserHandles only one icon is shown, 
but i've expected to get an "icon bar" to choose from different options. 
 
I have modified the sample to use multiple user handle different position for selected node. We suggest you to use DiagramUserHandle’s “Side” and “Offset” property to customize the position of the userhandles. Please refer to the below code example and sample. 
 
Code example: 
 
DiagramUserHandle cloneHandle = new DiagramUserHandle() 
        { 
            Name = "clone", 
            PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", 
            Visible = true, 
            //Set offset to positioning the user handles 
            Offset = 1, 
            //To align right side of the user handle   
            Side = Side.Left, 
            Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }, 
        }; 
        DiagramUserHandle deleteHandle = new DiagramUserHandle() 
        { 
            Name = "delete", 
            PathData = "M 7.04 22.13 L 92.95 22.13 L 92.95 88.8 C 92.95 91.92 91.55 94.58 88.76 96.74 C 85.97 98.91 82.55 100 78.52 100 L 21.48 100 C 17.45 100 14.03 98.91 11.24 96.74 C 8.45 94.58 7.04 91.92 7.04 88.8 z M 32.22 0 L 67.78 0 L 75.17 5.47 L 100 5.47 L 100 16.67 L 0 16.67 L 0 5.47 L 24.83 5.47 z", 
            Visible = true, 
            //Set offset to positioning the user handles 
            Offset = 1, 
            //To align right side of the user handle   
            Side = Side.Right, 
            Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 } 
        }; 
 
 
 
  
Regards, 
 
Naganathan K G 


MA Manuel February 7, 2020 12:35 PM UTC

Thank you, i tried the offset value in the past, but i used to high values for it.
Now this seems to work, but there is an other problem coming up.
When i click on a user handle that overlays a connector,
the connector user handles gets activated automatically.

Before



After





NG Naganathan Ganesh Babu Syncfusion Team February 10, 2020 01:11 PM UTC

Hi Manuel, 

We are able to reproduce the reported issue at our end and we have logged this as an issue with “Connector has selected wrongly when clicking the userhandles of other node”. This issue for the fix will be included in our weekly release which will be available on 18th February 2020. 


Regards, 

Naganathan K G 


AR Aravind Ravi Syncfusion Team February 18, 2020 01:36 PM UTC

Hi Manuel, 
  

We are fixed the reported issue. Due to some technical reasons we are not able to include the fix in this week patch release. We have generated custom ej2.min.js file with this fix. However we will include this fix on the patch release which is scheduled on 25th  February 2020. 
  


Regards 
Aravind Ravi 


AR Aravind Ravi Syncfusion Team February 25, 2020 03:19 PM UTC

Hi Manuel,  
    
We have fixed the reported issue and included it in our patch release (17.4.51) which is rolled out successfully.   
   
Please upgrade to the latest version packages to resolve this issue.         
  
Regards,  
Aravind Ravi 
 


MA Manuel February 25, 2020 05:27 PM UTC

Thank you very much, the selection of the underlaying connectors is solved now.
But there is one more issue left. When i click on a connector that has UserHandles,
it is not possible to deactivate them. The connector stays selected and it is not possible
to select an other node.

GG Gowtham Gunashekar Syncfusion Team February 26, 2020 11:13 AM UTC

Hi Manuel, 
 
We couldn’t reproduce the issue exactly. please check the video from below link and let us know whether we tried to reproduce in the same way as you mentioned.  
   
Video Link:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/userhandle-1715009780 
 
   
If we misunderstood your requirement, please share us more details like sample demo or video demonstration of how to reproduce the issue. This will be helpful for us to serve you better. 
 
Regards, 
Gowtham G 


MA Manuel February 26, 2020 11:25 AM UTC

Hallo,

i created an incidents with an (internal) sample that explains the issues i'm dealing with:


AR Aravind Ravi Syncfusion Team February 27, 2020 12:28 PM UTC

Hi Manuel, 
 
Okay, please follow up in the incident for further updates. 
 
Regards 
Aravind Ravi 


Loader.
Up arrow icon