Merge branch 'master' of github.com:3dmol/3Dmol.js

3Dmol/3dmol.js

@@ -9,7 +9,6 @@
 $3Dmol = (function(window) {
 
     var my = window['$3Dmol'] || {};
-    //var $ = window['jQuery'];
 
     return my;
 
@@ -26,7 +25,9 @@ if ( typeof module === "object" && typeof module.exports === "object" ) {
    leave this code in if you would like to increase the 
    likelihood of 3Dmol.js remaining supported.
 */
-$.get("https://3dmol.csb.pitt.edu/track/report.cgi");
+if(!$3Dmol.notrack) {
+ $.get("https://3dmol.csb.pitt.edu/track/report.cgi");
+}
 
 /* shims for IE */
 /*
@@ -562,3 +563,83 @@ if( typeof(define) === 'function' && define.amd) {
     define('$3Dmol',$3Dmol);
 }
 
+/* StereoViewer for stereoscopic viewing
+* @constructor
+* @param {string} div id
+* @param {number} eyeSeparation
+* 
+*/
+
+$3Dmol.createStereoViewer = function(divId, eyeSeparation) {
+    var that = this;
+    eyeSeparation = (eyeSeparation != undefined)?eyeSeparation:6;
+    var element = document.getElementById(divId);
+    var gldiv1 = document.createElement('div'); //create two divs having half of the width and place them side by side
+    var gldiv2 = document.createElement('div');
+    gldiv1.id = "gldiv1";
+    gldiv2.id = "gldiv2";
+    gldiv1.style.cssText = gldiv2.style.cssText = 'position: relative; float: left; width: 50%; height: 100%; margin: 0; padding: 0; border: 0;';
+
+    element.appendChild(gldiv1);
+    element.appendChild(gldiv2);
+
+    this.glviewer1 = $3Dmol.createViewer($("#gldiv1"),{
+        camerax: -eyeSeparation/2.0});
+
+    this.glviewer2 = $3Dmol.createViewer($("#gldiv2"),{
+        camerax: eyeSeparation/2.0});
+
+    var singleClickEvent = function() {
+        that.glviewer1.rotate(15);
+        that.glviewer2.rotate(15);
+        that.glviewer1.render();
+        that.glviewer2.render();
+    };
+
+    var doubleClickEvent = function() {
+        that.glviewer1.zoom(1.05);
+        that.glviewer2.zoom(1.05);
+    };
+
+    var clicks = 0, DELAY = 700, timer = null;
+    var handleClicks = function() { //to handle single and double clicks differently
+        clicks++;
+        if (clicks == 1) {
+            timer = setTimeout(function() {
+                singleClickEvent();
+                clicks = 0;
+            },DELAY);
+        }
+        else {
+            clearTimeout(timer);
+            doubleClickEvent();
+            clicks = 0;
+        }
+    };
+    element.addEventListener("click", handleClicks, false);
+
+    this.glviewer1.linkViewer(this.glviewer2);
+    this.glviewer2.linkViewer(this.glviewer1);
+
+    var methods = Object.getOwnPropertyNames(this.glviewer1) //get all methods of glviewer object
+    .filter(function(property) {
+        return typeof that.glviewer1[property] == 'function';
+    });
+
+    for (var i = 0; i < methods.length; i++) { //create methods of the same name
+        this[methods[i]] = (function(method){
+            return function(){
+                var m1=this['glviewer1'][method].apply(this['glviewer1'],arguments);
+                var m2=this['glviewer2'][method].apply(this['glviewer2'],arguments);
+                return [m1,m2];
+            };
+        })(methods[i]);
+    }
+
+    this.setCoordinates = function (models, data, format) { //for setting the coordinates of the models
+        for (var i = 0; i < models.length; i++) {
+            models[i].setCoordinates(data, format);
+        }
+    };
+
+}

3Dmol/glshape.js

@@ -1026,31 +1026,44 @@ $3Dmol.GLShape = (function() {
             var newvertices= [];
             var newfaces=[];
 
-            if (volSpec.selectedRegion !== undefined) {
-
-                var xmax = volSpec.selectedRegion[0].x, 
-                    ymax = volSpec.selectedRegion[0].y, 
-                    zmax = volSpec.selectedRegion[0].z, 
-                    xmin = volSpec.selectedRegion[0].x, 
-                    ymin = volSpec.selectedRegion[0].y, 
-                    zmin = volSpec.selectedRegion[0].z;
-
-                for (var i = 0; i < volSpec.selectedRegion.length; i++) {
-                    if (volSpec.selectedRegion[i].x > xmax)
-                        xmax = volSpec.selectedRegion[i].x;
-                    else if (volSpec.selectedRegion[i].x < xmin)
-                        xmin = volSpec.selectedRegion[i].x;
-                    if (volSpec.selectedRegion[i].y > ymax)
-                        ymax = volSpec.selectedRegion[i].y;
-                    else if (volSpec.selectedRegion[i].y < ymin)
-                        ymin = volSpec.selectedRegion[i].y;
-                    if (volSpec.selectedRegion[i].z > zmax)
-                        zmax = volSpec.selectedRegion[i].z;
-                    else if (volSpec.selectedRegion[i].z < zmin)
-                        zmin = volSpec.selectedRegion[i].z;
+            if (volSpec.selectedRegion && volSpec.coords === undefined) {
+                volSpec.coords = volSpec.selectedRegion; //backwards compat for incorrectly documented feature
+            }
+            if (volSpec.coords !== undefined) {
+
+                var xmax = volSpec.coords[0].x, 
+                    ymax = volSpec.coords[0].y, 
+                    zmax = volSpec.coords[0].z, 
+                    xmin = volSpec.coords[0].x, 
+                    ymin = volSpec.coords[0].y, 
+                    zmin = volSpec.coords[0].z;
+
+                for (var i = 0; i < volSpec.coords.length; i++) {
+                    if (volSpec.coords[i].x > xmax)
+                        xmax = volSpec.coords[i].x;
+                    else if (volSpec.coords[i].x < xmin)
+                        xmin = volSpec.coords[i].x;
+                    if (volSpec.coords[i].y > ymax)
+                        ymax = volSpec.coords[i].y;
+                    else if (volSpec.coords[i].y < ymin)
+                        ymin = volSpec.coords[i].y;
+                    if (volSpec.coords[i].z > zmax)
+                        zmax = volSpec.coords[i].z;
+                    else if (volSpec.coords[i].z < zmin)
+                        zmin = volSpec.coords[i].z;
+                }
+
+                var rad = 2;
+                if(volSpec.radius !== undefined) {
+                    rad = volSpec.radius; //backwards compat
+                }
+                if(volSpec.selectedOffset !== undefined) { //backwards compat
+                    rad = volSpec.selectedOffset;
+                }
+                if(volSpec.seldist !== undefined) { 
+                    rad = volSpec.seldist;
                 }
 
-                var rad = volSpec.radius;
                 xmin -= rad;
                 xmax += rad;
                 ymin -= rad;
@@ -1067,8 +1080,7 @@ $3Dmol.GLShape = (function() {
                             && verts[i].z > zmin
                             && verts[i].z < zmax
                             && inSelectedRegion(verts[i],
-                                    volSpec.selectedRegion,
-                                    volSpec.selectedOffset, volSpec.radius)) {
+                                    volSpec.coords, rad)) {
                         vertexmapping.push(newvertices.length);
                         newvertices.push(verts[i]);
 
@@ -1123,7 +1135,7 @@ $3Dmol.GLShape = (function() {
             if(typeof callback =="function")
                 callback();
           }
-        var inSelectedRegion=function(coordinate,selectedRegion,offset,radius){
+        var inSelectedRegion=function(coordinate,selectedRegion,radius){
 
             for(var i=0;i<selectedRegion.length;i++){
                 if(distance_from(selectedRegion[i],coordinate)<=radius)

3Dmol/glviewer.js

@@ -1686,6 +1686,7 @@ $3Dmol.GLViewer = (function() {
                 rotationGroup.position.z = finalz;
                 show();
             }
+            camera.lookAt(new $3Dmol.Vector3(0,0,finalz)); //required if camera has a non-zero camerax value
             return this;
 
         };
@@ -3232,7 +3233,7 @@ $3Dmol.GLViewer = (function() {
             }
 
             var addSurfaceHelper = function addSurfaceHelper(surfobj, atomlist, atomsToShow) {
-
+                //function returns promise with surfid resolved
                 if(!focus) {
                     focusSele = atomsToShow;
                 } else {
@@ -3398,7 +3399,7 @@ $3Dmol.GLViewer = (function() {
                         promises.push(startWorker(i));
                     }
 
-                    return Promise.all(promises)
+                    return Promise.all(promises) //proceed forward only when all the workers are done
                     .then(function(event_data) {
                         rfunction(event_data);
                         surfobj.done = true;
@@ -3640,6 +3641,40 @@ $3Dmol.GLViewer = (function() {
             // errors in callback shouldn't invalidate the viewer
             console.log("error with glviewer callback: " + e);
         }
+
+        /**
+         * Return the z distance between the model and the camera
+         * @function $3Dmol.GLViewer#getPerceivedDistance
+         * @return {number} distance
+         */
+        this.getPerceivedDistance = function() {
+            return CAMERA_Z - rotationGroup.position.z;
+        }
+
+        /**
+         * Set the distance between the model and the camera
+         * Essentially zooming. Useful while stereo rendering.
+         * @function $3Dmol.GLViewer#setPerceivedDistance
+         */
+        this.setPerceivedDistance = function(dist) {
+            rotationGroup.position.z = CAMERA_Z - dist;
+        }
+
+        /**
+         * Used for setting an approx value of eyeSeparation. Created for calling by StereoViewer object
+         * @function $3Dmol.GLViewer#setAutoEyeSeparation
+         * @return {number} camera x position
+         */
+        this.setAutoEyeSeparation = function() {
+            var dist = this.getPerceivedDistance();
+            if (camera.position.x > 0) //setting a value of dist*tan(5)
+                camera.position.x = dist*Math.tan(Math.PI / 180.0 * 5.0) 
+            else
+                camera.position.x = -dist*Math.tan(Math.PI / 180.0 * 5.0)
+            camera.lookAt(new $3Dmol.Vector3(0,0,rotationGroup.position.z));
+            return camera.position.x
+        }
+
     }
 
     return GLViewer;

3Dmol/specs.js

@@ -162,9 +162,8 @@
  * @prop {boolean} wireframe - draw as wireframe, not surface
  * @prop {number} linewidth - width of line for wireframe rendering **No longer supported by most browsers**
  * @prop {number} smoothness - amount to smooth surface (default 1)
- * @prop {AtomSelectionSpec} sel - selection around which to show data
- * @prop {list} coords - coordinates around which to include data
- * @prop {number} seldist - distance around selection/coords to include data [default = 2.0]
+ * @prop {list} coords - coordinates around which to include data; use viewer.selectedAtoms() to convert an AtomSelectionSpec to coordinates
+ * @prop {number} seldist - distance around coords to include data [default = 2.0]
  * @prop {boolean} clickable - if true, user can click on object to trigger callback
  * @prop {function} callback - function to call on click 
  */

Gruntfile.js

@@ -116,7 +116,7 @@ module.exports = function(grunt) {
                 options : {
                     'compilation_level': 'SIMPLE_OPTIMIZATIONS',
                     'warning_level': 'DEFAULT',
-                    'language_in': 'ECMASCRIPT5'
+                    'language_in': 'ECMASCRIPT6'
                 }
             },
             mmtf : {
@@ -128,7 +128,7 @@ module.exports = function(grunt) {
                 options : {
                     'compilation_level': 'SIMPLE_OPTIMIZATIONS',
                     'warning_level': 'DEFAULT',
-                    'language_in': 'ECMASCRIPT5'
+                    'language_in': 'ECMASCRIPT6'
                 }
             },
             pako : {
@@ -140,7 +140,7 @@ module.exports = function(grunt) {
                 options : {
                     'compilation_level': 'SIMPLE_OPTIMIZATIONS',
                     'warning_level': 'DEFAULT',
-                    'language_in': 'ECMASCRIPT5'
+                    'language_in': 'ECMASCRIPT6'
                 }
             },           
         },

py3Dmol/examples.ipynb

@@ -32,7 +32,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 2,
    "metadata": {
     "collapsed": false
    },
@@ -359,32 +359,33 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 11,
+   "execution_count": 4,
    "metadata": {
     "collapsed": false
    },
    "outputs": [
     {
      "data": {
       "text/html": [
-       "<div id=\"3dmolviewer_149496788184\"  style=\"position: relative; width: 640px; height: 480px\">\n",
+       "<div id=\"3dmolviewer_149878279155\"  style=\"position: relative; width: 640px; height: 480px\">\n",
        "<script>\n",
        "if(typeof $3Dmolpromise === 'undefined') $3Dmolpromise = $.when($.getScript('https://3dmol.csb.pitt.edu/build/3Dmol.js'))\n",
-       "var viewer_149496788184 = null;\n",
+       "var viewer_149878279155 = null;\n",
        "$3Dmolpromise.done(function() {\n",
-       "viewer_149496788184 = $3Dmol.createViewer($(\"#3dmolviewer_149496788184\"),{backgroundColor:\"white\"});\n",
-       "\tviewer_149496788184.addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",\"sdf\");\n",
-       "\tviewer_149496788184.setStyle({\"stick\": {}});\n",
-       "\tviewer_149496788184.zoomTo();\n",
-       "viewer_149496788184.render();\n",
+       "viewer_149878279155 = $3Dmol.createViewer($(\"#3dmolviewer_149878279155\"),{backgroundColor:\"white\"});\n",
+       "\tviewer_149878279155.addModel(\"\\n     RDKit          3D\\n\\n  6  6  0  0  0  0  0  0  0  0999 V2000\\n   -0.9517    0.7811   -0.6622 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.2847    1.3329   -0.3121 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    1.2365    0.5518    0.3512 C   0  0  0  0  0  0  0  0  0  0  0  0\\n    0.9517   -0.7811    0.6644 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -0.2847   -1.3329    0.3144 C   0  0  0  0  0  0  0  0  0  0  0  0\\n   -1.2365   -0.5518   -0.3489 C   0  0  0  0  0  0  0  0  0  0  0  0\\n  1  2  2  0\\n  2  3  1  0\\n  3  4  2  0\\n  4  5  1  0\\n  5  6  2  0\\n  6  1  1  0\\nM  END\\n$$$$\",\"sdf\");\n",
+       "\tviewer_149878279155.setStyle({\"stick\": {}});\n",
+       "\tviewer_149878279155.setStyle({\"model\": 0},{\"stick\": {\"colorscheme\": \"cyanCarbon\"}});\n",
+       "\tviewer_149878279155.zoomTo();\n",
+       "viewer_149878279155.render();\n",
        "});\n",
        "</script>"
       ],
       "text/plain": [
-       "<py3Dmol.view at 0x10c328f90>"
+       "<py3Dmol.view at 0x10ee15c10>"
       ]
      },
-     "execution_count": 11,
+     "execution_count": 4,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -411,6 +412,7 @@
     "view = py3Dmol.view()\n",
     "view.addModel(benz,'sdf')\n",
     "view.setStyle({'stick':{}})\n",
+    "view.setStyle({'model':0},{'stick':{'colorscheme':'cyanCarbon'}})\n",
     "view.zoomTo()"
    ]
   },

tests/auto/tests/test96.js

@@ -0,0 +1,19 @@
+
+
+    var stereoViewer = new $3Dmol.createStereoViewer("gldiv", 10);
+
+    $.get("volData/TC5b.prmtop",
+        function(data) {
+            var models = stereoViewer.addModel(data, "prmtop");
+            $.get("volData/heat1.mdcrd", 
+            function(data) {
+                stereoViewer.setCoordinates(models, data, "mdcrd");
+                stereoViewer.setStyle({},{sphere:{}});
+                stereoViewer.zoomTo();
+                var dist = stereoViewer.getPerceivedDistance();
+                stereoViewer.setPerceivedDistance(dist[0]-10); //useful for zooming in or out
+                stereoViewer.setAutoEyeSeparation(); //optional. changes the camera x value
+                stereoViewer.animate({loop:"forward",reps:1});
+                stereoViewer.render(callback);
+            });
+        });