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

This article explains how to set the position for Swimlane and its children in Vue Diagram.

Set the Position for Swimlane

To adjust the position of a swimlane in your Vue 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 nodes = [{
 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 nodes = [{
 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 learning how to set the position for swimlane and its children in Vue Diagram.

You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue 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!