How do I change the Diagram cursor?

[Dominic]

I am usng Diagram component for display only. I am displaying a genealogy tree. The user has no ability to manipulate the diagram. How do I change the cursor from grabbing hand to a simple arrow pointer?

[Sumathi Uthayakumar]

Hi Dominic,

We suspect that you want to enable the pan tool in your application. You can change the interaction controller to ZoomPan to enable the pan tool in your application. We have shared the user guide link for your reference.

UG link: https://blazor.syncfusion.com/documentation/diagram/tools#tool-selection

Regards,

Sumathi U.

[Dominic]

No, panning is not a problem. It working just fine. I Use diagram to display a genealogy tree. The user can click on a node and see that person's details. I just want an arrow NOT a hand? 

[Sumathi Uthayakumar]

You can enable multiple tools in your application. You can achieve your requirements at the application level by enabling the single select and zoom pan tool in your application. We have shared a code snippet for your reference. Additionally, you can find more details regarding it in the user guide below.

UG link:  https://blazor.syncfusion.com/documentation/diagram/tools#tool-selection

Code Snippet:

<SfDiagramComponent Connectors="@connectors" @ref="diagram" Height="600px" InteractionController="@tool" />

 

@code

{

    //Reference to diagram.

    SfDiagramComponent diagram;

    //Enable the multiple tools.

    public DiagramInteractions tool = DiagramInteractions.SingleSelect | DiagramInteractions.ZoomPan;

    //Defines diagram's connectors collection.

    public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

}

 

If we have misunderstood your requirements, please explain them in a detailed with images/video illustration. These details will help us provide a better solution for you.

[Dominic]

I display no tools, so I am not sure this approach wouold work. However, I found an answer. I added a function to the GetCustomCursor attribute of the <SfDiagramComponent>. 

            GetCustomCursor="@cursor"

The function i the code behind is as follows:

        public string? cursor(DiagramElementAction action, bool active, string handle)

        {

            return "arrow";

        }

What was difficult is that the API documentation did not provide the valid options to return. Through trial and error I used the word "arrow" and it worked.

What are the options to this event?

 

[Kiruthika Manikandan]

Hi,

The GetCustomCursor function is used to allow customization of the cursor displayed when interacting with the diagram. Using this method, you can use the specified cursor to perform any action. We handle default cursor enabling functionality. For example, when you perform a pan action, the hand cursor is enabled, and for selection, the pointer cursor is enabled. If you want to change the cursor to a crosshair during panning, you can change the cursor based on the DiagramElementAction value. We have shared a simple code snippet for your reference.

Code snippet:

 

<SfDiagramComponent   GetCustomCursor="@cursor">    
  </SfDiagramComponent>

 

public string cursor(DiagramElementAction action, bool active,  string handle)
     {
       string cursors = null;
        if  (action == DiagramElementAction.Pan)
        {
            cursors =  "crosshair";
        }
        return cursors;
     }

You can use the cursors mentioned in the below link to customized cursors:

https://www.w3schools.com/cssref/pr_class_cursor.php

 

Note:

According to your code snippet, you are returning an arrow cursor in the GetCustomCursor method. Therefore, only the arrow cursor is enabled when performing any interaction in the diagram. If this is acceptable, there are no issues. Otherwise, if you need to set a different cursor during interactions, please provide the current cursor in your diagram and specify which cursor you need to change dynamically during interactions. With this information, we will be able to provide a proper solution for better performance.

Thanks,

Kiruthika M