From 87d030198c301c69381fd8dcc64b5caff0950ccc Mon Sep 17 00:00:00 2001
From: Michele Ceriotti <michele.ceriotti@gmail.com>
Date: Fri, 25 Aug 2023 01:20:07 -0700
Subject: [PATCH] Make atom visibility a separate option, and don't hyde atoms
 when showing shapes

---
 src/structure/options.html.in | 4 ++++
 src/structure/options.ts      | 4 ++++
 src/structure/viewer.ts       | 3 ++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/structure/options.html.in b/src/structure/options.html.in
index 568a42ab7..4cd4ebac9 100644
--- 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
index a0c42ecdc..316e52350 100644
--- 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
index 58434c8ec..1603a84d5 100644
--- 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,
             };