Tools in Diagram Component
10 Oct 202521 minutes to read
How to Use Drawing Tools
Use drawing tool to draw any kind of Node or Connector during runtime by clicking and dragging on the diagram page.
How to Draw Shapes Using the Drawing Tool
To draw a Shape, activate the drawing tool with the InteractionController property and specify the shape with the DrawingObject property. The following code example illustrates how to draw a rectangle at runtime.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="addNode" OnClick="@AddNode" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px" />
@code
{
//Reference to diagram.
SfDiagramComponent diagram;
//Defines diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void AddNode()
{
//To draw an object once, activate draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the shape.
diagram.DrawingObject = new Node()
{
Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle },
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
};
}
}A complete working sample can be downloaded from GitHub
How to Draw a Connector Using the Drawing Tool
To draw a Connector, activate the drawing tool with InteractionController and set the DrawingObject property. The following code example illustrates how to draw a StraightSegment.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="AddConnector" OnClick="@AddConnector" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px" />
@code
{
//Reference to diagram.
SfDiagramComponent diagram;
//Defines diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void AddConnector()
{
//To draw an object once, activate draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the connectors.
diagram.DrawingObject = new Connector()
{
ID = "connector1",
Type = ConnectorSegmentType.Straight,
};
}
}A complete working sample can be downloaded from GitHub
How to Draw a Text Node Using the Drawing Tool
Create a text Node by click on the diagram page. The following code illustrates how to draw a text.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="AddNode" OnClick="@AddNode" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px" />
@code
{
//Reference to diagram.
SfDiagramComponent diagram;
//Define the diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void AddNode()
{
//To draw an object once, activate draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the shape.
diagram.DrawingObject = new Node()
{
Shape = new TextShape() { Content = "Text Content" },
Style = new TextStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }
};
}
}A complete working sample can be downloaded from GitHub
How to Draw a Polygon Using the Drawing Tool
Create a Polygon shape by clicking and moving the mouse at runtime on the diagram page.
The following code illustrates how to draw a polygon shape.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="Polygon" OnClick="@Polygon" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
//Reference to diagram.
SfDiagramComponent diagram;
//Defines diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void Polygon()
{
//To draw an object once, activate draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the polygon shape.
diagram.DrawingObject = new Node()
{
ID = "polygon",
Shape = new BasicShape()
{
Type = NodeShapes.Basic,
Shape = NodeBasicShapes.Polygon,
},
};
}
}A complete working sample can be downloaded from GitHub
How to Draw a Polyline Using the Drawing Tool
Create Polyline segments with straight lines and angled vertices at the control points by clicking and moving the mouse at runtime on the diagram page.
The following code illustrates how to draw a polyline connector.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Buttons
<SfButton Content="Polyline" OnClick="@Polyline" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
//Reference to the diagram.
SfDiagramComponent diagram;
//Define the diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void Polyline()
{
//Draw an object once and activate the draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the polyline connector.
diagram.DrawingObject = new Connector()
{
ID = "connector1",
Type = ConnectorSegmentType.Polyline,
};
}
}A complete working sample can be downloaded from GitHub
How to Select Tool
There are some functionalities that can be achieved by clicking and dragging on the diagram surface. They are as follows,
- Draw selection rectangle: MultipleSelect interaction Controller
- Pan the diagram: Zoom pan
- Draw nodes/connectors: DrawOnce
As all three behaviors are completely different, you can achieve only one behavior at a time based on the interaction controller that you choose.
When more than one of these interaction controllers are applied, an interaction controller is activated based on the precedence given in the following table.
| Precedence | DiagramInteractions | Description |
|---|---|---|
| 1st | ContinuesDraw | Draw the nodes or connectors continuously. While active, other interactions are disabled until the mode is turned off. |
| 2nd | DrawOnce | Draw a single node or connector. After completing the draw, SingleSelect and MultipleSelect are automatically enabled. |
| 3rd | ZoomPan | Pan the diagram. When enable both the SingleSelect and ZoomPan interaction controllers, Perform the basic interaction as the cursor hovers node/connector. Panning is enabled when cursor hovers the diagram. |
| 4th | MultipleSelect | Select multiple nodes and connectors. When enable both the MultipleSelect and ZoomPan interaction controllers, cursor hovers the diagram. When panning is enabled, cannot select multiple nodes. |
| 5th | SingleSelect | Select individual nodes or connectors. |
| 6th | None | Disables all interaction controllers. |
| 7th | Default | Allows users to select an individual as well as multiple nodes and connectors. |
Set the desired InteractionController for the diagram.
The following code illustrates how to enable a single interaction controller:
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Connectors="@connectors" Height="600px" InteractionController="@tool" />
@code
{
//Enable the single tool.
public DiagramInteractions tool = DiagramInteractions.DrawOnce;
//Defines diagram's connectors collection.
public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
}The following code illustrates how to enable multiple interaction controllers:
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Connectors="@connectors" @ref="diagram" Height="600px" InteractionController="@tool" />
@code
{
//Reference to diagram.
SfDiagramComponent diagram;
//Enable the multiple tools.
public DiagramInteractions tool = DiagramInteractions.DrawOnce | DiagramInteractions.ZoomPan;
//Defines diagram's connectors collection.
public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
}A complete working sample can be downloaded from GitHub.
How to Enable Freehand Drawing
The diagram supports an innovative feature called Freehand Drawing, empowering users to effortlessly create freeform curves (splines) directly on the diagram page. With this remarkable functionality, users can unlock their imagination and showcase their creativity by effortlessly sketching anything from simple drawings to elaborate artistic creations. To utilize this feature, users can access the DrawingObject property and select the Freehand connector type, enabling them to express their ideas and concepts through fluid and natural hand-drawn lines.
The following code illustrates how to draw a freehand drawing.
@using Syncfusion.Blazor.Diagram
<input Type="button" value="Freehand" @onclick="Freehand" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
//Reference to the diagram.
SfDiagramComponent diagram;
//Define the diagram's nodes collection.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Height = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content = "Node",
Style = new TextStyle()
{
Color = "white",
}
}
},
Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
private void Freehand()
{
//Draw an object once and activate the draw once.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to draw the freehand connector.
diagram.DrawingObject = new Connector()
{
ID = "connector1",
Type = ConnectorSegmentType.Freehand,
};
}
}A complete working sample can be downloaded from GitHub.
