crystvis-js
Version:
A Three.js based crystallographic visualisation tool
196 lines (142 loc) • 23.8 kB
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>
Tutorial: Events
</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">
Tutorial: Events
</h1>
<section>
<header>
<h2>Events</h2>
</header>
<article>
<p>User interactions with a model in CrystVis-js can be customised through the definition of callbacks for <em>events</em>. This means it's possible to bind arbitrary JavaScript code
to the various ways in which a user can click on an atom in the model. To do this, one needs to use the <code>.onAtomClick()</code> method of a <code>CrystVis</code> object, as well as its flags.</p>
<h3>Defining an event</h3>
<p>A custom event can be set by defining a callback function, then assigning that function to a specific click event. Here is an example:</p>
<pre class="prettyprint source lang-js"><code>function myCallback(atom, event) {
alert(atom.element);
}
visualizer.onAtomClick(myCallback, CrystVis.LEFT_CLICK)
</code></pre>
<p>This code will result in binding a function that causes a popup to show with the chemical symbol of an atom's element whenever you left click on one.</p>
<h3>Flags</h3>
<p>Which event a callback should be bound to is defined by the flags passed as the second argument to <code>.onAtomClick()</code>. These are the available flags:</p>
<ul>
<li><code>CrystVis.LEFT_CLICK</code></li>
<li><code>CrystVis.RIGHT_CLICK</code></li>
<li><code>CrystVis.MIDDLE_CLICK</code></li>
<li><code>CrystVis.CTRL_BUTTON</code></li>
<li><code>CrystVis.ALT_BUTTON</code></li>
<li><code>CrystVis.SHIFT_BUTTON</code></li>
<li><code>CrystVis.CMD_BUTTON</code></li>
</ul>
<p>Note that <code>CMD_BUTTON</code> is only used on Macs and equivalent to <code>CTRL_BUTTON</code> on other machines. These are bit flags, so they can be combined with addition or bitwise operators. For
example, <code>CrystVis.LEFT_CLICK + CrystVis.SHIFT_BUTTON</code> represents a click with the shift key down. Each combinations of flags can only hold one callback function; if <code>null</code> is passed
instead of a callback, default behaviour is restored.</p>
<h3>Default behaviour</h3>
<p>Most events by default are bound to nothing, mean, nothing will happen unless you define a specific behaviour for them. There are only three exceptions to this:</p>
<ul>
<li><code>CrystVis.LEFT_CLICK</code> defaults to selecting the clicked atom</li>
<li><code>CrystVis.LEFT_CLICK + CrystVis.SHIFT_BUTTON</code> defaults to adding the clicked atom to selection</li>
<li><code>CrystVis.LEFT_CLICK + CrystVis.CTRL_BUTTON</code> defaults to switching the clicked atom in or out of the selection</li>
</ul>
<p>To best see how the selection changes, set <code>.highlightSelected = true</code>.</p>
<h3>Box selection</h3>
<p>In addition to the various events described above, there is a special behaviour. Clicking while pressing Shift on a point that does <em>not</em> have an atom allows the user to drag
a box around multiple atoms, for example to select them in group. This behaviour can also be customized, by setting a callback with the method <code>.onAtomBox()</code>. Here is an example:</p>
<pre class="prettyprint source lang-js"><code>function boxCallback(atomview) {
alert(atomview.map((atom) => atom.element));
}
visualizer.onAtomBox(boxCallback)
</code></pre>
<p>that will create an alert popup with a list of all the elements in the selected box.</p>
</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","link":"<a href=\"lib_modelview.module_js-ModelView.html#show\">lib/modelview.module:js~ModelView ▸ show</a>"},{"title":"lib/modelview.module:js~ModelView#xor","link":"<a href=\"lib_modelview.module_js-ModelView.html#xor\">lib/modelview.module:js~ModelView ▸ xor</a>"},{"title":"CrystVis","link":"<a href=\"lib_visualizer.module_js-CrystVis.html\">CrystVis</a>"},{"title":"lib/visualizer.module:js~CrystVis#addPrimitive","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#addPrimitive\">lib/visualizer.module:js~CrystVis ▸ addPrimitive</a>"},{"title":"lib/visualizer.module:js~CrystVis#centerCamera","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#centerCamera\">lib/visualizer.module:js~CrystVis ▸ centerCamera</a>"},{"title":"lib/visualizer.module:js~CrystVis#deleteModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#deleteModel\">lib/visualizer.module:js~CrystVis ▸ deleteModel</a>"},{"title":"lib/visualizer.module:js~CrystVis#displayModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#displayModel\">lib/visualizer.module:js~CrystVis ▸ displayModel</a>"},{"title":"lib/visualizer.module:js~CrystVis#getScreenshotData","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#getScreenshotData\">lib/visualizer.module:js~CrystVis ▸ getScreenshotData</a>"},{"title":"lib/visualizer.module:js~CrystVis#loadModels","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#loadModels\">lib/visualizer.module:js~CrystVis ▸ loadModels</a>"},{"title":"lib/visualizer.module:js~CrystVis#onAtomBox","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#onAtomBox\">lib/visualizer.module:js~CrystVis ▸ onAtomBox</a>"},{"title":"lib/visualizer.module:js~CrystVis#onAtomClick","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#onAtomClick\">lib/visualizer.module:js~CrystVis ▸ onAtomClick</a>"},{"title":"lib/visualizer.module:js~CrystVis#reloadModel","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#reloadModel\">lib/visualizer.module:js~CrystVis ▸ reloadModel</a>"},{"title":"lib/visualizer.module:js~CrystVis#removePrimitive","link":"<a href=\"lib_visualizer.module_js-CrystVis.html#removePrimitive\">lib/visualizer.module:js~CrystVis ▸ removePrimitive</a>"},{"title":"Events","link":"Events"},{"title":"Queries","link":"Queries"}];
var options =
setupSearch(list, options)
</script>
</body>
</html>