@ccp-nc/crystvis-js 0.5.0 → 0.6.0

package/.github/workflows/test-mocha.yml

@@ -16,13 +16,13 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x, 18.x]
+        node-version: [20.x, 22.x, 24.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# Changelog
+
+All notable changes to crystvis-js will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.6.0] - 2025-07-18
+
+### Changed
+- Updated Three.js from version 0.137 to 0.178
+- Fixed color handling across all primitives to work with new Three.js color management
+- Fixed shader handling for GLSL 3.0 compatibility
+- Improved text rendering with better color handling and transparency
+- Refined material properties for better appearance in the new renderer
+
+### Added
+- Documentation on Three.js migration
+- Improved error handling for shader compilation
+- Better color space handling for all primitives
+
+### Fixed
+- Color issues when upgrading to Three.js 0.178
+- Text rendering and transparency problems
+- Shader compilation errors with GLSL 3.0
+- EllipsoidMesh color handling with different material types
+- Proper handling of atoms and bond materials

package/README.md

@@ -1,6 +1,10 @@
 # crystvis-js
 
-A [Three.js](https://threejs.org/) based crystallographic visualisation tool. It reads multiple file formats and renders them with WebGL to a `canvas` element, allowing the user to interact with them. A few of the key functionality:
+A [Three.js](https://threejs.org/) based crystallographic visualisation tool. It reads multiple file formats and renders them with WebGL to a `canvas` element, allowing the user to interact with them. 
+
+> **Note:** Version 0.6.0 includes a major update from Three.js 0.137 to 0.178. See [Three.js Migration Notes](docs-tutorials/ThreejsMigration.md) and [CHANGELOG](CHANGELOG.md) for details.
+
+A few of the key functionality:
 
 * visualize popular file formats as ball-and-stick structures, easily embedded within a webpage, with orbit mouse control for rotation and zooming;
 * interactive visualisation responsive to user clicks via customizable callbacks;

package/docs/data/search.json

@@ -0,0 +1 @@
+{"list":[{"title":"lib/model.module:js","link":"<a href=\"lib_model.module_js.html\">lib/model.js</a>","description":"<p>Class holding the atomic models to be plotted</p>"},{"title":"lib/model.module:js~AtomImage","link":"<a href=\"lib_model.module_js-AtomImage.html\">AtomImage</a>"},{"title":"lib/model.module:js~AtomImage#addEllipsoid","link":"<a href=\"lib_model.module_js-AtomImage.html#addEllipsoid\">addEllipsoid</a>","description":"<p>Add an ellipsoid to the atom.</p>"},{"title":"lib/model.module:js~AtomImage#addLabel","link":"<a href=\"lib_model.module_js-AtomImage.html#addLabel\">addLabel</a>","description":"<p>Add a text label to the atom.</p>"},{"title":"lib/model.module:js~AtomImage#aura","link":"<a href=\"lib_model.module_js-AtomImage.html#aura\">aura</a>","description":"<p>Aura used to highlight this atom image</p>"},{"title":"lib/model.module:js~AtomImage#baseRadius","link":"<a href=\"lib_model.module_js-AtomImage.html#baseRadius\">baseRadius</a>","description":"<p>Starting radius of the atom</p>"},{"title":"lib/model.module:js~AtomImage#bondedAtoms","link":"<a href=\"lib_model.module_js-AtomImage.html#bondedAtoms\">bondedAtoms</a>","description":"<p>All atoms bonded to this atom</p>"},{"title":"lib/model.module:js~AtomImage#bonds","link":"<a href=\"lib_model.module_js-AtomImage.html#bonds\">bonds</a>","description":"<p>All bonds connected to this atom</p>"},{"title":"lib/model.module:js~AtomImage#bondsFrom","link":"<a href=\"lib_model.module_js-AtomImage.html#bondsFrom\">bondsFrom</a>","description":"<p>Bonds from this atom</p>"},{"title":"lib/model.module:js~AtomImage#bondsTo","link":"<a href=\"lib_model.module_js-AtomImage.html#bondsTo\">bondsTo</a>","description":"<p>Bonds to this atom</p>"},{"title":"lib/model.module:js~AtomImage#color","link":"<a href=\"lib_model.module_js-AtomImage.html#color\">color</a>","description":"<p>Color of the atom</p>"},{"title":"lib/model.module:js~AtomImage#cpkColor","link":"<a href=\"lib_model.module_js-AtomImage.html#cpkColor\">cpkColor</a>","description":"<p>Hex integer code of the conventional CPK color used for this element\n(altered in case of non-standard isotopes)</p>"},{"title":"lib/model.module:js~AtomImage#crystLabel","link":"<a href=\"lib_model.module_js-AtomImage.html#crystLabel\">crystLabel</a>","description":"<p>Crystal site label of this atom</p>"},{"title":"lib/model.module:js~AtomImage#element","link":"<a href=\"lib_model.module_js-AtomImage.html#element\">element</a>","description":"<p>Symbol of this atom's element</p>"},{"title":"lib/model.module:js~AtomImage#elementData","link":"<a href=\"lib_model.module_js-AtomImage.html#elementData\">elementData</a>","description":"<p>Periodic table information for this atom's element</p>"},{"title":"lib/model.module:js~AtomImage#ellipsoidProperty","link":"<a href=\"lib_model.module_js-AtomImage.html#ellipsoidProperty\">ellipsoidProperty</a>","description":"<p>Retrieve or set an ellipsoid's properties</p>"},{"title":"lib/model.module:js~AtomImage#fxyz","link":"<a href=\"lib_model.module_js-AtomImage.html#fxyz\">fxyz</a>","description":"<p>Fractional coordinates of this atom image</p>"},{"title":"lib/model.module:js~AtomImage#fxyz0","link":"<a href=\"lib_model.module_js-AtomImage.html#fxyz0\">fxyz0</a>","description":"<p>Fractional coordinates of this atom's original</p>"},{"title":"lib/model.module:js~AtomImage#getArrayValue","link":"<a href=\"lib_model.module_js-AtomImage.html#getArrayValue\">getArrayValue</a>","description":"<p>Get the value for one array for this image</p>"},{"title":"lib/model.module:js~AtomImage#highlighted","link":"<a href=\"lib_model.module_js-AtomImage.html#highlighted\">highlighted</a>","description":"<p>Whether the atom is highlighted</p>"},{"title":"lib/model.module:js~AtomImage#id","link":"<a href=\"lib_model.module_js-AtomImage.html#id\">id</a>","description":"<p>String ID of the image</p>"},{"title":"lib/model.module:js~AtomImage#ijk","link":"<a href=\"lib_model.module_js-AtomImage.html#ijk\">ijk</a>","description":"<p>Cell indices of this atom image</p>"},{"title":"lib/model.module:js~AtomImage#imgIndex","link":"<a href=\"lib_model.module_js-AtomImage.html#imgIndex\">imgIndex</a>","description":"<p>Index of this image</p>"},{"title":"lib/model.module:js~AtomImage#index","link":"<a href=\"lib_model.module_js-AtomImage.html#index\">index</a>","description":"<p>Index of the atom</p>"},{"title":"lib/model.module:js~AtomImage#isotope","link":"<a href=\"lib_model.module_js-AtomImage.html#isotope\">isotope</a>","description":"<p>Atomic mass of this atom's isotope</p>"},{"title":"lib/model.module:js~AtomImage#isotopeData","link":"<a href=\"lib_model.module_js-AtomImage.html#isotopeData\">isotopeData</a>","description":"<p>Information for this atom's isotope</p>"},{"title":"lib/model.module:js~AtomImage#isotopeGlobal","link":"<a href=\"lib_model.module_js-AtomImage.html#isotopeGlobal\">isotopeGlobal</a>","description":"<p>Atomic mass of the global isotope set as default for this atom's species</p>"},{"title":"lib/model.module:js~AtomImage#labelProperty","link":"<a href=\"lib_model.module_js-AtomImage.html#labelProperty\">labelProperty</a>","description":"<p>Retrieve or set a label's properties</p>"},{"title":"lib/model.module:js~AtomImage#mesh","link":"<a href=\"lib_model.module_js-AtomImage.html#mesh\">mesh</a>","description":"<p>Mesh corresponding to this atom image</p>"},{"title":"lib/model.module:js~AtomImage#model","link":"<a href=\"lib_model.module_js-AtomImage.html#model\">model</a>","description":"<p>Model this atom belongs to</p>"},{"title":"lib/model.module:js~AtomImage#moleculeIndex","link":"<a href=\"lib_model.module_js-AtomImage.html#moleculeIndex\">moleculeIndex</a>","description":"<p>Index of the molecule this atom belongs to</p>"},{"title":"lib/model.module:js~AtomImage#number","link":"<a href=\"lib_model.module_js-AtomImage.html#number\">number</a>","description":"<p>Atomic number of element</p>"},{"title":"lib/model.module:js~AtomImage#opacity","link":"<a href=\"lib_model.module_js-AtomImage.html#opacity\">opacity</a>","description":"<p>Opacity of the atom</p>"},{"title":"lib/model.module:js~AtomImage#radius","link":"<a href=\"lib_model.module_js-AtomImage.html#radius\">radius</a>","description":"<p>Final radius of the atom (starting radius * scale)</p>"},{"title":"lib/model.module:js~AtomImage#removeEllipsoid","link":"<a href=\"lib_model.module_js-AtomImage.html#removeEllipsoid\">removeEllipsoid</a>","description":"<p>Remove the ellipsoid with a given name</p>"},{"title":"lib/model.module:js~AtomImage#removeLabel","link":"<a href=\"lib_model.module_js-AtomImage.html#removeLabel\">removeLabel</a>","description":"<p>Remove the label of a given name</p>"},{"title":"lib/model.module:js~AtomImage#renderer","link":"<a href=\"lib_model.module_js-AtomImage.html#renderer\">renderer</a>","description":"<p>Renderer used by this atom</p>"},{"title":"lib/model.module:js~AtomImage#scale","link":"<a href=\"lib_model.module_js-AtomImage.html#scale\">scale</a>","description":"<p>Scale of the atom</p>"},{"title":"lib/model.module:js~AtomImage#speciesIndex","link":"<a href=\"lib_model.module_js-AtomImage.html#speciesIndex\">speciesIndex</a>","description":"<p>Index of the species of this atom</p>"},{"title":"lib/model.module:js~AtomImage#vdwRadius","link":"<a href=\"lib_model.module_js-AtomImage.html#vdwRadius\">vdwRadius</a>","description":"<p>Van dew Waals radius for this element</p>"},{"title":"lib/model.module:js~AtomImage#visible","link":"<a href=\"lib_model.module_js-AtomImage.html#visible\">visible</a>","description":"<p>Whether the atom is visible</p>"},{"title":"lib/model.module:js~AtomImage#xyz","link":"<a href=\"lib_model.module_js-AtomImage.html#xyz\">xyz</a>","description":"<p>Position of this atom image</p>"},{"title":"lib/model.module:js~AtomImage#xyz0","link":"<a href=\"lib_model.module_js-AtomImage.html#xyz0\">xyz0</a>","description":"<p>Position of this atom's original</p>"},{"title":"lib/model.module:js~BondImage","link":"<a href=\"lib_model.module_js-BondImage.html\">BondImage</a>"},{"title":"lib/model.module:js~BondImage#atom1","link":"<a href=\"lib_model.module_js-BondImage.html#atom1\">atom1</a>","description":"<p>First atom connected to this bond</p>"},{"title":"lib/model.module:js~BondImage#atom2","link":"<a href=\"lib_model.module_js-BondImage.html#atom2\">atom2</a>","description":"<p>Second atom connected to this bond</p>"},{"title":"lib/model.module:js~BondImage#color1","link":"<a href=\"lib_model.module_js-BondImage.html#color1\">color1</a>","description":"<p>First color of the bond</p>"},{"title":"lib/model.module:js~BondImage#color2","link":"<a href=\"lib_model.module_js-BondImage.html#color2\">color2</a>","description":"<p>Second color of the bond</p>"},{"title":"lib/model.module:js~BondImage#key","link":"<a href=\"lib_model.module_js-BondImage.html#key\">key</a>","description":"<p>A unique string key used to quickly reference the bond</p>"},{"title":"lib/model.module:js~BondImage#length","link":"<a href=\"lib_model.module_js-BondImage.html#length\">length</a>","description":"<p>Bond length in Angstroms</p>"},{"title":"lib/model.module:js~BondImage#mesh","link":"<a href=\"lib_model.module_js-BondImage.html#mesh\">mesh</a>","description":"<p>Mesh corresponding to this bond image</p>"},{"title":"lib/model.module:js~BondImage#model","link":"<a href=\"lib_model.module_js-BondImage.html#model\">model</a>","description":"<p>Model this bond belongs to</p>"},{"title":"lib/model.module:js~BondImage#opacity1","link":"<a href=\"lib_model.module_js-BondImage.html#opacity1\">opacity1</a>","description":"<p>First opacity of the bond</p>"},{"title":"lib/model.module:js~BondImage#opacity2","link":"<a href=\"lib_model.module_js-BondImage.html#opacity2\">opacity2</a>","description":"<p>Second opacity of the bond</p>"},{"title":"lib/model.module:js~BondImage#radius","link":"<a href=\"lib_model.module_js-BondImage.html#radius\">radius</a>","description":"<p>Radius of the bond</p>"},{"title":"lib/model.module:js~BondImage#renderer","link":"<a href=\"lib_model.module_js-BondImage.html#renderer\">renderer</a>","description":"<p>Renderer used by this bond</p>"},{"title":"lib/model.module:js~BondImage#visible","link":"<a href=\"lib_model.module_js-BondImage.html#visible\">visible</a>","description":"<p>Whether the bond is visible</p>"},{"title":"lib/model.module:js~Model","link":"<a href=\"lib_model.module_js-Model.html\">Model</a>","description":"<p>An object containing an Atomic structure and taking care of its periodic\nnature, allowing querying and selection, and so on.</p>"},{"title":"lib/model.module:js~Model#absToFrac","link":"<a href=\"lib_model.module_js-Model.html#absToFrac\">absToFrac</a>","description":"<p>Convert absolute coordinates to fractional</p>"},{"title":"lib/model.module:js~Model#addLink","link":"<a href=\"lib_model.module_js-Model.html#addLink\">addLink</a>","description":"<p>Add link drawn on model</p>"},{"title":"lib/model.module:js~Model#addSphere","link":"<a href=\"lib_model.module_js-Model.html#addSphere\">addSphere</a>","description":"<p>Add a sphere drawn on model</p>"},{"title":"lib/model.module:js~Model#all","link":"<a href=\"lib_model.module_js-Model.html#all\">all</a>","description":"<p>ModelView containing all the atoms of the image</p>"},{"title":"lib/model.module:js~Model#atoms","link":"<a href=\"lib_model.module_js-Model.html#atoms\">atoms</a>","description":"<p>Atom images in this model</p>"},{"title":"lib/model.module:js~Model#axes","link":"<a href=\"lib_model.module_js-Model.html#axes\">axes</a>","description":"<p>Graphical object representing the unit cell's axes</p>"},{"title":"lib/model.module:js~Model#box","link":"<a href=\"lib_model.module_js-Model.html#box\">box</a>","description":"<p>Graphical object representing the unit cell's box</p>"},{"title":"lib/model.module:js~Model#cell","link":"<a href=\"lib_model.module_js-Model.html#cell\">cell</a>","description":"<p>Unit cell of the model's original cell</p>"},{"title":"lib/model.module:js~Model#clearGraphics","link":"<a href=\"lib_model.module_js-Model.html#clearGraphics\">clearGraphics</a>","description":"<p>Remove all graphical objects</p>"},{"title":"lib/model.module:js~Model#crystalLabels","link":"<a href=\"lib_model.module_js-Model.html#crystalLabels\">crystalLabels</a>","description":"<p>Crystallographic labels of each atom</p>"},{"title":"lib/model.module:js~Model#deleteArray","link":"<a href=\"lib_model.module_js-Model.html#deleteArray\">deleteArray</a>","description":"<p>Delete an array from the underlying Atoms object</p>"},{"title":"lib/model.module:js~Model#find","link":"<a href=\"lib_model.module_js-Model.html#find\">find</a>","description":"<p>Find a group of atoms based on a given query and return as AtomImages</p>"},{"title":"lib/model.module:js~Model#fracToAbs","link":"<a href=\"lib_model.module_js-Model.html#fracToAbs\">fracToAbs</a>","description":"<p>Convert fractional coordinates to absolute</p>"},{"title":"lib/model.module:js~Model#getArray","link":"<a href=\"lib_model.module_js-Model.html#getArray\">getArray</a>","description":"<p>Retrieve an array from the underlying Atoms object</p>"},{"title":"lib/model.module:js~Model#hasArray","link":"<a href=\"lib_model.module_js-Model.html#hasArray\">hasArray</a>","description":"<p>Check if an array exists in the underlying Atoms object</p>"},{"title":"lib/model.module:js~Model#info","link":"<a href=\"lib_model.module_js-Model.html#info\">info</a>","description":"<p>Additional information from the model's original cell</p>"},{"title":"lib/model.module:js~Model#length","link":"<a href=\"lib_model.module_js-Model.html#length\">length</a>","description":"<p>Number of atoms in this model's original cell</p>"},{"title":"lib/model.module:js~Model#minimumSupercell","link":"<a href=\"lib_model.module_js-Model.html#minimumSupercell\">minimumSupercell</a>","description":"<p>Compute and return the minimum supercell that guarantees\ncontaining all atoms at a maximum distance r from those in the\n[0,0,0] cell.</p>"},{"title":"lib/model.module:js~Model#numbers","link":"<a href=\"lib_model.module_js-Model.html#numbers\">numbers</a>","description":"<p>Atomic numbers in this model's original cell</p>"},{"title":"lib/model.module:js~Model#pbc","link":"<a href=\"lib_model.module_js-Model.html#pbc\">pbc</a>","description":"<p>Periodic boundary conditions</p>"},{"title":"lib/model.module:js~Model#periodic","link":"<a href=\"lib_model.module_js-Model.html#periodic\">periodic</a>","description":"<p>Whether this model is periodic in all three directions of space</p>"},{"title":"lib/model.module:js~Model#positions","link":"<a href=\"lib_model.module_js-Model.html#positions\">positions</a>","description":"<p>Coordinates of the atoms in this model's original cell</p>"},{"title":"lib/model.module:js~Model#removeGraphics","link":"<a href=\"lib_model.module_js-Model.html#removeGraphics\">removeGraphics</a>","description":"<p>Remove the graphical object with a given name</p>"},{"title":"lib/model.module:js~Model#renderer","link":"<a href=\"lib_model.module_js-Model.html#renderer\">renderer</a>","description":"<p>Renderer used for this model's graphics</p>"},{"title":"lib/model.module:js~Model#scaledPositions","link":"<a href=\"lib_model.module_js-Model.html#scaledPositions\">scaledPositions</a>","description":"<p>Fractional coordinates of the atoms in this model's original cell</p>"},{"title":"lib/model.module:js~Model#setArray","link":"<a href=\"lib_model.module_js-Model.html#setArray\">setArray</a>","description":"<p>Set an array for the underlying Atoms object</p>"},{"title":"lib/model.module:js~Model#speciesIndices","link":"<a href=\"lib_model.module_js-Model.html#speciesIndices\">speciesIndices</a>","description":"<p>Indices of each atom by their species (e.g. C1, C2, H1, C3, H2, etc.)</p>"},{"title":"lib/model.module:js~Model#supercell","link":"<a href=\"lib_model.module_js-Model.html#supercell\">supercell</a>","description":"<p>Shape of the supercell for this model</p>"},{"title":"lib/model.module:js~Model#supercellGrid","link":"<a href=\"lib_model.module_js-Model.html#supercellGrid\">supercellGrid</a>","description":"<p>Full grid of origin coordinates of the cells making up the supercell</p>"},{"title":"lib/model.module:js~Model#symbols","link":"<a href=\"lib_model.module_js-Model.html#symbols\">symbols</a>","description":"<p>Chemical symbols in this model's original cell</p>"},{"title":"lib/model.module:js~Model#vdwElementScaling","link":"<a href=\"lib_model.module_js-Model.html#vdwElementScaling\">vdwElementScaling</a>","description":"<p>Table of scaling factors by element for Van der Waals radii</p>"},{"title":"lib/model.module:js~Model#vdwScaling","link":"<a href=\"lib_model.module_js-Model.html#vdwScaling\">vdwScaling</a>","description":"<p>Global scaling factor for Van der Waals radii</p>"},{"title":"lib/model.module:js~Model#view","link":"<a href=\"lib_model.module_js-Model.html#view\">view</a>","description":"<p>Create a new ModelView for this model, using a given list of indices</p>"},{"title":"lib/modelview.module:js","link":"<a href=\"lib_modelview.module_js.html\">lib/modelview.js</a>","description":"<p>Class holding &quot;model views&quot;, subsets of atoms in a Model used\nfor selection or to perform operations in block</p>"},{"title":"lib/modelview.module:js~ModelView","link":"<a href=\"lib_modelview.module_js-ModelView.html\">ModelView</a>"},{"title":"lib/modelview.module:js~ModelView#addEllipsoids","link":"<a href=\"lib_modelview.module_js-ModelView.html#addEllipsoids\">addEllipsoids</a>","description":"<p>Add ellipsoids to the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#addLabels","link":"<a href=\"lib_modelview.module_js-ModelView.html#addLabels\">addLabels</a>","description":"<p>Add labels to the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#and","link":"<a href=\"lib_modelview.module_js-ModelView.html#and\">and</a>","description":"<p>Intersection with another ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#atoms","link":"<a href=\"lib_modelview.module_js-ModelView.html#atoms\">atoms</a>","description":"<p>Atom images in this view</p>"},{"title":"lib/modelview.module:js~ModelView#elements","link":"<a href=\"lib_modelview.module_js-ModelView.html#elements\">elements</a>","description":"<p>Get sorted set of unique elements in the ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#ellipsoidProperties","link":"<a href=\"lib_modelview.module_js-ModelView.html#ellipsoidProperties\">ellipsoidProperties</a>","description":"<p>Get or set ellipsoids' properties for the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#find","link":"<a href=\"lib_modelview.module_js-ModelView.html#find\">find</a>","description":"<p>Perform a further search within the atoms included in this ModelView.</p>"},{"title":"lib/modelview.module:js~ModelView#hide","link":"<a href=\"lib_modelview.module_js-ModelView.html#hide\">hide</a>","description":"<p>Make all atoms in the view invisible. Can be chained</p>"},{"title":"lib/modelview.module:js~ModelView#indices","link":"<a href=\"lib_modelview.module_js-ModelView.html#indices\">indices</a>","description":"<p>Indices of the atom images in this view</p>"},{"title":"lib/modelview.module:js~ModelView#labelProperties","link":"<a href=\"lib_modelview.module_js-ModelView.html#labelProperties\">labelProperties</a>","description":"<p>Get or set labels' properties for the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#length","link":"<a href=\"lib_modelview.module_js-ModelView.html#length\">length</a>","description":"<p>Number of atom images in this view</p>"},{"title":"lib/modelview.module:js~ModelView#map","link":"<a href=\"lib_modelview.module_js-ModelView.html#map\">map</a>","description":"<p>Run a function on each AtomImage, returning an Array of the results.</p>"},{"title":"lib/modelview.module:js~ModelView#model","link":"<a href=\"lib_modelview.module_js-ModelView.html#model\">model</a>","description":"<p>Model used by this view</p>"},{"title":"lib/modelview.module:js~ModelView#not","link":"<a href=\"lib_modelview.module_js-ModelView.html#not\">not</a>","description":"<p>Complement to this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#or","link":"<a href=\"lib_modelview.module_js-ModelView.html#or\">or</a>","description":"<p>Union with another ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#remove","link":"<a href=\"lib_modelview.module_js-ModelView.html#remove\">remove</a>","description":"<p>Remove all atoms in mview from the current view</p>"},{"title":"lib/modelview.module:js~ModelView#removeEllipsoids","link":"<a href=\"lib_modelview.module_js-ModelView.html#removeEllipsoids\">removeEllipsoids</a>","description":"<p>Remove ellipsoids from the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#removeLabels","link":"<a href=\"lib_modelview.module_js-ModelView.html#removeLabels\">removeLabels</a>","description":"<p>Remove labels from the atom images in this ModelView</p>"},{"title":"lib/modelview.module:js~ModelView#setProperty","link":"<a href=\"lib_modelview.module_js-ModelView.html#setProperty\">setProperty</a>","description":"<p>Set some property of the atoms within the ModelView.</p>"},{"title":"lib/modelview.module:js~ModelView#show","link":"<a href=\"lib_modelview.module_js-ModelView.html#show\">show</a>","description":"<p>Make all atoms in the view visible. Can be chained</p>"},{"title":"lib/modelview.module:js~ModelView#uniqueSites","link":"<a href=\"lib_modelview.module_js-ModelView.html#uniqueSites\">uniqueSites</a>","description":"<p>Unique atoms in the current view (based on site labels)</p>"},{"title":"lib/modelview.module:js~ModelView#unique_labels_multiplicity","link":"<a href=\"lib_modelview.module_js-ModelView.html#unique_labels_multiplicity\">unique_labels_multiplicity</a>","description":"<p>Multiplicity of the atoms in the view</p>"},{"title":"lib/modelview.module:js~ModelView#xor","link":"<a href=\"lib_modelview.module_js-ModelView.html#xor\">xor</a>","description":"<p>Exclusive OR with another ModelView</p>"},{"title":"lib/visualizer.module:js","link":"<a href=\"lib_visualizer.module_js.html\">lib/visualizer.js</a>","description":"<p>Class constituting the main object that plots crystals in the webpage</p>"},{"title":"lib/visualizer.module:js~CrystVis","link":"<a href=\"lib_visualizer.module_js-CrystVis.html\">CrystVis</a>","description":"<p>An object providing a full interface to a renderer for crystallographic\nmodels</p>"},{"title":"lib/visualizer.module:js~CrystVis#addNotification","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#addNotification\">addNotification</a>","description":"<p>Add a notification to the list of notifications to be displayed</p>"},{"title":"lib/visualizer.module:js~CrystVis#addNotifications","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#addNotifications\">addNotifications</a>","description":"<p>Adds all notifications to the drawing</p>"},{"title":"lib/visualizer.module:js~CrystVis#addPrimitive","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#addPrimitive\">addPrimitive</a>","description":"<p>Add a primitive shape to the drawing</p>"},{"title":"lib/visualizer.module:js~CrystVis#centerCamera","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#centerCamera\">centerCamera</a>","description":"<p>Center the camera on a given point</p>"},{"title":"lib/visualizer.module:js~CrystVis#clearNotifications","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#clearNotifications\">clearNotifications</a>","description":"<p>Removes notifications from the drawing</p>"},{"title":"lib/visualizer.module:js~CrystVis#deleteModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#deleteModel\">deleteModel</a>","description":"<p>Erase a model from the recorded ones</p>"},{"title":"lib/visualizer.module:js~CrystVis#displayModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#displayModel\">displayModel</a>","description":"<p>Render a model</p>"},{"title":"lib/visualizer.module:js~CrystVis#displayed","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#displayed\">displayed</a>","description":"<p>Displayed atoms</p>"},{"title":"lib/visualizer.module:js~CrystVis#getScreenshotData","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#getScreenshotData\">getScreenshotData</a>","description":"<p>Recover a data URL of a PNG screenshot of the current scene</p>"},{"title":"lib/visualizer.module:js~CrystVis#highlightSelected","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#highlightSelected\">highlightSelected</a>","description":"<p>Whether the selected atoms should be highlighted with auras</p>"},{"title":"lib/visualizer.module:js~CrystVis#loadModels","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#loadModels\">loadModels</a>","description":"<p>Load one or more atomic models from a file's contents</p>"},{"title":"lib/visualizer.module:js~CrystVis#model","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#model\">model</a>","description":"<p>Currently loaded model</p>"},{"title":"lib/visualizer.module:js~CrystVis#modelList","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#modelList\">modelList</a>","description":"<p>List of loaded models</p>"},{"title":"lib/visualizer.module:js~CrystVis#modelName","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#modelName\">modelName</a>","description":"<p>Name of the currently loaded model</p>"},{"title":"lib/visualizer.module:js~CrystVis#onAtomBox","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#onAtomBox\">onAtomBox</a>","description":"<p>Set a callback function for an event where a user drags a box around multiple atoms.\nThe function should take as arguments a ModelView including the atoms in the box:</p>\n<p>function callback(view) {\n...\n}</p>"},{"title":"lib/visualizer.module:js~CrystVis#onAtomClick","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#onAtomClick\">onAtomClick</a>","description":"<p>Set a callback function for an event where a user clicks on an atom. The\nfunction should take as arguments the atom image for the clicked atom and\nthe event object:</p>\n<p>function callback(atom, event) {\n...\n}</p>"},{"title":"lib/visualizer.module:js~CrystVis#reloadModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#reloadModel\">reloadModel</a>","description":"<p>Reload a model, possibly with new parameters</p>"},{"title":"lib/visualizer.module:js~CrystVis#removePrimitive","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#removePrimitive\">removePrimitive</a>","description":"<p>Remove a primitive shape from the drawing</p>"},{"title":"lib/visualizer.module:js~CrystVis#selected","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#selected\">selected</a>","description":"<p>Selected atoms</p>"},{"title":"lib/visualizer.module:js~CrystVis#theme","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#theme\">theme</a>","description":"<p>Theme</p>"}]}

package/docs/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Home</title><!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section class="readme"><article><h1>crystvis-js</h1><p>A <a href="https://threejs.org/">Three.js</a> based crystallographic visualisation tool. It reads multiple file formats and renders them with WebGL to a <code>canvas</code> element, allowing the user to interact with them.</p><blockquote><p><strong>Note:</strong> Version 0.6.0 includes a major update from Three.js 0.137 to 0.178. See <a href="docs-tutorials/ThreejsMigration.md">Three.js Migration Notes</a> and <a href="CHANGELOG.md">CHANGELOG</a> for details.</p></blockquote><p>A few of the key functionality:</p><ul><li>visualize popular file formats as ball-and-stick structures, easily embedded within a webpage, with orbit mouse control for rotation and zooming;</li><li>interactive visualisation responsive to user clicks via customizable callbacks;</li><li>high definition text labels;</li><li>advanced searching and selection functions to interact with specific subset of atoms (select by proximity, bonding, species and more);</li><li>smart visualisation of molecular crystal: reconstruct full molecules across the periodic boundary;</li><li>compute and display isosurfaces from volumetric data;</li><li>visualize tensor data as ellipsoids centred on atoms.</li></ul><h3>Supported formats</h3><p>The currently supported file formats are the following:</p><ul><li><strong>CIF</strong>, using <a href="https://github.com/CCP-NC/crystcif-parse">crystcif-parse</a>;</li><li><strong>XYZ</strong>, specifically the Extended XYZ such as the one written by the <a href="https://wiki.fysik.dtu.dk/ase/">Atomic Simulation Environment</a>;</li><li><strong>CELL</strong>, input file supported by the DFT package <a href="http://www.castep.org/">CASTEP</a>;</li><li><strong>Magres</strong>, output file format for simulated NMR parameters used by CASTEP and Quantum Espresso and developed by the <a href="https://www.ccpnc.ac.uk/">CCP for NMR Crystallography</a>.</li></ul><h3>Getting started</h3><p>In order to install <code>crystvis-js</code>, simply use the Node Package Manager:</p><pre class="prettyprint source lang-bash"><code>npm install crystvis-js --save
+</code></pre><p>You can then create a visualizer for your webpage by simply importing and instantiating it:</p><pre class="prettyprint source lang-js"><code>import CrystVis from 'crystvis-js';
+
+const visualizer = CrystVis('#target-id', 800, 600)
+</code></pre><p>will create an 800x600 canvas with the visualizer inside the element specified by the given selector. To load a model, simply load the contents of your file as a text string and then pass them to the visualizer's <code>loadModels</code> method:</p><pre class="prettyprint source lang-js"><code>var loaded = visualizer.loadModels(contents);
+console.log('Models loaded: ', loaded);
+visualizer.displayModel(loaded[0])
+</code></pre><h3>Preparing for development</h3><p>If you want to develop for crystvis-js, you should follow these steps:</p><ul><li>fork the repository</li><li>clone the forked repository locally to your system</li><li>install all the required packages, <em>including the development dependencies</em>, with <code>npm install --production=false</code></li></ul><p>You're then ready to develop. In particular you can use:</p><ul><li><code>npm test</code> to run with Mocha the suite of tests found in <code>./test</code></li><li><code>npm start</code> to start a server that includes the in-browser tests from <code>./test/test-html</code> as well as the demo from <code>./demo</code></li><li><code>npm run docs</code> to compile the documents</li><li><code>npm run deploy-docs</code> to compile the documents and then deploy them to the <code>gh-pages</code> branch of your repository</li></ul><h4>Fonts and shaders</h4><p>Some additional steps are necessary when dealing with fonts and shaders. You generally shouldn't worry about these when working with most of the code, but in some special cases it might be necessary to do this.</p><p>Fonts in crystvis-js need to be translated to a bitmap format to be usable. In other words, a regular font format (like a TTF file) must be rendered into a bitmap texture and a table of coordinates designating each letter to then be used in graphical rendering. This operation relies on the library <code>msdf-bmfont-xml</code> and is executed by running the command <code>npm run build-fonts</code>. The original fonts are found in the <code>./fonts</code> folder, and they get rendered to <code>./lib/assets/fonts</code>. This command needs only to be rerun <em>if the TTF files change</em>.</p><p>Shaders are provided as <code>.frag</code> and <code>.vert</code> files. Both shaders and font textures need to baked directly into the JavaScript files in order to be included in the final build. Since ESBuild (the package used to build crystvis-js) has a hard time dealing with them in the final pass, they get pre-baked with an additional step that only needs to be repeated whenever either of them changes. This consists of taking &quot;template&quot; JS files (for shaders it's <code>./lib/shaders/index.in.js</code>, for fonts <code>./lib/assets/fonts/bmpfonts.in.js</code>) and rebuilding them into final files with the assets imported in data URL form. The script to do this is <code>npm run build-resources</code>. This command only needs to be rerun <em>if the fonts were rebuilt, if the shader code was edited, or if any of the two template files was changed</em>.</p></article></section></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><div class="mobile-nav-links"></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>

package/docs/lib_model.module_js-AtomImage.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Class: AtomImage</title><!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="AtomImage-title" class="has-anchor"><span class="ancestors"><a href="lib_model.module_js.html">lib/model.js</a>~</span> AtomImage</h1><div class="class-description"><p>An 'image' of a single atom from a model. This represents a specific periodic copy of that atom (if applicable).</p></div></header><article><div class="container-overview"><h2 id="constructor" class="has-anchor">Constructor</h2><h3 class="name has-anchor" id="AtomImage"><span class="type-signature"></span>new AtomImage<span class="signature">(model, index, ijk)</span></h3><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>model</code></td><td class="type"><span class="param-type">Model</span></td><td class="description last"><p>The model from which the image is from</p></td></tr><tr><td class="name"><code>index</code></td><td class="type"><span class="param-type">int</span></td><td class="description last"><p>Index of the atom in the model</p></td></tr><tr><td class="name"><code>ijk</code></td><td class="type"><span class="param-type">Array</span></td><td class="description last"><p>Indices of the cell in which the image is located</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line32">line 32</a></li></ul></dd></div></dl></div><h2 id="members" class="subsection-title has-anchor">Members</h2><h3 class="name has-anchor" id="aura"><span class="type-signature">(readonly) </span>aura<span class="type-signature"> :AuraMesh</span></h3><div class="description"><p>Aura used to highlight this atom image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">AuraMesh</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line364">line 364</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="baseRadius"><span class="type-signature"></span>baseRadius<span class="type-signature"> :float</span></h3><div class="description"><p>Starting radius of the atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line418">line 418</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="bondedAtoms"><span class="type-signature">(readonly) </span>bondedAtoms<span class="type-signature"> :Array.&lt;AtomImage></span></h3><div class="description"><p>All atoms bonded to this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;AtomImage></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line282">line 282</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="bonds"><span class="type-signature">(readonly) </span>bonds<span class="type-signature"> :Array.&lt;BondImage></span></h3><div class="description"><p>All bonds connected to this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;BondImage></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line273">line 273</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="bondsFrom"><span class="type-signature">(readonly) </span>bondsFrom<span class="type-signature"> :Array.&lt;BondImage></span></h3><div class="description"><p>Bonds from this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;BondImage></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line255">line 255</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="bondsTo"><span class="type-signature">(readonly) </span>bondsTo<span class="type-signature"> :Array.&lt;BondImage></span></h3><div class="description"><p>Bonds to this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;BondImage></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line264">line 264</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="color"><span class="type-signature"></span>color<span class="type-signature"> :int</span></h3><div class="description"><p>Color of the atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line467">line 467</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="cpkColor"><span class="type-signature">(readonly) </span>cpkColor<span class="type-signature"> :int</span></h3><div class="description"><p>Hex integer code of the conventional CPK color used for this element (altered in case of non-standard isotopes)</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line237">line 237</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="crystLabel"><span class="type-signature">(readonly) </span>crystLabel<span class="type-signature"> :String</span></h3><div class="description"><p>Crystal site label of this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">String</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line162">line 162</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="element"><span class="type-signature">(readonly) </span>element<span class="type-signature"> :String</span></h3><div class="description"><p>Symbol of this atom's element</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">String</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line153">line 153</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="elementData"><span class="type-signature">(readonly) </span>elementData<span class="type-signature"> :Object</span></h3><div class="description"><p>Periodic table information for this atom's element</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Object</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line171">line 171</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="fxyz"><span class="type-signature">(readonly) </span>fxyz<span class="type-signature"> :Array.&lt;float></span></h3><div class="description"><p>Fractional coordinates of this atom image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;float></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line332">line 332</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="fxyz0"><span class="type-signature">(readonly) </span>fxyz0<span class="type-signature"> :Array.&lt;float></span></h3><div class="description"><p>Fractional coordinates of this atom's original</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;float></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line323">line 323</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="highlighted"><span class="type-signature"></span>highlighted<span class="type-signature"> :bool</span></h3><div class="description"><p>Whether the atom is highlighted</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">bool</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line524">line 524</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="id"><span class="type-signature">(readonly) </span>id<span class="type-signature"> :String</span></h3><div class="description"><p>String ID of the image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">String</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line126">line 126</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="ijk"><span class="type-signature">(readonly) </span>ijk<span class="type-signature"> :Array.&lt;int></span></h3><div class="description"><p>Cell indices of this atom image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;int></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line296">line 296</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="imgIndex"><span class="type-signature">(readonly) </span>imgIndex<span class="type-signature"> :int</span></h3><div class="description"><p>Index of this image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line135">line 135</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="index"><span class="type-signature">(readonly) </span>index<span class="type-signature"> :int</span></h3><div class="description"><p>Index of the atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line117">line 117</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="isotope"><span class="type-signature"></span>isotope<span class="type-signature"> :int</span></h3><div class="description"><p>Atomic mass of this atom's isotope</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line191">line 191</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="isotopeData"><span class="type-signature">(readonly) </span>isotopeData<span class="type-signature"> :Object</span></h3><div class="description"><p>Information for this atom's isotope</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Object</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line180">line 180</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="isotopeGlobal"><span class="type-signature"></span>isotopeGlobal<span class="type-signature"> :int</span></h3><div class="description"><p>Atomic mass of the global isotope set as default for this atom's species</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line209">line 209</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="mesh"><span class="type-signature">(readonly) </span>mesh<span class="type-signature"> :AtomMesh</span></h3><div class="description"><p>Mesh corresponding to this atom image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">AtomMesh</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line350">line 350</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="model"><span class="type-signature">(readonly) </span>model<span class="type-signature"> :Model</span></h3><div class="description"><p>Model this atom belongs to</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Model</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line93">line 93</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="moleculeIndex"><span class="type-signature">(readonly) </span>moleculeIndex<span class="type-signature"> :int</span></h3><div class="description"><p>Index of the molecule this atom belongs to</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line341">line 341</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="number"><span class="type-signature">(readonly) </span>number<span class="type-signature"> :int</span></h3><div class="description"><p>Atomic number of element</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line226">line 226</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="opacity"><span class="type-signature"></span>opacity<span class="type-signature"> :float</span></h3><div class="description"><p>Opacity of the atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line499">line 499</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="radius"><span class="type-signature"></span>radius<span class="type-signature"> :float</span></h3><div class="description"><p>Final radius of the atom (starting radius * scale)</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line452">line 452</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="renderer"><span class="type-signature">(readonly) </span>renderer<span class="type-signature"> :Renderer</span></h3><div class="description"><p>Renderer used by this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Renderer</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line102">line 102</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="scale"><span class="type-signature"></span>scale<span class="type-signature"> :float</span></h3><div class="description"><p>Scale of the atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line435">line 435</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="speciesIndex"><span class="type-signature">(readonly) </span>speciesIndex<span class="type-signature"> :int</span></h3><div class="description"><p>Index of the species of this atom</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line144">line 144</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="vdwRadius"><span class="type-signature">(readonly) </span>vdwRadius<span class="type-signature"> :float</span></h3><div class="description"><p>Van dew Waals radius for this element</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line246">line 246</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="visible"><span class="type-signature"></span>visible<span class="type-signature"> :bool</span></h3><div class="description"><p>Whether the atom is visible</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">bool</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line383">line 383</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="xyz"><span class="type-signature">(readonly) </span>xyz<span class="type-signature"> :Array.&lt;float></span></h3><div class="description"><p>Position of this atom image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;float></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line314">line 314</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="xyz0"><span class="type-signature">(readonly) </span>xyz0<span class="type-signature"> :Array.&lt;float></span></h3><div class="description"><p>Position of this atom's original</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Array.&lt;float></span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line305">line 305</a></li></ul></dd></div></dl><h2 id="methods" class="subsection-title has-anchor">Methods</h2><h3 class="name has-anchor" id="addEllipsoid"><span class="type-signature"></span>addEllipsoid<span class="signature">(data, name, parameters)</span></h3><div class="description"><p>Add an ellipsoid to the atom.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>data</code></td><td class="type"><span class="param-type">TensorData</span> |<wbr> <span class="param-type">Object</span> |<wbr> <span class="param-type">Array</span></td><td class="description last"><p>The data to base the ellipsoid on. Can be: - a TensorData object; - an Object with 'eigenvalues' and 'eigenvectors' members - an Array of the form [eigenvalues, eigenvectors]</p></td></tr><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Name of the ellipsoid</p></td></tr><tr><td class="name"><code>parameters</code></td><td class="type"><span class="param-type">Object</span></td><td class="description last"><p>Additional options to pass (see EllipsoidMesh)</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line612">line 612</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="addLabel"><span class="type-signature"></span>addLabel<span class="signature">(text, name, parameters)</span></h3><div class="description"><p>Add a text label to the atom.</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>text</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Content of the label</p></td></tr><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Name to use to refer to the label (necessary to overwrite/erase later)</p></td></tr><tr><td class="name"><code>parameters</code></td><td class="type"><span class="param-type">Object</span></td><td class="description last"><p>Dictionary of other options (e.g. font family, text color, etc. See TextSprite)</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line548">line 548</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="ellipsoidProperty"><span class="type-signature"></span>ellipsoidProperty<span class="signature">(name, property, value)</span></h3><div class="description"><p>Retrieve or set an ellipsoid's properties</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="default"></td><td class="description last"><p>Name of the ellipsoid</p></td></tr><tr><td class="name"><code>property</code></td><td class="type"><span class="param-type">String</span></td><td class="default"></td><td class="description last"><p>Property to set</p></td></tr><tr><td class="name"><code>value</code></td><td class="type"><span class="param-type">?</span></td><td class="default">null</td><td class="description last"><p>Value to set. If omitted, returns the current value instead.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line662">line 662</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="getArrayValue"><span class="type-signature"></span>getArrayValue<span class="signature">(name)</span><span class="type-signature"> &rarr; {*}</span></h3><div class="description"><p>Get the value for one array for this image</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Name of the array</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line676">line 676</a></li></ul></dd></div></dl><div class="method-member-container mt-20"><strong>Returns:</strong><div class="param-desc"><p>Value of the array for this atom</p></div><dl class="param-type"><dt>Type:&nbsp;</dt><dd><span class="param-type">*</span></dd></dl></div><h3 class="name has-anchor" id="labelProperty"><span class="type-signature"></span>labelProperty<span class="signature">(name, property, value)</span></h3><div class="description"><p>Retrieve or set a label's properties</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th>Default</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="default"></td><td class="description last"><p>Name of the label</p></td></tr><tr><td class="name"><code>property</code></td><td class="type"><span class="param-type">String</span></td><td class="default"></td><td class="description last"><p>Property to set</p></td></tr><tr><td class="name"><code>value</code></td><td class="type"><span class="param-type">?</span></td><td class="default">null</td><td class="description last"><p>Value to set. If omitted, returns the current value instead.</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line590">line 590</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="removeEllipsoid"><span class="type-signature"></span>removeEllipsoid<span class="signature">(name)</span></h3><div class="description"><p>Remove the ellipsoid with a given name</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Name of the ellipsoid</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line647">line 647</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="removeLabel"><span class="type-signature"></span>removeLabel<span class="signature">(name)</span></h3><div class="description"><p>Remove the label of a given name</p></div><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>name</code></td><td class="type"><span class="param-type">String</span></td><td class="description last"><p>Name of the label</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line574">line 574</a></li></ul></dd></div></dl></article></section></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><div class="mobile-nav-links"></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>

package/docs/lib_model.module_js-BondImage.html

@@ -0,0 +1,3 @@
+<!DOCTYPE html><html lang="en" style="font-size:16px"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Class: BondImage</title><!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]--><script src="scripts/third-party/hljs.js" defer="defer"></script><script src="scripts/third-party/hljs-line-num.js" defer="defer"></script><script src="scripts/third-party/popper.js" defer="defer"></script><script src="scripts/third-party/tippy.js" defer="defer"></script><script src="scripts/third-party/tocbot.min.js"></script><script>var baseURL="/",locationPathname="";baseURL=(locationPathname=document.location.pathname).substr(0,locationPathname.lastIndexOf("/")+1)</script><link rel="stylesheet" href="styles/clean-jsdoc-theme.min.css"><svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none"><defs><symbol id="copy-icon" viewbox="0 0 488.3 488.3"><g><path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/><path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z"/></g></symbol><symbol id="search-icon" viewBox="0 0 512 512"><g><g><path d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z"/></g></g><g><g><path d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z"/></g></g></symbol><symbol id="font-size-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154l-2-5zm-.8-2L8 6.885 5.554 13h4.892zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93zM19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></symbol><symbol id="add-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></symbol><symbol id="minus-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 11h14v2H5z"/></symbol><symbol id="dark-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938 7.999 7.999 0 0 0 4 12z"/></symbol><symbol id="light-theme-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></symbol><symbol id="reset-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M18.537 19.567A9.961 9.961 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10c0 2.136-.67 4.116-1.81 5.74L17 12h3a8 8 0 1 0-2.46 5.772l.997 1.795z"/></symbol><symbol id="down-icon" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"></path></symbol><symbol id="codepen-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.5 13.202L13 15.535v3.596L19.197 15 16.5 13.202zM14.697 12L12 10.202 9.303 12 12 13.798 14.697 12zM20 10.869L18.303 12 20 13.131V10.87zM19.197 9L13 4.869v3.596l3.5 2.333L19.197 9zM7.5 10.798L11 8.465V4.869L4.803 9 7.5 10.798zM4.803 15L11 19.131v-3.596l-3.5-2.333L4.803 15zM4 13.131L5.697 12 4 10.869v2.262zM2 9a1 1 0 0 1 .445-.832l9-6a1 1 0 0 1 1.11 0l9 6A1 1 0 0 1 22 9v6a1 1 0 0 1-.445.832l-9 6a1 1 0 0 1-1.11 0l-9-6A1 1 0 0 1 2 15V9z"/></symbol><symbol id="close-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></symbol><symbol id="menu-icon" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></symbol></defs></svg></head><body data-theme="dark"><div class="sidebar-container"><div class="sidebar" id="sidebar"><div class="sidebar-items-container"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div></div></div><div class="navbar-container" id="VuAckcnZhf"><nav class="navbar"><div class="navbar-left-items"></div><div class="navbar-right-items"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div><nav></nav></nav></div><div class="toc-container"><div class="toc-content"><span class="bold">On this page</span><div id="eed4d2a0bfd64539bb9df78095dec881"></div></div></div><div class="body-wrapper"><div class="main-content"><div class="main-wrapper"><section><header><h1 id="BondImage-title" class="has-anchor"><span class="ancestors"><a href="lib_model.module_js.html">lib/model.js</a>~</span> BondImage</h1><div class="class-description"><p>An 'image' of a single bond in the model. This represents the connection between two specific AtomImages</p></div></header><article><div class="container-overview"><h2 id="constructor" class="has-anchor">Constructor</h2><h3 class="name has-anchor" id="BondImage"><span class="type-signature"></span>new BondImage<span class="signature">(model, im1, im2)</span></h3><div class="method-member-container flex flex-col w-100 overflow-auto mt-20"><strong>Parameters:</strong><table class="params"><thead><tr><th>Name</th><th>Type</th><th class="last">Description</th></tr></thead><tbody><tr><td class="name"><code>model</code></td><td class="type"><span class="param-type">Model</span></td><td class="description last"><p>The model from which the image is from</p></td></tr><tr><td class="name"><code>im1</code></td><td class="type"><span class="param-type">AtomImage</span></td><td class="description last"><p>AtomImage from which the bond starts</p></td></tr><tr><td class="name"><code>im2</code></td><td class="type"><span class="param-type">AtomImage</span></td><td class="description last"><p>AtomImage to which the bond ends</p></td></tr></tbody></table></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line697">line 697</a></li></ul></dd></div></dl></div><h2 id="members" class="subsection-title has-anchor">Members</h2><h3 class="name has-anchor" id="atom1"><span class="type-signature">(readonly) </span>atom1<span class="type-signature"> :AtomImage</span></h3><div class="description"><p>First atom connected to this bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">AtomImage</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line755">line 755</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="atom2"><span class="type-signature">(readonly) </span>atom2<span class="type-signature"> :AtomImage</span></h3><div class="description"><p>Second atom connected to this bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">AtomImage</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line764">line 764</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="color1"><span class="type-signature"></span>color1<span class="type-signature"> :int</span></h3><div class="description"><p>First color of the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line825">line 825</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="color2"><span class="type-signature"></span>color2<span class="type-signature"> :int</span></h3><div class="description"><p>Second color of the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">int</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line839">line 839</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="key"><span class="type-signature">(readonly) </span>key<span class="type-signature"> :String</span></h3><div class="description"><p>A unique string key used to quickly reference the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">String</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line773">line 773</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="length"><span class="type-signature">(readonly) </span>length<span class="type-signature"> :float</span></h3><div class="description"><p>Bond length in Angstroms</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line783">line 783</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="mesh"><span class="type-signature">(readonly) </span>mesh<span class="type-signature"> :AtomMesh</span></h3><div class="description"><p>Mesh corresponding to this bond image</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">AtomMesh</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line792">line 792</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="model"><span class="type-signature">(readonly) </span>model<span class="type-signature"> :Model</span></h3><div class="description"><p>Model this bond belongs to</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Model</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line733">line 733</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="opacity1"><span class="type-signature"></span>opacity1<span class="type-signature"> :float</span></h3><div class="description"><p>First opacity of the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line853">line 853</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="opacity2"><span class="type-signature"></span>opacity2<span class="type-signature"> :float</span></h3><div class="description"><p>Second opacity of the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line867">line 867</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="radius"><span class="type-signature"></span>radius<span class="type-signature"> :float</span></h3><div class="description"><p>Radius of the bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">float</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line806">line 806</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="renderer"><span class="type-signature">(readonly) </span>renderer<span class="type-signature"> :Renderer</span></h3><div class="description"><p>Renderer used by this bond</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">Renderer</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line742">line 742</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="visible"><span class="type-signature"></span>visible<span class="type-signature"> :bool</span></h3><div class="description"><p>Whether the bond is visible</p></div><div class="member-item-container flex"><strong>Type:</strong><ul><li><span class="param-type">bool</span></li></ul></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="model.js.html">model.js</a>, <a href="model.js.html#line881">line 881</a></li></ul></dd></div></dl></article></section></div></div></div><div class="search-container" id="PkfLWpAbet" style="display:none"><div class="wrapper" id="iCxFxjkHbP"><button class="icon-button search-close-button" id="VjLlGakifb" aria-label="close search"><svg><use xlink:href="#close-icon"></use></svg></button><div class="search-box-c"><svg><use xlink:href="#search-icon"></use></svg> <input type="text" id="vpcKVYIppa" class="search-input" placeholder="Search..." autofocus></div><div class="search-result-c" id="fWwVHRuDuN"><span class="search-result-c-text">Type anything to view search result</span></div></div></div><div class="mobile-menu-icon-container"><button class="icon-button" id="mobile-menu" data-isopen="false" aria-label="menu"><svg><use xlink:href="#menu-icon"></use></svg></button></div><div id="mobile-sidebar" class="mobile-sidebar-container"><div class="mobile-sidebar-wrapper"><div class="mobile-nav-links"></div><div class="mobile-sidebar-items-c"><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-modules"><div>Modules</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js.html">lib/model.js</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js.html">lib/modelview.js</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-classes"><div>Classes</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="lib_model.module_js-AtomImage.html">AtomImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-BondImage.html">BondImage</a></div><div class="sidebar-section-children"><a href="lib_model.module_js-Model.html">Model</a></div><div class="sidebar-section-children"><a href="lib_modelview.module_js-ModelView.html">ModelView</a></div><div class="sidebar-section-children"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a></div></div><div class="sidebar-section-title with-arrow" data-isopen="false" id="sidebar-tutorials"><div>Tutorials</div><svg><use xlink:href="#down-icon"></use></svg></div><div class="sidebar-section-children-container"><div class="sidebar-section-children"><a href="tutorial-Events.html">Events</a></div><div class="sidebar-section-children"><a href="tutorial-Queries.html">Queries</a></div><div class="sidebar-section-children"><a href="tutorial-ThreejsMigration.html">ThreejsMigration</a></div></div></div><div class="mobile-navbar-actions"><div class="navbar-right-item"><button class="icon-button search-button" aria-label="open-search"><svg><use xlink:href="#search-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button theme-toggle" aria-label="toggle-theme"><svg><use class="theme-svg-use" xlink:href="#light-theme-icon"></use></svg></button></div><div class="navbar-right-item"><button class="icon-button font-size" aria-label="change-font-size"><svg><use xlink:href="#font-size-icon"></use></svg></button></div></div></div></div><script type="text/javascript" src="scripts/core.min.js"></script><script src="scripts/search.min.js" defer="defer"></script><script src="scripts/third-party/fuse.js" defer="defer"></script><script type="text/javascript">var tocbotInstance=tocbot.init({tocSelector:"#eed4d2a0bfd64539bb9df78095dec881",contentSelector:".main-content",headingSelector:"h1, h2, h3",hasInnerContainers:!0,scrollContainer:".main-content",headingsOffset:130,onClick:bringLinkToView})</script></body></html>