Add swimlane to palette

Diagram provides the support to add swimlane and phases to symbol palette. The following code sample illustrate how to add swimlane and phases to palette.

import {
    Diagram,
    NodeModel,
    SymbolPalette,
    SymbolInfo,
  } from '@syncfusion/ej2-diagrams';
  // initialize Diagram component
  let diagram: Diagram = new Diagram({
    width: '80%',
    height: '600px',
  });
  // render initialized Diagram
  diagram.appendTo('#element');
  
  //Initialize the flowshapes for the symbol palette
  function getswimlaneShapes(): NodeModel[] {
    let swimlaneShapes: NodeModel[] = [
      {
        id: 'stackCanvas1',
        shape: {
          type: 'SwimLane',
          lanes: [
            {
              id: 'lane1',
              style: { strokeColor: 'black' },
              height: 60,
              width: 150,
              header: {
                width: 50,
                height: 50,
                style: { strokeColor: 'black', fontSize: 11 },
              },
            },
          ],
          orientation: 'Horizontal',
          isLane: true,
        },
        height: 60,
        width: 140,
        offsetX: 70,
        offsetY: 30,
      },
      {
        id: 'stackCanvas2',
        shape: {
          type: 'SwimLane',
          lanes: [
            {
              id: 'lane1',
              style: { strokeColor: 'black' },
              height: 150,
              width: 60,
              header: {
                width: 50,
                height: 50,
                style: { strokeColor: 'black', fontSize: 11 },
              },
            },
          ],
          orientation: 'Vertical',
          isLane: true,
        },
        height: 140,
        width: 60,
        // style: { fill: '#f5f5f5' },
        offsetX: 70,
        offsetY: 30,
      },
      {
        id: 'verticalPhase',
        shape: {
          type: 'SwimLane',
          phases: [
            {
              style: {
                strokeWidth: 1,
                strokeDashArray: '3,3',
                strokeColor: '#A9A9A9',
              },
            },
          ],
          annotations: [{ text: '' }],
          orientation: 'Vertical',
          isPhase: true,
        },
        height: 60,
        width: 140,
      },
      {
        id: 'horizontalPhase',
        shape: {
          type: 'SwimLane',
          phases: [
            {
              style: {
                strokeWidth: 1,
                strokeDashArray: '3,3',
                strokeColor: '#A9A9A9',
              },
            },
          ],
          annotations: [{ text: '' }],
          orientation: 'Horizontal',
          isPhase: true,
        },
        height: 60,
        width: 140,
      },
    ];
    return swimlaneShapes;
  }
  
  function setPaletteNodeDefaults(node: NodeModel): void {
    node.width = 100;
    node.height = 100;
    node.style.strokeColor = '#3A3A3A';
  }
  //Initializes the symbol palette
  let palette: SymbolPalette = new SymbolPalette({
    expandMode: 'Multiple',
    width:'20%',
    palettes: [
      {
        id: 'swimlane',
        expanded: true,
        symbols: getswimlaneShapes(),
        title: 'Swimlane Shapes',
      },
    ],
    symbolPreview: {
      height: 100,
      width: 100,
      offset: {
        x: 0.5,
        y: 0.5,
      },
    },
    symbolMargin: {
      left: 12,
      right: 12,
      top: 12,
      bottom: 12,
    },
    //Returns the default properties of node
    getNodeDefaults: setPaletteNodeDefaults,
    getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
      return {
        fit: true,
      };
    },
  });
  
  palette.appendTo('#palette');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Diagram</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="container">
            <div id="palette" style="float: left"></div>
            <div id="element" style="float: right"></div>
          </div>
    </div>
</body>

</html>

Drag and drop swimlane to palette

  • The drag and drop support for swimlane shapes has been provided.
  • Horizontal lanes can be added to vertical swimlanes, and vice versa.
  • The phase will only drop on swimlane shape with same orientation. The following image illustrates how to drag symbol from palette.
    Drag Symbol from Palette