Make atom visibility a separate option, and don't hyde atoms when sho…

…wing shapes
lab-cosmo · Aug 29, 2023 · da0cbc9 · da0cbc9
1 parent fb96b04
commit da0cbc9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/structure/options.html.in b/src/structure/options.html.in
@@ -8,6 +8,10 @@
          <div class="modal-body">
             <h5 class="chsp-settings-section-title">Representation</h5>
             <div class="chsp-settings-representation">
+               <div class="form-check form-switch">
+                  <input class="form-check-input" id="atoms" type="checkbox" />
+                  <label class="form-check-label" for="atoms" title="show atoms as spheres">atoms</label>
+               </div>
                <div class="form-check form-switch">
                   <input class="form-check-input" id="bonds" type="checkbox" />
                   <label class="form-check-label" for="bonds" title="show bonds between atoms">bonds</label>

diff --git a/src/structure/options.ts b/src/structure/options.ts
@@ -18,6 +18,8 @@ import HTML_OPTIONS from './options.html.in';
 export class StructureOptions extends OptionsGroup {
     /// should we show bonds
     public bonds: HTMLOption<'boolean'>;
+    /// should we show atoms
+    public atoms: HTMLOption<'boolean'>;
     /// should we use space filling representation
     public spaceFilling: HTMLOption<'boolean'>;
     /// should we show atoms labels
@@ -61,6 +63,7 @@ export class StructureOptions extends OptionsGroup {
         super();
 
         this.bonds = new HTMLOption('boolean', true);
+        this.atoms = new HTMLOption('boolean', true);
         this.spaceFilling = new HTMLOption('boolean', false);
         this.atomLabels = new HTMLOption('boolean', false);
         this.shape = new HTMLOption('string', '');
@@ -229,6 +232,7 @@ export class StructureOptions extends OptionsGroup {
 
         this.spaceFilling.bind(this.getModalElement('space-filling'), 'checked');
         this.bonds.bind(this.getModalElement('bonds'), 'checked');
+        this.atoms.bind(this.getModalElement('atoms'), 'checked');
 
         this.rotation.bind(this.getModalElement('rotation'), 'checked');
         this.unitCell.bind(this.getModalElement('unit-cell'), 'checked');

diff --git a/src/structure/viewer.ts b/src/structure/viewer.ts
@@ -608,6 +608,7 @@ export class MoleculeViewer {
 
         this._options.spaceFilling.onchange.push(restyleAndRender);
         this._options.bonds.onchange.push(restyleAndRender);
+        this._options.atoms.onchange.push(restyleAndRender);
 
         this._options.atomLabels.onchange.push((showLabels) => {
             if (this._current === undefined) {
@@ -975,7 +976,7 @@ export class MoleculeViewer {
      */
     private _mainStyle(): Partial<$3Dmol.AtomStyleSpec> {
         const style: Partial<$3Dmol.AtomStyleSpec> = {};
-        if (this._options.shape.value === '') {
+        if (this._options.atoms.value) {
             style.sphere = {
                 scale: this._options.spaceFilling.value ? 1.0 : 0.22,
             };