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 @@
Representation
+
+
+
+
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,
};