chore(types): allow containers to constrain children

src/public/app/widgets/containers/right_pane_container.ts

@@ -0,0 +1,60 @@
+import FlexContainer from "./flex_container.js";
+import splitService from "../../services/resizer.js";
+import RightPanelWidget from "../right_panel_widget.js";
+
+export default class RightPaneContainer extends FlexContainer<RightPanelWidget> {
+
+    private rightPaneHidden: boolean;
+
+    constructor() {
+        super('column');
+
+        this.id('right-pane');
+        this.css('height', '100%');
+        this.collapsible();
+
+        this.rightPaneHidden = false;
+    }
+
+    isEnabled() {
+        return super.isEnabled()
+            && !this.rightPaneHidden
+            && this.children.length > 0
+            && !!this.children.find(ch => ch.isEnabled() && ch.canBeShown());
+    }
+
+    handleEventInChildren(name: string, data: unknown) {
+        const promise = super.handleEventInChildren(name, data);
+
+        if (['activeContextChanged', 'noteSwitchedAndActivated', 'noteSwitched'].includes(name)) {
+            // the right pane is displayed only if some child widget is active,
+            // we'll reevaluate the visibility based on events which are probable to cause visibility change
+            // but these events need to be finished and only then we check
+            if (promise) {
+                promise.then(() => this.reEvaluateRightPaneVisibilityCommand());
+            }
+            else {
+                this.reEvaluateRightPaneVisibilityCommand();
+            }
+        }
+
+        return promise;
+    }
+
+    reEvaluateRightPaneVisibilityCommand() {
+        const oldToggle = !this.isHiddenInt();
+        const newToggle = this.isEnabled();
+
+        if (oldToggle !== newToggle) {
+            this.toggleInt(newToggle);
+
+            splitService.setupRightPaneResizer();
+        }
+    }
+
+    toggleRightPaneEvent() {
+        this.rightPaneHidden = !this.rightPaneHidden;
+
+        this.reEvaluateRightPaneVisibilityCommand();
+    }
+}