diff --git a/app/client/components/LayoutTray.ts b/app/client/components/LayoutTray.ts index 508bc19b..f91302b5 100644 --- a/app/client/components/LayoutTray.ts +++ b/app/client/components/LayoutTray.ts @@ -41,6 +41,7 @@ export class LayoutTray extends DisposableWithEvents { public active = Signal.create(this, false); private _rootElement: HTMLElement; + constructor(public viewLayout: ViewLayout) { super(); // Create a proxy for the LayoutEditor. It will mimic the same interface as CollapsedLeaf. @@ -49,8 +50,6 @@ export class LayoutTray extends DisposableWithEvents { // Build layout using saved settings. this.layout.buildLayout(this.viewLayout.viewModel.collapsedSections.peek()); - - this._registerCommands(); // Override the drop event, to detect if we are dropped on the tray, and no one else @@ -121,11 +120,7 @@ export class LayoutTray extends DisposableWithEvents { const section = Observable.create(owner, null); owner.autoDispose(selected.addListener((cur, prev) => { if (prev && !cur) { - const vs = this.viewLayout.gristDoc.docModel.viewSections.getRowModel(prev); - const vi = vs.viewInstance.peek(); - if (vi) { - detachNode(vi.viewPane); - } + this.layout.getBox(prev)?.recreate(); } section.set(cur); })); @@ -488,6 +483,10 @@ class CollapsedLayout extends Disposable { return this._boxes.get().map(l => l.id.get()).filter(x => x && typeof x === 'number'); } + public getBox(leaf: number): CollapsedLeaf|undefined { + return this._boxes.get().find(l => l.id.get() === leaf) as CollapsedLeaf|undefined; + } + public buildDom() { return (this.rootElement = cssLayout( testId('layout'), @@ -641,6 +640,12 @@ class CollapsedLeaf extends Leaf implements Draggable, Dropped { }); } + public recreate() { + const previous = this._hiddenViewInstance.get(); + this._hiddenViewInstance.set(cssHidden(dom.maybe(this._viewInstance, view => view.viewPane))); + previous && dom.domDispose(previous); + } + public buildDom() { this._content.set(this.model.buildContentDom(this.id.get())); return this.rootElement = cssBox(