icn3d 3.39.1 → 3.40.0

package/icn3d.module.js

@@ -13693,6 +13693,10 @@ class SetMenu {
 
         html += "<ul class='icn3d-mn-item'>";
 
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.getLink('mn2_2ddepiction', '2D Depiction ' + me.htmlCls.wifiStr, 1, 1);
+        }
+
         if(me.cfg.cid === undefined) {
             html += this.getLink('mn6_selectannotations', 'Seq. & Annotations ' + me.htmlCls.wifiStr, 1, 1);
 
@@ -15517,24 +15521,30 @@ class SetDialog {
         html += "</div>";
 
 
-        html += me.htmlCls.divStr + "dl_ligplot' sty2D Interaction for One Ligand/Residule='background-color:white' class='" + dialogClass + "'>";
-        html += this.addNotebookTitle('dl_ligplot', 'e with Atom Details');
+        html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
 
-        html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.addNotebookTitle('dl_ligplot', '2D Depiction for Chemicals');
+        }
+        else {
+            html += this.addNotebookTitle('dl_ligplot', '2D Interaction for One Ligand/Residue with Atom Details');
 
-        html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
-          + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
-          + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
+            html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
 
-        html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
+            html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+            + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
+            + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
 
-        // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
-        // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
-        html += "<b>Color legend</b> for interactions (dashed lines): <br>";
+            html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
 
-        html += me.htmlCls.setHtmlCls.setColorHints();
+            // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
+            // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
+            html += "<b>Color legend</b> for interactions (dashed lines): <br>";
 
-        html += "<br></div>";
+            html += me.htmlCls.setHtmlCls.setColorHints();
+
+            html += "<br></div>";
+        }
 
         me.ligplotid = me.pre + 'ligplot';
         html += me.htmlCls.divNowrapStr + buttonStrTmp + me.ligplotid + '_svg">SVG</button>' + me.htmlCls.space2;
@@ -16920,6 +16930,11 @@ class Events {
              thisClass.setLogCmd("view interactions", true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn2_2ddepiction", "click", async function(e) { let ic = me.icn3d;
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
+            thisClass.setLogCmd("view 2d depiction", true);
+       });
+
         me.myEventCls.onIds("#" + me.pre + "search_seq_button", "click", async function(e) { me.icn3d;
            e.stopImmediatePropagation();
            await thisClass.searchSeq();
@@ -28123,6 +28138,8 @@ class Camera {
                 }
             }
 
+            // ic.cam.add(ic.directionalLight);
+
             ic.cam.updateProjectionMatrix();
     //    }
     }
@@ -38058,6 +38075,11 @@ class Alternate {
             ic.directionalLight.position.copy(ic.lightPos.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight2.position.copy(ic.lightPos2.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight3.position.copy(ic.lightPos3.clone().applyQuaternion( quaternion ).normalize());
+
+            // adjust the light according to the position of camera
+            ic.directionalLight.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight2.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight3.applyMatrix4(cam.matrixWorld);
         }
 
         if(!ic.bVr) ic.renderer.setPixelRatio( window.devicePixelRatio ); // r71
@@ -70001,7 +70023,9 @@ class LoadScript {
           }
           else if(command.indexOf('view interactions') == 0 && me.cfg.align !== undefined) { // the command may have "|||{"factor"...
               await thisClass.applyCommandViewinteraction(strArray[0].trim());
-
+          }
+          else if(command.indexOf('view 2d depiction') == 0) { // the command may have "|||{"factor"...
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
           }
           else if(command.indexOf('symmetry') == 0) {
             ic.bAxisOnly = false;
@@ -70211,6 +70235,9 @@ class LoadScript {
                     else if(lastCommand.indexOf('view interactions') == 0 && me.cfg.align !== undefined) {
                         await thisClass.applyCommandViewinteraction(lastCommand);
                     }
+                    else if(lastCommand.indexOf('view 2d depiction') == 0) {
+                      await ic.ligplotCls.drawLigplot(ic.atoms, true);
+                    }
                     else if(lastCommand.indexOf('symmetry') == 0) {
                         let title = lastCommand.substr(lastCommand.indexOf(' ') + 1);
                         ic.symmetrytitle =(title === 'none') ? undefined : title;
@@ -78594,8 +78621,13 @@ class Ligplot {
         this.icn3d = icn3d;
     }
 
-    async drawLigplot(atomSet1) { let ic = this.icn3d, me = ic.icn3dui;
-        me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+    async drawLigplot(atomSet1, bDepiction) { let ic = this.icn3d, me = ic.icn3dui;
+        if(bDepiction) {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', '2D Depiction');
+        }
+        else {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+        }
 
         let widthOri, heightOri, width = 100, height = 100;
         ic.len4ang = 80;
@@ -78677,19 +78709,28 @@ class Ligplot {
         let offset = - ic.len4ang;
         let svgHtml = "<svg id='" + id + "' viewBox='" + offset + "," + offset + "," + width + "," + heightAll + "' width='" + graphWidth + "px' font-family='sans-serif' stroke='rgb(0,0,0)' stroke-width='2' stroke-linecap='round'>";
 
-        let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
-        let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
-        ic.bLigplot = true;
+        if(bDepiction) {
+            svgHtml += lineSvg + nodeSvg;
+        }
+        else {
+            let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
+            let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
+            // ic.bLigplot = true;
 
-        svgHtml += lineSvg + result.svgHtmlLine;
+            svgHtml += lineSvg + result.svgHtmlLine;
 
-        svgHtml += nodeSvg + result.svgHtmlNode;
+            svgHtml += nodeSvg + result.svgHtmlNode;
+        }
 
         svgHtml += "</svg>";
 
-        $("#" + ic.pre + "ligplotDiv").html(svgHtml);
-
-        this.setEventsForLigplot();
+        if(bDepiction) {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+        }
+        else {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+            this.setEventsForLigplot();
+        }  
     }
 
     
@@ -83763,7 +83804,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.39.0';
+    this.REVISION = '3.40.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "icn3d",
-  "version": "3.39.1",
+  "version": "3.40.0",
   "main": "./icn3d.js",
   "exports": {
     ".": {