@openchemistry/molecule-moljs - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.0.7"></a>
+## [0.0.7](https://github.com/OpenChemistry/oc-web-components/compare/@openchemistry/molecule-moljs@0.0.6...@openchemistry/molecule-moljs@0.0.7) (2018-06-17)
+
+
+### Bug Fixes
+
+* Display isosurfaces of the volume data ([e5922a1](https://github.com/OpenChemistry/oc-web-components/commit/e5922a1))
+
+
+
+
 <a name="0.0.6"></a>
@@ -8,0 +19,0 @@ ## [0.0.6](https://github.com/OpenChemistry/oc-web-components/compare/@openchemistry/molecule-moljs@0.0.5...@openchemistry/molecule-moljs@0.0.6) (2018-06-16)

dist/collection/collection-manifest.json

@@ -17,5 +17,9 @@ {
         {
-          "name": "cjsonProp",
+          "name": "cjson",
           "type": "String",
-          "attr": "cjson-prop"
+          "attr": "cjson"
+        },
+        {
+          "name": "options",
+          "attr": "options"
         }
@@ -22,0 +26,0 @@ ]

dist/collection/components/molecule-moljs/molecule-moljs.js

 import { validateChemJson, isChemJson } from '@openchemistry/cjson-utils';
 import { cjsonToMoljs } from '@openchemistry/cjson-utils';
+$3Dmol.VolumeData.prototype.volume = function (volume) {
+    this.size = new $3Dmol.Vector3(volume.dimensions[0], volume.dimensions[1], volume.dimensions[2]);
+    this.origin = new $3Dmol.Vector3(volume.origin[0], volume.origin[1], volume.origin[2]);
+    this.unit = new $3Dmol.Vector3(volume.spacing[0], volume.spacing[1], volume.spacing[2]);
+    this.data = new Float32Array(volume.scalars);
+};
 export class MoleculeMoljs {
+    constructor() {
+        this.defaultOptions = {
+            isoSurfaces: [
+                {
+                    value: 0.005,
+                    color: "#ff0000",
+                    opacity: 0.85
+                },
+                {
+                    value: -0.005,
+                    color: "#0000ff",
+                    opacity: 0.85
+                }
+            ],
+            style: {
+                stick: {
+                    radius: 0.14,
+                },
+                sphere: {
+                    scale: 0.3,
+                },
+            }
+        };
+    }
     /**
@@ -30,4 +60,3 @@ * The component is about to load and it has not
         }
-        this.setCjson();
-        this.setAtoms();
+        this.renderMolecule();
     }
@@ -56,4 +85,3 @@ /**
         console.log('Component did update');
-        this.setCjson();
-        this.setAtoms();
+        this.renderMolecule();
     }
@@ -68,25 +96,74 @@ /**
     setCjson() {
-        if (isChemJson(this.cjsonProp)) {
-            this.cjson = this.cjsonProp;
+        if (!this.cjson) {
+            return;
         }
+        if (isChemJson(this.cjson)) {
+            this.cjsonData = this.cjson;
+        }
         else {
-            this.cjson = JSON.parse(this.cjsonProp);
+            this.cjsonData = JSON.parse(this.cjson);
         }
-        if (!validateChemJson(this.cjson)) {
-            this.cjson = null;
+        if (!validateChemJson(this.cjsonData)) {
+            this.cjsonData = null;
         }
     }
+    renderMolecule() {
+        this.viewer.clear();
+        this.setAtoms();
+        this.setVolume();
+        this.viewer.zoomTo();
+        this.viewer.render();
+    }
     setAtoms() {
-        this.viewer.clear();
-        if (!this.cjson) {
+        const cjson = this.getCjson();
+        if (!cjson || !cjson.atoms) {
             return;
         }
-        let atoms = cjsonToMoljs(this.cjson);
+        let atoms = cjsonToMoljs(cjson);
         this.viewer.setBackgroundColor(0xffffffff);
         let m = this.viewer.addModel();
         m.addAtoms(atoms);
-        m.setStyle({}, { stick: {} });
-        this.viewer.zoomTo();
-        this.viewer.render();
+        m.setStyle({}, this.getStyle());
     }
+    setVolume() {
+        const cjson = this.getCjson();
+        if (!cjson || !cjson.cube) {
+            return;
+        }
+        const volumeData = new $3Dmol.VolumeData(cjson.cube, 'volume');
+        const isoSurfaces = this.getIsoSurfaces();
+        isoSurfaces.forEach((isoSurface) => {
+            let iso = {
+                isoval: isoSurface.value,
+                color: isoSurface.color,
+                opacity: isoSurface.opacity,
+            };
+            if ('smoothness' in isoSurface) {
+                iso.smoothness = isoSurface.smoothness;
+            }
+            this.viewer.addIsosurface(volumeData, iso);
+        });
+    }
+    getCjson() {
+        if (!this.cjsonData) {
+            this.setCjson();
+        }
+        return this.cjsonData;
+    }
+    getIsoSurfaces() {
+        if (this.options && this.options.isoSurfaces) {
+            return this.options.isoSurfaces;
+        }
+        else {
+            return this.defaultOptions.isoSurfaces;
+        }
+    }
+    getStyle() {
+        if (this.options && this.options.style) {
+            return this.options.style;
+        }
+        else {
+            return this.defaultOptions.style;
+        }
+    }
     render() {
@@ -97,5 +174,9 @@ return (h("div", { id: 'mol-viewer' }));
     static get properties() { return {
-        "cjsonProp": {
+        "cjson": {
             "type": String,
-            "attr": "cjson-prop"
+            "attr": "cjson"
+        },
+        "options": {
+            "type": "Any",
+            "attr": "options"
         }
@@ -102,0 +183,0 @@ }; }

dist/esm/es5/molecule-moljs.components.js

 // MoleculeMoljs: Host Data, ES Module/ES5 Target
 
-export var MoleculeMoljs = ["oc-molecule-moljs",function(){return(import("./xfur2ofx.js")).then(function(m){return m.OcMoleculeMoljs})},1,[["cjsonProp",1,0,"cjson-prop",2]]];
+export var MoleculeMoljs = ["oc-molecule-moljs",function(){return(import("./5tub4iv4.js")).then(function(m){return m.OcMoleculeMoljs})},1,[["cjson",1,0,1,2],["options",1]]];

dist/molecule-moljs.js

 /*! Built with http://stenciljs.com */
-!function(e,t,o,r,n,s,l,c,i,u,a,d,m,p){for((a=e.MoleculeMoljs=e.MoleculeMoljs||{}).components=i,(m=i.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((d=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),t.head.insertBefore(d,t.head.firstChild)),function(e,t,o){(e["s-apps"]=e["s-apps"]||[]).push("MoleculeMoljs"),o.componentOnReady||(o.componentOnReady=function(){var t=this;function o(o){if(t.nodeName.indexOf("-")>0){for(var r=e["s-apps"],n=0,s=0;s<r.length;s++)if(e[r[s]].componentOnReady){if(e[r[s]].componentOnReady(t,o))return;n++}if(n<r.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,o])}o(null)}return e.Promise?new e.Promise(o):{then:o}})}(e,0,u),n=n||a.resourcesUrl,d=(m=t.querySelectorAll("script")).length-1;d>=0&&!(p=m[d]).src&&!p.hasAttribute("data-resources-url");d--);m=p.getAttribute("data-resources-url"),!n&&m&&(n=m),!n&&p.src&&(n=(m=p.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"molecule-moljs/"),d=t.createElement("script"),function(e,t,o,r){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in o)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,d)?d.src=n+"molecule-moljs.dowd8rm0.js":(d.src=n+"molecule-moljs.lftydvlk.js",d.setAttribute("type","module"),d.setAttribute("crossorigin",!0)),d.setAttribute("data-resources-url",n),d.setAttribute("data-namespace","molecule-moljs"),t.head.appendChild(d)}(window,document,0,0,0,0,0,0,[["oc-molecule-moljs","xfur2ofx",1,[["cjsonProp",1,0,"cjson-prop",2]]]],HTMLElement.prototype);
+!function(e,t,o,n,r,s,i,l,c,u,a,d,m,p){for((a=e.MoleculeMoljs=e.MoleculeMoljs||{}).components=c,(m=c.filter(function(e){return e[2]}).map(function(e){return e[0]})).length&&((d=t.createElement("style")).innerHTML=m.join()+"{visibility:hidden}.hydrated{visibility:inherit}",d.setAttribute("data-styles",""),t.head.insertBefore(d,t.head.firstChild)),function(e,t,o){(e["s-apps"]=e["s-apps"]||[]).push("MoleculeMoljs"),o.componentOnReady||(o.componentOnReady=function(){var t=this;function o(o){if(t.nodeName.indexOf("-")>0){for(var n=e["s-apps"],r=0,s=0;s<n.length;s++)if(e[n[s]].componentOnReady){if(e[n[s]].componentOnReady(t,o))return;r++}if(r<n.length)return void(e["s-cr"]=e["s-cr"]||[]).push([t,o])}o(null)}return e.Promise?new e.Promise(o):{then:o}})}(e,0,u),r=r||a.resourcesUrl,d=(m=t.querySelectorAll("script")).length-1;d>=0&&!(p=m[d]).src&&!p.hasAttribute("data-resources-url");d--);m=p.getAttribute("data-resources-url"),!r&&m&&(r=m),!r&&p.src&&(r=(m=p.src.split("/").slice(0,-1)).join("/")+(m.length?"/":"")+"molecule-moljs/"),d=t.createElement("script"),function(e,t,o,n){return!(t.search.indexOf("core=esm")>0)&&(!(!(t.search.indexOf("core=es5")>0||"file:"===t.protocol)&&e.customElements&&e.customElements.define&&e.fetch&&e.CSS&&e.CSS.supports&&e.CSS.supports("color","var(--c)")&&"noModule"in o)||function(e){try{return new Function('import("")'),!1}catch(e){}return!0}())}(e,e.location,d)?d.src=r+"molecule-moljs.dowd8rm0.js":(d.src=r+"molecule-moljs.lftydvlk.js",d.setAttribute("type","module"),d.setAttribute("crossorigin",!0)),d.setAttribute("data-resources-url",r),d.setAttribute("data-namespace","molecule-moljs"),t.head.appendChild(d)}(window,document,0,0,0,0,0,0,[["oc-molecule-moljs","5tub4iv4",1,[["cjson",1,0,1,2],["options",1]]]],HTMLElement.prototype);

dist/types/components.d.ts

@@ -32,2 +32,3 @@ import './stencil.core';
   IChemJson,
+  IDisplayOptions,
 } from '@openchemistry/types';
@@ -39,3 +40,4 @@
     interface OcMoleculeMoljs {
-      'cjsonProp': IChemJson | string;
+      'cjson': IChemJson | string;
+      'options': IDisplayOptions;
     }
@@ -63,3 +65,4 @@ }
     export interface OcMoleculeMoljsAttributes extends HTMLAttributes {
-      'cjsonProp'?: IChemJson | string;
+      'cjson'?: IChemJson | string;
+      'options'?: IDisplayOptions;
     }
@@ -66,0 +69,0 @@ }

