diff options
Diffstat (limited to 'src/client/views/collections/CollectionStackingView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 69 |
1 files changed, 32 insertions, 37 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 6bbd43b1b..25a222cbb 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -5,7 +5,6 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ClientUtils, DivHeight, returnNone, returnZero, setupMoveUpEvents, smoothScroll } from '../../../ClientUtils'; import { Doc, Opt } from '../../../fields/Doc'; -import { DocData } from '../../../fields/DocSymbols'; import { Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; @@ -35,6 +34,7 @@ import './CollectionStackingView.scss'; import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn'; import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView'; import { computedFn } from 'mobx-utils'; +import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; export type collectionStackingViewProps = { sortFunc?: (a: Doc, b: Doc) => number; @@ -55,7 +55,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection _docXfs: { height: () => number; width: () => number; stackedDocTransform: () => Transform }[] = []; // Doesn't look like this field is being used anywhere. Obsolete? _columnStart: number = 0; - _oldWheel: HTMLElement | null = null; @observable _refList: HTMLElement[] = []; // map of node headers to their heights. Used in Masonry @@ -90,7 +89,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return NumCast(this.layoutDoc._xMargin, Math.max(3, 0.05 * this._props.PanelWidth())); } @computed get yMargin() { - return this._props.yPadding || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth())); + return this._props.yMargin || NumCast(this.layoutDoc._yMargin, Math.min(5, 0.05 * this._props.PanelWidth())); } @computed get gridGap() { @@ -112,7 +111,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection @computed get columnWidth() { const availableWidth = this._props.PanelWidth() - 2 * this.xMargin; const cwid = availableWidth / (NumCast(this.Document._layout_columnCount) || this._props.PanelWidth() / NumCast(this.Document._layout_columnWidth, this._props.PanelWidth() / 4)); - return Math.min(availableWidth, this.isStackingView ? Number.MAX_VALUE : cwid - this.gridGap); + return Math.min(availableWidth, this.isStackingView ? availableWidth / (this.numGroupColumns || 1) : cwid - this.gridGap); } @computed get NodeWidth() { @@ -310,17 +309,17 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.styleProvider?.(doc, props, property); }; @undoBatch - onKeyDown = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => { + onKey = (e: KeyboardEvent, textBox: FormattedTextBox) => { if (['Enter'].includes(e.key) && e.ctrlKey) { e.stopPropagation?.(); - const layoutFieldKey = StrCast(fieldProps.fieldKey); - const newDoc = Doc.MakeCopy(fieldProps.Document, true); - const dataField = fieldProps.Document[Doc.LayoutFieldKey(newDoc)]; - newDoc[DocData][Doc.LayoutFieldKey(newDoc)] = dataField === undefined || Cast(dataField, listSpec(Doc), null)?.length !== undefined ? new List<Doc>([]) : undefined; - if (layoutFieldKey !== 'layout' && fieldProps.Document[layoutFieldKey] instanceof Doc) { - newDoc[layoutFieldKey] = fieldProps.Document[layoutFieldKey]; + const layoutFieldKey = StrCast(textBox.fieldKey); + const newDoc = Doc.MakeCopy(textBox.Document, true); + const dataField = textBox.Document[Doc.LayoutDataKey(newDoc)]; + newDoc['$' + Doc.LayoutDataKey(newDoc)] = dataField === undefined || Cast(dataField, listSpec(Doc), null)?.length !== undefined ? new List<Doc>([]) : undefined; + if (layoutFieldKey !== 'layout' && textBox.Document[layoutFieldKey] instanceof Doc) { + newDoc[layoutFieldKey] = textBox.Document[layoutFieldKey]; } - newDoc[DocData].text = undefined; + newDoc.$text = undefined; DocumentView.SetSelectOnLoad(newDoc); return this.addDocument?.(newDoc); } @@ -340,10 +339,10 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection isChildButtonContentActive = () => (this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false ? false : undefined); @observable docRefs = new ObservableMap<Doc, DocumentView>(); - childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null)); + childFitWidth = (doc: Doc) => Cast(this.Document.childLayoutFitWidth, 'boolean', this._props.childLayoutFitWidth?.(doc) ?? Cast(doc.layout_fitWidth, 'boolean', null) ?? null); // this is what renders the document that you see on the screen // called in Children: this actually adds a document to our children list - getDisplayDoc(doc: Doc, trans: () => string, count: number) { + getDisplayDoc = (doc: Doc, trans: () => string, count: number) => { const dataDoc = doc.isTemplateDoc || doc.isTemplateForField ? this._props.TemplateDataDocument : undefined; this._docXfs.push({ stackedDocTransform: this.getDocTransform(doc), width: this.getDocWidth(doc), height: this.getDocHeight(doc) }); return count > this._renderCount ? null : ( @@ -359,7 +358,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection containerViewPath={this.childContainerViewPath} fitWidth={this.childFitWidth} isContentActive={doc.onClick ? this.isChildButtonContentActive : this.isChildContentActive} - onKey={this.onKeyDown} + onKey={this.onKey} DataTransition={trans} isDocumentActive={this.isContentActive} LayoutTemplate={this._props.childLayoutTemplate} @@ -382,8 +381,9 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection hideDecorations={this._props.childHideDecorations} childFiltersByRanges={this.childDocRangeFilters} searchFilterDocs={this.searchFilterDocs} - xPadding={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)} - yPadding={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)} + xMargin={NumCast(this.layoutDoc._childXPadding, this._props.childXPadding)} + yMargin={NumCast(this.layoutDoc._childYPadding, this._props.childYPadding)} + rejectDrop={this._props.childRejectDrop} addDocument={this._props.addDocument} moveDocument={this._props.moveDocument} removeDocument={this._props.removeDocument} @@ -393,7 +393,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection pinToPres={this._props.pinToPres} /> ); - } + }; getDocTransform = computedFn((doc: Doc) => () => { // these must be referenced for document decorations to update when the text box container is scrolled @@ -404,11 +404,11 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection const { translateX, translateY, scale } = ClientUtils.GetScreenTransform(dref?.ContentDiv); return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1) - .scale(1 / scale); // prettier-ignore + .scale(1 / (scale||1)); // prettier-ignore }); getDocWidth = computedFn((d?: Doc) => () => { if (!d) return 0; - const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.()); + const childLayoutDoc = Doc.LayoutDoc(d, this._props.childLayoutTemplate?.()); const maxWidth = this.columnWidth / this.numGroupColumns; if (!this.layoutDoc._columnsFill && !this.childFitWidth(childLayoutDoc)) { return Math.min(NumCast(d._width), maxWidth); @@ -418,8 +418,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection getDocTransition = computedFn((d?: Doc) => () => StrCast(d?.dataTransition)); getDocHeight = computedFn((d?: Doc) => () => { if (!d || d.hidden) return 0; - const childLayoutDoc = Doc.Layout(d, this._props.childLayoutTemplate?.()); - const childDataDoc = !d.isTemplateDoc && !d.isTemplateForField ? undefined : this._props.TemplateDataDocument; + const childLayoutDoc = Doc.LayoutDoc(d, this._props.childLayoutTemplate?.()); + const childDataDoc = d.isTemplateDoc || d.isTemplateForField ? this._props.TemplateDataDocument : undefined; const maxHeight = (lim => (lim === 0 ? this._props.PanelWidth() : lim === -1 ? 10000 : lim))(NumCast(this.layoutDoc.childLimitHeight, -1)); const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._width) : 0); const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!this.childFitWidth(childLayoutDoc) ? NumCast(d._height) : 0); @@ -575,8 +575,8 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection addDocument={this.addDocument} chromeHidden={this.chromeHidden} colHeaderData={this.colHeaderData} - Document={this.Document} - TemplateDataDocument={this._props.TemplateDataDocument} + Doc={this.Document} + TemplateDataDoc={this._props.TemplateDataDocument} renderChildren={this.children} columnWidth={this.columnWidth} numGroupColumns={this.numGroupColumns} @@ -611,7 +611,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection <div style={{ top: this.yMargin }}> <CollectionMasonryViewFieldRow showHandle={first} - Document={this.Document} + Doc={this.Document} chromeHidden={this.chromeHidden} pivotField={this.pivotField} refList={this._refList} @@ -675,12 +675,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection } return35 = () => 35; + @computed get menuBtnDoc() { return DocCast(this.layoutDoc.layout_headerButton); } // prettier-ignore @computed get buttonMenu() { - const menuDoc = DocCast(this.layoutDoc.layout_headerButton); - return !menuDoc ? null : ( - <div className="buttonMenu-docBtn" style={{ width: NumCast(menuDoc._width, 30), height: NumCast(menuDoc._height, 30) }}> + return !this.menuBtnDoc ? null : ( + <div className="buttonMenu-docBtn" style={{ width: NumCast(this.menuBtnDoc._width, 30), height: NumCast(this.menuBtnDoc._height, 30) }}> <DocumentView - Document={menuDoc} + Document={this.menuBtnDoc} isContentActive={this.isContentActive} isDocumentActive={this.isContentActive} addDocument={this._props.addDocument} @@ -720,7 +720,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection return this._props.isContentActive() === false ? 'none' : undefined; } - onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); render() { TraceMobx(); const editableViewProps = { @@ -728,13 +727,12 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection SetValue: this.addGroup, contents: '+ ADD A GROUP', }; - const buttonMenu = this.layoutDoc.layout_headerButton; const noviceExplainer = this.layoutDoc.layout_explainer; return ( <> - {buttonMenu || noviceExplainer ? ( + {this.menuBtnDoc || noviceExplainer ? ( <div className="documentButtonMenu"> - {buttonMenu ? this.buttonMenu : null} + {this.menuBtnDoc ? this.buttonMenu : null} {Doc.noviceMode && noviceExplainer ? <div className="documentExplanation">{StrCast(noviceExplainer)}</div> : null} </div> ) : null} @@ -744,10 +742,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection ref={ele => { this._masonryGridRef = ele; this.createDashEventsTarget(ele); // so the whole grid is the drop target? - this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); - this._oldWheel = ele; - // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling - ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + this.fixWheelEvents(ele, this._props.isContentActive); }} style={{ overflowY: this.isContentActive() ? 'auto' : 'hidden', |