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.

/**
 * Default symbol palette sample
 */
//Initialize the flowshapes for the symbol palatte
var swimlaneShapes = [
    {
      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,
    },
  ];
  function setPaletteNodeDefaults(node) {
    node.width = 100;
    node.height = 100;
    node.style.strokeColor = '#3A3A3A';
  }
  var palette = new ej.diagrams.SymbolPalette({
    expandMode: 'Multiple',
    width:'20%',
    palettes: [
      {
        id: 'swimlane',
        expanded: true,
        symbols: swimlaneShapes,
        title: 'Swimlane Shapes',
      },
    ],
    symbolPreview: {
      height: 100,
      width: 100,
      offset: {
        x: 0.5,
        y: 0.5,
      },
    },
    symbolMargin: {
      left: 12,
      right: 12,
      top: 12,
      bottom: 12,
    },
    enableSearch: true,
    getNodeDefaults: setPaletteNodeDefaults,
    getSymbolInfo: (symbol) => {
      return {
        fit: true,
      };
    },
  });
  
  palette.appendTo('#palette');
  
  let diagram = new ej.diagrams.Diagram(
    {
      width: '80%',
      height: 900,
    },
    '#element'
  );
<!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">
    
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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