Skip to content

Commit a5d7811

Browse files
BalaVigneshRaviChandranBalaVigneshRaviChandran
committed
982382: Documentation for Allow drag within swimlane
1 parent 19803c3 commit a5d7811

File tree

1 file changed

+165
-0
lines changed

1 file changed

+165
-0
lines changed

‎blazor/diagram/swimlane/lane/interaction.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
layout: post
3+
title: Lane Interaction in Blazor Diagram Component | Syncfusion
4+
description: How to select, resize(with and without selection), and swap the lane, and how to add the child element into the lane.
5+
platform: Blazor
6+
control: Diagram Component
7+
documentation: ug
8+
---
9+
10+
# Lane Interaction in Blazor Diagram Component
11+
12+
The diagram supports interactive lane operations, including selecting, resizing, and swapping lanes, as well as working with child elements inside lanes.
13+
14+
## How to Select a Lane
15+
16+
A [Lane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Lane.html) can be selected by clicking (tapping) the header of the lane.
17+
18+
## How to Resize a Lane
19+
20+
* A lane can be resized in the bottom and right direction.
21+
* A lane can be resized by using the resize selector of the lane.
22+
* A lane can be resized by dragging the bottom and right border of the lane without making a selection.
23+
* When a lane is resized, the parent swimlane will automatically adjust its size.
24+
* A lane can resized either by resizing the selector or the tight bounds of the child objects. If a child node moves to the edge of the lane, it can be automatically resized.
25+
26+
The following image shows how to resize the lane.
27+
28+
![Lane Resizing](../Swimlane-images/Lane_Resize.gif)
29+
30+
## How to Swap Lanes
31+
32+
* Lanes can be swapped by dragging a lane over another lane.
33+
* A helper indicator appears to show the insertion position during lane swapping.
34+
The following image shows how to swap lanes.
35+
36+
![Lane Swapping](../Swimlane-images/Lane_Swapping.gif)
37+
38+
## How to Interact with Child Nodes in Lanes
39+
40+
* Resize child nodes within swimlanes.
41+
* You can drag the child nodes within the lane.
42+
* Drag child nodes within the same lane to reposition them.
43+
* Drag and drop the child nodes from a lane to the diagram.
44+
* Drag and drop the child nodes from diagram to the lane.
45+
* Based on the child node interactions, the lane size will be updated.
46+
47+
The following image shows children interaction in lane.
48+
49+
![Lane Children Interaction](../Swimlane-images/Child_Interaction.gif)
50+
51+
## How to restrict nodes from being dragged or repositioned outside their assigned swimlane
52+
53+
To restrict child nodes to their swimlane, set their [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) to include AllowDragWithinSwimlane. By default, nodes can move freely; however, with this constraint enabled, a node can only be dragged within the bounds of its owning swimlane. Attempts to move it across lane or swimlane boundaries are prevented.
54+
55+
The following example demonstrates one node restricted to its swimlane, while another remains unrestricted for comparison.
56+
57+
```cshtml
58+
@using Syncfusion.Blazor.Diagram
59+
60+
<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" NodeCreating="@OnNodeCreating" >
61+
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
62+
</SfDiagramComponent>
63+
64+
@code
65+
{
66+
//Define diagram's swimlane collection
67+
DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
68+
69+
protected override void OnInitialized()
70+
{
71+
// A swimlane is created and stored in the swimlanes collection.
72+
Swimlane swimlane = new Swimlane()
73+
{
74+
Header = new SwimlaneHeader()
75+
{
76+
Annotation = new ShapeAnnotation()
77+
{
78+
Content = "SALES PROCESS FLOW CHART"
79+
},
80+
Height = 50,
81+
},
82+
OffsetX = 400,
83+
OffsetY = 200,
84+
Height = 120,
85+
Width = 450,
86+
Lanes = new DiagramObjectCollection<Lane>()
87+
{
88+
new Lane()
89+
{
90+
Height = 100,
91+
Header = new SwimlaneHeader()
92+
{
93+
Width = 30,
94+
Annotation = new ShapeAnnotation(){ Content = "Consumer" }
95+
},
96+
Children = new DiagramObjectCollection<Node>()
97+
{
98+
new Node()
99+
{
100+
Height = 50,
101+
Width = 100,
102+
LaneOffsetX = 100,
103+
LaneOffsetY = 30,
104+
//Enable AllowDragWithinSwimlane to restrict movement outside the swimlane
105+
Constraints = NodeConstraints.Default | NodeConstraints.AllowDragWithinSwimlane ,
106+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
107+
{
108+
new ShapeAnnotation()
109+
{
110+
Content="AllowDrag Within Swimlane",
111+
Style= new TextStyle()
112+
{
113+
TextOverflow = TextOverflow.Wrap, TextWrapping = TextWrap.WrapWithOverflow
114+
}
115+
}
116+
}
117+
},
118+
new Node(){Height = 50, Width = 50, LaneOffsetX = 250, LaneOffsetY = 30},
119+
}
120+
},
121+
}
122+
};
123+
// Add swimlane
124+
SwimlaneCollections.Add(swimlane);
125+
}
126+
127+
private void OnNodeCreating(IDiagramObject obj)
128+
{
129+
if (obj is Swimlane swimlane)
130+
{
131+
swimlane.Header.Style = new TextStyle()
132+
{
133+
Fill = "#5b9bd5",
134+
StrokeColor = "#5b9bd5"
135+
};
136+
foreach (Phase phase in swimlane.Phases)
137+
{
138+
phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
139+
}
140+
foreach (Lane lane in swimlane.Lanes)
141+
{
142+
lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
143+
}
144+
}
145+
else if (obj is Node node)
146+
{
147+
node.Style = new ShapeStyle()
148+
{
149+
Fill = "#5b9bd5",
150+
StrokeColor = "#5b9bd5"
151+
};
152+
}
153+
}
154+
}
155+
156+
```
157+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNode)
158+
159+
![Allow Drag Within Swimlane](../Swimlane-images/AllowDragWithinSwimlane.gif)
160+
161+
>**Note:**
162+
* To restrict a node to its owning swimlane, add [NodeConstraints.AllowDragWithinSwimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AllowDragWithinSwimlane) to the node’s Constraints property.
163+
164+
* To enforce this restriction for all child nodes within swimlanes, set the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) during node initialization in the NodeCreating event.
165+

0 commit comments

Comments
 (0)