From 4ead7275f67f0468d3b0c5f41729ebbc22fc63e6 Mon Sep 17 00:00:00 2001
From: Sebastian Bittrich <sebastian.bittrich@rcsb.org>
Date: Fri, 8 Dec 2023 14:40:07 -0800
Subject: [PATCH] toggle controls

---
 src/viewer/index.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/viewer/index.ts b/src/viewer/index.ts
index d3d2a7d..da1c725 100644
--- a/src/viewer/index.ts
+++ b/src/viewer/index.ts
@@ -388,6 +388,7 @@ export class Viewer {
 export class LigandViewer {
     private readonly _plugin: PluginUIContext;
     private readonly modelUrlProviders: ModelUrlProvider[];
+    private prevExpanded: boolean;
 
     constructor(elementOrId: string | HTMLElement, props: Partial<LigandViewerProps> = {}) {
         const element = typeof elementOrId === 'string' ? document.getElementById(elementOrId)! : elementOrId;
@@ -497,6 +498,9 @@ export class LigandViewer {
                 // custom tooltips that only include atom names
                 this._plugin.managers.lociLabels.clearProviders();
                 this._plugin.managers.lociLabels.addProvider({ label: loci => lociLabel(loci, { condensed: true }) });
+
+                this.prevExpanded = this._plugin.layout.state.isExpanded;
+                this._plugin.layout.events.updated.subscribe(() => this.toggleControls());
             });
     }
 
@@ -504,6 +508,19 @@ export class LigandViewer {
         return this._plugin.customState as LigandViewerState;
     }
 
+    private toggleControls(): void {
+        const currExpanded = this._plugin.layout.state.isExpanded;
+        const expandedChanged = (this.prevExpanded !== currExpanded);
+        if (!expandedChanged) return;
+
+        if (currExpanded && !this._plugin.layout.state.showControls) {
+            this._plugin.layout.setProps({ showControls: true });
+        } else if (!currExpanded && this._plugin.layout.state.showControls) {
+            this._plugin.layout.setProps({ showControls: false });
+        }
+        this.prevExpanded = this._plugin.layout.state.isExpanded;
+    }
+
     clear() {
         const state = this._plugin.state.data;
         return PluginCommands.State.RemoveObject(this._plugin, { state, ref: state.tree.root.ref });