diff --git a/app/client/components/ViewLayout.ts b/app/client/components/ViewLayout.ts index 819acd0e..793f8ed3 100644 --- a/app/client/components/ViewLayout.ts +++ b/app/client/components/ViewLayout.ts @@ -18,6 +18,7 @@ import {editableLabel} from 'app/client/ui2018/editableLabel'; import {DisposableWithEvents} from 'app/common/DisposableWithEvents'; import {mod} from 'app/common/gutil'; import {computedArray, Disposable, dom, fromKo, Holder, IDomComponent, styled, subscribe} from 'grainjs'; +import {Observable} from 'grainjs'; import * as ko from 'knockout'; import * as _ from 'underscore'; @@ -71,6 +72,7 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent { private _freeze = false; private _layout: any; private _sectionIds: number[]; + private _isResizing = Observable.create(this, false); constructor(public readonly gristDoc: GristDoc, viewId: number) { super(); @@ -99,6 +101,7 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent { const layoutSaveDelay = this.autoDispose(new Delay()); this.listenTo(this._layout, 'layoutUserEditStop', () => { + this._isResizing.set(false); layoutSaveDelay.schedule(1000, () => { if (!this._layout) { return; } (this.viewModel.layoutSpecObj as any).setAndSave(this._layout.getLayoutSpec()); @@ -107,7 +110,10 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent { }); // Do not save if the user has started editing again. - this.listenTo(this._layout, 'layoutUserEditStart', () => layoutSaveDelay.cancel()); + this.listenTo(this._layout, 'layoutUserEditStart', () => { + layoutSaveDelay.cancel(); + this._isResizing.set(true); + }); this.autoDispose(LayoutEditor.create(this._layout)); @@ -198,6 +204,7 @@ export class ViewLayout extends DisposableWithEvents implements IDomComponent { )), dom.maybe(vs.viewInstance, (viewInstance) => dom('div.view_data_pane_container.flexvbox', + cssResizing.cls('', this._isResizing), dom.maybe(viewInstance.disableEditing, () => dom('div.disable_viewpane.flexvbox', 'No data') ), @@ -365,3 +372,11 @@ const cssLayoutBox = styled('div', ` } } `); + +// This class is added while sections are being resized (or otherwise edited), to ensure that the +// content of the section (such as an iframe) doesn't interfere with mouse drag-related events. +// (It assumes that contained elements do not set pointer-events to another value; if that were +// important then we'd need to use an overlay element during dragging.) +const cssResizing = styled('div', ` + pointer-events: none; +`);