Skip to content

Commit 2fb58ba

Browse files
SuganthiK963SuganthiK963
authored
Merge pull request #7235 from syncfusion-content/ES-982382-NodeDragRes
982382: Documentation for Allow drag within swimlane
2 parents d92e737 + b4e40cc commit 2fb58ba

File tree

3 files changed

+198
-0
lines changed

3 files changed

+198
-0
lines changed

‎blazor/diagram/constraints.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
140140
|[Resize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Resize)|Enables or Disables the expansion or compression of a node.|
141141
|[Inherit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Inherit)|Enables the node to inherit the interaction option from the parent object.|
142142
|[RoutingObstacle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_RoutingObstacle)|Enables or disables the node to be treated as obstacle while in routing.|
143+
|[AllowDragWithinSwimlane](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_AllowDragWithinSwimlane)|Restricts a node’s movement strictly within the swimlane boundaries.|
143144
|[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.|
144145

145146
The following example shows how to disable the `Rotate` constraint from the default node constraints.

‎blazor/diagram/swimlane/Swimlane-images/AllowDragWithinSwimlane.gif‎

245 KB
Loading

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

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,200 @@ The following image shows how to swap lanes.
4747
The following image shows children interaction in lane.
4848

4949
![Lane Children Interaction](../Swimlane-images/Child_Interaction.gif)
50+
51+
## How to restrict nodes from being dragged outside their swimlane
52+
53+
By default, nodes in a swimlane can be moved freely both within and outside the swimlane boundaries. Enabling the **NodeConstraints.AllowDragWithinSwimlane** option on the node’s [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property prevents the node from moving outside the swimlane. When a node is dragged beyond its boundaries, a 'not allowed' cursor appears to indicate the restriction.
54+
55+
To enforce this restriction for all child nodes within swimlanes, set the constraint during node initialization in the [NodeCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_NodeCreating) event.
56+
57+
The following example demonstrates a node with the text "AllowDrag Within Swimlane" restricted to its swimlane boundaries:
58+
59+
```cshtml
60+
@using Syncfusion.Blazor.Diagram
61+
62+
<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" NodeCreating="@OnNodeCreating" >
63+
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
64+
</SfDiagramComponent>
65+
66+
@code
67+
{
68+
// Define diagram's swimlane collection
69+
private DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
70+
71+
protected override void OnInitialized()
72+
{
73+
// A swimlane is created and stored in the swimlanes collection
74+
Swimlane swimlane = new Swimlane()
75+
{
76+
Header = new SwimlaneHeader()
77+
{
78+
Annotation = new ShapeAnnotation()
79+
{
80+
Content = "SALES PROCESS FLOW CHART"
81+
},
82+
Height = 50,
83+
},
84+
OffsetX = 400,
85+
OffsetY = 200,
86+
Height = 120,
87+
Width = 450,
88+
Lanes = new DiagramObjectCollection<Lane>()
89+
{
90+
new Lane()
91+
{
92+
Height = 100,
93+
Header = new SwimlaneHeader()
94+
{
95+
Width = 30,
96+
Annotation = new ShapeAnnotation(){ Content = "Consumer" }
97+
},
98+
Children = new DiagramObjectCollection<Node>()
99+
{
100+
new Node()
101+
{
102+
Height = 50,
103+
Width = 100,
104+
LaneOffsetX = 100,
105+
LaneOffsetY = 30,
106+
// To enable AllowDragWithinSwimlane to restrict movement outside the swimlane
107+
Constraints = NodeConstraints.Default | NodeConstraints.AllowDragWithinSwimlane,
108+
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
109+
{
110+
new ShapeAnnotation()
111+
{
112+
Content="AllowDrag Within Swimlane",
113+
Style= new TextStyle()
114+
{
115+
TextOverflow = TextOverflow.Wrap, TextWrapping = TextWrap.WrapWithOverflow
116+
}
117+
}
118+
}
119+
},
120+
new Node()
121+
{
122+
Height = 50,
123+
Width = 50,
124+
LaneOffsetX = 250,
125+
LaneOffsetY = 30
126+
},
127+
}
128+
},
129+
}
130+
};
131+
// Add swimlane
132+
SwimlaneCollections.Add(swimlane);
133+
}
134+
135+
private void OnNodeCreating(IDiagramObject obj)
136+
{
137+
if (obj is Swimlane swimlane)
138+
{
139+
swimlane.Header.Style = new TextStyle()
140+
{
141+
Fill = "#5b9bd5",
142+
StrokeColor = "#5b9bd5"
143+
};
144+
foreach (Phase phase in swimlane.Phases)
145+
{
146+
phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
147+
}
148+
foreach (Lane lane in swimlane.Lanes)
149+
{
150+
lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
151+
}
152+
}
153+
else if (obj is Node node)
154+
{
155+
node.Style = new ShapeStyle()
156+
{
157+
Fill = "#5b9bd5",
158+
StrokeColor = "#5b9bd5"
159+
};
160+
}
161+
}
162+
}
163+
164+
```
165+
166+
The following example demonstrates that a constraint can also be enabled or disabled at runtime, for example, via a button click.
167+
168+
```cshtml
169+
@using Syncfusion.Blazor.Diagram
170+
171+
<button onclick="@AllowDrag">AllowDrag</button>
172+
<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" NodeCreating="@OnNodeCreating" >
173+
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
174+
</SfDiagramComponent>
175+
176+
@code
177+
{
178+
// Define diagram's swimlane collection
179+
DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
180+
181+
protected override void OnInitialized()
182+
{
183+
// A swimlane is created and stored in the swimlanes collection
184+
Swimlane swimlane = new Swimlane()
185+
{
186+
Header = new SwimlaneHeader()
187+
{
188+
Annotation = new ShapeAnnotation()
189+
{
190+
Content = "SALES PROCESS FLOW CHART"
191+
},
192+
Height = 50,
193+
},
194+
OffsetX = 400,
195+
OffsetY = 200,
196+
Height = 120,
197+
Width = 450,
198+
Lanes = new DiagramObjectCollection<Lane>()
199+
{
200+
new Lane()
201+
{
202+
Height = 100,
203+
Header = new SwimlaneHeader()
204+
{
205+
Width = 30,
206+
Annotation = new ShapeAnnotation(){ Content = "Consumer" }
207+
},
208+
Children = new DiagramObjectCollection<Node>()
209+
{
210+
new Node()
211+
{
212+
Height = 50,
213+
Width = 100,
214+
LaneOffsetX = 250,
215+
LaneOffsetY = 30
216+
},
217+
}
218+
},
219+
}
220+
};
221+
// Add swimlane
222+
SwimlaneCollections.Add(swimlane);
223+
}
224+
225+
public void AllowDrag()
226+
{
227+
if (diagramComponent.SelectionSettings.Nodes.Count > 0)
228+
{
229+
if (diagramComponent.SelectionSettings.Nodes[0].Constraints.HasFlag(NodeConstraints.AllowDragWithinSwimlane))
230+
{
231+
diagramComponent.SelectionSettings.Nodes[0].Constraints &= ~NodeConstraints.AllowDragWithinSwimlane;
232+
233+
}
234+
else
235+
{
236+
diagramComponent.SelectionSettings.Nodes[0].Constraints |= NodeConstraints.AllowDragWithinSwimlane;
237+
}
238+
}
239+
}
240+
}
241+
242+
```
243+
244+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVeMBiRzuEmRSmS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Allow Drag Within Swimlane](../Swimlane-images/AllowDragWithinSwimlane.gif)" %}
245+
246+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/AllowDragWithinSwimlane/AllowDragWithinSwimlane)

0 commit comments

Comments
 (0)