(core) Fixing couple of bugs in collapsed section layout

Summary:
The previous implementation for collapsing sections involved disposing of a view instance (Grid or Chart component). This caused numerous bugs with
linking sections as the implementation is located in the BaseView.js. Now the view instance is kept and attached to a dom in a hidden div, so it can respond
and function as a normal rendered section. It is also passed from between collapsed and main layout, when sections are dragged or moved using section's
menu commands (`collapse` and `add to main page`)

It also implies that the ViewLayout must still be rendered when a section is maximized (as it is responsible for the view instance), so the dom, and
some logic for rendering it, had to be changed.

Test Plan: New and updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3826
This commit is contained in:
Jarosław Sadziński
2023-03-22 16:21:53 +01:00
parent be8e13df64
commit a9ff6b9a84
11 changed files with 364 additions and 138 deletions

View File

@@ -38,18 +38,6 @@ export function createViewRec(this: ViewRec, docModel: DocModel): void {
this.layoutSpecObj = modelUtil.jsonObservable(this.layoutSpec);
// An observable for the ref of the section last selected by the user.
this.activeSectionId = koUtil.observableWithDefault(ko.observable(), () => {
// The default function which is used when the conditional case is true.
// Read may occur for recently disposed sections, must check condition first.
return !this.isDisposed() &&
// `!this.getRowId()` implies that this is an empty (non-existent) view record
// which happens when viewing the raw data tables, in which case the default is no active view section.
this.getRowId() && this.viewSections().all().length > 0 ? this.viewSections().at(0)!.getRowId() : 0;
});
this.activeSection = refRecord(docModel.viewSections, this.activeSectionId);
this.activeCollapsedSectionId = ko.observable(0);
this.collapsedSections = this.autoDispose(ko.pureComputed(() => {
@@ -59,6 +47,25 @@ export function createViewRec(this: ViewRec, docModel: DocModel): void {
}));
this.activeCollapsedSections = ko.observable(this.collapsedSections.peek());
// An observable for the ref of the section last selected by the user.
this.activeSectionId = koUtil.observableWithDefault(ko.observable(), () => {
// The default function which is used when the conditional case is true.
// Read may occur for recently disposed sections, must check condition first.
// `!this.getRowId()` implies that this is an empty (non-existent) view record
// which happens when viewing the raw data tables, in which case the default is no active view section.
if (this.isDisposed() || !this.getRowId()) { return 0; }
const all = this.viewSections().all();
const collapsed = new Set(this.activeCollapsedSections());
const visible = all.filter(x => !collapsed.has(x.id()));
return visible.length > 0 ? visible[0].getRowId() : 0;
});
this.activeSection = refRecord(docModel.viewSections, this.activeSectionId);
// If the active section is removed, set the next active section to be the default.
this._isActiveSectionGone = this.autoDispose(ko.computed(() => this.activeSection()._isDeleted()));
this.autoDispose(this._isActiveSectionGone.subscribe(gone => {