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

This article explains how to position a swimlane and its child elements within an Angular diagram.

Set the Position for Swimlane
To adjust the position of a swimlane in your Angular 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.

The example code below illustrates this by utilizing the offsetX and offsetY properties.

public nodes: NodeModel[] = [
       {
           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,
       },
     ]

Sample: {target=“_blank”|title=“SwimlanePosition”}

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.

The following example code illustrates this concept:

public nodes: NodeModel[] = [
   {
       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,
   },
     ]

Sample: Set Position for Swimlane and its Child

Conclusion

We hope you enjoyed learning how to set the position for a swimlane and its children in Angular Diagram.

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