Select atoms/residues using mouse and keyboard

This sample demonstrates how to select residues with mouse an keyboard by using the selection highlighting introduced in PV 1.8 to visually highlight a subset of residues and atoms.

Usage

• click: select clicked residue/atom
• shift click: select clicked residue/atom an extend selection
• return: center view on selected atoms

Source Code

<script>
viewer = pv.Viewer(document.getElementById('viewer'), {
    width : '300', height: '300', antialias : true,
    outline : true, quality : 'medium', style : 'hemilight',
    background : 'white', animateTime: 500,
    selectionColor : '#f00'
});

pv.io.fetchPdb('_static/1crn.pdb', function(s) {
  viewer.on('viewerReady', function() {
    viewer.cartoon('crambin', s);
    viewer.autoZoom();
  });
});

// register a keypressed listener and check for return key
// presses. Whenever the return key is pressed,  the camera zooms
// in on the currently selected residues.
document.addEventListener('keypress', function(ev) {
  if (ev.keyCode === 13) {
    var allSelections = [];
    viewer.forEach(function(go) {
      if (go.selection !== undefined) {
        allSelections.push(go.selection());
      }
    });
    viewer.fitTo(allSelections);
  }
});

viewer.on('click', function(picked, ev) {
  if (picked === null || picked.target() === null) {
    return;
  }
  // don't to anything if the clicked structure does not have an atom.
  if (picked.node().structure === undefined) {
    return;
  }
  // when the shift key is pressed, extend the selection, otherwise
  // only select the clicke atom.
  var extendSelection = ev.shiftKey;
  var sel;
  if (extendSelection) {
    var sel = picked.node().selection();
  } else {
    var sel = picked.node().structure().createEmptyView();
  }
  // in case atom was not part of the view, we have to add it, because
  // it wasn't selected before. Otherwise removeAtom took care of it
  // and we don't have to do anything.
  if (!sel.removeAtom(picked.target(), true)) {
    sel.addAtom(picked.target());
  }
  picked.node().setSelection(sel);
  viewer.requestRedraw();
});

</script>