@ccp-nc/crystvis-js

Version:

A Three.js based crystallographic visualisation tool

3 lines • 31.5 kB

HTML

<!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: CrystVis</title><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="CrystVis-title" class="has-anchor"><span class="ancestors"><a href="lib_visualizer.module_js.html">lib/visualizer.js</a>~</span> CrystVis</h1><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 id="constructor" class="has-anchor">Constructor</h2><h3 class="name has-anchor" id="CrystVis"><span class="type-signature"></span>new CrystVis<span class="signature">(element, width, height, rendererOptions)</span></h3><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><tr><td class="name"><code>rendererOptions</code></td><td class="type"><span class="param-type">Object</span></td><td class="default"></td><td class="description last"><p>Options for the renderer</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="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line38">line 38</a></li></ul></dd></div></dl></div><h2 id="members" class="subsection-title has-anchor">Members</h2><h3 class="name has-anchor" id="displayed"><span class="type-signature"></span>displayed<span class="type-signature"> :ModelView</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line121">line 121</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="highlightSelected"><span class="type-signature"></span>highlightSelected<span class="type-signature"> :bool</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line154">line 154</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>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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line104">line 104</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="modelList"><span class="type-signature">(readonly) </span>modelList<span class="type-signature"> :Array</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line95">line 95</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="modelName"><span class="type-signature">(readonly) </span>modelName<span class="type-signature"> :String</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line113">line 113</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="selected"><span class="type-signature"></span>selected<span class="type-signature"> :ModelView</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line138">line 138</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="theme"><span class="type-signature"></span>theme<span class="type-signature"> :object</span></h3><div class="description"><p>Theme</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="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line177">line 177</a></li></ul></dd></div></dl><h2 id="methods" class="subsection-title has-anchor">Methods</h2><h3 class="name has-anchor" id="addNotification"><span class="type-signature"></span>addNotification<span class="signature">()</span></h3><div class="description"><p>Add a notification to the list of notifications to be displayed</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line508">line 508</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="addNotifications"><span class="type-signature"></span>addNotifications<span class="signature">()</span></h3><div class="description"><p>Adds all notifications to the drawing</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line517">line 517</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="addPrimitive"><span class="type-signature"></span>addPrimitive<span class="signature">(p)</span></h3><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.<wbr>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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line492">line 492</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="centerCamera"><span class="type-signature"></span>centerCamera<span class="signature">(center, shift)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line318">line 318</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="clearNotifications"><span class="type-signature"></span>clearNotifications<span class="signature">()</span></h3><div class="description"><p>Removes notifications from the drawing</p></div><dl class="details"><div class="details-item-container"><dt class="tag-source bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line528">line 528</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="deleteModel"><span class="type-signature"></span>deleteModel<span class="signature">(name)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line474">line 474</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="displayModel"><span class="type-signature"></span>displayModel<span class="signature">(name)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line424">line 424</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="getScreenshotData"><span class="type-signature"></span>getScreenshotData<span class="signature">()</span><span class="type-signature"> → {String}</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line538">line 538</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><h3 class="name has-anchor" id="loadModels"><span class="type-signature"></span>loadModels<span class="signature">(contents, format, prefix, parameters)</span><span class="type-signature"> → {Object}</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line341">line 341</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><h3 class="name has-anchor" id="onAtomBox"><span class="type-signature"></span>onAtomBox<span class="signature">(callback)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line249">line 249</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="onAtomClick"><span class="type-signature"></span>onAtomClick<span class="signature">(callback, modifiers)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line219">line 219</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="reloadModel"><span class="type-signature"></span>reloadModel<span class="signature">(name, parameters)</span></h3><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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line394">line 394</a></li></ul></dd></div></dl><h3 class="name has-anchor" id="removePrimitive"><span class="type-signature"></span>removePrimitive<span class="signature">(p)</span></h3><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.<wbr>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 bold">Source</dt><dd class="tag-source"><ul><li><a href="visualizer.js.html">visualizer.js</a>, <a href="visualizer.js.html#line501">line 501</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>