diff options
Diffstat (limited to 'src/client/views/collections/CollectionStackingView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.tsx | 65 |
1 files changed, 18 insertions, 47 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 43a7333d0..3cf4f98b7 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -25,20 +25,19 @@ import { ContextMenuProps } from "../ContextMenuItem"; import { ScriptBox } from "../ScriptBox"; import { CollectionMasonryViewFieldRow } from "./CollectionMasonryViewFieldRow"; -let _height: number = 0; +// let _height: number = 0; @observer export class CollectionStackingView extends CollectionSubView(doc => doc) { _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef<HTMLDivElement>(); + @observable _heightMap = new Map<string, number>(); _heightDisposer?: IReactionDisposer; _childLayoutDisposer?: IReactionDisposer; _sectionFilterDisposer?: IReactionDisposer; _docXfs: any[] = []; _columnStart: number = 0; - // _height: number = 0; @observable private cursor: CursorProperty = "grab"; - // @computed private _height: number = 0; @computed get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); } @computed get sectionFilter() { return StrCast(this.props.Document.sectionFilter); } @computed get filteredChildren() { return this.childDocs.filter(d => !d.isMinimized); } @@ -58,12 +57,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { childDocHeight(child: Doc) { return this.getDocHeight(Doc.GetLayoutDataDocPair(this.props.Document, this.props.DataDoc, this.props.fieldKey, child).layout); } - addToDocHeight(sectionHeight: number) { - // if (_height !== undefined) { - console.log("indiv height: " + _height); - _height += sectionHeight; - // } - // return _height; + @action + setDocHeight = (key: string, sectionHeight: number) => { + this._heightMap.set(key, sectionHeight); } get layoutDoc() { @@ -103,10 +99,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { componentDidMount() { this._childLayoutDisposer = reaction(() => [this.childDocs, Cast(this.props.Document.childLayout, Doc)], - async (args) => args[1] instanceof Doc && - this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined))); + async (args) => { + args[1] instanceof Doc && + this.childDocs.map(async doc => !Doc.AreProtosEqual(args[1] as Doc, (await doc).layout as Doc) && Doc.ApplyTemplateTo(args[1] as Doc, (await doc), undefined)); + }) + - // is there any reason this needs to exist? -syip. yes, it handles autoHeight for stacking and masonry views -eeng. + // is there any reason this needs to exist? -syip. yes, it handles autoHeight for stacking and masonry views -eeng this._heightDisposer = reaction(() => { if (BoolCast(this.props.Document.autoHeight)) { let sectionsList = Array.from(this.Sections.size ? this.Sections.values() : [this.filteredChildren]); @@ -114,40 +113,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { return this.props.ContentScaling() * sectionsList.reduce((maxHght, s) => Math.max(maxHght, (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin)), 0); } else { - // let rowArray: CollectionMasonryViewFieldRow[] = []; - for (let i = 0; i < this.Sections.size; i++) { - // rowArray.push(this._masonryGridRef); - } - let sum: number = 0; - // let counter: number = 0; - sum += _height; //calculated height of the node from the masonry prop - // console.log("height: " + _height); - if (this.sectionHeaders !== undefined) { - // this.sectionHeaders.forEach(sec => { - // if (sec.collapsed) { - // sum += 20; - // console.log("sec collapsed"); - // } else { - // // sum += sectionsList[counter].reduce((height, d, i) => height + this.childDocHeight(d) + (i === sectionsList[counter].length - 1 ? this.yMargin : this.gridGap), this.yMargin); - // // sum += NumCast(document.getElementsByClassName("collectionStackingView-sectionHeader-subCont").offsetHeight); - // // sum += this.addToDocHeight(this.Sections[counter]); - // // console.log("section is not collapsed"); - // sum += _height; - // // this.addToDocHeight(40); - // // console.log("this._height in componentDidMount: " + _height); - // } - // // console.log("IN IF STATEMENT, sum is: " + sum); - // counter += 1; - // }); - } - // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight + - // (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0); - sum += 20; //allow space for the "add group" button - console.log("sum: " + sum); - _height = 0; //without this the height get HUGE (just keeps adding i think...) - return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0)); //+47 - // return this.props.ContentScaling() * sectionsList.reduce((totalHeight, s) => totalHeight + - // (this.Sections.size ? 50 : 0) + s.reduce((height, d, i) => height + this.childDocHeight(d) + (i === s.length - 1 ? this.yMargin : this.gridGap), this.yMargin) + 47, 0); + let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0); + // let transformScale = this.props.ScreenToLocalTransform().Scale; + // let trueHeight = 30 * transformScale; + // sum += trueHeight; + sum += 30; + return this.props.ContentScaling() * (sum + (this.Sections.size ? 50 : 0)); } } return -1; @@ -357,7 +328,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { type={type} createDropTarget={this.createDropTarget} screenToLocalTransform={this.props.ScreenToLocalTransform} - addToDocHeight={this.addToDocHeight} + setDocHeight={this.setDocHeight} />; } |