How to render the Freehand connector in symbol palette?

In the symbol palette, you cannot pre-render a Freehand connector because its path data is dynamically created as the user draws. Since the connector’s path is generated in real-time, it cannot be predefined for display in the palette.

As an alternative, you can represent the Freehand connector using a Bezier connector in the palette. When the Bezier connector is dragged into the diagram, configure the system to switch to Freehand drawing mode, enabling users to create freeform paths.

Steps to Implement:

1. Use Bezier Connector to represent the Freehand connector

• Add a Bezier connector to the symbol palette to serve as a visual representation of the Freehand connector. This will give users a familiar entry point for initiating Freehand drawing.

2. Configure Drag and Drop Event

• In the DragDrop event, implement logic to switch the connector type to Freehand. Set the drawing tool to Freehand mode upon drop, allowing users to freely sketch paths in the diagram.

private void DragDropEvent(DropEventArgs args)
{
   if (args.Element is Connector connector && connector.Type == ConnectorSegmentType.Bezier)
   {
       args.Cancel = true;  // Prevent default behavior
       diagram.InteractionController = DiagramInteractions.DrawOnce;  // Set drawing mode
       diagram.DrawingObject = new Connector()
       {
           ID = "connector1",
           Type = ConnectorSegmentType.Freehand,  // Set the type to Freehand
       };
   }
} 

3. Activate Drawing Tool

• After dragging and dropping the Bezier connector, users need to click on the diagram area to start drawing. This will activate the Freehand drawing mode.

You can download the complete working sample from here.

Conclusion:

This approach provides a smooth user experience by visually representing the Freehand connector in the symbol palette while maintaining the flexibility of freehand drawing upon drag-and-drop.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!