Rappid - BPMN Pool lane selecting

joint.shapes.BPMN.Pool, that allows users selecting a single lane

by Roman Bruckner

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://jointjs.com/js/rappid.min.js"></script>
<link rel="stylesheet" href="https://jointjs.com/css/rappid.min.css">
<!-- Rappid Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
}

JavaScript

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 600,
  height: 600,
  gridSize: 20,
  model: graph
});

var pool = new joint.shapes.bpmn.Pool({
  lanes: {
    label: 'pool',
    sublanes: [{
      label: 'lane1'
    }, {
      label: 'lane2',
      sublanes: [{ label: 'lane3'}, { label: 'lane4' }]
    }]
  },
  attrs: { // enable clicking on lanes
    '.lane-body': {
      'pointer-events': 'all'
    },
    '.lane-header': {
      'pointer-events': 'all'
    }
  },
  size: {
    width: 300,
    height: 200
  },
  position: {
    x: 100,
    y: 100
  }
});

pool.addTo(graph);

paper.on('element:pointerdown', function(elementView, evt) {
  
  var lane = $(evt.target).closest('.lane')[0];
  var element = elementView.model;
  
  if (element.selectedLane) {
    element.attr(element.selectedLane, 'white');
    element.selectedLane = null;
  }
  
  if (lane) {
    var className = _.find(lane.classList, function(name) {
      return /lane(\d)+/.test(name);
    });
    var laneSelector = '.' + className + ' .lane-header/fill';
    element.attr(laneSelector, 'lightgray');
    element.selectedLane = laneSelector;
  }
});