add distance measurement sample

demo.js

@@ -260,12 +260,35 @@ viewer.on('doubleClick', function(picked) {
   viewer.setCenter(picked.pos(), 500);
 });
 
+var lastAtom = null;
+
 viewer.addListener('click', function(picked) {
   if (picked === null) return;
   var target = picked.target();
   if (target.qualifiedName !== undefined) {
-    console.log('clicked atom', target.qualifiedName(), 'on object',
-                picked.node().name());
+    var view = picked.node()
+        .structure().createEmptyView();
+    viewer.requestRedraw();
+    if (lastAtom !== null) {
+      viewer.rm('dist.*');
+      var g = viewer.customMesh('dist.line');
+      var p1 = lastAtom.pos();
+      var p2 = target.pos();
+      var m = pv.vec3.clone(p1);
+      pv.vec3.add(m, m, p2);
+      pv.vec3.scale(m, m, 0.5);
+      g.addTube(p1, p2, 0.1, 
+                { cap : true, color : 'white' });
+      var d = pv.vec3.distance(p1, p2);
+      var l = viewer.label('dist.label',
+                           d.toFixed(2), m);
+      console.log('distance: ', d);
+      lastAtom = null;
+    } else {
+      lastAtom = target;
+      view.addAtom(target);
+    }
+    picked.node().setSelection(view);
   }
 });
 window.addEventListener('resize', function() {

doc/sample-measure-distance.rst

@@ -0,0 +1,58 @@
+Measure distance between two atoms
+=================================================
+
+This sample shows how add support for measuring the distance between two atoms.
+
+Usage
+--------------------------------------------------
+
+Click on two atoms to measure the distance between them. After clicking the second atom, a line will be drawn that connects the two atoms with the distance displayed in a label.
+
+.. pv-sample::
+
+  <script>
+  var parent = document.getElementById('viewer');
+  var viewer = pv.Viewer(parent,
+                        { width : 300, height : 300, antialias : true });
+
+  pv.io.fetchPdb('_static/1crn.pdb', function(structure) {
+    viewer.on('viewerReady', function() {
+      viewer.cartoon('crambin', structure);
+      viewer.autoZoom();
+    });
+  });
+
+  var lastAtom = null;
+
+
+  // register click handler that does all the distance-measure-foo
+  viewer.addListener('click', function(picked) {
+    if (picked === null) return;
+    var target = picked.target();
+    if (target.qualifiedName === undefined) {
+      return;
+    }
+    var node = picked.node();
+    var view = node.structure().createEmptyView();
+    if (lastAtom !== null) {
+      // remove distance-related objects from previous distance 
+      // measurements.
+      viewer.rm('dist.*');
+      var g = viewer.customMesh('dist.line');
+      var midPoint = pv.vec3.clone(lastAtom.pos());
+      pv.vec3.add(midPoint, midPoint, target.pos());
+      pv.vec3.scale(midPoint, midPoint, 0.5);
+      // add a tube to connect the two atoms
+      g.addTube(lastAtom.pos(), target.pos(), 0.1, 
+                { cap : true, color : 'white' });
+      var d = pv.vec3.distance(lastAtom.pos(), target.pos());
+      var l = viewer.label('dist.label', d.toFixed(2), midPoint);
+      lastAtom = null;
+    } else {
+      lastAtom = target;
+      view.addAtom(target);
+    }
+    node.setSelection(view);
+    viewer.requestRedraw();
+  });
+  </script>

doc/samples.rst

@@ -11,3 +11,4 @@ PV Usage Code Samples
   sample-static-label
   sample-3d-label
   sample-custom-mesh
+  sample-measure-distance