dist/types/components/molecule-moljs/molecule-moljs.d.ts

 import '../../stencil.core';
 import { IChemJson } from '@openchemistry/types';
+import { IDisplayOptions, IIsoSurface, IStyle } from '@openchemistry/types';
 export declare class MoleculeMoljs {
-    cjsonProp: IChemJson | string;
-    cjson: IChemJson;
+    cjson: IChemJson | string;
+    options: IDisplayOptions;
+    cjsonData: IChemJson;
     viewer: any;
+    defaultOptions: IDisplayOptions;
     /**
@@ -51,4 +54,9 @@ * The component is about to load and it has not
     setCjson(): void;
+    renderMolecule(): void;
     setAtoms(): void;
+    setVolume(): void;
+    getCjson(): IChemJson;
+    getIsoSurfaces(): IIsoSurface[];
+    getStyle(): IStyle;
     render(): JSX.Element;
 }

package.json

 {
   "name": "@openchemistry/molecule-moljs",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Stencil Wrapper for 3Dmoljs with support for cjson chemical data",
@@ -22,4 +22,4 @@ "module": "dist/esm/index.js",
     "3dmol": "1.3.4",
-    "@openchemistry/cjson-utils": "^0.0.1",
-    "@openchemistry/types": "^0.0.2"
+    "@openchemistry/cjson-utils": "^0.0.5",
+    "@openchemistry/types": "^0.0.6"
   },
@@ -26,0 +26,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

171367

increased by4.29%

Lines of code

938

increased by11.4%

Dependency changes

• + Added@openchemistry/cjson-utils@0.0.5(transitive)

• + Added@openchemistry/types@0.0.6(transitive)

• - Removed@openchemistry/cjson-utils@0.0.1(transitive)

• - Removed@openchemistry/types@0.0.2(transitive)

• Updated@openchemistry/cjson-utils@^0.0.5

• Updated@openchemistry/types@^0.0.6