982382: Documentation for Allow drag within swimlane

blazor/diagram/constraints.md

@@ -140,6 +140,7 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
 |[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.|
 |[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.|
 |[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.|
+|[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.|
 |[Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_Default)|Enables all default constraints for the node.|
 
 The following example shows how to disable the `Rotate` constraint from the default node constraints.

blazor/diagram/swimlane/lane/interaction.md

@@ -47,3 +47,200 @@ The following image shows how to swap lanes.
 The following image shows children interaction in lane.
 
 ![Lane Children Interaction](../Swimlane-images/Child_Interaction.gif)
+
+## How to restrict nodes from being dragged outside their swimlane
+
+By default, nodes in a swimlane can be moved freely within and outside the swimlane boundaries. When **NodeConstraints.AllowDragWithinSwimlane** is enabled by the nodes [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Constraints) property, nodes cannot be dragged outside the swimlane. If an attempt is made to move a node beyond the swimlane’s boundaries, a “not allowed” cursor appears, indicating the restriction.
+
+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.
+
+The following example demonstrates a node with the text "AllowDrag Within Swimlane" restricted to its swimlane boundaries:
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" NodeCreating="@OnNodeCreating" >
+    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
+</SfDiagramComponent>
+
+@code
+{
+    //Define diagram's swimlane collection
+    private DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
+
+    protected override void OnInitialized()
+    {
+        // A swimlane is created and stored in the swimlanes collection.
+        Swimlane swimlane = new Swimlane()
+        {
+            Header = new SwimlaneHeader()
+            {
+                Annotation = new ShapeAnnotation()
+                {
+                    Content = "SALES PROCESS FLOW CHART"
+                },
+                Height = 50,
+            },
+            OffsetX = 400,
+            OffsetY = 200,
+            Height = 120,
+            Width = 450,
+            Lanes = new DiagramObjectCollection<Lane>()
+            {
+                new Lane()
+                {
+                    Height = 100,
+                    Header = new SwimlaneHeader()
+                    {
+                        Width = 30,
+                        Annotation = new ShapeAnnotation(){ Content = "Consumer" }
+                    },
+                    Children = new DiagramObjectCollection<Node>()
+                    {
+                        new Node()
+                        {
+                            Height = 50, 
+                            Width = 100, 
+                            LaneOffsetX = 100, 
+                            LaneOffsetY = 30, 
+                            // To enable AllowDragWithinSwimlane to restrict movement outside the swimlane
+                            Constraints = NodeConstraints.Default | NodeConstraints.AllowDragWithinSwimlane , 
+                            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
+                            { 
+                                new ShapeAnnotation() 
+                                { 
+                                    Content="AllowDrag Within Swimlane",
+                                    Style= new  TextStyle()
+                                    {
+                                        TextOverflow = TextOverflow.Wrap, TextWrapping = TextWrap.WrapWithOverflow
+                                    }
+                                } 
+                            } 
+                        },
+                        new Node()
+                        {
+                            Height = 50, 
+                            Width = 50, 
+                            LaneOffsetX = 250, 
+                            LaneOffsetY = 30
+                        },
+                    }
+                },
+            }
+        };
+        // Add swimlane
+        SwimlaneCollections.Add(swimlane);
+    }
+
+    private void OnNodeCreating(IDiagramObject obj)
+    {
+        if (obj is Swimlane swimlane)
+        {
+            swimlane.Header.Style = new TextStyle()
+            {
+                Fill = "#5b9bd5",
+                StrokeColor = "#5b9bd5"
+            };
+            foreach (Phase phase in swimlane.Phases)
+            {
+                phase.Style = new ShapeStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
+            }
+            foreach (Lane lane in swimlane.Lanes)
+            {
+                lane.Header.Style = new TextStyle() { Fill = "#5b9bd5", StrokeColor = "#5b9bd5" };
+            }
+        }
+        else if (obj is Node node)
+        {
+            node.Style = new ShapeStyle()
+            {
+                Fill = "#5b9bd5",
+                StrokeColor = "#5b9bd5"
+            };
+        }
+    }
+}
+
+``` 
+
+The following example demonstrates that a constraint can also be enabled or disabled at runtime, for example, via a button click.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+
+<button onclick="@AllowDrag">AllowDrag</button>
+<SfDiagramComponent Height="600px" Swimlanes="@SwimlaneCollections" NodeCreating="@OnNodeCreating" >
+    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
+</SfDiagramComponent>
+
+@code
+{
+    //Define diagram's swimlane collection
+    DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
+
+    protected override void OnInitialized()
+    {
+        // A swimlane is created and stored in the swimlanes collection.
+        Swimlane swimlane = new Swimlane()
+        {
+            Header = new SwimlaneHeader()
+            {
+                Annotation = new ShapeAnnotation()
+                {
+                    Content = "SALES PROCESS FLOW CHART"
+                },
+                Height = 50,
+            },
+            OffsetX = 400,
+            OffsetY = 200,
+            Height = 120,
+            Width = 450,
+            Lanes = new DiagramObjectCollection<Lane>()
+            {
+                new Lane()
+                {
+                    Height = 100,
+                    Header = new SwimlaneHeader()
+                    {
+                        Width = 30,
+                        Annotation = new ShapeAnnotation(){ Content = "Consumer" }
+                    },
+                    Children = new DiagramObjectCollection<Node>()
+                    {
+                        new Node()
+                        {
+                            Height = 50, 
+                            Width = 100,
+                            LaneOffsetX = 250, 
+                            LaneOffsetY = 30
+                        },
+                    }
+                },
+            }
+        };
+        // Add swimlane
+        SwimlaneCollections.Add(swimlane);
+    }
+
+    public void AllowDrag()
+    {
+        if (diagramComponent.SelectionSettings.Nodes.Count > 0)
+        {
+            if (diagramComponent.SelectionSettings.Nodes[0].Constraints.HasFlag(NodeConstraints.AllowDragWithinSwimlane))
+            {
+                diagramComponent.SelectionSettings.Nodes[0].Constraints &= ~NodeConstraints.AllowDragWithinSwimlane;
+
+            }
+            else
+            {
+                diagramComponent.SelectionSettings.Nodes[0].Constraints |= NodeConstraints.AllowDragWithinSwimlane;
+            }
+        }
+    }
+}
+
+``` 
+
+{% 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)" %}
+
+A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/AllowDragWithinSwimlane/AllowDragWithinSwimlane)