crystvis-js
Version:
A Three.js based crystallographic visualisation tool
2,534 lines (771 loc) • 52.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Adding favicon -->
<!-- Adding meta -->
<!-- Adding external script-->
<!-- Adding external style-->
<!-- Adding scripts-->
<!-- Adding style-->
<!-- Adding overlay script-->
<!-- Adding overlay style-->
<title>
CrystVis
</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/third-party/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/third-party/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/reset.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-base.css">
<link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-dark.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="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>
</defs>
</svg>
</head>
<body>
<nav class="navbar" id="navbar">
<div class="navbar-heading" id="navbar-heading"><a href="index.html"><h2 class="navbar-heading-text">Home</h2></a></div><div class="search-box" id="search-box"><div class="search-box-input-container"><input class="search-box-input" type="text" placeholder="Search..." id="search-box-input" /><svg class="search-icon" alt="search-icon"><use xlink:href="#search-icon"></use></svg></div><div class="search-item-container" id="search-item-container"><ul class="search-item-ul" id="search-item-ul"></ul></div></div><div class="sidebar-main-content" id="sidebar-main-content"><div class="accordion collapsed" id="9953002" > <h3 class="accordion-heading">Modules<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="lib_model.module_js.html">lib/model.js</a></li><li class="accordion-list" id=""><a href="lib_modelview.module_js.html">lib/modelview.js</a></li><li class="accordion-list" id=""><a href="lib_visualizer.module_js.html">lib/visualizer.js</a></li></ul> </div><div class="accordion collapsed" id="3878701" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=6175172><div class="accordion-heading child"><a href="lib_model.module_js-AtomImage.html">AtomImage</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="lib_model.module_js-AtomImage.html#addEllipsoid">addEllipsoid</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#addLabel">addLabel</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#ellipsoidProperty">ellipsoidProperty</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#getArrayValue">getArrayValue</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#labelProperty">labelProperty</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#removeEllipsoid">removeEllipsoid</a></li><li data-type='method'><a href="lib_model.module_js-AtomImage.html#removeLabel">removeLabel</a></li></ul></li><li class="accordion-list" id=""><a href="lib_model.module_js-BondImage.html">BondImage</a></li><li class="accordion collapsed child" id=6715610><div class="accordion-heading child"><a href="lib_model.module_js-Model.html">Model</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="lib_model.module_js-Model.html#absToFrac">absToFrac</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#addLink">addLink</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#addSphere">addSphere</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#clearGraphics">clearGraphics</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#deleteArray">deleteArray</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#find">find</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#fracToAbs">fracToAbs</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#getArray">getArray</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#hasArray">hasArray</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#minimumSupercell">minimumSupercell</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#removeGraphics">removeGraphics</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#setArray">setArray</a></li><li data-type='method'><a href="lib_model.module_js-Model.html#view">view</a></li></ul></li><li class="accordion collapsed child" id=2271872><div class="accordion-heading child"><a href="lib_modelview.module_js-ModelView.html">ModelView</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#addEllipsoids">addEllipsoids</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#addLabels">addLabels</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#and">and</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#ellipsoidProperties">ellipsoidProperties</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#find">find</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#hide">hide</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#labelProperties">labelProperties</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#map">map</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#not">not</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#or">or</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#removeEllipsoids">removeEllipsoids</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#removeLabels">removeLabels</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#setProperty">setProperty</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#show">show</a></li><li data-type='method'><a href="lib_modelview.module_js-ModelView.html#xor">xor</a></li></ul></li><li class="accordion collapsed child" id=6565660><div class="accordion-heading child"><a href="lib_visualizer.module_js-CrystVis.html">CrystVis</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#addPrimitive">addPrimitive</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#centerCamera">centerCamera</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#deleteModel">deleteModel</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#displayModel">displayModel</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#getScreenshotData">getScreenshotData</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#loadModels">loadModels</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#onAtomBox">onAtomBox</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#onAtomClick">onAtomClick</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#reloadModel">reloadModel</a></li><li data-type='method'><a href="lib_visualizer.module_js-CrystVis.html#removePrimitive">removePrimitive</a></li></ul></li></ul> </div><div class="accordion collapsed" id="6000571" > <h3 class="accordion-heading">Tutorials<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="tutorial-Events.html">Events</a></li><li class="accordion-list" id=""><a href="tutorial-Queries.html">Queries</a></li></ul> </div>
</nav>
<div class="navbar-ham" id="navbar-ham">
<div>
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</div>
<div id="main" class="main-content">
<h1 id='page-title' class="page-title">
CrystVis
</h1>
<section>
<header>
<h2>
<span class="ancestors"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a>~</span>
CrystVis
</h2>
<div class="class-description"><p>An object providing a full interface to a renderer for crystallographic models</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="CrystVis">
<a href="#CrystVis">#</a>
<span class="type-signature"></span>new CrystVis<span class="signature">(element, width, height)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>An object providing a full interface to a renderer for crystallographic
models</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>element</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="default">
</td>
<td class="description last"><p>CSS-style identifier for the HTML element to
put the renderer in</p></td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Window width</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="default">
0
</td>
<td class="description last"><p>Window height. If both this and width are
set to 0, the window fits its context and
automatically resizes with it</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line36">line 36</a>
</li></ul></dd>
</div>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="displayed">
<a href="#displayed">#</a>
<span class="type-signature"></span>displayed<span class="type-signature"> :ModelView</span>
</h4>
<div class="description">
<p>Displayed atoms</p>
</div>
<div class="member-item-container flex">
<strong>Type: </strong>
<ul>
<li>
<span class="param-type">ModelView</span>
</li>
</ul>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line117">line 117</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="highlightSelected">
<a href="#highlightSelected">#</a>
<span class="type-signature"></span>highlightSelected<span class="type-signature"> :bool</span>
</h4>
<div class="description">
<p>Whether the selected atoms should be highlighted with auras</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">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line150">line 150</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="model">
<a href="#model">#</a>
<span class="type-signature">(readonly) </span>model<span class="type-signature"> :Model</span>
</h4>
<div class="description">
<p>Currently loaded model</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">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line100">line 100</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="modelList">
<a href="#modelList">#</a>
<span class="type-signature">(readonly) </span>modelList<span class="type-signature"> :Array</span>
</h4>
<div class="description">
<p>List of loaded models</p>
</div>
<div class="member-item-container flex">
<strong>Type: </strong>
<ul>
<li>
<span class="param-type">Array</span>
</li>
</ul>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line91">line 91</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="modelName">
<a href="#modelName">#</a>
<span class="type-signature">(readonly) </span>modelName<span class="type-signature"> :String</span>
</h4>
<div class="description">
<p>Name of the currently loaded model</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">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line109">line 109</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="selected">
<a href="#selected">#</a>
<span class="type-signature"></span>selected<span class="type-signature"> :ModelView</span>
</h4>
<div class="description">
<p>Selected atoms</p>
</div>
<div class="member-item-container flex">
<strong>Type: </strong>
<ul>
<li>
<span class="param-type">ModelView</span>
</li>
</ul>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line134">line 134</a>
</li></ul></dd>
</div>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addPrimitive">
<a href="#addPrimitive">#</a>
<span class="type-signature"></span>addPrimitive<span class="signature">(p)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Add a primitive shape to the drawing</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>p</code></td>
<td class="type">
<span class="param-type">THREE.Object3D</span>
</td>
<td class="description last"><p>Primitive to add</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line444">line 444</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="centerCamera">
<a href="#centerCamera">#</a>
<span class="type-signature"></span>centerCamera<span class="signature">(center, shift)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Center the camera on a given point</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>center</code></td>
<td class="type">
<span class="param-type">Array.<float></span>
</td>
<td class="description last"><p>Point in model space that the orbiting camera
should be centred on and look at</p></td>
</tr>
<tr>
<td class="name"><code>shift</code></td>
<td class="type">
<span class="param-type">Array.<float></span>
</td>
<td class="description last"><p>Shift (in units of width/height of the canvas) with
which the center of the camera should be rendered with
respect to the center of the canvas</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line284">line 284</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="deleteModel">
<a href="#deleteModel">#</a>
<span class="type-signature"></span>deleteModel<span class="signature">(name)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Erase a model from the recorded ones</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 model to delete</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line426">line 426</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="displayModel">
<a href="#displayModel">#</a>
<span class="type-signature"></span>displayModel<span class="signature">(name)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Render a model</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">
null
</td>
<td class="description last"><p>Name of the model to display. If empty, just
clear the renderer window.</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line382">line 382</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="getScreenshotData">
<a href="#getScreenshotData">#</a>
<span class="type-signature"></span>getScreenshotData<span class="signature">()</span><span class="type-signature"> → {String}</span>
</h4>
<div class="description">
<p>Recover a data URL of a PNG screenshot of the current scene</p>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line462">line 462</a>
</li></ul></dd>
</div>
</dl>
<div class="method-member-container mt-20">
<strong>Returns:</strong>
<div class="param-desc">
<p>A data URL of the PNG screenshot</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">String</span>
</dd>
</dl>
</div>
<h4 class="name" id="loadModels">
<a href="#loadModels">#</a>
<span class="type-signature"></span>loadModels<span class="signature">(contents, format, prefix, parameters)</span><span class="type-signature"> → {Object}</span>
</h4>
<div class="description">
<p>Load one or more atomic models from a file's contents</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>contents</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
</td>
<td class="description last"><p>The contents of the structure file</p></td>
</tr>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
cif
</td>
<td class="description last"><p>The file's format (cif, xyz, etc.). Default is cif.</p></td>
</tr>
<tr>
<td class="name"><code>prefix</code></td>
<td class="type">
<span class="param-type">String</span>
</td>
<td class="default">
null
</td>
<td class="description last"><p>Prefix to use when naming the models. Default is empty.</p></td>
</tr>
<tr>
<td class="name"><code>parameters</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Loading parameters:</p>
<ul>
<li><code>supercell</code>: supercell size (only used if the structure is periodic)</li>
<li><code>molecularCrystal</code>: if true, try to make the model load completing molecules across periodic boundaries</li>
<li><code>useNMRActiveIsotopes</code>: if true, all isotopes are set by default to the most common one with non-zero spin</li>
<li><code>vdwScaling</code>: scale van der Waals radii by a constant factor</li>
<li><code>vdwElementScaling</code>: table of per-element factors to scale VdW radii by</li>
</ul></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line307">line 307</a>
</li></ul></dd>
</div>
</dl>
<div class="method-member-container mt-20">
<strong>Returns:</strong>
<div class="param-desc">
<p>Names of the models we tried to load, and values of true/false for successful loading or not</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
</div>
<h4 class="name" id="onAtomBox">
<a href="#onAtomBox">#</a>
<span class="type-signature"></span>onAtomBox<span class="signature">(callback)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Set a callback function for an event where a user drags a box around multiple atoms.
The function should take as arguments a ModelView including the atoms in the box:</p>
<p>function callback(view) {
...
}</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>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
null
</td>
<td class="description last"><p>Callback function for the event. Passing "null" restores default behaviour</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line215">line 215</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="onAtomClick">
<a href="#onAtomClick">#</a>
<span class="type-signature"></span>onAtomClick<span class="signature">(callback, modifiers)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Set a callback function for an event where a user clicks on an atom. The
function should take as arguments the atom image for the clicked atom and
the event object:</p>
<p>function callback(atom, event) {
...
}</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>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="default">
null
</td>
<td class="description last"><p>Callback function for the event. Passing "null" restores default behaviour</p></td>
</tr>
<tr>
<td class="name"><code>modifiers</code></td>
<td class="type">
<span class="param-type">int</span>
</td>
<td class="default">
</td>
<td class="description last"><p>Click event. Use the following flags to define it:</p>
<ul>
<li>CrystVis.LEFT_CLICK</li>
<li>CrystVis.RIGHT_CLICK</li>
<li>CrystVis.MIDDLE_CLICK</li>
<li>CrystVis.CTRL_BUTTON</li>
<li>CrystVis.ALT_BUTTON</li>
<li>CrystVis.SHIFT_BUTTON</li>
<li>CrystVis.CMD_BUTTON</li>
</ul>
<p>For example, CrystVis.LEFT_CLICK + CrystVis.SHIFT_BUTTON
defines the event for a click while the Shift key is pressed.</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line185">line 185</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="reloadModel">
<a href="#reloadModel">#</a>
<span class="type-signature"></span>reloadModel<span class="signature">(name, parameters)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Reload a model, possibly with new parameters</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 model to reload.</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>Loading parameters as in .loadModels()</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line354">line 354</a>
</li></ul></dd>
</div>
</dl>
<h4 class="name" id="removePrimitive">
<a href="#removePrimitive">#</a>
<span class="type-signature"></span>removePrimitive<span class="signature">(p)</span><span class="type-signature"></span>
</h4>
<div class="description">
<p>Remove a primitive shape from the drawing</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>p</code></td>
<td class="type">
<span class="param-type">THREE.Object3D</span>
</td>
<td class="description last"><p>Primitive to remove</p></td>
</tr>
</tbody>
</table>
</div>
<dl class="details">
<div class="details-item-container">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line453">line 453</a>
</li></ul></dd>
</div>
</dl>
</article>
</section>
</div>
<footer class="footer" id="footer">
</footer>
<script src="scripts/third-party/prettify.js"></script>
<script src="scripts/third-party/lang-css.js"></script>
<script type="text/javascript" src="scripts/misc.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
<script src="scripts/fix-code-block.js"></script>
<script src="scripts/fix-navbar.js"></script>
<script src="scripts/search.js"></script>
<script src="scripts/third-party/fuse.js"></script>
<script>
var list = [{"title":"lib/model.js","link":"<a href=\"lib_model.module_js.html\">lib/model.js</a>"},{"title":"lib/modelview.js","link":"<a href=\"lib_modelview.module_js.html\">lib/modelview.js</a>"},{"title":"lib/visualizer.js","link":"<a href=\"lib_visualizer.module_js.html\">lib/visualizer.js</a>"},{"title":"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\">lib/model.module:js~AtomImage ▸ addEllipsoid</a>"},{"title":"lib/model.module:js~AtomImage#addLabel","link":"<a href=\"lib_model.module_js-AtomImage.html#addLabel\">lib/model.module:js~AtomImage ▸ addLabel</a>"},{"title":"lib/model.module:js~AtomImage#ellipsoidProperty","link":"<a href=\"lib_model.module_js-AtomImage.html#ellipsoidProperty\">lib/model.module:js~AtomImage ▸ ellipsoidProperty</a>"},{"title":"lib/model.module:js~AtomImage#getArrayValue","link":"<a href=\"lib_model.module_js-AtomImage.html#getArrayValue\">lib/model.module:js~AtomImage ▸ getArrayValue</a>"},{"title":"lib/model.module:js~AtomImage#labelProperty","link":"<a href=\"lib_model.module_js-AtomImage.html#labelProperty\">lib/model.module:js~AtomImage ▸ labelProperty</a>"},{"title":"lib/model.module:js~AtomImage#removeEllipsoid","link":"<a href=\"lib_model.module_js-AtomImage.html#removeEllipsoid\">lib/model.module:js~AtomImage ▸ removeEllipsoid</a>"},{"title":"lib/model.module:js~AtomImage#removeLabel","link":"<a href=\"lib_model.module_js-AtomImage.html#removeLabel\">lib/model.module:js~AtomImage ▸ removeLabel</a>"},{"title":"BondImage","link":"<a href=\"lib_model.module_js-BondImage.html\">BondImage</a>"},{"title":"Model","link":"<a href=\"lib_model.module_js-Model.html\">Model</a>"},{"title":"lib/model.module:js~Model#absToFrac","link":"<a href=\"lib_model.module_js-Model.html#absToFrac\">lib/model.module:js~Model ▸ absToFrac</a>"},{"title":"lib/model.module:js~Model#addLink","link":"<a href=\"lib_model.module_js-Model.html#addLink\">lib/model.module:js~Model ▸ addLink</a>"},{"title":"lib/model.module:js~Model#addSphere","link":"<a href=\"lib_model.module_js-Model.html#addSphere\">lib/model.module:js~Model ▸ addSphere</a>"},{"title":"lib/model.module:js~Model#clearGraphics","link":"<a href=\"lib_model.module_js-Model.html#clearGraphics\">lib/model.module:js~Model ▸ clearGraphics</a>"},{"title":"lib/model.module:js~Model#deleteArray","link":"<a href=\"lib_model.module_js-Model.html#deleteArray\">lib/model.module:js~Model ▸ deleteArray</a>"},{"title":"lib/model.module:js~Model#find","link":"<a href=\"lib_model.module_js-Model.html#find\">lib/model.module:js~Model ▸ find</a>"},{"title":"lib/model.module:js~Model#fracToAbs","link":"<a href=\"lib_model.module_js-Model.html#fracToAbs\">lib/model.module:js~Model ▸ fracToAbs</a>"},{"title":"lib/model.module:js~Model#getArray","link":"<a href=\"lib_model.module_js-Model.html#getArray\">lib/model.module:js~Model ▸ getArray</a>"},{"title":"lib/model.module:js~Model#hasArray","link":"<a href=\"lib_model.module_js-Model.html#hasArray\">lib/model.module:js~Model ▸ hasArray</a>"},{"title":"lib/model.module:js~Model#minimumSupercell","link":"<a href=\"lib_model.module_js-Model.html#minimumSupercell\">lib/model.module:js~Model ▸ minimumSupercell</a>"},{"title":"lib/model.module:js~Model#removeGraphics","link":"<a href=\"lib_model.module_js-Model.html#removeGraphics\">lib/model.module:js~Model ▸ removeGraphics</a>"},{"title":"lib/model.module:js~Model#setArray","link":"<a href=\"lib_model.module_js-Model.html#setArray\">lib/model.module:js~Model ▸ setArray</a>"},{"title":"lib/model.module:js~Model#view","link":"<a href=\"lib_model.module_js-Model.html#view\">lib/model.module:js~Model ▸ view</a>"},{"title":"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\">lib/modelview.module:js~ModelView ▸ addEllipsoids</a>"},{"title":"lib/modelview.module:js~ModelView#addLabels","link":"<a href=\"lib_modelview.module_js-ModelView.html#addLabels\">lib/modelview.module:js~ModelView ▸ addLabels</a>"},{"title":"lib/modelview.module:js~ModelView#and","link":"<a href=\"lib_modelview.module_js-ModelView.html#and\">lib/modelview.module:js~ModelView ▸ and</a>"},{"title":"lib/modelview.module:js~ModelView#ellipsoidProperties","link":"<a href=\"lib_modelview.module_js-ModelView.html#ellipsoidProperties\">lib/modelview.module:js~ModelView ▸ ellipsoidProperties</a>"},{"title":"lib/modelview.module:js~ModelView#find","link":"<a href=\"lib_modelview.module_js-ModelView.html#find\">lib/modelview.module:js~ModelView ▸ find</a>"},{"title":"lib/modelview.module:js~ModelView#hide","link":"<a href=\"lib_modelview.module_js-ModelView.html#hide\">lib/modelview.module:js~ModelView ▸ hide</a>"},{"title":"lib/modelview.module:js~ModelView#labelProperties","link":"<a href=\"lib_modelview.module_js-ModelView.html#labelProperties\">lib/modelview.module:js~ModelView ▸ labelProperties</a>"},{"title":"lib/modelview.module:js~ModelView#map","link":"<a href=\"lib_modelview.module_js-ModelView.html#map\">lib/modelview.module:js~ModelView ▸ map</a>"},{"title":"lib/modelview.module:js~ModelView#not","link":"<a href=\"lib_modelview.module_js-ModelView.html#not\">lib/modelview.module:js~ModelView ▸ not</a>"},{"title":"lib/modelview.module:js~ModelView#or","link":"<a href=\"lib_modelview.module_js-ModelView.html#or\">lib/modelview.module:js~ModelView ▸ or</a>"},{"title":"lib/modelview.module:js~ModelView#removeEllipsoids","link":"<a href=\"lib_modelview.module_js-ModelView.html#removeEllipsoids\">lib/modelview.module:js~ModelView ▸ removeEllipsoids</a>"},{"title":"lib/modelview.module:js~ModelView#removeLabels","link":"<a href=\"lib_modelview.module_js-ModelView.html#removeLabels\">lib/modelview.module:js~ModelView ▸ removeLabels</a>"},{"title":"lib/modelview.module:js~ModelView#setProperty","link":"<a href=\"lib_modelview.module_js-ModelView.html#setProperty\">lib/modelview.module:js~ModelView ▸ setProperty</a>"},{"title":"lib/modelview.module:js~ModelView#show","lin