JointJS Swimlanes

uses `restrictTranslate` paper option

by Roman Bruckner

HTML

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.css" />
  </head>

  <body>
    <!-- content -->
    <div id="paper"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.5.5/joint.js"></script>

  </body>

</html>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
  background
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a39e1f+50,2989d8+50,2989d8+50 */
  background: #a39e1f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #a39e1f 50%, #2989d8 50%, #2989d8 50%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #a39e1f 50%, #2989d8 50%, #2989d8 50%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #a39e1f 50%, #2989d8 50%, #2989d8 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#a39e1f', endColorstr='#2989d8', GradientType=1);
  /* IE6-9 */
}

JavaScript

const SWIMLANE_WIDTH = 300;
const SWIMLANE_HEIGHT = 600;

const graph = new joint.dia.Graph({}, {
  cellNamespace: joint.shapes
});

const paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: SWIMLANE_WIDTH * 2,
  height: SWIMLANE_HEIGHT,
  model: graph,
  async: true,
  sorting: joint.dia.Paper.sorting.APPROX,
  cellViewNamespace: joint.shapes,
  restrictTranslate: function(elementView) {
    return {
      x: elementView.model.get('group') * SWIMLANE_WIDTH,
      y: 0,
      height: SWIMLANE_HEIGHT,
      width: SWIMLANE_WIDTH
    }
  }
});

const el = new joint.shapes.standard.Rectangle({
  size: {
    height: 40,
    width: 40
  }
});

var el10 = el.clone().set('group', 0).position(50, 100);
var el20 = el.clone().set('group', 0).position(60, 200);
var el11 = el.clone().set('group', 1).position(340, 40);
var el21 = el.clone().set('group', 1).position(400, 90);

const l1 = new joint.shapes.standard.Link({
  source: {
    id: el10.id
  },
  target: {
    id: el20.id
  }
});
const l2 = new joint.shapes.standard.Link({
  source: {
    id: el20.id
  },
  target: {
    id: el21.id
  }
});

graph.addCells([el10, el20, el11, el21, l1, l2]);