How to Set Position for Swimlane and its Children in React Diagram?

This article explains how to set the position for a swimlane and its children in a React diagram.

Set the Position for Swimlane
To adjust the position of a swimlane in your React diagram, you can use the offset properties.

These properties help you fine-tune where the swimlane is located both horizontally and vertically.
offset properties:

offsetX:

• This property controls the horizontal position of the swimlane.
• By modifying this value, you can move the swimlane left or right.

offsetY:

• This property controls the vertical position of the swimlane.
• Adjusting this value allows you to move the swimlane up or down.

This is demonstrated in the below sample code by using offsetX and offsetY properties

let node = [
 {
   id: 'swimlane',
   shape: {
     header: {},
     type: 'SwimLane',
     lanes: [
       {
         id: 'stackCanvas1',
         height: 100,
       },
     ],
     phases: [
       {
         id: 'phase1',
         offset: 170,
         header: { annotation: { content: 'Phase' } },
       },
     ],
     phaseSize: 20,
   },
   // Adjust the position of swimlane
   offsetX: 300,
   offsetY: 200,
   height: 200,
   width: 350,
 },
];

Refer to the working sample for additional details and implementation:: Sample

Set the Position for Swimlane Children
To adjust the position of swimlane children in your diagram, you can use the margin property. This property defines the space between the node (swimlane child) and its immediate parent (swimlane).

margin properties:

The margin property includes four specific settings:

left: Controls the space on the left side of the swimlane child.
right: Controls the space on the right side of the swimlane child.
top: Controls the space above the swimlane child.
bottom: Controls the space below the swimlane child.

This is demonstrated in the below sample code

let node = [{
   shape: {
       type: 'SwimLane',
       //Intialize header to swimlane
       header: {},
       lanes: [
         {
           id: 'stackCanvas1',
           height: 100,
           header: {
             annotation: { content: 'CUSTOMER' },
             width: 50,
             style: { fontSize: 11 },
           },
           // Set the children of lane
           children: [
             {
               id: 'node1',
               annotations: [
                 {
                   content: 'Consumer learns \n of product',
                   style: { fontSize: 11 },
                 },
               ],
               //Adjust position of swimlane children
               margin: { left: 250, right: 150, bottom: 50, top: 100 },
               height: 40,
               width: 100,
             },
           ],
         },
       ],
       phases: [
         {
           id: 'phase1',
           offset: 170,
           header: { annotation: { content: 'Phase' } },
         },
       ],
       phaseSize: 20,
     },
     offsetX: 300,
     offsetY: 200,
     height: 200,
     width: 350,
   }];

Refer to the working sample for additional details and implementation: Sample

Conclusion

We hope you enjoyed about how to perform drag and drop operation in OrgChart React Diagram.

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

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

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